/* ----- */
/* popup */
/* ----- */
.transparent-bg {
    background:none !important;
}

.ivv-dim, .ivv-dim-vis {
    /*z-index:1000;*/
    background: rgba(0,0,0,0.3);
    vertical-align:middle;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
    /* box-shadow: 6px 5px black; */
}

.ivv-dim {
    opacity: 0;
}

.transition_test {
    -webkit-transition: opacity 0.5s ease-in-out 0s;
    transition: opacity 0.5s ease-in-out 0s; 
    opacity: 0;
}

.ivv-dim-show {
    opacity: 1;
}

.mcfw-popup-modal {
    border-radius: 0px !important;
    box-shadow: 10px 9px 20px 1px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    width: 100%;/*fit-content;*/
}

.mcfw-popup-modal > header {
    min-height: 70px;
    padding: 15px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

}
.mcfw-popup-modal  .tablist {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        height: 50px;
        background: #fafafc;
}

.tablist.hidden {
    display: none;
}

.mcfw-popup-modal > header > .title {
    font-size: 20px;
    line-height: 20px;
    color: #263C84; 
}

.mcfw-popup-modal > header >  .rs-icon.close-icon.rs-scale-button {
    position: absolute;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /*transform: rotateY;*/
    /* margin-top: 0px; */
    /* margin-right: 10px; */
}

.mcfw-popup-header {
    min-height: 70px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FAFAFC;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    /* border-bottom: 1px solid #efefef; */
} 

.mcfw-popup-content {
    margin:0px;
    padding:0px;
    /*background:white;*/
}

.mcfw-popup-border-bottom {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.mcfw-popup-toolbar {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.mcfw-popup-toolbar .inner {
    width:100%;
    background:#fff;
    height:50px;
    vertical-align:middle;
    background:#FAFAFC;
    border-top: 1px solid #efefef;
    text-align: center;
    vertical-align:middle;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    display:flex;
}

.popup-toolbar-btn {
    line-height:50px;
    cursor:pointer;
}

.popup-toolbar-btn:hover {
    background:#efefef;
    border-bottom-left-radius: 0px !important;border-bottom-right-radius: 0px !important;
}

.mcfw-popup-modal > * {
    width: 100%; 
}

.mcfw-popup-modal > section {
    /*padding: 30px;*/
    background-color: #fff; 
}
.mcfw-popup-modal > footer {
    min-height: 70px;
    padding: 15px 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #FAFAFC; 
}

.popup-close-button {

    border: none;
    padding: 4px 6px;
    border-radius: 0px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    color: #DE3564;
    /*box-shadow: 0 0 4px #999;*/
    outline: none;
    background: none;
    transition: background 0.2s ease-in;
}

.popup-close-button:hover {
    background:#efefef;
}

/**
 * PARENT - FRAMEWORK CSS
 */
.mcfw-popup-container {
    min-width:400px;
    width:calc(60vw);
    max-width: 1000px;
}

.mcfw-popup-editor {
    min-width:400px;
    width: 100%;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {

    .mcfw-popup-container {
        min-width:100px;
        width:calc(95vw);
        max-width: 1000px;
    }

    .mcfw-popup-editor {
        min-width: 100px;
        width: 100%;
    }

}

/**
 * ConfirmPopup
 */
.mcfw-confirm-popup-container {
    min-width: 120px;
    max-width: 750px;
    width:fit-content;
}

.mcfw-confirm-popup-content {
    width:100%;
}

.popup-background {
    flex-grow: 1;
}