/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
    --gray: #1f2d36;
    --green:#13a100ff;
    --dark-green: #187f0aff;
    --bright: #fef8f0;
    --yellow: #f9b800;
  }
  
  .container {
    max-width: 1400px;
  }
  
  .height-100 {
    min-height: 100vh;
  }
  
  .height-80 {
    min-height: 80vh;
  }
  
  .bg-gray {
    background-color: var(--gray);
  }
  
  .bg-bright {
    background-color: var(--bright);
  }
  
  .bg-black-opac {
    background-color:#070604c0;
  }
  
  .bg-yellow {
    background-color: var(--yellow);
  }
  
  .bg-yellow:hover { 
     background-color: hsl(44, 100%, 65%);
   } 
  
  .bg-orange {
    background-color: #FA4812;
  }
  
   button.btn-title {
    border-style: none none solid solid;
    border-width: 5px;
    border-color: var(--yellow);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:white;
   }
  
  .btn-title:hover {
    color: var(--yellow);
  }
  
  .btn-title::before {
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    }
  
  .btn-title[aria-expanded="true"]::before {
      content: "\f106"
    }
  
  .btn-title[aria-expanded="false"] ::before {
  content: "\f107";
  }
  
  
  
  .bg-green:hover {
    background-color: var(--dark-green);
  }
  
  
  
  
  .bg-green,
  .btn-primary,
  .btn-success {
    background-color: var(--green);
    border-color: transparent;
    color: white;
  }
  
  .btn-primary:hover,
  .btn-success:hover,
  .btn-primary:focus,
  .btn-success:focus,
  .btn-primary:active,
  .btn-success:active
  {
    background-color: var(--dark-green);
    border-color: transparent;
  }
  
  body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color: var(--gray);
  }
  
  
  h3, h4, h5 {
      text-align: center;
  }
  
  a {
    text-decoration: none;
  }
  
  .page-info {
    background-color: #294455;
    height: 5rem;
  }
  .page-info p {
    margin:0;
  }
  
  
  
  button,
  input[type="button"] {
    display: inline-block;
    /*height: 38px;*/
    padding: 0 10px;
    color: #555;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    /*white-space: nowrap;*/
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  
  .btn-red {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    padding: 0 10px;
    margin: 3px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size:10px;
  }
  
  
  .btn-green {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    padding: 0 10px;
    margin: 3px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size:10px;
  }
  
  .btn-blue {
    color: #fff;
    background-color:#337ab7;
    border-color:#2e6da4;
    padding: 0 10px;
    margin: 3px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size:10px;
  }
  
  
  span {
  display: block;
  padding: 2px;
  pointer-events: none;
  }
  
  .alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
  }
  
  .row {
      padding:10px;
  }
  
  .table td {
    padding: 0 12px;
  }
  .table td.slim {
    padding:0;
    margin: 6px 0px;
  }
  .table td > button {
    margin: 3px 0;
  }
  
  
  .btn-fp {
    text-transform: initial;
    font-variant-caps: small-caps;
    font-size: 24px;
  }
  
  #tableToFill tr>th:nth-child(4),
  #tableToFill tr>th:nth-child(5),
  #tableToFill tr>th:nth-child(6) {
    font-style: italic;
  }
  
  
  #itemUnit,
  input[type="number"],
  input[type="url"],
  input[type="text"],
  textarea {
    height: 38px;
    max-width: 100%;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #fff;
    border: 2px solid #D1D1D1;
    border-radius: 4px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: 5px
   }
  /* Removes awkward default styles on some inputs for iOS */
  
  #itemUnit,
  input[type="number"],
  input[type="url"],
  input[type="text"],
  textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
          }
  
  textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
  
  }
  
  input[type="radio"] + label {
    padding-right: 20px;
    font-weight: normal;  
  } 
  
  .ft {
    padding-right: 6px;
    width: 8em;
    }
  
    .modifyItemButton,
    .deleteItemButton,
    .deleteFeeButton,
    .deleteTravelFeeButton,
    .deleteDiscountButton,
    .moveUpButton,
    .moveDownButton {
      font-size: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-right: 0px;
    }
  
    #tableToFill td {
      padding-right: 10px;
    }
  
  .saveButton {
      width: 320px;
      height: 60px;
      position: fixed;
      bottom: 50px;
      right: 50px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      background-color: #5cb85c;
      color: black;
      text-shadow: 2px 2px 1px white;
      font-size: 18px;
      text-align: center;
  
  }
  
  /* LOGIN  */
  #tm {
    font-weight: 600;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
  }
  
  @media screen and (max-width: 425px) {
    body {
      background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.813)), color-stop(rgba(0, 0, 0, 0.31)), to(rgba(255, 255, 255, 0))), url('../images/login_bg_mobile.jpg');
      background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.813), rgba(0, 0, 0, 0.31), rgba(255, 255, 255, 0)), url('../images/login_bg_mobile.jpg');
      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.813), rgba(0, 0, 0, 0.31), rgba(255, 255, 255, 0)), url('../images/login_bg_mobile.jpg');
    }
  }
  
  
  body {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.813)), color-stop(rgba(0, 0, 0, 0.31)), to(rgba(255, 255, 255, 0))), url('../images/login_bg.jpg');
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.813), rgba(0, 0, 0, 0.31), rgba(255, 255, 255, 0)), url('../images/login_bg.jpg');
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.813), rgba(0, 0, 0, 0.31), rgba(255, 255, 255, 0)), url('../images/login_bg.jpg');
    background-attachment: fixed;
    background-position: top right;
    background-size: cover;
  }
  
  
  
  .fas, .far {
    width:16px
  }
  
  .fa-trash-can:hover,
  .fa-pencil:hover
   {
    color: var(--yellow);
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  
  svg {
    fill: white
  }
  
  svg:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    fill: var(--yellow);
  }
  
  .login-box {
    width: clamp(350px, 25vw, 600px);
  }
  
  .login-submit {
    margin-top:23px;
  }
  
  /* dashboard */
  #client {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: inline-block;
  }
  
  /* client */
  #add-client {
    width: clamp(325px, 25vw, 600px)
  }
  
  @media screen and (max-width: 425px) {
    #add-client {
      min-width:300px;
      width: 90vw
    }
  }
  
  /*Create Pdf*/
  #mainPdf {
    fill: #555;
  }
  
  #mainPdf:hover {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  
  #dashboard_select_client {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  
  
  @media screen and (max-width: 375px) {
  #dashboard_client {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 90vw;
  }}
  
  #quot-main-btns > *{
    width: 15rem;
  }
  
  .form-check-input {
    vertical-align: middle;
    margin-top:0;
  }