﻿
.Fade {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: .7;
    background: var(--background-fade);
    z-index: 9;
}
.ConfirmBox_Fade {
    z-index: 11;
}
.Loading .Fade {
    z-index: 99;
}

.Box {
    background-color: var(--background1);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 10;
}
.Loading .Box {
    z-index: 100;
}

.Box2 {
    background-color: var(--background2);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin: 10px;
    display: inline-block;
}

.Box_Tabbed {
    padding: 0px;
}

.Box_Tab_Content {
    padding: 20px;
}

.Box_Tabs {
    display: flex;
    flex: auto;
}

.Box_Tab {
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    font-family: 'Font2';
    opacity: .7;
    background: var(--background2);
    cursor:pointer;
}

.Box_Tab_Active {
    background: transparent;
    opacity: 1;
}
.Box_Tab_Content {
    display:none;
}
.Box_Tab_Content_Active {
    display:block;
}


.ConfirmBox {
    z-index: 12;
}

.ConfirmBox_Buttons {
    text-align: right;
    margin-top: 20px;
}


.Box_Annex {
    position: absolute;
    float: right;
    width: 300px;
    height: 100%;
    background: var(--background1);
    transform: translate(-15px, -20px);
    margin-left: 100%;
    z-index: 9;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}