@mixin core-theme($theme) {
  $primary: map-get($theme, primary);
  $accent-palette: map-get($theme, accent);
  $complete: mat-color($accent-palette, A400);
  $accent: mat-color($accent-palette, A200);
  $foreground: map-get($theme, foreground);

  .brand-color {
    @include main-xs-bg(mat-color($primary, A700),mat-color($primary, 500),mat-color($primary, 700),mat-color($primary, 700));
  }

  .footer {
    color: mat-color($primary, 50);

    .input-with-button {
      border: 1px solid fade-out(mat-color($primary, 50), 0.5);

      .mat-input-element {
        color: mat-color($primary, 50);
      }
      .mat-button {
        background-color: mat-color($primary, 50);
        color: mat-color($primary, 500);
      }
      .mat-input-placeholder {
        color: mat-color($primary, 50);
      }

    }
  }
  .security-section {
    .security-label {
        color: mat-color($primary,50);
        background-color: $accent;

    }
  }


.step-form {
  background-color: #ebebeb;
  padding: 10px;
  text-align: left;
  color: #000;
  height: 400px;
}


div.knok-progress > mat-slider > div > div > .mat-slider-thumb-label {
  transform: rotate(180deg) !important;
  border-radius: 0 0 0 !important;
  margin-top:48px;
  margin-left:50px;
  //width: 60px;
  height: 16px;
  background-color: lightgray;
}

div.knok-progress > mat-slider > div > div > .mat-slider-thumb-label:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

div.knok-progress > mat-slider > div > div > .mat-slider-thumb-label:before {
  top:16px; //height
  left:8px; //height
  border: 6px solid transparent;
  border-top-color: lightgray;
}


div.knok-progress > mat-slider > div > div > .mat-slider-thumb {
  transform: scale(0) !important;
}

div.knok-progress > mat-slider > div > div > div> .mat-slider-thumb-label-text {
  opacity: 1 !important;
  transform: rotate(180deg) !important;
  color: #000;
}

.mat-raised-button.mat-primary[disabled], .mat-raised-button.mat-accent[disabled], 
.mat-raised-button.mat-warn[disabled], .mat-raised-button[disabled][disabled], 
.mat-fab.mat-primary[disabled], .mat-fab.mat-accent[disabled], .mat-fab.mat-warn[disabled], 
.mat-fab[disabled][disabled], .mat-mini-fab.mat-primary[disabled], .mat-mini-fab.mat-accent[disabled], 
.mat-mini-fab.mat-warn[disabled], 
.mat-mini-fab[disabled][disabled] {
  border:2px solid gray !important;
}

.added-btn-container > .mat-mini-fab
{
  background-color: #000 !important;
  color: #fff !important;  
}

.ref-button > span{
  font-size: 24px !important;
  line-height: 0 !important;
  font-weight: bold !important;
  //margin-left: 1px;
}

.ref-button-sm > span{
  font-size: 25px !important;
  line-height: 0 !important;
  font-weight: bold !important;
  padding:0 !important;
  margin-left: 1px;
}

.left-panel{
  padding-left:20px;
}

.right-panel{
  margin-right: 20px;
}

.right-panel-block{
  border: 2px solid #000; 
  color: #000;
  font-size:15px;
  font-weight: bold;
}

.knok-common {
  color: #000;
}

.mat-progress-bar-buffer{
  background-color: #fff;
}

.mat-progress-bar-fill::after {
  background-color: rgba(204, 204, 204, 1); //gray !important;
  // background: repeating-linear-gradient(
  //   -45deg,
  //   lightgray,
  //   #fff 10px,
  //   lightgray 10px,
  //   #fff 10px
  // );
}

.mat-menu-item{
  text-align: center !important;
}

.wrapper {
  display: inline-block;
  position: relative;

  .hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.5s;
    z-index: 1000;
  }

  // .hover:hover {
  //   background-color: rgba(0, 188, 212, 0.8);
  //   // You can tweak with other background properties too (ie: background-image)...
  // }
}

