* {
    font-family: Arial, Helvetica, sans-serif;
}

.admin-container {
    font-size: 13px;
    padding:15px;
    font-family: "Segoe UI";
}

.content-container {
    font-size:14px;
}
.content {
    padding:10px;
    max-width:800px;
    margin:auto;
}
.buttonshape, .dateselect-container, .selected  {
    text-align: center;
    min-width:70px;
    height:30px;
    padding:5px;
    margin-right:5px;
    margin-bottom:10px;
    border: 1px solid lightgray;
    background-color:#fffff0;
    float:left;
    vertical-align: middle;
    line-height: 18px;  
    cursor:default; 
    border-radius: 5px;   
}
.buttonshape:hover, .dateselect:hover, .dateremove:hover {
    background-color:#f0f0f0;
}

.dateselect-container {
    min-width:120px;
    position:relative;
    padding:0px;
    line-height:28px;
}

.select-container {
    text-align: center;
    height:30px;
    margin-right:5px;
    margin-bottom:10px;
    border: 1px solid lightgray;
    background-color:#fffff0;
    float:left;
    vertical-align: middle;
    cursor:default; 
    border-radius: 5px;   
    padding:0px;
    line-height:28px;
}

.select-caption {
    display:inline-block;
    padding-left:10px;
}
.select-remove {
    width:25px;
    display:inline-block;
    color:gray;    
}

.select-remove:hover {
    background-color:#f0f0f0; 
}

.dateselect {
    text-align: center;
    width:100%;
}
.optionselect {
    width:95px;
    float:left;
}
.dateremove {
    color:gray;
    float:right;
    width:25px;
}
.separator1 {
    width:20px;
    float:left;
    height:30px;
}

@media screen and (max-width: 650px) {  /* 400px or less */
    .separator1 {
        clear:both;
        width:0px;
    }
}
.select{
    background-color:lightblue;
}
.clear {
    clear:both;
}

.datetable {
    table-layout:fixed;
    border:1px solid lightgray;
    background-color:#fffff0;
    position:absolute;
    z-index: 1;
    top:30px;
    left:0px;
    display:none;
    width:194px;
}

.datetable td {
    text-align: center; 
    vertical-align: middle;
    cursor:default; 
    width:25px;
    height:25px; 
    line-height:18px;
}

.datetable .noclick {
    color:lightgray;
}
.datetable .click:hover{
    background-color:lightblue;
}

.datetable .available{
    background-color:lightgreen;
}

.datetable .sel{
    background-color:rgba(143, 167, 245, 0.836);
}



.options-container {
    position:absolute;
    top:30px;
    width:200px;
    text-align:left;
    background-color:#fffff0;
    padding:0px;
    border: 1px solid lightgray;
    display:none;
    z-index: 1;
}
.option-container{
    padding:5px;
}
.option-container:hover {
    background-color:#f0f0f0;
}


input[type=checkbox] {
    transform: scale(1.5);
    margin-right:10px;
}

.center{
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -85%);
    font-size:60px;
    font-weight: 900;
    width: 100%;
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: gray;
}

#img1{
    min-height:250px;
    max-width:100%;
    object-fit: cover;
}

.bluebutton {
    height:35px;
    color:white;
    background-color:rgb(0, 102, 255);
    border-radius: 5px; 
    font-size:18px;
    width:150px;
    margin-right:15px;  
    border: 2px solid gray;
  
}

.table-sortable th {
    cursor: pointer;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}
.table-sortable td {
    text-align: center;
}
.table-sortable .th-sort-asc::after {
  content: "\25b4";
}

.table-sortable .th-sort-desc::after {
  content: "\25be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
  margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
  background: rgba(0, 0, 0, 0.1);
}

.table1 th {
  position: sticky;
  top: 0; /* Don't forget this, required for the */
}

.datatable {
    max-height:250px;
    overflow:auto;
    margin:1px;
    border:1px solid lightgray;
    width:fit-content;
    max-width:100%;
    clear:both;
    margin-bottom:25px;
}
.datatable-caption {
    font-size:20px;
    float:left;
}
.datatable-add {
    float:left;
    margin-top:8px;
    margin-left:10px;
    height:15px;
    width:15px;
    padding:0px;
    line-height:10px;
}

.datatable table { 
    border-collapse:collapse;
    max-width:100%;
    font-size:14px;

}
.datatable td {
    padding:1px 3px; 
    white-space: nowrap;
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis;
    border-bottom: 1px solid lightblue;
}

.datatable tr{
    background: #dae5f4;
    background: white;
}

.datatable tr.select { 
    background:#FFD800;
    background:#e8f2ff;
}
.datatable td.hide { 
    display:none;
}
.datatable tr .hdr{
    background:#b8d1f3;
    background:#f4f4f4;
    padding:0px 3px;
}
.datatable tr:last-child td{
    border-bottom: 0px solid white;
}
.datatable .delete-row {
    text-align:center;
    cursor:default;
    font-size:6px;
}

#deletedialog {
    display:none;
    position: absolute;
    z-index: 9;
    background-color: #f8f8f8;
    border: 1px solid #d3d3d3;
    text-align: center;
    top: calc(50vh - 30px);
    left: calc(50vw - 60px);
  }
  
#deletedialogheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.deletedialogtext{
    padding:10px;
}
.ok-cancel-button{
    width:90px;
    margin:10px 0px;
}

.button-container {
    justify-content:space-evenly;
    display: flex;
}

.error {
    color:red;
    font-size:25px;
}

.section-text{
    font-size:18px;
    line-height: 30px;
    width: 180px;
    float:left;     
}

.sel {
    background-color: #b5d9f7;   
} 

.hidden {
    display:none;
}