/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*

Font sizes:
12 px - small text
14 px - small text
16 px - Normal text
18 px - bigger text
20 px - bigger text
24 px - huge text
32 px - huge text
48 px - huge text
*/



/* Custom properties, CSS Variables */
@font-face {
  font-family: 'proximanova';
  src: url("/assets/proximanova_regular-ae9492c4.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "proximanova";
  src: url("/assets/proximanova_bold-7b0f0c3b.otf") format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



:root {
/*  Primary
These are the splashes of color that should appear the most in your UI,
and are the ones that determine the overall "look" of the site. Use these
for things like primary actions, links, navigation items, icons, accent
borders, or text you want to emphasize.  */
  --blue-050: hsla(205, 79%, 92%, 1.0);
  --blue-100: hsla(205, 97%, 85%, 1.0);
  --blue-200: hsla(205, 84%, 74%, 1.0);
  --blue-300: hsla(205, 74%, 65%, 1.0);
  --blue-400: hsla(205, 65%, 55%, 1.0);
  --blue-500: hsla(205, 67%, 45%, 1.0);
  --blue-600: hsla(205, 76%, 39%, 1.0);
  --blue-700: hsla(205, 82%, 33%, 1.0);
  --blue-800: hsla(205, 87%, 29%, 1.0);
  --blue-900: hsla(205, 100%, 21%, 1.0);
  
  --yellow-vivid-050: hsla(49, 100%, 96%, 1.0);
  --yellow-vivid-100: hsla(48, 100%, 88%, 1.0);
  --yellow-vivid-200: hsla(48, 95%, 76%, 1.0);
  --yellow-vivid-300: hsla(48, 94%, 68%, 1.0);
  --yellow-vivid-400: hsla(44, 92%, 63%, 1.0);
  --yellow-vivid-500: hsla(42, 87%, 55%, 1.0);
  --yellow-vivid-600: hsla(36, 77%, 49%, 1.0);
  --yellow-vivid-700: hsla(29, 80%, 44%, 1.0);
  --yellow-vivid-800: hsla(22, 82%, 39%, 1.0);
  --yellow-vivid-900: hsla(15, 86%, 30%, 1.0);
  
/*  Neutrals
These are the colors you will use the most and will make up the majority
of your UI. Use them for most of your text, backgrounds, and borders,
as well as for things like secondary buttons and links.  */
  --blue-grey-050: hsla(210, 36%, 96%, 1.0);
  --blue-grey-100: hsla(212, 33%, 89%, 1.0);
  --blue-grey-200: hsla(210, 31%, 80%, 1.0);
  --blue-grey-300: hsla(211, 27%, 70%, 1.0);
  --blue-grey-400: hsla(209, 23%, 60%, 1.0);
  --blue-grey-500: hsla(210, 22%, 49%, 1.0);
  --blue-grey-600: hsla(209, 28%, 39%, 1.0);
  --blue-grey-700: hsla(209, 34%, 30%, 1.0);
  --blue-grey-800: hsla(211, 39%, 23%, 1.0);
  --blue-grey-900: hsla(209, 61%, 16%, 1.0);
  
/*  Supporting
These colors should be used fairly conservatively throughout your UI to
avoid overpowering your primary colors. Use them when you need an
element to stand out, or to reinforce things like error states or positive
trends with the appropriate semantic color.  */
  --cyan-050: hsla(186, 100%, 94%, 1.0);
  --cyan-100: hsla(185, 94%, 87%, 1.0);
  --cyan-200: hsla(184, 80%, 74%, 1.0);
  --cyan-300: hsla(184, 65%, 59%, 1.0);
  --cyan-400: hsla(185, 57%, 50%, 1.0);
  --cyan-500: hsla(185, 62%, 45%, 1.0);
  --cyan-600: hsla(184, 77%, 34%, 1.0);
  --cyan-700: hsla(185, 81%, 29%, 1.0);
  --cyan-800: hsla(185, 84%, 25%, 1.0);
  --cyan-900: hsla(184, 91%, 17%, 1.0);
  
  --red-050: hsla(360, 100%, 97%, 1.0);
  --red-100: hsla(360, 82%, 89%, 1.0);
  --red-200: hsla(360, 77%, 78%, 1.0);
  --red-300: hsla(360, 71%, 66%, 1.0);
  --red-400: hsla(360, 64%, 55%, 1.0);
  --red-500: hsla(360, 67%, 40%, 1.0);
  --red-600: hsla(360, 72%, 38%, 1.0);
  --red-700: hsla(360, 79%, 32%, 1.0);
  --red-800: hsla(360, 85%, 25%, 1.0);
  --red-900: hsla(360, 92%, 20%, 1.0);
  
/*  Test - Gray  */
  --gray0: hsla(0, 0%, 90%, 1.0);
  --gray1: hsla(0, 0%, 80%, 1.0);
  --gray2: hsla(0, 0%, 70%, 1.0);
  --gray3: hsla(0, 0%, 60%, 1.0);
  --gray4: hsla(0, 0%, 50%, 1.0);
  --gray5: hsla(0, 0%, 40%, 1.0);
  --gray6: hsla(0, 0%, 30%, 1.0);
  --gray7: hsla(0, 0%, 20%, 1.0);
  --gray8: hsla(0, 0%, 10%, 1.0);
  --gray9: hsla(0, 0%, 00%, 1.0);
}


html, body {
  background-color: var(--blue-grey-050);
  color: var(--blue-grey-900);
  margin: 0;
  font-family: 'proximanova', sans-serif;
}

.main-content {
  height: 100%;
/*  background-color: red;*/
}


.site-footer {
  background: linear-gradient(
    to bottom right,
    var(--blue-700),
    var(--blue-900));
  color: var(--blue-200);
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: center;
  p {
    color: var(--blue-300);
  }
}

.site-footer a.footer {
  color: var(--blue-300);
}

.site-footer a:hover {
  color: var(--blue-100);
}

.title {
  text-align: center;
  font-size: 24px;
}

p {
  font-size: 16px;
  color: var(--blue-grey-900);
}

h1 {
  color: var(--blue-grey-900);
}

h2 {
  color: var(--blue-grey-900);
}

h3 {
  color: var(--blue-grey-900);
}

.highlight {
  background-color: var(--yellow-vivid-300);
}

.text-highlight {
  color: var(--yellow-vivid-700);
}

.text-success {
  color: var(--cyan-400);
}

.text-fail {
  color: var(--red-400);
}


input.custom-input {
  border-radius: 5px; /* Your rounding */
}

/* Optional: Hover/focus states for interactivity */
.custom-input:hover,
.custom-input:focus {
  border-color: #007bff; /* Change border on interaction */
  outline: none; /* Remove default outline */
}


/* In case of en error on a form */
.field_with_errors {
  display: inline !important; /*Prohibit radio button labels to be fored to a new line*/
  margin: 0;
  padding: 0;
}


/* Links */
/* unvisited link */
a:link {
  color: var(--blue-500);
}

/* visited link */
a:visited {
  color: var(--blue-500);
}

/* mouse over link */
a:hover {
  color: var(--blue-900);
}

/* selected link */
a:active {
  color: var(--blue-500);
}

button.link-select {
  color: var(--cyan-600);
}

button.link-select:hover {
  color: var(--cyan-800);
}

button.link-highlight {
  color: var(--yellow-vivid-500);
}

button.link-danger {
  color: var(--red-500);
}

button.link-danger:hover {
  color: var(--red-800);
}

/* Nav bar */
.nav-bar-custom {
  background: linear-gradient(
    to top right,
    var(--blue-700), 
    var(--blue-900));
  
  .logo-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue-100);
/*    flex-direction: row;*/
/*    background-color: red;*/
    .logo{
/*      background-color: red;*/
      margin: 0px 10px 0px 10px;
      font-size: 24px;
    }
  }

  a.nav-bar-button-custom:link {
    color: var(--blue-100);
  }

  a.nav-bar-button-custom:visited {
    color: var(--blue-100);
  }

  a.nav-bar-button-custom:hover {
    color: var(--blue-050);
  }

  a.nav-bar-button-custom:active {
    color: var(--blue-100);
  }

  .nav-bar-button-custom {
    color: var(--blue-100);
  }

  .nav-bar-button-custom:visited {
    color: var(--blue-100);
  }

  .nav-bar-button-custom:hover {
    color: var(--blue-050);
  }

  .nav-bar-button-custom:active {
    color: var(--blue-100);
  }

  .nav-bar-dropdown-custom {
    background-color: var(--blue-800);
    box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.20);
  }

  .nav-bar-dropdown-custom {
    background-color: var(--blue-800);
    box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.20);
  }

  .nav-bar-dropdown-custom {
    background-color: var(--blue-800);
    box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.20);
  }

  .nav-bar-dropdown-custom {
    background-color: var(--blue-800);
    box-shadow: 5px 4px 3px rgba(0, 0, 0, 0.20);
  }

  a.nav-bar-button-dropdown-custom:link {
    color: var(--blue-100);
    padding: 10px 20px 10px 20px;
    background-color: var(--blue-800);
  }

  a.nav-bar-button-dropdown-custom:visited {
    color: var(--blue-100);
    padding: 10px 20px 10px 20px;
    background-color: var(--blue-800);
  }

  a.nav-bar-button-dropdown-custom:hover {
    color: var(--blue-050);
    background-color: var(--blue-400);
  }

  .nav-bar-sendwich-custom {
    color: var(--blue-100);
  }

  .nav-bar-sendwich-custom:hover {
    background-color: var(--blue-500);
  }
  
  button.link-danger {
    background-color: var(--red-200);
  }
  
  button.exit-button {
    color: var(--blue-100);
    padding: 10px 20px 10px 20px;
    background-color: var(--blue-800);
  }

}



