@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500&family=Roboto:wght@100;200;300;400;500&family=Poppins:wght@100;200;300;400;500;600&family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@100;200;300;400&family=Poppins:wght@100;200;300;400;500;600&family=Roboto:wght@500&family=Yesteryear&display=swap');
  



/*box sizing*/
      * {
        box-sizing: border-box;
    }
    html{
        height: 100%;
        box-sizing: border-box;
    }
    body {
        position: relative;
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        /* -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale; */
          background: #F0F0F4;
          min-height: 100%;
          /* padding-bottom: 6.7rem; */
    }

button{
    font-family: 'Roboto', sans-serif;
}


/*root*/

:root {
  --main-bg-color: #006497;
  --main-bg2 : #CCE5FF;
  --main-bg3 : #EDDCFF;
  --main-bg4 : #221534;
  --label-bord : #72787E;
} 

      /*Header and logo styling*/
    .header {
    
        position: fixed;
        height: 56px;
        top: 0;
        left: 0px;
        right: 0;
        /* box-shadow: 0 1px 0 #f1f1f1; */
        border-bottom: 1px solid #e4e4e4;
        background-color: #fff;
        z-index: 1;
        padding: 0px 27px 0px 201px;
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    .log-orio img{
        height: 53px;
        width: auto;
    }
    .head-line {
        display: grid;
        align-items: center;
        gap: 8px;
        height: 40px;
        grid-template-columns: auto auto;
    }
    .head-line img{
        cursor: pointer;
   
    border-radius: 8px;
    width: 40px;
    height: 40px;
}

    .head-line img:hover{
        cursor: pointer;
    background: rgba(240, 240, 244, 1);
    border-radius: 8px;
    width: 40px;
    height: 40px;
}

    /* logo in header(mobile version) and side-nav (tablet & desktop) */
    .logo { 
        height: 56px;
        padding: 10px;
        font-weight: 700;
        width: 80px;
        left: 0px;
        position: absolute;
    }
    .header .logo {
        color: #233245;
    }
    .side-nav .logo {
    
        /* background-color: rgba(212, 228, 246, 1);
        color: #fff;
        justify-content: center;
        display: flex;
        align-items: center; */
        background-color: #FFEBCF;
        color: #fff;
        justify-content: center;
        display: flex;
        align-items: center;
    
    }
    .header .logo {
        float: left;
    }
    .header .logo {
        height: 44px;
        z-index: 1;
        padding: 10px;
        font-weight: 700;
        color: #233245;
    }
    .logo  i {
        font-size: 22px;
    }
    .logo span {
        margin-left: 5px;
        text-transform: uppercase;
    }
    .nav-trigger {
        position: relative;
        float: right;
        width: 20px;
        height: 44px;
        right: -14px;
        display: block;	
    }
    .nav-trigger span, .nav-trigger span:before, span:after {
        width: 20px;
        height: 2px;
        background-color: #35475e;
        position: absolute;
    }
    .nav-trigger span {
        top: 50%;
    }
    .nav-trigger span:before, .nav-trigger span:after {
        content: '';
    }
    .nav-trigger span:before {
        top: -6px;
    }
    .nav-trigger span:after {
        top: 6px;
    }
 
    #main-header {
        position: fixed;
        height: 56px;
        top: 0;
        left: 0px;
        right: 0;
        /* box-shadow: 0 1px 0 #f1f1f1; */
        border-bottom: 1px solid #e4e4e4;
        background-color: #fff;
        z-index: 999;
        padding: 0px 24px 0px 104px;
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    .head-img .version-p1{
        margin-bottom: 0px;
        border-left: 1px solid rgba(228, 228, 228, 1);
        padding: 14px 26px 12px 26px;
        color: rgba(38, 37, 38, 1);
        font-size: 12px;
     }

     .user-form .row{
        margin-left: 0px;
      }


      .status-edit p{
            margin-bottom: 0px;
        }

    .worker-form textarea {
        border-radius: 4px;
        border: 1px solid #E1E1E1;
        background: rgba(255, 255, 255, 0.60);
        outline: unset;
        height: 69px;
        font-size: 14px;
        padding: 4px;
    }

    #main-header p {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin: 0px 0px 0px 0px;
    }
    .active-img {
        width: 56px;
        height: 32px;
        border-radius: 16px;
        background: rgba(212, 228, 246, 1);
        padding: 4px 16px 4px 16px;
        margin-bottom: 4px;
    
    }

    .three-z{
        width: 300px;
    }

    /* .active-img:hover {
    border-radius: 16px;
    background: #C6C6C92E;
    padding: 4px 16px 4px 16px;
    } */

   

    #main-header2{
        position: fixed;
        height: 56px;
        left: 0px;
        right: 0;
        border-bottom: 1px solid #e4e4e4;
        background-color: #fff;
        padding: 0px 28px 0px 121px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        top: 54px;
        z-index: 0;
        width: 100%;
    }
    .side-icons{
        justify-content: center;
        display: flex;
    }
    .inactive-img {
        width: 56px;
        height: 32px;
        border-radius: 16px;
        /* background: rgba(212, 228, 246, 1); */
        padding: 4px 16px 4px 16px;
        margin-bottom: 4px;
    }

    .inactive-img:hover {
    border-radius: 16px;
    background: rgba(198, 198, 201, 0.18);
    padding: 4px 16px 4px 16px;
    }

    .last-icon {
        position: absolute;
        bottom: 0px;
        width: 80px;
        justify-content: center;
        display: grid;
        height: 64px;
        background: #F9F9FC;
        align-items: center;
    }
    .img-log{
        border: 0.5px solid #42474E;
        border-radius: 40px;
        padding: 3px 11px 3px 11px;
        width: 40px;
        height: 40px;
    }

    .img-log:hover{
    background: rgba(204, 229, 255, 0.40);
    }
    .icon-para{
        color: rgba(0, 0, 0, 1)!important;
        font-size: 12px!important;
        font-weight: 500!important;
    }
    
  /*Commom */
  
  .center-align{
    text-align: center;
  }
  .left-align{
    text-align: left;
  }
  .right-align{
    text-align: right;
  } 
  .move-right {
    padding-right: 24px!important;
}

.stat-width{
    width: 171px;
}

  input[type="number"] {
    -moz-appearance: textfield; 
  }
  
  .ht-txt{
       height: 26px;
  }
 
  .p-m1{
    width: auto;
  }
  
  /* For modern browsers */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

.calc-td{
    width: 189px;
}
.calc-td1{
    width: 363px;
}
.service-width{
width: 410px;
}
   
.uo-m{
    width: 100%;
  }

/*table cell*/

.add-newth{
    width: 140px;
}
/* .add-new{
    width: 115px;
} */

.q-widthth{
    width: 154px;
}
/****/
.uom-widthth{
    width: 119px;
}
/***/
.serv-widthth{
width: 359px;
}

.price-am{
    width: 135px;
}


/*****margin left*****/

.left-space{
margin-left: -8px;
}





/*Sub menu*/
.dropup-content {
    display: block;
    position: fixed;
    min-width: 219px;
    z-index: -1;
    margin-left: 76px;
    height: 100%;
    top: 0px;
    border-radius: inherit;
    background: var(--material-theme-sys-light-surface, #F9F9FC);
    /* box-shadow: 1px 0px 10.1px 0px rgb(228 228 228 / 12%); */
    color: #000;
    transition: transform 750ms ease-in-out;
    transform: translateX(-100%);
}


.dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin: 9px;
    text-align: left!important;
    cursor: pointer;
}

.dropup-content a:hover {
    background: #D4E4F6;
    margin: 9px;
    border-radius: 18px;
}

.dropup:hover .dropup-content {
    display: block;
    transform: translateY(0);

    box-shadow: 4px 0px 10.5px 0px rgba(0, 0, 0, 0.12);
}

.dropup:hover .dropbtn {
    background-color: #2980B9;
}

.r-sec{
    float: right;
}
.drop-select{
    font-size: 14px;
    font-weight: 600;
    border: unset;
    background: unset;
    width: 100%;
    outline: unset;
}

    
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 216px;
    /* bottom: 127px; */
    z-index: 1;
    margin-left: 0px;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    margin-top: -10px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin-left: 25px;
    }
.dropdown-content a:hover {
background-color: #D4E4F6;
margin-left: 25px;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #2980B9;
}

.hasDD > a:after {

    content: "";
    position: absolute;
    right: 23px;
    top: 50%;
    margin-top: -4px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    transition: all 0.5s linear;

  }
    /* style for side navigation */
    .side-nav {
        position: fixed;
        width: 80px;
        height: 100%;
        background-color: #F9F9FC;
        z-index: 99;
        display: none;
        top: 0px;
        left: 0;
    }
    .side-nav.visible {
        display: block;
    }
    .side-nav ul {
        list-style-type: none;
        padding: 9px 0px 9px;
        margin: 0px;
        position: absolute;
        width: 100%;
        top: 56px;
        bottom: 63px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #F9F9FC;
    }
    .side-nav ul li {
        padding: 0;
        margin: 0;
        height: auto;
        align-items: center;
        display: grid;
        margin-bottom: 12px;
        text-align: center;
        /* border-bottom: 1px solid #3c506a; */
        position: relative;
        cursor: pointer;
}
    
    .side-nav ul li.active:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #eaedf3;
    }
    .side-nav ul li a {
        color: #000;
        display: block;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
    }
 
    .side-nav ul li span:nth-child(2) {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        color: #1A1C1E;
        padding: 0px 5px;
    }

    .side-head1 {
        color: rgba(0, 0, 0, 1);
        font-size: 22px;
        line-height: 28px;
        font-weight: 500;
        text-align: left;
        padding: 26px 22px 0px;
    }
    /* main content styles */
    .main-content {
        padding: 43px;
        margin-top: 0;
        padding: 0;
        padding-top: 46px;
        height: 100%;
        overflow: scroll;
    }
    .main-content .title {
        background-color: #eef1f7;
        border-bottom: 2px solid #b8bec9;
        padding: 12px 470px;
        font-weight: 700;
        color: #333;
        font-size: 18px;
    }
    
    .header-main{
        display: flex;
        justify-content: space-between;
    }
    
    .head-img{
        display: flex;
        grid-gap: 15px;
    }
    
    .head-img .note-img{
        border-right: 1px solid #E4E4E4;
        border-left: 1px solid #E4E4E4;
        padding: 15px;
        /* margin: -6px; */
    }

    .header-btn{
        margin-left: -17px;
    gap: 8px;
    display: flex;
    }

     .btn-active{
        padding: 8px 16px 8px 24px;
        width: 121px;
        height: 36px;
        background: #004B73;
        border-radius: 8px;
        color: #FFFFFF;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        border: unset;
        display: flex;
        gap: 4px;
        align-items: center;
    }



    .header-btn .btn-normal{
        /* width: 108px; */
        height: 36px;
        background: #00649714;
        border-radius: 8px;
        padding: 8px 16px 8px 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        border: unset;
        display: flex;
        gap: 4px;
        align-items: center;
    }


    .topnav {
        position: fixed;
        /* height: 56px; */
        left: 0px;
        right: 0;
        border-bottom: 1px solid #e4e4e4;
        background-color: #fff;
        padding: 0px 28px 0px 105px;
        top: 20px;
        z-index: 2;
        width: 100%;
        overflow: auto;
        margin-top: 36px;
    
            }
            
            .topnav a {
                float: left;
        color: black;
        text-align: center;
        text-decoration: none;
        height: 36px;
        background: #00649714;
        border-radius: 8px;
        padding: 8px 24px 8px 24px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        border: unset;
        display: flex;
        gap: 4px;
        align-items: center;
        margin-top: 10px;
        margin-right: 8px;
        margin-bottom: 10px;
    }


     .topnav a:hover {
              background-color: rgba(0, 100, 151, 0.12);
              color: black;
            }
            
            .topnav a.active {
                padding: 8px 24px 8px 24px;
        /* width: 121px; */
        height: 36px;
        background: #004B73;
        border-radius: 8px;
        color: #FFFFFF!important;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        border: unset;
        display: flex;
        gap: 4px;
        align-items: center;
        margin-top: 10px;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    
            
            
            .topnav .search-container {
              float: right;
            }
            
            .topnav input[type=text] {
                padding: 6px;
                margin-top: 8px;
                font-size: 17px;
                margin-bottom: 8px;
            }
            
            .topnav .search-container button {
              float: right;
              padding: 6px 10px;
              margin-top: 8px;
              margin-right: 16px;
              background: #ddd;
              font-size: 17px;
              border: none;
              cursor: pointer;
            }
            
            .topnav .search-container button:hover {
              background: #ccc;
            }
            
        

            .topnav span {
                background: var(--main-bg-color);
                padding: 1px 3px 1px 3px;
                /* width: 25px; */
                /* height: 17px; */
                border-radius: 12px;
                display: block;
                font-size: 11px;
                font-weight: 500;
                line-height: 16px;
                color: #FFFFFF;
                font-weight: 500;
                font-size: 11px;
                align-items: center;
                display: flex;
                justify-content: center;
                text-align: center;
            }
        .header-btn .btn-normal span{   
            background: var(--main-bg-color);
            padding: 0px 3px 1px 3px;
            width: 19px;
            height: 16px;
            border-radius: 12px;
            display: block;
            font-size: 11px;
            font-weight: 500;
            line-height: 16px;
            color: #FFFFFF;
            font-weight: 500;
            font-size: 11px;
            }
    

/*search*/

.search {
    width: 100%;
    position: relative;
    display: flex;
  }
  
  .searchTerm {
    width: 100%;
    border: 3px solid #00B4CC;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9DBFAF;
  }
  
  /* .searchTerm:focus{
    color: #00B4CC;
  } */
  
  .searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #00B4CC;
    background: #00B4CC;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
  }
  
  /*Resize the wrap to see the search bar change!*/
  .wrap21{
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


/**/
.searchBar1 {
   /* width: 23%; */
   display: flex;
   flex-direction: row;
   float: right;
   right: 18px;
   position: relative;
   align-items: center;
}
#searchQueryInput1 {
	width: 246px;
    height: 40px;
    outline: none;
    padding: 0 3.5rem 0 1.5rem;
    border: 2px solid #E1E1E1;
    border-radius: 4px;
    background: transparent;
}

#searchQuerySubmit {
    width: 3.5rem;
    height: 3.1rem;
    margin-left: -3.5rem;
    background: none;
    border: none;
    outline: none;
    vertical-align: middle;
}


/*row*/
.frame-1372, .frame-1372 * {
    box-sizing: border-box;
    }

    .frame-1372 {
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        right: 0;
        float: right;
    }

