/*
rgb(125, 212, 239)

blue
#5fb4d2

orange
#dd7840
ffaa80

yellow
#ffb64b

green
#89AB65
BAEA83

red
#d44d4e
#ec797d;


*/
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    margin: 0;
    background-color: rgb(88, 88, 88);
    color:rgb(255,255,255);
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 12px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: #77dcff; text-decoration: none; }
a:hover { text-decoration: underline; }

h4 { margin: 0 0 .1em 0; font-weight: 700; }

.header { background-color: rgb(59, 59, 59); border-bottom: 1px solid rgb(255,255,255); display: flex; align-items: center; }
.header img { padding:.5em; }
.header h1 { text-transform: uppercase; margin: 0; font-size: 1.8em; font-weight: 300; flex-grow: 1; }
.header a { text-transform: uppercase; font-size: 1.8em; font-weight: 300; cursor: pointer; margin: 0 .5em; }

.footer { background-color: #333; }
.footer>div { max-width: 80%; margin: 2em auto; display: table; }
.footer p { margin: .6em 0; }

.main { flex-grow: 1; /* to push footer*/ }

.box { margin: 2em auto 1em auto; font-size: 1.2em; }
.padder { padding:.5em; display: flex; flex-direction: column; justify-self: center; }
.box h2 { margin: .5 0 0 0; }
.box p { margin: .7em 0 0 0; }


.infoContainer {
    display: flex;
    justify-content: center;
    border:1px solid white;
}

.infoContent {
    border:1px solid rgb(255, 0, 0);
}

.ulNoStyle { list-style-type: none; padding:0; }
.ulNoStyle>li { display: flex; word-break: break-all; padding: .2em; }
.ulNoStyle>li>span:first-child { display: inline-block; min-width: 10em; }

/* .ulFilesList>li:nth-child(odd) {
    background-color: #4c4c4c;
} */

.divNotAccessible {
    /* border:1px solid white; */
    border:2px solid #86d2ee;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* background-color:rgb(59,59,59); */
    background-color:#63b0d2;

}
.divNotAccessible>div {
    padding: 1em;
    margin: .5em;;
    /* font-weight: 400; */
    max-width: 70%;
    color:white;
}

.searchContainer {
    margin: 0 auto 1em auto; /*center*/
    max-width: 60em; /* 12 x 40 = 480*/
    padding: 0 .2em;
}
.searchContainer input {
    width: 100%;
    font-size: 1.2em;
    padding: 0 .5em;
    background-color: rgb(59,59,59);
    border: 1px solid #e4e4e4;
    line-height: 1;
    height: 2rem;
    color: #e4e4e4;
}
.searchContainer input:focus {
    outline: none;
    border-color: #77dcff;
}
.searchContainer input::placeholder {
    font-style: italic;
    /* color: rgb(88,88,88); */
    color: rgb(128, 128, 128);
}

.schemaContainer {
    margin: 0 auto 5em auto; /*center*/
    max-width: 60em; /* 12 x 40 = 480*/
    padding: 0 .2em;
}

.sessionContainer {    
    margin-top: .5em;
    /* border: 1px solid #5eaa61; */
}

.appearanceContainer {
    border-bottom: 1px solid #5f5f5f;
}

.appearanceContainer:first-child {
    background-color: #4dce1a;
}

.fileContainer {
    margin-left: 1em;
    background-color: #e4e4e4;
    color:#000;
    border-bottom:1px solid #c9c9c9;
    /* border-top:1px solid #c9c9c9; */
}
/* .appearanceContainer .fileContainer:first-child {
    border-top:1px solid #4dce1a;
    color:#d82626;
} */
.fileContainer a { color: #000; }

.title {
    font-weight: 700;
}

.sessionTitle {
    /* background-color: #5eaa61; */
    padding: .3em .5em .3em 0;
    color: #77dcff;
    border-bottom: 1px solid white;;
}

.appearanceTitle {
    padding: .3em .5em;
    background-color: rgb(59, 59, 59);
}

.fileTitle {
    padding: .3em .5em;
    display: inline-block;
    cursor: pointer;
}
.fileTitle:hover {
    text-decoration: underline;
}