app-root>*:not(router-outlet, footer, app-header){

    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    font-size: 3vh;

}



app-root>app-dashboard{
    /* margin-top: 5vh; */
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;


}

.spacer{
    height: 0px;
}


/*-------------------------------*/
/*      FORM STYLES
/*-------------------------------*/

.form-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    padding: 1vw 0;

    height: 100%;

    box-shadow: 10px 10px 20px 1px #4a4a4a;
}


.form-container>.sub-part{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    margin: 0.5vh;
}


input[type="text"], input[type="password"]{
    width: calc(100% - 60px);
    max-width: 150px;
    height: 5vh;
    border-radius: 5px;
    border: 0px solid #2f2f2f;
    padding: 0px 10px;
    font-size: 3vh;
    margin: 6px 0;
}
input[type="checkbox"]{
    width: 4vh;
    height: 4vh;
}

input.small{
    width: 4vh;
    padding: 1vh;
    border-radius: 0.5vw;
}

input.medium{
    width: 30vh;
}
input.large{
    width: 30vh;
}





.form-container span{
    margin: 10px 0;

    text-align: center;
}

/*-------------------------------*/
/*      BTN STYLES
/*-------------------------------*/

.btn, .btn-valid, .btn-alert, .btn-cancel, .btn-info{
    border-radius: 1vh;
    padding: 1vh;
    margin: 1vh;
    font-size: min(3vh, 15px);

}
/* -------------------------------*/
/*      TITLE STYLES
/* -------------------------------*/

.title{
    font-size: 3.8vh;
    margin: 2vh 0px;
}
.sub-title{
    font-size: 3.5vh;
    margin: 2vh 0px;
}
.sub-sub-title{
    /* font-size: 3vh; */
    margin: 2vh 0px 1vh 2vw;
}

.super-title{
    font-size: 7vh;
    margin: 1vh 10px;
    
}

.super-title>.p1{
}
.super-title>.p2{
    margin-left: 5vh;
}

.error-message, .info-message{
    /* position: fixed; */
    top: 5vh;
    left: 0px;

    padding: 2vh 0px;
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.error-message>span, .info-message> span{
    width: 90%;
}
/*-------------------------------*/
/*      HEADER
/*-------------------------------*/



app-header{

    /* position: sticky;
    top: 0px;
    left: 0px; */

    width: 100%;

    z-index: 5;

    min-height: unset  !important;
    /* display: block !important; */
}

header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 9vh;
    font-size: 4vh;
}

header>a{
    /* font-size: 3vh; */
    margin: 0.5vh;
}




/*-------------------------------*/
/*      CALENDER
/*-------------------------------*/
.calender-container{
    width: 80vh;
    text-align: center;
}

.calender{
    table-layout: fixed ;
    width: 80%;
}

.calender>tr{
    height: 25px;
}


.calender>tr>th{
    width: 14.2%;
}
.calender>tr>td{
    width: 14.2%;
    text-align: center;
}
.calender a{
    position: relative;
    display: inline-block;

    width: 7vh;
    height: 7vh;

    line-height: 7vh;
    font-weight: bold;
}




.selected-day{
    width: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.selected-lesson-container{
    width: min(80vh, 100%);

}
.time-table{
    width: 90%;

    
}

.pre-line{
    width: 12%;
}
.line{
    width: 88%;
    height: 1px;
    margin: 0;
}

.lesson-item{
    border-radius: 2px;

}
.lesson-item>*{
    padding: 0px 5px;
}
.lesson-item > .fakebutton{
    font-size: 30px;
}
.participants{
    /* font-size: 3vw; */
    margin-bottom: 4vh;
}


.accountUserrow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.seance-admin-pannel{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    margin-top: 5vh;

}

.small-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 10vh;
    padding-top: 4vh;
    margin-bottom: 4vh;
}

.bottom-space{
    margin-bottom: 35vh;
}





.icon{
    width: 6vh;
    height: 6vh;
    padding: 0.5vh;
    border-radius: 0.5vh;
    margin: 0 0.5vh 0 2vh;
}



/*-------------------------------*/
/*      TOOLS PAGE
/*-------------------------------*/

app-tools{
    display: flex;
    flex-direction: row !important;
    justify-content: center  !important;
    align-items: flex-start  !important;
    flex-wrap: wrap  !important;


    padding-top: 1vh;
}
.tool{
    border-radius: 1vh;

    font-size: 2.3vh;

    padding: 3vh;
    margin: 3vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    text-align: center;


    width: 45vh;
    height: 75vh;

}
.tool img.image{
    width: 33vh;
    height: 33vh;
    margin: 2vh;
}

select{
    font-size: 2.5vh;
}
#account-selector{

    position: relative;
    
    top: 6vh;
    left: 76vw;
    width: 20vw;

    padding: 0.5vh 1vh;
    border-radius: 2px;

    font-size: 1.6vh;
}
#account-selector>select{
    font-size: 1.8vh !important;
}

/*-------------------------------*/
/*      SETTING PAGE
/*-------------------------------*/


.bow-btn{
    border-width: 0.2vh;
    padding: 2vh;
}

.table{
    max-width: 95vh;
}

.table>tr:first-child>td{
    padding: 2vh;
}
.table.border>tr>td{
    border-width: 0.2vh;
}
.table>tr>td{
    padding: 2vh;
}



/*-------------------------------*/
/*      STATISTICS PAGE
/*-------------------------------*/
#target-container{
    width: 100%;
    height: 100vw;

    display: flex;
    flex-direction: row;
    align-items: space-between;
   
}
#target{
    width: 80vw;
    height: 96vw;
    margin: 4vw 0%;
}
.scroller{
    width: 10vw;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        #8a8a8a,0vw,
        #8a8a8a 0.2vw,
        transparent 0.2vw,
        transparent 3.0vw
      );
}

#arrow-chart-container{
    margin: 0, 10vw;
    width: 80vw;
}

/* 
app-statistics{
    min-height:  95vh !important;
    height:  95vh !important;
} */

#hole-modify>*{
    font-size: 6vh !important;
    margin: 0.4vh !important;
}
#hole-valid>*{
    margin: 0.4vh !important;
}
#hole-valid{
    font-size: 6vh !important;

    min-width: min(20vh, 50px) !important;
}

app-stats-tutorial>img{
    max-height: 50vh !important;

}

#chart{
    position: relative;
    width: 900px !important;
    height: 500px !important;
}
#chart-container{
    width: 900px !important;
    height: 500px !important;
    margin: 0 10px;
}
#chart-container-container{
    position: relative;

    width: 120vh;
    height: 60vh;

}

footer{
    font-size: min(2vh, 15px) !important;
}

h2{
    margin: 1vh 0;
    font-size: 3vh;
}


.contest{
    width: 70vw;
    padding-left: 3vw;
    border-left-width: 2vw;
    border-radius: 1vh;
    box-shadow: 1vh 1vh 2vh 1px #4a4a4a;
    margin-bottom: 5vh;

    font-size: 3vh;
    min-height: 30vh;

}

.contest-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: calc(70vw - 30vh);
}

.map-container{
    width: 30vh;
    height: 30vh;
}