:root {
    --color-primary: #0d6efd;
    --color-gray-200: #9EABC0;
    --bg-gray-200: #E2EEFF;
    --color-primary-300: #0349B0;
    --color-yellow: #FFC261;
    --color-white: #FFFFFF;
}

.img-contain {
    max-width: 100%;
    object-fit: contain;
}

.min-w-max {
    min-width: max-content;
}

.line-break-any {
    line-break: anywhere;
}

.line-h-init {
    line-height: initial;
}

.text-align-end {
    text-align: end;
}
/*----------------
    table
----------------*/
.table-responsive {
    overflow: auto;
}

table thead tr th, table tr td {
    /*min-width: 150px;*/
    max-width: 300px;
}

.dataTables_scrollHead table {
    margin: 2rem 0 0 0 !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border: none !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: inherit !important;
}

.dataTables_scrollHead table {
    margin: 0 !important;
}

table.table-min-width thead tr th,
table.table-min-width tr td {
    min-width: 80px !important;
}

table.table-product-type-list thead tr th:nth-child(4),
table.table-product-type-list tr td:nth-child(4) {
    min-width: 200px !important;
    width: 200px !important;
}

table.table-product-type-list tr td:nth-child(4) {
    line-break: anywhere;
}

    table.table-product-type-list tr td:nth-child(4) p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        margin: 0;
    }

/*table.table-product-type-list thead tr th:nth-child(5),
table.table-product-type-list tr td:nth-child(5) {
    min-width: 150px !important;
    width: 150px !important;
}*/

table.table-product-type-list thead tr th:nth-child(6),
table.table-product-type-list tr td:nth-child(6),
table.table-product-type-list thead tr th:nth-child(7),
table.table-product-type-list tr td:nth-child(7) {
    min-width: 150px !important;
    width: 150px !important;
}

table.withStartAction tr td:first-child {
    /*min-width: 80px !important;
    width: 80px !important;*/
    text-align-last: center;
}

table.withStartActionSm thead tr th:first-child,
table.withStartActionSm tr td:first-child {
    min-width: 50px !important;
}

table.withStartActionMd thead tr th:first-child, table.withStartActionMd tr td:first-child {
    min-width: 100px !important;
    width: 100px !important;
}

table.withStartActionXl thead tr th:first-child,
table.withStartActionXl tr td:first-child,
table.withSecondXl thead tr th:first-child,
table.withSecondXl tr td:first-child {
    min-width: 320px !important;
    width: 28% !important;
}

table.withStartActionXl thead tr th:nth-child(2),
table.withStartActionXl tr td:nth-child(2),
table.withSecondXl thead tr th:nth-child(2),
table.withSecondXl tr td:nth-child(2) {
    min-width: 130px !important;
    width: 11% !important;
}

table.withStartActionXl thead tr th:nth-child(3),
table.withStartActionXl tr td:nth-child(3),
table.withSecondXl thead tr th:nth-child(3),
table.withSecondXl tr td:nth-child(3) {
    min-width: 100px !important;
    width: 9% !important;
}

table.withStartActionXl thead tr th:nth-child(4),
table.withStartActionXl tr td:nth-child(4),
table.withSecondXl thead tr th:nth-child(4),
table.withSecondXl tr td:nth-child(4) {
    min-width: 120px !important;
    width: 12% !important;
}

table.withStartActionXl thead tr th:nth-child(5),
table.withStartActionXl tr td:nth-child(5) {
    width: 40% !important;
}

table.withSecondXl thead tr th:nth-child(5),
table.withSecondXl tr td:nth-child(5){
    min-width: 90px !important;
    width: 22% !important;
}

table.withSecondXl thead tr th:nth-child(6),
table.withSecondXl tr td:nth-child(6) {
    min-width: 70px !important;
    width: 10% !important;
}
table.withSecondXl thead tr th:nth-child(7),
table.withSecondXl tr td:nth-child(7) {
    min-width: 70px !important;
    width: 8% !important;
}

table.withStartlinebreak tr td:nth-child(2) {
    line-break: anywhere;
}

    table.withStartlinebreak tr td:nth-child(2) span,
    table.withStartlinebreak tr td:nth-child(2) p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

table.withSecondlinebreak tr td:nth-child(2) {
    line-break: anywhere;
}

    table.withSecondlinebreak tr td:nth-child(2) span,
    table.withSecondlinebreak tr td:nth-child(2) p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }

