@import url('https://fonts.googleapis.com/css?family=Numans');
body{font-family: 'Numans', sans-serif;}
#loginBody{background-image: url('../imgs/flowers.jpg');background-size: cover;background-repeat: no-repeat;height: 100%;font-family: 'Numans', sans-serif;}
#loginContainer{height: 100%; align-content: center;}
.card{height: 430px; margin-top: 80px; margin-bottom: auto; width: 400px; background-color: rgba(0,0,0,0.5) !important;}
.input-group-prepend span{width: 50px;background-color: rgb(0, 51, 0);color: white;border:0 !important;}
input:focus{outline: 0 0 0 0  !important;box-shadow: 0 0 0 0 !important;}
.remember{color: white;}
.remember input{width: 20px;height: 20px;margin-left: 15px; margin-right: 5px;}
.login_btn{ color: white; background-color: rgb(0, 51, 0); width: 100px; }
.login_btn:hover{color: black; background-color: white;}
.card-header h3{ color: white; }
.links a{margin-left: 4px;}
#datepicker, #newsrn_no{ font-size: 16px; border-top: 0px; border-left: 0px; border-right: 0px; width: 170px; text-align: center; color: steelblue}
#loader {bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px;}
#loader .dot { bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 87.5px;}
#loader .dot::before { border-radius: 100%;  content: ""; height: 87.5px; left: 0;  position: absolute;  right: 0; top: 0;  transform: scale(0); width: 87.5px;}
#loader .dot:nth-child(7n+1) {transform: rotate(45deg);}
#loader .dot:nth-child(7n+1)::before {animation: 0.8s linear 0.1s normal none infinite running load;background: #00ff80 none repeat scroll 0 0;}
#loader .dot:nth-child(7n+2) {transform: rotate(90deg);}
#loader .dot:nth-child(7n+2)::before { animation: 0.8s linear 0.2s normal none infinite running load; background: #00ffea none repeat scroll 0 0;}
#loader .dot:nth-child(7n+3) { transform: rotate(135deg);}
#loader .dot:nth-child(7n+3)::before { animation: 0.8s linear 0.3s normal none infinite running load; background: #00aaff none repeat scroll 0 0;}
#loader .dot:nth-child(7n+4) { transform: rotate(180deg);}
#loader .dot:nth-child(7n+4)::before { animation: 0.8s linear 0.4s normal none infinite running load; background: #0040ff none repeat scroll 0 0;}
#loader .dot:nth-child(7n+5) { transform: rotate(225deg);}
#loader .dot:nth-child(7n+5)::before { animation: 0.8s linear 0.5s normal none infinite running load; background: #2a00ff none repeat scroll 0 0;}
#loader .dot:nth-child(7n+6) { transform: rotate(270deg);}
#loader .dot:nth-child(7n+6)::before { animation: 0.8s linear 0.6s normal none infinite running load; background: #9500ff none repeat scroll 0 0;}
#loader .dot:nth-child(7n+7) { transform: rotate(315deg);}
#loader .dot:nth-child(7n+7)::before { animation: 0.8s linear 0.7s normal none infinite running load; background: magenta none repeat scroll 0 0;}
#loader .dot:nth-child(7n+8) { transform: rotate(360deg);}
#loader .dot:nth-child(7n+8)::before {  animation: 0.8s linear 0.8s normal none infinite running load;  background: #ff0095 none repeat scroll 0 0;}
#loader .lading {background-position: 50% 50%; background-repeat: no-repeat; bottom: -40px; height: 20px; left: 0; position: absolute; right: 0; width: 180px;} 
@keyframes load {100% {opacity: 0; transform: scale(1);}}
@keyframes load {100% { opacity: 0; transform: scale(1);}}
.newsrn_rows{ border: 0px; font-size: 12px;}
.newsrn_rowsfew{border-top: 0px; border-left: 0px; border-right: 0px; font-size: 12px;}
.newsrn_rowseven{ border: 0px; font-size: 12px; background-color: rgb(240, 245, 245);}
th{font-size: 14px;}
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {background-color: rgb(240, 245, 245);}
select{text-align: center; max-width: 260px;}
#elementAddGroup{ background-color: steelblue; color: white; padding: 5px; border-radius: 8px;}
.overlay .loader{z-index: 1;}
.modalTemplate , .modalGroup { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modalTemplate-content , .modalGroup-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%;}
.tableOptionsForGroups{margin-left: 235px;}

 /* The side navigation menu */
 .srnCreateNewGroup {
    height: 100%;
    width: 0;
    position: fixed; 
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s;
}

.srnCreateNewGroup .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#newSRNpage{
    transition: margin-left .5s;
    padding: 20px;
}

@media screen and (max-height: 450px) {
    .srnCreateNewGroup {padding-top: 15px;}
    .srnCreateNewGroup a {font-size: 18px;}
} 

#newGroupsNav{
    width: 100%;
    overflow: auto;
    height: 90%;
}

.groupInput{
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}