/* .modal-dialog-centered {
    min-height: auto;
} */
/* .modal-dialog-scrollable {
    height: auto;
} */

body.modal-open.overflow-enable {
    overflow-y: auto !important;
    padding-right: 0 !important;
}

.modal-header,
.modal-body,
.modal-footer {
    position: relative;
}

.modal,
.modal .modal-content {
    color: rgb(var(--customize-color-black), 1);
}

.modal .btn-close {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
    z-index: 100;
}

.modal .btn-close>.icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
}


/* [class*="modal"].frame-glass .modal-content:before {
    position: absolute;
    content: '';
    width: calc(100% + 20px);
    height: calc(100% + 50px);
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);
    background-color: rgba(var(--customize-color-black-dark), 0.1);
    border: 1px solid rgba(var(--customize-color-white), 0.3);
} */

/* ============================================================================================== */
/* ======================================== modal loading ======================================= */
/* ============================================================================================== */

.modal-loading .modal-dialog,
.modal-loading .modal-content {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.modal-loading .modal-dialog {
    transform: none !important;
}

.modal-loading .modal-body {
    padding: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================================== */
/* ======================================== modal custom ======================================== */
/* ============================================================================================== */

/* .modal-custom,
.modal-custom .modal-dialog {
    margin: 0;
} */
.modal-custom {
    overflow: hidden;
}

.modal-custom.overflow-y {
    overflow-y: auto;
}

.modal-custom .modal-content {
    border: none !important;
    border-radius: var(--customize-card-border-radius);
    overflow: hidden;
}

.modal-custom .modal-content.enable-overflow-hidden {
    overflow: initial !important;
}

.modal-custom .modal-header,
.modal-custom .modal-body,
.modal-custom .modal-footer {
    border-radius: 0 !important;
}

.modal-custom .modal-header,
.modal-custom .modal-footer {
    /* min-height: 90px; */
    /* height: 100px; */
    height: var(--customize-header-height);
}

.modal-custom .modal-header.auto-height,
.modal-custom .modal-footer.auto-height {
    height: auto;
}


.modal-custom .modal-header.min-height,
.modal-custom .modal-footer.min-height {
    height: auto;
    /* min-height: 100px; */
    min-height: var(--customize-header-height);
}

/* header */
.modal-custom .modal-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* padding: 30px 50px; */
    padding: 20px 50px;
    border-bottom: 1px solid rgba(var(--customize-color-black), 0.2);
}

.modal-custom .modal-header.has-btn-close {}

.modal-custom .modal-header .btn-close,
.modal-custom .modal-body .btn-close {
    position: absolute;
    /* top: 30px;
    right: 25px; */
    top: 20px;
    right: 20px;
    z-index: 100;
}

.modal-custom .modal-header .modal-title-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: calc(100% + 30px);
    margin: 0 -15px;
    /* background-color: rgba(255,255,0,1); */
}

.modal-custom .modal-header .modal-title-row>.modal-title-col {
    position: relative;
    padding: 0 15px;
}

.modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-left {
    text-align: left;
    flex: 1 0 0;
}

.modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-center {
    flex: 1 0 0;
    text-align: center;
}

.modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-right {}

/* has-btn-close */
.modal-custom .modal-header.has-btn-close.has-col-left .modal-title-row>.modal-title-col.this-col-left {
    padding-right: 40px;
}

.modal-custom .modal-header.has-btn-close.has-col-right .modal-title-row>.modal-title-col.this-col-right {
    padding-right: 40px;
}

.modal-custom .modal-header.has-btn-close.has-col-center .modal-title-row>.modal-title-col.this-col-center {
    padding-left: 40px;
    padding-right: 40px;
}

.modal-custom .modal-header-sub {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid rgba(var(--customize-color-black), 0.2);
}