.price{
  .noUi-horizontal {
    height: 12px;
    width: 210px;
    border:1px solid #000;
  }
  .noUi-handle{
    box-shadow:none !important;
    border:1px solid #000;
    // margin-top: 24px;
    height: 22px !important;
    width: 14px !important;
  }

  .noUi-handle-upper{
    right:-24px !important;
    
  }

  .noUi-handle-lower{
    right:8px !important;
  }

  .noUi-handle-lower:after, .noUi-handle-lower:before {
    // bottom: 40%;
    // left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    background-color: transparent;
    position: absolute;
    pointer-events: none;
  }

  .noUi-handle-lower:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #fff;
    border-width: 9px;
    margin-left: -5px;
    margin-top: -5px;
  }
  .noUi-handle-lower:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color:#000;
    border-width: 10px;
    margin-left: -2px;
    margin-top: -6px;
  }

  .noUi-handle-upper:after, .noUi-handle-upper:before {
    // bottom: 40%;
    // left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    background-color: transparent;
    position: absolute;
    pointer-events: none;
  }

  .noUi-handle-upper:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 9px;
    margin-left: -35px;
    margin-top: -5px;
  }
  .noUi-handle-upper:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color:#000;
    border-width: 10px;
    margin-left: -34px;
    margin-top: -6px;
  }
  
  .noUi-connects {
    background-image: url("bar-horiz.png");
    background-size: cover;
  }

  .noUi-connect{
    background: 0;
  }
  
}
.rate{
    .noUi-vertical{
      height: 160px;
      width: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border:1px solid #000;
    } 

    .noUi-handle{
      // border-radius: 50%;
      // background: #000 !important;
      // height: 16px !important;
      // width: 16px !important;
      box-shadow:none !important;
      // border:1px solid #000;
      // right:-8px !important;
      border:1px solid #000;
      margin-top: 24px;
      height: 16px !important;
      width: 20px !important;
    }

    .noUi-handle:after, .noUi-handle:before {
      bottom: 100%;
      left: 40%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      background-color: transparent;
      position: absolute;
      pointer-events: none;
    }

    .noUi-handle:after {
      border-color: rgba(136, 183, 213, 0);
      border-bottom-color: #fff;
      border-width: 9px;
      margin-left: -7px;
      margin-top: -34px;
    }
    .noUi-handle:before {
      border-color: rgba(194, 225, 245, 0);
      border-bottom-color:#000;
      border-width: 10px;
      margin-left: -8px;
      margin-top: -33px;
    }

    // .noUi-handle:after, .noUi-handle:before{
    //   background: #fff !important;
    //   height: 0px;
    //   width: 0px;
    // }

    // .noUi-tooltip
    // {
    //   border:0;
    //   bottom:-210% !important;
    //   font-size: 80%;
    // }

    .noUi-connects {
        background-image: url("bar.png");
        background-size: contain;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      .noUi-base:before {
        content: '';
        position: absolute;
        margin: -3px 0 0 -12px;
        border: 2px solid #999;
        width: 24px;
        z-index: 2;
      }


    // .noUi-target {
    //   border: 0;
    // }
}
.knok-button{
  font-size:12px;
  .knok-button-top {
    margin:24px 0 0 0;
    line-height: 2em;
  }

  .knok-button-bottom {
    line-height: 0;
  }
}

  .mat-selection-list {
    padding-top: 0px !important; 
  }

  .mat-list-text{
      text-align: left !important;
  }

  .mat-tab-label { //mat-ripple mat-tab-label-active ng-star-inserted
      width: 50% !important;
      background-color:#cbcbcb;
      color:#000;
      &.mat-tab-label-active{
        background: #fff;
      }

    .vaidation-status{
      position: relative;
      color:green;
      left: 55%;
      text-align: center;
      mat-icon:before{
        content: 'check';
      }
    
      &.missing{
        position: relative;
        color:red;
        left: 55%;
        div:after{
          content: 'MISSING';
        }
        mat-icon:before{
          content: 'info_outline';
        }
      }
      &.weak{
        position: relative;
        color:red;
        left: 55%;
        div:after{
          content: 'WEAK';
        }
        mat-icon:before{
          content: 'info_outline';
        }
      }
      &.meh{
        position: relative;
        color:orange;
        left: 55%;
        div:after{
          content: 'MEH...';
        }
        mat-icon:before{
          content: 'info_outline';
        }
      }
    }
  } 
  
  .header-row{
    .mat-tab-label { //mat-ripple mat-tab-label-active ng-star-inserted
      width: 50% !important;
      background-color: rgba(242, 242, 242, 1); // #cbcbcb;
      color:#000;
      &.mat-tab-label-active{
        background-color: rgba(242, 242, 242, 1); 
        font-weight: bold;
      }
    }
  }
  
  .ngx-select__placeholder{

    float: none !important;
    margin-left: 25%;
  }

  .preview-form {
    .step-header-caption{
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }
  }

  .mat-dialog-container{
      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
  }
}
