﻿@media (max-width: 991px) {

    .nav-open .main-panel,
    .nav-open .wrapper-full-page,
    .nav-open .navbar .container .navbar-toggler,
    .nav-open .navbar .container .navbar-wrapper,
    .nav-open .navbar .container {
        left: 0;
        -webkit-transform: translate3d(260px, 0, 0);
        -moz-transform: translate3d(260px, 0, 0);
        -o-transform: translate3d(260px, 0, 0);
        -ms-transform: translate3d(260px, 0, 0);
        transform: translate3d(260px, 0, 0);
        position:fixed;
    }

    .nav-open .off-canvas-sidebar .navbar-collapse,
    .nav-open .sidebar {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .nav-open .ps-container {
        touch-action: none;
        position: fixed;
    }

    .sidebar,
    .off-canvas-sidebar nav .navbar-collapse {
        right: auto;
        left: 0;
        -webkit-transform: translate3d(-260px, 0, 0);
        -moz-transform: translate3d(-260px, 0, 0);
        -o-transform: translate3d(-260px, 0, 0);
        -ms-transform: translate3d(-260px, 0, 0);
        transform: translate3d(-260px, 0, 0);
    }

    footer.footer {
        width: 100% !important;
    }

    .sidebar .nav .nav-item.active-pro {
        /*position: absolute;*/
        margin-top: 30px;
        width: 100%;
        bottom: 0px;
    }

    .close-layer {
        z-index: unset;
    }

    #bodyClick {
        z-index: unset;
    }

    .navbar.navbar-absolute {
        z-index: unset;
    }
    
    .dark-edition .navbar .navbar-toggler .icon-bar {
        background: white !important;
    }

}

/*Remove spin button inside of number type input*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#login_box {
    margin: 0 auto;
    margin-top: 120px;
    padding-left: 20px;
    padding-right: 20px;
}

#Register_box {
    margin: 0 auto;
}

.kleanking-logo {
    /*animation: heartbeat 1.5s infinite;*/
    -webkit-background-clip: text;
    background-clip: text;
    width: 27px;
    position: relative;
    bottom: 2px;
}

#loginForm {
    margin-top: 10px;
}
    #loginForm .input-group {
        margin-bottom: 15px;
    }
        #loginForm .input-group > p {
            color: #62d26a;
        }

    #loginForm .form-check {
        margin-bottom: 15px;
    }

    #loginForm .form-check-middle {
        text-align: center;
    }

    #loginForm .card-title {
        margin-bottom: 15px;
    }

    #loginForm .register-title {
        margin-bottom: 20px;
    }

    #loginForm .input-group-text > a {
        padding-top: 15px;
        padding-left: 10px;
    }

    #loginForm button.btn-primary {
        font-size: 16px;
    }

    .login_logo .kleanking-logo {
        width: 32px;
        bottom: 3px;
    }

.login_contact {
    margin-top: 15px;
    text-align: center;
}

.login_title {
    font-size: 20px;
}

.sidebar .logo {
    display: flex;
}

.main_logo {
    padding: 5px;
    margin-left: 10px;
}
.main_logo .kleanking-logo {
    animation: none;
    width: 33px;
}

.align-center {
    text-align: center;
}

.alert {
    padding: 10px;
    margin-bottom: 25px;
    text-align: center;
}
    .alert b {
        font-size: 17px;
        font-weight: 400;
        text-transform: unset;
    }
    .alert span {
        display: block;
        max-width: 95%;
    }

#loginForm .alert {
    text-align: left
}

.register-terms {
    min-height: 190px;
    overflow: auto;
    padding: 10px;
    background-color: #1a2035 !important;
    font-size: 15px !important;
}
    .register-terms div {
        line-height: 25px;
    }

.form-check .alert-danger {
    color: #f96262;
    background-color: unset;
}

.navbar .navbar-brand {
    font-size: 1.3em;
    line-height: 30px;
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 2000; /*200*/
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.33);
}