/* .modal-custom .modal-header .modal-menu-row {
    position: relative;
    width: 100%;
    height: 45px;
    background-color: rgba(var(--customize-color-gray-light),1);
}
.modal-custom .modal-header .modal-menu-row>.container {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* body */
.modal-custom .modal-body {
    padding: 50px;
}

/* footer */
.modal-custom .modal-footer {
    /* padding: 30px 50px; */
    padding: 20px 50px;
    justify-content: center;
    border-top: 1px solid rgba(var(--customize-color-black), 0.2);
}

.modal-custom .modal-footer,
.modal-custom .modal-footer>* {
    margin: 0;
}

.modal-custom .modal-footer.disable {
    display: none;
}

.modal-custom .modal-dialog {
    max-width: calc(100% - 60px);
    max-height: calc(100% - 60px);
    min-height: calc(100% - 60px);
    width: 700px;
    margin: 30px auto;
}

.modal-custom.large-size .modal-dialog {
    /* width: 1500px; */
    width: 1200px !important;
}

.modal-custom.small-size .modal-dialog {
    width: 500px !important;
}

.modal-custom.modal-custom-info .modal-dialog {
    width: 800px;
}

.modal-custom.modal-custom-info.large-size .modal-dialog {
    width: 1200px;
}

.modal-custom.small-size .modal-body .container,
.modal-custom.large-size .modal-body .container {
    padding-left: 0;
    padding-right: 0;
}

.modal-custom .modal-header.h-fix,
.modal-custom .modal-footer.h-fix {
    height: 90px;
}

.modal-custom .modal-header.h-fix {}

.modal-custom .modal-footer.h-fix {
    padding-top: 0;
    padding-bottom: 0;
}

/* fullscreen */
.modal-custom .modal-dialog.modal-fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
}

.modal-custom .modal-dialog.modal-fullscreen .modal-body {
    padding: 100px 50px;
}

.modal-custom .modal-dialog.modal-fullscreen .modal-content {
    border-radius: 0 !important;
}

/* style slide left */
.modal-custom.style-slide-left {}

.modal-custom.style-slide-left .modal-dialog,
.modal-custom.style-slide-left .modal-content {
    height: 100%;
}

.modal-custom.style-slide-left .modal-dialog {
    width: 750px;
    min-height: 300px;
    max-width: 100%;
    max-height: 100%;
    transform: none;
    transform: translateX(0) !important;
    margin: 0 auto 0 0;
    transition: margin 0.3sease-out;
    overflow: hidden;
}

