/* space class */
.space{
    height: 50px;
}

/* each page title */
.titleArea{
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    flex-wrap: nowrap;
    padding: 10px;
    height: 85px;
    align-items: center;
}

.titleImg{
    width: 35px;
    height: 35px;
}
.title{
    color: var(--color_13);
    font-size: 2.5rem;
    font-weight: 600;
}

@media (max-width: 767px){
    .titleImg{
        width: 25px;
        height: 25px;
    }
    .title{
        font-size: 2rem;
    }
    .titleArea{
        height: 55px;
    }
}




/* dropdown */

.dropdownArea{
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: var(--color_2);
    padding: 5px;
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--color_10);
    border-top: none;
    z-index: 1;
    overflow-y: scroll;
    max-height: 300px;
}
.dropdown{
    padding: 5px 10px;
    border-bottom: 2px solid var(--color_18);
    cursor: pointer;
    line-height: 25px;
}

.dropdownArea_v1{
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: var(--color_18);
    padding: 5px;
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--color_19);
    border-top: none;
    z-index: 1;
    overflow-y: scroll;
    max-height: 300px;
}
.dropdown_v1{
    padding: 5px 10px;
    border-bottom: 2px solid var(--color_2);
    background-color: var(--color_18);
    cursor: pointer;
    line-height: 25px;
}

.dropdownDisp{
    display: flex;
}


/* load box */
.loadingArea{
    transition: all .1s ease;
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: 2;
    background: var(--color_17);
    opacity: 30%;
}

.load:before{
    content: "";
    position: absolute;
    top: 0px;
    left: -30px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    -webkit-animation: loadbefore 1.5s ease-in-out infinite;
    animation: loadbefore 1.5s ease-in-out infinite;
}
@-webkit-keyframes loadbefore{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, 1);}
    50%{background-color: rgba(255, 255, 255, .2);}
    75%{background-color: rgba(255, 255, 255, .2);}
    100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loadbefore{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, 1);}
    50%{background-color: rgba(255, 255, 255, .2);}
    75%{background-color: rgba(255, 255, 255, .2);}
    100%{background-color: rgba(255, 255, 255, .2);}
}

.load{
    position: relative;
    width: 25px;
    height: 25px;
    top: 46%;
    left: 46%;
    border-radius: 50%;
    -webkit-animation: loadmain 1.5s ease-in-out infinite;
    animation: loadmain 1.5s ease-in-out infinite;
}
@-webkit-keyframes loadmain{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, .2);}
    50%{background-color: rgba(255, 255, 255, 1);}
    75%{background-color: rgba(255, 255, 255, .2);}
    100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loadmain{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, .2);}
    50%{background-color: rgba(255, 255, 255, 1);}
    75%{background-color: rgba(255, 255, 255, .2);}
    100%{background-color: rgba(255, 255, 255, .2);}
}

.load:after{
    content: "";
    position: absolute;
    top: 0px;
    left: 30px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    -webkit-animation: loadafter 1.5s ease-in-out infinite;
    animation: loadafter 1.5s ease-in-out infinite;
}
@-webkit-keyframes loadafter{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, .2);}
    50%{background-color: rgba(255, 255, 255, .2);}
    75%{background-color: rgba(255, 255, 255, 1);}
    100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loadafter{
    0%{background-color: rgba(255, 255, 255, .2);}
    25%{background-color: rgba(255, 255, 255, .2);}
    50%{background-color: rgba(255, 255, 255, .2);}
    75%{background-color: rgba(255, 255, 255, 1);}
    100%{background-color: rgba(255, 255, 255, .2);}
}