.rows {
   color: var(--material-theme-sys-light-on-surface, #1a1c1e);
   text-align: center;
   font: var(--material-theme-label-large, 500 14px/20px 'Roboto-Medium', sans-serif);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
}

.frame-1371 {
   
     display: flex;
     flex-direction: row;
     gap: 2px;
     align-items: flex-start;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
   }

   .frame-1371 select{
   /* height: 26px;
    font-size: 14px; */
    border-radius: 4px;
    height: 26px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccc;
    width: 54px;
   }
.frame-1322 {
   background: var(--material-theme-sys-light-primary,  var(--main-bg-color));
   border-radius: 4px;
   flex-shrink: 0;
   width: 13px;
    height: 22px;
   
           position: relative;
   
       }

.forward-arrow-small {
   width: 17px;
   height: 17px;
   position: absolute;
   left: calc(50% - -8.5px);
   top: calc(50% - -8px);
   transform: translate(-17px, -17px);
   overflow: visible;
   }

.frame-1320 {
   background: rgba(0, 0, 0, 0.01);
   border-radius: 4px;
   border-style: solid;
   border-color: var(--material-theme-sys-light-on-surface-variant, #42474e);
   border-width: 1px;
   flex-shrink: 0;
   width: 36px;
   height: 22px;
   position: relative;
 }

._9 {
   color: #000000;
   text-align: center;
   font: var(--material-theme-body-medium, 400 14px/20px 'Roboto-Regular', sans-serif);
   position: absolute;
   left: calc(50% - 4px);
   top: calc(50% - 10px);
   display: flex;
   align-items: center;
   justify-content: center
}

.frame-1321 {
   background: var(--material-theme-sys-light-primary,  var(--main-bg-color));
   border-radius: 4px;
   flex-shrink: 0;
   width: 13px;
   height: 22px;
   position: relative;
   
 }

.forward-arrow-small2 {
   width: 17px;
   height: 17px;
   position: absolute;
   left: calc(50% - 8.5px);
   top: calc(50% - 9px);
   overflow: visible;
   }


.table-wrap {
    width: 100%;
    overflow-x: auto;
    padding: 4px;
}

.table-main, td, th {
/*   border: 1px solid #ddd; */
  text-align: left;
  font-size:18px;
  /* text-transform:capitalize; */
}

.table-main thead tr{
	background-color: #ffffff;
    color: #000;
}

.table-main {
  border-collapse: collapse;
  width: 100%;
  /* border-radius: 16px 16px 16px 16px; */
  overflow: hidden;
}
.table-main th{
	color: #72787E;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
	border-bottom: 1px solid #fff;
}

.table-main tbody tr {
border-bottom: 1px solid #e9e9e9;
}
.table-main tbody tr td{
    /* border: 1px solid #e9e9e9; */
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

.table-main th, td {
  /* padding: 15px; */
  padding: 15px 10px 15px;
  white-space: nowrap;
}
.table-main td{

}

.name-one{
	font-size: 14px;
    line-height: 24px;
    font-weight: 400;
	margin: 0;
	margin-bottom: 2px;
    word-break: break-all;
}
.name-two{
	color: #72787E;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    margin: 0;
    margin-bottom: 2px;
    word-break: break-all;
    white-space: normal;
}
.time-one{
	display: flex;
    gap: 8px;
    align-items: center;
    color: #000000;
    font-weight: 400;
    font-size: 12px;
    margin: 0;
    line-height: 16px;
	margin-bottom: 6px;
}
.status-one{
    color: #410002;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #FFDAD6;
    border-radius: 12px;
    border: unset;
    padding: 3px 8px 3px 8px;
    width: auto;
    cursor: unset!important;
}
.status-two{
    cursor: unset!important;
        color: #093040;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        background: #CDF0FE;
        border-radius: 12px;
        border: unset;
        padding: 3px 12px 3px 12px;
    }
    .status-three {
        color: #054F04;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        background: #BEFFC0;
        border-radius: 12px;
        border: unset;
        padding: 3px 12px 3px 12px;
        cursor: unset!important;
    }

    .status-four {
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: var(--main-bg3);
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
    cursor: unset!important;
}


.s-check1 {
    /* Set the dimensions and hide the default checkbox */
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .s-check1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 3px solid #42474E;
    background-color: #fff;
  }

  .s-check1:checked::before {
    background-color: #00A110;
    border-color: #00A110;
    left: -1px;
}

.s-check1::after {
    /* content: "\2713"; */
    content: url(../../assets/images/check-tick.png);
    font-size: 17px;
    position: absolute;
    left: 3px;
    top: -2px;
    color: #ffffff;
    visibility: hidden;
    font-weight: 600;
}

  .s-check1:checked::after {
    /* Show the checkmark when the checkbox is checked */
    visibility: visible;
  }

.table-main tbody tr{
 background: #FFFFFF;
  color: #000;
  font-weight: 500;
  vertical-align: middle;
}
.table-main tbody tr:hover {
    background: rgba(249, 249, 252, 1);
    color: #000;
    font-weight: 500;
}
.hv-main tbody tr:hover {
    background: unset!important;
}

.box-wrap {
    padding: 0px 16px 60px 0px;
}

.box-wrap label{
  font-size: 12px;
  font-weight: 500;
}

.table-heading{
    /* font-size: 16px;
    font-weight: 500!important;
    line-height: 24px;
    color: #000000;
    margin: 0;
    margin-top: 5px;
    margin-bottom: 10px; */

    /* margin-left: 9px;
    font-size: 16px;
    font-weight: 500!important;
    line-height: 24px;
    color: #000;
    margin-bottom: 0; */

    /* font-size: 16px;
    font-weight: 500!important;
    line-height: 24px;
    color: #000;
    margin-bottom: 20px; */

    font-size: 16px;
    font-weight: 500!important;
    line-height: 24px;
    color: #000;
    margin-top: 0px;
    margin-bottom: 0px;

}
#d-f1{
    margin-top: -94px;
    margin-right: 24px;
}


/*-----------MAIN SECTION---------*/

.main-section{
    margin-left: 103px;
    margin-top: 135px;
    overflow-y: auto;
    padding: 15px 21px 25px 21px;
    background: #ffffff;
    min-height: 100vh;
    height: 100vh;
    margin-right: 24px;
    margin-bottom: -189px;     
    /* margin-bottom: -25px; */
    border-radius: 12px 12px 0px 0px;
    padding-bottom: 121px;
    bottom: 0px;
    position: relative;
}

.width-section{

    width: 40%;

}

#m-sec{
    margin-top: 133px;
}

#main-section{
    padding: 0px;
    padding-bottom: 121px;


}

.main-section2 {
    /* margin-left: 103px;
    margin-top: 74px;
    overflow-y: auto;
    padding: 15px 12px 25px 32px;
    background: #FFFFFF;
    min-height: 100%;
    height: auto;
    margin-right: 24px;
    margin-bottom: -54px;
    border-radius: 12px 12px 12px 11px;
    padding-bottom: 22px; */

    margin-left: 103px;
    margin-top: 74px;
    overflow-y: auto;
    /* padding: 15px 21px 25px 21px; */
    padding: 15px 12px 25px 32px;
    background: #FFFFFF;
    min-height: 100%;
    /* height: 100vh!important; */
    margin-right: 24px;
    margin-bottom: -54px;
    border-radius: 12px 12px 12px 11px;
    padding-bottom: 22px;
    padding-bottom: 46px;

}
.user-section{
    padding: 15px 21px 25px 21px;
    justify-content: center;
    display: flex;

}
.sec-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-left: 11px; */
}
.sec-head .btn12{
    background: var(--main-bg2);
    width: 125px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: unset;
}


.sec-head .btn12:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.sec-head .btn12:active{
    box-shadow: unset;
    }

.sec-head .btn22{
    background:  var(--main-bg-color);
    width: 92px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: unset;
    color: #fff;
}

.sec-head .btn22:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}

.sec-head .btn22:active{
    box-shadow: unset;
    }


.sec-head span{
   gap: 8px;
   display: flex;
}
.sec-para{
    /* color: #72787E;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding-top: 14px;
    margin-bottom: 6px; */
    /* color: var(--label-bord);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding-top: 9px;
    margin-bottom: 15px;
    margin-left: 9px; */

    color: var(--label-bord);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding-top: 0px;
  margin-bottom: 15px;
}



.sec-head2 {
    display: flex;
    justify-content: right;
    align-items: center;
}
.sec-head2 .btn12{
    background: var(--main-bg2);
    width: 125px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: unset;
    align-items: center;
    display: grid;
}


.sec-head2 .btn12:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.sec-head2 .btn12:active{
    box-shadow: unset;
    }

    .sec-head2 .btn22 {
        background: var(--main-bg-color);
        width: auto;
        height: 40px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        border: unset;
        color: #fff!important;
        align-items: center;
        display: grid;
        padding: 10px 24px;
        margin-right: 8px;
    }

.sec-head2 .btn22:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}

.sec-head2 .btn22:active{
    box-shadow: unset;
    }


.sec-head2 span{
   gap: 8px;
   display: flex;
}
/*float button*/

.float1{
    text-decoration: none;
    font-weight: 500;
    position: fixed;
    /* width: 56px; */
    height: 56px;
    bottom: 40px;
    right: 114px;
    background-color: var(--main-bg3);
    color: #FFF;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    padding: 16px 20px 16px 16px;
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--main-bg4);
    align-items: center;
    z-index: 9999;

}
.float1 img{
    padding: 4px;
}

.float1:hover{
    /* background: rgb(49, 17, 29, 0.08); */
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);   
    text-decoration: unset!important;
    color: var(--main-bg4);
}

.float1:focus{
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);

}


.float{
    justify-content: center;
	position:fixed;
	width:56px;
	height:56px;
	bottom:40px;
	right:40px;
	background-color:var(--main-bg3);
	color:#FFF;
    border-radius: 16px;
	text-align:center;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    display: grid;
    align-items: center;
    z-index: 9999;
}


#float1{
    right: 67px;
}
/* .my-float{
	margin-top:22px;
} */

.float:hover{
    /* background: rgb(49, 17, 29, 0.08); */
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);   
}

.float:focus{
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);

}
.icon-move{
  border-radius: 8px;
    padding: 8px;
}
.icon-move:hover{
    border-radius: 8px;
    background: #F0F0F4;
    padding: 8px;
}


/* Newwwwwwwww */
.complete-btn{
    cursor: unset!important;
    color: #0C3D00;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #55E232;
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
}
.inprogress-btn{
    cursor: unset!important;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #FFD600;
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
}
.start-btn{
    cursor: unset!important;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #DEE3EB;
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
}


/*Quote*/

.time-row{
    border: unset;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
}

.new-content a{
	color: #000000;
    padding: 7px 7px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;

		}

	.new-content:hover a:hover{
		background: #F9F9FC;	
		padding: 7px 7px;
		border-radius: 8px 8px 8px 8px;
		}
	
        .new-content {
            text-align: left;
            display: none;
            position: absolute;
            min-width: 160px;
            bottom: 223px;
            z-index: 999;
            background: #FFFFFF;
            border: 1px solid rgba(0,0,0,.05);
            box-shadow: 0 8px 16px #00000024;
            border-radius: 7px;
            line-height: 5px;
            padding: 8px 2px;
            width: 199px;
            text-decoration: none!important;
            height: 90px;
            right: 77px;
            background-color: #AECED3;
        }
	
	.pop-over:hover .new-content {
		display: block;
	}


/*User */

.user-in {
    border-radius: 4px;
    border: 1px solid #EBEBEB;
    background: rgba(255, 255, 255, 0.60);
    border-bottom: 2px solid #42474E;
    outline: unset;
    height: 34px;
    font-size: 14px;
    padding: 4px;
}

.user-in:focus{
    box-shadow: unset;
    border-color: unset;
}
.user-form label{ 
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    margin-bottom: 2px;
    height: 33px;
    vertical-align: middle;
    align-items: center;
    display: flex;
    /* justify-content: center; */
    gap: 18px;
    margin-top: 1px;
}

::placeholder {
    color: #42474E!important;
    font-size: 14px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: 20px!important;
  }


.sec-two{
    /* display: grid;
    justify-content: space-between;
    grid-template-columns: 50% 50%; */

    display: grid;
    justify-content: space-between;
    grid-template-columns: 50% 50%;
    margin-left: 13px;
    margin-right: 13px;
}


  .first-s{
    width: 100%;
    height: 80%;
  }

  .user-form .form-group {
    margin-bottom: 12px;
    margin-top: 6px;
}

/* .ht-1{
    height: 0px;
} */

.box-m{
    margin-right: -5px;
    background: #F0F0F4;
    width: 47%;
    border-radius: 8px;
    margin-left: 15px;
    margin-bottom: 4px;
}

.proceed-btn{
    float: right;
    background: rgba(28, 27, 31, 0.12);
    border: unset;
    /* width: 100px; */
    padding: 10px 24px 10px 24px;
    height: 40px;
    border-radius: 8px;
    color: #1C1B1F1F;
    font-weight: 500;
    font-size: 14px;
}


.ph-call {
    background: var(--main-bg2);
      color: #000;
      border: unset;
      border-radius: 2px;
      outline: unset;
      margin: 5px -40px 0px 0px;
      z-index: 9;
      width: 37px;
      height: 25px;
  }
  
    #userin{
      padding-left: 43px;
    }

/*map section */

#map-note{
    
}
#map-sec{

}
.column11{
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 14px 16px 14px 16px;
    /* height: 100vh; */
    word-break: break-all;
}
.column22{
    padding-right: 0px;
}
.map-d1{
    width: 100%;
    height: 100%;
    border: 0px;
    min-height: 100vh;
    border-radius: 8px;
}

.map-sec1{
    margin-left: 108px;
    margin-top: 83px;
}
.job-form11 label {
    color: #72787E;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0px;
}

.job-form11 p {
    background: unset;
    border: 0;
    box-shadow: none;
    padding: 0px 0px 0px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}
