/*project stylesheet*/
body, html{
    margin:0;
    background:white;
    font-family: Arial, Helvetica, sans-serif;
}
/*language buttons*/
.english{
    display:none;
}
/*Navigation bar*/
#navbar-intro{
    z-index:10000;
    background:white;
    border-bottom:2px solid black;  
    padding:0 !important;
}
.navbar-logo-intro h1{
    color:black;
    font-size:40px;
    font-variant: small-caps;
}
.navbar-logo-intro img{
    margin:auto;
    display:block;
    margin-bottom:10px;
}
.navbar-logo-intro{
    text-decoration: none !important;
    white-space:wrap;
    margin:auto;
    color:black;
}

.navbar-map{
    height:75px;
}
.navbar-logo-map{
    text-decoration: none !important;
}
.navbar-logo-map img{
    display:inline;
    vertical-align: middle;
    margin-right:15px;
}
.navbar-logo-map h1{
    color:black;
    margin:15px;
    font-variant: small-caps;
    font-size:36px;
}
.return{
    display:inline;
}
/*navbar top*/
.navbar-top{
    z-index:10000;
    background:white;
    border-bottom:2px solid black;  
    padding:0 !important;
    height:60px;
}
.navbar-top .container{
    margin-top:10px;
}
/*landing page*/
#language{
    margin-top:15px;
    margin-bottom:15px;
}
#language-buttons{
    width:fit-content;
    margin:auto;
    display:block;
}
#language button{
    background: white;
    border: black 2px solid;    
    padding:10px;
    font-size:16px;
}
#credits{
    font-style: italic;

}
.active{
    background:lightgray !important;
    font-weight: bold;
}
#language p {
    display:inline;
    padding-right:25px;
}
#to-map:hover{
    cursor: pointer;
}
#to-map{
    padding:10px;
    font-size:20px;
    font-weight:bold;
    background: white;
    border: black 3px solid;    
    display:block;
    margin:auto;
}
#to-map p{
    margin-bottom:5px;
    margin-top:5px;
}
#intro-container{
    font-size:20px;
    padding-left:10px;
    padding-right: 10px;
}
footer{
    margin-top:50px;
    border-top:2px solid black;
    position:relative;
    width:100vw;
    bottom:0;
}
footer img{
    width:200px;
    padding-top:20px;
    display:block;
    margin:auto;
}
/*database sidebar*/
#sidebar{
    height:calc(100vh - 90px);
    background:white;
    display:block;
    color:black;
    overflow-y:scroll;
}
h1{
    text-align: center;
    font-weight:bold;
}
#outline{
    height:100px;
    margin:auto;
    display:block
}
#reset{
    display:block;
    margin:auto;
    margin-bottom:10px;
}
/*database table*/
tr{
    border:2px solid black;
}
th{
    border:1px solid gray;
    max-width: 200px;
    font-weight:normal;
    padding-bottom:15px;
}
.dropdown{
    background:none;
    border:none;
    width:100%; 
    font-weight:bold;
}
label{
    display:inline-block;
}
.play-audio{
    color:blue;
    text-decoration: underline;
    padding-bottom:10px;
    display:block;
}
.play-audio:hover{
    cursor:pointer !important;
}
/*audio view*/
.audio-table{
    position:absolute;
    top:15px;
    width:25%;
    height:50vh;
    background:white;
    display:none;
    z-index:100000;
    padding:25px;
    overflow:scroll;
    border:2px solid black;
    right:15px;
}
#close-audio{
  background: rgba(0,0,0,0);
  color: black;
  font-size: 24px;
  border: lightgray 2px solid;
  font-family: Arial, Helvetica, sans-serif;
  width: 40px;
  border: none;
  float:right;
}
#close-audio img{
    rotate: 270deg;
}
.audio-transcript{
    font-weight:light !important;
    margin-bottom:0;
}
/*map view*/
#map{
    height:calc(100vh - 75px);
    width:100%;
    background:#eaf0fa;
    border-left:black 2px solid;
    display:inline-block;
    border:none;
}
#map-container{
    padding:0;
}
#close{
    color:#b3b3b3;
}
/*zoom buttons*/
.leaflet-control-zoom-in, .leaflet-control-zoom-out{
    background:black !important;
    color:white !important;
    padding-bottom:5px !important;
    box-shadow:none !important;  
}
.leaflet-control-zoom-in{
    border-bottom: 1px solid #fff !important;
}
/*leaflet attribution*/
.leaflet-control-attribution{
    background:black !important;
    color:white !important;
    font-family: Arial, Helvetica, sans-serif;
}
.leaflet-control-attribution a{
    color:white !important;
    text-decoration: underline !important;
}
/*map info panel*/
.info button{
    background:rgba(0,0,0,0);
    color:black;
    font-size:24px;
    border:lightgray 2px solid;
    font-family: Arial, Helvetica, sans-serif;
    width:40px;
    border:none;
}
.info button>img, #info-button{
    width:100%;
}
/*intro popup*/
.intro .leaflet-popup-content-wrapper{
   border:2px black solid;
   font-size:18px;
   font-family: Arial, Helvetica, sans-serif;
   width:280px;
}
.leaflet-popup-content {
    width:240px !important;
}
.leaflet-popup-tip{
    background:black;
}
#upper-right{
    rotate:120deg;
}
#down{
    rotate:270deg;
}
#right{
    rotate:180deg;
}
@media screen and (min-width: 768px) {
    #intro-container{
        margin-left:20%;
        width:60%;
    }
    #in, #table-button, #settings{
        display:none;
    }
    #map-container{
        width:50%;
    }
    #sidebar-container{
        width:50%;
    }
    #row{
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 60px);
    }
    #participants-table{
        width:100%;
    }
    footer{
        padding-left:20px;
    }
    footer p {
        padding-top:25px;
        width:50%;
        margin:auto;
    }
}
@media screen and (max-width: 768px) {
    .navbar-top{
        display:none;
    }
    #reset-large-screen{
        display:none;
    }
    #language p {
        padding-right:5px;
    }
    #map-container{
        height:100vh;
    }
    #map{
        height:100vh;
        width:100vw;
        position:absolute;
        margin-top:0;
    }
    .container-fluid, .row{
        height: 100vh;
    }
    #sidebar-container{
        display:none;
        position:absolute;
        bottom:0;
        padding:0 !important;
        height:calc(40vh + 60px);
        width:100vw !important;
        overflow-x:hidden;
        z-index:10000;
    }
    #sidebar{
        height:100%;
        width:calc(100% - 10px);
        padding:5px;
    }
    #participants-table{
        height:100%;
        display:block;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    #outline{
        height:50px;
        margin:auto;
        display:block
    }
    th{
        max-width:75px;
    }
    .city{
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .audio-table{
        position:absolute;
        top:0;
        left:0;
        right:0;
        padding:0;
        border:none;
        width:100%;
        height:100vh;
        background:white;
        display:none;
        z-index:100000;
        overflow:scroll;
        border-bottom:2px solid black;
    }
    .audio-table > *{
        padding-left:10px;
    }
    .audio-table > audio {
        width: calc(100% - 20px)
    }
    footer p {
        padding:10px 10px 0 10px;
        margin:auto;
    }
}