/*FONTS*/
@font-face {
    font-family: 'e-Ukraine';
    src: url('./fonts/e-Ukraine-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'e-Ukraine';
    src: url('./fonts/e-Ukraine-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'e-Ukraine';
    src: url('./fonts/e-Ukraine-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'e-Ukraine-Head';
    src: url('./fonts/e-UkraineHead-LOGO.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
/*GENERAL*/
body{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 300;
    font-size:16px;
    line-height: 24px;
    background-color: #ffffff;
    margin:0px;
    
}
a{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:12px;
    line-height: 16px;
    text-decoration: none;
    color:#304999;
}
h1,h2,h3{
    margin:0;
}
h1{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:56px;
    line-height: 60px;
}
h2{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:38px;
    line-height: 40px;
}
h3{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:28px;
    line-height: 32px;
}
h4{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:24px;
    line-height: 28px;
}
h5{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:20px;
    line-height: 24px;
}
.d-none, .btn.d-none{
    display:none;
}
.small-text{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:13px;
    line-height: 18px;
}
.tiny-text{
    font-family: 'e-Ukraine', sans-serif;
    font-weight: 400;
    font-size:12px;
    line-height: 16px;
}
.bg-red{
    background-color: #ff8888!important;
}
.bg-yellow{
    background-color: yellow!important;
}
.bg-blue{
    background-color: #9999ff!important;
}
.btn{
    padding:10px;
    border-radius: 10px;
    font-weight:bold;
    border:2px solid;
    text-align: center;
    margin:5px 0px;
    display: inline-block;
}
.btn-primary{
    background-color: #304999;
    color:white;
}
.btn-success{
    background-color: #28a745;
    color:white;
}
.btn-warning{
    background-color: #ffc107;
    color:white;
}
.btn-danger{
    background-color: #dc3545;
    color:white;
}
table tr:nth-child(even) {
    background-color: #f2f2f2;
}
.table-container{
    overflow-x: auto;
}
table td{
    padding:3px 5px;
}
.flex-cell{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#tableContainer{
    width:1000px;
    height:600;
    overflow-y:scroll;
    overflow-x: scroll;
}
.data-table thead th { 
    position: sticky;
    top: 0; 
    z-index: 1; 
    background-color: aqua;
}
.data-table th, .data-table td { 
    font-size:10px;
}
.plan-summary{
    display:flex;
    flex-direction: row;
    gap:40px;
    margin-bottom: 50px;

}
.plan-summary div{
    display:flex;
    flex-direction: column;
}
.non-method-tab{
    margin-top: 40px;
}
.modal {
    /* modals are hidden by default */
    display: none;
    
    /* modal container fixed across whole screen */
    position: fixed;
    inset: 0;

    /* z-index must be higher than everything else on the page */
    z-index: 10000;
    
    /* semi-transparent black background exposed by padding */
    background-color: rgba(0, 0, 0, .75);
    padding: 40px;

    /* enables scrolling for tall modals */
    overflow: auto;
}

.modal.open {
    display: block;
}

.modal-body {
    margin:auto;
    padding: 20px;
    background: #fff;
    width:350px;
    display:flex;
    flex-direction: column;
    justify-items: center;
}

body.modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}
.form-input{
    padding:10px;
    border-radius:10px;
    font-size:12;
    min-width:200px;
    height: 40px;
    width:100%;
    margin-top: 15px;
}
.choices{
    width:100%;
    max-width: 600px;
    height: 40px;
}
.non-teaching-form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.non-method-tab{
    display:none;
}
.non-teaching-form small{
    display:block;
    width: 450px;
}
.table-non-method td{
    max-width: 300px;
    word-wrap: break-word;
    height:40px;
}
/*login page*/
.login-body{
    background-color:#343434;
}
.login-body h1,.login-body h2, .login-body p{
    color:white;
    text-align:center;
}
.login-body img{
    max-width:150px;
}
.login-block{
    padding-top:150px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    max-width:600px;
    margin: auto;
    gap:20px;
}
/*Section Styles*/
header{
    background-color:#343434;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:10px 40px;
    color:white;
    
}
.am-logo{
    display:flex;
    flex-direction: row;
    align-items: center;
}
.am-logo img{
    width:50px;
    margin-right:5px;
}
.am-logo h5{
    font-family: 'e-Ukraine-Head', sans-serif;
    font-weight: 700;
}
#headerMenu ul {
    display:flex;
    flex-direction:row;
    gap:10px;
    list-style: none;
}
#headerMenu a{
    background-color: #304999;
    color:white;
    padding:10px;
    border-radius: 10px;
    font-weight:bold;
}
#headerMenu a:hover{
    background-color: white;
    color:black;
}
.profile-panel {
    max-width: 250px;
}
.profile-panel a{
    text-decoration: underline;
    color:white;
}
main{
    padding:30px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
}
#historyBackButton{
    position:absolute;
    top:20px;
    left:20px;
    font-weight: bold;
}
#sectionTitle{
    padding-top:40px;
}
#mainContent{
    width:100%;
    min-height:400px;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content:center;
    gap:20px;
    margin-bottom: 50px;
}
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color:white;
  background-color:#343434;
  padding:20px;
}
footer a{
    color:white;
    text-decoration: underline;
}

/*DYNAMIC ELEMENTS*/
a.menu-tile{
    background-color: #304999;
    border:5px solid #304999;
    width:100px;
    height:100px;
    text-align:center;
    color:white;
    padding:10px;
    border-radius: 10px;
    font-weight:bold;
}
a.menu-tile:hover{
    color:black;
    background-color: white;
}
/*Plan Elements*/
#underTimeWarningContainer{
    display:none;
}
/*pool elements*/
.modal.pool-modal .modal-body{
    width:840px;
}
.timeslots-column{
    max-width: 120px;
}
.timeslots-grid{
    display:flex;
    flex-direction:row;
}
.pool-modal .form-input{
    min-width: unset;
    margin-bottom:15px;
    margin-top:0px;
}
.timeslots-column div{
    text-align:center;
    font-size: 16px;
    
}
.pool-timeslot-label{
    border-top:1px solid black;
}
.pool-timeslot-free{
    font-style: italic;
    text-align:center;
}