.job-form11 h6 {
    background: unset;
    border: 0;
    box-shadow: none;
    padding: 0px 0px 0px;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.time-one2 img{
    width: 15px;
    height: auto;
}


.msg-chat {
    position: relative;
    width: 10rem;
    background: #000;
    color: #fff;
    padding: 9px;
    border-radius: 22px;
    margin-bottom: 10px; /* Adjust as needed */
}

.arrows {
    border: solid transparent;
    content: " ";
    position: absolute;
    border-width: 11px;
    margin-left: 6px;
    border-bottom-color: transparent;
    transform: rotate(20deg);
    top: 69px;
    border-top-color: #000000;
    border-right-color: #000000;
    right: 31px;
}
.name-t2{
    word-break: break-all;

font-size: 14px!important;
line-height: 20px!important;
font-weight: 500!important;
margin: 0!important;
margin-bottom: 2px!important;
}
.name-t3 {
    font-size: 11px!important;
    line-height: 16px!important;
    font-weight: 500!important;
    margin: 0!important;
    margin-bottom: 2px!important;
}

.bg-one{
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 14px 16px 14px 16px;
    overflow-y: auto;
    /* height: 100vh; */
    height: auto;
}


.search11 {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
    width: 100%;
    border: 1px solid rgba(225, 225, 225, 1);
    border-right: none;
    padding: 10px 16px 10px 16px;
    height: 42px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: rgba(0, 0, 0, 0.56);
    font-size: 14px;
    line-height: 20px;
}

.searchButton {
width: 40px;
    height: 42px;
    border: 1px solid rgba(225, 225, 225, 1);
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
    border-left: 1px solid transparent;
    background: transparent;
    align-items: center;
    display: flex;
}
.section-d1{
    background: #fff;
    border-radius: 12px 12px 12px 12px;
    margin-left: 92px;
    margin-top: 31px;
    overflow-y: auto;
    padding: 15px 21px 25px 21px;
    min-height: unset;
    height: unset;
    margin-right: 25px;
    padding-bottom: 121px;
    bottom: 0px;
    position: relative;
}

/*Resize the wrap to see the search bar change!*/
.wrap11{
    margin-bottom: 0px;
    /* width: 30%; */
    position: relative;
    margin-top: 83px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.top-nav1 a.active{
    padding: 8px 11px 8px 11px;
    width: 141px;
    height: 36px;
    background: #004B73;
    border-radius: 8px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border: unset;
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.top-nav1 a{
    float: left;
    color: black;
    text-align: center;
    text-decoration: none;
    height: 36px;
    background: #00649714;
    border-radius: 8px;
    padding: 8px 11px 8px 11px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border: unset;
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 10px;
    margin-right: 8px;
    margin-bottom: 10px;
    width: 85px;
}
.km-2 label {
    color: rgba(26, 28, 30, 1);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0px;
}
.select-box-2 select {
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #000;
    background: #FFF;
    width: 100%;
    height: 43px;
    margin-bottom: -3px;
    outline: unset;
    font-size: 14px;
}
.content2 {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: 363px;
    margin: 5px 0px;
}

.content2 h2{
    margin: 0px 0px;
}
.bg-section{
    background: #F0F0F4;
    padding: 7.5px 12px 7.5px 12px;
    border-radius: 8px;
    margin: 7px 0px 0px;
}

.bg-section h4{
    color: #000000;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 5px 0px;
}
.bg-section h6{
    color: #000000;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin: 5px 0px;
}
.bg-section p{
    color: #000000;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}


  .head-b{
    color: rgba(0, 100, 151, 1);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    margin-bottom: 6px;
  }
  .form-group1{
    margin-bottom: 6px;
  }
.drag-box label{
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}
.drag-box h6{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0px;
}

.drag-box2{
    text-align: right;
}

.drag-box2 label{
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}
.drag-box2 h6{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0px;
}


.format-pick{
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: 60px 239px;
    margin-bottom: 13px;
    margin-top: 13px;
    border-radius: 8px;
    padding: 9px;

}


.format-pick:hover{
box-shadow: 0px 8px 16px 0px #00000024;
}

.format-p{
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: 60px 239px;
    margin-bottom: 13px;
    margin-top: 13px;
    border-radius: 8px;
    background: rgba(237, 220, 255, 1);
    padding: 9px;

}
#card1{
    border-left: 5px solid rgba(0, 100, 151, 1);
    border-radius: 16px;
    border-right: 5px solid rgba(0, 100, 151, 1);
    border-top: 1px solid rgba(0, 100, 151, 1);
    border-bottom: 1px solid rgba(0, 100, 151, 1);
}

.format-pick h6{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.format-p h6{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.format-pick p{
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 0px;
}
.format-p p{
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 0px;
}
.format-pick img{
border-radius: 50%;
width: 50px;
height: 50px;
object-fit: cover;
}
.format-p img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    }
.pick-border{
    border-bottom: 1px solid #C2C7CE52;
}



/*------*/
.add-new{
    font-size: 14px;
    font-weight: 500;
    width: 156px;
    padding: 10px 24px 10px 24px;
    border-radius: 8px;
    background: var(--main-bg2);
    justify-content: space-between;
    display: flex;
    gap: 8px;
}
.radio-one p{
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 0px;
}

.box-m2{
        margin-right: -5px;
        background: #F0F0F4;
        border-radius: 8px;
        margin-left: -4px;
        margin-bottom: 4px;
}
.user-b33 {
    background: var(--main-bg3);
    height: 32px;
    border: unset;
    border-radius: 8px;
    padding: 6px 16px 6px 8px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.user-in1 {
        border-radius: 4px;
        border: 1px solid #EBEBEB;
        background: rgba(255, 255, 255, 0.60);
        border-bottom: 2px solid #42474E;
        outline: unset;
        height: 34px;
        font-size: 14px;
        width: 100%;
}
.contain-one{
    width: 34%;
    margin-top: 8px;
}
.btn-month{
    display: flex;
    gap: 7px;
}


.pre-m1{
    display: flex;
    box-shadow: 3px 4px 11.1px -2px rgba(194, 194, 194, 0.50);
    border-radius: 12px;
    background: #FFF;
    padding: 11px 7px 12px 12px;
    height: auto;
    /* align-items: center; */
    gap: 27px;
}
.pre-t21 button {
    background: var(--main-bg2);
    padding: 2px 4px 2px 4px;
    border-radius: 25px;
    border: unset;
    color: #001D31;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.pre-t21 p {
    color: #000000!important;
    font-size: 57px!important;
    font-weight: 400!important;
    line-height: 64px!important;
    margin-bottom: 6px!important;
}
.pre-t21 h5 {
color: #006497;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0px;
    text-align: right;
}
.pre-t21 h6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}
.pre-t2 button {
    background: var(--main-bg3);
    padding: 2px 4px 2px 4px;
    border-radius: 25px;
    border: unset;
    color: var(--main-bg4);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.pre-t2 h5 {
    color: #006497;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 0px;
        text-align: right;
    }
    .pre-t2 h4 {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #000000;
    }
.pre-t2 p {
    color: #000000!important;
    font-size: 57px!important;
    font-weight: 400!important;
    line-height: 64px!important;
    margin-bottom: 0px!important;
    /* border-bottom: 1px solid #E2E2E2!important; */
}
.pre-t2 h6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}
.pre-k1 h6{
font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}
.pre-k1 button{
background: var(--main-bg2);
padding: 2px 4px 2px 4px;
border-radius: 25px;
border: unset;
color: #001D31;
font-size: 12px;
font-weight: 500;
}
.pre-k2 button {
    background: var(--main-bg3);
    padding: 2px 4px 2px 4px;
    border-radius: 25px;
    border: unset;
    color: var(--main-bg4);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.pre-k1 p{
    color: #000;
    font-size: 28px;
    font-weight: 400;
    line-height: 27.5px;
    margin-bottom: 0px;
}

.pre-k1 h4{
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
}
.pre-k2 h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}

.pre-k2 h5 {
    color: #006497;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0px;
    text-align: right;
}
.pre-k2 h6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}
.day-o{
    background: #F0F0F4!important;
    padding: 2px 4px 2px 4px!important;
    border-radius: 2px!important;
    color: #000000;
    font-size: 12px!important;
    font-weight: 500!important;
    line-height: 16px!important;
}

.pre-border{
    border-bottom: 1px solid #DEE3EB;
    margin-top: 5px;
    margin-bottom: 5px;
 }
 .pre-border2 {
    border-bottom: 1px solid #DEE3EB;
    margin-top: 27px;
    margin-bottom: 5px;
}
.p-b1{
    margin-right: 30px;
}

.p-straight {
    justify-content: right;
    display: grid;
    grid-template-columns: 0.09fr 0.01fr 0.13fr 0fr;
}


/*------1-----*/
#select-map{
    background: rgba(237, 220, 255, 1);
    padding: 13px 16px 13px 16px;
    border-radius: 8px;
}
.other-details{
    padding: 13px 16px 13px 16px;
}
/*------2-----*/

/*---*/

/* popup main*/

.overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  .overlay {
    visibility: visible;
    opacity: 1;
}
#popup-pdf {
    margin: 70px auto;
    display: block;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 643px;
    position: relative;
    grid-template-rows: auto 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    z-index: 99999;
}

.popup-img {
    height: 100%;
}
.popup-img img{
    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
  
.content-pdf {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: 428px;
    margin: 5px 0px;
}
.content-pdf  h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
}
  .popup {
    margin: 70px auto;
    display: grid;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 448px;
    position: relative;
    grid-template-rows: 60% 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
  }

  .content1{
    padding: 24px 24px 23px 24px;
    overflow: auto;
    /* height: 351px; */
    min-height: 120px;
    max-height: 351px;
  }
  .content1 h2{
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
  }
  .content1 p{
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  margin-top: 12px;
  margin-bottom: 64px;
  }

.add-serve{
    display: flex;
}

.add-serve img{
    margin: 0px 0px 0px 8px;
    cursor: pointer;
    background: #CCE5FF;
    padding: 5px;
    border-radius: 8px;
}

/* Add new popup*/

.popup-add{
margin: 70px auto;
display: grid;
/* padding: 24px 24px 23px 24px; */
background: #fff;
border-radius: 7px;
width: 448px;
position: relative;
grid-template-rows: 80% 20%;
/* transition: all 1s ease-in-out; */
height: 68%;
box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
}


.content-add{
    padding: 24px 24px 23px 24px;
    overflow: auto;
    overflow-x: hidden;
  }
  .content-add h2{
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
  }
  .content-add p{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .popup-add .content {
    /*max-height: 30%; */
    overflow: auto;
    align-items: center;
    display: flex;
    justify-content: right;
    gap: 8px;
    /* align-items: flex-end; */
    background: rgba(0, 0, 0, 0.06);
    padding: 0px 24px 0px 24px;
    border-radius: 0px 0px 7px 7px;
    /* margin-top: 4px; */

  }


/*popup - success*/
.overlay-s {
    position: fixed;
    bottom: 17px;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    justify-content: center;
}
.overlay-s:target {
    visibility: visible;
    opacity: 1;
}
	.popup-s {
		/* margin: auto 460px; */
    padding: 13px 33px 13px 16px;
    background: #313033;
    border-radius: 7px;
    /* width: 448px; */
    position: relative;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    margin-bottom: 0px;
}

.content-s{
    display: grid;
    grid-template-columns: 15px 368px 7px;
    gap: 12px;
    align-items: center;
}
.content-s p{
	color: #F4EFF4;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
	margin-bottom: 0px;
}
.close-s img{
	margin: 8px;
}
.popup-main{
	width: 100%;
    justify-content: center;
    display: flex;
}
/* success end */






  .popup .content {
    /*max-height: 30%; */
    overflow: hidden;
    align-items: center;
    display: flex;
    justify-content: right;
    gap: 8px;
    /* align-items: flex-end; */
    background: rgba(0, 0, 0, 0.06);
    padding: 0px 24px 0px 24px;
    border-radius: 0px 0px 7px 7px;
    margin-top: 4px;
    height: 59px;

  }
.content{
  text-align: right;
  gap: 8px;
  display: flex;
  justify-content: right;
  margin-top: 13px;
}

  .content .btn-one{
    width: 91px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #C6C6C9;
    outline: unset;
    font-size: 14px;
    font-weight: 500;
    color:  var(--main-bg-color);
    line-height: 20px;
    background: #ffffff;
    padding: 10px 24px 10px 24px;
  }

  .content .btn-one:hover{
  border-radius: 8px;
  border: 1px solid var(--material-theme-sys-dark-on-surface, #C6C6C9);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  }

  .content .btn-one:active{
  border-radius: 8px;
  border: 1px solid var(--material-theme-sys-dark-on-surface, #C6C6C9);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%), #FFF;
  }

  .content .btn-two{
    border: unset;
    background:  var(--main-bg-color);
    /* width: 83px; */
    height: 40px;
    border-radius: 8px;
    color: #FFFFFF!important;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 24px 10px 24px;
    line-height: 20px;
  }
  .content .btn-two:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  }
  .content .btn-two:active{
    box-shadow: unset;
  }


  .content-w p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    color: #72787E;
}
.content-w{
    padding: 24px 24px 23px 24px;
  }
  .content-w h2{
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
    margin-bottom: 12px;
  }


  .radio-btn{
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    gap: 8px;
    margin-top: 12px;
}

.radio-btn2 {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
    margin-top: 12px;
}

.wrapper-two {
    width: 46px;
    height: 24px;
    position: relative;
}

#custom-checkbox1 {
    visibility: hidden;
}

#custom-checkbox-label2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 2px solid #72787E;
    border-radius: calc(calc(var(--checkbox-height) / 2) + 2px);
    transition: background-color var(--animation-speed) linear;
    cursor: pointer;
}

#custom-checkbox-label2:after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-radius: calc(calc(var(--checkbox-height) - 10px) / 2);
    background-color: #72787E;
    top: 1px;
    left: 2px;
    transition: all var(--animation-speed) linear;
}

#custom-checkbox1:checked + #custom-checkbox-label2 {
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}

#custom-checkbox1:checked + #custom-checkbox-label2:after {
    left: 24px;
    background-color: #fff;
}
/* #custom-radio1:checked + #custom-checkbox-label2 {
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}
#custom-radio1:checked + #custom-checkbox-label2:after {
    left: 24px;
    background-color: #fff;
} */

/*check box*/

:root {
  

    --checkbox-width: 150px;
    --checkbox-height: 60px;
    --dot-y-pos: calc(
      calc(var(--checkbox-height) - calc(var(--checkbox-height) - 10px)) / 2
    );
    --dot-x-start-pos: calc(
      calc(var(--checkbox-height) - calc(var(--checkbox-height) - 10px)) / 2
    );
    --dot-x-end-pos: calc(
      var(--checkbox-width) - calc(var(--checkbox-height) - 5px)
    );
    --animation-speed: 0.25s;
  }
  
  .wrapper-one {
      width: 46px;
      height: 24px;
      position: relative;
  }
  #custom-checkbox {
    visibility: hidden;
  }
  #custom-checkbox-label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      border: 2px solid #72787E;
      border-radius: calc(calc(var(--checkbox-height) / 2) + 2px);
      transition: background-color var(--animation-speed) linear;
      cursor: pointer;
  }
  
      #custom-checkbox-label:after {
          content: "";
      position: absolute;
      z-index: 2;
      width: 18px;
      height: 18px;
      border-radius: calc(calc(var(--checkbox-height) - 10px) / 2);
      background-color: #72787E;
      top: 1px;
      left: 2px;
      transition: all var(--animation-speed) linear;
  }
  
  #custom-checkbox:checked + #custom-checkbox-label {
      background-color:  var(--main-bg-color);
      border-color:  var(--main-bg-color);
  }
  #custom-checkbox:checked + #custom-checkbox-label:after {
      left: 24px;
      background-color: #fff;
  }

  /*check box end*/

/*work history*/

#popup-fomat-m {
    margin: 70px auto;
    display: block;
    background: #fff;
    border-radius: 7px;
    width: 970px;
    position: relative;
    grid-template-rows: auto 40%;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    overflow: hidden;
    height: 477px;
}
#content-m1 {
    padding: 12px 24px 12px 24px;
}

.three-one{
	display: flex;
	justify-content: center;
	gap: 14px;
}
.bt-12{
	float: left;
    color: black;
    text-align: center;
    text-decoration: none;
    background: #00649714;
    border-radius: 8px;
    padding: 8px 31px 8px 31px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border: unset;
}
.active1{
    float: left;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    background: #00649714;
    border-radius: 8px;
    padding: 8px 31px 8px 31px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    border: unset;
    background: #004B73;
}
.active1:hover{
	background: rgba(0, 100, 151, 0.12);
    color: rgba(0, 29, 49, 1);
}
.bt-12:hover{
	background: rgba(0, 100, 151, 0.12);
    color: rgba(0, 29, 49, 1);
}
.m-head{
	padding: 15px 33px;
	background: rgba(0, 0, 0, 0.06);
}
.m-head h2{
	font-size: 16px;
    font-weight: 500!important;
    line-height: 24px;
    color: #000;
}
.content11 {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: 262px;
}


/*select box */

.select-box1{
    margin-bottom: 84px;

}

.select-box1 select{
    border-radius: 4px;
    border: 1px solid #000;
    background: #FFF;
    width: 100%;
    height: 31px;
}



/*badge*/

.badge {
    background-color: #ed2324;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    text-align: center;
    padding: 4px 3px 11px 2px;
    position: relative;
    left: 54px;
    top: 3px;
}
.message-count {
    color: #fff;
    font-size: 9px;
    font-weight: 500;
}


.section-m1{
margin-left: 103px;
margin-top: 75px;
overflow-y: auto;
padding: 15px 21px 25px 21px;
background: #ffffff;
min-height: 100%;
height: 100%;
margin-right: 24px;
border-radius: 12px 12px 12px 11px;
padding-bottom: 87px;
}


.service-table{
    width: 100%;
    border-radius: 12px;
    background: rgba(55, 42, 74, 1);

}

.service-table th{
color: rgba(255, 255, 255, 0.48);
font-weight: 500;
font-size: 12px;
}
.service-table th,td{
padding: 8px;
}
.cell-one{
    border: 1px solid rgba(80, 65, 102, 1);
    border-radius: 8px;
    padding: 7px 8px 7px 8px;
    /* color: rgba(255, 255, 255, 1); */
    color: #000;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0px;
}
.cell-two{
    border-radius: 8px;
    padding: 7px 12px 7px 12px;
    background: #fff;
    margin-bottom: 0px;
}
.sbtn-main{
    width: 34px;
}
.s-btn{
    text-align: center;
    border-radius: 8px;
    background: #574474;
    color: #fff;
    margin-bottom: 0px;
    width: 34px;
    height: 34px;
    align-items: center;
    display: grid;
}

