//colors
$white: #fff;
$color_pink_approx: #fcc8c8;
$color_gravel_approx: #4a4a4a;
$color_scandal_approx: #d1fff5;
$color_sulu_approx: #c1f885;
$color_mabel_approx: #d7edff;
$black_50: rgba(0, 0, 0, 0.5);
$color_fiord_approx: #455064;
$color_st_tropaz_approx: #215898;
$color_turquoise_approx: #50e3c2;
$color_shark_approx: #232425;
$color_shark_30_approx: rgba(35, 36, 37, 0.3);
$color_sweet_pink_approx: #ff9aa7;
$color_star_dust_approx: #9e9e9e;
$color_rhino_approx: #2a3967;
$black_5: rgba(0, 0, 0, 0.05);
$color_mountain_mist_approx: #979797;
$seashell: #f1f1f1;
$color_geyser_approx: #d4dfe5;
$color_regal_blue_approx: #0d4079;
$color_ocean_green_approx: mediumseagreen;
//fonts
$font_0: Material Icons;
$font_1: Simple-Line-Icons;
$font_2: Simple Line Icons;
//urls
$url_0: url(../fonts/MaterialIcons-Regular.eot);
$url_1: url(../fonts/MaterialIcons-Regular.woff2);
$url_2: url(../fonts/MaterialIcons-Regular.woff);
$url_3: url(../fonts/MaterialIcons-Regular.ttf);
$url_4: url(https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.eot);
$url_5: url(https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.woff2);
$url_6: url(https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.woff);
$url_7: url(https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.ttf);
html {
  background: $white;
}

.gec-pink-btn {
  background-color: $color_pink_approx !important;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: $color_gravel_approx !important;
}

.gec-green-btn {
  background-color: $color_scandal_approx !important;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: $color_gravel_approx !important;
}

.gec-greenyellow-btn {
  background-color: $color_sulu_approx !important;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: $color_gravel_approx !important;
}

.gec-blue-btn {
  background-color: $color_mabel_approx !important;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: $color_gravel_approx !important;
}

.gec-white-btn {
  background-color: $white !important;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: $color_gravel_approx !important; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  box-shadow: 0 1px 2px 0 $black_50;
  padding: 5px 25px;
}

.txt-color-blueDark {
  font-weight: 500;
  text-align: left;
  color: $color_shark_approx !important;
  padding-left: 10px;
}

.card {
  position: relative;
  margin: 0 20px 20px;
  padding: 10px 50px;
  background-color: $white; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  transition: box-shadow .25s; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 4px; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
  box-shadow: 0 0px 3px 0 rgba(188, 205, 215, 0.2), 0 1px 5px 0 rgba(188, 205, 215, 0.2), 0 3px 1px -1px rgba(188, 205, 215, 0.2);
  border: 1px solid #c9d7df;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  color: $color_shark_approx;
}

.card-title {
  margin-right: 10px;
}

.tab-lebel-wrapper {
  margin: 0 50px;
  label {
    background-color: $color_scandal_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: .25em .25em 0 0;
    color: $color_gravel_approx;
    cursor: pointer;
    font-size: 1em;
    height: 2.5em;
    line-height: 2.5em;
    margin-right: 50px;
    padding: 0 1.5em;
    margin-bottom: 0;
    margin-top: 18px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    &.active {
      background-color: $color_pink_approx; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
      box-shadow: 0 1px 2px 0 $black_50;
    }
  }
}

.icons {
  font-family: $font_2;
  display: inline-block;
}

.input-field {
  margin-top: 1rem;
  position: relative;
  input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid $color_star_dust_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 20px 0;
    padding: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none; //Instead of the line below you could use @include box-sizing($bs)
    box-sizing: content-box; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.3s;
    font-size: 20px !important;
    &:focus {
      border-bottom: 1px solid $color_rhino_approx !important; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
      box-shadow: 0 1px 0 0 $color_rhino_approx !important;
    }
    &:not(.browser-default) {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid $color_star_dust_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 0;
      outline: none;
      height: 3rem;
      width: 100%;
      font-size: 1rem;
      margin: 0 0 20px 0;
      padding: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
      box-shadow: none; //Instead of the line below you could use @include box-sizing($bs)
      box-sizing: content-box; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
      transition: all 0.3s;
    }
  }
  input::-webkit-input-placeholder {
    opacity: 0.5;
    font-size: 20px;
    font-weight: 300;
    text-align: left;
    color: $color_shark_approx;
  }
  input::-moz-placeholder {
    opacity: 0.5;
    font-size: 20px;
    font-weight: 300;
    text-align: left;
    color: $color_shark_approx;
  }
  &.inline input {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }
}

