/* ===========================================================
    OVERWIRTE
============================================================*/
*:not(i),
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}


.cpx-1 { padding-left: 10px; padding-right: 10px; }
.cpl-1 { padding-left: 10px; }
.cpr-1 { padding-right: 10px; }
.w-200 { width: 200px; }
.white {background-color: #FFFFFF; }
.light-pink {background-color: #fae0e4; }
.pink {background-color: #f368e0; }
.pastel-pink {background-color: #ffa5ab; }
.light-red {background-color: #ffebed; }
.red {background-color: #ff4757; }
.dark-red {background-color: #ad2831; }
.orange { background-color: #ffa502; }
.amber { background-color: #fdffed; }
.dark-orange { background-color: #f35b04; }
.blue { background-color: #1e90ff; }
.lighten-blue { background-color: #caf6ff; }
.light-blue { background-color: #dafdff; }
.dark-blue { background-color: #1e3799; }
.green { background-color: #22c55e; }
.dark-green { background-color: #177038; }
.light-green { background-color: #def6e8 !important; }
.yellow { background-color: #ffd32a; }
.light-gray { background-color: #f1f1f1; }
.dark-light-gray { background-color: #939393; }
.semi-gray { background-color: #e6e6e6; }
.gray { background-color: #d1d1d1; }
.dark-gray { background-color: #34495e; }
.purple { background-color: #6730ec; }
.light-black { background-color: #e4e4e4; }
.black { background-color: #000000; }
.medic { background-color: #2b2996; }
.leave { background-color: #145480; }
.other-days { background-color: #41ead4; }
.pink-neon {background-color: #ff006e; }
.green-neon {background-color: #41ead4; }
.pink-cleaner {background-color: #ffeef2; }

    .text-light-pink {color: #ffcccc; }
    .text-pink { color: #f368e0; }
    .text-dark-red { color: #ad2831; }
    .text-red { color: #ff4757; }
    .text-light-red { color: #ffebed; }
    .text-orange { color: #ffa502; }
    .text-blue { color: #1e90ff; }
    .text-light-blue { color: #dafdff; }
    .text-dark-blue { color: #1e3799; }
    .text-green { color: #22c55e; }
    .text-dark-green { color: #177038; }
    .text-yellow { color: #ffd32a; }
    .text-gray { color: #d1d1d1; }
    .text-semi-gray { color: #616161; }
    .text-purple { color: #6730ec; }
    .text-black { color: #000000; }
    .text-white { color: #FFFFFF; }
    .text-dark-gray { color: #34495e; }
    .text-medic { color: #2b2996; }
    .text-leave { color: #145480; }
    .text-other-days { color: #41ead4; }
    .border-light-pink {background-color: #ffcccc; }
    .border-pink { border-color: #f368e0; }
    .border-red { border-color: #ff4757; }
    .border-orange { border-color: #ffa502; }
    .border-blue { border-color: #1e90ff; }
    .border-light-blue { border-color: #dafdff; }
    .border-green { border-color: #22c55e; }
    .border-dark-green { border-color: #177038; }
    .border-yellow { border-color: #eccc68; }
    .border-gray { border-color: #d1d1d1; }
    .border-dark-light-gray { border-color: #9f9f9f; }
    .border-dark-gray { border-color: #34495e; }
    .border-purple { border-color: #6730ec; }
    .border-black { border-color: #000000; }
    .border-medic { border-color: #2b2996; }
    .border-leave { border-color: #145480; }
    .border-other-days { border-color: #41ead4; }
.p-file { padding: 5px; }
.h-color { height: 2.40rem; }

button:disabled {
    background-color: #e1e1e1 !important;
}

select:disabled {
    background-color: #f3f4f6;
    color: rgb(156, 163, 175);
}
select.form-select {
    border-color: rgb(209 213 219);
    border-radius: 0.25rem;
}
/* ===========================================================
    OVERWIRTE
============================================================*/
.focus\:shadow-outline-black:focus {
    box-shadow: 0 0 0 3px rgb(0 0 0 / 45%);
}
.focus\:border-black:focus {
    --border-opacity: 1;
    border-color: #000000;
    border-color: rgba(0, 0, 0, var(--border-opacity));
}


#preproduction {
    position: fixed;
    top: 60px;
    width: 100%;
    text-align: center;
    padding: 7px;
    background: #eb2f06;
    color: #FFFFFF;
    font-weight: bold;
    z-index: 99;
}
    #preproduction a:hover {
        color: #f8ffbd;
        text-decoration: underline;
    }

/* ===========================================================
    NEW
============================================================*/
.w-80p {width: 80%;}
.h-80p {height: 80%;}


label.has-error,
label.error,
label .error.has-error { color: #e74c3c; }

    label.has-error select,
    label.has-error input[type="text"],
    label.has-error input[type="email"],
    label.has-error input[type="number"],
    label.has-error textarea,
    label.has-error .input-group div span,
    label.has-error .select2-selection.select2-selection--single,
    label.has-error .select2-selection.select2-selection--multiple,
    .drop-element.error { border: 1px solid #e74c3c; }
    .drop-element.error { background-color: #e74c3c; }
    .drop-element.error div { background-color: #f3685a; }
    .drop-element.error i,
    .drop-element.error span { color: #FFFFFF; }

.block-avatar {
    text-align: center;
    border-radius: 160px;
    width: 160px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

.notification {
    position: absolute;
    top: 15px;
    right: 30px;
    width: 12px;
    height: 12px;
    border-radius: 50px;
}
/* ===========================================================
    ACTIVE INDEX
============================================================*/
.boolean-show {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    border-color: #d2d6dc;
    border-width: 1px;
    border-radius: 0.375rem;
    padding: 0.475rem 0.75rem;
    line-height: 1.5;
    text-align: center;
}
    .boolean-show--true {
        background-color: #ffffff;
        border-color: #2ecc71;
    }
    .boolean-show--true:after {
        content: 'Activo';
        color: #27ae60;
    }
    .boolean-show--false {
        background-color: #ffffff;
        border-color: #d2d6dc;
    }
    .boolean-show--false:after {
        content: 'No activo';
        color: #d2d6dc;
    }


/* ===========================================================
    SWITCHES
============================================================*/

/* label.switch {
    cursor: pointer;
} */

[type="radio"],
[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
[type="radio"].no,
[type="checkbox"].no {
    position: initial;
    left: initial;
}

    /* label.switch {
        display: flex;
    } */

        /* label.switch span:last-child {
            position: relative;
            width: 50px;
            height: 26px;
            border-radius: 15px;
            box-shadow: inset 0 0 5px rgb(0 0 0 / 0%);
            background: #e74c3c;
            transition: all 0.3s;
        }

        label.switch span:last-child::before,
        label.switch span:last-child::after {
            content: "";
            position: absolute;
        }

        label.switch span:last-child::before {
            left: 1px;
            top: 1px;
            width: 24px;
            height: 24px;
            background: #e8e9ed;
            border-radius: 50%;
            z-index: 1;
            transition: transform 0.3s;
        }

        label.switch span:last-child::after {
            top: 50%;
            right: 8px;
            width: 14px;
            height: 14px;
            transform: translateY(-50%);
            background: url(../images/times-light.svg);
            background-size: 14px 14px;
        } */

        /* [type="checkbox"]:checked + label.switch span:last-child {
             background: #27ae60;
        }

        [type="checkbox"]:checked + label.switch span:last-child::before {
            transform: translateX(24px);
        }

        [type="checkbox"]:checked + label.switch span:last-child::after {
            width: 14px;
            height: 14px;
            left: 8px;
            background-image: url(../images/check-light.svg);
            background-size: 14px 14px;
        } */

        /* [type="checkbox"] + label{
             border: 1px solid #ff4757;
             background: #ff4757;
             color: #FFFFFF;
             cursor: pointer;
        }
        [type="checkbox"]:checked + label{
             background: #22c55e;
             border-color: #22c55e;
        } */

/* ===========================================================
    DATATABLES
============================================================*/

/*Form fields*/
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
    /* color: #4a5568; 			text-gray-700 */
    padding-left: 1rem; 		/*pl-4*/
    padding-right: 1rem; 		/*pl-4*/
    padding-top: .5rem; 		/*pl-2*/
    padding-bottom: .5rem; 		/*pl-2*/
    line-height: 1.25; 			/*leading-tight*/
    border-width: 2px; 			/*border-2*/
    border-radius: .25rem;
    border-color: #edf2f7; 		/*border-gray-200*/
    background-color: #edf2f7; 	/*bg-gray-200*/
}

/*Row Hover*/
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #ebf4ff;	/*bg-indigo-100*/
}

/*Pagination Buttons*/
.dataTables_wrapper .dataTables_paginate .paginate_button		{
    font-weight: 700;				/*font-bold*/
    border-radius: .25rem;			/*rounded*/
    border: 1px solid transparent;	/*border border-transparent*/
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 20px; font-size: 0.9em; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { margin-top: 20px; font-size: 0.9em; }



/*Pagination Buttons - Current selected */
div .dataTables_wrapper .dataTables_paginate .paginate_button.current	{
    color: #fff !important;				/*text-white*/
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); 	/*shadow*/
    font-weight: 400;					/*font-bold*/
    border-radius: .25rem;				/*rounded*/
    background: #000000 !important;		/*bg-indigo-500*/
    border: 1px solid transparent;		/*border border-transparent*/
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.2em 0.7em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    cursor: hand;
    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 2px;
    font-weight: 400;
}


/*Pagination Buttons - Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    background: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    font-weight: 400;
    border-radius: .25rem;
    background: #000000 !important;
    border: 1px solid transparent;
}

/*Add padding to bottom border */
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;	/*border-b-1 border-gray-300*/
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/*Change colour of responsive icon*/
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    background-color: #667eea !important; /*bg-indigo-500*/
}

.ck.ck-content {
    min-height: 150px !important;
    max-height: 250px !important;
}

.created {
    background-color: #000000;
}
    .border-created {
        border: 1px solid #000000;
    }
    .text-created {
        color: #FFFFFF;
    }
.updated {
    background-color: #1e90ff;
}
.sent {
    background-color: #6730ec;
}
.downloaded {
    background-color: #ffa502;
}
.approved {
    background-color: #22c55e;
}
    .border-updated {
        border: 1px solid #1e90ff;
    }
    .text-updated {
        color: #1e90ff;
    }



    /* ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
        width: 2px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb { background-color: #d6d6d6; } */

/* .budget-bar {
    position: fixed;
    width: calc(100% - 258px);
    left: 256px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #f9fafb;
} */

.form-input:focus {
    box-shadow: none;
    border-color: initial;
}
input:checked ~ .dot {
    transform: translateX(100%);
    background-color: #48bb78;
}

/* ===========================================================
    MENU
============================================================*/
#menu-aside {
    position: relative;
    transition: all 1s ease;
    overflow-y: auto;
}
    .close {
        margin-left: -256px;
    }

.budget-actions {
    width: calc(100% - 256px);
    left: 256px;
    z-index: 30;
    transition: all 1s ease;
}
    .body-close .budget-actions {
        width: 100%;
        left: 0;
        z-index: 30;
    }

.fixed-modal {
    width: calc(100% - 256px);
    left: 256px;
    z-index: 30;
}
    .fixed-modal form.overflow-y-scroll{
        height: 90vh;
        overflow-y: scroll;
    }
.body-close .fixed-modal {
    width: 100%;
    left: 0;
}


#loader {
    transition: all .3s ease-in-out;
    opacity: 1;
    visibility: visible;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: #fff;
    z-index: 90000
}

#loader.fadeOut {
    opacity: 0;
    visibility: hidden
}

.spinner {
    width: 40px;
    height: 40px;
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1s infinite ease-in-out;
    animation: sk-scaleout 1s infinite ease-in-out
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.expired {
    background-color: #F9D7D7 !important;
}

.dt-buttons {  margin-left: 50px !important; }
.dt-buttons {
        width: 30%;
        display: inline-block;
    }
    .dt-button.buttons-excel {
        background-color: #8bc34a;
        color: #FFFFFF;
        padding: 6px 25px;
        border-radius: 5px;
    }
    .dt-button.buttons-print {
        background-color: #03a9f4;
        color: #FFFFFF;
        padding: 6px 25px;
        border-radius: 5px;
    }
    .dt-button.buttons-pdf {
        background-color: #e74c3c;
        color: #FFFFFF;
        padding: 6px 25px;
        border-radius: 5px;
    }
    .dt-button.buttons-excel:disabled,
    .dt-button.buttons-print:disabled,
    .dt-button.buttons-pdf:disabled {
        background-color: #f1f1f1;
        color: #dedede;
        cursor: no-drop;
    }

.w-full .dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}


/**
INPUT NUMBER
**/

.numberstyle-qty {
    position: relative;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    overflow: hidden;
    border: 1px solid #e6e7eb;
  }

  .numberstyle-qty input,
  .numberstyle-qty .qty-btn {
    position: relative;
    display: block;
    float: left;
    height: 40px;
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 37px;
    outline: 0;
  }

  .numberstyle-qty .qty-btn {
    width: 25px;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
    transition: all 250ms ease;
  }

  .numberstyle-qty .qty-btn.disabled {
    cursor: default;
    color: rgba(#747474,0.5);
  }

  .numberstyle-qty input {
    width: 60px;
    border-left: 0;
    border-right: 0;
    border-radius: 0px;
    color: #222222;
    font-size: 18px;
    font-weight: 700;
    z-index: 1;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
  }

  .numberstyle-qty input:focus {
    outline: 0;
    box-shadow: 0px;
  }

  .numberstyle-qty input[type=number]::-webkit-inner-spin-button,
  .numberstyle-qty input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .numberstyle-qty input[type=number] {
    -moz-appearance: textfield;
  }


      /* The container */
      .check-container {
        display: block;
        position: relative;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        line-height: initial;
    }

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

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -12.5px;
        height: 25px;
        width: 25px;
        background-color: #fff;
        border: 1px solid #b7b7b7;
        border-radius: 0.3rem;
    }

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

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

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

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

    /* Style the checkmark/indicator */
    .check-container .checkmark:after {
        left: 6px;
        top: 3px;
        width: 10px;
        height: 14px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }



    #tooltip-invoice, #tooltip-purchase-order {
        position: fixed;
        background-color: #FFFFFF;
        width: 1080px;
        height: 1024px;
        right: 300px;
        top: 65px;
        padding: 15px;
        border-radius: 5px;
        z-index: 50;
        color: #000000;
        border: 2px solid #000000;
    }

        .tooltip_content {
            width: 100%;
            height: 95%;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        
th.sticky-col, 
td.sticky-col {
    position: sticky;
    position: -webkit-sticky;  
}  

.fixed-col {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    left: 0px;
    background-color: #FFFFFF;
}

@media only screen and (min-width: 640px) {
    .fixed-col {
        width: 390px;
        min-width: 190px;
        max-width: 390px;
    }
}
@media only screen and (max-width: 768px) {
    #menu-aside {
        /* display: none; */
    }
}

.dt-buttons {
    width: 20%;
    display: inline-block;
}
.dt-button.buttons-excel {
    background-color: #8bc34a;
    color: #FFFFFF;
    padding: 6px 25px;
    border-radius: 5px;
}
.dt-button.buttons-print {
    background-color: #03a9f4;
    color: #FFFFFF;
    padding: 6px 25px;
    border-radius: 5px;
}

[type="checkbox"] {
    position: initial;
    left: initial;
    height: 20px;
    width: 20px;
}

.impersonate {
    position: fixed;
    top: 65px;
    left: 280px;
    background: #FFFFFF;
    border: 1px solid #dedede;
    border-radius: 5px;
    z-index: 99;
}

.tab-nav .tabs-departments.active {
    background-color: #FFFFFF;
    border-top-color: #a4b0be;
    border-right-color: #a4b0be;
    border-left-color: #a4b0be;
    border-bottom: none;
    color: #000000;
    z-index: 12;
    margin-bottom: -2px;
}

.tab.tab-departments
{
    border-top-color: #a4b0be;
    border-right-color: #a4b0be;
    border-bottom-color: #a4b0be;
    border-left-color: #a4b0be;
    z-index: 11;
    position: relative;
}

.select2.select2-container.select2-container--default {
	/* margin-top: 0.25rem !important; */
}


[data-ui-css-component="treeview"] {
    margin: 20px;
    color: #000000;
}
[data-ui-css-component="treeview"] [type=checkbox] { display: none; }
[data-ui-css-component="treeview"] ul {
    padding: 0 0 0 40px;
    display: none;
    list-style: none;
}
[data-ui-css-component="treeview"] ul:first-child { padding-left: 0; }
[data-ui-css-component="treeview"] li { padding: 0; }
[data-ui-css-component="treeview"] li span {
    display: inline-block;
    height: 20px;
    padding-left: 20px;
    border-left: 1px dashed #dedede;
    border-bottom: 1px dashed #dedede;
    top: -4px;
    position: relative;
}
[data-ui-css-component="treeview"] input[name="operation_type"]:checked + label {
    border: 1px dashed #222222;
    background: #e9e9e9;
    color: #000000;
}
[data-ui-css-component="treeview"] input[name="operation_type"] + label { border: 1px solid #FFFFFF; }
[data-ui-css-component="treeview"] label {
    display: inline-block;
    margin: 5px 0;
    line-height: 20px;
    cursor: pointer;
    padding: 2px 10px;
}
[data-ui-css-component="treeview"] label::before {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    padding: 0px 6px;
    min-width: 23px;
    min-height: 22px;
}
[data-ui-css-component="treeview"] ul:first-child, [data-ui-css-component="treeview"] [type=checkbox]:checked ~ ul { display: block; }
[data-ui-css-component="treeview"] [type=checkbox]:checked ~ label::before { content: "-"; }
[data-ui-css-component="treeview"] [type=checkbox]:not(:checked) ~ label::before { content: "+"; }