*{
    margin:0px;
    padding:0px;
}

body {
    background-color: white;
    color: black;
    font-family: 'titilliumregular','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:14px;  
    height:100vh;
    display:flex;
    flex-direction:column;
}

header{
    background-color:black;
    color:white;
    text-transform:uppercase;
    padding:10px;
    display:flex;
    justify-content:space-around;    
}
main{
    flex:2;
}
footer {
    background-color: #4877A0;
    color: white;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    /*position: absolute;
    bottom: 0; */
    width: 100%;
    padding-top:10px;
    text-align:center;
    justify-content:center;
}

h1, h2 {
    color: #00659B;    
    text-transform:uppercase;
}

h1{
    font-size:40px;
    font-weight:bold;
    text-align:center;
    width:50%;
    margin-left:auto;
    margin-right:auto;
}

h2{
    font-size:32px;
}

a {
    text-decoration: none;
    color: #00659B;
}

a:hover{	
    text-decoration:underline;
}

button a {
    color:white;
}

button a:hover{
    text-decoration:none;
}

button, input[type="button"], input[type="submit"] {
    background-color: #00659B;
    border: 2px solid #00659B;
    color:white;
    border-radius:1000px;
    padding:10px;
    height:fit-content;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover{
    border-radius:10px;
    background-color: #4877A0;
}

.listitem {
    color: #00659B; 
cursor: pointer;	
}

.listitem.selected {
    background-color: #5D8AB1;
    color:white;
    font-weight:bold;
}

.listitem p{
    margin:0px;
}


footer ul{
    list-style-type:none;    
}

footer ul li{
    display:inline;
    flex:auto;
    margin:20px;
}

footer li a{
    color:white;
}

main{
    padding:20px;
    display:flex;
    flex-direction:row;
}

.side{
    min-width:20%;
    border : 1px solid white;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:stretch;
    align-content:start;
}   
.content{
    width:100%;
    box-sizing:border-box;
    padding:10px;
}

.item{
    display:flex;
    flex-direction:row;
    align-items:center;
}

.item select, .item input[type="text"]{
    flex:2;
    margin:4px;
}


.centerContent {
    display:flex;
    justify-content:center;
}

.fillContent{
    display:flex;
    justify-content:space-around;
}

.list {
    overflow-y: auto;
    border: 1px solid gray;
    margin: 10px;    
    box-sizing: border-box;
    flex:auto;
	cursor: pointer;
}

.content{    
    display:flex;
    flex-direction:column;
}

.hide{
    display:none;
}

.vertical-layout{
    display:flex;
    flex-direction:column;
}

.horizontal-layout{
    display:flex;
    flex-direction:row;
}


.margin-small {
    margin:5px;
}

.full {
    width:100%;
}

@media screen and (min-width:720px)
{
    label.right {
        text-align: right;
        vertical-align:middle;
    }
}

@media screen and (max-width:719px)
{
    label.right{
        text-align:center;
        vertical-align:baseline;
    }
}

.year{
    text-align:center;
}

.borders{
    border: 1px solid black;
}

textarea{
    min-height:100px;
}

.link{
    text-decoration:underline;
    cursor : pointer;
    color : blue;
}
label input{
    margin:10px;
}

.url{
    font-size:smaller;
    font-style:italic;
}

input[type="range"]{
    width:80%;
    text-align:center;
}

#ImgSoft{  
    margin-left:auto;
    margin-right:auto;
    max-height:30%;
}

.emphase{
    font-weight:bold;
}
#thumb {
    width:50px;
}