/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
    
    .gradient{
        /* background: rgb(14,66,41);
        background: linear-gradient(90deg, rgba(3,102,53,1) 9%, rgba(6,94,50,1) 63%, rgba( 14,66,41,1) 100%) !important; */
        
        /* background-color: #63d471;
        background-image: linear-gradient(315deg, #63d471 0%, #233329 74%); */

        background-color: #166d3b;
        background-image: linear-gradient(147deg, #166d3b 0%, #000000 74%);

        /* background-color: #63a91f;
        background-image: linear-gradient(314deg, #63a91f 0%, #1a512e 74%); */
    }

    .brand-sidebar .logo-wrapper a.brand-logo img {
        margin-left: 5px;
        width: 25px;
        height: 25px;
        top: 17px;
        position: absolute;
    }

    .brand-sidebar span.logo-text{
        position: absolute;
        padding-top: 10px;
        font-size: 22px;
        margin-left: 30px;

        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .leftside-navigation li a.active {
        /* background: linear-gradient(90deg, rgba(14,66,41,1) 9%, rgba(6,94,50,1) 63%, rgba(3,102,53,1) 100%) !important; */

        background: rgb(19 62 215) !important
    }

    .dt-buttons {
        margin-bottom: 1% !important;
    }

    .dt-button-collection button {
        width: 100% !important;
        text-transform: none !important;
        margin-top: 2px;
    }
    
    button.buttons-columnVisibility {
        width: 100% !important;
        text-transform: none !important;
        margin-top: 2px;
        background: #7986cb !important;
    }
    
    button.buttons-columnVisibility.active {
        background: #3949ab !important;
    }

    button.my-action {
        text-transform: none !important;
        padding: 0 1rem;
    }

    .dataTables_empty {
        height: 280px !important;
    }

    .err-container {
        top: -15px !important;
        margin-bottom: 0px !important;
    }

    .height-modal {
        max-height: 85% !important;
    }

    .tabs-content.carousel .carousel-item { height:auto; }

    /*----------------------------------------
            Data Tables
    ------------------------------------------*/
    #main .section-data-tables table
    {
        width: 100%;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable thead th
    {
        min-width: 69px;

        color: #616161;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable thead th.background-image-none
    {
        background-image: none !important;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable thead th.select-all
    {
        background-image: none !important;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable th,
    #main .section-data-tables .dataTables_wrapper table.dataTable td
    {
        font-weight: 300;

        padding: 17px 14px;

        white-space: nowrap; 

        border-bottom: 1px solid #cfd8dc;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable tbody
    {
        overflow: auto; 

        max-width: 100%;
        height: 300px;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable tbody th,
    #main .section-data-tables .dataTables_wrapper table.dataTable tbody td
    {
        padding: 8px 14px;

        white-space: nowrap; 

        border: none !important;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable tbody tr td:before,
    #main .section-data-tables .dataTables_wrapper table.dataTable tbody tr th:before
    {
        font-size: .9rem;
        line-height: 14px; 

        top: 10px;
        left: -3px;

        width: 12px;
        height: 12px;

        text-indent: 0;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable tfoot th,
    #main .section-data-tables .dataTables_wrapper table.dataTable tfoot td
    {
        font-weight: 300;

        white-space: nowrap; 

        border-top: 1px solid #cfd8dc;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable.stripe tbody tr,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr
    {
        height: auto;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable.stripe tbody tr .odd,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr .odd
    {
        background-color: #f4f5f7;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable.stripe tbody tr .odd > .sorting_1,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr .odd > .sorting_1
    {
        background-color: transparent;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable.stripe tbody tr .odd.selected,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr .odd.selected
    {
        background-color: #acbad4 !important;
    }
    #main .section-data-tables .dataTables_wrapper table.dataTable.stripe tbody tr .odd.selected th,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr .odd.selected th
    {
        border-radius: 0;
    }

    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr.hover > .sorting_1,
    #main .section-data-tables .dataTables_wrapper table.dataTable.display tbody tr:hover > .sorting_1,
    #main .section-data-tables .dataTables_wrapper table.dataTable.order-column.hover tbody tr.hover > .sorting_1,
    #main .section-data-tables .dataTables_wrapper table.dataTable.order-column.hover tbody tr:hover > .sorting_1
    {
        background-color: transparent;
    }

    #main .section-data-tables .dataTables_wrapper table [type='checkbox'] + span:not(.lever):before,
    #main .section-data-tables .dataTables_wrapper table [type='checkbox']:not(.filled-in) + span:not(.lever):after
    {
        opacity: .5; 
        border-radius: 4px !important;
    }

    #main .section-data-tables .dataTables_wrapper .dataTables_length.dataTables_length,
    #main .section-data-tables .dataTables_wrapper .dataTables_filter.dataTables_filter
    {
        display: block;
    }
    #main .section-data-tables .dataTables_wrapper .dataTables_length.dataTables_length label select,
    #main .section-data-tables .dataTables_wrapper .dataTables_filter.dataTables_filter label select
    {
        display: inline-block;

        width: auto;
        height: auto;
    }
    #main .section-data-tables .dataTables_wrapper .dataTables_length.dataTables_length label input,
    #main .section-data-tables .dataTables_wrapper .dataTables_filter.dataTables_filter label input
    {
        width: auto; 
        height: auto;
    }

    #main .section-data-tables .dataTables_wrapper .dataTables_length,
    #main .section-data-tables .dataTables_wrapper .dataTables_filter
    {
        display: none;
    }

    #main .section-data-tables .dataTables_wrapper .dataTables_info
    {
        margin-left: 18px;

        color: #616161;
    }

    #main .section-data-tables .dataTables_wrapper .dataTables_paginate,
    #main .section-data-tables .dataTables_wrapper #t_inventory_paginate
    {
        margin-right: .35rem; 
        margin-bottom: .75rem;
    }
    #main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button,
    #main .section-data-tables .dataTables_wrapper #t_inventory_paginate .paginate_button
    {
        margin-top: .25rem; 
        padding: .25em .65em;
    }
    #main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    #main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    #main .section-data-tables .dataTables_wrapper #t_inventory_paginate .paginate_button.current,
    #main .section-data-tables .dataTables_wrapper #t_inventory_paginate .paginate_button.current:hover
    {
        color: #fff !important;
        border: 1px solid #2196f3;
        border-radius: 6px;
        background: #2196f3;
        -webkit-box-shadow: 0 0 8px 0 #2196f3;
                box-shadow: 0 0 8px 0 #2196f3;
    }
    #main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    #main .section-data-tables .dataTables_wrapper #t_inventory_paginate .paginate_button:hover
    {
        color: #fff !important;
        border: 1px solid #2196f3;
        border-radius: 6px;
        background: #2196f3;
        -webkit-box-shadow: 0 0 8px 0 #2196f3;
                box-shadow: 0 0 8px 0 #2196f3;
    }

    
    /*----------------------------------------
    Contacts Page
    ------------------------------------------*/
    #contact-us .app-wrapper .sidenav
    {
        width: 340px;
        padding: 2rem;
    }

    #contact-us .app-wrapper .contact-header
    {
        margin-top: 3.5rem;
    }
    #contact-us .app-wrapper .contact-header .contact-us .social-icons i
    {
        font-size: 1.3rem;

        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    #contact-us .app-wrapper .contact-header .contact-us i
    {
        font-size: 1.9rem;
    }
    #contact-us .app-wrapper .contact-header .contact-us .form-header
    {
        padding: 1.88rem;

        border-radius: .5rem .5rem 0rem 0rem; 
        background-color: #d7e0e8;
    }
    #contact-us .app-wrapper .contact-header .contact-us .form-header i
    {
        font-size: 3.5rem;

        margin-right: 1rem; 

        vertical-align: middle;
    }

    #contact-us .app-wrapper .contact-sidenav .contact-left
    {
        margin-top: 2rem;
    }

    #contact-us .app-wrapper .contact-sidenav .sidenav-trigger
    {
        position: absolute;
        top: 6.5rem;
        left: 1rem;
    }

    #contact-us .app-wrapper .contact-sidenav .line-height
    {
        line-height: 1.6rem !important;
    }

    #contact-us .app-wrapper .contact-sidenav hr
    {
        border: 0;
        border-top: 1px solid #cfd8dc;
    }

    #contact-us .app-wrapper .contact-sidenav textarea.materialize-textarea
    {
        height: 12rem;
    }

    #contact-us .app-wrapper .contact-sidenav .contact-form
    {
        padding: 3rem; 

        background-color: #fff;
        -webkit-box-shadow: -3px 0 10px 0 #eceff1;
                box-shadow: -3px 0 10px 0 #eceff1;
    }
    #contact-us .app-wrapper .contact-sidenav .contact-form .btn
    {
        float: right;
    }
    #contact-us .app-wrapper .contact-sidenav .contact-form .input-field
    {
        overflow: visible !important;
    }
    #contact-us .app-wrapper .contact-sidenav .contact-form .input-field input,
    #contact-us .app-wrapper .contact-sidenav .contact-form .input-field textarea
    {
        margin-top: .4rem;
        padding-left: 1rem; 

        border: none;
        border-radius: .3rem;
        background-color: #eceff1;
    }
    #contact-us .app-wrapper .contact-sidenav .contact-form .input-field label
    {
        width: auto; 
        margin-left: 1rem;
    }
    #contact-us .app-wrapper .contact-sidenav .contact-form .input-field label .active
    {
        color: #eceff1 !important;
    }

    .horizontal-layout #main .row .content-wrapper-before
    {
        top: 128px;
    }

    .page-header-dark #contact-us .contact-us .sidebar-title,
    .page-header-dark #contact-us .contact-us .sidebar-title h5
    {
        color: #fff;
    }

    .page-header-dark #contact-us .contact-sidenav .sidebar .sidenav-trigger i.material-icons
    {
        color: #fff;
    }

    @media (min-width: 900px)
    {
        #contact-us .app-sidebar
        {
            -webkit-transform: none !important;
            -moz-transform: none !important;
                -ms-transform: none !important;
                -o-transform: none !important;
                    transform: none !important;
        }

       
    }

    @media (max-width: 998px)
    {
        #contact-us .app-wrapper .contact-header
        {
            margin-top: 1.3rem;
        }
        #contact-us .app-wrapper .contact-header h5
        {
            margin-bottom: 1rem !important; 
            margin-left: 2rem !important;
        }
        #contact-us .app-wrapper .contact-header i
        {
            margin-top: .1rem;
        }
    }

    @media (max-width: 600px)
    {
        #contact-us .sidenav-trigger.hide-on-large-only i.material-icons
        {
            position: relative;
            top: -.5rem;
        }

        #barcode_store {
            margin-left: -25%;
        }
    }

    /* DATATABLES CHECKBOX */
    #main .section-data-tables .dataTables_wrapper table.dataTable tbody tr td:before, #main .section-data-tables .dataTables_wrapper table.dataTable tbody tr th:before {
        font-size: .9rem;
        line-height: 14px;
        top: 1.2em;
        left: 45%;
        width: 20px;
        height: 20px;
        text-indent: 0;
        opacity: .5;
        position: absolute;
        border: 2px solid #5a5a5a;
        opacity: .5;
        border-radius: 4px !important;
    }

    table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
        content: '\2714';
        top: 1.4em;
        left: 46%;
        text-align: center;
        text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
        border-radius: 4px !important;
    }

    /* COLLECTION ADDITIONAL */
    .collection .collection-item:last-child {
        border-bottom: 1px solid #e0e0e0 !important;
    }


    /*----------------------------------------
    500 Page
    ------------------------------------------*/
    .section-500
    {
        display: -webkit-box;
        display: -webkit-flex;
        display:    -moz-box;
        display: -ms-flexbox;
        display:         flex;
        overflow: hidden; 

        height: 77vh;

        background: #fff;

        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
                align-items: center;
    }
    .section-500 .error-code
    {
        font-size: 10rem !important;
    }

    @media screen and (min-width: 992px)
    {
        .section.section-500 .error-code
        {
            font-size: 5rem !important;
        }
        .section.section-500 .bg-image-500
        {
            width: 70% !important;
        }
    }

    @media screen and (min-width: 769px)
    {
        .bg-image-500
        {
            width: 100% !important;
        }

        #barcode_store {
            transform: translateX(6%);
        }
    }

    @media screen and (max-width: 768px)
    {
        .section.section-500 .error-code
        {
            font-size: 5rem !important;
        }
        .section.section-500 .bg-image-500
        {
            width: 100%;
        }
    }

    @media screen and (max-width: 540px)
    {
        .section.section-500 .error-code
        {
            font-size: 2rem !important;
        }
    }

    /*----------------------------------------
        Maintenance
    ------------------------------------------*/
    .section-maintenance
    {
        display: -webkit-box;
        display: -webkit-flex;
        display:    -moz-box;
        display: -ms-flexbox;
        display:         flex;
        overflow: hidden; 
        height: 76vh;
        background: #fff;

        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
                align-items: center;
    }
    .section-maintenance #maintenance h6
    {
        line-height: 1.7rem;
    }
    .section-maintenance #maintenance .maintenance-img
    {
        width: 35%;
    }

    @media screen and (max-width: 540px)
    {
        .section.section-maintenance .error-code
        {
            font-size: 2rem !important;
        }
    }

    .collection .collection-item.active
    {
        color: white !important;
        background-color: #1c4627 !important;
    }

    .apexcharts-toolbar {
        margin-bottom: 40px !important;
    }
  
    .button-fixed {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .button-fixed-top {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }

    .col.grid-level
    {
        font-size: 28px;
        line-height: 50px;

        margin: 7px 0;
        padding: 0; 

        text-align: center;

        color: rgb(14, 11, 11);
        border: 2px solid #080404;
        background-color: #ffffff;
    }

    .col.grid-menu
    {
        /* line-height: 50px; */
        /* margin: 7px 0; */
        padding: 0px; 
        text-align: center;
        color: rgb(14, 11, 11);
        border: 2px solid #585757;
        background-color: #ffffff;
    }

    .col.grid-level span
    {
        font-weight: 200;
        line-height: 50px;
    }


    .ocrloader {
        width: 194px;
        height: 177px;
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        backface-visibility: hidden;
      }
      .ocrloader span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 20px;
        background-color: rgba(45, 183, 183, 0.54);
        z-index: 1;
        transform: translateY(135%);
        animation: move 0.7s cubic-bezier(0.15, 0.44, 0.76, 0.64);
        animation-iteration-count: infinite;
      }
      .ocrloader > div {
        z-index: 1;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 48%;
        backface-visibility: hidden;
      }
      .ocrloader i {
        display: block;
        height: 1px;
        background: #000;
        margin: 0 auto 2px;
        margin: 0 auto 2.2px;
        backface-visibility: hidden;
      }
      .ocrloader i:nth-child(2) {
        width: 75%;
      }
      .ocrloader i:nth-child(3) {
        width: 81%;
      }
      .ocrloader i:nth-child(4) {
        width: 87%;
      }
      .ocrloader i:nth-child(6) {
        width: 71%;
      }
      .ocrloader i:nth-child(7) {
        width: 81%;
      }
      .ocrloader i:nth-child(8) {
        width: 65%;
      }
      .ocrloader i:nth-child(9) {
        width: 83%;
      }
      .ocrloader i:nth-child(10) {
        width: 75%;
      }
      .ocrloader i:nth-child(12) {
        width: 86%;
      }
      .ocrloader i:nth-child(14) {
        width: 65%;
      }
      .ocrloader i:nth-child(16) {
        width: 75%;
      }
      .ocrloader i:nth-child(18) {
        width: 83%;
      }
      .ocrloader:before,
      .ocrloader:after,
      .ocrloader em:after,
      .ocrloader em:before {
        border-color: #000;
        content: "";
        position: absolute;
        width: 19px;
        height: 16px;
        border-style: solid;
        border-width: 0px;
      }
      .ocrloader:before {
        left: 0;
        top: 0;
        border-left-width: 3px;
        border-top-width: 3px;
      }
      .ocrloader:after {
        right: 0;
        top: 0;
        border-right-width: 3px;
        border-top-width: 3px;
      }
      .ocrloader em:before {
        left: 0;
        bottom: 0;
        border-left-width: 3px;
        border-bottom-width: 3px;
      }
      .ocrloader em:after {
        right: 0;
        bottom: 0;
        border-right-width: 3px;
        border-bottom-width: 3px;
      }
      @keyframes move {
        0%,
        100% {
          transform: translateY(135%);
        }
        50% {
          transform: translateY(0%);
        }
        75% {
          transform: translateY(872%);
        }
      }
      

    

   
/* TABS */
.one_system_tabs {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    align-items: center;
}

.one_system_text {
    font-weight: 900;
    margin-right: 1rem;
}
.one_system_tabs_item {
    display: flex;
}
.one_system_tabs_item li:not(:last-child){
    margin-right: 1rem;
}
.one_system_tabs_item li a {
    color: #756d6d;
    padding-bottom: .8rem;
}
.one_system_tabs_item li a.active {
    border-bottom: 2px solid #3949ab;
}


.os-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.os-pagination-action {
    margin-left: 1rem;
}

.os-btn-pagination {
    border: none;
    outline: none;
    border-radius: 5px;
}

.os-btn-pagination:focus {
    background-color: #ccc;
}

.btn-page-prev:disabled, .btn-page-next:disabled {
    background-color: #ddd !important;
    cursor: not-allowed;
}

.os-text-underline {
    text-decoration: underline;
}

.os-actions-btn {
    border: none;
    outline: none;
    border-radius: 5px;
    padding: 5px;
}
.os-actions-btn:focus {
    background-color: #ccc;
}

.os-flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn_copy_text {
    background: transparent;
    color: #3949ab;
    outline: none;
    border: none;
}

.os-btn-edit-clear{
    background-color: transparent;
    color:#3949ab;
    outline: none;
    border: none;
}
.os-btn-edit-clear:focus {
    background-color: transparent;
}
.os-btn-delete-clear{
    background-color: transparent;
    color:#89161e;
    outline: none;
    border: none;
}
.os-btn-delete-clear:focus {
    background-color: transparent;
}

.card-errors {
    border: 2px solid red;
}


/*LOADER*/
.loader-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.lds-facebook {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #ccc;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  .lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
  }
  .lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
  }
  .lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
  }
  @keyframes lds-facebook {
    0% {
      top: 8px;
      height: 64px;
    }
    50%, 100% {
      top: 24px;
      height: 32px;
    }
  }

.os-flex {
    display: flex;
}

.os-text-bold {
    font-weight: 900;
}

.os-file-error {
    color: red;
}

.os-file-success {
    color: green;
}

.os-input-error {
    border-bottom: 2px solid red !important;
}

.os-deactivated-input {
    text-decoration: line-through;
    background: #ccc !important;
}