/*.dataTables_scroll .dataTables_scrollHeadInner {
    width: 100% !important;
}*/

.dataTables_wrapper .dataTables_info {
    padding-top: .2em !important;
}

.dataTables_wrapper > table > thead > tr > th,
.dataTables_wrapper > table > tbody > tr > th {
    line-break: normal;
}

.dataTables_wrapper > table > thead > tr > td,
.dataTables_wrapper > table > tbody > tr > td {
    height: 40px;
    max-height: 67px;
    line-break: normal;
    vertical-align: middle;
}

.table.action-none > .thead-result th:first-child,
.table.action-none > tbody td:first-child {
    display: none;
}

@media (max-width: 1399px) {
    table.withStartActionSm thead tr th:first-child,
    table.withStartActionSm tr td:first-child {
        min-width: 30px !important;
        width: 30px !important;
    }

    table thead tr th, table tr td {
        max-width: 200px;
    }

    table thead tr th {
        font-size: 14px !important;
    }

    table.tableStockProduct thead tr th:last-child,
    table.tableStockProduct tr td:last-child {
        min-width: 50px !important;
        width: 50px !important;
    }

    table.table-product-type-list thead tr th:nth-child(4),
    table.table-product-type-list tr td:nth-child(4) {
        min-width: 100px !important;
        width: 100px !important;
    }

    table.table-product-type-list thead tr th:nth-child(5),
    table.table-product-type-list tr td:nth-child(5) {
        min-width: 90px !important;
        width: 90px !important;
    }

    table.table-product-type-list thead tr th:nth-child(6),
    table.table-product-type-list tr td:nth-child(6),
    table.table-product-type-list thead tr th:nth-child(7),
    table.table-product-type-list tr td:nth-child(7) {
        min-width: 100px !important;
        width: 100px !important;
    }
}

/*----------------
    form input
----------------*/
.validate-field.form-control:invalid, .validate-field.form-select:invalid, .form-select.invalid, select.invalid + .select2-container .select2-selection--multiple, select.invalid + .select2-container .select2-selection--single {
    border: 1px solid var(--bs-red) !important;
}

.input-group .btn-outline-secondary {
    border-color: #ced4da !important;
}

/*.readonly {
    background-color: var(--bs-gray-100) !important;
}*/

.readonly .can-readonly {
    background-color: var(--bs-gray-200) !important;
    cursor: default !important;
    pointer-events: none !important;
    border-color: var(--bs-gray-400) !important;
    color: var(--bs-gray-600) !important;
}

span.required {
    color: var(--bs-danger) !important;
    font-weight: 700 !important;
}

.form-control#countProductWaitDelivery {
    width: 100px;
}

/*----------------
    [lib] date picker
----------------*/
.flatpickr-input[readonly] {
    background-color: #fff !important;
}

    .flatpickr-input[readonly]:disabled {
        background-color: var(--bs-gray-200) !important;
        cursor: default;
    }

/*----------------
    [lib] file input
----------------*/
.readonly .file-preview .clickable {
    cursor: default !important;
    pointer-events: none !important;
}

/*----------------
    [lib] select2
----------------*/
ul.select2-results__options {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 4px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: #000 !important;
    font-family: var(--bs-body-font-family) !important;
}

html[data-theme=darkmode] .select2-container--default .select2-search--inline .select2-search__field {
    color: #fff !important;
}
/*----------------
    toast
----------------*/
.toast-status-order {
    z-index: 1080;
    top: 3rem !important;
}

    .toast-status-order .toast {
        width: 100% !important;
        font-size: 1.125rem !important;
    }

/*----------------
    modal
----------------*/
.modal .modal-body .er,
.modal .modal-body {
    line-break: anywhere;
}

.modal.large .modal-dialog {
    max-width: 1000px !important;
}


@media (max-width: 1199px) {
    .modal.large .modal-dialog {
        max-width: 900px !important;
    }
}

@media (max-width: 991px) {
    .modal.large .modal-dialog {
        max-width: 700px !important;
    }
}

