html, body { margin: 0px; padding: 0px; }

body { font-family: Roboto, arial, helvetica, sans-serif; font-size: 16px; text-align: center; }

* { box-sizing: border-box; }

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

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

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

.full-size {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.tablink {
    border: none;
    background-color: #FAFAD2;
    outline: none;
    border-right: solid 1px gainsboro;
    border-top: solid 5px gainsboro;
    border-bottom: solid 1px gainsboro;
    height: 50px;
    cursor: pointer;
}

.tablink:hover {
    border-top: solid 5px orange;
    color: orange;
}

.tablink.active {
    border-top: solid 5px orangered;
    color: orangered;
    border-bottom: solid 1px white;
    background-color: white;
}

.tabcontent {
    /* display: none; */
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
}

.tabcontent.active {
    display: block;
}

#Galleries-List table {
    width: calc(100% - 40px);
    border-collapse: collapse;
    /* border: solid 1px red; */
    margin: 20px;
}

#Galleries-List table th {
    padding-bottom: 10px;
}

#Galleries-List table tbody tr {
    cursor: pointer;
}

#Galleries-List table tbody tr:hover {
    background-color: #b3ecff;
}

#Galleries-List table tbody tr.active {
    background-color: orange;
}

#Galleries-List table td {
    /* text-align: left; */
    padding: 10px 15px;
    border: solid 1px gainsboro;
}

#Galleries-List table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.textLeft { text-align: left; }

.iconOpen { width: 55px; }
.iconOpen:hover { background-color: black; color: white; }
.iconOpen i { padding: 0; margin: 0; }

.DateHead, .TimeHead, .ImageHead { width: 150px; text-align: center; }

a { text-decoration: none; display: block; padding: 10px 10px 8px 10px; border-bottom: solid 1px gainsboro; background-color: white; color: #994d00; }
a:hover { background-color: #f7ddbb; }
ul { margin: 0; padding: 0; list-style-type: none; }
i { margin-right: 10px; }
#folders i { color: #ffa64d; }

table {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

tbody { display: block; position: absolute; height: 50%; bottom: 0; overflow: scroll; }

#Galleries-Container {
    display: grid;
    grid-template-rows: 40px auto;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.tableHeader { background-color: white; border-bottom: solid 5px orange; display: grid; grid-template-columns: 150px 150px 150px auto; align-items: center; font-weight: bold; }
/* .tableHeader > div { height: 50px; } */

.tableBody { overflow-y: scroll; border: solid 1px orange; }

.TableRow { display: grid; grid-template-columns: 150px 150px 150px auto 50px; align-items: center; grid-column-gap: 1px; grid-row-gap: 10px; background-color: white; border-bottom: solid 1px gainsboro; cursor: pointer; }

.TableRow>div { padding: 10px; background-color: transparent; border-right: solid 1px gainsboro; }

.TableRow:nth-child(even) {
  background-color: #f2f2f2;
}

.TableRow:hover, .TableRow:nth-child(even):hover { background-color: #b3ecff; }