.user-select{
    width: 287px;
}
.select-user {
    /* background: #FFFFFF;
    border-radius: 8px;
    width: 514px;
    width: 100%;
    height: 34px;
    padding: 1px 31px 1px 16px;
    outline: unset; */

    background: #FFFFFF;
    border-radius: 8px;
    /* width: 514px; */
    width: 100%;
    height: 34px;
    padding: 1px 31px 1px 16px;
    outline: unset;
    font-size: 14px;
}


.u-width{
    width: 90px;  
    }
.w-td{
    width: 169px
}
.w-p1 {
    width: 132px;
}
.w-in1 {
    width: 108px;
}

.contain-in1 {
margin: 15px 0px 13px;
}

.t-btn{
    font-weight: 500;
    height: 39px;
    text-decoration: unset!important;
    background-color: var(--main-bg3);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    padding: 7px 14px 7px 14px;
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 15px;
    color: var(--main-bg4);
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}


.table-sec{
    width: 100%;
    margin-top: 16px;
}
.table-sec th{
    padding: 7px 0px 7px;
    color: #72787E;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.table-sec td{
        /* border-bottom: 1px solid #E9E9E9;
        padding: 18px 0px 19px;
        color: #000000;
        font-weight: 500;
        font-size: 16px;
        line-height: 16px; */
        border-bottom: 1px solid #E9E9E9;
        padding: 18px 0px 19px;
        color: #000000;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
}
#f-value{
    font-weight: 600;
    line-height: 28px;
    font-size: 22px;
    text-align: right;
    width: 90px;
    padding: 18px 0px 18px;
}
#f-head{
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 18px 0px 18px;

}
.table-btn{
    border-radius: 12px;
    background: var(--main-bg3);
    display: inline-flex;
    height: 26px;
    padding: 3px 12px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--main-bg4);
    text-decoration: unset;
}
.cross-s{
    width: 70px;

}
/* #sec-m1{
    bottom: 101px;
    position: relative;
    margin-top: 120px;
} */

.form-table {
    width: 100%;
}

.form-table td{
   border-bottom: 1px solid #E9E9E9;
}

.calc-value{
    font-weight: 600;
    line-height: 28px;
    font-size: 22px;
    text-align: right;
    width: 152px;
    padding: 10px 16px 1px 14px;
}
#calc-head{
    padding: 0px 19px 0px 18px;
    color: #000000;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.g11{
    margin-bottom: 0px;
    border: unset;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.61);
        background: transparent;
}
.g12{
    text-align: right;
}
.g13{
    font-weight: 600;
    font-size: 22px;
    line-height: 16px;
    color: rgba(0, 0, 0, 1);
    outline: unset;
    border: unset;
    text-align: right;
}

.display-f {
    float: right;
    background: rgba(0, 100, 151, 1);
    border-radius: 8px;
    color: #fff!important;
    border: unset;
    padding: 10px 24px 10px 24px;
    margin-top: 18px!important;
    text-decoration: unset;
    font-size: 14px;
}
.display-f:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
color: #fff;

}
.display-f:active{
    box-shadow: unset;
    color: #fff;
} 

.div-img:hover {
    background: rgba(240, 240, 244, 1);
    border-radius: 8px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    margin: 3px;
}
.div-img {
    height: 40px;
    width: 40px;
    margin: 3px;
    cursor: pointer;
}
tr .bg-click:hover{
    background: rgba(249, 249, 252, 1);
    }
.s-one{
    width: 62px;

}

/* new shift */

.btn-w1{
    width: 14%;
}
.sp-w1{
    width: 35%;
}
.cell-two{
    background: #fff;
}
.mk-1{
    border: unset;
}
.mk-1:focus-visible{
    outline: unset!important;
}
.display-save {
float: right;
background: var(--main-bg2);
border-radius: 8px;
color: #000!important;
border: unset;
padding: 10px 24px 10px 24px;
margin-top: 18px!important;
text-decoration: unset;
font-size: 14px;
font-weight: 500;
}
.service-table th{
padding: 8px 8px 0px;
}


/*Add purchase*/
.in-box{
background: unset;
border: unset;
outline: unset;
}

#u-form{
/* overflow: hidden; */
margin-bottom: 18px;
}
#t-head{

    margin-bottom: 0px;
    margin-top: 0px;
}

#s-table{
    margin-bottom: 20px;

}



/*View purchase*/


.dop{
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 107px 7px 167px;
    margin-bottom: 3px;

}
.dop p, h6{
    margin-bottom: 0px;
    font-size: 14px;
}
.dop p{
font-size:14px;
font-weight:400px;
line-height:20px;
color: #0000;
}

.dop p{
    font-size:14px;
    font-weight:400px;
    color:#42474E;
}
.approve-btn{
background: rgba(219, 255, 220, 1);
    border-radius: 12px;
    padding: 3px 12px 3px 8px;
    color: rgba(0, 83, 3, 1);
    font-weight: 500;
    line-height: 20px;
    font-size: 14px;
    cursor: unset!important;
}

.reject-btn{
background:rgba(255, 218, 214, 1);
border-radius: 12px;
    padding: 3px 12px 3px 8px;
    color: rgba(65, 0, 2, 1);
    font-weight: 500;
    line-height: 20px;
    font-size: 14px;
    cursor: unset!important;
}

.approve-btn2{
    background: rgba(0, 83, 3, 1);
        border-radius: 8px;
        padding: 8px 16px 8px 16px;
        color: rgba(255, 255, 255, 1);
        font-weight: 500;
        line-height: 20px;
        font-size: 14px;
        margin-right: 11px;

    }
    .approve-btn2:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    
    color: rgba(255, 255, 255, 1);
    }
    .approve-btn2:active{
        box-shadow:unset;
    }

    .reject-btn2 {
        background: rgba(255, 218, 214, 1);
        border-radius: 8px;
        padding: 8px 16px 8px 16px;
        color: rgba(65, 0, 2, 1);
        font-weight: 500;
        line-height: 20px;
        font-size: 14px;
        margin-right: 4px; 
    }
        

            .reject-btn2:hover{
                box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
            
                }
                .reject-btn2:active{
                    box-shadow:unset;
                }


/*List purchas*/

.status-pro{
color: rgba(0, 29, 49, 1);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: rgba(204, 229, 255, 1);
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;

}
.c-code{
    color: rgba(0, 0, 0, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.service-in{
    border: 1px solid rgba(235, 235, 235, 1);
    border-radius: 8px;
    width: 100%;
    padding: 7px 12px 7px 12px;
    outline: unset;
}
.btn-w{
    width: 144px;
}


/*user creation - personal info page*/


.edit-text{
    width: 100%;
    border: 1px solid #72787E;
    border-radius: 8px;
    outline: unset;
    padding: 10px 9px 10px 9px;
}
    .wizard .nav-tabs {
        position: relative;
        /* margin: 40px auto; */
        margin-bottom: 0;
        justify-content: center;
        border-bottom: unset;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

    .connecting-line {
        height: 2px;
        position: absolute;
        width: 47%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 0;
        background: rgba(255, 255, 255, 0.50);
    }

    .connecting-line2 {
        height: 2px;
        position: absolute;
        width: 47%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,1) 35%, rgba(255, 255, 255, 0.50) 100%);
    }
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

/* .round-tab .active-one {
    color: #333;
  
} */

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background-color: unset;
   
}

.active-one{
    background: rgba(255, 255, 255, 0.56)!important;
}


span.round-tab {
    width: 36px;
    height: 36px;
    line-height: 24px;
    border-radius: 100px;
    background-color: rgba(3, 60, 118, 1);
    z-index: 2;
    position: absolute;
    left: -1px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    display: grid;
    justify-content: center;
    color: rgba(255, 255, 255, 0.56);
    border: 3px solid rgba(255, 255, 255, 0.56);
    top: -1px;
}
span.round-tab i{
    color:#00ffff;
}


.personal-info{
    padding-left: 19px;
    padding-top: 24px;
}

.personal-info h6{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin-bottom: 11px;
    margin-top: 0px;
}
.personal-info p{
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.85);

}
.img-user {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    display: grid;
    justify-content: center;
    margin-top: -100px;
    z-index: 99;
    background: #fff;
    position: relative; /* Add position relative to .img-user */
  }
  .img-user img {
      width: 100%;
      height: auto;
      cursor: pointer;
    }
    .file-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    .file-label {
      display: block;
      position: relative;
    }


/*Personal document*/
.first-one{
background-color: #ffffff!important;
}

 .f21{
    color: rgba(255, 255, 255, 1)!important;
    border: 3px solid rgba(255, 255, 255, 1)!important;
}
.f22{
color: #001D31!important;
border: 3px solid rgba(255, 255, 255, 1)!important;
font-weight: 700!important;
font-size: 14px!important;
line-height: 24px!important;
background-color: rgb(136 168 184)!important;

}
.upload-btn{
    background: rgba(0, 100, 151, 1);
    border-radius: 8px;
    padding: 7px 24px 7px 16px;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 1)!important;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    gap: 8px;
    align-items: center;
}

.upload-btn:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
color: rgba(255, 255, 255, 1);
text-decoration: unset;
}
.upload-btn:active{
    box-shadow:unset;
}
.user-doc {
    width: 70%;
    margin-top: -74px;
}
.profile-one h6{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0px;
}
.profile-one p{
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
   color: rgba(114, 120, 126, 1);
}
#sec-hm1{
    width: 100%;
    margin-top: 40px;
}

.bottom-b1{

    border-bottom: 1px solid #D9D9D9;
}

.sh12{
    margin-top: 28px;
}

.wizard li.active span.round-tab i{
    color: #5bc0de;
}


.wizard .nav-tabs > li {
    width: 25%;
}


.wizard .nav-tabs > li a {
    width: 36px;
    height: 36px;
    margin: 3px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

.im-main{
    margin-bottom: 28px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 0px;
    padding: 0px 21px 0px 21px;
}
.img-user {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    display: grid;
    justify-content: center;
    margin-top: -100px;
    z-index: 99;
    background: #fff;
    position: relative;
    object-fit: cover;
}

.f-buttons p{
    color: #1A1C1E;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 8px;
}
.user-b1 {
    background: var(--main-bg3);
 /*   height: 32px;*/
    border: unset;
    border-radius: 8px;
    padding: 6px 9px 6px 9px;
    font-weight: 500;
    font-size: 12px;
    line-height: 11px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.user-b2 {
    /*   height: 32px;*/
       border: 1px solid #72787E;
       color: #72787E;
       padding: 6px 9px 6px 9px;
       font-weight: 500;
       font-size: 12px;
       line-height: 20px;
       border-radius: 8px;
  }
  .user-b2 span {
    font-size: 10px;
}

.btns-u{
    display: flex;
    gap: 6px;

}

.rectangle-250,
.rectangle-250 * {
  box-sizing: border-box;
}
.rectangle-250 {
    background-image: url("../../assets/images/user-frame.jpg");
    width: 100%;
    height: 172px;
    position: relative;
}
.select-g1{
    display: grid;
    position: relative;
} 


.select-g1 select{
    height: 34px;
    padding: 6px 12px; 
    border-radius: 4px;
border: 1px solid #000;
font-size: 14px;
background: rgba(255, 255, 255, 0.60);

}

.select-g2{
    bottom: -19px;
}
.bill-one {
    display: grid;
    grid-template-columns: 75% 25%;
    bottom: 174px;
    position: relative;
    margin-top: 174px;
}
.bill-m1{
    margin-left: 0px;
}

/* Personal work detail page*/

#sec-p1{
    margin-top: 28px;
    margin-left: 9px;
}
.g-btn{
    bottom: -20px;
    position: relative;
}
#u-form .d-m1{
    padding-right: 0px;
}
.user-b11{
    background: var(--main-bg3);
    height: 32px;
    border: unset;
    border-radius: 8px;
    padding: 6px 16px 6px 8px;
    font-weight: 500;
    font: 14px;
    line-height: 20px;
    margin-top: 3px;
    /* display: flex;    */
    gap: 8px;
    align-items: center;
    margin-left: 8px;
}
.user-b22 {
    height: 32px;
    border: 1px solid #72787E;
    color: #72787E;
    padding: 6px 16px 6px 16px;
    font-weight: 500;
    font: 14px;
    line-height: 20px;
    border-radius: 8px;
    margin-top: 3px;
    margin-left: 8px;
}
.week-btn{
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 9px 15px 8px 9px;
}
.d-c1{
    align-items: center;
    display: grid;

}


/*privilege*/

.wizard{
width: 624px;
}

.linear-nos{
justify-content: center;
display: flex;
}

.connecting-line3 {
    height: 2px;
    position: absolute;
    width: 74%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,1) 35%, rgba(255, 255, 255, 0.50) 100%);
}

.linear-txt{
    text-align: center;
    padding-top: 41px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, 1);
    width: 90px;
    margin-left: -27px;

}

.s-check0::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 20px;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 100, 151, 1);
    background-color: #fff;
}
.s-check0::after {
    content: "\2713";
    content: url(../img/check.svg);
    font-size: 17px;
    position: absolute;
    left: 0px;
    top: 0px;
    color: #ffffff;
    visibility: hidden;
    font-weight: 600;
}
.s-check0:checked::before {
    background-color: rgba(0, 100, 151, 1);
    border-color: rgba(0, 100, 151, 1);
    left: 23px;
}
.s-check0:checked::after {
    visibility: visible;
}

.in-box{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .in-box p{
    color: rgba(0, 0, 0, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: -3px ;
} */
.m-fm1{
    width: 100%;
    max-width: 873px;

}
#u-sec{
    flex-grow: 1;
}
#sec-h2{
    margin-top: 47px;
}


.in-box {
    display: block;
    margin-bottom: 15px;
}

.in-box input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.in-box label {
    position: relative;
    cursor: pointer;
    color: rgba(0, 0, 0, 1);
    font-weight: 400!important;
    font-size: 14px!important;
    line-height: 20px!important;
    margin-bottom: -3px!important;
}

.in-box label:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 3px solid rgba(0, 100, 151, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 7px; /* Adjust padding to change the checkbox width */
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
  
}

.in-box input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 8px;
    width: 5px;
    height: 11px;
    border: solid rgba(0, 100, 151, 1);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bg-date{
    background: rgba(240, 240, 244, 1);
    padding: 12px;
    border-radius: 12px;
    margin-top: 14px;
}

/* .dropdown .list-view {
    display: flex;
    border: 1px solid #E1E2EC;
    border-radius: 16px;
    padding: 11px 14px 11px 14px;
    height: 45px;
    gap: 9px;
    justify-content: center;
} */
.popup-invoice {
    /* display: none; */
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 0px 0px;
    /* bottom: 59px; */
    bottom: -38px;
    right: 250px;
    margin: 70px auto;
    background: #fff;
    border-radius: 7px;
    width: 168px;
    /* padding-bottom: 8.7rem; */
}

.bt2:hover ~ .popup-invoice {
    display: block;
}
.new-cell a {
    color: #000;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 400;
}


/*User view */