/*----------------
    form login
----------------*/
.auth-form.no-multisubmit {
    background-color: #fff;
    border-radius: 0.25rem;
}

    .auth-form.no-multisubmit h1.fs-4 {
        background: linear-gradient(330deg, rgba(0,155,255,1) 0%, rgba(0,129,255,1) 25%, rgba(0,90,221,1) 50%, rgba(0,73,180,1) 75%, rgba(0,63,153,1) 100%);
        padding: 1rem;
        color: #fff !important;
        text-align: center;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .auth-form.no-multisubmit hr {
        display: none;
    }

    .auth-form.no-multisubmit .mb-3 {
        padding: 0 1rem;
    }

        .auth-form.no-multisubmit .mb-3.form-check {
            padding-left: 2.5em;
        }

    .auth-form.no-multisubmit button.btn.btn-primary {
        margin: .5rem 2rem 2rem 2rem;
        width: calc(100% - 4rem);
        --bs-btn-color: #166ae6;
        --bs-btn-border-color: #166ae6;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #004fc2;
        --bs-btn-hover-border-color: #004fc2;
        --bs-btn-padding-x: 0.75rem;
        --bs-btn-padding-y: 0.375rem;
        --bs-btn-font-size: 1rem;
        --bs-btn-font-weight: 400;
        --bs-btn-line-height: 1.5;
        --bs-btn-bg: transparent;
        --bs-btn-border-width: var(--bs-border-width);
        --bs-btn-border-radius: 2px;
        --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        display: inline-block;
        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
        font-size: var(--bs-btn-font-size);
        font-weight: var(--bs-btn-font-weight);
        line-height: var(--bs-btn-line-height);
        color: var(--bs-btn-color);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
        border-radius: var(--bs-btn-border-radius);
        background-color: var(--bs-btn-bg);
        box-shadow: var(--bs-btn-box-shadow);
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        .auth-form.no-multisubmit button.btn.btn-primary:hover {
            color: var(--bs-btn-hover-color);
            background-color: var(--bs-btn-hover-bg);
            border-color: var(--bs-btn-hover-border-color);
        }

    .auth-form.no-multisubmit button.btn-secondary {
        background-color: #7c8798 !important;
        border-color: #7c8798 !important;
    }

        .auth-form.no-multisubmit button.btn-secondary:hover {
            background-color: #7c8798 !important;
            border-color: #7c8798 !important;
        }

/*----------------
    Tab : Media library
----------------*/
:root[data-theme=default] #mediaApp {
    margin: 70px 35px 40px 35px !important;
    border-radius: 0.25rem;
    -webkit-box-shadow: 0 3px 9px 0 rgba(169, 184, 200, 0.15);
}

[dir=ltr]:root[data-theme=default] #mediaApp #mediaContainer #navigationApp {
    border-radius: 0.25rem;
}

/*----------------
    Card
----------------*/
.card-header .h1,
.card-header .h2,
.card-header .h3,
.card-header .h4,
.card-header .h5,
.card-header .h6 {
    margin-bottom: 0 !important;
}


/*----------------
    Button
----------------*/
.btn-back {
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    color: #000;
    opacity: 0.5;
    font-size: 1.25rem;
    background-color: transparent;
}


.form-check-input.danger:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

#all-account-div {
    max-height: 350px;
    overflow-y: auto;
}

.content-summarize .col-4 {
    width: 31.333333% !important;
}

.bg-lightblue {
    background-color: #E3F2FB !important;
}

.bg-lightyellow {
    background-color: #FFF8ED !important;
}

.bg-lightgreen {
    background-color: #DFF6F3 !important;
}

.font-medium {
    font-size: 21px !important;
}

.copy-input .input-group-text {
    background-color: var(--bs-white) !important;
    cursor: pointer;
    transition: .5s;
}

    .copy-input .input-group-text:hover {
        color: #fff !important;
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }

#select-product-type-list tbody tr.selected {
    background-color: #e4eefc !important;
}


    #select-product-type-list tbody tr.selected td {
        color: #000 !important
    }



/*form styles*/
#step-form {
    text-align: center;
    position: relative;
}

#progressbar {
    overflow: hidden;
    counter-reset: step;
}

    #progressbar li {
        list-style-type: none;
        color: #666;
        text-transform: uppercase;
        font-size: 14px;
        float: left;
        position: relative;
        letter-spacing: 1px;
    }

        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 25px;
            height: 25px;
            line-height: 28px;
            display: block;
            font-size: 16px;
            color: #333;
            background: #d2d2d2;
            border-radius: 25px;
            margin: 0 auto 5px auto;
        }

        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: #d2d2d2;
            position: absolute;
            left: -50%;
            top: 12px;
            z-index: -1;
        }

        #progressbar li:first-child:after {
            content: none;
        }

        #progressbar li.active:before, #progressbar li.active:after {
            background: #00409c;
            color: #fff;
        }