/* Button */
.button-single {
  padding: 10px 14px;
  border: none;
  border-radius: 5px;
  background-color: var(--blue-100);
  color: var(--blue-900);
  margin: 5px;
}

.button-single:hover {
  background-color: var(--blue-200);
}

.button-second {
  padding: 10px 14px;
  border: solid 2px var(--gray3);
  border-radius: 5px;
}

.button-danger {
  padding: 10px 14px;
  border: none;
  border-radius: 5px;
  background-color: var(--red-100);
  color: var(--red-900);
  margin: 5px;
}



/* Modal */
dialog {
  width: 80vw;
  margin: auto;
 
  &::backdrop {
    background: red;
    opacity: 0.2;
  }
 
  header {
    display: flex;
    align-items: center;
 
    h2 {
      flex: 0 1 100%;
    }
  }
}


.hidden {
  display: none;
}

.show {
  display: block;
}


/* Invoice Form */

.invoice-form-page {
  width: 1200px;
  .invoice-columns {
    display: flex;
    justify-content: center;
    .invoice-column {      
      background-color: #fff;
      width: 50%;
      margin: 10px;
      box-shadow: 3px 3px 6px #ccc;
      border-radius: 10px;
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 10px;
      .bottom-line {
        border-bottom: solid 2px var(--gray2);
        padding-bottom: 20px;
        margin-bottom: 20px;
      }  
      .invoice-item {
        margin-top: 10px;
        margin-bottom: 10px;
        .invoice-label {
          border: none;
        } 
        .invoice-control {
          font-size: 14px;
          margin-top: 5px;
          margin-bottom: 10px;
          width: 100%;
          border: none;
          height: 50px;
          background-color: var(--blue-grey-100);
          border-radius: 5px;
        }
        .invoice-control-area {
          border: none;
          margin: 10px 0px 5px 0px;
          height: 300px;
          width: 100%;
          background-color: var(--blue-grey-100);
          border-radius: 5px;
        }
        .invoice-button {
          border: none;
          margin: 10px 0px 5px 0px;
          height: 300px;
          width: 100%;
          background-color: var(--gray0);
          border-radius: 5px;
        }
        .invoice-static {
          font-size: 14px;
          margin-top: 5px;
          margin-bottom: 10px;
          width: 100%;
          border: none;
          height: 50px;
          background-color: var(--blue-grey-100);
          border-radius: 5px;
          text-align: right;
          
        }        
      }
      .buttons {
        text-align: right;
      }
    }
  }
  .invoice-products {
    box-shadow: 3px 3px 6px #ccc;
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    .nested-group {
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--gray3);
      .nested-items {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: start;
        padding: 10px 10px 0px 10px;
        width: 100%;
        .invoice-item {  
          .invoice-label {
            font-size: 14px;
          }   
          .invoice-control {
            background-color: var(--blue-grey-100);
            border-radius: 5px;
            font-size: 14px;
          }
          .product-name {
            width: 340px;
            margin: 10px;     
            border: none;
            height: 50px;
          }
          .unit-price {
            width: 120px;
            margin: 10px;
            border: none;        
            height: 50px;            
            text-align: right;
          }
          .net-price {
            width: 120px;
            margin: 10px;
            border: none;        
            height: 50px;
            text-align: right;
            background-color: #fff;
          }
          .gross-price {
            width: 120px;
            margin: 10px;
            border: none;
            height: 50px;  
            text-align: right;   
            background-color: #fff;   
          }
          .tax {
            width: 100px;
            margin: 10px; 
            border: none; 
            height: 50px; 
            text-align: center;     
          }      
          .amount {
            width: 80px;
            margin: 10px;  
            border: none; 
            height: 50px;  
            text-align: right;   
          }
          .unit {
            width: 100px;
            margin: 10px; 
            border: none; 
            height: 50px;      
          }
          .note {
            width: 600px;
            margin: 10px;
            border: none;
            height: 50px;
          }
          .diff-tax {
            width: 250px;
            margin: 10px; 
            border: none; 
            height: 50px;  
          }
        }
      }
    }
    .add-new-line {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .invoice-totals {
    display: flex;
    flex-direction: column;
  }
}



/* Simple box */
.box {
  .strong {
    font-weight: 800;
    text-align: center;
    padding-bottom: 10px;
  }
  .title {
    font-size: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .summary {
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    .column {
      border-left: 1px solid var(--gray2);
      border-right: 1px solid var(--gray2);
      padding-left: 10px;
      padding-right: 10px;
      margin: 4px;
      width: 360px;
      .line {
        display: flex;
        justify-content: space-between;
      }        
    }
  }
  .wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #bbb;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    .label {
      font-size: 16px;
    }
    .text-field {
      font-size: 16px;
      margin-top: 5px;
      border-radius: 5px;
      width: 100%;
      height: 50px;
      background-color: var(--blue-grey-100);
      border: none;
    }
    .pagination {
      text-align: center;
      padding: 10px;
    }
    .position {
      display: flex;
      justify-content: center;
    }
  }
}


