:root{
    --ecrf_blue:#0083a4;
    --ecrf_skyblue:#04b9e7;
    --ecrf_darkblue:#006d88;
    --ecrf_grey:#959ea1;
    --ecrf_green:#41b6b2;
    --ecrf_red:#e55454;
    --ecrf_yellow:#e4bc2c;
}

*{
    font-family: 'Raleway', sans-serif;
    margin:0;
    padding:0;
}
.bg{
    background-image: linear-gradient(#ffffff, #dbe9ec);
    height: 100vh;
    position:fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    z-index:-5;
}
.bgw{
    background-color: rgb(255, 255, 255);
    height: 100vh;
    position:fixed; 
    top: 0; 
    left: 12vw; 
    right: 12vw; 
    bottom: 0; 
    margin: 0; 
    z-index:-4;
}
body{
    overflow: hidden;
}
h1{
    text-decoration:none;
    color:#0083a4;
    font-weight:600;
    font-size:x-large;
}
header{
    margin:2% 14% 1% 14%;
    padding:15px 15px;
    width:auto;
    background-color: rgba(4, 185, 231,0.2);
    display:flex;
    border-radius: 10px;
}
header a{
    margin:auto;
    margin-right: 0;
    text-decoration: none;
    color:#0083a4
}
#lhead,#rhead{
    display:flex;
    justify-content:space-between;
    margin:0px;
}
#rhead{
    padding:10px;
    background-color: #04b9e7;
    border-radius: 10px;
}
#rhead1{
    display:flex;
    flex-direction: column;
    text-align: right;
}
#rhead1 p{
    color:white;
    margin: 0 15px 0 5px;
}
main{
    min-height: 50%;
    overflow: scroll;
}
#alert{
    width:50%;
}
.tableFilter{
    text-decoration: none;
    cursor: pointer;
    font-size: medium;
    color:var(--ecrf_grey)
}
.tableFilter:hover{
    color: var(--ecrf_skyblue);
}
.container{
    margin-top:0;
    padding:15px 15px;
    display:flex;
    flex-direction: column;
}
.container *{
    margin:3px auto;
}
.container1{
    margin:0;
    margin-top:0;
    padding:15px 15px;
    background-color: white;
    display:flex;
    flex-direction: column;
}
.container1 *{
    margin:3px auto;
}
.alert *{
    width: 60%;
    text-align: center;
}
#reg *{
    padding:3px;
    margin:5px auto;
    width:50%;
    height: 2.5em;
    border-radius: 5px;
    border:rgb(151, 151, 151) 1px solid; 
}
#reg p{
    border:none;
    margin:3px auto;
    padding:0px;
    height: auto;
}
.btn{
    background-color: rgba(0,0,0,0);
    cursor:pointer;
    font-size: large;
    font-weight: 900;
    color:#0083a4;
    text-decoration: underline;
    padding:3px;
    margin:5px 20px;
    width:100% auto;
    min-height: 1em;
    border-radius: 5px;
    border:rgba(0,0,0,0)
}
#reg{
    display:flex;
    flex-direction:column;
    width:40%;
    margin:auto;
}
.containerdb{
    margin:13%;
    margin-top:0;
    padding:15px 15px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.lcon,.rcon,.ccon{
    width:100%;
    padding: 10px;
    background-color: rgba(4, 185, 231,0.15);
    border-radius: 10px;    
}
.lcon{
    width:40%;
    height: 75vh;
}
.addnew{
    text-decoration:none;
    margin:auto 10px;
    font-weight:600;
    background-color:#0083a4;
    color:white;
    padding:3px;
    border:rgba(4, 185, 231,0.15) solid;
    border-radius: 5px;
}
.rightcontainer{
    width:56%;
    height:auto;
}
.rcon{
    width:auto;
    padding-right: 20px;
    height: 37.5vh;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
}
.rcond{
    padding:25px;
    height: 30vh;
    display: flex;
    flex-direction: row;
}
.rcon *{
    margin:3px;
}
.ccon h1, .ccon p{
    margin-left: 0px;
}
.row{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    color:#0083a4;
    margin:10px auto;
    gap: 10px;
}
.row select{
    padding: 2px;
}
.card{
    margin:15px;
    padding:10px 10px;
    background-color: white;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
}
.row .card{
    width: 15%;
}
.card input{
    width:90%;
}
.row h3{
    width:18%;
    text-align: center;
}
#listL{
    margin-top:15px;
    height: 59vh;
    overflow-y: scroll;
}
#listR{
    margin-top:15px;
    height:25vh;
    overflow-y: scroll;
    width: 95%;
}
.newalert{
    background-color: #0083a4;
    color:white;
    border-radius: 7px;
    padding: 3px 5px 2px 5px;
    margin:auto;
    font-size: small;
}
.showalert{
    background-color: white;
    padding:5px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin:3px 10px;
}
.showalert *{
    margin: 1px 8px;
    font-weight: 600;
    color:#959ea1;
    height: 1.5em;
}
.showkit{
    background-color: white;
    margin:5px 15px;
    padding: 15px;
    border-radius: 10px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.kitfilter,.alertfilter{
    background-color: rgba(0,0,0,0);
    border: rgba(0,0,0,0);
    color:#0083a4;
    font-weight: 600;
    text-decoration: underline;
}
.showkitl p, .showkitr p{
    color:#0083a4;
    font-size: small;
    font-weight: 600;
}
.showkitr p{
    margin: auto;
    padding:5px;
    color:white;
    border-radius: 5px;
}
canvas{
    width: 70%;
    margin: auto;
}
td{
    color:#0083a4;
    font-weight: 600;
}
.SSensors{
    display: none;
}

.editor {
    margin:0px;
    width:9%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 2px;
    padding: 10px 0px;
    text-align: center;
}
.shoesize{
    margin:0px;
    width:5%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 2px;
    padding: 10px 0px;
    text-align: center;

}
textarea {
    overflow-y: auto;
    padding: 5px;
    border: 0;
    resize: none;
    height: 10vh;
    font-size: small;
    width:100%;
}

.vl{
    margin:2px 0;
    height: 14vh;
    background-color: #0083a4;
    width: 0px;
    border: #0083a4 solid 0.5px;
}
.vll{
    margin:2px 0;
    height: 58vh;
    background-color: #0083a4;
    width: 0px;
    border: #0083a4 solid 0.5px;
}
.j{
    display: none;
}
h4{
    margin-left: 40px;
    font-size: small;
}
table.showDevice {
    border: 1px solid #000000;
    width: 100%;
    text-align: center;
}
table.showDevice td, table.showDevice th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}
table.showDevice tbody td {
    font-size: 16px;
}
table.showDevice thead {
    background: #BBCBDD;
}
table.showDevice thead th {
    font-weight: normal;
}
table.showDevice tfoot {
    font-weight: bold;
}
#newAlert{
    display: flex;
    flex-direction: column;
}

#newAlert *{
    padding:2px
}

#dataDownloader{
    display: flex;
    flex-direction: column;
    width: 20%;
    margin:auto
}
#dataDownloader *{
    margin:5px;
    padding: 3px;
}
#buttons{
    display:flex;
    flex-direction: column;
    margin:auto;
    align-items: center;
}
#buttons a{
    padding: 2px;
}
#uploadCSV{
    display:flex;
    flex-direction:column; 
    width:20%;
    margin-left:15px
}
#uploadCSV *{
    width: auto;
    margin:2px;
    align-self:flex-start;
}

.btn:hover{
    color:var(--ecrf_darkblue);
}
.addnew:hover{
    background-color:var(--ecrf_darkblue);
    color:white
}