/*
div[class^='row']{
  background:rgb(226, 128, 128);
  border: 1px solid grey !important;
}

div[class^='col']{
 background:yellow; 
  border: 1px solid black !important;
}

table, th, tr, td{
  border:solid 1px;
}
*/

html {font-size: 13px !important;}
@media (max-width: 1400px) {
  html {
    font-size: 14px !important;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 13px !important;
  }
}
@media (max-width: 450px) {
  html {
    font-size: 12px !important;
  }
}

th.sort {
  cursor: pointer;
}

td.gridsingleicon{
  padding-left:0;
  padding-right:0;
  width: 30px;
  max-width:30px;
  text-align:center;
}

td.datetimecol{
  padding-left:7px;
  padding-right:0;
  width: 110px;
  max-width:110px;
}

/* html {font-size: calc(1vw + 1vh + .5vmin); }  */

.rowaltcolor{background-color: lightgrey;}

.modalheaderbg{background-color:#d3bc8d;}

.modal{top:10px;}

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
  padding:0px;
}

.announcement{
  color:white;
  position: absolute;
  z-index: 101;
  top: 0px;
  left: 0;
  right: 0;
  background: #373838;
  line-height: 2.5;
  overflow: hidden; 
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow:    0 0 5px black;
  box-shadow:         0 0 5px black;
  animation:announcement 1s;
}

.announcement table{
  margin:auto;
}

.annicon{
  position:absolute;
  left:10px;
  top:20px;
}

.anniexit{
  position:absolute;
  right:10px;
  top:20px;
  cursor:pointer;
}

.announcement table td{
  padding:10px 5px 10px 5px;
  vertical-align:middle;
  line-height:1;
}

@keyframes announcement{
  from {
    top: -1000px;
  }

  to {
    top:0px;
  }
}

.col100px{
  min-width: 100px;
  max-width: 100px;
}

.col120px{
  min-width: 120px;
  max-width: 120px;
}

.col160px{
  min-width: 160px;
  max-width: 160px;
}

.col180px{
  min-width: 180px;
  max-width: 180px;
}

.col200px{
  min-width: 200px;
  max-width: 200px;
}

.col1200px{
  min-width: 1200px;
  max-width: 1200px;
}

.colgridoptions{
  min-width:40px;
  max-width:40px;
  height:24px;
}

.optionsdd{
  font-size: max(calc(35px - 1vw),18px);
}

.vertical-alignment-helper {
  display:table;
  height: 100%;
  width: 100%;
  pointer-events:none;
}
.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events:none;
}
.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width:inherit;
max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height:inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events:all;
}


@media screen and (max-width: 600px) {
  #searchtitle{
    display:none;
  }
}
.datepicker{ z-index:99999 !important; }
.datetimepicker{ z-index:99999 !important; }
.datetimeinput{ z-index:99999 !important; }

.site-logo{
  height:calc(2em + 0.4vw);
  max-height:60px;
  min-height:40px;
}

