.arrow-right {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #868686;
} 
.arrow-left {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid #868686;
}

.topLabel{
      font-size: .8rem;
    font-weight: 800;

}
.asWrap > .card:last-child{
  margin-bottom: 3rem;
}
.fakespace{
  padding: .5rem 0;
}

 .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    width: calc(100% - 2rem);
        background-color: white;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 8px;
       margin: 2rem 0;
    }
    .metrics {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .metric {
          text-align: center;
    padding: .5rem 0;
    transition: all 0.2s;
    }
    .question{
            font-size: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #c3c3c3;
    color: #ffffff;
    font-weight: 600;
    display: flex
;
    align-items: center;
    justify-content: center;
    }
    .anaItem{
      width: 61.87050359712231%;
  
    position: relative;
    height: 100%;
    }
    .missedAna{
         background-color: #ff000070 !important;
    top: 50% !important;
    height: 12rem !important;
    }
    .transfer{
        background-color: #00ff2687;
    }
    .callAnaItem{
        position: absolute;
    top: 50%;
    height: 8rem;
    background-color: #aadaff73;
    transform: translateY(-50%);
    display: flex
;

    }
    .anaLabel {
          font-size: .65rem;
    color: #a19f9f;
    font-weight: 300;
    width: max-content;
    display: flex
;
    margin: auto;
    align-items: center;
    gap: .25rem;
    
    }

    .metric p {
      font-size: .8rem;
      margin: 5px 0;
     
    }
    .chart {
      border-top: 1px solid #eee;
      padding-top: 20px;
    }
    .chart-placeholder {
      height: 30dvh;
    position: relative;
        overflow: hidden;
    overflow-x: auto;
     
      border-radius: 4px;
    }
    @keyframes shimmer {
      0% { background-position: -500px 0; }
      100% { background-position: 500px 0; }
    }

     .calendar {
         max-width: 320px;
    margin: 20px auto;
    font-family: var(--font2);
    /* border: 1px solid #ccc; */
    /* padding: 10px; */
    border-radius: 10px;
    margin-top: 20px;
    justify-content: center;
    min-height: 40dvh;
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 8px;
    z-index: 100;

    }
    .asWrap{
         width: 95%;
    margin: 0 auto;
   
    }

    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30PX 0;
      margin-top: 15px;
      width: 100%;
    }

    .calendar-header button {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
    }
    .addShadow{
          box-shadow:rgba(0, 0, 0, 0.34) 0px 0px 4px;
              color: #ffffff !important;
    border: 1px solid transparent !important;
    
    background-color: #55b0ff;
    }
    .calendarBg,.calendarScreen{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .calendarBg{
      position: fixed !important;
    }

    .calendar-header span {
      font-weight: bold;
      font-size: .8rem;
      text-transform: uppercase;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      width: 100%;
    }

    .calendar-day {
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      color: #000000;
      font-weight: 400;
      font-size: .8rem;
    }

    .today {
      background-color: #d1eaff;
      font-weight: bold;
    }

    .selected {
      background-color: #14acff;
      color: white;
    }

    .in-range {
      background-color: #14acff;
      color: white;
    }

    .calendar-weekday {

      text-align: center;
      color: #000000;
      font-size: .8rem;
      font-weight: 600;
    }
    .anaDatesW{
               display: flex
;
    gap: 1rem;
    font-size: .75rem;
    margin: auto;
    margin-right: 0;
    justify-content: end;
    padding: 1rem 0;
    }
    .aDate{
              color: #000000;
    padding: .5rem 0;
    border-radius: 8px;
    /* background-color: #55b0ff; */
    padding: .5rem;
    border: 1px solid grey;
    }
    .aDate:hover{
          color: #ffffff;

     background-color: #55b0ff;
     border: 1px solid transparent;
    }
    .tCount svg{
      height: 1rem;
    }
    .tCount{
              font-weight: 600;
    font-size: .6rem;
    /* height: 1rem; */
    position: relative;
    align-items: center;
    justify-content: center;
    padding: .1rem;
    display: flex
;
    /* border-radius: 50%; */
    color: grey;
    position: absolute;
    top: 2px;
    right: 2px;
    border-radius: 4px;
    height: .75rem;
    width: max-content;
    color: rgb(0, 0, 0);
    font-size: .6rem;
    margin: auto;
    margin-right: 0;
    position: relative;
    justify-content: end;
    gap: .25rem;
    }
        .anaTag{
       padding: .5rem;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: .7rem;
  
    min-width: 1rem;
    min-height: .7rem;
    pointer-events: all;
    border: 1px solid #e9e9e9;
    font-weight: 500;
    align-items: center;
    display: flex
;
    position: relative;
    gap: .5rem;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 8px;
    height: max-content;
   
    }
    .datesWW{
              display: flex
;
    color: grey;
    /* width: 100%; */
    /* grid-template-columns: 10%; */
    font-size: .6rem;
    align-items: center;
    /* justify-content: center; */
    /* border-top: 1px solid blue; */
    bottom: 0;
    position: absolute;
    gap: 20rem;
    
   
       
    
    }
    .arrow:hover{
      background-color: white;
    }
    .arrow{
     height: 2rem;
    width: 2rem;
    background-color: rgb(190, 190, 190);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    display: flex
;
    align-items: center;
    justify-content: center;
    }
    .left{
      left: 0;
    }
    .right{
      right: -2rem;
    }

    .mSelected{
     color: blue !important;
    }
    .mSelected .anaLabel{
        color: blue !important;
    }
    .datesWWrap{
            position: relative;
    bottom: 1rem;
    height: 1rem;
    
    width: 200%;
    /* overflow: hidden; */
    border-top: 1px solid #f3f3f3;

    }
    .datesWW div{
      width: max-content;

    }
    .infoDisp{
         width: 2rem;
    display: flex
;
    height: 2rem;
    background-size: cover;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 4px;

    }
        .analyticsScreen {
        position: absolute !important;
    background-color:#e2e2e2 !important;
    width: 100%;
    height: 97.5dvh;
    top: 2.5dvh;
    left: 0;
    border-radius: .5rem;
    overflow-y: auto;
    }
    .perfCards{
      display: flex
;
        margin-top: 1.5rem;
    gap: 2rem;
    flex-wrap: wrap;
    }
    .cardAnaTitleWrap{
      
    display: flex;
    gap: .5rem;
        align-items: center;
    }
    .anaWrapTitleCard{
          height: max-content;
 font-size: .8rem;
     color: grey;

    }
    .descDD{
          font-size: .8rem;
    color: grey;
    }
    .increaseTrend{
              position: absolute;
    width: max-content;
    top: 0;
    right: .5rem;
    fill: white;
    background-color: #8BC34A;
    /* border-radius: 4px; */
    font-size: .6rem;
    color: #f5ffe8;
    text-align: center;
    display: flex
;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
        padding: 0 .25rem;
    }
    .teamM{
          width: max-content;
    /* height: 5rem; */
    /* background-color: white; */
    padding: 2rem 0;
    }
    .teamCards{
      display: flex;
          flex-wrap: wrap;
    }
    .tcWrap{
          display: flex
;
    width: 300px;
    gap: .5rem;
    }
     .tcName{
        height: max-content;
    margin: auto;
    margin-left: 0;
    }
    .tLabel{
          text-transform: capitalize;
          font-size: .8rem;
    }
  .perfCards .decrease .increaseTrend {
      background-color: transparent;
    fill: #c34a6c !important;
    color: #c34a6c !important;

    }
   .anaTag.decrease .increaseTrend  {
      fill: #c34a6c !important;
       color: #c34a6c !important;
        background-color: transparent !important;
    }
    .anaTag .increaseTrend{
      position: relative;
          fill: #8BC34A;
              color: #8BC34A;
              background-color: transparent;
    }
    .increaseTrend svg{
      width: 1rem;
    }
    .decrease .increaseTrend svg{
      rotate: -180deg !important;

    }
    .perCard{
          width: max-content;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 4px;
    /* box-shadow: rgba(0, 0, 0, 0.34) 0px 0px 8px; */
   
    /* background-color: #454545; */
    /* fill: white; */
    /* color: white; */
    border: 1px solid #c4c4c4;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 8px;
    position: relative;

    }
    .counterPerfWrap{
          display: flex
;
    align-items: center;
    /* height: 1.25rem; */
    gap: .25rem;
    }
    .svgIcon{
        WIDTH: 2REM;
    DISPLAY: FLEX;
    position: relative;
    font-size: 1.5rem;
    color: black;
    }
    .contentWrap .svgIcon{
      width: 20px;
        height: 20px;
       
    }
    .calendar-day.selected-primary {
  background-color: #007bff; /* blue */
  color: white;
  border-radius: 50%;
}
.graphmessages{
  display: none;
}
.performanceWrap{
      width: max-content;
   
    font-size: .8rem;
    color: rgb(64, 64, 64);
}

.calendar-day.selected-compare {
  background-color: orange;
  color: white;
  border-radius: 50%;
}

     .contentWrap .svgIcon svg{
      width: 20px;
        height: 20px;
       
    }
    .contentWrap .counterPerfWrap .counterPerf{
          font-size: .8rem;
    font-weight: 400;
    color: black;
    }
    .counterPerfWrapTitle{
      width: 100%;
    }
    .counterPerf{
          font-size: 3rem;
    font-weight: 100;
    }
     .contentWrap .counterPerfWrap{

      font-size: .7rem;
    color: grey;
       
    }
    .contentWrap{
                width: max-content;
    gap: .5rem;
    position: relative;
    margin: auto;
    /* margin-right: 0; */
    display: flex
;
    }
    .svgIcon svg{
      width: 80%;
      margin: auto;
      position: relative;
    }
    .compareDates{
      color: #a3a3a3;
    margin: auto;
    }
    .noInfoTag{
             display: flex
;
    font-size: .7rem;
    padding: .5rem;
    border: dotted 1px #909090;
    width: max-content;
    border-radius: 8px;
    color: #747474;
    position: relative;
    }
    .tagCount{
      position: absolute;
    top: -.5rem;
    right: -.5rem;
    background-color: #2196F3;
    color: white;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    font-size: .6rem;
    display: flex
;
    align-items: center;
    justify-content: center;
    }
    .displayNone{
      display: none;
    }
    .tagsWrap{
            position: relative;
    height: max-content;
    display: flex;
    margin:  2rem 0;
    gap: 1rem;
    flex-wrap: wrap;
    }
    .pp{
      font-size: .6rem;
    color: grey;
    }
    .callTags{
             display: flex
;
    padding: 2rem 0 0rem 0;
    flex-wrap: wrap;
        gap: 1rem;
       width: 100%;
    
    }
    .anaDatesWrap{
          DISPLAY: FLEX;
    ALIGN-ITEMS: center;
    COLOR: rgb(0, 0, 0);
    }
    .graph{
                width: 100%;
    height: 100%;
    display: grid
;
    color: grey;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: flex-end;
    justify-content: flex-end;
   
    }
    .tower{
        position: relative;
    bottom: 1rem;
    width: 1rem;
    background-color: #03a9f43d;
    height: 60%;
    
    }
    .missedCall{
      position: absolute;
      bottom: 0;
      background-color: #ff000087;
      width: 100%;
    }
    .addTemplateBtn{
         width: 2rem;
    height: 2rem;
    background-color: #14acff;
    border-radius: 50%;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    color: white;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    }
    .tt{
      font-weight: 800;
    }
    .discussion{
      margin-top: 3rem;

    }
    .discussion  .titleDD{
          font-weight: 600;
    font-size: .8rem;
    }
    .discussion  .descDD{
        
    font-size: .6rem;
    }

    .callTagsAnal{
    display: flex
;
    width: 100%;
    align-items: center;
    position: relative;
    }
    .circularGraph{
           width: max-content;
    display: flex
;
    align-items: center;
    padding: 2rem 0;
    padding-right: 2rem;

    }
.chart-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
  }

.queryLabelChart {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: auto;
}

.queryLabelChart .slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

.legend {
  margin-top: 20px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .5rem;
  text-transform: capitalize;
  margin-top: .5rem;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
}
  .chart-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .svg-pie-chart {
    width: 250px;
    height: 250px;
    transform: rotate(-90deg); /* Start at the top */
  }
  .colorDiv{
    width: .5rem;
    height: .5rem;
    margin: auto;
  }

  .legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
     display: none;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
  }
  .c1{
    background-color: #acdaff;
    opacity: 0;
  }
    .c2{
    background: #57a8e9;
  }
  .c3{
    background: #379cee;
  }
    .c4{
    background: #2196F3;
  }
      .c5{
    background: #008cff;
  }