:root {
--bodybg:#f5f5f5;
--primarybg:#2F4F4F;
--primarylightbg:#dfecec;
--primarycolor:white;
--activelinkbg:#4CAF50;
--primaryhovercolor: grey;
--msgbellcolor:red;
--inputlabelfontsize:14px;
--inputlabelfontweight:500;
--menubellfontsize:20px;
--pageTitlefontsize:20px;
--footerfontsize:10px;
--breadcrumbfontsize:12px;
--closebtnfontsize:36px;
--msgbellfontsize:8px;
--btnbg:#04AA6D;
--btntext:white;
--tableheadingcolor:white;
--tablebordercolor:#ccc;
}
html,body {
margin:0;
#font-family: Arial, Helvetica, sans-serif;
}
* {box-sizing:border-box}
.linecentertext h6 {
display: flex;
flex-direction: row;
color:grey;
padding-bottom:10px;
}
.linecentertext h6:before,
.linecentertext h6:after {
content: "";
flex: 1 1;
border-bottom: 1px solid grey;
margin: auto;
}	
button {
background-color:var(--btnbg);
color:var(--btntext);
border-radius:5px;
margin-bottom:10px;
}
button:hover {opacity:0.8;}
.btn-s {
font-size:12px;
padding:5px 10px;
border:none;
border-radius:5px;
cursor:pointer;
}
.btn-l {
#padding:10px 15px;
border:none;
border-radius:10px;
cursor:pointer;
}
input[type=text], input[type=password] {
margin:2px;
padding:2px;
border:2px solid var(--primarylightbg);
border-radius:5px;
outline:none;
}
input:focus {border:2px solid var(--primarybg);}
.border-label {
position:relative;
height:45px;
width:90%;
margin-bottom:17px;
}
.border-label input {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
padding:0 20px;
border:2px solid var(--primarylightbg);
background:none;
z-index:0;
}
.border-label select{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
padding:0 20px;
background:none;
z-index:0;
}
.border-label label {
position:absolute;
left:8px;
top:-10px;
padding:0 4px;
font-size:var(--inputlabelfontsize);
font-weight:var(--inputlabelfontweight);
background:var(--primarylightbg);
border-radius:5px;
transition:0.5s;
z-index:1;
}
.border-label .invalid-feedback {
position:absolute;
top:40px;
left:2px;
}
.float-label {
position:relative;
height:45px;
width:90%;
margin-bottom:17px;
}
.float-label input {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
padding:0 20px;
background:none;
z-index:1;
}
.float-label label {
position: absolute;
top:15px;
left:15px;
padding:0 4px;
color:var(--bodybg);
background:none;
font-size:var(--inputlabelfontsize);
transition:0.5s;
z-index:0;
}
.float-label input:focus + label {
top:-2px;
left:8px;
z-index:10;
font-size:var(--inputlabelfontsize);
font-weight:var(--inputlabelfontweight);
color:var(--primarybg);
background-color:var(--primarylightbg);
}
.float-label input:not(:placeholder-shown)+ label {
top:-2px;
left:8px;
z-index:10;
font-size:var(--inputlabelfontsize);
font-weight:var(--inputlabelfontweight);
}
/* App header */
.apphdr {
position:fixed;
top:0;
margin-left:0px;
width:100%;
padding:0px;
background-color:var(--primarybg);
z-index:10;
}
.apphdr .hdricon {
display:none;
float:left;
color:var(--primarycolor);
cursor:pointer;
margin:4px;
padding:3px;
}
.apphdr .hdricon:hover {color:var(--primaryhovercolor);}
.apphdr .mopen{
display:none;
color:var(--primarycolor);
padding-right:2px;
}
.apphdr .mclose {display:none;}
.apphdr .hdrlogo {
width:30px;
height:30px;
margin:4px;
padding:3px 0px 3px 3px;
}
.apphdr .hdrlogotxt {
width:100px;
height:30px;
margin:4px 0px;
padding:3px 0px;;
}
.apphdr .rtmenu {
float:right;
margin:4px;
padding:3px;
}
.uname {
border-radius:2px;
color:black;
background-color:white;
font-size:12px;
padding:2px;
}
.apphdr .rtmenu a {
padding:10px;
color:var(--primarycolor);
text-decoration:none;
}
.apphdr .rtmenu a:hover {color:var(--primaryhovercolor);}
.apphdr .rtmenu a.active {
background-color:var(--activelinkbg);
color:var(--primarycolor);
}
.apphdr .rtmenu .ntext {
position:absolute;
top:46%;
left:50%;
transform:translate(-50%, -45%);
font-size:var(--msgbellfontsize);
color:var(--primarycolor);
}
/* Side navigation */
.sidenav {
position:fixed;
height:90%;
width:200px;
z-index:20;
top:38px;
left:0px;
bottom:0px;
background-color:var(--primarybg);
overflow-x:hidden;
overflow-y:auto;
transition:0.5s;
padding-top:10px;
padding-bottom:0px;
border-top:1px solid white;
}
.sidenav a {
padding:8px 8px 8px;
text-decoration:none;
color:var(--primarycolor);
display: block;
}
.sidenav .ftr {
margin: auto;
font-size:var(--footerfontsize);
color:white;
padding-left:10px;
padding-right:10px;
}
.ftr hr{
background-color:white;
}
.sidenav a:hover {color:var(--primaryhovercolor);}
.sidenav a.active {
background-color:var(--activelinkbg);
color:var(--primarycolor);
}
.sidenav .closebtn {
display:none;
position:absolute;
top:0;
right:25px;
font-size:var(--closebtnfontsize);
margin-left:50px;
}
.sidenav .spad {
padding-left:3px;
padding-right:3px;
}
.sidenav .rtmenu1 {display:none;}
/* Page content */
.section1hdr {
position:fixed;
top:38px;
margin-left:200px;
padding:1px 3px;
width: 100%;
background-color:white;
z-index:10;
}
.section1hdr .bcrum {
font-size:var(--breadcrumbfontsize);
padding-top:5px;
}
.section1hdr .bcrum a:link {text-decoration: none;}
.section1body {
margin-left:200px;
margin-top:70px;
padding:10px;
}
.section1body .pageTitle {
padding:10px 0px;
font-size:var(--pageTitlefontsize);
font-weight:700;
display: flex;
flex-direction:row;
}
.section1body .pageTitle div:first-child {
flex: 50%;
}
.section1body .pageTitle div:last-child {
flex: 50%;
text-align:right;
}
.section1body .container{
border:1px solid var(--primarybg);
border-radius:5px;
padding-top:20px;
text-align:center;
}
.section1body .form-check{
padding-top:5px;
}
/* */
@media screen and (max-width: 992px) {
.sidenav {
transition:0.5s;
top:38px;
width:0;
margin-left:0;
}
.apphdr .hdricon {display:block;}
.section1hdr {margin-left:0;}
.section1body {margin-left:0;}
.apphdr .mopen {display:block;}
.apphdr .rtmenu {display:none;}
.sidenav .rtmenu1 {display:block;}
}