:root {
   /* --darkblue: rgb(17, 20, 39); */
   --lightpink: rgb(240, 160, 160);
   --lighblue: rgb(109, 112, 130);

   /*color for all buttons & backgrnd tabs */
   --blue: rgb(113, 115, 128);     
   /* --blue: rgb(29, 42, 122); */

   /*color for all buttons on hover */
   --red: rgb(69, 54, 65);   
   /* --red: rgb(19, 227, 57);  */

   --blue2: rgb(67, 73, 111);
   --blue3: rgb(92, 119, 131); 
   --grey: rgb(102, 108, 126);
   --red2: rgb(92, 52, 52);
   --darkgrey:  rgb(38, 45, 65);
   --darkblue:  rgb(13, 23, 49);
   --lightgreen: rgb(102, 126, 110);
 }

html *
{
   font-size: 14px !important;
   font-family: 'Roboto', sans-serif;   
}

/*Arial !important;*/

/* 
red a82c3e
blue 033147
grey 858788 */

/* .btn{
   background-color: var(--blue);
   color: white;
   text-decoration: none;
} */



/*
rgb(29, 42, 122);  //blue
rgb(240, 160, 160);  //pink
rgb(155, 14, 14);    //red
*/


/* 
 //COLUMN
.lineRow{
   display: flex; 
   justify-content: right; 
   align-items: right;
   flex-direction:column;
}


//ROW
.lineRow{
   display: flex; 
   justify-content: right; 
   align-items: right;
   flex-direction:row;
}
*/


.companyLogo{
   max-width:40px;
   max-height:40px;
   margin-right:10px;
}

.fas {
   color:black;
}

.whiteICON{
   color:white !important;
}

.fontICON{
   margin-right: 10px;
   font-size: 15px !important;
   cursor: pointer;
}

.profile{
   margin-bottom: 10px;
   text-align: justify;
}


.print{
   cursor: pointer;
}

.btn{
   background-color: var(--blue);
   color: white;
   text-decoration: none;
}


.btn:hover{
   background-color: var(--red);
   color: white;
   text-decoration: none;
}

.btn:active {
   background-color:  var(--darkblue) !important;
   color: white;
   text-decoration: none;
 }

 .btn:focus {
   background-color:  var(--darkblue) !important;
   color: white;
   text-decoration: none;
 }



.actionButton{
   background-color: var(--blue);
}


.actionButton:hover{
   background-color: var(--red);
}

.fa-cogs, .fa-user-cog, .fasicon{
   color:white;
   margin-right:5px;
}

.profileImageL{
   max-width: 30px;
   max-height: 30px;
}

.profileImage{
   max-width: 150px;
   max-height: 300px;
   border: 5px solid var(--darkblue);
}

.uname a{
   color: white;
   text-decoration: none;
}

.activeDot {
   height: 15px;
   width: 15px;
   background-color: rgb(0, 197, 0);
   border-radius: 50%;
   display: inline-block;
 }

 .inactiveDot {
   height: 15px;
   width: 15px;
   background-color: rgb(172, 172, 172);
   border-radius: 50%;
   display: inline-block;
 }



 /* .sidetitle{
   margin-right: 20px;
   margin-left: 15px;
 } */


 @media only screen and (max-width: 755px) {
   .tagNav{
      margin-left: 45px;
      padding-top: 20px;
      margin-bottom: 10px;
    }
 }



 .tagNav a{
   text-decoration: none;
   background-color:var(--grey);
   border-radius: 5px;
   padding: 5px 5px;
   color: white !important;
 }

 .tagNav a:link{
   color: black;
 }

 .tagNav a:visited{
   color: black;
 }

 .sidetitle{
   margin-right: 5px;
   margin-left: 5px;
 }

 .tabMain a{
   text-decoration: none;
 }

 .titletab{
   color:white; 
   padding:10px 10px; 
   border-radius: 9px;
   margin-bottom:5px;
   text-decoration: none;
   cursor: pointer;
}

.titletab a{
   text-decoration: none;
   color:white; 
}

.titletab i{
   color:white; 
   font-size:large !important;
}

.tabClass{
   display: none;
   padding: 80px 80px;
   font-size:x-large !important;
}

.tabClassHR{
   display: none;
}

.tab1{
   background-color:var(--blue);
}

.tab2{
   background-color:var(--grey);
}

.tab3{
   background-color:var(--darkblue);
}

.tab4{
   background-color:var(--red2);
}

.tab5{
   background-color:var(--lightgreen);
}

.tab6{
   background-color:var(--blue3);
}