/* --- Body ----------- */
  * {
    font-family: 'Nunito Sans',sans-serif;
    font-size: 14px;
  }

  body,
  html {
    background: #FAFAFA;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
  }

  a.home-link:hover {
    padding-bottom: 4px;
    border-bottom: 1px solid #3e819e;
  }

  input, button, *:focus {
    outline: none;
  }

  input, select{
    border: 1px solid #3e819e!important;
  }

  select,
  input:not([type="file"]) {
    height: 39px !important;
  }

  input:not([type="submit"]):read-only,
  input:disabled,
  select:disabled {
    color: #72828a !important;
    border: 1px solid #72828a !important;
    cursor: default;
    background-color: #FAFAFA;
  }

  li {
    margin: 0px !important;
    padding: 0px 8px !important;
    height: 32px !important;
  }

  hr {
    border-top: 1px solid #ccc;
    margin: 0px 0px 16px;
  }

  input[type="file"]{
    padding: 0px!important;
    height: 42px;
    font-size: 14px;
  }

  input[type="file"]::file-selector-button {
    font-family: calibri, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #3e819e;
    border: none;
    display: inline-block;
    padding: 0px 16px;
    margin: 0px;
    margin-right: 16px;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    height: 42px;
  }
  
  input[type="file"]::file-selector-button:hover{
    background-color: #809aa5!important;
    color: #FFFFFF;
    font-size: 14px;
  }

  .new-line {
    clear: left;
  }

  .main-container {
    padding-top: 16px;
    padding-bottom: 64px;
  }

  .too-line-border{
    border-top: 1px solid #3e819e !important;
    border-bottom: 1px solid #3e819e !important;
    margin-bottom: 64px;
  }

  .font-64{
    font-size: 128px;
    color: #3e819e;
  }

  .font-32{
    font-size: 48px;
    color: #3e819e;
  }

  .font-16{
    font-size: 24px;
    color: #3e819e;
  }

  .font-12{
    font-size: 14px;
    color: #3e819e;
  }

  .hover-text-red:hover{
    color:#E1554C;
  }

  .hover-red:hover{
    background:#E1554C !important;
    color:#FFFFFF !important;
  }

  .fading{
    animation: fading 2s infinite;
  }

  .eye{
    padding: 4px;
    height: 30px;
    width: 30px;
    margin-right: 16px;
    float: left!important;
  }

  .text{
    height: 61px;
  }

  .text > span{
    line-height: 45px;
  }

  @media screen and (min-width: 600px) {
    .checkbox-div{
      height: 80px;
    }

    .checkbox-div > label{
      line-height: 90px;
    }

    .checkbox-div  span.checkmark{
      margin-top: 35px;
    }
  }

  .vertical-center {
    position: absolute;
    top: 20%;
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
  }
  /* --- Body End ----------- */

  /* --- Sidebar ----------- */
  #mySidebar{
    width: 60px;
    background-color: #3e819e;
    color:#FFFFFF;
  }

  #mySidebar a.w3-bar-item:not(:first-child):not(:last-child):hover {
    background-color: #9BA6AC !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
  }

  #mySidebar a.w3-bar-item:first-child:hover,
  #mySidebar a.w3-bar-item:last-child:hover,
  #myTopbar a.w3-bar-item:hover, #nav a.w3-bar-item:hover {
    background-color: #9BA6AC !important;
    color: #FFFFFF !important;
  }
  
  #mySidebar .active, #nav .active {
    background-color: #697A83 !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    font-size: 20px;
  }

  #mySidebar a:first-child, #mySidebar a:last-child{
    background-color: #3e819e!important; 
    color: #FFFFFF!important;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #mySidebar a.w3-bar-item.w3-button > span,
  #myTopbar a.w3-bar-item.w3-button > span,
  #nav a.w3-bar-item.w3-button > span{
    vertical-align:middle;
  } 

  #mySidebar a.w3-bar-item.w3-button:last-child{
    margin-bottom: 37px;
  } 

  .w3-top .w3-bar a {
    border-right: solid 1px #c6c6c6 !important;
  }
  
  .w3-top .w3-bar a.w3-right {
    border-left: solid 1px #c6c6c6 !important;
  }
  

  #myTopbar, #nav{
    background-color: #3e819e;
    color:#FFFFFF;
  }

  #myTopbar a {
    height: 40px;
  }

  #nav a {
    border-top: solid 1px #c6c6c6 !important;
  }

  #nav {
    margin-top: 40px;
    overflow-y: auto;
  }
  /* --- Sidebar End ----------- */

  /* --- Footer ----------- */
  .footer {
    font-size: 12px !important;
    color: #3e819e !important;
    background-color: #FAFAFA !important;
    border: 1px solid #3e819e !important;
    z-index: 9999!important;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  /* --- Footer End ----------- */

  /* --- Modal ----------- */
  .w3-modal{
    z-index: 9999!important;
  }

  .modal-header {
    text-align: center !important;
    color: #FFFFFF !important;
    background-color: #3e819e !important;
    border: solid 1px #FFFFFF;

  }

  .modal-header h3 {
    padding: 4px;
  }

  .modal-header .close {
    margin: 8px;
  }

  .modal-data{
    padding: 16px 32px 0px;
  }

  .modal-data-loading{
    padding: 16px 32px 8px;
  }
  
  .modal-data.w3-row-padding{
    padding: 16px 24px 0px;
  }

  .modal-enter-data.w3-row-padding,
  .filter-bar{
    margin: 0px -16px;
  }

  .modal-button{
    padding: 16px 32px 32px;
  }

  .modal-enter-button{
    padding: 16px 0px;
  }

  .modal_mode{
    padding: 0px;
    margin: 0px;
  }

  .close{
    background-color: #E1554C!important;
    border: solid 1px #E1554C!important;
    color: #FFFFFF!important;
    min-width: 100px;
    font-size: 14px;
  }

  .cros{
    background-color: #E1554C!important;
    border: solid 1px #E1554C!important;
    color: #FFFFFF!important;
    margin: 8px;
  }

  .close:hover, .cros:hover{
    background-color: #E2635A!important;
    border: solid 1px #E2635A!important;
    color: #FFFFFF !important;
  }

  .cros-grean{
    background-color: #3e819e!important;
    border: solid 1px #3e819e!important;
    color: #FFFFFF!important;
    margin: 8px;
  }

  .accept{
    background-color: #3e819e!important;
    border: solid 1px #3e819e!important;
    color: #FFFFFF!important;
    min-width: 100px;
    font-size: 14px;
  }

  .accept-rect{
    background-color: #3e819e!important;
    border: solid 1px #3e819e!important;
    color: #FFFFFF!important;
    font-size: 14px;
  }

  .accept:hover, .cros-grean:hover{
    background-color: #4c87a0!important;
    border: solid 1px #4c87a0!important;
    color: #FFFFFF !important;
  }

  .bt{
    background-color: #3e819e!important;
    border: solid 1px #3e819e!important;
    color: #FFFFFF!important;
    min-width: 100px;
    font-size: 14px;
    height: 38.99px;
  }
  
  .bt:hover, .eye:hover{
    background-color: #4c87a0!important;
    border: solid 1px #4c87a0!important;
    color: #FFFFFF !important;
  }

  .text-alert{
    color: #E1554C;
  }

  .text-success, .text-info{
    color: #3e819e;
  }
  /* --- Modal End ----------- */

  /* --- Login ----------- */
  .login-form{
    margin: 16px auto 8px;
    max-width: 300px;
    border: 1px solid #3e819e !important;
  }

  .login-form .accept, .login-form .bt{
    font-size: 1.5em;
    height: auto!important;
    text-transform: uppercase;
  }

  .login-title{
    text-align: center;
    margin: 8px 0px;
    font-size: 1.5em;
  }

  .login-input{
    border: none!important;
    border-bottom: 1px solid #3e819e !important;
    color: #3e819e!important;
    background-color: #FAFAFA!important;
    text-align: center;
    margin-bottom: 16px;
    padding: 4px;
    font-size: 18px;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 40rem #FAFAFA inset;
  }

  .login-popup{
    margin: 16px auto 32px!important;
    padding: 16px!important; 
    line-height: 1;
    border: 1px solid #3e819e;
    color: #3e819e!important;
  }

  .login-popup span{
    font-size: 18px;
    line-height: 24px;
  }
  /* --- Login End ----------- */

  /* --- Scroll Table Button ----------- */
  .prevBtnScroll,
  .nextBtnScroll,
  .openBtnMenu {
    cursor: pointer;
    position: fixed;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(54,77,89, 0.5);
    z-index: 9000;
  }

  .nextBtnScroll {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  .openBtnMenu {
    right: 0;
    border-radius: 3px;
  }

  .prevBtnScroll {
    visibility: hidden;
  }

  .prevBtnScroll:hover,
  .nextBtnScroll:hover,
  .openBtnMenu:hover {
    background-color: rgba(54,77,89, 0.8);
  }
  /* --- Scroll Table Button End ----------- */

  /* --- Table ----------- */
  .w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child{
    padding: 8px!important;
  }

  #data-table {
    cursor: pointer;
  }

  table tbody {
    overflow: auto;
    max-height: 521px;
  }
  
  table th {
    border: solid 1px #3e819e !important;
    color: #FFFFFF !important;
    background-color: #3e819e !important;
    vertical-align: middle!important;
    text-align: center!important;
    top: 0;
    z-index: 2;
  }

  table th:not(:last-child){
    border-right: solid 1px #CCCCCC!important;
  }

  table th.left-line {
    border-left: solid 1px #CCCCCC!important;
  }

  table th.bottom-line {
    border-bottom: solid 1px #CCCCCC!important;
  }
        
  table td {
    height: 32px;
    line-height: 1.2;
    vertical-align: middle !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: solid 1px #ccc !important;
  }
  
  tbody tr.active {
    background-color: #697A83 !important;
    color: #FFFFFF !important;
  }

  tbody tr:hover {
    background-color: #9BA6AC !important;
    color: #FFFFFF !important;
  }

  .table-scroll,
  .table-container,
  .map-container {
    width: 100%;
    overflow: auto !important;
    white-space: nowrap !important;
    display: block !important;
  }

  .map-container{
    padding: 0px 12px;
  }

  .table-scroll {
    height: 17px;
    overflow-y: hidden !important;
  }

  .table-container {
    z-index: 9999;
  }

  .table-scroll-div {
    height: 17px;
  }

  .table-container-div {
    overflow: none;
  }

  .table-small{
    max-height: 186px;
  }

  .table-medium{
    max-width: 600px;
  }

  .th-small{
    width: 40px;
    white-space: normal;
  }

  .th-medium{
    width: 100px;
    white-space: normal;
  }

  .table-container,
  .table-scroll {
    width: 100%;
    overflow: auto !important;
    white-space: nowrap !important;
    display: block !important;
    border: 1px solid #3e819e;
  }

  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #CCCCCC;
    margin: 2px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #789EAE;
    background-color: rgba(54,77,89, 0.5);
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #6a8d9c;
    background-color: rgba(54,77,89, 0.8);
  }
  
  @media screen and (max-width: 637px) {
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }
  /* --- Table End ----------- */

  /* --- Margin ----------- */
  .margin-no-both{
    margin-left: 0px;
    margin-right: 0px;
  }  
  .margin-0{
    margin: 0px!important;
  }
  .margin-bottom-8{
    margin-bottom: 8px;
  }
  .margin-left-8{
    margin-left: 8px;
  }

    .margin-left-16{
    margin-left: 16px;
  }
  
  .margin-right-16{
    margin-right: 16px;
  }
  .margin-bottom-16{
    margin-bottom: 16px!important;
  }
  .margin-bottom-32{
    margin-bottom: 32px;
  }
  .margin-bottom-64{
    margin-bottom: 64px;
  }
  .my-margin-bottom {
    margin-bottom: 12px;
  }
  .margin-top-16 {
    margin-top: 16px;
  }
  .margin-top-64 {
    margin-top: 64px;
  }

  @media screen and (max-width: 600px) {
    .margin-top-26 {
      margin-top: 8px;
    }
  } 
  
  @media screen and (min-width: 600px) {
    .margin-top-26 {
      margin-top: 24px;
    }
  }
  
  .my-margin-bottom-smol {
    padding-left: 0px !important;
    margin-bottom: 8px;
  }
  /* --- Margin End ----------- */

  /* --- Padding ----------- */
  .padding-16{
    padding: 0px 16px!important;
  }

  .padding-0{
    padding: 0px!important;
  }
  /* --- Padding End ----------- */

  /* --- Right Click Menu ----------- */
  #menu, div[id$='-menu'] {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background: #FFFFFF;
    font-family: calibri, sans-serif;
    font-size: 16px;
    border: 1px solid #3e819e;
    overflow-y: auto;
    max-height: 90vh;
  }
 
  #menu button, div[id$='-menu'] button {
    display: block;
    color: #282828;
    text-decoration: none;
    padding: 4px 40px 4px 30px;
    width: 100%;
    text-align: left;
    position: relative;
  }
  
  #menu button:disable, div[id$='-menu'] button:disable {
    display: block;
    color: #797979;
    text-decoration: none;
    padding: 6px 60px 6px 30px;
    position: relative;
  }

  #menu button:hover, div[id$='-menu'] button:hover {
    background-color: #9BA6AC!important;
  }
  
  #menu hr, div[id$='-menu'] hr {
    border-color: #ccc;
    margin: 2px 4px;
  }
  /* --- Right Click Menu End ----------- */

  /* --- Ticket ----------- */
  pre {
    line-height: 1.8em;
    padding: 0px 16px;
    margin: 0px;
  }

  #ticket{
    width: fit-content; 
    font-family: 'Roboto Mono', monospace; 
    padding: 16px 0px;  
    margin: 0px auto 16px; 
    border: #ccc solid 1px;
    background: #f1f1f1;
  }

  #ticket-data .w3-row{
    display: flex;
    background: #f1f1f1;
    border-top: solid 1px #ccc !important;
    border-left: solid 1px #ccc !important;
    border-right: solid 1px #ccc !important;
  }

  #ticket-data .w3-row:last-child{
    border-bottom: solid 1px #ccc !important;
  }

  #ticket-data .w3-col{
    margin: 0 auto;
  }

  #ticket-data .w3-col.w3-left-align{
    align-self: flex-end;
  }

  .ticket-invers {
    color: #FFFFFF;
    background-color: #000000;
  }
  
  .ticket-24char {
    font-size: 17px;
    letter-spacing: 0.094em;
  }
  
  .ticket-24char.ticket-doublesize {
    letter-spacing: 0.79em;
    font-weight: bold;
  }
  
  .ticket-32char {
    font-size: 17px;
    letter-spacing: -0.07em;
  }
  
  .ticket-32char.ticket-doublesize {
    letter-spacing: 0.43em;
    font-weight: bold;
  }
  
  .ticket-36char {
    font-size: 16px;
    letter-spacing: -0.097em;
  }
  
  .ticket-36char.ticket-doublesize {
    font-size: 17px;
    letter-spacing: 0.32em;
    font-weight: bold;
  }
  
  .ticket-40char {
    font-size: 14px;
    letter-spacing: -0.086em;
  }
  
  .ticket-40char.ticket-doublesize {
    font-size: 17px;
    letter-spacing: 0.225em;
    font-weight: bold;
  }

  #id_ticket pre{
    white-space:pre-wrap;
  }
  
  .mypre,
  .mypre b {
    line-height: 1.4em;
    padding: 0px;
    margin: 0px;
    font-family: calibri, sans-serif !important;
    font-size: 16px !important;
  }
  /* --- Ticket End ----------- */

  /* --- Filter ----------- */
  .filter-select{
    display: inline-block; 
    width: inherit;  
    margin-right: 6px;
  }

  .filter-frame{
    height: 176px;
    overflow: auto;
    margin-bottom: 12px;
    border: 1px solid #3e819e;
    overflow: auto;
    white-space: nowrap;
  }

  .filter-line {
    margin: 0px !important;
    padding: 4px !important;
    height: 34px !important;
    vertical-align: middle !important;
    border: none !important;
  }

  .filter-line-el {
    height: 26px !important;
    padding: 0px 8px !important;
    margin: 0px !important;
    border: 1px solid #3e819e!important;
  }

  span.filter-line-el:first-child {
    width: 26px !important;
    padding: 0px!important;
    margin: 0px!important;
  }

  div.w3-bar-item.width-50{
    width: 50%;
  }

  span.w3-button.filter-line-el{
    border: none!important;
    padding-top: 3px!important;
  }

  li.active {
    background-color: #697A83 !important;
    color: #FFFFFF !important;
  }
  /* --- Filter End ----------- */

  /* --- Map ----------- */
  .map-small{
    position: relative; 
    outline: none; 
    margin-bottom: 16px;
    height: 300px;
    border: solid 1px #3e819e!important;
  }

  .map-big{
    height: 600px; 
    margin-bottom: 16px;
  }

  .pos-info{
    border: 1px solid #3e819e;
    background-color: white; 
    margin-bottom: 16px; 
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  /* --- Map End ----------- */

  /* --- Pagination ----------- */
  div.w3-bar.pagination{
    border: 1px solid #3e819e;
    margin: 16px auto 8px;
    background-color: #FFFFFF;
  }

  .pagination a.active{
    background-color: #697A83;
    color: #FFFFFF!important;
  }

  .pagination a:hover{
    background-color: #9BA6AC!important;
    color: #FFFFFF!important;
  }
  /* --- Pagination End----------- */

  /* --- Loader ----------- */
  #loader {
    width: 64px;
    height: 64px;
    margin: 24px auto;
    border: 15px solid #D9D9D9;
    border-top: 16px solid #E1554C;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Add animation to "page content" */
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
  }
  
  @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
  }
  /* --- Loader End ----------- */


  /* --- Checkbox ----------- */
  /* The container */
  .container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .container-lable {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
    border: 1px solid #3e819e;
    margin-top: 6px;
  }

  .checkmark-revers {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    margin-top: 6px;
  }

  .checktext {
    line-height: 32px!important;
    font-size: 14px;
  }

  .container input:disabled ~ .checkmark{
    background: #d2d2d2!important;
    color: #FFFFFF;
    border: 1px solid #adadad!important;
    cursor: not-allowed;
    pointer-events:none;
  }

  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark,
  .container:hover input ~ .checkmark-revers{
    background-color: #FFFFFF;
  }

  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark{
    background-color: #3e819e;
  }

  .container input:checked ~ .checkmark-revers{
    background-color: #FFFFFF;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark-revers:after,
  .checkmark:after{
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
    .container input:checked ~ .checkmark-revers:after,
    .container input:checked ~ .checkmark:after{
    display: block;
  }

  /* Style the checkmark/indicator */
  .container .checkmark:after{
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: 1px solid #FFFFFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .container .checkmark-revers:after{
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: 1px solid #3e819e;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .checkbox-user-pad{
    padding-left: 50px; 
    margin-bottom: 20px;
  }

  .checkbox-fee-pad{
    margin-left: -5px;
    margin-bottom: 20px;
  }

  .checkbox-fee2-pad{
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .checkbox-fee3-pad{
    margin-left: 45px;
    margin-bottom: 20px;
  }

  .checkbox-version-pad{
    margin-left: 24px;
    margin-bottom: 30px;
  }

  .checkbox-pos-pad{
    margin-top: -15px; 
    margin-left: 14px;
  }

  .checkbox-folder-pad{
    margin-top: -15px; 
    margin-left: 65px;
  }

  .checkbox-edit-pad{
    margin-top:  25px; 
    margin-left: 16px;
  }

  .checkbox-fee2-pad .checkmark,
  .checkbox-fee3-pad .checkmark,
  .checkbox-fee-pad .checkmark,
  .checkbox-user-pad .checkmark{
    top: auto; 
    left: auto; 
    margin-top: 0px;
  }
  /* --- Checkbox End ----------- */


  /* --- Material Icon ----------- */
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons.woff2) format('woff2');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  @font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialSymbolsOutlined.woff2) format('woff2');
  }

  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  
  .material-symbols-outlined-fill {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    word-wrap: normal;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  /* --- Material Icon End----------- */

  @media (min-width: 1700px){
    .w3-col.ll5 {
        width: 41.66666%;
    }

    .w3-col.ll2 {
          width: 16.66666%;
      }
  }

  @media (min-width: 951px) and (max-width: 1699px){
    .w3-col.mm4 {
        width: 33.33333%;
    }
  }

  @media (max-width:950px){
    .hide-small{
      display:none!important
    }
  }

  @media (min-width:1101px){
    .hide-large{
      display:none!important
    }
  }

  @media (max-width:1100px) and (min-width:951px){
    .hide-medium{
      display:none!important
    }
  }

  .w3-bar.w3-filter .w3-bar-item{
    padding: 12px; 
  }

  .order {
    margin-left: 8px;
    font-size: 18px!important;
  }

  .order2 {
    vertical-align: -3px;
    margin-left: 8px;
    font-size: 20px!important;
    color: #FBB03B;
  }

  .order3 {
    vertical-align: -3px;
    margin-left: 8px;
    font-size: 20px!important;
    color: #0AF167;
  }

  @media (max-width: 600px) {
    .bt-filter button:first-child, 
    .bt-filter select,
    .bt-filter input {
        width: 75%;
        margin-right: 4%;
        float: left!important;
    }
   
    .bt-filter button:last-child, 
    .bt-filter i {
      width: 20%;
      float: right!important;
    }

    .bt-filter i{
      padding-top: 5px;
      margin: 0px;
      vertical-align: middle;
    }
  }

  .span-td {
  display: inline-block;
  padding: 8px 0px;
  vertical-align: middle;
}

.qr-code{
  margin: 32px auto;
  width: max-content;
}

.input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-with-icon .icon-clickable {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 12px;
  background: #3e819e;
  color: #fefefe;
  /* border-radius: 4px 0px 0px 4px; */
}

.input-with-icon input {
  padding-left: 48px;
}

.input-with-icon .icon-clickable:hover {
  background: #4c87a0;
}