/* Button control */
.buttons {
  margin-bottom: 10px;
  .strong {
    font-weight: 800;
    text-align: center;
/*    padding-bottom: 10px;*/
  }
  .title {
    font-size: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .summary {
    display: flex;
    justify-content: center;
    .column {
      border-left: 1px solid var(--gray2);
      border-right: 1px solid var(--gray2);
      padding-left: 10px;
      padding-right: 10px;
      margin: 4px;
      width: 360px;
      .line {
        display: flex;
        justify-content: space-between;
      }        
    }
  }
  .lines-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .line-item {
      display: flex;
      justify-content: center;
      margin: 10px;
    }
    .export-button {
      display: flex;
      justify-content: right;
      margin: 10px;
    }
  }
  .wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    .pagination {
      text-align: center;
      padding: 10px;
    }
    table {
      width: 1200px;
      table-layout: fixed;
      width: 100%;
      th, td {
        padding: 10px;
        border-top: 1px solid var(--gray2);
        word-wrap: break-word;
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}



/* Invoice Table */
.invoice-table {
  margin-bottom: 40px;
  width: 100%;
  .title {
    text-align: center;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    width: 100%;
    .pagination-top {
      text-align: center;
      padding-top: 30px;
    }
    .pagination-bottom {
      text-align: center;
      padding-bottom: 30px;
    }
    table {            
      width: 100%;
      margin-top: 20px;
      margin-bottom: 40px;
/*      background-color: green;*/
      th {
        padding: 10px;        
        word-wrap: break-word;
        font-weight: 600;
        padding-left: 4%;
        padding-right: 2%;
/*        background-color: red;*/
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--blue-grey-100);
        padding-left: 4%;
        padding-right: 2%;
        .test-invoice {
          background-color: var(--red-200);
          text-align: center;
        }
/*        vertical-align: top;*/
/*        background-color: blue;*/
      }
      .lower-part {
        background-color: var(--blue-grey-100);
        .items {          
          display: flex;
          flex-wrap: wrap;
          direction: column;
          justify-content: center;
          .item {
            padding: 10px;
          }
        }
      }
      .small-cell { 
        width: 18%;
/*        background-color: green;*/
      }
      .large-cell {
        width: 28%;
/*        background-color: red;*/
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .icon-cell {
        text-align: center;
        .icon { 
          margin-left: auto;
          margin-right: auto;
        }
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}



/* Incoming Invoice Table */
.incoming-invoice-table {
  margin-bottom: 40px;
  width: 100%;
  div.table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    border-radius: 10px;
    width: 100%;
    .search {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 40px 10px 40px;
      border-radius: 10px 10px 0px 0px;
      .spacer {
        color: #fff;
        width: 50px;
      }
      .search-box {
        left: 50%;
        padding: 8px 12px;
        border-radius: 4px;
      }
      
    }
    .export {
      text-align: right;
/*      background-color: red;*/
      padding: 10px;
    }
    .pagination-top {
      text-align: center;
      padding-top: 20px;
    }
    .pagination-bottom {
      text-align: center;
      padding-bottom: 30px;
    }
    table {      
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      table-layout: fixed;
      th {
        padding: 10px;        
        word-wrap: break-word;
        font-weight: 600;
        padding-left: 4%;
        padding-right: 2%;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--blue-grey-100);
        padding-left: 4%;
        padding-right: 2%;       
      }
      .file-upload-cell {
/*        background-color: red;*/
        padding-left: 10px;
        padding-right: 5px;
      }
      .small-cell { 
        width: 15%;
/*        background-color: green;*/
      }
      .large-cell {
        width: 40%;
/*        background-color: red;*/
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: var(--yellow-vivid-800);
          background-color: var(--yellow-vivid-100);
          padding: 5px 10px 5px 10px;
          border-radius: 20px;
          margin: 5px;
        }
        /* visited link */
        a:visited {
          color: var(--yellow-vivid-800);
        }
        /* mouse over link */
        a:hover {
          color: var(--yellow-vivid-800);
          background-color: var(--yellow-vivid-200);
        }
        /* selected link */
        a:active {
          color: var(--yellow-vivid-800);
        }
      }
      .link-danger {
        a:link {
          color: var(--red-800);
          background-color: var(--red-100);
          padding: 5px 10px 5px 10px;
          border-radius: 20px;
          margin: 5px;
        }
        /* visited link */
        a:visited {
          color: var(--red-800);
        }
        /* mouse over link */
        a:hover {
          color: var(--red-800);
          background-color: var(--red-200);
        }
        /* selected link */
        a:active {
          color: var(--red-800);
        }
      }
    }
  }
}


/* Incoming Invoices Details */
.incoming-invoice-details {
  margin-bottom: 10px;
  width: 100%;
  h1 {
    margin-bottom: 20px;
  }
  div.table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
    width: 100%;
    .invoice-number {
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
    }
    .summary {
/*      background-color: red;*/
      display: flex;
      justify-content: center;
      background-color: var(--blue-grey-100);
      .column {
        border-left: 1px solid var(--blue-grey-200);
        border-right: 1px solid var(--blue-grey-200);
        padding-left: 10px;
        padding-right: 10px;
        margin: 4px;
        width: 30%;
        .line {
          display: flex;
          justify-content: space-between;
        }        
      }
    }
    table {      
      margin-top: 10px;
      table-layout: fixed;
      padding: 20px;
/*      border-collapse: collapse;*/
/*      width: 100%;*/
/*      background-color: blue;*/
      th {
        padding: 10px;        
        color: var(--gray6);  
        font-weight: 800;
/*        background-color: red;*/
      }
      td {
        padding: 10px;       
/*        word-wrap: break-word;*/
        overflow-wrap: anywhere;/* better than the older word-wrap alias */
        word-break: break-word;
        border-top: solid 1px var(--gray1);
        /*background-color: green;*/
      }
      .small-cell { 
        width: 15%;
/*        background-color: green;*/
      }
      .large-cell {
        width: 25%;
/*        background-color: red;*/
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}


/* Partners Table */
.partners-table {
  margin-bottom: 10px;
  max-width: 100%;
  .strong {
    font-weight: 800;
  }
  .title {
    text-align: center;
  }
  .button {
    text-align: right;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    border-radius: 10px;
    margin-bottom: 40px;
    .pagination-top {
      text-align: center;
      padding: 10px;
    }
    .pagination-bottom {
      text-align: center;
      padding: 10px;
    }
    table {      
      table-layout: fixed;
      width: 100%;
      th {
        padding: 10px;        
        color: var(--gray6);
        word-wrap: break-word;
        font-weight: 400;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--gray1);
      }
      .lower-part {
        background-color: var(--gray1);
        .items {          
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .item {
            padding: 10px;
          }
        }
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}


/* Subscriptions */
.subscriptions {
/*  background-color: red;*/
  margin-bottom: 10px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .strong {
    font-weight: 800;
  }
  .title {
    text-align: center;
  }
  .button {
    text-align: right;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    width: 90%;
    .box-highlight-wrapper {
      display: flex;
      justify-content: left;
      .box-highlight {
        background-color: var(--blue-050);
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        .bold-text {
          font-weight: 800;
        }
      }
    }
    .intro {
      font-size: 30px;
    }
    .plans {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .plan-option {
        border-radius: 10px;
        background-color: var(--blue-050);
        box-shadow: 3px 3px 10px #ccc;
        padding: 20px;
        width: 32%;
        .title {
          font-size: 24px;
          font-weight: 800;
        }
        .list {
          margin-bottom: 10px;
        }
        .description {
          padding: 10px 0px 10px 0px;
          font-size: 20px;
          line-height: 1.2;
        }
        span.subscription {
          font-size: 20px;
          font-weight: 800;
          padding: 10px;
        }
        .bolder {
          font-weight: 800;
        }
      }
    }
    .credit-card {
      padding: 10px;
    }
    .separate-button {
/*      background-color: green;*/
      padding: 10px;
    }
    .links {
      display: flex;
      justify-content: space-between;
      .item {
        padding: 10px;
      }
    }
    .pagination-top {
      text-align: center;
      padding: 10px;
    }
    .pagination-bottom {
      text-align: center;
      padding: 10px;
    }
    table {      
      table-layout: fixed;
      width: 100%;
      th {
        padding: 10px;        
        color: var(--gray6);
        word-wrap: break-word;
        font-weight: 400;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--gray1);
      }
      .lower-part {
        background-color: var(--gray1);
        .items {          
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .item {
            padding: 10px;
          }
        }
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}


/* Products Table */
.products-table {
  margin-bottom: 10px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .strong {
    font-weight: 800;
  }
  .title {
    text-align: center;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    border-radius: 10px;
    max-width: 800px;
    margin-bottom: 40px;
    .pagination-top {
      text-align: center;
      padding: 10px;
    }
    .pagination-bottom {
      text-align: center;
      padding: 10px;
    }
    table {      
      display: flex;
      justify-content: center;
      table-layout: fixed;
      th {
        padding: 10px;        
        color: var(--gray6);
        word-wrap: break-word;
        font-weight: 400;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--gray1);
      }
      .small-cell { 
        width: 25%;
/*        background-color: green;*/
      }
      .large-cell {
        width: 25%;
/*        background-color: red;*/
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}



/* API Data */
.api-data {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .strong {
    font-weight: 800;
  }
  .title {
    text-align: center;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin-bottom: 40px;
    .sub-title {
      font-weight: 800;
    }
    .label {
      display: inline-block;
      vertical-align: middle;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .text {
      display: inline-block;
      vertical-align: middle;
    }
    .item {
      width: 800px;
      margin-bottom: 20px;
      li {
        padding: 5px 0px 5px 0px;
      }
/*      background-color: red;*/

    }
  }
}




/* Invoice */
/* A4 page is: 210 x 297 */
.invoice {
  width: 1050px;
  height: 1485px;
  padding: 30px;
  background-color: #fff;
  .top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px  ;
    border-bottom: 2px solid var(--gray9);
  }
  .companies {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray9);
    display: flex;
    justify-content: space-between;
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
  }
  .dates {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray9);
    display: flex;
    justify-content: space-between;
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
  }
}

.rolldown {
  border-radius: 5px;
}


/* Form */
.form-design {
  background-color: #fff;
  padding: 20px 30px 20px 30px;
  margin: 20px 0px 50px 0px;
  border-radius: 10px;
  box-shadow: 3px 3px 6px #ccc;
  .title {
    text-align: center;
    padding: 10px;
    .status {
      text-align: center;
      font-size: 16px;
    }
  }
  a:link {
    color: var(--blue-500);
  }
  a:visited {
    color: var(--blue-500);
  }
  a:hover {
    color: var(--yellow-vivid-500);
  }
  a:active {
    color: var(--blue-300);
  }
  .bottom-line {
    border-bottom: solid 2px var(--gray2);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }  
  .line-item {
    margin-top: 20px;
  }
  .label {
    font-size: 16px;
  }
  .text-field {
    font-size: 16px;
    margin-top: 5px;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    background-color: var(--blue-grey-100);
    border: none;
  }
  .other {
    font-size: 16px;
    margin-top: 5px;
    border-radius: 5px;
    border: none;
  }
  .buttons {
    margin-top: 20px;
    text-align: right;
    display: flex;
    justify-content: space-between;
    .button {
      padding-top: 10px;
    }    
  }
  .button {
    margin-top: 20px;
    text-align: right;
    display: flex;
    justify-content: end;
    .button {
      padding-top: 10px;
    }    
  }
  .button-warning {
    color: var(--red-300);
  }
  .button-warning:hover {
    color: var(--red-500);
  }
  table {
    margin-top: 20px;
    width: 100%;
    tr {
      height: 50px;
      border-top: 1px solid var(--blue-grey-200);
      .left {
        vertical-align: top;
      }
      .center {
        display: flex;
        justify-content: center;
      }
      .right {
      }
    }
  }
}


.static-text {
  max-width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-bottom: 50px;
  section {
    margin-top: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  h2 {
    font-size: 24px;
  }
}



.show-on-small {
  display: none;
}



/* Service Box */
.service-box {
  margin-top: 200px;
  border: 2px solid #444;
  left-padding: 200px;
  width: 300px;
}


/* Logs Table */
.logs-table {
  margin-bottom: 10px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .strong {
    font-weight: 800;
  }
  h1 {
    margin-bottom: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 40px;
    .pagination-top {
      text-align: center;
      padding: 10px;
    }
    .pagination-bottom {
      text-align: center;
      padding: 10px;
    }
    table {      
      display: flex;
      justify-content: center;
      table-layout: fixed;
      th {
        padding: 10px;        
        color: var(--gray6);
        word-wrap: break-word;
        font-weight: 400;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--gray1);
      }
      .small-cell { 
        width: 25%;
/*        background-color: green;*/
      }
      .large-cell {
        width: 25%;
/*        background-color: red;*/
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}


/* Partners Table */
.general-table {
  margin-bottom: 10px;
  max-width: 100%;
  .strong {
    font-weight: 800;
  }
  .title {
    text-align: center;
/*    background-color: red;*/
    padding: 10px;
  }
  .button {
    text-align: right;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 20px;
  }
  .table-wrapper {
    background-color: #fff;
    box-shadow: 3px 3px 6px #ccc;
    padding-top: 10px;
    border-radius: 10px;
    margin-bottom: 40px;
    .pagination-top {
      text-align: center;
      padding: 10px;
    }
    .pagination-bottom {
      text-align: center;
      padding: 10px;
    }
    table {      
      table-layout: fixed;
      width: 100%;
      th {
        padding: 10px;        
        color: var(--gray6);
        word-wrap: break-word;
        font-weight: 400;
      }
      td {
        padding: 10px;
        word-wrap: break-word;
        border-top: solid 1px var(--gray1);
      }
      .lower-part {
        background-color: var(--gray1);
        .items {          
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .item {
            padding: 10px;
          }
        }
      }
      .center {
        text-align: center;
      }
      .right {
        text-align: right;
      }
      .left {
        text-align: left;
      }
      .link-normal {
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
      .button-warning {
        color: var(--red-300);
        a:link {
          color: orange;
        }
        /* visited link */
        a:visited {
          color: orange;
        }
        /* mouse over link */
        a:hover {
          color: orange;
        }
        /* selected link */
        a:active {
          color: orange;
        }
      }
    }
  }
}





@media (max-width: 1024px) {
  
  .hide-on-small {
    display: none;
  }  
  
  .show-on-small {
    display: block;
  }
  
  .incoming-invoice-table {
    div.table-wrapper {
      table {      
        .large-cell {
          width: 100%;
/*          background-color: green;*/
        }
        .small-cell {
          width: 50%;
/*          background-color: red;*/
        }
      }
    }
  }
  
  .incoming-invoice-details {
    div.table-wrapper {
      .summary {
        .column {
          width: 50%;   
/*          background-color: green;*/
        }
      }
      table {
        width: 100%;      
        .large-cell {
          width: 50%;
          padding: 20px;      
          margin: 20px;
/*          background-color: green;*/
        }
      }
    }
  }
  
  
}




@media (max-width: 768px) {
  


  
 
  
  
  
  
}