:root {
  --primary-background-color: rgb(8, 8, 8);
  --primary-text-color: rgb(250, 231, 0);
  --secondary-background-color: rgb(189, 173, 0);
  --secondary-text-color: rgb(0, 0, 0);
  --primary-link-color: rgb(130, 130, 130);
  --primary-link-hover-color: rgb(186, 174, 44);
  --button-text-color: rgb(255, 255, 255);
  --button-color: rgb(0, 0, 0);
  --inactive-button-color: rgb(159, 159, 159);
  --inactive-text-color: #000000;
  --pie-started-color: rgb(255, 247, 0);
  --pie-not-started-color: rgb(194, 0, 0);
  --pie-finalized-color: rgb(0, 0, 0);
  --button-hover-color: rgb(63, 63, 63);
}

body[data-topbar=dark] .header-item {
  color: var(--primary-text-color);
}

body[data-topbar=dark] .noti-icon i {
  color: var(--primary-text-color);
}

.login-text {
  color: var(--primary-text-color) !important;
}
.bg-color-picker {
  width: 20%;
  margin: 0 1em 0.5em;
  padding: 0.1em;
  height: 3em;
}

.bg-color-btn button {
  margin: 1em 1em 0.5em;
  padding: 0.75em;
  background-color: var(--button-color);
  color: var(--button-text-color);
}

.bg-color-btn button:hover {
  background-color: var(--button-hover-color);
  color: var(--button-text-color);
}

.bg-text-picker {
  width: 20%;
  margin: 0 1em 0.5em;
  padding: 0.1em;
  height: 3em;
}
.bgColorPicker {
  margin-left: 1em;
}
.txtColorPicker {
  margin-left: 1em;
}

.bg-text-btn button {
  margin: 1em 1em 0.5em;
  padding: 0.75em;
  background-color: var(--button-color);
  color: var(--button-text-color);
}

.bg-text-btn button:hover {
  background-color: var(--button-hover-color);
  color: var(--button-text-color);
}

