// ion-header{
//     overflow: hidden;
//     background: #f2f2f3;
// }
// ion-content{
//     --ion-background-color: #f2f2f3;
// }

// ion-card-content {
//     padding: 0px;
// }

// ion-card {
//     box-shadow: none !important;
//     background-color: white;
//     margin: 10px -15px;
//     margin-bottom: 20px;
// }

// ion-title{
//   text-align: center;
//   font-family: WorkSans-Bold;
//   font-size: 18px;
//   margin-right: 35px;
// }

// ///////////////////////////////here
// .slidPrev{
//   // margin-top: 8px;
//   margin-left: 10px;
//   background: transparent;
// }

// .slidNext{
//   background: transparent;
//   margin-top: -1px;
//   margin-left: 43px;
// }
// .activeArrow{
//   height: 20px;
//   width: 20px;
// color: white;
// }
// .disabledArrow{
//   height: 20px;
//   width: 20px;
// color: gray;
// // margin-right: 5px;
// }

// .header-toolbar-new{
//     --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
//     border-bottom-right-radius: 30px;
//     border-bottom-left-radius: 30px;
// }

// .active-Segment {
//     border-radius: 5px !important;
//     font-size: 0.3cm !important;
//     background: white !important;
//     color: #fff !important;
//     font-weight: bold !important;
//     border: 1px solid white !important;
//     text-transform: none;
//     --color-checked: none;
//   }
//   .active-Segment ion-label{
//     // color: #A3D077 !important;
//     color: #11975F !important;
//     font-size: 11px;
//   }
//   .normal-Segment ion-label{
//     // color: #A3D077 !important;
//     color: white !important;
//     font-size: 11px;
//   }
//   .normal-Segment {
//     border-radius: 5px !important;
//     font-size: 0.3cm !important;
//     background: #A3D077 !important;
//     color: #fff !important;
//     font-weight: bold !important;
//     border: 1px solid white !important;
//     text-transform: none;
//     --color-checked: none;
//   }
//   .time-card-details-container{
//     margin-right: 20px;
//     margin-left: 20px;
//   }

//   .card-summary-heading{
//     margin-left: 10px;
//     margin-top: 12px;
//     color: #606161;
//     font-family: WorkSans-Bold;
//   }
//   .card-summary-heading-hours{
//     color: #606161;
//     font-family: WorkSans-Bold;
//   }
  
//   .card-summary-heading-hours-extended-heading{
//     color: #D3D3D3;
//     font-family: WorkSans-Bold;
//   }

//   /////////////////////////////////

//   .time-card-details {
//     background: white;
//     margin: 20px;
//     border-radius: 5px;
//   }

//   .time-card-details-heading-two {
//     color: #606161;
//     font-family: WorkSans-Bold;
//   }
//   .time-card-details-heading-two h2 {
//     margin-top: 15px;
//     font-size: 15px;
//   }

//   .time-card-span img{
//     height: 30px;
//     margin-top: -5px;
//     margin-left: 10px;
//   }
//   .dayhours-button-container{
//     width: 100%;
//     padding-right: 5px;
//     padding-left: 5px;
//   }

//   .dayhours-button{
//     width: 50%;
//     height: 35px;
//     font-size: 15px;
//     color: white;
//     background: #606161;
//   }

//   /////////////////////////////////////
// .footer-modal-button{
//   position: absolute;
//     bottom: 0;
//     color: white;
//     width: 100%;
//     text-align: center;
// }
// .footer-modal-button button{
//   font-size: 20px;
//     background: white;
//     line-height: 2;
//     margin: -42px auto 0;
//     display: block;
// }

// ////////////////////////////
// .right-slider-icon{
//   float: right;
//   height: 100%;
//   width: 15%;
//   position: fixed;
//   right: -5%;
//   top: 31%;
// }

// .left-slider-icon{
//   width: 15%;
//   position: fixed;
//   top: 32%;
//   left: -4%;
//   height: 100%;
// }


// //////////////////////////////////////////ENAD CODE////////////////////////////////////////////


// .colorBG{
//   --background: #f0efef;
//  }

// .header-div {

//   background-color: #22C6B3;
//   text-transform: capitalize;
//   height: 180px;
//   position: relative;
//   display: block;
//   margin-bottom: -28px;
// }
// .Title{
//   text-align: center !important;
//   color: white !important;
//   margin-top: -86px !important;
//   font-size: 17px !important;
//   font-family: workSans-Regular;
// }

// .header{
//   margin-top: -221px;
// }

// .chart-modal .modal-Wrapper {
//     --background: rgb(116, 108, 108) !important;
//     --border-color:white!important ;
//     width: 85%!important  ;
//     height: 40px !important ;
   