.user-view .img-us{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.column1-1 {
    float: left;
    padding: 10px;
    /* border-bottom: 1px solid #E9E9E9; */
    width: unset;
}
.col21{
    border-bottom: unset!important;
    width: unset!important;
}
.col21 h2{
    font-weight: 400!important;
    font-size: 28px!important;
    line-height: 36px!important;
    color: #000000!important;
    margin-bottom: 0px;
}

.col21 h5{
color: #42474E!important;
font-weight: 400!important;
font-size: 16px!important;
line-height: 24px!important;
}
.col21 p{
color: #42474E!important;
font-weight: 400!important;
font-size: 14px!important;
line-height: 20px!important;
margin-bottom: 5px;
}
.us-date{
    display: flex;
    align-items: center;
    gap: 4px;

}
.col21 button{
    background: #D4E4F6;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    border: unset;
    border-radius: 4px;
    margin-bottom: 6px;
}
.para1{
    font-weight: 500!important;
    font-size: 14px!important;
    line-height: 20px!important;
    color: #72787E!important;
}
.c-m1{
    width: unset!important;
    border-bottom: unset!important;
    border-left: 1px solid rgba(0, 0, 0, 0.14);
}
.doc-name{
    width: 165px;
}
.r-img img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
}
.doc-name1{
    width: 92px;

}
.login-info{
    display: grid;
    grid-template-columns: 211px 21px 138px;
    align-items: center;
    margin-bottom: 12px;
}
.log-detail {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #393030;
}
.log-in{
    color: #72787E;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.log-in2{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}




/*Inspection note view*/
.column-main {
    float: left;
    width: 33.33%;
    padding: 10px;
    
  }
.column1 {
    float: left;
    width: 33.33%;
    padding: 10px;
    border-bottom:1px solid #E9E9E9;
    
  }
  .column-main h2{
    color:#72787E;
    font-size:12px;
    font-weight:500;
    line-height:16px;
  }
  .column1 p{
    color:#000000;
    font-size:16px;
    font-weight:400;
    line-height:24px;
  }
.row-ins{
    margin-bottom: 20px;

}
.rw1{
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#sec-s1{
    bottom: 101px;
    position: relative;
    margin-top: 170px;
}

.note-1 {
    color: #72787E;
    font-size: 12px;
    font-weight: 500;
    margin-top: 12px;
}
.ins-input {
    border: 1px solid #C2C7CE;
    height: 200px;
    padding: 7px;
}

.btn-prev{
    background: #ffffff;
    width: 125px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color:  var(--main-bg-color);
    align-items: center;
    display: grid;
    border: 1px solid #C6C6C9;
    margin-top: -88px;
}
.btn-prev:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.btn-prev:active{
    box-shadow: unset;
    }

.btn-create{
    background:  var(--main-bg-color);
    width: auto;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: unset;
    color: #fff!important;
    align-items: center;
    display: grid;
    padding: 10px 24px;
    margin-top: -88px;
    margin-right: 22px;
}
.btn-create:hover{
    color: #fff;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.btn-create:active{
    color: #fff;
box-shadow: unset;
}

.no-m{
    display: grid;
}

.no-m p{
    color: #8C9198;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.no-space{
    padding: 5px;
    border-radius: 12px;
    background: var(--material-theme-sys-light-surface, #F9F9FC);
}


/*inspection note popup*/

.popup-insp {
    background: #fff;
    border-radius: 7px;
    width: 955px;
    position: relative;
    height: 496px;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    overflow: auto;
    padding: 17px 17px 35px 37px;
}

.text-edit{
    width: 100%;
    height: auto;
    border: 1px solid #dadada;
    height: 80px;
    outline: unset;
}
.close-ic {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}


/*Select format*/

.table-h1{
    font-size: 14px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: 20px!important;
    margin: 0!important;
    margin-top: 12px!important;
    color: #000000!important;

}
.format-one{
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 19px 305px 64px;
    margin-bottom: 13px;
}
.format-one p{
    margin-bottom: 0px;
    margin-top: 0px;
}

    .text-no{
        height: 40px;
        border-radius: 6px;
        border: 1px solid var(--material-theme-sys-dark-outline-variant, #42474E);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), #FFF;
        text-align: center;
        padding: 8px;
        font-size: 14px;
    }    
.m-right {
    margin-right: 7px;
}

.m-left {
    padding: 7px 23px;
}
#sec-one{
    margin-bottom: 12px;
}

#popup-fomat {
    margin: 70px auto;
    display: block;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 448px;
    position: relative;
    grid-template-rows: auto 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    overflow: auto;
    height: 443px;

}
#content-p1{
    padding: 24px 24px 24px 24px;

}
.format-form{
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    padding-top: 16px;
}

.format-main{
    margin: 12px 0px 0px 0px;
}
.format-check{
    margin: 15px 0px 15px 0px;
}
.format-check label{
    color: #000000E4;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: -2px;
    line-height: 20px;
    top: -1px;
    position: relative;
    margin-left: 11px;
}
#format-m1{
    bottom: 109px;
    position: relative;
    margin-top: 146px;
}

   
/*Job details*/

.job-form p{
background: unset;
border: 0;
box-shadow: none;
padding: 0px 0px 0px;
color: #000000;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-bottom: 0px;
}
.job-form span{
    margin-bottom: 0px;
    color: #42474E;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    cursor: pointer;
    margin-top: 8px;
}
.job-form label{
    color: #72787E;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0px;
}
.n-al{
   color: #C2C7CE!important;
}

.pre-l {
    justify-content: right;
    text-align: left;
    display: grid;
    grid-template-columns: 459px;
    margin-bottom: 10px;
}

.d-t{
    display: flex;
    justify-content: right;
    gap: 8px;
}
.pre-t{
    border-radius: 12px;
    background: #FFF;
    box-shadow: 3px 4px 11.1px -2px rgba(194, 194, 194, 0.50);
    padding: 11px 7px 12px 12px;
    height: auto;
}

.pre-t p{
    color: #000000!important;
    font-size: 57px!important;
    font-weight: 400!important;
    line-height: 64px!important;
    margin-bottom: 0px!important;
    border-bottom: 1px solid #E2E2E2;
}
.pre-t h5{
    color: #000;
    font-size: 28px;
    font-weight: 400;
    line-height: 27.5px;
    margin-bottom: 0px;

}
.pre-t h6{

    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;

}
.pre-t button{
    background: var(--main-bg2);
    padding: 2px 4px 2px 4px;
    border-radius: 25px;
    border: unset;
    color: #001D31;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.pre-t1{
    border-radius: 12px;
    background: #FFF;
    box-shadow: 3px 4px 11.1px -2px rgba(194, 194, 194, 0.50);
    padding: 11px 7px 12px 12px;
    height: auto;
}

.pre-t1 button{
    background: var(--main-bg3);
    padding: 2px 4px 2px 4px;
    border-radius: 25px;
    border: unset;
    color: var(--main-bg4);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.pre-t1 p {
    color: #000000!important;
    font-size: 57px!important;
    font-weight: 400!important;
    line-height: 64px!important;
    margin-bottom: 0px!important;
    border-bottom: 1px solid #E2E2E2;
}
.pre-t1 h5 {
    color: #000;
    font-size: 28px;
    font-weight: 400;
    line-height: 27.5px;
    margin-bottom: 0px;
}
.pre-t1 h6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
}



	.grid-container {
    display: grid;
    grid-template-columns: auto 108px!important;
    padding: 10px 0px 10px 10px;
    align-items: center;
}
.grid-item {
    padding: 8px;
    font-size: 14px;
    text-align: right;
    color: #878787;
    font-weight: 400;
    line-height: 20px;
}
.grid-item1{
    padding: 8px;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#sec-m1 {
    bottom: 101px;
    position: relative;
    margin-top: 18px;
}

/* #sec-id{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 100px;
} */
.ic-p1{
    display: flex;
    gap: 8px;
    color: #001D31;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #ffffff;
    border-radius: 8px;
    align-items: center;
}
.ic-p1:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.ic-p1:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}

#sec-btns{
    margin-right: 54px;
    background: transparent;
    padding: 0;
    bottom: 100px;
    position: relative;
    margin-top: 17px;
    overflow: hidden;
}
.s-btns{
    display: flex;
    gap: 6px;
}
.s-btns2 {
    /* display: flex;
    gap: 6px;
    height: 39px;
    justify-content: right; */
    /* display: flex;
    gap: 6px;
    height: 39px;
    justify-content: right;
    margin-top: 18px; */

    display: flex;
    gap: 6px;
    height: 39px;
    justify-content: right;
    margin-top: 18px;
    padding-right: 16px!important;
}

.s-btns2 .bt1 {
    color: #ffffff!important;
    background: var(--main-bg-color);
    border-radius: 8px;
    padding: 10px 24px 10px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    align-items: center;
    /* display: grid; */
    margin: 1px 2px;
}
.bt1:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.s-btns2 .bt2 {
    background: var(--main-bg2);
    border-radius: 8px;
    padding: 10px 24px 10px 24px;
    color: #001D31!important;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    align-items: center;
    /* display: grid; */
    margin: 1px 2px;
}
.bt2:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}
.rate-1{
    display: flex;
    gap: 19px;
}

.n-two{
    color: #1A1C1E;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    margin: 0;
    margin-bottom: 2px;
    word-break: break-all;
    white-space: normal;
    }
    .n-box{
        display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    }
    .n-box input{
        border: 1px solid #E1E1E1;
    border-radius: 4px;
    padding: 8px 7px 8px 14px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    }
    .n-box input:focus-visible{
        outline: unset !important;
    }
    .n-box label{
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 0px;
    }
    .n-b1{
        display: flex;
    align-items: center;
    gap: 10px;
    }



.star {
    position: relative;
    transform: translate(-24%, 23%);
}
  .star > * {
    float: right;
  }
  .star label {
    height: 24px;
    width: 24px;
    position: relative;
    cursor: pointer;
    padding: 0px 14px;
  }
  .star label:nth-of-type(5):after {
    animation-delay: 0.5s;
  }
  .star label:nth-of-type(4):after {
    animation-delay: 0.4s;
  }
  .star label:nth-of-type(3):after {
    animation-delay: 0.3s;
  }
  .star label:nth-of-type(2):after {
    animation-delay: 0.2s;
  }
  .star label:nth-of-type(1):after {
    animation-delay: 0.1s;
  }
  .star label:after {
    transition: all 1s ease-out;
    position: absolute;
    content: "☆";
    color: orange;
    font-size: 32px;
}
  .star input {
    display: none;
  }
  .star input:checked + label:after,
  .star input:checked ~ label:after {
    content: "★";
    color: gold;
    /* text-shadow: 0 0 10px gold; */
  }

  #popup-job1{
    margin: 70px auto;
    display: block;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 448px;
    position: relative;
    grid-template-rows: auto 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    /* overflow: auto;
    height: 373px; */
  }


  .rate-one {
    gap: 10px;
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 50px 305px;
    /* margin-bottom: 13px; */
}

.rate-one img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.rate-one h6{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    margin-top: 13px;
}
.rate-one p{
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #42474E;
    margin-bottom: 0px;
    margin-top: 6px;
}

.border-b1{
    border-bottom: 1px solid #D9D9D9;
}

.last-list{
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
    padding-left: 17px;
}


 .rate {
    float: left;
    height: 46px;
    /* padding: 0 10px; */
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 27px;
    color: #ccc;
    margin-top: -5px;
    margin-left: -3px;
    margin-bottom: 0px;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
} 


/*---*/

.popup-in {
    margin: 70px auto;
    display: grid;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    /* width: 741px; */
    position: relative;
    grid-template-rows: 80% 20%;
    /* transition: all 1s ease-in-out; */
    height: 68%;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
}
.popup-in .content {
    /* max-height: 30%; */
    overflow: auto;
    align-items: center;
    display: flex;
    justify-content: right;
    gap: 8px;
    /* align-items: flex-end; */
    background: rgba(0, 0, 0, 0.06);
    padding: 16px 24px 31px 24px;
    border-radius: 0px 0px 7px 7px;
    margin-top: -10px;
    height: 105px!important;
    overflow: hidden;
}
.login-info-in {
    display: grid;
    grid-template-columns: 115px 21px 246px;
    align-items: center;
    margin-bottom: 8px;
    align-items: flex-start;

}
.side-box label{
    color: rgba(73, 73, 73, 0.9);
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 0px;
    padding: 0px;
}

.select-box-2 select {
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 1);
    background: #FFF;
    width: 100%;
    height: 31px;
    margin-bottom: -3px;
}
.grid-invoice {
    border-radius: 6px;
    border: 1px solid var(--material-theme-sys-dark-outline-variant, #42474E);
    /* width: 105px; */
    height: 35px;
    outline: unset;
    padding: 6px;
}
.grid-item-in {
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    grid-template-columns: 90px 74px;
    display: grid;
    align-items: center;
    gap: 10px;
}
.w-date{
    width: 139px;
}

select {
    padding: 0px 6px 0px;
  -moz-appearance: none!important;
  -webkit-appearance: none!important;
  appearance: none!important;
  background-image: url('../../assets/images/downSolid.png')!important;
    background-repeat: no-repeat, repeat!important;
    background-position: right .7em top 50%, 0 0!important;
    background-size: .65em auto, 100%!important;
}

/* For IE (thanks to @SaiManoj) */
select::-ms-expand {
  display: none;
}


 /*Add equipments*/
 .sec-eq {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 72% 30%;
} 
.img-one{
    display: flex;
}
.img11 {
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 8px;
    margin: 4px 4px 9px 5px;
    justify-content: center;
    display: grid;
    grid-template-rows: 70% 22%;
    height: 150px;
    gap: 8px;
}
.head-m1{
    display: grid;
    margin: 3px 4px 0px 9px;
}
.u-one{
    height: 93px;
    overflow: hidden;
    text-align: center;
    align-items: center;
    display: grid;
    justify-content: center;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    border-radius: 8px;
}
.grid-container2 {
    display: grid;
    grid-template-columns: auto 80px!important;
    padding: 10px 10px 10px 10px;
    border: 1px solid #DEE3EB;
    float: right;
    border-radius: 8px;
    grid-template-rows: 30px 30px 22px 32px!important;
    margin-top: 17px;
}
.r-c1{
    margin-bottom: 0;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.btn-m1{
    width: 90px;
    border: unset;
    padding: 10px 24px 10px 24px;
    background: #006497;
    border-radius: 8px;
    color: #ffff!important;
    font-weight: 500;
    float: right;
    font-size: 14px;
}
.btn-m1:hover{
    color: #ffff;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
}

.border-m3{
    margin-right: -12px;
    border-bottom: 1px solid #DEE3EB;
    padding-bottom: 0px;
    margin-left: -12px;
}


#c-f1{
margin-top: 16px;
width: 108px;
}


/*Worl lead*/

.format-two {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: 25px 62px 68px;
    margin-bottom: 13px;
}
.format-two p {
    margin-bottom: 0px;
    margin-top: 0px;
}
.format-two img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}
#popup-fomat-1 {
    margin: 70px auto;
    display: block;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 448px;
    position: relative;
    grid-template-rows: auto 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    overflow: auto;
    height: 401px;
}

/*hover*/
.new-content1 {
    text-align: left;
display: none; /* Hide by default */
position: absolute;
min-width: 160px;
bottom: 143px;
z-index: 999;
left: 113px;
background: #D4E4F6;
border: 1px solid rgba(0, 0, 0, .05);
box-shadow: 0 8px 16px #00000024;
border-radius: 7px;
line-height: 13px;
padding: 8px 12px;
width: 199px;
text-decoration: none!important;
height: auto;
color: #000;
}

.myDIV:hover + .new-content1,
.new-content1:hover {
display: block!important;
}

.myDIV:hover + .new-content1 a,
.new-content1:hover a {
display: block!important;
}

.new-content1 ul{
margin-bottom: 0px;
list-style: none;
padding-left: 0px;
}

.new-content1 ul li{

padding: 3px 4px 3px;
line-height: 23px;

}
.new-content1 ul li:hover {
padding: 3px 4px 3px;
line-height: 23px;
background: #004B73;
border-radius: 5px;
color: #fff;
}
/**/

.content-m {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: auto;
}


/**/


/**/

.e-img{
margin: 0px -3px 2px 3px;
}


/*vehicle loop*/

