//
// _ui-pages.scss
//

@use "../variables" as *;
@use "../utils/mixins" as *;

// Scrollspy
.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: 0.5rem;
    overflow: auto;
}

// Grid
.grid-structure {
    .grid-container {
        background-color: $light;
        margin-bottom: 10px;
        font-size: 0.8rem;
        font-weight: $font-weight-semibold;
        padding: 10px 20px;
    }
}

.icon-box .card {
    height: 80px;
    width: 80px;
    margin-bottom: 0 !important;
    cursor: pointer;
    text-align: center;
    line-height: 80px;

    .card-body {
        padding: 0;

        i {
            vertical-align: middle;
        }
    }

    &:hover {
        iconify-icon {
            color: $primary;
        }
    }
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

// Icons
.icons-list-demo {
    div {
        cursor: pointer;
        line-height: 45px;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;

        p {
            margin-bottom: 0;
            line-height: inherit;
        }

        &:hover,
        &:hover i {
            color: $primary;
        }
    }

    i {
        text-align: center;
        vertical-align: middle;
        font-size: 24px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-right: 12px;
        border-radius: 3px;
        display: inline-block;
        transition: all 0.2s;
    }
}

.icons-list {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    li {
        display: block;
        width: 40px;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        font-size: 18px;
        @include rounded(50px);
        border: 1px solid $border-color;
        @include box-shadow(null, 0, 2px, 3px, null, rgb(215, 197, 255));
    }
    .icons-list-item {      
        display: block;
        width: 50px;
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        font-size: 18px;
        @include rounded(50px);
        border: 1px solid $border-color;
            &:hover {
                color: $primary;
                font-size: 24px;
            }
    }
}

// Chart

.h-250 {
    height: 250px;
}
#sales-income,  #revenue-income,  #leads_stage, #s-col, #s-col-stacked {
    .apexcharts-bar-series {
        .apexcharts-series:nth-child(1) path {
            fill: $primary;
          }
    }
}
#deals_stage, #emp-department, #s-bar, #mixed-chart  {
    .apexcharts-bar-series {
        .apexcharts-series path {
            fill: $primary;
        }
    }
}
#mixed-chart, #s-col-stacked, #s-col {
    .apexcharts-legend-series:first-child .apexcharts-legend-marker {
        fill: $primary; 
    }
}
#s-line  {
    .apexcharts-line-series {
        .apexcharts-series path {
            stroke: $primary;
        }
        .apexcharts-marker {
            fill: $primary;
        }
    }
}
#chart-bar-stacked, #chart-bar, #chart-bar-rotated {
    .c3-target-data2 .c3-bar {
        fill: $primary !important; 
    }
}
#chart-spline-rotated .c3-target-data2 {
    .c3-line {
        stroke: $primary !important;
    } 
    .c3-circle {
        fill: $primary !important; 
    }
}   
#contacts-analysis, #leadpiechart {
    .apexcharts-legend-text {
        color:  $gray-900 !important;
        font-weight: $font-weight-medium !important;
    }
}

//Leaflet Maps 

#map,
#map1,
#map-popup,
#map-custom-icon,
#interactive-map {
  height: 18.75rem;
  z-index: 10;
}

// Vector Maps
.jvm-zoom-btn {
  background-color: $light;
  color: $body-color;
  border: 1px solid $border-color;
  font-size: 20px;
}
#vector-map,
#marker-map,
#marker-image-map,
#lines-map,
#us-map,
#canada-map,
#spain-map,
#russia-map {
  height: 21.875rem;
}

.jvm-tooltip {
  background-color: #1a1c1e ;
}

#vector-map,
#marker-map,
#marker-image-map,
#lines-map,
#users-map {
  #jvm-regions-group path {
    fill: $light ;
  }
}

.jvm-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px ;
  height: 20px ;
  line-height: 20px ;
}

.jvm-zoom-btn.jvm-zoomin {
  inset-block-start: 5px ;
}

#jvm-markers-labels-group text {
  fill: $body-color;
}


.snow-editor {
  height: 120px;
}

#worktime-chart,
#unproductivetime-chart,
#productivetime-chart,
#manualtime-chart {
	max-width: 65px !important;
	min-height: 60px !important;
}

.bg-soft-indigo{
  background-color: $indigo-transparent;
  color: $indigo;
  &:hover, &:focus, &.active{
    background-color: $indigo;
    color: $white;
  }
}

.social-links{   
    li{
        margin: 0 2px;
        a{
            font-size: 16px;
            border-radius: $border-radius-pill;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover, &:focus{
                color: $heading-color;
                background-color: $light;
            }
        }
    }
}

.view-icons{
    .btn{
        color: $heading-color;
        font-size: 15px !important;
        &:hover, &.active{
            background-color: $teal;
            color: $white;
        }
    }
}

.support-btn-group {
    label {
        color: $gray-900;
    }
    .btn {
        @include respond-below (sm) {
            padding: 8px 10px;
        }
    }
}
.count-value {
    height: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $dark;
    color: $white;
    font-size: 10px;
    border-radius: 50%;
}
.text-fixed-white {
    color: #fff !important;
}


[data-bs-theme=dark] .super-admin-logo-dark{
  display: none;
}
[data-bs-theme=light] .super-admin-logo-light{
  display: none;
}