base_ui/assets/common/scss/common.scss

.pages {
  .pages-content {
    display: flex;
    align-items: flex-start;
    min-height: 32em;
    min-height: 22em;
    // height: calc(100vh - 4em);
    //height: calc(100dvh - 9.2em);
    //height: calc(100dvh - 3.8em);
    overflow: auto;
    padding: 1em;

    .side-panel {
      // width: 19em;
      border-right: 2px solid #eee;
      padding: 0em 1em;
      height: 100%;

      position: relative;
      height: calc(100dvh - 8em) !important;
      overflow-y: auto;

      max-width: 25em;
      // width: auto!important;
      width: 100%;
      border-right: 1px solid #eee;
      padding: 1.5em !important;
      font-size: 0.8rem;

      &:hover {
        .float-edit-btn {
          box-shadow: 0px 0px 24px 0px #ddd;
          background-color: rgba(255, 255, 255, 1);

          i {
            color: var(--primary);
          }
        }
      }

      .form-group {
        /*display: flex;*/
        /*align-items: center;*/

        label {
          margin-bottom: 0;
          /*margin-left: 0.5em;*/
          color: #92a2b2;
        }

        p {
          margin-bottom: 0;
          color: #6f6f6f;
        }
      }

      .side-panel-header {
        margin-bottom: 1.5em;
      }

      .side-panel-footer {
        display: flex;
        justify-content: space-between;

        .btn {
          display: inline-flex;
          align-items: center;
        }
      }
    }
  }
}
.overflow-visible {
  overflow: visible !important;
}
.rounded-castom {
  border-radius: 0.5rem;
}

.color-inherit {
  color: inherit;
}

.breadcrumb {
  margin-right: 0.5em;
}

.-rotate-180 {
  transform: rotateY(180deg);
}

.no-wrap {
  white-space: nowrap;
}

.user-avatar {
  width: 1.5em;
  height: 1.5em;
  object-fit: cover;
  object-position: center;
  // box-shadow: 0px 0px 5px 1px #ddd;
  border-radius: 50%;
}

/* Fixes Firefox anomaly during image load */
@-moz-document url-prefix() {
  img:-moz-loading {
    visibility: hidden;
  }
}
/**
* styling scrollbar
* Styling Scrollbars in Chrome, Edge, and Safari
 */

::-webkit-scrollbar {
  width: 0.7em;
  /* width of the entire scrollbar */
  height: 0.3em;
}

::-webkit-scrollbar-track {
  background: #eee;
  /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* color of the scroll thumb */
  border-radius: 0.5em;
  /* roundness of the scroll thumb */
  border: 1px solid #eee;
  /* creates padding around scroll thumb */
}

input,
textarea,
.form-control {
  &::-webkit-input-placeholder {
    // color: #999999;
    color: #b7b7b7;
    text-align: right;
    // direction: ltr;
    font-family: "sahel-light";
  }
  &:-ms-input-placeholder {
    // color: #999999;
    color: #b7b7b7;
    text-align: right;
    // direction: ltr;
    font-family: "sahel-light";
  }
  &::-ms-input-placeholder {
    // color: #999999;
    color: #b7b7b7;
    text-align: right;
    // direction: ltr;
    font-family: "sahel-light";
  }
  &::placeholder {
    // color: #999999;
    color: #b7b7b7;
    text-align: right;
    // direction: ltr;
    font-family: "sahel-light";
  }

  &[dir="ltr"],
  &[type="number"],
  &[type="tel"],
  &[type="email"] {
    &::-webkit-input-placeholder {
      direction: ltr;
    }
    &:-ms-input-placeholder {
      direction: ltr;
    }
    &::-ms-input-placeholder {
      direction: ltr;
    }
    &::placeholder {
      direction: ltr;
    }
  }
}

.firefox-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #ccc #eee;
}

.dropdown-toggle {
  display: flex;
  align-items: center;

  &::after {
    content: "";
    border: none;
    background-image: url("../img/chevron-left.svg");
    background-position: bottom left;
    background-size: cover;
    width: 1.3em;
    height: 1.3em;
    margin: auto;
    transform: rotate(-90deg);
  }
}

.breadcrumb {
  .breadcrumb-item:not(:last-child) {
    .router-link-active {
      color: #00b6e3;
    }
  }
}

.disabled {
  opacity: 0.7;
  filter: grayscale(0.6);
  cursor: not-allowed !important;
}

.btn-hover {
  color: rgb(85, 85, 85);
  text-decoration: none;
}

.btn-hover:hover {
  color: rgb(0, 185, 226) !important;
  text-decoration: none;
}