.form-r1 {
    padding: 8px 0px 8px 0px;
    margin-bottom: 20px;
    display: inline-flex;
    gap: 9px;
    background: #F1F1F1;
    border-radius: 4px;
    width: 100%;
}
.vehicle-img {
    /* height: 199px; */
    border-radius: 2px;
    margin-right: 5px;

    height: auto;
    max-width: 100%;
  
   
}
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    /* display: inline-block; */
}
.vehicle-loop {
    width: 84px;
    height: 104px;
    margin-left: 13px;
    object-fit: cover;

}
.upload-btn-wrapper input[type=file]{
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    top: -30px;
    position: relative;
    left: -5px;
    width: 25px;
    height: auto;
    background: #fff;
    border-radius: 4px;
}
.img_wrp{
    display: inline-block;
    position: relative;
    width: 28%;
    aspect-ratio: 1;
    flex: 0 1 84px;
}

#m-select{
    margin-top: 7px;
}


/*vehicle loop end*/


/*Bill of job creation*/

#sec-mm1 {
    bottom: 101px;
    position: relative;
    margin-top: 175px;
}

.select-is{
    margin-top: -7px;
    padding: 0px;
}

.grid-container-demo {

    grid-template-columns: auto 92px!important;

}
.grid-in{
    border-radius: 6px;
    border: 1px solid var(--material-theme-sys-dark-outline-variant, #42474E);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), #FFF;
    width: 70px;
    height: 40px;
    outline: unset;
    padding: 6px;
    text-align: right;
}


.grid-in1{
    padding: 3px 0px 3px;
}
.grid-in1 input{
text-align: right;
}
.gridin-txt{
    padding-right: 7px;
}

#txt-p{
    display: flex;
    align-items: center;
    gap: 2px;
}
.no-effect{
    transform: translate(0%, 35%);
    justify-content: center;
    display: grid;
    vertical-align: middle;
    margin-bottom: 177px;
}

.no-effect p{
    text-align: center;
    color: #7B7B7B;
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
}
.add-n{
    float: right;
    background: var(--main-bg2);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #001D31;
    border-radius: 8px;
    padding: 7px 21px 7px 21px;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    border: unset;
    text-decoration: none!important;
}
.add-n:hover{
    box-shadow: 0px 1px 3px 1px #00000026 , 0px 1px 2px 0px #0000004D;

}

#add-n1{

    margin-bottom: 47px;

}


/*Vehicle list*/


.search-vehicle{
    width: 100%;
    justify-content: center;
    display: flex;
}
#top-n{
    display: flex;
}
.search-q{
    width: 501px!important;
}

.v-img{
    width: 66px;
}
.v-img img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.v-img1{
    width: 66px;
    display: flex;
    justify-content: right;
    float: right;
    gap: 12px;
}


/*user listing*/
.w-white{
width: 166px;
white-space: normal;
}


/*Vehicle detail view*/

.login-info11 {
    display: grid;
    grid-template-columns: 143px 21px 138px;
    align-items: center;
    margin-bottom: 12px;

}

.login-info22 {
    display: grid;
    grid-template-columns: 221px 21px 138px;
    align-items: center;
    margin-bottom: 12px;
}
.dem{
    margin-top: 0px;

}
.vi-1{
    background: #4E4162;
    border-radius: 0px 0px 8px 0px;
    margin-right: -10px;
    padding-right: 17px;
    color: #fff;
    margin-bottom: -10px;
    align-items: center;
    display: grid;
    font-weight: 500;
}
.vi-2{
    background: #4E4162;
    border-radius: 0px 0px 0px 8px;
    margin-left: -10px;
    color: #fff;
    margin-bottom: -10px;
    align-items: center;
    display: grid;
}
.log-doc{
        color: var(--material-theme-sys-dark-outline-variant, #42474E);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
}
.gt1{
    color:#464646;
}
.h-m1{
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: #000000;

}
.btn-own{
    background: #D4E4F6;
    color: #000000;
    border: unset;
    font-weight: 500;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.car-m1 {
    border-radius: 12px;
    height: 295px;
    width: 295px;
    object-fit: cover;
}
.image-loop {
    display: grid;
    /* gap: 3px; */
    background: #DEE3EB;
    border-radius: 12px;
    padding: 3px;
    align-items: self-start;
    grid-template-rows: 52px 52px 52px 52px;
    margin-bottom: 7px;
}
.image-loop img{
    width: 46px;
    height: 46px;
    object-fit: cover;

}
.mn1{
    padding-top: 0px;
    border-bottom: unset;
}
.gn1{
    margin-bottom: 0.5rem;
}
.active-m1{
    border: 2px solid #006497;
    padding: 1px;
}

.loop-h{
    display: flex;
}

/*Equipment */

.login-info22 {
    display: grid;
    grid-template-columns: 246px 21px 138px;
    align-items: center;
    margin-bottom: 12px;
}

/*Consumables details */

.consume-detail{
    margin-top: 16px;
}
#c-content{
        height: 307px;
}
.login-info33 {
    display: grid;
    grid-template-columns: 172px 21px 138px;
    align-items: center;
    margin-bottom: 12px;
}


                                                                   
/*Leave list*/

.status-leave {
    color: #054F04;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #BEFFC0;
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
    cursor: unset;
}
.status-partially {
    color: #6B0909;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background: #FFC5AC;
    border-radius: 12px;
    border: unset;
    padding: 3px 12px 3px 12px;
}

.content-m1 {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: auto;
}

.content-m1 h2{
font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 0px;
}
.table-h2 {
    font-size: 12px!important;
    font-style: normal!important;
    font-weight: 500!important;
    line-height: 16px!important;
    margin: 0!important;
    margin-top: 12px!important;
    color: #72787E!important;
}
.format-three{
        display: grid;
        justify-content: left;
        align-items: center;
        grid-template-columns: 60px 239px;
        margin-bottom: 13px;
}

.format-three img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.name-t{
    font-size: 14px!important;
    line-height: 20px!important;
    font-weight: 400!important;
    margin: 0!important;
    margin-bottom: 2px!important;
}

.job-form1 label {
    color: #72787E;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0px;
}
.job-form1.job-form p {
    background: unset;
    border: 0;
    box-shadow: none;
    padding: 0px 0px 0px;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 0px;
} 

#popup-fomat-2 {
    margin: 70px auto;
    display: block;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 448px;
    position: relative;
    grid-template-rows: auto 40%;
    /* transition: all 1s ease-in-out; */
    /* height: 196px; */
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    overflow: hidden;
    /* height: 401px; */
}
.gm1 p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    margin-top: 0px!important;
    margin-bottom: 22px!important;
}
.km1{
margin-top: 12px;
}
.km1 label{
    color: #494949;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
.select-box-l select {
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #000;
    background: #FFF;
    width: 100%;
    height: 31px;
    margin-bottom: -3px;
    font-size: 14px;
}

/*leave -no date*/

#reas{
    width: 100%;
    height: 67px;
}

.cal-1{
  margin: 17px 0px 27px;
 text-align: center;
}
.us-1{
    display: flex;
    gap: 9px;
    margin: 2px 0px 20px;
}


/*View bill of package*/

.view-b{
margin-bottom: 0px;
color: #000000;
font-size: 28px;
font-weight: 400;
line-height: 36px;
margin-top: 0px;
}

.name-t1{
    font-weight: 500;
    line-height: 20px;
}
.name-t2{
    font-weight: 600;
    font-size: 22px;
}


  .no-img{
    text-align: center;
  }
.no-img p{
    color: #7B7B7B;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
}

/*---*/
.b-bottom{
border-bottom: 1px solid #000000!important;

}


.bottom-button{
margin-top: -106px!important;
    overflow-y: auto;
    padding: unset;
    padding-bottom: 111px;
}




/*add bill of package*/

#sec-m12 {
    bottom: 101px;
    position: relative;
    margin-top: 177px;
}

.w-no{
    width: 113px;
}
.pf-d{
    justify-content: right;
    display: flex;
    gap: 0px;
    /* border-bottom: 1px solid #ccc; */
    margin-top: 11px;
    align-items: center;
}

/* Schedule single day*/

.f-m1 {
    width: 292px;
    height: 44px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 12px;
    border: 1px solid #E1E1E1;
}
.f-m2 {
    all: unset;
    /* font: 16px system-ui; */
    /* height: 40px; */
    width: 292px;
    padding: 6px 10px;
    border-radius: 4px;
    /* border: 1px solid #E1E1E1; */
    background: #FFF;
    color: rgba(0, 0, 0, 0.56);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}


#add-n2{
padding: 7px 16px 7px 8px;

}
.sch-btn {
    background: #fff;
    /* width: 92px; */
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: 1px solid #72787E;
    color: #72787E;
    padding: 6px 16px 6px 16px;
    text-decoration: unset!important;
    align-items: center;
    display: flex;
    gap: 9px;
}

.sch-user {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: center;
}
.clo-time-single{
    display: flex;
    justify-content: right;
    display: flex;
    background: var(--main-bg3);
    border-radius: 0px 58px 58px 0px;
    padding: 5px 6px 5px 6px;
}
.f-m1{
    text-align: left;

}
.month-bg{
    background: #F9F9FC;
}
.month-check{
    border-right: 2px dashed #DEE3EB!important;
}

.clo-time2{
    display: flex;
    justify-content: space-between;
    display: flex;
    background: var(--main-bg2);
    border-radius: 58px;
    padding: 5px 6px 5px 6px;
}
.clo-time3{
    display: flex;
    justify-content: space-between;
    display: flex;
    background: var(--main-bg3);
    border-radius: 58px 0px 0px 58px;
    padding: 5px 6px 5px 6px;
}
td.b-right{
    border-right: 2px dashed #66587A80!important;
}
.clo-time-single p{
    color: #001D31;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.clo-time2 p{
    color: #001D31;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.clo-time3 p{
    color: #001D31;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.h-sch{
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 7px;
    margin-top: 4px; 
    margin-left: 16px;
}
.h-sch span{
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; 
}
.h-sch2{
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 7px;
    margin-top: 4px; 
    text-align: right;
    margin-right: 16px;
}
.h-sch2 span{
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px; 
}
#prev-nxt td{
    vertical-align: top;
}
.bg-h{
    background: #EDDCFF40;
}
.p-f1{
    padding-right: 0px;
}
#up-1{
    padding-right: 0px;
}
#up-2{
    padding-right: 0px;
}
.mf-1{
    margin-right: 16px;
}
.pw-11{
    margin: 6px 20px 0px 20px;
}
#pw-1{

    background: var(--main-bg3);
}
#sm-1{
    text-align: center;
}
#cl-n{
    background: rgba(237, 220, 255, 0.40);
}

#cl-n p{
    color: var(--main-bg4);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.content1-1 {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    height: 256px;
}
.content1-1 h2{
font-size: 22px;
font-weight: 500;
line-height: 28px;
margin: 0;
}

.content1-1 p{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    margin-top: 12px;
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.90);
}

/* .select-check{
    /* background: rgba(222, 227, 235, 1); 
    border-radius: 12px 12px 0px 0px;
    width: 50px;
} */

.select-schedule {
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-schedule:checked::before {
    background-color: #00A110;
    border-color: #00A110;
    left: -1px;
}
.select-schedule::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    border: 3px solid #42474E;
    background-color: #fff;
}
.select-schedule::after {
    /* content: "\2713"; */
    content: url(../../assets/images/check-tick.png);
    font-size: 17px;
    position: absolute;
    left: 3px;
    top: -2px;
    color: #FFFFFF;
    visibility: hidden;
    font-weight: 600;
}
.s-width{
    width: 38px;
}

/*Schedule multiple day*/

.view-btn{
    background: rgba(102, 88, 122, 1);
    padding: 8px 16px 8px 16px;
    display: flex;
    width: 153px;
    gap: 8px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.view-btn:hover{
    color: #fff;
}
.view-btn:active{
    color: #fff;
    background: rgba(86, 58, 122, 1);
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: unset;
}
.btn-div{
    display: grid;
    text-align: right;
    justify-content: right;
    margin-bottom: 18px;
}
.p122{
color: #42474E;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 2px 0px;
}


.check-popup{
display: grid;
justify-content: center;
text-align: center;
align-items: flex-end;
}

       /* Style for the popup container */
       .popup-container {
        display: none;
      position: absolute;
      padding: 10px;
      right: 0;
      margin: 0px auto;
      z-index: 9;
      }
  
      /* Style for the button that triggers the popup */
      .popup-button {
        cursor: pointer;
      padding: 1px;
      background-color: #E18700;
      color: #fff;
      border: none;
      }
  .p12{
    border: 2px solid #E18700;
  }
      /* Style for the anchor link when it is targeted (clicked) */
      .popup-container:target {
        display: block;
      }
      #popup-fomat1 {
      text-align: left;
      margin: 0px auto;
      top: 12px;
      position: absolute;
      z-index: 999;
  
      }

.lead-one {
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    color: #ffffff;
    border-radius: 30px;
    padding: 2px 4px 2px 4px;
    margin: 0px 7px;
    background: var(--Card-gradiant, linear-gradient(106deg, #006497 0.87%, #009197 117.46%));
}
 .t-align{
    vertical-align: top;
 }

 .pop-arrow {
    bottom: -7px;
    margin-bottom: -19px;
    background: #E18700;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    position: relative;
    color: #fff;
    border-radius: 6px 6px 0px 0px;
    display: flex;
    justify-content: center;
    padding: 0px;
    width: 50px;
    text-align: center;
}
.pop-arrow:hover {
    color: #fff;
    text-decoration: unset;
}

.w-align{
    width: 50px;
}


/*popup*/

.form-d1{
    display: flex;
    justify-content: space-between;
}
.content1-2 {
    padding: 24px 24px 23px 24px;
    overflow: auto;
    /* height: 448px; */
    height: 373px;
} 

.content1-2 h6{
    color: rgba(0, 0, 0, 0.30);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
}

.fa-sharp {
    color: #efef0b;
    font-size: 19px
}
.cust-star{
    font-weight: 100;
    color: rgba(0, 0, 0, 1);
}
.log-rate{
    color: #72787E;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.log-r2{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;

}
.btn-temp{
    background: var(--main-bg2);
    width: 125px;
    height: 33px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: unset;
    align-items: center;
    display: grid;
}
.btn-temp:hover{
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.status-f{
color: #0D1D2A;
font-size: 14px;
font-weight: 500;
line-height: 20px;
background: #D4E4F6;
border-radius: 8px;
border: unset;
padding: 10px 16px 10px 16px;
width: auto;

}
.status-f:hover{
box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;
}

.status-fd{
font-size: 14px;
font-weight: 500;
line-height: 20px;
border-radius: 8px;
border: unset;
padding: 10px 16px 10px 16px;
width: auto;
color: rgba(28, 27, 31, .38);
background: rgba(28, 27, 31, 0.12);
cursor: not-allowed!important;
}
#t-main{
    margin-top: 9px;
}
#t-main tbody tr {
    border-bottom: 1px solid #C2C7CE;
}

.login-rate {
    display: grid;
    grid-template-columns: 143px 22px auto;
    align-items: baseline;
    margin-bottom: 12px;
}
.feed-img{
    background: #D4E4F6;
    border-radius: 8px;
    padding: 8px 11px 8px 11px;
}
.f-width1{
    width: 70px;
}
.f-width{
    width: 61px;
}
.b-rate{
    border-bottom: 1px solid #C2C7CE;
}
.user-text{
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(114, 120, 126, 1);
    outline: unset;
    height: 190px!important;
    font-size: 14px;
}
.edit-ic1{
    cursor:pointer;
    padding: 8px;
    }

    .edit-ic1:hover {
        background: #F0F0F4;
        padding: 8px;
        border-radius: 8px;
    }
    .imgdel{
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
    }
    
.imgdel:hover{
    background: #F0F0F4;
    padding: 8px;
    border-radius: 8px;
}

 .time-one2{
        display: flex;
        gap: 8px;
        align-items: center;
        color: #000000;
        font-weight: 400;
        font-size: 12px;
        margin: 0;
        line-height: 16px;
        margin-bottom: 6px;
        justify-content: flex-end;

 }

.job-f{
    text-align: right;
}
.p-up{
    overflow: hidden!important;
}
    
 .s-check2 {
    /* Set the dimensions and hide the default checkbox */
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .s-check2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 3px solid #00A307;
    background-color: #fff;
  }

  .s-check2:checked::before {
    background-color: #00A110; 
    border-color: #00A110; 
  }

  .s-check2::after {
    /* content: "\2713"; */
    content: url('../../assets/images/check-tick.png');
    font-size: 17px;
    position: absolute;
    left: 3px;
    top: -4px;
    color: #ffffff;
    visibility: hidden;
    font-weight: 600;
  }

  .s-check2:checked::after {
    /* Show the checkmark when the checkbox is checked */
    visibility: visible;
  }


  .w-zero {
    width: 0%;
}

/*payment*/

.three-btn {
    display: flex;
    gap: 5px;
    padding: 0px 4px 0px;
    justify-content: left;
}
.pay-btn {
    font-weight: 500;
    height: 39px;
    text-decoration: unset!important;
    background-color: var(--main-bg3);
    border-radius: 8px;
    text-align: center;
    padding: 6px 16px 6px 8px;
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--main-bg4);
    align-items: center;
    gap: 8px;
    justify-content: center;
    /* width: 118px; */
    border: 1px solid var(--main-bg3);
}
.in-g1{
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.60);
    outline: unset;
    height: 34px;
    font-size: 14px;
}
.u-m1{
    border-right: unset;
}
.text-t1{
    border-radius: 4px;
    border: 1px solid #EBEBEB;
    background: rgba(255, 255, 255, 0.60);
    border-bottom: 2px solid #42474E;
    outline: unset;
    height: 34px;
    font-size: 14px;
    padding-right: 8px;
    margin-left: -3px;
}
.user-in:focus + .text-t1 {
        border: 1px solid #0c0c0c;
        border-bottom: 2px solid #42474E;
        transition: none;
    }

    .logoAgency{
        width: 54px;
        height: 54px;
    }