.mm-active .active i {
  color: var(--primary-text-color) !important;
}
.mm-active:hover {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .active i {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .active span {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .active span:hover {
  color: var(--primary-link-hover-color) !important;
}
.mm-active {
  color: var(--primary-link-hover-color) !important;
}
.mm-active > a {
  color: var(--primary-link-hover-color) !important;
}
.mm-active > a i {
  color: var(--primary-link-hover-color) !important;
}
.mm-active > i {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .active {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .active i {
  color: var(--primary-link-color) !important;
}
.mm-active .sub-menu li a, i, span {
  color: var(--primary-link-color) !important;
}
.mm-active .sub-menu .mm-active .active {
  color: var(--primary-link-hover-color) !important;
}
.mm-active .sub-menu li:hover > a, i, span {
  color: var(--primary-link-hover-color) !important;
}
.metismenu li a, i, span {
  color: var(--primary-link-color) !important;
}
.metismenu li a:hover {
  color: var(--primary-link-hover-color) !important;
}
.metismenu li a, span:hover {
  color: var(--primary-link-hover-color) !important;
}
.metismenu li a, span {
  color: var(--primary-link-color) !important;
}
.metismenu li a.mm-active {
  color: var(--primary-link-hover-color) !important;
}
.metismenu li:hover a.waves-effect i, a.waves-effect:after {
  color: var(--primary-link-hover-color) !important;
}
.metismenu li a.waves-effect:after {
  color: var(--primary-link-color) !important;
}
.header-menu-mover {
    margin-right: 3em;
  }

  #page-topbar {
    background-color: var(--primary-background-color) !important;
  }

  .page-content {
    padding-left: 2em;
  }

  .departments-icon {
    width: 10px;
    padding-left: 0;
    padding-right: 0.5em;
    content: url('/assets/images/hierarchical-structure-grey.png');
  }

  .departments-icon:hover {
    content: url('/assets/images/hierarchical-structure_hover.png');
  }
  
    .help-link {
    position: absolute;
    bottom: 0;
  }

  .btn-color {
    border-radius: 0.5em;
    background-color: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text-color);
  }

  .btn-color:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    color: var(--button-text-color);
  }
  
  .btn-color-active {
    border-radius: 0.5em;
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    color: var(--button-text-color);
  }
  
  .btn-color-active:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    color: var(--button-text-color);
  }

  #toast-container {
    top: 5em !important;
    /* left: 50% !important; */
  }

  a {
    color: var(--primary-link-color);
  }

  a:hover {
    color: var(--primary-link-hover-color);
  }

  .mm-active .active {
    color: var(--primary-text-color) !important;
  }

  .mm-active a:hover {
    color: var(--primary-link-hover-color) !important;
  }

  .mm-active a:hover i {
    color: var(--primary-link-hover-color)!important
  }


  /* .page-link {
    background-color: #B73093;
  } */

  .paginate_button.active .page-link {
    background-color: var(--button-color);
    border-color: var(--button-color);
  }

  .nav-menu-bar-side {
    margin-left:1.5em !important;
  }

  .ns-ques-grid {
    width: 50%;
  }

  .sm-ques-grid {
    width: 50%;
  }

  .sm-rating-grid {
    padding-left: 7em !important;
  }

  .sm-ques-grid p {
    margin-bottom: 0;
  }

  .ri-edit-2-line {
    border: 1px solid var(--primary-link-color);
    padding: 0.25em;
    border-radius: 5px;
    position: relative;
    margin: 0 0.5em;
  }

  .ri-edit-2-line:hover {
    border: 1px solid var(--primary-link-hover-color);
  }

  .ri-eye-line {
    border: 1px solid var(--primary-link-color);
    padding: 0.25em;
    border-radius: 5px;
    position: relative;
    margin: 0 0.5em;
    /* display: inline-block; */
  }

  .ri-eye-line:hover {
    border: 1px solid var(--primary-link-hover-color);
  }

  i .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color:#efefef;
    color: #f30fd8;
    text-align: center;
    border-radius: 5px;
    padding: 0.25em 0;
    position: absolute;
    z-index: 1;
    top: -30px;
    left: -75%;
  }

  i:hover .tooltiptext {
    visibility: visible;
  }

  .vertical-menu {
    width: 250px !important;
  }

  .card {
    border-radius: 10px;
  }

  .review-form-start-field {
    display: flex;
    padding-top: calc(0.47rem + 1px);
    padding-bottom: calc(0.47rem + 1px);
    margin-left: 0;
  }

  .head-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .rev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
    row-gap: 2em;
  }

  .collapsible {
    width: 95%;
    max-width: 95%;
    outline: none;
    background-color: #fff;
    border: none;
    text-align: left;
  }
  
  .collapsible h2 {
    border: 1px solid #f3f4f7;
  }

  .collapsible h2:hover {
    background-color: #f3f4f7;
  }

  .collapsible h2:after {
    content: '\002B';
    color: var(--button-color);
    font-weight: bold;
    font-size: 30px;
    float: right;
    margin-left: 2em;
    margin-right: 25px;
  }

  .active h2:after {
    content: '\002D';
  }

  .contentNew {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    text-align: left;
    max-width: 95%;
    }
    
    .card-nav {
      transition: all .4s ease-in-out;
    }
    
    .card-nav:hover {
      transform: scale(1.05);
    }
    
    .rating-grid-column {
      width: 20%;
      text-align: center;
    }

  @media screen and (max-width: 480px) {
    .head-grid {
      grid-template-columns: auto;
    }

    .rev-grid {
      grid-template-columns: auto;
    }

    #recom_rating {
      width: 100% !important;
    }
  }
  
  input[type='checkbox'] {
    accent-color: var(--button-color) !important;
}
.card-header-with-button {
  display: flex;
  justify-content: space-between;
}

.delete-buttons {
  display: flex;
  right: 0;
}

.delete-buttons a {
  margin: 0 1em;
}

.question-ratings {
  width: 75%; 
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.question-ratings-wrapper {
  display: flex; 
  justify-content:space-between;
}

.goals {
  border: 1px solid #c0c0c0;
}

#goals textarea {
  resize: none;
}

#emp-comments {
 display: none;
}