.title {
  // color: #a7a098;

  .num {
    color: #d9d2c8;
    font-size: 10px;
  }
}

.label-color {
  color: #bbb;
}

// .card-hover:hover {
//   background-color:rgba(189, 246, 255, 0.3882352941);
//   border-radius: 9px;

// }

//  .no-text-decoration.active{
//     background-color:rgba(189, 246, 255, 0.38);
//     border-radius: 9px;

// }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.collapse-mobile-header {
  display: none;
}
// @import "@assets/common/scss/vuelidate";

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  &:hover {
    text-decoration: none;
    color: #00b6e3;
  }
  &:not([href]) {
    cursor: pointer;
  }
}
.ql-editor {
  text-align: inherit !important;
}
.nav-tabs {
  .nav-item {
    &.show .nav-link {
      // color: #22b0d2;
      color: rgb(109, 110, 113);
    }

    .nav-link {
      border-top-left-radius: 0.3em;
      border-top-right-radius: 0.3em;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      &.active {
        // color: #22b0d2;
        color: rgb(0, 186, 186);
        background-color: #fff;
        border-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        transition: 200ms;
        // border-color: #dee2e6 #dee2e6 #fff;
        border-color: #f6f6f6 #f5f5f5 #fff;
        padding: 0.5em;

        // line-height: 1.9;
        min-width: 6em;
      }
    }
  }

  .float-label {
    position: absolute;
    top: -0.5em;
    right: 0;
    background-color: #fff;
    padding: 0 1em;
    font-size: 0.8rem;
    color: #111;
  }
  .form-control {
    min-width: 11em;
    // border-radius: 0.5em;
    font-family: sahel-semi-bold;
  }
}
// text font sizes.
.text__11 {
  font-size: 0.6875rem;
}
.text__12 {
  font-size: 0.75rem;
}
.text__13 {
  font-size: 0.813rem;
}
.text__14 {
  font-size: 0.875rem;
}
.text__15 {
  font-size: 0.938rem;
}
.text__16 {
  font-size: 1rem;
}
.text__17 {
  font-size: 1.063rem;
}
.text__18 {
  font-size: 1.125rem;
}
.text__19 {
  font-size: 1.188rem;
}
.text__20 {
  font-size: 1.25rem;
}
.text__22 {
  font-size: 1.375rem;
}
.text__23 {
  font-size: 1.4rrem;
}
.text__24 {
  font-size: 1.5rem;
}
.text__25 {
  font-size: 1.5625rem;
}
.text__28 {
  font-size: 1.75rem;
}
.text__30 {
  font-size: 1.875rem;
}
.text__32 {
  font-size: 2rem;
}
.text__36 {
  font-size: 2.25rem;
}
.text__40 {
  font-size: 2.5rem;
}
.text__48 {
  font-size: 3rem;
}
.text__50 {
  font-size: 3.125rem;
}
.text__66 {
  font-size: 4.125rem;
}
.text__145 {
  font-size: 9.063rem;
}
.text__noraml {
  font-weight: normal;
}

// text font weights
.text__bold {
  font-weight: bold;
}

.text__semibold {
  font-weight: 450;
}

.text__center {
  text-align: center;
  justify-content: center;
}
.text__justify {
  text-align: justify;
}

// text colors
.bg__transparent {
  background-color: transparent;
}

.bg__white {
  background-color: #fff;
}

.bg__dark {
  background-color: #f5f8fa;
}

.text__white {
  color: var(--secondary-color);
}

.text__black {
  color: #000;
}

.text__dark {
  color: var(--primary-color);
}

.text__dark-gray {
  color: rgba(7, 7, 7, 0.66);
  color: #96a5b5;
}
.text__dark-green {
  color: #416a59;
}
.text__light {
  color: #818899 !important;
}
.text__dark-blue {
  color: #21325e;
  // color: #3f43bc;
}
.text__blue {
  // color: #3279c7 !important;
  color: rgb(59 130 246) !important;
}
.text__light-blue {
  color: #3083ff;
}
.text__gray {
  color: #92a2b2;
}
// .text__red {
//   color: #9f1918;
// }
.text__red {
  color: #d54b5e;
}
.text__green {
  color: #009c98;
}
.text__pink {
  color: #ea4c89;
}

.btn {
  &.disabled,
  &:disabled {
    filter: grayscale(80%);
    pointer-events: none;
  }

  // &.btn-primary {
  //   color:#fff;
  // }
}


.modal-backdrop.fade.show
{
  display: none !important;
}