/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import "../plugins/fontawesome/css/all.min.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*----------------------------
   element      
----------------------------*/

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
*{margin:0; padding:0}
a{ text-decoration:none;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 12px;background:var(--body);  font-family: "Inter", sans-serif;font-optical-sizing: auto;line-height: 26px;color:#455A64;-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #455A64;-webkit-font-smoothing: antialiased;}

:root {
   --red:#DC2626;
    --green:#66BA46;
    --black:#000000;
    --gray:#707071;
    --blue:#305CDE;
    --purple:#9C27B0;
    --yellow:#FDD511;
    --white:#ffffff;
    --border:#E5E7EB;
    --body:#F2F2F2;
    --lightgreen:#DCFCE7;
    --lightgray:#F9FAFB;
    --lightblue:#E3F2FD;
    --lightyellow:#fffcde;
    --lightred:#FEE2E2;
    --lightpurple:#F3E5F5;
    --darkbrown:#A16207;
  
}



.wd10{width: 10%;}
.wd20{width: 20%;}
.wd30{width: 30%;}
.wd40{width: 40%;}
.wd50{width: 50%;}
.wd60{width: 60%;}
.wd70{width: 70%;}
.wd80{width: 80%;}
.wd90{width: 90%;}
.wd100{width:100%;}

/*----------------------------
   header  footer    
----------------------------*/
.header {width: 100%;  z-index: 99; padding: 10px 0; margin: 0; background-color: var(--white); position: sticky; top: 0; box-shadow: 0 4px 10px rgb(0 0 0 / 5%);   }
.header .container{max-width: 95%;}

.header-inner {width: 100%; display: flex; flex-wrap: wrap; background-color: var(--white);  align-items: center;  }
.logo-wrapper {padding: 5px 0; display: flex; align-items: center; flex-shrink: 0; margin-right: 24px; }
.light-logo {height:64px;  }
.page-main-header {display: flex; justify-content: space-between; align-items: center; flex-grow: 1;} 
.main-nav .nav-link {color: var(--black); font-weight: 500; padding: 0.3rem 1rem; font-size: 14px;    font-weight: 600; border-radius:5px; } 
.main-nav .nav-link.active, .main-nav .nav-link:hover {    color: var(--blue);background: var(--lightblue);} 
.main-nav .nav-link.active {font-weight: 600; }
 /* Mobile Nav Specifics */ 
#mobileNav .nav-link {padding: 0.5rem 0; font-size: 1rem; } 
#mobileNav {border-top: 1px solid var(--border); margin: 10px -30px 0;  padding: 0 30px 10px; } 
.user-profile {display: flex; align-items: center; gap: 12px; } 
.user-profile img {width: 40px; height: 40px; border-radius: 50%; } 
.user-profile-name {color: var(--black); font-weight: 600; font-size: 14px; line-height: 1.2; } 
.user-profile-role {color: var(--gray); font-size: 14px; line-height: 1.2; }

.nav-right .navbar-nav {flex-direction: row; gap:20px; }
.nav-right .navbar-nav .dropdown-menu {position: absolute; font-size: 0.9rem; margin-top: 0; right: 0; left: auto; top: 50px; border: none; width: 160px; padding: 0; background: #ffffff; box-shadow: 0 0 50px rgba(0, 0, 0, 0.03); border-radius: 20px; }

.nav-right .navbar-nav .dropdown-menu a.dropdown-item {font-size: 13px;font-weight: 500;color: #455a64;border-radius: 5px; padding:5px 20px}
.nav-right .navbar-nav .dropdown-menu a.dropdown-item.active, 
.nav-right .navbar-nav .dropdown-menu a.dropdown-item:active, 
.nav-right .navbar-nav .dropdown-menu a.dropdown-item:focus, 
.nav-right .navbar-nav .dropdown-menu a.dropdown-item:hover {color:var(--black); text-decoration: none; background-color:var(--lightblue); }
.nav-right .navbar-nav .dropdown-toggle::after {display: inline-block; margin-left: .255em; vertical-align: .255em; content:inherit; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }


.user-wrap {display: flex ; align-items: center; justify-content: center; }
.user-img {display: inline-block; position: relative; } 
.user-img img {width: 38px; height: 38px; border: 2px solid var(--lightbeaver); border-radius: 50%; background-color: var(--golden-gate-bridge); padding: 3px 3px 0px 3px; } 
.user-wrap .user-content {margin-left: 10px; } 
.user-content h6{ font-size: 14px; color: var(--black); font-weight: 600; padding: 0; margin: 0} 
.user-wrap .user-content p {font-size: 14px; color: var(--gray); line-height: 1; }
.notification-wrap{position: relative;}
.notification-img{width: 38px; height: 38px; border: 1px solid var(--border); background-color: var(--lightbeaver); border-radius: 30px; padding: 0; display: flex ; align-items: center; justify-content: center;}

.notification-head h3{ font-size: 14px; color: var(--black); font-weight: 600; padding:5px 10px; margin: 0} 
.notification-badge {position: absolute; top: -6px; right: -6px; padding: 5px; text-align: center; white-space: nowrap; vertical-align: baseline; display: flex ; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--orange); color: var(--white); font-weight: 500; height: 18px; }

 .notification-dropdown  .dropdown-menu{min-width: 335px; }

 .notification-dropdown .notification-message {position: relative; border: 1px solid var(--border); border-left: 2px solid var(--orange); padding: 0.75rem 1rem; margin: 0.5rem; border-radius: 10px; display: flex ; align-items: center; }
.date-badge{    background-color:var(--lightbeaver); color:var(--orange); border-color: transparent; white-space: nowrap; transition: all 0.3s ease; padding: 0.3em 0.9em 0.3em; font-weight: 600; letter-spacing: 0.5px; line-height: 1.4;}
.close-btn{color: var(--golden-gate-bridge);}
.notification-message-text{font-size: 14px; font-weight: normal; line-height: normal;}

.Loginbtn{background: var(--blue); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }




.footer{padding: 30px; text-align: center; background: var(--white);  }
.footer  a {color: var(--black); font-weight: 500; font-size:14px; }
.footer  p {font-size: 0.9rem; margin-top: 12px; }
.social-links {display: flex; gap: 12px; justify-content: center; margin-top:1rem; }
.social-icon {width: 40px; height: 40px; border-radius: 50%; background: var(--body); display: flex; align-items: center; justify-content: center; color: #555; font-size: 18px; text-decoration: none; transition: all 0.3s ease; }

.social-icon:hover {color: #fff; transform: translateY(-3px); }
.social-icon.facebook:hover {background: #1877f2; }
.social-icon.instagram:hover {background: #e4405f; } 
.social-icon.twitter:hover {background: #1da1f2; } 
.social-icon.linkedin:hover {background: #0a66c2; }
/*----------------------------
   main-wrapper      
----------------------------*/
.main-content-wrapper .container{max-width: 95%; padding: 1rem 0}



/*----------------------------
   Checkbox    
----------------------------*/
.ghcheckbox label {padding-left: 31px; position: relative; display: inline-block; padding: 0 0 0 2em; margin-bottom: 10px;  line-height: 1.5; cursor: pointer; font-size: 14px;}
.ghcheckbox label::before,
.ghcheckbox label::after {position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; }
.ghcheckbox label::before {content: " ";border: 1px solid var(--border);-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}
.ghcheckbox input[type="checkbox"]{position: absolute; opacity: 0; z-index: -1; margin: 0; }
.ghcheckbox input[type="checkbox"] + label::after {content: "\2714"; color: #FFF; line-height: 1.9; text-align: center; border: none; }
.ghcheckbox input[type="checkbox"]:checked + label::before {background: var(--blue);border-color: var(--blue);}
.ghcheckbox input[type="checkbox"] + label::after{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
.ghcheckbox input[type="checkbox"]:checked + label::after{-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }


/*----------------------------
      fws-heading
----------------------------*/

.gh-heading-section{background: var(--white);box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); padding: 1rem 1rem 1rem 1rem; display: flex; justify-content: space-between; border-radius: 15px; margin-bottom: 1rem}
.gh-heading-head{width: 100%;}
.gh-heading-head  h2 {font-size:24px;font-weight: 600;color:var(--gray);margin: 0;padding: 0;;}
.gh-heading-head  p {font-size:14px; font-weight: normal; color:var(--lightgray); margin: 0; padding: 0; }

.header-icon{width: 54px; height: 54px; background: var(--lightyellow); color: var(--yellow); display: flex; align-items: center; justify-content: center;font-size: 20px; border-radius: 5px; position: relative;}


/*----------------------------
         search-filter
----------------------------*/
.gh-search-filter-section .gh-search-filter{width: 100%}

.gh-search-filter .search-form-group {position: relative; }
.gh-search-filter .form-group input.form-control {background: var(--white); border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-search-filter .form-group select.form-control {appearance:auto; background: var(--white); border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-search-filter .form-group textaera.form-control {background: var(--white); border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-search-filter  textaera.form-control {position: relative; color: var(--gray); border-radius: 5px; font-weight: 400; font-size: 14px; box-sizing: border-box; padding: 10px 15px 10px 15px; border: 1px solid var(--border); width: 100%; background: #FFF; box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05);}
.gh-search-filter input.form-control:focus {border: 1px solid var(--blue); }

.gh-search-filter .search-form-group input.form-control{padding: 12px 15px 12px 40px;}
.gh-search-filter .search-form-group span.search-icon {position: absolute; top: 50%; left: 10px; pointer-events: none; transform: translateY(-50%) scaleX(-1); color: var(--blue); font-size: 18px; }

/*----------------------------
         btn
----------------------------*/

button.btn-re {background: var(--red); white-space: nowrap; border: 1px solid var(--red); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-gr {background: var(--green); white-space: nowrap; border: 1px solid var(--green); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-bl {background: var(--blue); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-bro {background: var(--drakbrown); white-space: nowrap; border: 1px solid var(--drakbrown); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-gra {background: var(--lightblue); white-space: nowrap; border: 1px solid var(--lightblue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--gray); border-radius: 5px; font-weight: bold; text-align: center; }

a.btn-re {background: var(--red); white-space: nowrap; border: 1px solid var(--red); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-gr {background: var(--green); white-space: nowrap; border: 1px solid var(--green); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-bl {background: var(--blue); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-bro {background: var(--drakbrown); white-space: nowrap; border: 1px solid var(--drakbrown); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--white); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-gra {background: var(--lightblue); white-space: nowrap; border: 1px solid var(--lightblue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--gray); border-radius: 5px; font-weight: bold; text-align: center; }


button.btn-outline-re {background: var(--white); white-space: nowrap; border: 1px solid var(--red); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--red); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-outline-gr {background: var(--white); white-space: nowrap; border: 1px solid var(--green); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--green); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-outline-bl {background: var(--white); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--blue); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-outline-bro {background: var(--white); white-space: nowrap; border: 1px solid var(--drakbrown); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--drakbrown); border-radius: 5px; font-weight: bold; text-align: center; }
button.btn-outline-gra {background: var(--white); white-space: nowrap; border: 1px solid var(--lightgray1); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--lightgray1); border-radius: 5px; font-weight: bold; text-align: center; }

a.btn-outline-re {background: var(--white); white-space: nowrap; border: 1px solid var(--red); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--red); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-outline-gr {background: var(--white); white-space: nowrap; border: 1px solid var(--green); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--green); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-outline-bl {background: var(--white); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--blue); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-outline-ye {background: var(--white); white-space: nowrap; border: 1px solid var(--yellow); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--yellow); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-outline-bro {background: var(--white); white-space: nowrap; border: 1px solid var(--drakbrown); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--drakbrown); border-radius: 5px; font-weight: bold; text-align: center; }
a.btn-outline-gra {background: var(--white); white-space: nowrap; border: 1px solid var(--lightgray1); padding: 8px 15px; display: inline-block; font-size: 14px; color: var(--lightgray1); border-radius: 5px; font-weight: bold; text-align: center; }



a.view-btn {border: 1px solid var(--green); background: var(--green); box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); display: flex; padding: 8px 8px; border-radius: 5px; position: relative; font-size: 14px; color: var(--white); line-height: normal; align-items: center; justify-content: center; width: 40px; height: 40px; }
a.delete-btn {border: 1px solid var(--red); background: var(--red); box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); display: flex; padding: 8px 8px; border-radius: 5px; position: relative; font-size: 14px; color: var(--white); line-height: normal; align-items: center; justify-content: center; width: 40px; height: 40px;}
a.edit-btn {border: 1px solid var(--blue); background: var(--blue); box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); display: flex; padding: 8px 8px; border-radius: 5px; position: relative; font-size: 14px; color: var(--white); line-height: normal; align-items: center; justify-content: center; width: 40px; height: 40px;}



/*----------------------------
         status
----------------------------*/

.status-text,
.estimates-status {font-size: 16px; font-weight: 500; border-radius: 50px; color: var(--green); border: 1px solid var(--lightgreen); background:var(--lightgreen); text-align: center; display: inline-block; padding: 2px 15px; }
.activestatus {color: var(--green); border: 1px solid var(--lightgreen); background:var(--lightgreen); }
.redstatus{color: var(--red); border: 1px solid var(--lightred); background:var(--lightred); }
.grstatus{color: var(--green); border: 1px solid var(--lightgreen); background:var(--lightgreen); }
.yestatus{color: var(--yellow); border: 1px solid var(--lightyellow); background:var(--lightyellow); }



/*----------------------------
         card
----------------------------*/



.gh-card {border-radius: 10px; border: unset; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); background: var(--white); margin-bottom:15px; letter-spacing: 0.5px; transition: all 0.3s ease; }
.gh-card .card-header{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.gh-card .card-header.card-no-border {border-bottom: none !important; }
.gh-card .card-header:first-child {border-radius:10px 10px 0 0; }
.gh-card .card-header {background-color: var(--white); padding: 15px 20px; position: relative; }
.gh-card .card-header h3{ font-size:20px; color: var(--black); font-weight: 600; padding:0; margin: 0} 
.gh-card .card-body{padding: 10px;}

/*----------------------------
         table
----------------------------*/
thead,
tbody,
tfoot,
tr,
td,
th {border-color: var(--border); }
.table {margin-bottom: 0px; }
.table tbody tr th,
.table tbody tr td {border-bottom: 1px solid var(--border); }
.table > :not(:last-child) > :last-child > * {border-bottom-color: var(--border); }
.table th,
.table td {padding: 0.75rem; }
.table th {color: var(--black); font-weight: 700; white-space: nowrap; font-size:14px; }
.table td {color: var(--gray); font-size:14px;}
.table-striped thead tr th p {margin-bottom: 0; }
.table-bordered thead,
.table-bordered tbody,
.table-bordered tfoot,
.table-bordered tr,
.table-bordered td,
.table-bordered th {border-color:var(--border); }
.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--lightblue);
    --bs-table-bg-state: var(--lightblue);
}




/*----------------------------
   popup    
----------------------------*/

.gh-modal .modal-header {border: none; text-align: center; justify-content: center; }
.gh-modal h5.modal-title {margin: 0; padding: 0; font-size: 20px; font-weight: bold; color: #6c7383; text-align: center;}
.gh-modal .modal-content {border: none; background: #fff; border-radius: 10px; }
.gh-modal button.btn-close {position: absolute; right: 0; top: 0; }


.gh-form-info h2{font-size: 20px;font-weight: 600;margin: 0 0 1rem 0;padding: 0;text-align: center;color:var(--black); }
.gh-form-info h3{font-size: 16px;font-weight: 600;margin: 0 0 1rem 0;padding: 0;color:var(--black); text-align: center;}
.gh-form-info p {font-size: 14px;margin: 0;color:var(--gray);line-height: 24px;font-weight: normal;text-align: center;}

.gh-form-info{padding: 1rem; position: relative;}
.gh-form-info .form-group {margin-bottom: 1rem; }
.gh-form-info .form-group label{    font-size: 14px; font-weight: 600; margin: 0; color:var(--black); }
.gh-form-info .form-group input.form-control {background: var(--white); border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-form-info .form-group select.form-control {background: var(--white); appearance: auto; border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-form-info .form-group textarea.form-control {background: var(--white); border-radius: 5px; font-size: 14px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.gh-form-info .form-group .cancel-btn{border: none;text-align: center;border-radius: 5px;padding: 10px 40px;color:var(--white);font-size: 14px;font-weight: 500;background:var(--red);display: inline-block;}
.gh-form-info .form-group .save-btn{border: none;text-align: center;border-radius: 5px;padding: 10px 40px;color:var(--white);font-size: 14px;font-weight: 500;background:var(--blue);display: inline-block;}