.school-searchbox {
  margin-right: 50px;
}

#daterange-picker {
  border: none; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  transition: all 0.1s;
  cursor: pointer;
  width: 300px;
  &:hover {
    background-color: $black_5;
  }
  &:focus {
    background-color: $black_5;
  }
}

.gec-dropdown-btn {
  //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  box-shadow: none;
  border: none;
  border-bottom: 1px solid $color_mountain_mist_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 0 !important;
  &:focus {
    border-bottom: 1px solid $color_mountain_mist_approx !important; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none !important;
  }
}

.t-dropdown-block {
  width: 70%;
}

.t-dropdown-list {
  display: none;
  background-color: $white;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  position: absolute;
  margin-top: 10px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 3px;
  background-color: $white;
  border: solid 1px $color_mountain_mist_approx;
}

.t-dropdown-item {
  padding: 5px 20px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: $color_shark_approx;
  &:active {
    background-color: $color_sulu_approx;
  }
}

.t-dropdown-select {
  width: 100%;
  height: 100%; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background-color: $white; //Instead of the line below you could use @include box-sizing($bs)
  box-sizing: content-box;
}

.t-dropdown-input {
  height: 100%;
  width: 100%;
  padding: 0 3px 0 10px; //Instead of the line below you could use @include box-sizing($bs)
  box-sizing: border-box;
  cursor: pointer;
}

.t-select-btn {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 7px;
  position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  height: 100%;
  &:active {
    background-color: $seashell;
  }
}

.tag {
  height: 20px;
  background-color: $color_geyser_approx;
  padding: 3px;
  font-size: 14px;
  font-weight: 300;
  text-align: left;
  color: $color_gravel_approx;
  margin-right: 40px;
  .close {
    float: none !important;
    color: $color_gravel_approx;
    font-size: 24px;
    opacity: 1 !important; //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: none;
  }
}

.setting-section {
  margin-top: 50px;
  textarea {
    font-size: 14px;
    height: 290px;
    width: 100%;
    border: solid 1px $color_mountain_mist_approx;
    resize: none;
    padding: 15px 10px;
  }
  textarea::-webkit-input-placeholder {
    font-weight: 300;
    color: $color_star_dust_approx;
  }
  span:first-child {
    margin-left: 10px;
  }
  a.btn {
    padding: 6px 40px;
  }
}

.parent-manage-wrapper {
  .card-title {
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    color: $color_shark_approx;
  }
  textarea {
    width: 100%;
    height: 109px;
    resize: none; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    background-color: $white;
    border: solid 1px $color_mountain_mist_approx;
  }
  .btn {
    width: 100px;
  }
  .save-btn {
    float: right;
    margin-right: 100px;
  }
  .cancel-btn {
    margin-left: 100px;
  }
  .remove-btn {
    color: $color_sweet_pink_approx;
  }
  .edit-btn {
    color: $color_gravel_approx;
    cursor: pointer;
    font-size: 18px;
    font-weight: 300;
    i {
      margin-right: 6.5px;
    }
  }
  .input-field.inline input {
    width: 50%;
  }
}

.collapse-sign em {
  // color: $white;
  font-size: 16px;
  vertical-align: middle;
}

.smart-style-2 nav ul {
  ul li>a {
    padding-left: 60px !important;
  }
  .active>a {
    font-weight: 300 !important;
  }
  li.open>a {
    font-weight: 300 !important;
    b {
      font-weight: 300 !important;
    }
  }
}

.export-wrapper label {
  background-color: $color_sweet_pink_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: .25em .25em 0 0;
  color: $color_gravel_approx;
  cursor: pointer;
  font-size: 1em;
  height: 2.5em;
  line-height: 2.5em;
  margin-right: 50px;
  padding: 0 1.5em;
  margin-bottom: 0;
  margin-top: 18px;
  margin-right: 60px;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
}

.setting-wrapper .tab-lebel-wrapper label.active {
  background-color: $color_sulu_approx !important; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  box-shadow: 0 1px 2px 0 $black_50;
}

.search-wrapper .input-field {
  display: inline;
  &.inline input {
    width: 30%;
    margin-top: 20px;
  }
}

.tab-btn-wrapper .tab-btn {
  width: 70px;
  height: 70px;
  border: solid 1px $color_regal_blue_approx; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  padding: 10px;
  text-align: center;
  display: inline-block;
  margin-left: 50px;
  margin-bottom: 50px;
  cursor: pointer;
  color: $color_regal_blue_approx;
  &.active {
    filter: drop-shadow(0px 1px 1px $color_ocean_green_approx);
  }
  img {
    width: 90%;
    height: 90%;
  }
  .tab-btn-title {
    margin-top: 20px;
  }
}