/* Modal Css */

.modalOverlay {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(var(--hex-black-rgb), .7);
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 89;
}
.modalWrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    &.left {
        left: 0;
        top: 32px;
        transform: unset;
    }
    &.right {
        left: unset;
        top: 32px;
        transform: unset;
        right: 0;
        @include responsive(sm) {
            top: 46px;
        }
    }
    &__inner {
        max-width: 600px;
        background-color: var(--hex-white-bg);
        overflow: hidden;
        max-height: calc(100vh - 32px);
        height: calc(100vh - 32px);
        overflow-y: auto;
        scrollbar-color: var(--hex-main-color-one) var(--hex-search-bg);
        scrollbar-width: thin;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        @include responsive(sm) {
            height: calc(100vh - 46px);
        }
        &::-webkit-scrollbar {
            width: 5px;
            height: 8px;
            background-color: var(--hex-search-bg);
            border-radius: 10px;
            &-thumb {
                background-color: var(--hex-main-color-one);
                border-radius: 10px;
            }
        }
        &.modal__full {
            min-width: calc(100vw - 30px);
            height: 100vh;
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
        &.modal__xxl {
            @include responsive(min-md) {
                min-width: 750px;
            }
            @include responsive(min-lg) {
                min-width: 980px;
            }
            @include responsive(min-xl) {
                min-width: 1180px;
            }
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
        &.modal__xl {
            @include responsive(min-md) {
                min-width: 750px;
            }
            @include responsive(min-lg) {
                min-width: 990px;
            }
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
        &.modal__lg {
            @include responsive(min-md) {
                min-width: 750px;
            }
            @include responsive(min-lg) {
                min-width: 800px;
            }
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
        &.modal__md {
            @include responsive(min-md) {
                min-width: 740px;
            }
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
        &.modal__sm {
            @include responsive(min-sm) {
                min-width: 740px;
            }
            @include responsive(sm) {
                min-width: calc(100vw - 20px);
            }
        }
    }
    &__close {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 30px;
        width: 30px;
        background-color: var(--hex-search-bg);
        color: var(--hex-delete);
        font-size: 18px;
        -webkit-box-shadow: 0 0 10px var(--hex-box-shadow);
        box-shadow: 0 0 10px var(--hex-box-shadow);
        cursor: pointer;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        flex-shrink: 0;
        border-radius: 5px;
        font-size: 18px;
        margin-left: auto;
        &:hover {
            background-color: var(--hex-danger-color);
            color: var(--hex-white-text);
        }
    }
    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--hex-border-color);
        padding: 10px 20px;
        &__left {
            flex: 1;
        }
        &__title {
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
            color: var(--hex-heading-color);
        }
        &__para {
            font-size: 16px;
            font-weight: 400;
            line-height: 20px;
            color: var(--hex-paragraph-color);
        }
    }
    &__body {
        .smsGateway {
            &__item {
                border: 0;
            }
        }
        &__para {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: var(--hex-paragraph-color);
        }
    }
    &__footer {
        padding: 10px 20px;
        border-top: 1px solid var(--hex-border-color);
        &__flex {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        &__btn {
            color: var(--hex-paragraph-color);
            font-size: 16px;
            font-weight: 400;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            text-transform: capitalize;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
            line-height: 20px;
            padding: 10px 15px;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            -webkit-transition: all 0.3s ease-in;
            transition: all 0.3s ease-in;
            background-color: #0080ff;
            background-color: var(--hex-main-color-one);
            color: var(--hex-white-text);
            position: relative;
            z-index: 0;
            overflow: hidden;
            &::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0;
                background-color: var(--hex-main-color-one);
                left: 0;
                top: 0;
                visibility: hidden;
                opacity: 0;
                transition: all .4s;
            }
            &:hover {
                background-color: unset;
                color: var(--hex-white-text);
                &::before {
                    width: 100%;
                    visibility: visible;
                    opacity: 1;
                    z-index: -1;
                }
            }
            &.modal_cancel {
                background-color: var(--hex-border-color);
                color: var(--hex-heading-color);
                &:hover {
                    color: var(--hex-white-text);
                    &::before {
                        background-color: var(--hex-delete);
                    }
                }
            }
        }
    }
}