.collaps-search {
    background: linear-gradient(330deg, rgba(0,155,255,1) 0%, rgba(0,129,255,1) 25%, rgba(0,90,221,1) 50%, rgba(0,73,180,1) 75%, rgba(0,63,153,1) 100%);
    padding: 1.5rem 1.25rem 0 1rem !important;
    border-start-start-radius: 0.25rem;
    border-start-end-radius: 0.25rem;
}



body:not(.left-sidebar-compact) #ta-left-sidebar a.ta-navbar-brand {
    min-height: 50px !important;
}

.ta-navbar-top {
    max-height: 50px !important;
}

div.ta-content {
    margin-top: 50px !important;
    padding: 5px 15px 0 15px !important;
}

.ta-content div.card.mt-4 {
    margin-top: .5rem !important;
    margin-bottom: 0 !important;
}

.ta-content div.row.justify-content-end.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

html[data-theme=default] .ta-content h1, html[data-theme=default] .ta-content .h1 {
    font-size: 22px !important;
}

table.table > :not(caption) > * > * {
    padding: 0.3rem 0.3rem !important;
}

.card, .card-group {
    margin-bottom: 10px !important;
}

.card-body {
    padding: 5px 10px !important;
}

button.btn.collaps-search.py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

form .row.mt-3 {
    margin-top: 0.5rem !important;
}



html[dir] form .row div.mb-3 {
    margin-bottom: 0.3rem !important;
}

h3.card-title, html[dir] .form-check .fs-5, html h5, html .h5, .form-label, .btn, .nav-tabs .nav-link, span.input-group-text, html[dir] *.fs-5, .badge, html[dir] td.dataTables_empty p.py-5, .dataTables_length label, .dataTables_info, .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_paginate .paginate_button,
#productType-countting-display, body {
    font-size: .9rem !important;
}

html[dir] .card-header {
    padding: .6rem .8rem !important;
}

html[dir] td.dataTables_empty p.py-5 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    margin-bottom: 0rem !important;
}


html[dir] .select2-container--default .select2-selection--multiple {
    min-height: 30px !important;
    max-height: 30px !important;
}

/*.form-label, .btn, .nav-tabs .nav-link, span.input-group-text, html[dir] *.fs-5, .badge, html[dir] td.dataTables_empty p.py-5 {
    font-size: .9rem !important;
}*/

.select2-container--default .select2-selection--single {
    max-height: 30px !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 18px !important;
    }

input.form-control, select.form-select, .btn {
    max-height: 30px;
    font-size: .9rem !important
}

.btn {
    font-size: .9rem !important;
}

html[dir] .form-label {
    margin-bottom: 0.2rem !important;
}

.dataTables_wrapper.no-footer .bottom {
    padding-top: 0 !important;
}

/*html[dir] *.fs-5, .badge {
    font-size: 0.8rem !important;
}

.nav-tabs .nav-link, span.input-group-text {
    font-size: .9rem !important;
}*/

span.input-group-text {
    max-height: 30px;
}

img.max-width-300 {
    max-width: 300px !important;
}

.no-browse > .file-caption-name.form-control.kv-fileinput-caption {
    min-height: 100px !important;
}

.dataTables_scrollBody table > thead.thead-result {
    visibility: collapse !important;
}

#AddPaymentInfo:not(.readonly) .file-caption-name.form-control.kv-fileinput-caption {
    background-color: #fff !important;
}

.filter-customer {
    /* display:none;*/
}

#loading {
    top: 0;
    position: fixed;
    background: #ffffffb8;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #0c70a3;
            margin: -4px 0 0 -4px;
        }

        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .lds-roller div:nth-child(1):after {
                top: 63px;
                left: 63px;
            }

        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .lds-roller div:nth-child(2):after {
                top: 68px;
                left: 56px;
            }

        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .lds-roller div:nth-child(3):after {
                top: 71px;
                left: 48px;
            }

        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }

        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .lds-roller div:nth-child(5):after {
                top: 71px;
                left: 32px;
            }

        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .lds-roller div:nth-child(6):after {
                top: 68px;
                left: 24px;
            }

        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .lds-roller div:nth-child(7):after {
                top: 63px;
                left: 17px;
            }

        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12px;
            }

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.img-enlargable {
    cursor: zoom-in;
}

.contrainer-totalprice {
    max-width: 400px;
}