.modal-custom.style-slide-left .modal-content {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.modal-custom.style-slide-left .modal-body {
    overflow-y: auto;
}

/* style slide right */
.modal-custom.style-slide-right {}

.modal-custom.style-slide-right .modal-dialog,
.modal-custom.style-slide-right .modal-content {
    height: 100%;
}

.modal-custom.style-slide-right .modal-dialog {
    width: 750px;
    min-height: 300px;
    max-width: 100%;
    max-height: 100%;
    transform: none;
    transform: translateX(0) !important;
    margin: 0 0 0 auto;
    transition: margin 0.3sease-out;
    overflow: hidden;
}

.modal-custom.style-slide-right .modal-content {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.modal-custom.style-slide-right .modal-body {
    overflow-y: auto;
}

/* ============================================================================================== */
/* ======================================== modal none bg ======================================= */
/* ============================================================================================== */

.modal.modal-none-bg .modal-content,
.modal.modal-none-bg .modal-body {
    background: none !important;
    border: none !important;
    border-radius: 0;
}

/* ============================================================================================== */
/* ========================================== modal media ======================================= */
/* ============================================================================================== */

.modal-media {}

.modal-media .modal-content {
    background: none;
}

.modal-media .modal-header .btn-close {
    position: absolute;
    top: 28px;
    right: 25px;
}

.modal-media .modal-header,
.modal-media .modal-footer {
    height: 100px;
    border: none;
}

.modal-media .modal-body {
    border: none;
    padding: 0;
    /* background-color: rgba(255,255,0,0.2); */
}

.modal-media .modal-footer {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.modal-media .title-row {
    position: relative;
    width: 100%;
}

.modal-media .title,
.modal-media .description {
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.modal-media .title {
    font-size: var(--customize-h3-font-size);
    line-height: var(--customize-h3-line-height);
    font-weight: 600;
}

.modal-media .description {
    font-size: var(--customize-default-font-size);
    line-height: var(--customize-default-line-height);
}

.modal-media .link-btn {
    transition: all 0.3s ease;
}

.modal-media.backdrop-black-theme,
.modal-media.backdrop-black-theme .modal-content,
.modal-media.backdrop-black-theme .link-btn {
    color: rgba(var(--customize-color-white), 1);
}

.modal-media.backdrop-black-theme .link-btn:hover {
    color: rgba(var(--customize-color-white), 1);
    /* color: rgba(var(--customize-color-primary),1); */
    /* color: rgba(var(--customize-color-primary-light),1); */
}

.modal-media.backdrop-black-theme ul.button-text-group>li+li:before {
    border-color: rgba(var(--customize-color-white), 0.3);
}

.modal-media.backdrop-white-theme,
.modal-media.backdrop-white-theme .modal-content,
.modal-media.backdrop-white-theme .link-btn {
    color: rgba(var(--customize-color-black), 1);
}

.modal-media.backdrop-white-theme .link-btn:hover {
    color: rgba(var(--customize-color-primary), 1);
}

.modal-media.backdrop-white-theme ul.button-text-group>li+li:before {
    border-color: rgba(var(--customize-color-black), 0.3);
}

.modal-media .media-frame-section,
.modal-media .media-frame-section .media-frame,
.modal-media .media-frame-section .media-frame>.this-media {
    position: relative;
}

.modal-media .media-frame-section .media-frame>.this-media {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* medai frame */
.media-frame-section,
.media-frame-container,
.media-frame-section .media-frame,
.media-frame-section .media-frame-inner,
.media-frame-section .this-media {
    position: relative;
}

.media-frame-container {
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.media-frame-container.on {
    opacity: 1;
}

.media-frame-container.splide,
.media-frame-container.splide .splide-track,
.media-frame-container.splide ul.splide-list,
.media-frame-container.splide ul.splide-list>li {
    height: 100%;
}

.media-frame-section {
    min-height: 300px;
}

.media-frame-section .loading-result {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.media-frame-section .media-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.media-frame-section .media-frame-inner {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    /* background-color: rgba(255,0,0,0.5); */
}

.media-frame-section .media-frame-inner>.this-media {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.media-frame-section .media-frame-inner>.this-media-cover {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    z-index: 3;
}

.media-frame-section .media-frame-inner>.this-media-cover.loading,
.media-frame-section .media-frame-inner>.this-media-cover.loaded {
    opacity: 0;
}

.media-frame-section .media-frame-inner>.this-media-cover.loaded {
    visibility: hidden;
}

.media-frame-section .media-frame-inner>.this-media-cover>.icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    border-radius: 100%;
    color: rgba(var(--customize-color-white), 1);
    background-color: rgba(var(--customize-color-white), 0.3);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);
}

.media-frame-section .media-frame-inner>.this-media-cover>.loading {
    position: absolute;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, rgb(var(--customize-color-white)) 94%, #0000) top/3px 3px no-repeat, conic-gradient(#0000 30%, rgb(var(--customize-color-white)));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
    animation: mediaCoverLoading 0.6s infinite linear;
}

@keyframes mediaCoverLoading {
    100% {
        transform: rotate(1turn);
    }
}

.media-frame-section .media-frame-container.media-slide-on-popup.is-video .media-frame-inner {
    background-color: rgba(var(--customize-color-black-dark), 1);
}

/* ============================================================================================== */
/* ========================================== alert dialog ====================================== */
/* ============================================================================================== */

.modal-alert-dialog {}

.modal-alert-dialog .modal-dialog {
    width: 600px;
    max-width: calc(100% - (var(--bs-modal-margin)*2));
}

.modal-alert-dialog.large-size .modal-dialog {
    width: 1000px;
}

.modal-alert-dialog .modal-content {
    border: none !important;
    border-radius: 20px;
}

.modal-alert-dialog .modal-header,
.modal-alert-dialog .modal-footer {
    display: none !important;
}

.modal-alert-dialog .modal-body {
    padding: 40px 30px;
    text-align: center;
}

.modal-alert-dialog .modal-body .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.2 !important;
    transition: opacity 0.3s ease;
}

.modal-alert-dialog .modal-body .close-btn:hover {
    opacity: 1 !important;
}

.modal-alert-dialog .modal-body .button-row,
.modal-alert-dialog .modal-body .content-row.on-bottom {
    margin-top: 30px;
}

/* ============================================================================================== */
/* ===================================== alert action message =================================== */
/* ============================================================================================== */

.alert-action-message {
    display: block;
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 5px;
    margin: 10px;
    box-shadow: 0 0 10px rgba(var(--customize-color-black-dark), 0.2);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
    z-index: 5000;
    opacity: 0;
    transition: all 0.5s ease;
}

.alert-action-message.on {
    opacity: 1;
}

.alert-action-message>.inside {
    position: relative;
    padding: 10px 15px;
    border-radius: 15px;
}

.alert-action-message,
.alert-action-message.pos-fixed {
    position: fixed;
}

.alert-action-message.pos-absolute {
    position: absolute;
}

.alert-action-message .message-row,
.alert-action-message .message-row>.message-col {
    position: relative;
}

.alert-action-message .message-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.alert-action-message .message-row>.message-col.message {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.alert-action-message .message-row>.message-col.message .icon {
    height: 0;
}

.alert-action-message .message-row>.message-col.message .icon+.text {
    margin-left: 10px;
}

/* theme */
.alert-action-message.theme-white {
    background-color: rgba(var(--customize-color-white), 0.9);
    color: rgba(var(--customize-color-black), 1);
    border: 1px solid rgba(var(--customize-color-black), 0.2);
}

.alert-action-message.theme-white>.inside {
    background-color: rgba(var(--customize-color-black), 0.1);
}

.alert-action-message.theme-black {
    background-color: rgba(var(--customize-color-black-dark), 0.9);
    color: rgba(var(--customize-color-white), 1);
    border: 1px solid rgba(var(--customize-color-white), 0.2);
}

.alert-action-message.theme-black>.inside {
    background-color: rgba(var(--customize-color-white), 0.05);
}

/* color */
.alert-action-message.status-success>.inside {
    background-color: rgba(var(--customize-color-alert-success), 0.2);
    color: rgba(var(--customize-color-alert-success), 1);
}

.alert-action-message.status-fail>.inside {
    background-color: rgba(var(--customize-color-alert-fail), 0.15);
    color: rgba(var(--customize-color-alert-fail), 1);
}

/* align XY */
.alert-action-message.align-y-top {
    top: 0;
    margin-top: -10px;
}

.alert-action-message.align-y-top.on {
    margin-top: 10px;
}

.alert-action-message.align-y-bottom {
    bottom: 0;
    margin-bottom: -10px;
}

.alert-action-message.align-y-bottom.on {
    margin-bottom: 10px;
}

.alert-action-message.align-x-left {
    left: 0;
}

.alert-action-message.align-x-right {
    right: 0;
}

.alert-action-message.align-x-center {
    left: 50%;
    transform: translateX(-50%);
}

/* size */
.alert-action-message.size-w-default {}

.alert-action-message.size-w-auto {
    width: auto !important;
}

/* ============================================================================================== */
/* ============================================ backdrop ======================================== */
/* ============================================================================================== */

.modal-backdrop {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-backdrop,
.modal-backdrop.backdrop-black {
    background-color: rgb(var(--customize-color-black-dark), 0.5);
}

.modal-backdrop.disable-opacity.backdrop-black {
    background-color: rgb(var(--customize-color-black-dark), 1);
}

.modal-backdrop.backdrop-white {
    background-color: rgb(var(--customize-color-white), 0.5);
}

.modal-backdrop.disable-opacity.backdrop-white {
    background-color: rgb(var(--customize-color-white), 1);
}

/* blur */
.modal-backdrop {
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

.modal-backdrop.blur {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.modal-backdrop.blur:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    /* -webkit-backdrop-filter: saturate(100%) blur(50px);
    backdrop-filter: saturate(100%) blur(50px); */
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    transition: all 1s ease;
}

.modal-backdrop.blur:before {
    opacity: 0;
}

.modal-backdrop.blur.show:before {
    opacity: 1;
}

/* ============================================================================================== */
/* ============================================ share =========================================== */
/* ============================================================================================== */

.share-section.on-popup,
.share-section.on-popup>.inside {
    position: relative;
}

.share-section.on-popup>.inside {
    padding: 40px 20px;
}

.share-section.on-popup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.share-section.on-popup .share-on-social {
    margin-top: 20px !important;
    justify-content: center;
    align-items: center;
}

.share-section.on-popup .share-on-social .text-alert {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    right: 0;
    padding: 20px 0 0 0;
    text-align: center;
    font-weight: 400;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* ============================================================================================== */
    /* ======================================== modal custom ======================================== */
    /* ============================================================================================== */

    .modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-right.w-lg-full {
        width: 100%;
    }

    /* header sub on lg */
    .modal-custom .modal-header.has-header-sub-on-lg {
        padding-bottom: 0;
    }

    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg {
        width: calc(100% + 70px) !important;
        margin: 20px -35px 0 -35px !important;
        padding: 0 50px !important;
        border-top: 1px solid rgba(var(--customize-color-black), 0.2);
    }

    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg,
    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg .menu-drag-slide-section,
    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg .menu-drag-slide-inside,
    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg.menu-drag-slide,
    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg .menu-drag-slide .menu-drag-slide-btn {
        height: 45px;
    }

    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg .menu-drag-slide-section {
        width: calc(100% + 100px);
        margin-left: -50px;
        margin-right: -50px;
    }

    .modal-custom .modal-header.has-header-sub-on-lg .header-sub-on-lg .menu-drag-slide-section .splide>.splide-track {
        padding: 0 50px !important;
    }

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* ============================================================================================== */
    /* ======================================== modal custom ======================================== */
    /* ============================================================================================== */

    .modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-right.w-md-full {
        width: 100%;
    }

    /* header sub on md */
    .modal-custom .modal-header.has-header-sub-on-md {
        padding-bottom: 0;
    }

    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md {
        width: calc(100% + 70px) !important;
        margin: 20px -35px 0 -35px !important;
        padding: 0 50px !important;
        border-top: 1px solid rgba(var(--customize-color-black), 0.2);
    }

    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md,
    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md .menu-drag-slide-section,
    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md .menu-drag-slide-inside,
    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md.menu-drag-slide,
    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md .menu-drag-slide .menu-drag-slide-btn {
        height: 45px;
    }

    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md .menu-drag-slide-section {
        width: calc(100% + 100px);
        margin-left: -50px;
        margin-right: -50px;
    }

    .modal-custom .modal-header.has-header-sub-on-md .header-sub-on-md .menu-drag-slide-section .splide>.splide-track {
        padding: 0 50px !important;
    }

    /* fullscreen */
    .modal-custom.modal-custom-md-fullscreen .modal-dialog,
    .modal-custom.modal-custom-md-fullscreen .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0;
    }

    .modal-custom.modal-custom-md-fullscreen .modal-content {
        border-radius: 0;
    }

    .modal-custom.modal-custom-md-fullscreen .modal-dialog {
        margin: 0 !important;
    }

    /* bottom */
    .modal-custom.modal-custom-md-bottom .modal-dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: calc(100% - 50px) !important;
        max-height: calc(100% - 50px) !important;
        margin: 50px 0 0 0;
    }

    .modal-custom.modal-custom-md-bottom .modal-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal-custom.modal-custom-md-bottom.fade .modal-dialog {
        transform: translateY(100px);
    }

    .modal-custom.modal-custom-md-bottom.show .modal-dialog {
        align-items: flex-end;
        transform: none;
    }


}

/* sm - xs */
@media (max-width: 767.98px) {

    /* ============================================================================================== */
    /* ======================================== modal custom ======================================== */
    /* ============================================================================================== */

    .modal-custom .modal-dialog {
        margin: 20px;
        max-width: calc(100% - 40px) !important;
        max-height: calc(100% - 40px) !important;
    }

    .modal-custom.style-slide-left .modal-dialog,
    .modal-custom.style-slide-left .modal-content,
    .modal-custom.style-slide-right .modal-dialog,
    .modal-custom.style-slide-right .modal-content {
        height: 100%;
        margin: 0;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.style-slide-left .modal-content,
    .modal-custom.style-slide-right .modal-content {
        border-radius: 0;
    }

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* ============================================================================================== */
    /* ======================================== modal custom ======================================== */
    /* ============================================================================================== */

    .modal-custom .modal-header {
        padding: 20px 30px 20px 30px;
    }

    .modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-right.w-sm-full {
        width: 100%;
    }

    /* fullscreen */
    .modal-custom.modal-custom-sm-fullscreen .modal-dialog,
    .modal-custom.modal-custom-sm-fullscreen .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0;
    }

    .modal-custom.modal-custom-sm-fullscreen .modal-content {
        border-radius: 0;
    }

    .modal-custom.modal-custom-sm-fullscreen .modal-dialog {
        margin: 0 !important;
    }

    .modal-custom .modal-header .btn-close,
    .modal-custom .modal-body .btn-close {
        top: 20px;
        right: 20px;
    }

    /* bottom */
    .modal-custom.modal-custom-sm-bottom .modal-dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: calc(100% - 50px) !important;
        max-height: calc(100% - 50px) !important;
        margin: 50px 0 0 0;
    }

    .modal-custom.modal-custom-sm-bottom .modal-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal-custom.modal-custom-sm-bottom.fade .modal-dialog {
        transform: translateY(100px);
    }

    .modal-custom.modal-custom-sm-bottom.show .modal-dialog {
        align-items: flex-end;
        transform: none;
    }

    /* has btn close */
    .modal-custom .modal-header.has-btn-close.has-col-left .modal-title-row>.modal-title-col.this-col-left {
        padding-right: 40px;
    }

    .modal-custom .modal-header.has-btn-close.has-col-right .modal-title-row>.modal-title-col.this-col-right {
        padding-right: 40px;
    }

    .modal-custom .modal-header.has-btn-close.has-col-center .modal-title-row>.modal-title-col.this-col-center {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* header sub on sm */
    .modal-custom .modal-header.has-header-sub-on-sm {
        padding-bottom: 0;
    }

    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm {
        width: calc(100% + 30px) !important;
        margin: 20px -15px 0 -15px !important;
        padding: 0 30px !important;
        border-top: 1px solid rgba(var(--customize-color-black), 0.2);
    }

    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm,
    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm .menu-drag-slide-section,
    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm .menu-drag-slide-inside,
    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm.menu-drag-slide,
    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm .menu-drag-slide .menu-drag-slide-btn {
        height: 45px;
    }

    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm .menu-drag-slide-section {
        width: calc(100% + 60px);
        margin-left: -30px;
        margin-right: -30px;
    }

    .modal-custom .modal-header.has-header-sub-on-sm .header-sub-on-sm .menu-drag-slide-section .splide>.splide-track {
        padding: 0 30px !important;
    }

    /* ============================================================================================== */
    /* ============================================ share =========================================== */
    /* ============================================================================================== */

    .share-section.on-popup>.inside {
        padding: 40px 0;
    }

}

/* xs */
@media (max-width: 575.98px) {

    .modal-media .title {
        font-size: 16px;
        line-height: 30px;
    }

    .modal-media .description {

        font-size: 12px;
        line-height: 20px;
    }

    /* ============================================================================================== */
    /* ======================================== modal custom ======================================== */
    /* ============================================================================================== */

    .modal-custom .modal-header {
        padding: 20px 30px 20px 30px;
    }

    .modal-custom .modal-header .container {
        padding: 0 20px;
    }

    .modal-custom .modal-header .btn-close,
    .modal-custom .modal-body .btn-close {
        top: 18px;
        right: 15px;
    }

    .modal-custom .modal-body {
        padding: 30px;
    }

    .modal-custom .modal-footer {
        padding: 20px 30px;
    }

    .modal-custom.modal-custom-xs-bottom {}

    /* fullscreen */
    .modal-custom.modal-custom-xs-fullscreen .modal-dialog,
    .modal-custom.modal-custom-xs-fullscreen .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0;
    }

    .modal-custom.modal-custom-xs-fullscreen .modal-content {
        border-radius: 0;
    }

    .modal-custom.modal-custom-xs-fullscreen .modal-dialog {
        margin: 0 !important;
    }

    .modal-custom .modal-header .modal-title-row>.modal-title-col.this-col-right.w-xs-full {
        width: 100%;
    }

    /* bottom */
    .modal-custom.modal-custom-xs-bottom .modal-dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: calc(100% - 50px) !important;
        max-height: calc(100% - 50px) !important;
        margin: 50px 0 0 0;
    }

    .modal-custom.modal-custom-xs-bottom .modal-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal-custom.modal-custom-xs-bottom.fade .modal-dialog {
        transform: translateY(100px);
    }

    .modal-custom.modal-custom-xs-bottom.show .modal-dialog {
        align-items: flex-end;
        transform: none;
    }

    /* has btn close */
    .modal-custom .modal-header.has-btn-close.has-col-left .modal-title-row>.modal-title-col.this-col-left {
        padding-right: 40px;
    }

    .modal-custom .modal-header.has-btn-close.has-col-right .modal-title-row>.modal-title-col.this-col-right {
        padding-right: 40px;
    }

    .modal-custom .modal-header.has-btn-close.has-col-center .modal-title-row>.modal-title-col.this-col-center {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* header sub on xs */
    .modal-custom .modal-header.has-header-sub-on-xs {
        padding-bottom: 0;
    }

    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs {
        width: calc(100% + 30px) !important;
        margin: 20px -15px 0 -15px !important;
        padding: 0 30px !important;
        border-top: 1px solid rgba(var(--customize-color-black), 0.2);
    }

    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs,
    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs .menu-drag-slide-section,
    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs .menu-drag-slide-inside,
    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs.menu-drag-slide,
    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs .menu-drag-slide .menu-drag-slide-btn {
        height: 45px;
    }

    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs .menu-drag-slide-section {
        width: calc(100% + 60px);
        margin-left: -30px;
        margin-right: -30px;
    }

    .modal-custom .modal-header.has-header-sub-on-xs .header-sub-on-xs .menu-drag-slide-section .splide>.splide-track {
        padding: 0 30px !important;
    }

    /* ============================================================================================== */
    /* ============================================ share =========================================== */
    /* ============================================================================================== */

    .share-section.on-popup>.inside {
        padding: 40px 0;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}