.cv-spinner {
    height: 100%;
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    position: absolute;
    left: 48%;
    /*top: 20px;*/
    top: 45%;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

.overlay-m {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    display: none;
}

    .overlay-m > .fa {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        color: #000;
        font-size: 30px;
    }

    .overlay-m.dark {
        background: rgba(0, 0, 0, 0.5);
    }

@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.modal {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 150px;
}

.modal-content {
    background-color: #202940;
}

.modal-header {
    border-bottom: 1px solid #131827;
}

.modal-dialog .modal-title {
    color: #fff;
}

.modal-dialog .modal-body p {
    color: #8b92a9;
}

.modal-footer {
    border-top: 1px solid #131827;
    justify-content: space-between;
}
    .modal-footer .btn-link {
        background-color: #131827 !important;
    }

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.main-panel > .content {
    margin-bottom: 65px;
}

footer.footer {
    /*background: linear-gradient(60deg, #288c6c, #4ea752);*/
    background: linear-gradient(60deg, #202940, #1a2035);
    height: 65px;
    width: 87%;
    position: fixed;
    bottom: 0px;
    z-index: 10 !important;
}

footer.footer .btn {
    padding: 15px 0px;
}
    footer.footer .btn .material-icons {
        font-size: 22px;
    }

footer.footer .container-fluid {
    display: inline-flex;
    align-items: center;
}
    footer.footer .container-fluid > a:first-child {
        margin-top: 8px;
    }

.fixed-plugin {
    top: 60px;
}

.touch-disabled {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.touch-disabled-effect {
    background-color:red;
}

.hidden {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #202940 inset !important;
    -webkit-text-fill-color: white !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #AAAAAA !important;
}

input[type="text"] {
    -webkit-appearance: listbox !important;
}

select.form-control {
    -webkit-appearance: listbox !important;
}

.sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
    margin: 5px 15px 0;
    text-transform: unset;
}

.sidebar .nav li .nav-info {
    margin: 10px 15px 0;
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: capitalize;
    font-size: 13px;
    padding: 10px 15px;
}

.active-pro > .nav-info > p{
    font-size: 10px !important;
    color: #a9afbbd1;
}

.list-group-item {
    padding-top: 0.75rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #1a2035;
}

.list-group-item .item-title,
.list-group-item .item-content {
    font-size: 17px;
}

.list-group-item .item-title {
    float: left;
}

.list-group-item .item-content {
    float: right;
    font-weight: 300;
    color: white;
}
    .list-group-item .item-content .btn {
        margin: 0px;
        padding: 5px;
    }

.form-control {
    font-size: 18px;
    /*margin-top: 15px;*/
}

input[type="text"]:disabled:focus {
    cursor: not-allowed;
}

.form-check .form-check-sign .check {
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(0, 0, 0, .54);
    overflow: hidden;
    z-index: 1;
    border-radius: 3px;
    top: -3px;
}

.form-check .form-check-label {
    padding-left: 30px;
}

.item-nickname .item-check .form-check .form-check-label {
    padding-left: 25px;
}

.item-nickname .item-check .check-icon .material-icons,
.item-nickname .td-actions .check-icon .material-icons {
    font-size: 22px;
    color: #9196a5;
}
    .item-nickname .item-check .check-icon .material-icons.checked {
        color: #d43936;
    }

    .item-nickname .txt-nickname{
        float: left;
    }

.item-nickname .td-actions .check-icon .material-icons {
    margin-right: 18px;
}
/*
.form-check .form-check-sign .check:before {
    margin-top: 0px;
    margin-left: 10px;
}*/

.form-check .form-check-sign:before {
    height: 22px;
    width: 22px;
}

.dark-edition .form-check .form-check-sign:before {
    left: 1px;
    top: 1px;
}

.dark-edition .form-control, .is-focused .dark-edition .form-control {
    background-image: linear-gradient(to top, #48a356 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, rgba(180, 180, 180, 0.1) 1px, rgba(180, 180, 180, 0) 1px);
}

.form-check .form-check-input:focus ~.form-check-sign .check:after {
    opacity: 0.2;
}

.form-check .form-check-input:checked ~ .form-check-sign .check {
    /*background: #9c27b0;*/
}

    /*
    .form-check .form-check-input:checked ~ .form-check-sign .check:before {
        color: #FFFFFF;
        box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
        animation: checkboxOn 0.3s forwards;
    }*/

    .form-check .form-check-input:checked ~ .form-check-sign .check:before {
        /*
        border-color: #b2f9ce;
        border-style: solid;
        border-width: 0 0.28em 0.28em 0;*/
        transform: scaleX(-1) rotate(135deg);
        transform-origin: left top;
        border-right: 3.5px solid #b2f9ce;
        border-top: 3.5px solid #b2f9ce;
        content: '';
        position: absolute;
        height: 1.4em;
        width: 0.7em;
        margin-top: 0px;
        margin-left: 0px;
        left: 1px;
        top: 13px;
        animation: checkOn 0.3s forwards;
    }

@keyframes checkOn {
    0% {
        height: 0;
        width: 0;
    }

    50% {
        height: 0;
        width: 0.7em;
    }

    100% {
        height: 1.4em;
        width: 0.7em;
    }
}

.form-check .form-check-input:checked ~ .form-check-sign:before {
    animation: rippleOn 500ms;
}

.form-check .form-check-input:checked ~ .form-check-sign .check:after {
    animation: rippleOn 500ms forwards;
}

.form-check .form-check-input:not(:checked) ~ .form-check-sign:before {
    animation: rippleOff 500ms;
}

.form-check .form-check-input:not(:checked) ~ .form-check-sign .check:after {
    animation: rippleOff 500ms;
}

.form-check .form-check-input[disabled] ~ .circle {
    opacity: 0.5;
}

.form-check .form-check-input[disabled] ~ .form-check-sign .check {
    border-color: #000000;
    opacity: .26;
}

.form-check .form-check-input[disabled] ~ .form-check-sign .check:after {
    background-color: rgba(0, 0, 0, 0.87);
    transform: rotate(-45deg);
}

.form-check .form-check-input[disabled][checked] ~ .form-check-sign .check {
    background-color: #000000;
}

.dark-edition .form-check .form-check-input:checked ~ .form-check-sign .check {
    border-color: #40475a;
    /*background: linear-gradient(60deg, #fff, #ca9dd2);*/
        background: none
    }

    .dark-edition .form-check .form-check-input:checked ~ .form-check-sign .check:before {
        color: #202940;
    }

.togglebutton label input[type=checkbox][disabled] ~ .toggle {
    content: "";
    display: inline-block;
    width: 30px;
    height: 15px;
    background-color: rgba(80, 80, 80, 0.7);
    border-radius: 15px;
    margin-right: 15px;
    transition: background 0.3s ease;
    vertical-align: middle;
}

.togglebutton label input[type=checkbox][disabled] ~ .toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked ~ .toggle:after {
    background-color: #BDBDBD;
}

.togglebutton label input[type=checkbox] ~ .toggle:active:after,
.togglebutton label input[type=checkbox][disabled] ~ .toggle:active:after {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}

.togglebutton label input[type=checkbox]:checked ~ .toggle:after {
    left: 15px;
}

.togglebutton label input[type=checkbox]:checked ~ .toggle {
    background-color: rgba(156, 39, 176, 0.7);
}

    .togglebutton label input[type=checkbox]:checked ~ .toggle:after {
        border-color: #9c27b0;
    }

    .togglebutton label input[type=checkbox]:checked ~ .toggle:active:after {
        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
    }


.item-check .form-check {
    margin-top: -43px;
    /*margin-right: 4px;*/
    margin-left: 27px;
}
    .item-check .form-check.form-check-top {
        margin-top: -13px;
        right: 10px;
    }

.item-check.check-top {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}
    .item-check.check-top > span {
        align-self: self-end;
        font-weight: 300;
        color: white;
    }

.td-actions .form-check {
    margin-top: -43px;
    /*margin-right: 4px;*/
    margin-left: 27px;
}

.item-unit {
    margin-right:5px;
}

.no-card-top {
    margin-top: -20px;
}

.card {
    margin-top: 0px;
    margin-bottom: 40px;
}
    .card .card-header {
        z-index: unset !important;
    }

    .card .card-header-icon .card-icon > img {
        max-width: 55px;
        max-height: 55px;
    }

    .card .card-header-info .card-icon {
        background: linear-gradient(60deg, #2e91dc, #55acee) !important;
    }

.card-stats .card-header + .card-footer {
    margin-top: 10px;
}

.card .card-header.card-header-image {
    margin-top: -20px;
}

.card-profile {
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: left;
}
    .card-profile .card-avatar + .card-body {
        margin-top: 0px;
    }

.card .card-header-middle {
    padding:10px !important;
    margin-top: 15px !important;
}

.card-header-middle > h4 {
    margin-bottom:0px !important;
}

.card .card-title {
    color: white !important;
}

.card .card-header-text {
    text-align: left !important;
    margin-top: 15px;
}

.card .card-body .stats {
    display: inline-flex;
}

.card .card-body .item-nickname,
.card .card-body .item-description {
    color: white !important;
}

.card .card-body .item-description {
    font-weight: 100;
}

.card .card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
}

.card .card-body .item-nickname {
    display: flex;
    justify-content: space-between;
}

.card-footer .item-check {
    margin-top: -5px;
}

.card-footer .item-check .check-icon .material-icons {
    font-size: 22px;
    color: #9196a5;
}
    .card-footer .item-check .check-icon .material-icons.checked {
        color: #ff3c38;
    }

    .card-footer .item-check .check-icon .material-icons.wish-icon {
        font-size: 28px;
        vertical-align: middle;
    }

.card-footer .item-unit {
    padding-left: 8px;
    font-size: 18px;
}

.card-footer .txt-description {
    max-width: 80%;
}

.item-element .card-body {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.item-element .card-footer .text-success {
    color: #85bde9 !important;
}

.card-footer .btn-delete {
    padding: 5px;
}

.card-footer .btn-info {
    padding: 10px;
}

.card .card-order {
    padding: 10px !important;
}
    .card .card-order .card-title {
        /*padding-top: 12px;*/
        /*padding-left: 10px;*/
    }

    .card .card-order .form-group {
        padding-bottom: 0px;
    }

.card-header-item {
    margin: 0px 5px 0 !important;
}

.card-header-icon .card-image {
    padding: 3px !important;
    /*background: #999999 !important;*/
}
    .card-header-icon .card-image > img {
        max-height: unset !important;
        max-width: unset !important;
        width: 82px !important;
        height: 82px !important;
    }

.dropdown-menu.show {
    width:100%;
}

.new-list .card .card-footer .stats {
    /*top: -7px;*/
    font-size: 14px;
}

.new-list .total-count {
    margin-top:15px;
}

.btn-group-bottom {
    display: flex;
    justify-content: space-evenly;
}
    .btn-group-bottom .btn {
        font-size: 13px;
        margin-top: 20px;
    }
        .btn-group-bottom .btn > i {
            margin-top: -19px;
        }

.btn-group-vertical-2 {
    display: grid;
    justify-content: center;
    margin-top: 10px;
}

.card-footer .btn-group {
    margin: 0px;
}
    .card-footer .btn-group .input-qty {
        width: 60px;
        height: 37px;
        background: #202940;
        border: 1px solid rgba(180, 180, 180, 0.1);
        font-size: 20px;
        text-align: center;
        color: white;
    }
    .card-footer .btn-group .text-unit {
        font-size: 18px;
        font-weight: 400;
        padding-top: 7px;
        padding-left: 10px;
    }

.dark-edition .btn.btn-info {
    color: #fff;
    background-color: #55acee;
    border-color: #55acee;
    box-shadow: none;
}
    .dark-edition .btn.btn-info:focus,
    .dark-edition .btn.btn-info.focus,
    .dark-edition .btn.btn-info:hover {
        background-color: #519cd5;
        border-color: #55acee;
    }

    .dark-edition .btn.btn-info:active,
    .dark-edition .btn.btn-info:active:hover {
        background-color: #519cd5;
        border-color: #519cd5;
    }

.nav-mobile-menu .btn-just-icon .material-icons {
    position: relative !important;
    margin-right: 0px !important;
    font-size: 1.5rem !important;
    line-height: 45px !important;
    /*margin-top: -30px !important;*/
}

.navbar .btn-just-icon .material-icons {
    margin-top: -22px !important;
    margin-right: 0px !important;
}

.nav-link-last {
    margin-top: 0px;
}
    .nav-link-last .d-md-block {
        color: white;
        font-size: 15px;
        margin-left: 10px;
    }

.navbar .nav-item .nav-link-last {
    margin-right: 30px;
}

.sidebar .nav .nav-link-last {
    padding: 0px;
}

.sidebar .nav .nav-link-last i{
    color: #ffffffd1 !important;
}

.sidebar .nav-link-last .btn.btn-just-icon {
    height: 45px;
    min-width: 45px;
    width: 45px;
    line-height: 45px;
}

.alert .close i {
    color: #fff;
    font-size: 23px;
    font-weight: 600;
}

tr.txt_strong > td {
    font-weight: 400;
    color: white !important;
}

tr td p.txt_strong {
    font-weight: 400;
    color: white;
}

tr > td > p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.order-list > tr > td {
    /*padding: 7px 8px !important;*/
    padding: 3px 3px 0px 3px !important;
}

.order-list .card-order .form-group label {
    color: white;
}

.card-body.table-item {
    padding-bottom: 0px !important;
}

.item-list,
.new-list,
.cart-list {
    padding-left: 20px;
    padding-right: 20px;
}
    .item-list .card,
    .new-list .card,
    .cart-list .card {
        margin-bottom: 5px;
        margin-top: 2px;
    }

.item-list .td-actions .btn,
.table-item .td-actions .btn {
    /*margin: 0px;*/
    padding: 5px;
}
    .item-list .td-actions .btn > i {
        width: 20px;
    }

.item-list .card-title {
    color: white !important;
    margin-top: 5px !important;
}

.item-list .card-icon {
    padding: 3px !important;
    margin-top: 10px !important;
    margin-right: unset !important;
    float: left;
}

.img-container .zoom-img-wrap > img {
    max-width: 550px;
}

.item-list .img-container,
.new-list .img-container {
    /*background: linear-gradient(60deg, #d22824, #da3a36);*/
    border-radius: 3px;
    padding: 3px !important;
    margin-top: 5px !important;
    margin-right: unset !important;
    float: left;
}

    .item-list .img-container > img,
    .new-list .img-container > img {
        font-size: 20px;
        line-height: 56px;
        width: 56px;
        height: 56px;
        text-align: center;
    }

.card-item .img-container {
    margin-top: unset;
}
    .card-item .img-container > img {
        font-size: 36px;
        line-height: 50px;
        width: 50px;
        height: 50px;
        text-align: center;
    }

.card-item .card-category {
    margin: unset;
    margin-left: 5px;
}

.card-item .item-check {
    margin-right: 5px;
}

.item-list .card-category i,
.item-list .card-title i {
    line-height: 33px !important;
    height: unset !important;
}

.item-list .card-item .card-category i {
    line-height: unset !important;
}

.item-list .card-category .text-icon {
    width: 23px !important;
}

.item-list .card-footer {
    margin-top: 5px !important;
    border-top: 1px solid rgba(180, 180, 180, 0.1);
}

.item-list .card-header-icon .card-category i,
.item-list .card-header-icon .card-title i {
    font-size: 22px;
}

.item-list .card-stats .card-header .card-icon + .card-category {
    padding-top: 0px;
}

.item-list .card-header-icon .card-title .nickname {
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    float: right;
}

.item-list .card .card-description {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 12px;
}

.page-title {
    text-align: center;
    margin-bottom: 25px;
}
    .page-title > b {
        border-bottom: 2px solid #2f374b;
        padding: 5px;
        font-size: 20px;
        color: white;
    }

/* Pagination*/

.page-item .page-link {
    border-radius: 1.875rem !important;
}

.page-item:first-child .page-link {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

.page-item.active .page-link {
    z-index: 1;
    color: #ffffff;
    background-color: #9c27b0;
    border-color: #9c27b0;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.page-link:hover {
    color: #9c27b0;
    font-weight: 800;
    text-decoration: solid;
    background-color: #e9ecef00;
    /* border-color: #dee2e6; */
}

.pagi-wrap {
    display: flex;
    justify-content: space-between;
}
.pagi-info, .pagi-button {
    display: flex;
}
.pagi-button {
    justify-content: flex-end;
}

.pagi-info {
    font-size: 16px;
    padding-top: 8px;
}
    .pagi-info #current_page_no {
        font-size: 19px;
        color: white;
    }
    .pagi-info .total{
        margin-right: 3px;
    }

.datepicker:disabled, .datepicker[readonly] {
    /*background-color: unset !important;*/
    /*opacity: 1;*/
    background-color: #202940;
    border-radius: 3px;
    padding-left: 5px;
}

.txt-grey {
    color: #a9afbb6b;
}

.txt-shine {
    font-weight: 500;
    color: #8ff4a5;
}

.txt-area {
    border: solid 1px #2f374b;
    padding: 5px;
}

.txt-barcode,
.item-unit {
    font-weight: 400;
}

.validation-summary-errors > ul {
    margin-bottom: 0px;
}

.field-validation-error {
    color: #f96262;
}

.form-control:focus {
    border-color: #2d483f;
}

textarea {
    overflow: auto !important;
    resize: vertical !important;
}

td .material-icons {
    font-size: 20px;
    vertical-align: middle;
}

.card .card-header.card-header-image img {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.active-pro > a > p {
    font-size: 10px !important;
    color: #a9afbbd1;
}

.input-group > .form-search {
    width: 1%;
}

.bootstrap-select .dropdown-toggle .filter-option {
    background: #1a2035;
    color: #efefef;
    padding-left: 10px;
    padding-top: 8px;
    font-size: 18px;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 110px !important;
}

.dropdown-menu .dropdown-item, .dropdown-menu li > a {
    padding-left: 5px !important;
    font-size: 17px;
    min-width: unset;
}
    .dropdown-menu .dropdown-item:hover, 
    .dropdown-menu li > a:hover,
    .dropdown-menu dropdown:not(.show-dropdown) .dropdown-menu li > a:focus, {
        box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(156 39 176 / 40%) !important;
        background: linear-gradient( 60deg, #55acee, #55acee) !important;
        color: #fff !important;
    }

.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu .dropdown-item:hover,
.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu .dropdown-item:focus,
.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu .dropdown-item:active,
.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu li > a:hover,
.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu li > a:focus,
.dark-edition .dropdown:not(.show-dropdown) .dropdown-menu li > a:active {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
    background: linear-gradient(60deg, #3b5998, #3b5998);
    color: #fff;
}

.dark-edition .text-info {
    color: #efefef !important;
}

.bootstrap-select .dropdown-item.active {
    background: #3b5998;
    color: #fff !important;
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: #288c6c;
}
    .bootstrap-datetimepicker-widget a[data-action]:hover span {
        color: #288c6c;
    }

.bootstrap-datetimepicker-widget table td.active > div,
.bootstrap-datetimepicker-widget table td.active:hover > div {
    background-color: #288c6c;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(40, 140, 108, 0.4);
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #288c6c;
}

/*
@media (max-width: 991px) {
    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: unset;
    }
}
*/

.togglebutton label {
    color: unset;
}
    .togglebutton label input[type=checkbox]:checked ~ .toggle {
        background-color: rgba(40, 140, 108, 0.7);
    }
        .togglebutton label input[type=checkbox]:checked ~ .toggle:after {
            border-color: #288c6c;
        }

.togglebutton .theme_light,
.togglebutton .theme_dark {
    padding: 4px;
    border: 1px solid #2e8a63;
    border-radius: 3px;
}

.togglebutton .theme_light {
    background: white;
    color: black;
}

.togglebutton .theme_dark {
    background: black;
    color: #8b92a9;
}

.login_ads {
    margin-top: 40px;
}

.top_ads {
    margin-top: -25px;
    margin-bottom: 15px;
}

.dark-edition .sidebar[data-color="green"] li.button > a {
    background: linear-gradient(60deg, #f5700c, #fb9344);
    box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(175 138 76 / 40%);
    color: #fff !important;
}
    .dark-edition .sidebar[data-color="green"] li.button > a > i {
        color: #fff !important;
    }


.card-footer .flex-right {
    margin-left: auto;
    margin-right: 0px;
}

    .card-footer .flex-right .item-check {
        margin-top: 5px;
        margin-bottom: 3px;
        margin-left: 10px;
    }

.card-footer .qty-vary {
    margin-top: -2px;
}

#btn-statement.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.4;
}

.row-flex {
    display: flex;
    justify-content: space-between;
}

.table.table-compact {
    width: unset;
}

    .table.table-compact > thead > tr > th,
    .table.table-compact > tbody > tr > td {
        max-width: 200px;
        text-align: center
    }

    .table.table-compact .row-flex input {
        max-width: 70px;
    }

    .table.table-compact .row-flex .from-to {
        padding-top: 3px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 20px;
    }

    .table.table-compact .row-flex input[disabled] {
        font-weight: 100;
        color: #8b92a9;
    }

#note_txt{
    font-size: 16px;
}

.btn-statement {
    text-transform: unset;
}

.dark-edition .alert.alert-info {
    background: unset;
    background-color: #55acee;
}