.table.product-type-list .bi-eye-fill, .table.product-type-list .bi-eye-slash {
    font-size: 1.25rem;
    height: 20px;
    margin-top: -3px;
}

.table.product-type-list .bi-grid-3x2-gap-fill {
    transition: .3s ease-in-out;
    color: #CED4DA;
    font-size: 1.5rem;
    height: 25px;
    display: inline-block;
}

.table.product-type-list .bi-grid-3x2-gap-fill::before {
    transition: .3s ease-in-out;
    transform: rotate(90deg);
}

.color-box {
    border: 1px solid #9EABC0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    content: "";
    border-radius: 3px;
}

.dt-empty {
    text-align: center;
}

.table.product-type-list tr {
    transition: .3s ease-in-out
}

    .table.product-type-list tr.dt-rowReorder-moving {
        transform: scale(1.01);
        background-color: #EBF1F5;
        transition: .3s ease-in-out
    }

        .table.product-type-list tr.dt-rowReorder-moving .bi-grid-3x2-gap-fill {
            transition: .3s ease-in-out;
            color: #166ae6;
        }

.card .dataTables_wrapper {
    min-height: 150px !important;
}

div.dataTables_processing {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    align-content: center !important;
    background-color: rgb(255, 255, 255, 0.5) !important;
    z-index: 1 !important;
}

.form-control.form-control-color {
    border: 1px solid #CED4DA !important;
    border-radius: 3px !important;
    padding: 3px !important;
}

.freezeText {
    color: #4f5467;
    font-size: .9rem !important;
    position: absolute;
    top: 4.5px;
    left: 13px;
}

.form-switch .form-check-input {
    height: 1.5em !important;
    width: 3.5em !important;
    margin-right: .75rem !important;
}

.spinner-border {
    width: 1rem !important;
    height: 1rem !important;
    border-width: .2em !important;
}

.claim-file-upload .bi-folder2-open,
.claim-file-upload .bi-upload,
.claim-file-upload bi-file-earmark-arrow-up,
.claim-file-upload .progress {
    display: none !important;
}

.table.table-sorting tbody tr td:first-child {
    cursor: move !important
}

.table.product-type-list:not(.table-sorting) tbody tr td:first-child {
    cursor: default !important;
    pointer-events: none !important
}

.date-range-picker {
    cursor: pointer;
}

    .date-range-picker[readonly] {
        background-color: #fff !important
    }

.daterangepicker.show-calendar .ranges ul {
    padding-left: 0 !important
}

.date-picker-wrapper {
    font-family: var(--bs-body-font-family) !important;
}

    .date-picker-wrapper .month-wrapper {
        border: 1px solid #ced4da;
        color: #8996ab;
    }

    .date-picker-wrapper .time input[type=range] {
        accent-color: #166ae6;
    }

.date-picker-wrapper .month-wrapper table thead .month-name {
    text-align: center;
}

    .date-picker-wrapper .footer .shortcuts .custom-shortcut a {
        font-weight: 500;
        text-decoration: underline !important
    }

    .date-picker-wrapper .footer .shortcuts .custom-shortcut a:hover {
        color: #5897fb !important;
    }

.date-picker-wrapper .first-date-selected, .date-picker-wrapper .last-date-selected {
    background-color: #5897fb !important;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #fb8c00;
    color: #fff !important;
}

.date-picker-wrapper .drp_top-bar .apply-btn {
    border: solid 1px #166ae6;
    background: #166ae6;
}

.date-picker-wrapper {
    border: 1px solid #ced4da;
    background-color: #f3f5f7;
}

    .date-picker-wrapper .month-wrapper table .day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.real-today.hovering {
        background-color: #a6c8ff;
    }

    .date-picker-wrapper .month-wrapper table .day.checked {
        background-color: #ebf4f8;
    }

.date-picker-wrapper .footer .shortcuts .custom-shortcut a::after {
    content: ",";
    color: #666;
}

@media (max-width: 767px) {
    .daterangepicker.show-calendar .ranges {
        display: none
    }
}

@media (max-width: 576px) {
    .daterangepicker .drp-calendar {
        max-width: none !important
    }

        .daterangepicker .drp-calendar.right {
            border-top: 1px solid #ddd;
        }

    .daterangepicker .drp-selected {
        margin-bottom: .5rem
    }

    .date-picker-wrapper.single-month .time {
        display: grid !important
    }

    .date-picker-wrapper.single-month .footer .shortcuts {
        width: 200px;
    }
}