@import "../new-variables";
#add-project-modal{
    top:-300px;
}
.dialog-modal {



    &::backdrop {
        background-color: $modal-overlay;
        opacity: 32%;

    }

    width: 100%;
    max-width: 900px;
    height: fit-content;
    padding: 0 !important;
    background-color: white;
    border: none;
    position: relative;
    overflow: initial;

    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3rem;
        background-color: $hover-bg-color; /* Set the background color for the modal header */
        width: inherit;
        height: 74px;

        p {
            font-weight: $bold;
            letter-spacing: 0.32px;
            font-size: $text-size-large;
            color: white;
            text-transform: uppercase;
            margin: 0; /* Remove default margin */
        }

        .circle {
            cursor: pointer;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .circle::before,
        .circle::after {
            content: "";
            position: absolute;
            width: 50%;
            height: 2px;
            background-color: $hover-bg-color;
            transform-origin: center;
        }

        .circle::before {
            transform: rotate(45deg);
            /* No need to set background-color here */
        }

        .circle::after {
            transform: rotate(-45deg);
            /* No need to set background-color here */
        }
    }

    &-content {
        padding: 38px 3rem;
        background-color: inherit;
        width: inherit;
        display: flex;
        flex-direction: column;
        justify-content: center;


        .edit-module-rules-modal{
            .select-wrapper.modal .bootstrap-select button{
                padding-left: 85px;
            }
        }
        .input-checkbox{
            label{
                display: flex;
                border:none!important;
                background-color: transparent!important;
            }

            margin-left:28px;
            margin-bottom: 17px;
        }
        .existing-rules-wrapper{
            margin:45px 0 45px 28px;
            .existing-rules{
                font-size: $text-size-normal-bigger;
                font-weight: $regular;
                letter-spacing: 0.28px;
                color:$main-color;
            }
        }

        .prompt {
            display: flex;
            flex-direction: column;
            align-items: center;
            letter-spacing: 0.32px;
            color: $main-color;
            font-size: $text-size-large;
            margin-bottom: -37px;

            &-upper {
                margin-bottom: 22px;
                letter-spacing: inherit;
                color: inherit;
                font-weight: $bold;
                font-size: inherit;
            }

            &-img-container {
                img {
                }

                margin-bottom: 17px;
            }

            &-lower {
                letter-spacing: inherit;
                color: inherit;
                font-size: inherit;
                font-weight: $regular;

                span {
                    font-weight: $bold;
                }


            }
        }

        p.info {
            text-align: center;
            font-weight: $bold;
            font-size: 1.6rem;
            color: $main-color;
        }

        p.warning {
            text-align: center;
            font-weight: $bold;
            font-size: 1.8rem;
            color: red;
            margin: 6px 0 12px 0;
        }



        img{
            margin:  25px auto;

        }
    }
}