body {
    background-color:white;
    align-content: center;
    align-self: center;
    align-items:center;
    min-width: 1280px;
    width:96vw;
    min-height: 720px;
    height:96vh;
    overflow: scroll;
}

grid{
    display:grid;
    background-color: white;
    width:99%;
    height:99%;
    border-color: rgb(33, 80, 157);
    border-style: none;
    border-width: 3px;
    border-radius: 20px;
    margin:5px 5px 5px 5px;
    overflow: hidden;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; 
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

label{
    color: rgb(33, 80, 157);
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    font-weight: bold;
    font-size: 1em;
    margin:2px 2px 2px 2px; 
}

select{
    margin: 2px 2px 2px 2px;
    font-size: 1ev;
    background-color: white ;
    border:rgb(33, 80, 157);
    border-width: 2px;
    border-radius: 2px;
    border-style: solid;
    color: rgb(33, 80, 157);
    height:100%;
}

input{
    font-size: 1em;
    background-color: white ;
    border:rgb(33, 80, 157);
    border-width: 2px;
    border-radius: 2px;
    border-style: solid;
    color: rgb(33, 80, 157);
}

a:link {
    font-weight: bolder;
    color: white;
}

    /* visited link */
a:visited {
    font-weight: bolder;
    color:white;
}

#mainGrid{
    grid-template-columns: 30% 70%;
    grid-template-rows: 80% 20%;
    border-width: 0px;
    width:100%;
    height:100%;
}

#userGrid{
    grid-column-start:1;
    grid-column-end: span 1;
    grid-row-end:span 1;
    width: 95%;
    grid-template-rows: 4% 4% 4% 4% 4% 4% 60% 14%;
    border-style: solid;
}

#qrGrid{
    display:grid;
    grid-template-columns: 33% 33% 33%;  
    grid-template-rows: 10% 90%;
    grid-row-start:9;
    visibility: collapse;
}

#renameGrid{
    margin: 5px;
    grid-column-start:2;
    grid-column-end: span 1;
    grid-row-start:2;
    grid-row-end:span 1;
    grid-template-rows: 0% 80% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
    border-style: solid;
    height:95%;
}

#grdAsRanDateRange{
    margin:5px;
    grid-column-start:1;
    grid-column-end: span 1;
    grid-row-start:2;
    grid-template-columns: 25% 30% 45%;
    grid-template-rows: 33% 33% 33%;
    border-style:solid;
    height:95%;
    width:95%;
}

#fileGrid{
    display:grid;
    margin:5px;
    grid-column-start:1;
    grid-column-end: span 1;
    grid-row-start:2;
    grid-template-rows: 14% 14% 14% 14% 14% 14% 14%;
    grid-template-columns: 25% 25% 25% 25%;
    border-style:solid;
    height:95%;
    visibility: collapse;
}

#scheduleGrid{
    grid-column-start:2;
    grid-column-end: span 1;
    background-color: white;
    grid-template-rows: 40px 1fr;
    grid-template-columns: 50% 50%;
    border-style:solid;
    margin:4px 4px 4px 4px;
}

#grdDayLayout{
    grid-column-start:1;
    grid-row-start:2;
    grid-row-end:span 3;
    height: 95%;
    margin:5px 5px 5px 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-style:solid;
    scrollbar-arrow-color: white;
    scrollbar-color: rgb(33, 80, 157);
}

#grdSchedData{
    height: 95%;
    width:95%;
    grid-row:2;
    grid-column-start:2;;
    grid-template-rows:65% 35%;  
    border-radius: 0px;
}
#grdM3u8{
    grid-row-start:2; 
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 30% 30% 40%;
    height:100%;
    width:96%;
    border-radius: 0px;
        
}

#gridPLSplit{
    border-radius: 0px;
}

#grdRepeater{
    width:100%;
    grid-row-start:3;
    grid-template-rows: 33% 33% 33%;
    grid-template-columns: 60% 40%;
    overflow: visible;
}

#btnRefreshDay{
    grid-column-start:2;
    grid-row-start:6;
    height:100%;
    width:100%;
    margin:auto;
}

#btnTriggerUpload{
    font-size: clamp(6px, .6vw, 24px);
}
#btnRefreshFiles{
    font-size: clamp(6px, .6vw, 24px);
}
#btnDeleteFiles{
    font-size: clamp(6px, .6vw, 24px);
}
#btnDownloadFile{
    font-size: clamp(6px, .6vw, 24px);
}
#btnOpenPlayot{
    font-size: clamp(6px, .6vw, 24px);
}

#btnUnRenameFile{
    color: rgb(216, 31, 69);
}

#btnGetAsRan{
    height: 80%;
}

#lblFileModContainer{
    position: relative;
    top: -5px;
    left: 5px;
}

#lblFileMod{
    position: relative;
    top: -5px;
    font-size: 20px;
}

.timeGrid{
    display:grid;
    margin: 0px 0px 0px 20px;
    border-color: rgb(33, 80, 157);
    border-top-style: dotted;
    border-right-style: solid;
    border-left-style: solid;
    border-radius: 0px;
    width:95%;
    font-size:14px;
    grid-template-columns: 15% 85%;
    
}

.timeLabel{
    margin: 0px 0px 0px 0px;
    color: rgb(33, 80, 157);
    border-style: none;
}

.schedContent{
    grid-column:2;
    background: transparent;
    width:100%;
    height:100%;
}

.button {
    position: relative;
    align-self:stretch;
    height:95%; 
    width: 75%;
    background-color: white ;
    color: rgb(33, 80, 157);
    border:rgb(33, 80, 157);
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    text-align: center;
    align-content:center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    font-weight:bolder;
    cursor: pointer;
    font-size: clamp(6px, .7vw, 24px); /* min, preferred, max */
    padding: 0.5em 1em;
    box-shadow:10px 10px 10px 0px rgb(33, 80, 157, .5);
    overflow: hidden;
}

.button:hover{
    background-color: rgb(33, 80, 157);
    color:white;
}

.button:active{
    
    transition: all 10ms;
    transform: translateY(4px);
    box-shadow:3px 3px 3px 0px rgb(33, 80, 157, .85);
}

.button:after {
    content: "";
    background: white;
    color: rgb(33, 80, 157);
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.2s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}

::-webkit-scrollbar {
width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(33, 80, 157);
border-radius: 10px;
}