/*Geberal */
.table_div { width:98%; background: azure; border: #23a6d5 solid 3px; border-radius:25px; padding: 25px; margin-left:auto; margin-right:auto; margin-bottom:20px; height:40%; overflow: auto;}
.table_div::-webkit-scrollbar { width: 0.4em; }
.table_div::-webkit-scrollbar:hover { width: 0.6em; }
.table_div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
.table_div::-webkit-scrollbar-thumb { background-color: blue; outline: 1px solid red; border-radius: 10px;}

/* Table type 1 */
#edilife_tbl { width:98%; height:70vh; overflow: auto; border-radius: 5px; }
#edilife_tbl thead { align-items: center; vertical-align: middle; }
#edilife_tbl th, #edilife_tbl td { border: black solid 2px; padding:8px; margin:auto;}
#edilife_tbl th { font-size:16px;}
#edilife_tbl td { font-size:14px;}
#edilife_tbl thead tr { background-color:orange; border-radius: 15px;}
#edilife_tbl tbody tr:nth-child(odd) {background-color: lightblue;}
#edilife_tbl tbody tr:nth-child(even) {background-color: lightgrey;}
#edilife_tbl tbody tr:nth-child():hover {background-color: rgba(220, 246, 204, 0.333); color:white; transition:transform 1s ease-in-out;}

/* Table type 2 */
.gradient_div { width:98%; border:lime 2px solid; border-radius:4%; overflow-y:auto; overflow-x:none; height:fit-content; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,yellow,black);
background-size: 400% 400%; color: violet; animation: gradient 10s ease infinite; }
@keyframes gradient { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
#gradient_tbl { border-collapse: separate; border-spacing: 0 1em;}
#gradient_tbl tbody tr { margin:844px;}
#gradient_tbl tr td { padding:5px 8px; background-size: 100% 200%; background-image: linear-gradient(to bottom, whitesmoke 50%, navy 50%);
    -webkit-transition: background-position 1s; -moz-transition: background-position 1s; -o-transition: background-position 1s; transition: background-position 1s; }
#gradient_tbl tr td:hover { background-position: 0 -100%; color:white;}
#gradient_tbl tr td a:hover {text-decoration:none; color:white;}
.direct_link { position: sticky; position: -webkit-sticky; top: 10px; font-size:18px; background-color:pink; border-radius:8px;font-weight:300; animation:anime 3s infinite;}

@keyframes anime { 0% {color: red;} 25% {color: yellow;} 50% {color: blue;} 100% {color: green;} }

/* Table type 3 */
#plaintbl { border-collapse: separate; border-spacing: 0 1em; height:72vh;}
#plaintbl thead tr { border: 2px solid blueviolet; border-radius: 20px; color: black;}
#plaintbl tbody tr {padding:5px 8px ; background-size: 100% 200%; background-image: linear-gradient(to bottom, whitesmoke 50%, navy 50%);
    -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; }
#plaintbl tr:hover { background-position: 0 -100%; }
#plaintbl tr:hover {text-decoration:none; color:white;}

/* Table fln 4 */
#myflntable{width:99%; margin:auto; font-size:90%;}
#myflntable th, #myflntable td { border: #002fff solid thin; padding:8px; margin:auto;}
#myflntable thead tr { background-color:orange; border-radius: 15px;}
#myflntable tr { background-color:rgb(127, 245, 225); }
#myflntable tbody tr:nth-child(odd){background-color: lightblue;}
#myflntable tbody tr:nth-child(odd):hover{font-weight:400; color:maroon; }
#myflntable tbody tr:nth-child(even){background-color: lightgrey;}
#myflntable tbody tr:nth-child(even):hover{font-weight:400; color:maroon; }

/* Table by class */
.mytable{width:99%; overflow:none; margin:auto;}
.mytable th { font-size:14px;}
.mytable th, .mytable td { border: #002fff solid thin; padding:4px; margin:auto;}
.mytable thead tr{ background-color:orange; }
.mytable tr{ background-color:rgb(127, 245, 225); }
.mytable tbody tr:nth-child(odd){background-color: lightblue;}
.mytable tbody tr:nth-child(odd):hover{background-color: pink; color:seagreen;}
.mytable tbody tr:nth-child(even){background-color: lightgrey;}
.mytable tbody tr:nth-child(even):hover{background-color: pink; color:seagreen;}

#verifytbl thead { background-color:rgb(135, 222, 42); }