/*Work deployment status*/
#top-se {
    gap: 17px;
    display: flex;
    justify-content: right;
    align-items: center;
}
#searchQuerydate {
    margin-left: 10px;
    width: 201px;
    height: 40px;
    outline: none;
    padding: 0 3.5rem 0 1.5rem;
    border: 2px solid #E1E1E1;
    border-radius: 4px;
    background: transparent;
}
.name-sta{
    color: #000000;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 2px;
}
.name-p1 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 2px;
}
.d-align {
    width: 61px;
    border-left: 1px solid #0000001A;
    border-right: 1px solid #0000001A;
    text-align: left;
    color: rgba(0, 0, 0, 1)!important;
}
#t-main{
    border-radius: 0px;
}

.label-one h6{
color: #221534;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}
.label-one p{
    margin: 1px 0px;
    color: #404040;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}
.label-two{
    text-align: right;
}
.label-two p{
font-size: 11px;
    font-weight: 500;
   color: rgba(34, 21, 52, 1);
   margin-bottom: 0px;
}
.label-two span{
    font-size: 11px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.48)
    
    }
    .lab-detail {
        background: rgba(237, 220, 255, 1);
        border-radius: 12px;
        padding: 4px 9px;
        width: 157px;
    }

/*main sec*/

.main-sec1{
    display: flex;
    align-items: center;
    gap: 141px;
    justify-content: space-between;
}
.main-s1{
    display: flex;
    gap: 50px;
}
.main-time{
    display: flex;
    gap: 20px;
}

.w-m1{
    width: 50px;
}

  /*View allocation*/

  .two-btn{
  display: flex;
  gap: 5px;
  padding: 0px 4px 0px;
  justify-content: center;
}
.move-btn{
    background: #221534;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff!important;
    text-decoration: unset;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
}
.move-btn:hover{
box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;
}
.w-large{
    width: 22%;
}
.w-l1{
width: 20%;
}
.w-medium{
width: 11%;
}
.w-small{
    width: 9%;
}

.lr-b1 {
    position: relative;
}

.lr-b1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.11);
}

.lr-b1 {
    border-right: 1px solid rgba(0, 0, 0, 0.11)!important;
    border-right: 1px solid rgba(0, 0, 0, 0.11)!important;
}
.t-m1 th, td {
    white-space: unset;
}
.name-two1{
    color: rgba(66, 71, 78, 1);
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
}


/*orange*/
.s-check3 {
    /* Set the dimensions and hide the default checkbox */
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-left: 16px!important;
  }

  .s-check3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 3px solid #E18700;
    background-color: #fff;
  }

  .s-check3:checked::before {
    background-color: #E18700; 
    border-color: #E18700; 
  }

  .s-check3::after {
    /* content: "\2713"; */
    content: url('../../assets/images/check-tick.png');
    font-size: 17px;
    position: absolute;
    left: 3px;
    top: -4px;
    color: #ffffff;
    visibility: hidden;
    font-weight: 600;
  }

  .s-check3:checked::after {
    /* Show the checkmark when the checkbox is checked */
    visibility: visible;
  }


.c-r{
    margin-top: -8px;

}
/*cross-radio*/
.s-cross {
    /* Set the dimensions and hide the default checkbox */
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .s-cross::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    width: 18px;
    height: 18px;
    border: 3px solid #E18700;
    background-color: #fff;
  }

  .s-cross:checked::before {
    background-color: #BA1A1A;
    border-color: #BA1A1A;
  }

  .s-cross::after {
    /* content: "\2713"; */
    content: url('../../assets/images/radio-cross.png');
    font-size: 17px;
    position: absolute;
    left: 3px;
    top: -4px;
    color: #ffffff;
    visibility: hidden;
    font-weight: 600;
  }

  .s-cross:checked::after {
    visibility: visible;
  }
.select-work{
  display: flex;
  align-items: center;
  gap: 29px;
  justify-content: space-between;
}

.select-work select {
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #000;
    background: #FFF;
    width: 100%;
    height: 31px;
    margin-bottom: 6px;

    outline: unset;
}
.work-head{
    display: flex;
    justify-content: space-between;
}

.work-head label{
    color: rgba(73, 73, 73, 0.9);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.log-work{
        color: rgba(114, 120, 126, 1);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
}
.login-info {
    display: grid;
    grid-template-columns: 184px 21px 246px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
}

.log-in2{
    margin-top: 9px;

}


.new-pop {
    text-align: left;
    display: none;
    position: absolute;
    min-width: 160px;
    bottom: 51px;
    z-index: 1;
    margin-left: -128px;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 8px 16px #00000024;
    border-radius: 7px;
    right: 42px;
    padding: 7px 7px;
    font-weight: 400;
    font-size: 16px;
}

.dropup:hover .new-pop {
    display: block;
}

td.le-show:hover {
    border: 1px solid red;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/*popup invoice*/

.popup-invoice1 {
    margin: 70px auto;
    display: grid;
    /* padding: 24px 24px 23px 24px; */
    background: #fff;
    border-radius: 7px;
    width: 606px;
    position: relative;
    grid-template-rows: 80% 20%;
    /* transition: all 1s ease-in-out; */
    height: 66%;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    min-height: 451px;
}
.popup-invoice1 .content {
    /* max-height: 30%; */
    overflow: auto;
    align-items: center;
    display: flex;
    justify-content: right;
    gap: 8px;
    /* align-items: flex-end; */
    background: rgba(0, 0, 0, 0.06);
    padding: 16px 24px 31px 24px;
    border-radius: 0px 0px 7px 7px;
    margin-top: -10px;
    height: 100px;
    overflow: hidden;
}
.name-a1{
    color: #006497;
    font-size: 12px;
    font-weight: 500;
    text-decoration: unset!important;
}
.head-invoice{
    background: #EDEEF1!important;
    border-radius: 4px 4px 4px 4px!important;
}
.head-invoice th{

color: #1A1C1E!important;
font-weight: 500;
font-size:12px
}
#t-p1{
    border-radius: 4px!important;
    margin-top: 11px;
}
#popup-in1{
    width: 727px;
}

/*Report*/
.table-report {
    border-collapse: collapse;
     width: 100%; 
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;
}
.table-report tbody tr td {
    border: unset;
    border-right: 1px solid rgba(222, 227, 235, 1);
    border-left: 1px solid rgba(222, 227, 235, 1);
    border-top: 1px solid rgba(222, 227, 235, 1);
    border-bottom: 1px solid rgba(222, 227, 235, 1);
}
.table-report td:hover{
background: rgba(249, 249, 252, 1);
}


.report-sec{
    display: flex;
    justify-content: space-between;
    padding: 8px 24px 8px 16px;
    align-items: center;
}

.name-r {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
    margin-bottom: 2px;
}
.content2 h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
}
#c-content2 {
    height: auto;
    max-height: 322px;
    min-height: 220px;
}
.three-btns {
    display: flex;
    gap: 8px;
    padding: 0px 4px 0px;
    justify-content: left;
    margin-top: 9px;
    margin-left: -5px;
}

.content2 p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    margin-top: 19px;
    margin-bottom: 0px;
}
#c-content21 {
    height: auto;
}
.p-h1{
    margin-top: 8px!important;
}

.lab-1{
    margin-top: 8px;
    margin-bottom: 4px;
    color: #6b6b6b;
}

    /* scroll design */
    
    ::-webkit-scrollbar {
      width: 3px;
    }
    ::-webkit-scrollbar-thumb {
      background: rgb(196, 231, 238);
      border-radius: 5px;
    
    }
    
    ::-webkit-scrollbar:hover {
        width: 3px!important;
       display: none;
    }

    /* main content in box container */
    .main {
        display: flex;
        flex-flow: row wrap;
    }
    .widget {
        flex-basis: 300px;
        flex-grow: 10;
        height: 400px;
        margin: 15px;
        border-radius: 6px;
        background-color: #ffffff;
        position: relative;
        z-index: 9999;
    }
    .widget .title {
        background-color: #eef1f7;
        border-bottom: 1px solid #dfe4ec;
        padding: 10px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        color: #617085;
        font-weight: 600;
    }
    
 /*footer*/
  .footer-main{
    color: #42474E;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    right: 29px;
    left: 27px;
    /* bottom: 24px; */
    font-family: 'Yesteryear', cursive;

    padding: 5px 0px 5px 0px;
    bottom: 0px;
    background: #FFFFFF;
    position: fixed;
    margin-left: 82px;
    z-index: 9998;
 }
  
 .footer-main span{
 font-weight: 500;
 font-size: 16px;
 line-height: 24px; 
 font-family: 'Roboto', cursive;
 margin-left: 6px;
 }
 .footer-main img{
 height: auto;
 width: 14%;
}


/* SGMS NEW STYLESSSSSSSSSSSSSS */

.worker-form label {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    vertical-align: middle;
    margin-top: 1px;
}

.worker-form input {
    border-radius: 4px;
    border: 1px solid #E1E1E1;
    background: rgba(255, 255, 255, 0.60);
    outline: unset;
    height: 34px;
    font-size: 14px;
    padding: 4px;
}

.add-mail{
    display: flex;
    gap: 23px;
}
.add-mail button{
   width: 190px;
   padding: 0px 14px 0px;
   border: unset;
   background: #CCE5FF;
   border-radius: 8px;
   color: #001D31;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
}
.main-in select{
    border: 1px solid #000000;
    border-radius: 4px;
    background: #ffffff;
    height: 34px;
    width: 100%;
    padding: 2px 24px 2px 6px;
    appearance: none!important;
    background-image: url(../images/CaretDownSolid8.png)!important;
    background-repeat: no-repeat, repeat!important;
    background-position: right 0.7em top 50%, 0 0!important;
    background-size: 0.65em auto, 100%!important;
    font-size: 14px;
}
.input-with-unit {
    display: flex;
    align-items: center;
    position: relative;
}

.input-unit {
    position: absolute;
    right: 10px;
    color: #555;
}

.form-control:focus {
    border-color: unset;
    box-shadow: unset;
}
.select-shift {
    background: #FFFFFF;
    border-radius: 8px;
    /* width: 514px; */
    width: 100%;
    height: 34px;
    padding: 1px 10px 1px 10px;
    outline: unset;
    border: unset;
}
.shift-table h6{
    color: #000000;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.shift-table p{
    color: #000000;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
}
.shift-table span{
    color: #72787E;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
}
.user-form .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 6px;
    padding-right: 6px;
}
.grand-total{
    color: #000000;
    font-weight: 600;
    font-size: 22px;
    line-height: 16px;
}


.facility{
    margin: -8px 0px 38px;
}

.facility table{
    border: 1px solid #E2E2E5;
    border-radius: 3px;
}
.facility td{
    padding: 8px 8px 8px 0px;
}

    /*scheduling date*/

    .se-date{
    display: flex;
    gap: 14px
    }
    .s-date{
        gap: 6px;
    display: flex;
    align-items: center;
}
.s-date label{
    margin-bottom: 0px;
}
.s-date input{
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    padding: 8px 14px 8px 14px;
    font-size: 14px;
}
    
.s-date input:focus-visible{
    outline: unset;
}
.shift-sec{
    display: grid;
    gap: 16px;
}

.shift-btn{
    background: #EDEEF1;
    display: flex;
    border-radius: 8px;
    padding: 8px 6px 8px 10px;
    align-items: center;
    justify-content: space-between;
}
.shift-btn p{
    color: #006497;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0px;
}
.shift-btn button{
        border: unset;
        font-weight: 500;
        text-decoration: unset!important;
        background-color: #FFFFFF;
        border-radius: 6px;
        text-align: center;
        padding: 5px 24px 5px 24px;
        display: flex;
        font-size: 14px;
        line-height: 15px;
        color: #006497;
        align-items: center;
        gap: 8px;
        justify-content: center;
}
.shift-final{
    text-align: right;
    padding: 10px 0px;
}
.spcl-p1{
    color: #000000E4;
    font-weight: 400!important;
    font-size: 14px!important;
    line-height: 20px!important;
    margin-bottom: 13px!important;
}
.sf1{
    margin: 0px 0px;
}
.sf1 label{
    font-weight: 500;
    font-size: 12px;
    color: #1A1C1E;
}

.select-check {
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-check::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 3px solid #42474E;
    background-color: #fff;
}
.select-check::after {
   /* content: "\2713"; */
   content: url(../images/check-tick.png);
   font-size: 17px;
   position: absolute;
   left: 3px;
   top: -3px;
   color: #FFFFFF;
   /* visibility: hidden; */
   font-weight: 600;
   z-index: 1;
}
.select-check:checked::before {
    background-color: #00A110;
    border-color: #00A110;
    left: -1px;
}

/* add staff */
#content-sch {
    padding: 24px 24px 24px 24px;
    margin-top: -5px;
    height: 80px;
}
.staff-add h2{
    font-size: 22px;
    margin-bottom: 5px;
}
#searchQuery-Input {
    width: 96%;
    height: 40px;
    outline: none;
    padding: 0 3.5rem 0 1.5rem;
    border: 2px solid #E1E1E1;
    border-radius: 4px;
    background: transparent;
    margin-left: -6px;
}
.staff-list{
    margin: 22px -22px 0px 0px;
    overflow-y: auto;
    height: 300px;
}
.ext-content{
    margin-top: 22px;
}
.content-sf{
        padding: 24px 24px 23px 24px;
}
.fixed-sec h2{
    font-size: 22px;
}
.three-line h6{
    color: #000000;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.three-line p{
    color: #42474E;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 0px;
}
.reliever{
    background: #FFCFC5;
    padding: 0px 5px 0px 5px;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    border: unset;
    border-radius: 27px;
}
.active-staff{
    background: #A6E8AD;
    padding: 0px 5px 0px 5px;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    border: unset;
    border-radius: 27px;
}

/*-------------*/