//     }

//     .navbar{
//        font-size: 10px !important;
//         --background: #22C6B3 !important;
//         color: aliceblue !important;
// // margin-top: 10px !important;

//     }

//     .menu{
//         // margin-left:330px !important;
//         margin-top: 0px !important;
//         font-size: 35px !important;
//         background: #22C6B3;
//         color: aliceblue;
//         margin-left: 0px !important;

//     }

//     .person{
        
//         margin-left:100px !important;
//         margin-top: 0px !important;
//         font-size: 23px !important;
//         background: #22C6B3 !important;
//         color: aliceblue !important;
        
//     }

//     .grid{
// margin-bottom: 550px !important;
// margin-top: 20px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 250px !important;
//     }

//     .headerGrid{
//       margin-top: 5px !important;
//       margin-left: 15px !important;
//       margin-right: 15px !important;
//       background-color: white !important;
//       border-radius: 20px !important;
// height: 250px !important;
// border: 1px solid #d6d4d4;
//     }

//  .green-label{
//       font-size: 12px;
//       margin-top: -13px;
//       }
      
//  .green-amount{
//         font-size: 17px;
//         font-family: WorkSans-Bold;
//         margin-top: -3px;
//       }
      
//   .blue-label{
//         font-size: 12px;
//         margin-top: -13px;
//         }
        
//    .blue-amount{
//           font-size: 17px;
//           font-family: WorkSans-Bold;
//           margin-top: -4px;
//         }
      
// .today-graph{
//   display:block !important;
//   height: 150px !important;
//   width: 300 !important;
//   margin-left: -70px !important;
// }
//    .bodyGrid{
//         // margin-bottom: 550px !important;
//         // margin-top: 7px !important;
//         // margin-left: 15px !important;
//         // margin-right: 15px !important;
//         // background-color:white !important;
//         // border-radius: 20px !important;
//         // height: 270px !important;
//         // border: 1px solid #d6d4d4 !important;
        
//         margin-top: 7px !important;
//         margin-left: 15px !important;
//         margin-right: 15px !important;
//         background-color: white !important;
//         border-radius: 20px !important;
//         height: 321px !important;
//         border: 1px solid #d6d4d4 !important;
        
//     }
//     .labelGrid{
//         // margin-top: -30px !important;
//         // background-color:white !important;
//         // border-radius: 20px !important;
//         // height: 100px !important;
//         // border: 1px solid #d6d4d4;
//         margin-top: -30px !important;
//     background-color: white !important;
//     border-radius: 23px !important;
//     height: 100px !important;
//     border: 1px solid #d6d4d4;
//     padding-right: 0px;
//     }

// .ionSliders{
//  margin: 0px !important;
//  padding: 0px !important;

// }


//     .ionSlide{
//    margin-top: 5px !important;
//    margin-left: 190px !important;
//    color: black !important;

//     }
//     .dateLable{

//         margin-left: 90px !important;
//         color: black !important;
//         font-size: small !important;
//         margin-top: 15px !important;
//     }
// // h1{
// //     font-size: 15px !important;
// //     text-align: center !important;
// // }
// .arrowDropright{
//  margin-left:100px !important;
//  font-size: 20px !important;
//  color: rgb(168, 165, 165) !important;
//  margin-top: 15px !important;

// }
// .arrowDropleft{
//     font-size: 20px !important;  
//     margin-left: 10px !important;
//     margin-top: 15px !important;
//     color: rgb(116, 108, 108) !important;
// }

//     .ionLable{
//         font-size: 10px !important;
//     }

//     .number{

//         font-size: 18px !important;
//         font-weight: bolder !important;
//         color: black !important;
//     }

//     .header-div{
//         background:var(--primary); 
//         background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary)  36%,var(--secondary)  59%, var(--customnavy) 100%); 
//         background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary)  36%,var(--secondary)  59%, var(--customnavy) 100%); 
//         background: #22C6B3;
//         // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
//         color:var(--light);
//         text-transform: capitalize;	
      
//         display: block;
//         position: relative;
//         height: 210px;
//         margin-bottom:60px;
//         // border-radius: 0px 0px 70px 70px;
//       }

//       .request-heading {

//         span {
    
//             // text-align: center;
    
//             // display: block;
    
//             // padding-top: 8px;
    
//             // font-family: workSans-Regular;
//             // text-align: center;
//     display: block;
//     padding-top: 8px;
//     /* font-family: workSans-Regular; */
//     margin-left: -157px;
//     margin-top: -19px;
//     padding-bottom: 16px;
    
//         }
    
//     }
    
    
    
//     .result-graph {
    
//         position: relative;
    
