.overlay_container[data-display="flex"]{
    display:flex;
}

.overlay_container[data-display="true"],.overlay_container[data-display="block"]{
    display:block;
}

.overlay_container.modal[data-display="none"],.overlay_container.modal[data-display="false"],.overlay_container.modal[data-show="false"]{
    display: none;
}

.overlay_container[data-display="none"],.overlay_container[data-display="false"],.overlay_container[data-show="false"]{
    z-index:0;
}

.overlay_container{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: #00000090;
    box-sizing: border-box;
    z-index:10;
}

/* modal */

.overlay_container.modal{
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.overlay_container.modal > div{
    background-color:#fff;
    padding:40px 2vw 30px 2vw;
    border-radius:10px;
    text-align: center;
}

.overlay_container.modal .btn_container, .overlay_container.modal .btn_container{
    display:flex;
    justify-content: center;
    margin:20px 0 0 0;
}

.overlay_container.modal .btn_container > div, .overlay_container.modal .btn_container > div{
    cursor:pointer;
    padding:7px 15px;
    margin:0 20px;
    border-radius:5px;
    border:1px solid #FF6100;
}

.overlay_container.modal .btn_container .confirm, .overlay_container.modal .btn_container .confirm{
    background:#FF6100;
    color:#fff;
}

.overlay_container.modal .btn_container .deny, .overlay_container.modal .btn_container .deny{
    color:#FF6100;
    background-color:#fff;
}

/* end : modal */

/* fullpage */

.overlay_container.fullpage .dismiss{
    flex: 1;
    position: absolute;
    height: 100%;
    background:transparent;
    z-index:1;
    top:0;
    width:100%;    
}

.overlay_container.fullpage .content_container{
    background: #fff;
    width: 100%;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    position:absolute;
    z-index:2;
    transition: right 500ms ease-in-out, bottom 500ms ease-in-out;
}

/* end fullpage */

.dismiss-overlay_container{
    position:fixed;
    height:100vh;
    width:100%;
    top:0;
    left:0;
    z-index:0;
}

/* blurring container */

.blurring-overlay_container{
    position: fixed;
    z-index:100;
    transition:right 500ms, bottom 500ms;

    background-color:#fff;
    box-shadow: 0 0 10px #00000020;
    padding:15px;
    box-sizing: border-box;
    z-index:3;
}

.blurring-overlay_container .close_container{
    text-align: right;
    margin-bottom:10px;
    /* font-size:40px;
    line-height: 40px; */
}
.blurring-overlay_container .close_container > span{
    cursor:pointer;
}
.blurring-overlay_container .title{
    font-size: 18px;
    color: #125D55;
    font-weight: bold;
    margin-bottom: 15px;
}
.blurring-overlay_container label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}
.blurring-overlay_container label.cat{
    margin-bottom:2px;
}
.blurring-overlay_container label.cat + .txt{
    font-style:italic;
    margin-bottom:8px;
    font-weight:300;
}
.blurring-overlay_container input{
    border: none;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 2px 10px #00000015;
    height: 35px;
    border-radius: 10px;
    color:#125D55;
}

.blurring-overlay_container input::placeholder{
    color:#0f8f8580;
}

.blurring-overlay_container textarea{
    height:30vh;
    width:100%;
    border: none;
    padding:10px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px #00000015;
    border-radius: 10px;
    color:#125D55;
    line-height:1.3em;

}

.blurring-overlay_container textarea:focus-visible,.overlay_container input:focus-visible{
    outline:none;
    background-color:#0f8f8510;

}

.blurring-overlay_container form > div{
    margin-bottom:20px;
}

.blurring-overlay_container .category_input-container{
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.blurring-overlay_container .submit_btn{
    text-align:right;
}

.blurring-overlay_container .submit_btn > div{
    display:inline-block;
    background-color:#FF6100;
    color:#fff;
    border-radius:5px;
    padding:7px 15px;
    cursor: pointer;
}

.blurring-overlay_container .categories_container{
    display: flex;
    flex-wrap: nowrap;
    width:100%;
    max-width:100%;
    overflow-x:scroll;
    overflow-y: hidden;
    margin-top:15px;
    padding-bottom:10px;
    
}

.blurring-overlay_container .categories_container::-webkit-scrollbar{
    appearance: none;
    -webkit-appearance: none;
    height:6px;
}

.blurring-overlay_container .categories_container::-webkit-scrollbar-thumb{
    background: #0f8f8540;
    height:6px;
    border-radius:10px;
}

.blurring-overlay_container .categories_container .category:not(input){
    background-color:#dbf5f3;
    display: flex;
    align-items: center;
    padding:6px 10px;
    margin-right:10px;
    border-radius:40px;
    white-space: nowrap;
}

.blurring-overlay_container .category .remove{
    margin-left:10px;
    cursor: pointer;
}

/* end blurring container */


.overlay_container[data-display="true"] ~ #dismiss-overlay_container,.blurring-overlay_container[data-display="true"] ~ #dismiss-overlay_container{
    z-index:2
}

@media screen and (min-width:1200px){
    .blurring-overlay_container{
        height:100vh;
        width:50%;
        top:0;
        border-radius:20px 0 0 20px;
    }
    .blurring-overlay_container[data-display="true"]{
        right:0%;
    }
    .blurring-overlay_container[data-display="none"]{
        right:-50%;
    }
}

@media screen and (max-width:1199px){
    .overlay_container.fullpage .content_container{
        right:unset;
        width:100%;
        border-radius:20px 20px 0 0;
    }
    .overlay_container.fullpage[data-display="true"] .content_container,.overlay_container.fullpage[data-display="block"] .content_container{
        bottom:0%;
    }
    .overlay_container.fullpage[data-display="false"] .content_container,.overlay_container.fullpage[data-display="none"] .content_container{
        bottom:-100%;
        transition:z-index 500ms, bottom 500ms ease-in-out;
    }

    /* Blurring overlay container */
    .blurring-overlay_container{
        width:100%;
        border-radius:20px 20px 0 0;
    }

    .blurring-overlay_container[data-display="true"]{
        bottom:0%;
    }

    .blurring-overlay_container[data-display="none"]{
        bottom:-100%;
    }

    .blurring-overlay_container textarea{
        height:25vh;
    }

    .blurring-overlay_container form{
        overflow-y: scroll;
        padding:0 10px 0 0;
        height:100%;
        max-height:calc(100% - 130px);
    }
    .blurring-overlay_container form::-webkit-scrollbar{
        appearance: none;
        -webkit-appearance: none;
        width:7px;
    }
    .blurring-overlay_container form::-webkit-scrollbar-thumb{
        background-color: #0f8f8540;
        border-radius:10px;
    }
    .blurring-overlay_container .submit_btn{
        padding-right:10px;
        margin-top:15px;
    }

    /* End blurring container */
}