@import "single/single";
@import "archive/archive";
@import "submit";

body.admin-bar.single-company .widget-area-init.has-sticky {
  position: sticky;
  top: 60px;
  z-index: 2;
}


body.single-company{
  #wrapper{
    overflow: inherit;
  }
  .widget-area-init.has-sticky {
    position: sticky;
    top: 30px;
    z-index: 2;
  }
}

.civi-check-company{
  background-color: $secondary_color;
  height: 15px;
  width: 15px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin-left: 5px;
  line-height: 15px;
  z-index: 2;
  &.active{
    background-color: #3ab446;
  }
  &:hover{
    .tip-content{
      opacity: 1;
      visibility: visible;
      @include  transform(translate(-50%, calc(-100% - 13px)));
    }
  }
  &:after{
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    position: relative;
    font-size: 8px;
    color: #fff;
    top: -2px;
  }
  .tip-content{
    position: absolute;
    top: 0;
    left: 50%;
    @include  transform(translate(-50%, calc(-100% - 20px)));
    background: #333;
    color: #fff;
    padding: 10px;
    min-width: 200px;
    line-height: 1.5;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 999;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    @include transition(all 0.3s);
    &:after{
      font-family: "Font Awesome 5 Pro";
      font-weight: 900;
      content: "\f0dd";
      position: absolute;
      bottom: 3px;
      left: 50%;
      font-size: 22px;
      color: #333;
      @include  transform(translate(-50%, 50%));
    }
    h4{
      font-size: 13px;
      color: #fff;
    }
    .list-check{
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
      li{
        @include d-flex();
        @include align-items-center();
        &.active i.fa-check{
          background-color: #3ab446;
        }
      }
      i.fa-check{
        font-size: 8px;
        width: 15px;
        height: 15px;
        background-color: $secondary_color;
        line-height: 15px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        margin-left: 0;
        margin-right: 5px;
      }
    }
  }
}

.company-gallery-details{
  figure img{
    height: 230px;
    object-fit: cover;
    border-radius: 8px;
  }
  .slick-nav .slick-arrow{
    top: calc(50% - 15px);
  }
}

#company-submit-media{
  #civi_thumbnail_container{
    height: 150px;
  }
  #civi_add_thumbnail{
    width: 100%;
  }
  .company-fields-warpper{
    @include d-flex();
  }
  .company-fields-thumbnail{
    width: 100%;
  }
}

.site-layout.has-large-thumbnail{
  margin-top: 24px;
}

.ui-widget.ui-widget-content {
  border: 0 !important;
  @include box-shadow(0 0 3px 3px rgba(0,0,0,0.03))
}

//slider-range
#slider-range{
  background-color: $border_color;
  height: 4px;
  border: none;
  cursor: pointer;
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
    border: 3px solid $accent_color;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    background-color: $border_color;
    cursor: pointer;
  }
  .ui-state-default:focus-visible{
    outline: $accent_color;
  }
}

#range-slider{
  padding-top: 18px;
  #amount{
    background-color: transparent;
    text-align: center;
    margin-top: 10px;
    border: 0 !important;
  }
}

.ui-slider .ui-slider-range{
  background-color: $accent_color;
}

#ui-datepicker-div{
  background-color: #fff;
  .ui-datepicker-header{
    @include d-flex();
    padding: 10px;
    color: $accent_color;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #eee;
  }
  .ui-datepicker-title{
    margin-left: auto;
    select {
      &.ui-datepicker-month,
      &.ui-datepicker-year {
        border: none;
        border-radius: 0;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0px 0px 0 5px;
        cursor: pointer;
        color: var(--civi-color-accent);
        font-family: "Inter";
      }
      &.ui-datepicker-month {
        padding-right: 2.5px;
        text-align-last: right;
      }
      &.ui-datepicker-year {
        padding-left: 2.5px;
        padding-right: 5px;
      }
    }
  }
  .ui-datepicker-next{
    margin-left: 15px;
  }
  .ui-corner-all{
    cursor: pointer;
  }
}

table.ui-datepicker-calendar{
  margin: 0;
}

@media(max-width: 576px){
  #company-submit-media{
    .company-fields-warpper{
      display: block;
    }
  }
}