//         background: white;
    
//         margin-right: 20px;
    
//         margin-left: 20px;
    
//         margin-top: 20px;
    
//         padding-bottom: 20px;
    
//         border-radius: 20px;
    
//       }
    
    
    
//     .result-text-container {
    
//         padding: 0;
    
//         margin: 0;
    
//         position: absolute;
    
//         left: 38%;
//         top: 60%;
    
//         display: block;
    
//         text-align: center;
    
//         transform: translate(-50%, -50%);
    
//         h2 {
    
//             font-size: 25px;
    
//             font-family: WorkSans-Bold;
//             color: black !important;
//             margin: 0 auto;
    
//             line-height: 36px;
    
//         }
//         p {
    
//           font-size: 20px;
//           color: black !important;
//           // font-family: WorkSans-Bold;
  
//           margin: 0 auto;
  
//           line-height: 36px;
  
//       }
    
//         span {
    
//             width: 125px;
    
//             display: block;
    
//             margin: 0 auto;
    
//             font-size: 12px;
//             color: black !important;
//             font-family: workSans-Regular;
//         }
//     }



ion-content {
  --ion-background-color: whitesmoke;
}
ion-title{
  color: white;
  position: absolute;
  top: 0;
  text-align: center;
  // left: 15%;
  // right: 15%;
  font-size: 0.42cm;
  font-weight: bold;
  height: 100%;
}
.contentBg{
  padding: 0px 20px;
}

.contentBg:before {
  position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}

.user-info{
    text-align: center;
    margin-bottom: 15px;
    .user-image-container{
        position: relative;
        width: 80px;
        height: 80px;
        display: block;
        margin: 0 auto;
      //   &:before{
      //     position: absolute;
      //     content: "";
      //     width: 20px;
      //     height: 20px;
      //     border-radius: 20px;
      //     border: 1px solid white;
      //     top: 0;
      //     right: 0;
      //     background-color: red;
      //     z-index: 9;
      // }
      // &.present:before{
      //     background-color: green !important;
      // }
    }
    .user-image{
        overflow: hidden;
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 80px;
        border: 1px solid #ccc;
        margin: 0px auto 6px;
    }
    h1{
        margin: 0;
        padding: 0;
        font-family: WorkSans-Bold;
        font-size: 18px;
        margin-bottom: 4px;
    }
    span{
        font-size: 14px;
        display: block;
        color: #888
    }
}
$actionBtnSize : 36px;
.user-actions{
    text-align: center;
    .action-button{
          font-size: 11px;
          white-space: nowrap;
          color: #888;
        .action-button-icon{
            width: $actionBtnSize;
            height: $actionBtnSize;
            border-radius: $actionBtnSize;
            margin: 0 auto;
            display: block;
            background-color: #22c6b3;
            line-height: $actionBtnSize;
            margin-bottom: 3px;
            img{
                margin: 0 auto;
                vertical-align: middle;
            }
        }
    }
}
.employee-information-indetail{
  background: white;
  margin-top: 15px;
  border-radius: 20px;
  margin-bottom: 15px;
  ion-col{
      padding: 15px;
      border-bottom: 1px solid #ccc;
  }
  h2{
      font-size: 13px;
      font-family: WorkSans-Bold;
      margin: 0;
  }
  p{
      font-size: 13px;
      margin: 0;
  }
}

.segments-container {
  border-radius: 100px;
  overflow: hidden;
  margin-top: 15px;
  background: white;
  color: black;
}

.active-Segment {
  font-size: 0.3cm !important;
  background: #22c6b3 !important;
  text-transform: none;
  --color-checked: none;
  border-radius: 100px;
  border:0;
}
.active-Segment ion-label{
  font-size: 11px;
  color: white !important;
}
.normal-Segment ion-label{
  color: black !important;
  font-size: 11px;
}
.normal-Segment {
  font-size: 0.3cm !important;
  text-transform: none;
  --color-checked: none;
  border: 0;
}
.colum-container{
  padding: 15px;
  border-bottom: 1px solid #ccc;
}

///////////////////////// Team Members css //////////////////////@extend

.filters-row {
  margin-top: 10px;
}

.search-dropdown{
  background: #22c6b3;
  ion-select {
      .select-text{
          margin-left: -10px;
      }
      .select-icon{
          .select-icon-inner{
              opacity: 1;
              color: white;
              margin-top: -1px;
          }
      }
  }
}

.input-container{
  background: white;
  ion-input{
      border-bottom-color: transparent;
  }
}

.search-container{
  margin-top: 15px;
  ion-col{
      background: white;
      border-radius: 12px;
      padding-right: 10px;
      flex: none;
      ion-icon{
          margin-right: 3px;
          font-size: 14px;
          margin-left: 3px;
          vertical-align: middle;
      }
      span{
          font-size: 12px;
          vertical-align: middle;
      }
  }
}


