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

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

/* ============================================================================================== */
/* ======================================== 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 .modal-content {
    border: none !important;
    border-radius: 20px;
}
.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;
}

/* header */
.modal-custom .modal-header {
    display: flex;
    flex-wrap: wrap;  
    padding: 30px 50px; 
}
.modal-custom .modal-header .btn-close,
.modal-custom .modal-body .btn-close {
    position: absolute;
    top: 28px;
    right: 25px;
    z-index: 100;
}
.modal-custom .modal-header .modal-title-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
}
.modal-custom .modal-header .modal-title-row>.modal-title-col {
    position: relative;
}
.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 {}


/* .modal-custom .modal-header .modal-menu-row {
    position: relative;
    width: 100%;
    height: 45px;
    background-color: rgba(var(--cpn-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;    
    justify-content: center;
}
.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);
    width: 700px;
    margin: 30px auto;
}
.modal-custom.large-size .modal-dialog {
    width: 1500px;
    /* width: 1200px; */
}

.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;
}

/* ============================================================================================== */
/* ========================================== 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(--cpn-h3-font-size);
    line-height: var(--cpn-h3-line-height);
    font-weight: 600;
}
.modal-media .description {
    font-size: var(--cpn-default-font-size);
    line-height: var(--cpn-default-line-height);
}
.modal-media .link-btn {
    -webkit-transition: all 0.3s ease;
    -mos-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.modal-media.backdrop-black-theme,
.modal-media.backdrop-black-theme .link-btn {
    color: rgba(var(--cpn-color-white),1);
}
.modal-media.backdrop-black-theme .link-btn:hover {
    color: rgba(var(--cpn-color-primary),1);
}
.modal-media.backdrop-black-theme ul.button-text-group>li+li:before {
    border-color: rgba(var(--cpn-color-white),0.3);
}
.modal-media.backdrop-white-theme,
.modal-media.backdrop-white-theme .link-btn {
    color: rgba(var(--cpn-color-black),1);
}
.modal-media.backdrop-white-theme .link-btn:hover {
    color: rgba(var(--cpn-color-primary),1);
}
.modal-media.backdrop-white-theme ul.button-text-group>li+li:before {
    border-color: rgba(var(--cpn-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(--cpn-color-white),1);
    background-color: rgba(var(--cpn-color-white),0.3);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    -moz-backdrop-filter: saturate(100%) blur(10px);
    -ms-backdrop-filter: saturate(100%) blur(10px);
    -o-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(--cpn-color-white)) 94%,#0000) top/3px 3px no-repeat, conic-gradient(#0000 30%,rgb(var(--cpn-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(--cpn-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;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-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;
}

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

.modal-backdrop {
    opacity: 0;
}
.modal-backdrop.show {
    opacity: 1;
}
.modal-backdrop,
.modal-backdrop.backdrop-black {
    background-color: rgb(var(--cpn-color-black-dark),0.7);
}
.modal-backdrop.disable-opacity.backdrop-black {
    background-color: rgb(var(--cpn-color-black-dark),1);
}
.modal-backdrop.backdrop-white {
    background-color: rgb(var(--cpn-color-white),0.7);
}
.modal-backdrop.disable-opacity.backdrop-white {
    background-color: rgb(var(--cpn-color-white),1);
}

/* blur */
.modal-backdrop {
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    -moz-backdrop-filter: saturate(100%) blur(10px);
    -ms-backdrop-filter: saturate(100%) blur(10px);
    -o-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);
}
.modal-backdrop.blur {
    -webkit-backdrop-filter: none;
    -moz-backdrop-filter: none;
    -ms-backdrop-filter: none;
    -o-backdrop-filter: none;
    backdrop-filter: none;
}
.modal-backdrop.blur:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    /* -webkit-backdrop-filter: saturate(100%) blur(50px);
    -moz-backdrop-filter: saturate(100%) blur(50px);
    -ms-backdrop-filter: saturate(100%) blur(50px);
    -o-backdrop-filter: saturate(100%) blur(50px);
    backdrop-filter: saturate(100%) blur(50px); */
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    -moz-backdrop-filter: saturate(100%) blur(30px);
    -ms-backdrop-filter: saturate(100%) blur(30px);
    -o-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    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 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,1);
    text-align: center;
}
.share-section.on-popup>.inside {
    padding: 60px 20px;
}
.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) {}

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

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

}

/* 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;
    }
    
    /* mobile bootom */
    .modal-custom.mobile-is-bottom .modal-dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: calc(100% - 50px) !important;
        margin: 50px 0 0 0;
    }
    .modal-custom.mobile-is-bottom .modal-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .modal-custom.mobile-is-bottom.fade .modal-dialog {
        transform: translateY(100px);
    }
    .modal-custom.mobile-is-bottom.show .modal-dialog {
        transform:none;
    }

    /* 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;
    }

}

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

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

}

/* 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 60px 20px 30px;
    }
    .modal-custom .modal-header .btn-close, .modal-custom .modal-body .btn-close {
        top: 15px;
        right: 15px;
    }
    .modal-custom .modal-body {
        padding: 30px;
    }
    .modal-custom .modal-footer {
        padding: 30px 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%;
    }

}

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