@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap');

body                        { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; background: linear-gradient(to bottom, #56C3E2, #8CC34A, #E6CD7A); height: 100%; display: flex; flex-direction: column;}

.clr                        { clear: both;}

.mainwrapper                { width: 430px; background-color:#fff; margin: 20px auto 0 auto; padding: 10px 20px; border-radius: 10px;}

.mainwrapper-withoutbg      { width: 430px; margin: 20px auto 0 auto; padding: 10px 20px; border-radius: 10px;} 

.login-box                  { margin: 50px 0 20px 0; padding: 0; text-align: center;}
.bluetxt                    { color: #28a7d0; font-size: 22px; line-height: 50px; font-weight: 500; margin: 0; padding: 0;}

.loginfieldbox              { display: flex; padding: 20px 30px 10px 30px; margin: 0;}
.forminput                  { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #636363; border-bottom: 1px solid #ececec; padding: 10px; background-color: transparent; border-left: none; border-top: none; border-right: none; display: block; text-align: center; font-weight: 500; width: 100%;}

.forminput-border           { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #636363;  padding: 10px; background-color: transparent;  display: block; text-align: center; border: 1px solid #666666; border-radius: 3px; font-weight: 500; width: 100%;}

.fullrow                    { margin: 10px 0; padding: 0;}
.col                        { display: inline-flex; margin: 10px 20px; align-items: center;}
.bluetxt-small              { color: #28a7d0; font-size: 20px; line-height: normal; font-weight: 600; margin: 0; padding: 0; text-align: center;}
.bluetxt-small a            { color: #28a7d0; text-decoration: none;} 
.bluetxt-small a:hover      { color: #2193b7; text-decoration: none;} 

.formbutton                 { font-family: 'Montserrat', sans-serif; background-color: #00afdc; border: none;  padding: 15px 100px; border-radius: 15px; font-size: 20px; text-transform: uppercase; font-weight: 400; color: #fff; cursor: pointer;transition: 0.3s;}
.formbutton:hover           { background-color: #049ac1;}

.formbutton-small           { font-family: 'Montserrat', sans-serif; background-color: #00afdc; border: none; padding: 11px 30px; border-radius: 5px; font-size: 16px; text-transform: uppercase; font-weight: 500; color: #fff; cursor: pointer; width: 175px; transition: 0.3s;}
.formbutton-small:hover    { background-color: #049ac1;}

.imgicon                    { margin: 0; padding: 0; text-align: center;}
.imgicon li                 { margin: 20px; width: 170px; display: inline-flex;}
.imgicon li img             { width: 100%;}

.form-input                 { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000000; border-radius: 5px; border:1px solid #000; height: 30px; width: 95%; padding: 5px 10px; margin: 0 0 5px 0;}

.form-select                { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000000; border-radius: 0; border-color: #000000; height: 45px; padding: 5px; width: 100%; margin: 0 0 5px 0;}

.form-textarea              { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000000; border-radius: 0; border-color: #000000; height: 80px; padding: 5px; width: 97%; margin: 0 0 5px 0;}

.label-topspace             { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #1d1d1d; font-weight: 500; margin: 0 0 8px 0; display:  block;}

.label-bold                 { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #1d1d1d; font-weight: 600; margin: 0px 0 10px 5px; display:  block;}
.label-bold:after           { content: "*"; color: red;}

.col-small                  { margin: 0 15px; display: inline-block; padding: 3px;}
.forminputsmall             { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #636363; border-bottom: 1px solid #ececec; padding: 10px; background-color: transparent; border-left: none; border-top: none; border-right: none; display: block; text-align: left; font-weight: 500; width: 100%;}


.messagebox                 {  padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; width: auto;}
.messagebox li.admin        { margin-right: 75px;}
.messagebox li.admin        { margin-bottom: 20px; background-color: #ffffff; border-radius: 10px; padding: 10px;}
.messagebox li.user         { margin-left: 75px;}

.messagebox li.user         { margin-bottom: 20px; background-color: #0079ff; border-radius: 10px; padding: 10px;}

.messagebox li.admin .messagename{ color: #616161; font-size: 12px; font-weight: 600; line-height:normal; margin: 5px 0;}
.messagebox li.admin .message    { color: #000000; font-size: 13px; line-height: 18px; margin: 10px 0;}
.messagebox li.admin .messagetime{ color: #616161; font-size: 12px; line-height: normal; text-align: right; text-transform: uppercase; margin: 5px 0;}

.messagebox li.user .messagename { color: #dfeeff; font-size: 12px; font-weight: 600; line-height:normal; margin: 5px 0;}
.messagebox li.user .message     { color: #fff; font-size: 13px; line-height: 18px; margin: 10px 0;}
.messagebox li.user .messagetime { color: #dfeeff; font-size: 12px; line-height: normal; text-align: right; text-transform: uppercase; margin: 5px 0;}

.messagebox li.date              { text-align: center; margin-bottom: 20px; padding: 10px;}
.messagebox li .datetxt          { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #000; font-weight: 600; text-align: center; background-color: #fdf4d5; display: inline-block; padding: 8px 20px; border-radius: 25px; border: 5px solid #f0e98e;  margin: 0;}

.sidenav                         { background-color: #007cba; padding: 10px; margin: 0 100px 0px 0px;}
.sidenav p                       { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #fff; font-weight: 600; line-height: 24px; margin: 5px 5px 5px 15px;}
.sidenav p a                     { color: #ffffff; text-decoration: none;} 
.sidenav p a:hover               { color: #E7E7E7; text-decoration: none;} 
.sidenav ul                      { margin: 0 0 0 10px; padding: 0; list-style-type: none;}
.sidenav ul li                   { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #fff; font-weight: 600; line-height: 40px; padding: 0px 0 0 5px; margin: 10px 0px;}
.sidenav ul li img               { width: 28px; margin: 0 10px 0 0px;}
.sidenav ul li a                 { display: flex; align-items: center; color: #ffffff; text-decoration: none;} 
.sidenav ul li a:hover           { color: #E7E7E7; text-decoration: none;} 


 .white-button                   { font-family: 'Montserrat', sans-serif; background-color: white; border: 1px solid #788166; /* Black border */ color: #3c9b9d; /* Text color */ padding: 20px; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 8px; /* Optional: for rounded corners */ transition: background-color 0.3s, color 0.3s; /* Optional: for hover effect */ width: 100%; text-align: left; margin: 5px 0;}
.white-button:hover { background-color: #f0f0f0; /* Light gray on hover */ color: #3c9b9d; /* Darker text color on hover */}



.whitebox            { background-color: white; padding: 20px 10px; display: flex; justify-content: space-between; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); border-radius: 10px; border: 1px solid #b2b2b2; margin: 0 0 15px 0;}
.whitebox p          { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #4499ad; font-weight: 600; line-height: 24px; margin: 5px;} 
.left-div            { flex: 1; padding: 0; margin-right: 10px;}
.right-div           { display: flex;} 
.right-indiv         { padding: 0; margin-left: 10px; }
.whitebox .arrow     { font-family: 'Montserrat', sans-serif; font-size: 30px; color: #000000; font-weight: 500; line-height: normal; margin: 5px;}
.greendot            { font-size: 65px; line-height: 0; margin: 0 0 0 -5px; color: #2ec300; padding: 0; display: flex;}
.yellowdot           { font-size: 65px; line-height: 0; margin: 0 0 0 -5px; color: #fdf001; padding: 0; display: flex;}

.white-roundedbox    { background-color:#fff; margin:0; padding:0; border-radius: 10px;}
.titlerow            { margin: 0; padding: 10px;}
.titlerow h1         { font-family: 'Montserrat', sans-serif; font-size: 25px; color: #000; font-weight: bold; line-height: normal; text-align: center; margin: 0; padding: 0;}
.titlerow h2         { font-family: 'Montserrat', sans-serif; font-size: 18px; color: #026d91; font-weight: bold; line-height: 30px; text-align: center; margin: 0; padding: 0;} 
.bluerow             { background-color: #026c93; text-align: center; margin: 0; padding: 5px;}
.bluerow p           { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #fff; font-weight: normal; line-height: normal; margin: 0;} 
.infotable           { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0;}
.infotable td        { font-size: 14px; padding: 5px; color: #000000; line-height: 22px; margin: 0; font-weight: normal;}
.certification-table { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0;}
.certification-table .skybluerow           { background-color: #06adda;}
.certification-table .skybluerow td        { font-size: 14px; padding: 5px; color: #ffffff; line-height: 22px; margin: 0; font-weight: normal;}
.certification-table .grey                 { background-color: #e2e6f2;}
.certification-table .grey td              { font-size: 14px; padding: 5px; color: #000000; line-height: 22px; margin: 0; font-weight: normal;}


.clientdetail         { height: 100px; overflow-y: scroll; margin: 0 0 15px 0; padding: 10px;}
.clientdetail h3      { font-family: 'Montserrat', sans-serif; font-size: 18px; color: #026d91; font-weight: bold; line-height: 30px; text-align: left; margin: 0; padding: 0;}
.clientdetail p       { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #000000; font-weight: 500; line-height: 22px; text-align: left; margin: 5px 0; padding: 0;}

.clientdetail .button { font-family: 'Montserrat', sans-serif; background-color: #00afdc; border: none;  padding: 15px 20px; border-radius: 30px; font-size: 16px; text-transform: uppercase; font-weight: 400; color: #fff; cursor: pointer;transition: 0.3s; width: 100%;}
.clientdetail .roundbutton { background-color: #00afdc;  color: #fff;}
.clientdetail .roundbutton:hover { background-color: #049ac1; color:#fff;}



.clientdetail-noscroll         { margin: 0; padding: 0px 10px;}
.clientdetail-noscroll h3      { font-family: 'Montserrat', sans-serif; font-size: 18px; color: #026d91; font-weight: bold; line-height: 30px; text-align: left; margin: 0; padding: 0;}
.clientdetail-noscroll p       { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #000000; font-weight: 500; line-height: 22px; text-align: left; margin: 5px 0; padding: 0;}

.clientdetail-noscroll .button { font-family: 'Montserrat', sans-serif; background-color: #00afdc; border: none;  padding: 15px 20px; border-radius: 30px; font-size: 16px; text-transform: uppercase; font-weight: 400; color: #fff; cursor: pointer;transition: 0.3s; width: 100%;}
.clientdetail-noscroll .roundbutton { background-color: #00afdc;  color: #fff;}
.clientdetail-noscroll .roundbutton:hover { background-color: #049ac1; color:#fff;}
 



.whiteroundblock                { background-color: white; padding: 10px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; border: 1px solid #b2b2b2; margin: 0 0 5px 0;}
.whiteroundblock h1             { font-family: 'Montserrat', sans-serif; font-size: 25px; color: #000; font-weight: bold; line-height: normal; text-align: center; margin: 0; padding: 0;}
.whiteroundblock h2             { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #026d91; font-weight: 600; line-height: 22px; margin: 5px 0; text-align: center;}
.whiteroundblock h3             { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #000; font-weight: 700; line-height: normal; margin: 5px 0; text-align: center;}
.boldskybluetxt                 { color: #026d91 !important;}
.whiteroundblock h4             { font-family: 'Montserrat', sans-serif; font-size: 25px; color: #000; font-weight: bold; line-height: normal; text-align: left; border-bottom: 1px solid #b0b0b0; margin: 10px; padding: 0 0 10px 0;}
.whiteroundblock h5             { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #026d91; font-weight: 600; line-height: 22px; margin: 5px 0; text-align: left;}

.whiteroundblock p              { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000; font-weight: normal; line-height: normal; margin: 5px 0;}
.whiteroundblock .greytxt       { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #929292; font-weight: normal; line-height: normal; margin: 5px 0;}
.whiteroundblock .greytxt a      { color: #929292; text-decoration: none;}
.whiteroundblock .greytxt a:hover{ color: #000000; text-decoration: none;}
.whiteroundblock .bluelinktxt   { font-family: 'Montserrat', sans-serif; font-size: 15px; color: #1612d9; font-weight: 500; line-height: normal; margin: 5px 0;}
.whiteroundblock .bluelinktxt a      { color: #1612d9; text-decoration: none;}
.whiteroundblock .bluelinktxt a:hover{ color: #000000; text-decoration: none;}

.timecard                       { margin: 0; padding: 0;}
.timecard tr, td                { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #4094a3; font-weight: 500; line-height: normal; margin:0; padding: 5px;}
.whiteroundblock textarea       { border-left: none; border-top: none; border-right: none; border-bottom: 2px solid #b8860b; display: block; width:100%; text-align: left; line-height: normal; vertical-align: top;  height: 80px;}

.styled-fieldset                { border: 1px solid #b0b0b0; border-radius: 8px; padding: 10px; margin: 5px 5px 25px 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);}
.styled-legend                  { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000000; padding: 0 5px; font-weight: 500; border-radius: 5px;}

.sidebar .profile-info p {
line-height:30px;
}


.timecardtable                  { margin: 0; padding: 0;}
.timecardtable tr, td           { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #000000; font-weight: 500; line-height: normal; margin:0; padding: 5px;}
.timecardtable textarea         { border: 1px solid #ccc; border-radius: 5px; display: block; width:100%; text-align: left; line-height: normal; vertical-align: top; height: 80px;}
.table-inputfield               { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #000000; font-weight: 500; line-height: normal; margin:0; padding: 5px; border: 1px solid #c7c7c7; border-radius: 3px;} 
.skyblue                        { background-color: #00afdc; height: 1px; border: none;}
.bor-box                        { border: 1px solid #ccc; padding: 12px; border-radius: 5px;}
.bor-box p                      { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #000000; font-weight: 500; line-height: normal; text-align: center;}
#signature-pad                  { width: 100%; border: 1px solid #ccc; border-radius: 5px;}

/* Scrollbar Css */
.mainwrapper-withscroll         { width: 430px; margin: 20px auto 0 auto; padding: 10px 20px; border-radius: 10px; flex: 1; display: flex; flex-direction: column; overflow: hidden;}
.fullrow-withscroll             { flex: 1; overflow-y: auto; /* Hide scrollbar */  -ms-overflow-style: none; /* Internet Explorer and Edge */ scrollbar-width: none; /* Firefox */}
.fullrow-withscroll::-webkit-scrollbar { display: none; /* Safari and Chrome */ }
.button-container               { padding: 10px; background: #f0f0f0; border-top: 1px solid #ccc; }

.bigtitlebox                    { text-align: center; padding: 0px;}
.bigtitlebox h1                 { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #000; font-weight: bold; line-height: 28px; text-align: center; margin: 0; padding: 0;}
.skybluetxt                     { color: #4094a3;}
.greyborderbox                  { padding: 15px; background-color: #f0f0f0; border: 1px solid #808080; border-radius: 5px;}
.skybluebgrow                   { background-color: #f0f8ff}

.roundgreen-button                   { font-family: 'Montserrat', sans-serif; text-transform: uppercase;  display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 50%; /* Round shape */ background-color: #00c042; /* Green background */ color: white; /* White text */ font-size: 14px; /* Font size */ font-weight: bold; /* Optional: make the text bold */ text-align: center; border: 2px solid transparent; /* Initial transparent border */ cursor: pointer; transition: all 0.3s ease; /* Smooth transition for all properties */}
/* Hover effect */
.roundgreen-button:hover { border: 10px solid rgba(152, 251, 152, 0.5); /* 10px border with less opacity */ opacity: 0.9; /* Slight fade effect */}


.roundred-button                   { font-family: 'Montserrat', sans-serif; text-transform: uppercase;  display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 50%; /* Round shape */ background-color: #ff0000; /* Green background */ color: white; /* White text */ font-size: 14px; /* Font size */ font-weight: bold; /* Optional: make the text bold */ text-align: center; border: 2px solid transparent; /* Initial transparent border */ cursor: pointer; transition: all 0.3s ease; /* Smooth transition for all properties */}
/* Hover effect */
.roundred-button:hover { border: 10px solid rgba(255, 112, 112, 0.5); /* 10px border with less opacity */ opacity: 0.9; /* Slight fade effect */}

.piechart-scrollsec { height: 300px; overflow-y: scroll; overflow-x: hidden;}
.piechart-scrollsec img { width: 100%;}


.fullrow-verscroll         { height: 600px; overflow-y: scroll;}

@media only screen and (max-width : 500px) {
    .mainwrapper {
        width: auto;
        padding: 5px;
        margin: 30px 0 0 0;
    }

    .mainwrapper-withoutbg {
        width: auto !important;
        padding: 5px !important;
        margin: 30px 0 0 0 !important;
    }
	
	.mainwrapper-withscroll {
        width: auto !important;
        padding: 5px !important; 
    }
	
	.whiteroundblock {
        overflow: scroll !important;
    }

    .formbutton {
        padding: 10px 45px;
    }

    .timecardtable canvas {
        width: 100% !important;
    }
}



@media only screen and (max-width : 389px) {
    .infotable td {
        word-break: break-word;
    }
}


@media only screen and (max-width : 410px) {
    .icon-wrapper {
        gap: 10px !important;
    }

    .imgicon li {
        width: 46% !important;
    }
}