.abs-bottom-right{
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.toplineicon-md{
  width:50px;
  height:40px;
  margin-top:10px;
}

.toplineicon-lg{
  width:120px;
  height:40px;
  margin-top:10px;
}

.div-transparent-size
{
	position: relative;
	margin-bottom: 30px;
	height: 1px;
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}

.divider {								/* minor cosmetics */
  display: table; 
  font-size: 24px; 
  text-align: center; 
  width: 100%; 						/* divider width */
  margin: 40px auto;					/* spacing above/below */
}
.divider span { display: table-cell; position: relative; }
.divider span:first-child, .divider span:last-child {
  width: 50%;
  top: 18px;							/* adjust vertical align */
  -moz-background-size: 100% 2px; 	/* line width */
  background-size: 100% 2px; 			/* line width */
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
.divider span:first-child {				/* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
  background-image: -webkit-linear-gradient(180deg, transparent, #000);
  background-image: -moz-linear-gradient(180deg, transparent, #000);
  background-image: -o-linear-gradient(180deg, transparent, #000);
  background-image: linear-gradient(90deg, transparent, #000);
}
.divider span:nth-child(2) {
  color: #000; padding: 0px; width: auto; white-space: nowrap;
}
.divider span:last-child {				/* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(180deg, #000, transparent);
  background-image: -moz-linear-gradient(180deg, #000, transparent);
  background-image: -o-linear-gradient(180deg, #000, transparent);
  background-image: linear-gradient(90deg, #000, transparent);
}

#dropdownproject{
  appearance: none;
	padding: 10px;
	background-color: #000;
	color: white;
	border: none;
	font-family: inherit;
	outline: none;
  text-align:center;
  cursor: pointer;
  font-size:16px;
}

.card{
  padding: 1.5em .5em .5em;
  border-radius: 1em;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.card-timesheet{
  border-radius: 1em;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.btn.btn-rounded {
  border-radius: 50px
}

.navbarbg{
  background-color: #222222;
}

a{
  text-decoration: none;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.mainsitefont{
 /* font-family: 'Rancho', cursive; */
  font-family: 'Arial', cursive;
}

.contactustitlefont{
    font-size:1.4em;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.digit{
  color: #6690a9;
  font-size: 1.2rem;
}

.calcsprogress{
  color: #000;
  font-size: 2.2rem;
}

.calcslabel{
  font-size: 1.8rem;
}

.calcsresult{
  font-size: 1.8rem;
  color: #000;
}

.calcsbutton{
  font-size: 2.0rem;
  color: #fff;
  background-color: #6690a9;
  font-weight: bold;
}

.formfont{
  color: #000;
  font-size: 1.0rem;
}

.commentaddedmsg{
  color: #000;
  font-size: 1.4rem;
}

.formfont-label{
  color: #6690a9;
  font-size: 1.0rem;
  font-weight: bold;
}

.formfont-button{
  background-color: #6690a9;
  color: #fff;
  font-size: 1.6rem;
}

.homequery{
  font-size: 1.2rem;
  color: #fff;
  background-color: #6690a9;
}

.homequerypara{
  font-size: 1.3rem;
}

.homefont{
  font-size: 3rem;
  color: #6690a9;
}

@media screen and (max-width: 600px) {
  .homefont {
    font-size: 2rem;
  }
}

@media screen and (max-width: 330px) {
  .homefont {
    font-size: 1.5rem;
  }
}

.progress-title{
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 10px;
}
.progress-outer{
  background: #fff;
  padding: 5px 60px 5px 5px;
  border: 5px solid #bebfbf;
  border-radius: 45px;
  margin-bottom: 20px;
  position: relative;
}
.progress{
  background: #bebfbf;
  border-radius: 20px;

}
.progress .progress-bar{
  border-radius: 20px;
  box-shadow: none;
  animation: animate-positive 2s;
}
.progress .progress-value{
  font-size: 20px;
  font-weight: 700;
  color: #6b7880;
  position: absolute;
  top: 3px;
  right: 10px;
}
@keyframes animate-positive{
  0%{ width: 0; }
}

.facebook {
background: #3B5998;
color: white;
}

.twitter {
background: #55ACEE;
color: white;
}

.google {
background: #dd4b39;
color: white;
}

.linkedin {
background: #007bb5;
color: white;
}

.youtube {
background: #bb0000;
color: white;
}

/* CSS Code by CodingTuting.Com Jignesh Panchal */
@-webkit-keyframes fadeIn {
0% { opacity: 0; }    
100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
0% { opacity: 0; }    
100% { opacity: 1; }
}

@-o-keyframes fadeIn {
0% { opacity: 0; }    
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }    
100% { opacity: 1; }
}

#social-share {
    position: fixed;
    right: 0px;
    top: 80px;
    z-index:10;
}

    #social-share a {
        text-decoration: none;
        float: right;
    }

    #social-share a:not(:first-child) {
        animation:fadeOut 0.5s;
        display: none;
    }        

    #social-share:hover a:not(:first-child) {
        display: inline;
        -webkit-animation: fadeIn 0.5s;
        -moz-animation: fadeIn 0.5s;
        -o-animation: fadeIn 0.5s;
        animation: fadeIn 0.5s;
    }

    #social-share:hover .fa-share-alt {
        border-radius: 0px;
    }
                  
    #social-share a .my-social {
        border-right: 0;
    }

    #social-share a .fa-facebook-f {
        padding: 8px 12px;
        color: white;
        border-radius: 3px 0px 0px 3px;
    }
     
    #social-share a .fa-twitter {
        color:white;
    }

    #social-share a .fa-whatsapp {
        color:#008000;
    }

    #social-share a .fa-linkedin-in {
        color:#607d8b;
    }

    #social-share a .fa-reddit-alien {
        color:#ff6c00;
    }

    #social-share a .fa-instagram {
        color:#ff1740;
        padding: 8px 11px;
    }
     
    #social-share > a > .fa-share-alt {            
        color: #2196f3;
        border-right: 0;
        padding: 8px 10px;   
        border-radius: 3px 0px 0px 3px;    
    }
      
    #social-share #facebook:focus > .fa-facebook-f, #social-share .fa-facebook-f:hover {
        background-color: #3F51B5;
        border-color:#3F51B5;
        color: #fff;
    }
     
    #social-share #twitter:focus > .fa-twitter, #social-share .fa-twitter:hover {
        background-color:#87ceeb;
        border-color: #87ceeb;
        color:#fff;
    }
     
    #social-share #whatsapp:focus > .fa-whatsapp, #social-share .fa-whatsapp:hover {
        background-color:#008000;
        border-collapse: #008000;;
        color:#fff;
    }
     
    #social-share #linkedin:focus > .fa-linkedin-in, #social-share .fa-linkedin-in:hover {
        background-color:#607d8b;
        border-collapse: #607d8b;;
        color:#fff;
    }
     
    #social-share #reddit:focus > .fa-reddit-alien, #social-share .fa-reddit-alien:hover {
        background-color:#ff6c00;
        border-collapse: #ff6c00;;
        color:#fff;
    }
     
    #social-share #instagram:focus > .fa-instagram, #social-share .fa-instagram:hover {
        background-color:#ff1740;
        border-collapse: #ff1740;
        color:#fff;
    }
     
    #social-share #share:focus > .fa-share-alt, #social-share .fa-share-alt:hover {
        color: #fff;
        background-color: #2196f3;
        border-color: #2196f3;
    }

    .my-social {
        font-size: 1.5em;
        border: 1px solid #3F51B5;
        padding: 8px 10px;
        cursor: pointer;
        transition: all 0.4s ease-out;
        -webkit-transition: all .4s ease-out;
        -moz-o-trasition: all .4s ease-out;
        -o-trasition: all .4s ease-out;
        color: white;
    }