.format-two {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: 25px 62px auto;
    margin-bottom: 13px;
}


.format-one{
    display: flex !important;
        justify-content: space-between;
        gap: 8px;
    }
    #format-1{
        padding: 5px 24px 5px 24px;
    }
    .format-one span{
        color: #006497;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }
    #format-1:hover{
        background: #F0F0F4;
        padding: 5px 24px 5px 24px;
        border-radius: 6px;
    }
    
    .schedule-list{
        display: flex;
        justify-content: space-between;
        gap: 61px;
        width: auto;
        margin-bottom: 17px;
    }
    .schedule-list h6{
        color: #000000;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        width: 232px;
        margin-bottom: 6px;
    }
    .schedule-list p{
        color: #49454E;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }
    .schedule-list img:hover{
        box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;
        border-radius: 50%;
    }
    
    #format-1 {
        position: relative;
        display: block;
    }
    
    .popup-h {
        /* opacity: 0;
        visibility: hidden; */
        position: absolute;
        top: 33px;
        left: -22%;
        transform: translateX(-50%);
        background-color: white;
        border: 1px solid #ccc;
        padding: 17px 16px 17px 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        border: 2px solid #DEE3EB;
        border-radius: 19px;
    
        overflow-y: auto;
        max-height: 214px;
        overflow-x: hidden;
    }
    
    #format-1:hover .popup-h {
        opacity: 1;
        visibility: visible;
    }
    
    .view-b1{
        border-bottom: 1px solid #DEE3EB;
        margin: 0px -16px 17px -16px;
    }
    

/*schedule-weekly view */

.top-header {
    position: fixed;
    /* height: 56px; */
    left: 0px;
    right: 0;
    border-bottom: 1px solid #e4e4e4;
    background-color: #fff;
    padding: 0px 28px 0px 105px;
    top: 20px;
    z-index: 2;
    width: 100%;
    overflow: auto;
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
}
.second-header{
    margin-top: 132px;
}
.week-month{
    display: flex;
}
.week-month p{
    margin-bottom: 0px;
    padding: 14px 31px 14px 31px;
    color: #72787E;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.week-month  .active{
     border-bottom: 3px solid #006497;
     color: #1D1B20;
}
#table-s1 td{
    border-bottom: unset;
}
.staff-detail {
    display: grid;
    justify-content: left;
    align-items: center;
    grid-template-columns: 50px auto;
    gap: 18px;
}
.staff-detail img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}
#table-s1 p{
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #72787E;
    margin-bottom: 0px;
}
#table-s1 h6{
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: #1A1C1E;
    margin-bottom: 0px;
}

.upload-view {
    background: rgba(0, 100, 151, 1);
    border-radius: 8px;
    padding: 7px 24px 7px 16px;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 1)!important;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    gap: 8px!important;
    align-items: center;
    border: unset;
    height: 33px !important;
}
.upload-view img {
    vertical-align: middle;
    margin-right: 5px;
}
.upload-sec {
    display: flex;
    gap: 5px;
}
#fileInput {
    display: none;
}
.active-staff {
    background: #A6E8AD;
    padding: 0px 8px 0px 8px;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    border: unset;
    border-radius: 27px;
}

/*--monthly--*/
.arrow-button {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}
.light-blue {
background: #CCE5FF;
padding: 10px 24px 10px 24px;
border: unset;
font-weight: 500;
font-size: 14px;
line-height: 20px;
border-radius: 8px;
}
.light-blue:hover {
    box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;
    
}

/*----*/



/*Media query*/

@media(max-width:1000px){

    .sec-two {
        display: grid;
        justify-content: space-between;
        grid-template-columns: unset;
    }
.main-section {
   /* position: absolute;
    top: 3px;
    left: 5px;
    z-index: -1; */
    margin-top: 79px;

}
.box-wrap {
    padding: 12px 16px 37px 0px;
}
}

@media(max-width:991px){

    .select-g1 {
        bottom: unset;
    }
    .user-doc {
        width: 70%;
        margin-top: -28px;
    }
    .dropup-content {
        margin-left: 67px;
    }
    .dm-1 {
        margin-left: unset;
        width: unset;
    }
}

@media(max-width:820px){
#txt-p {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grid-item {
    padding: 8px;
    font-size: 12px;
    text-align: right;
    color: #878787;
    font-weight: 400;
    line-height: 18px;
}

.grid-container-demo {
    grid-template-columns: auto 52px!important;
}
}
@media(max-width:800px){
    .width-section{
        width: 100%;
    }
}

/* set element styles for desktop */
@media screen and (min-width: 800px) {
    .side-nav {
        width: 80px;
    }
    .side-nav ul li span:nth-child(2) {
        display: inline-block;
    }
    .side-nav ul li i {
        font-size: 16px;
    }
    .side-nav ul li a {
        text-align: center;
    }
    .side-nav .logo i {
        padding-left: 0;
    }
    .side-nav .logo span {
        display: inline-block;
    }
    .main-content {
        margin-left: 200px;
    }
}

@media(max-width:768px){

    .dropup-content {
        margin-left: 67px;
    }

.im-main {
    margin-bottom: 28px;
    margin-top: 16px;
    display: grid;
    align-items: self-end;
    gap: 29px;
    padding: 0px 21px 0px 21px;
    justify-content: center;
}
.rectangle-250 {
    background-image: url(../../assets/images/user-frame.jpg);
    width: 100%;
    height: 255px;
    position: relative;
    background-repeat: no-repeat;
}
.user-doc {
    width: 70%;
    margin-top: -17px;
}
.img-name{
justify-content: center;
    display: grid;
}
.form-row {
    display: block; 
}

.img_wrp {
    margin-bottom: 20px; 
}

.width-section {
    width: unset;
}
.dm-1 {
    margin-left: unset;
    width: unset;
}
}
@media (max-width: 600px){
.main-section {
    /* position: absolute;
    top: 245px;
    left: -68px;
    z-index: -1; */
    margin-top: 73px;
    margin-left: 17px;
}
.search-q {
    width: 318px!important;
}

}

@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }

    
}

@media(max-width:400px){
    .section-m1 {
        margin-left: 16px;
        margin-top: 45px;
        overflow-y: auto;
        padding: 15px 21px 25px 21px;
        background: #FAFAFA;
        min-height: 100%;
        height: 100%;
        margin-right: 11px;
        border-radius: 12px 12px 12px 11px;
        padding-bottom: 22px;
    }

    .btns-u {
        display: grid;
        gap: 6px;
    }
    .im-main {
        margin-bottom: 28px;
        margin-top: 16px;
        display: grid;
        align-items: self-end;
        gap: 29px;
        padding: 0px 21px 0px 21px;
        justify-content: center;
    }
    .rectangle-250 {
        background-image: url(../../assets/images/user-frame.jpg);
        width: 100%;
        height: 255px;
        position: relative;
        background-repeat: no-repeat;
    }

    .main-section {
        margin-top: 76px;
        margin-left: 17px;
    }

    #main-header {
        position: fixed;
        height: 56px;
        top: 0;
        left: 0px;
        right: 0;
        /* box-shadow: 0 1px 0 #f1f1f1; */
        border-bottom: 1px solid #e4e4e4;
        background-color: #fff;
        z-index: 999;
        padding: 0px 24px 0px 59px;
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    #main-header p {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin: -1px 5px 1px 5px;
    }
    .popup {
        width: 343px;
    }

    .popup-add {
        width: 343px;
    }

    .main-section2 {
        margin-left: 15px;
        margin-top: 74px;
        overflow-y: auto;
        padding: 15px 21px 25px 21px;
        background: #FFFFFF;
        min-height: 100%;
        height: 100%;
        margin-right: 11px;
        margin-bottom: -25px;
        border-radius: 12px 12px 12px 11px;
        padding-bottom: 111px;
    }
    .sec-head {
        /* display: grid;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 29px; */

        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 11px;
    }

    .popup-s{
        padding: 13px 33px 13px 16px;
        background: #313033;
        border-radius: 7px;
        width: 351px;
        position: relative;
        box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
        margin-bottom: 0px;
    }

    .content-s {
        display: grid;
        grid-template-columns: 14px 246px 50px;
        gap: 12px;
        align-items: center;
    }
    
    .s-btns {
        display: grid;
        gap: 6px;
    }
    .s-btns2 {
        display: grid;
        gap: 6px;
        justify-content: right;
    }
    .sec-eq {
        display: grid;
        justify-content: space-between;
        grid-template-columns: unset;
    }
    .search-q {
        width: 174px!important;
    }
    .p-up{
        width: 352px!important;
    }
    .image-loop {
        display: flex;
        gap: 3px;
        background: #DEE3EB;
        border-radius: 12px;
        padding: 3px;
    }
    .loop-h{
        display: grid;
    }
    .linear-txt {
        text-align: center;
        padding-top: 52px;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: rgba(255, 255, 255, 1);
        width: 90px;
        margin-left: -24px;
    }

}
@media(max-width:280px){
.popup {
    width: 254px;
}
#main-header p {
    color: rgba(0, 0, 0, 1);
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    margin: -1px 5px 1px 5px;
}
.view-delete{
    display: flex;
    position: relative;
    bottom: -32px;
    gap: 8px;
}
.view-delete img{
    background: var(--main-bg2) !important;
}
.view-delete img:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px
rgba(0, 0, 0, 0.3);
}

.popup-s {
    padding: 13px 33px 13px 16px;
    background: #313033;
    border-radius: 7px;
    width: 271px;
    position: relative;
    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.15), 0px 32px 64px 0px rgba(0, 0, 0, 0.19);
    margin-bottom: 0px;
}
.content-s {
    display: grid;
    grid-template-columns: 14px 179px 32px;
    gap: 12px;
    align-items: center;
}
#top-se {
    gap: 6px;
    display: grid;
    justify-content: right;
    align-items: center;
}
}


@media screen and (max-width: 600px) {
    .topnav .search-container {
      float: none;
    }
    .topnav a, .topnav input[type=text], .topnav .search-container button {
      float: none;
    }
    .topnav input[type=text] {
      border: 1px solid #ccc;  
    }
  }


    /* set element styles to fit tablet and higher(desktop) */
    @media screen and (min-width: 600px) {
        .header {
            background-color: #fff;
            z-index: 2;
        }
        .header .logo {
            display: none;
        }
        .nav-trigger {
            display: none;
        }
        .nav-trigger span, .nav-trigger span:before, span:after {
            background-color: #fff;
        }
        .side-nav {
            display: block;
            width: 80px;
            z-index: 9999;
        }

        .side-nav .logo i {
            padding-left: 12px;
        }

        .side-nav ul li i {
            font-size: 25px;
        }
        .side-nav ul li a {
            text-align: center;
        }
        .main-content {
            margin-left: 70px;
        }
    }
    


    /* SGMS MEDIA */

    @media (min-width: 1200px){
        .container {
            max-width: 1800px;
        }
        
        }
    
        @media (min-width: 992px){
    .container {
        max-width: 1800px;
    }
        }
        @media (min-width: 768px){
    .container {
        max-width: 1800px;
    }
        }
        .main-dashboard {
            margin-left: 120px;
            margin-top: 74px;
            overflow-y: auto;
            padding: 15px 12px 25px 32px;
            background: #ffffff;
            min-height: 100%;
            margin-right: 120px;
            margin-bottom: -54px;
            border-radius: 12px 12px 12px 11px;
            padding-bottom: 46px;
            height: 100vh;
        }
        .main-h1{
            padding: 0px 136px 0px 136px !important;
        
        }
        .sec-contain{
            align-items: center;
            display: flex;
            justify-content: space-between;
        }
        .background1-white{
            background: #fff;
            height: 100vh;
            margin-top: -18px;
        }
        /* .head-img img{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        object-fit: cover;
        } */
         .user-dashboard{
                border-radius: 50%;
                width: 50px;
                height: 50px;
                object-fit: cover;
         }
        .sec-contain button{
            background: linear-gradient(180deg, #FF5800 0%, #FE4803 103.75%);
            border-radius: 31px;
            border: unset;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            padding: 10px 24px 10px 24px;
            line-height: 16px;
        }
        .sec-contain button:hover{
            background: linear-gradient(180deg, #e65407 0%, #ea4404 103.75%);
        }
        .pro-head{
            display: grid;
        
        }
        .pro-head p{
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 20p;
            margin-bottom: 0px;
        }
        .pro-head span{
            font-weight: 4500;
            font-size: 11px;
            color: #44474E;
            line-height: 16px;
        }
        .main-d1{
            background-color: #F4F4F4 !important;
            border-bottom: unset !important;
            padding: 0px 136px 0px 136px !important;
        }
        .input-container {
            display: flex;
            justify-content: center;
            padding-top: 40px;
            padding-bottom: 40px;
          }
          
          .gallery_title {
            text-align: center;
            padding-bottom: 1rem;
          }
          
          .gallery {
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 117px;
            grid-gap: 20px;
            padding-bottom: 70px;
            }
        
            .gallery .box-dash {
                position: relative;
                border: 1px solid #E6E6E6;
                box-shadow: 2px 4px 8px 0px #00000026;
                border-radius: 16px;
                padding: 23px;
                display: grid;
                gap: 0px;
                overflow: hidden;
                background-color: #FFFFFF;
                transition: background-color 0.3s ease-out;
                height: 115px;
            }
          
          .gallery .box-dash::before {
            content: '';
            position: absolute;
            top: 0;
            right: -139px;
            width: 248px;
            height: 281px;
            background-color: #F4F4F4;
            border-radius: 50%;
            transition: width 0.3s ease-out, height 0.3s ease-out, right 0.3s ease-out, background-color 0.3s ease-out;
          }
          
          .gallery .box-dash:hover {
            background-color: #FF6D20;
          }
          
          .gallery .box-dash:hover::before {
            background-color: #FF884A;
            top: 0;
            right: -144px;
            width: 320px;
            height: 266px;
          }
          
          .gallery .box-dash p {
              margin-bottom: 0px;
        align-items: end;
        display: flex;
        color: #000000;
        font-weight: 500;
        font-size: 20px;
        line-height: 26px;
        z-index: 9;
        transition: color 0.3s ease-out;
        
          }
          
          .gallery .box-dash img {
            max-width: 38px;
            height: auto;
            margin-bottom: 7px;
            transition: filter 0.3s ease-out;
        }
          
          .gallery .box-dash:hover p {
            color: #ffffff;
          }
          
          .gallery .box-dash:hover img {
            filter: brightness(0) invert(1);
          }
          .main-ds{
              overflow: unset;
        height: 100vh;
        background: unset;
          }
        
        
          /*dashboard contract management */
        
          .s-nav ul li span:nth-child(2) {
            font-size: 10px;
        }
        
        
          .main-contract{
            padding: 0;
            background: unset;
          }
          .card-1{
            box-shadow: 2px 4px 8px 0px #00000026;
            border-radius: 14px;
          }
          .card-11{
            height: 256px;
            margin-bottom: 14px;
          }
          .card1-header {
            padding: 0.75rem 1.25rem;
            margin-bottom: 0;
            text-align: left;
            display: flex;
            gap: 23px;
            justify-content: space-between;
            align-items: flex-start;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .card1-header h4{
            color: #000000E4;
            font-weight: 500;
            font-size: 22px;
            line-height: 28px;
        
        }
        .color-box{
            width: 14px;
            height: 14px;
            background-color: #FE4803;
            border-radius: 4px;
        }
        #c-box2{
            background-color: #FEC703;
        }
        
        #c-box3{
            background-color:#0D9D00;
        }
        #c-box4{
            background-color:#03B9FE;
        }
        #c-box5{
            background-color:#096385;
        }
        
        #c-box6{
            background-color:#B03F00;
        }
        #c-box7{
            background-color:#075FC7;
        }
        .close-img{
            cursor:pointer;
            }