/////////////////////////////////////////////////////// Attendance ///////////////////////
.header{
  position: relative;
  z-index: 999;
}

.slidPrev{
  margin-left: 10px;
  background: transparent;
}

.slidNext{
  background: transparent;
  margin-top: -1px;
  margin-left: 43px;
}
.activeArrow{
  height: 20px;
  width: 20px;
  color: white;
}
.disabledArrow{
  height: 20px;
  width: 20px;
  color: gray;
}


.result-graph {
  position: relative;
  background: white;
  margin-top: 20px;
  padding-bottom: 20px;
  border-radius: 20px;
  z-index: 1;
  margin-bottom: 10px;
}
.request-heading {
      text-align: left;
      display: block;
      padding-top: 8px;
      margin-bottom: 10px;
      margin-left: 10px;
}
.request-heading-ar{
  text-align: right;
  display: block;
  padding-top: 8px;
  margin-bottom: 10px;
  margin-right: 12px;
}

.result-text-container {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  text-align: center;
  transform: translate(-50%, -50%);
  h2 {
      font-size: 38px;
      font-family: WorkSans-Bold;
      margin: 0 auto;
      line-height: 36px;
  }
  span {
      width: 125px;
      display: block;
      margin: 0 auto;
      font-size: 12px;
      font-family: workSans-Regular;
  }
}
.today-graph {
  width: 100%;
  max-height: 4cm;
}

.green-label{
  font-size: 12px;
  margin-top: -13px;
}
  
.green-amount{
  font-size: 17px;
  font-family: WorkSans-Bold;
  margin-top: -3px;
}
  
.blue-label{
  font-size: 12px;
  margin-top: -13px;
}
    
.blue-amount{
  font-size: 17px;
  font-family: WorkSans-Bold;
  margin-top: -4px;
}

.labelGrid{ 
  background-color: white !important;
  border-radius: 20px !important;
  height: 88px !important;
  border: 1px solid #d6d4d4;
  position: relative;
  padding: 10px;

  label {
      font-size: 9px;
      line-height: 11px !important;
      display: block;
  }
  h2 {
      font-size: 25px;
      font-weight: bold;
      display: block;
      text-align: right;
      margin:0;
      position: absolute;
      bottom: 0;
      left:0;
      width: 100%;
      padding: 10px;
  }
}

.bodyGrid{
  margin-top: 7px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  background-color: white !important;
  border-radius: 20px !important;
  height: 321px !important;
  border: 1px solid #d6d4d4 !important;
}
.attendance-information{
  background: white;
  border-radius: 20px;
  padding: 10px;
  @media screen and (min-width: 300px) and (max-width:359px) {
      h2{
        padding: 0;
        margin: 0;
        font-size: 14px;
      }
      span{
          font-size: 9px;
      }
  }

  @media screen and (min-width: 360px) {
    h2{
      padding: 0;
      margin: 0;
      font-size: 18px;
    }
    span{
        font-size: 11px;
    }
  }
}

.month-year-span {
  font-size: 20px;
  font-family: WorkSans-Bold;
  color: #0a5d53;
}

.green-label-container{
  border-top: 5px solid #22c6b3;
  padding: 1px 0px;
  margin: 15px 0px
}

.blue-label-container{
  border-top: 5px solid #094875;
  padding: 1px 0px;
  margin: 15px 0px
}
.span-one{
  display: block;
  font-size: 12px;
  color: black;
}
.span-two{
  display: block;
  font-size: 22px;
  font-family: WorkSans-Bold;
}
.graph-container{
  margin-left: -50px;
  position: relative;
  margin-right: 50px;
}
.label-container{
  position: absolute;
  width: 20%;
  right: 30px;
  top: 50%;
  margin-top: -60px;
}
.attendance-summary .attendance-information {
  span{
      height: 32px;
      display: block;
      line-height: 14px;
  }
  h2{
      text-align: right;
      font-family: WorkSans-Bold;
  }
  
}
.calendar-container{
  background: white;
  margin-bottom: 100px;
  margin-top: 20px;
  border-radius: 20px;
  span{
      text-align: left;
      display: block;
      padding-top: 8px;
      margin-bottom: 10px;
      margin-left: 10px;
  }
}
.calendar-container-ar{
  background: white;
  margin-bottom: 100px;
  margin-top: 20px;
  border-radius: 20px;
  span{
    text-align: right;
    display: block;
    padding-top: 8px;
    margin-bottom: 6px;
    margin-right: 12px;
  }
}




        