@import '../components/Variables.scss';

html {
  overflow-x: hidden;
}

body {
  font-family: 'Lato', Raleway;
  background: $app-bg-color;
  color: $app-color;
  -webkit-font-feature-settings: "lnum";
  -moz-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

.app-color {
  background-color: $app-color !important;
}

.app-color-text {
  color: $app-color !important;
}

.text-with-opacity {
  opacity: 0.7;
}

.app-heading-color {
  color: $app-heading-color !important;
}

.app-bg-color {
  background: $app-bg-color !important;
}

.cursor-pointer {
  cursor: pointer;
}

.purple {
  background-color: #7D50FC;
}

.cyan {
  background-color: #26c6da;
}

.orange {
  background-color: #F5B64B;
}

.red {
  background-color: #E93F3F;
}

.blue {
  background-color: #2979FF;
}

.bg-disable {
  background-color: $disable;
}

.radio-button-label {
  padding-right: 3rem;
  vertical-align: text-top;

  &:nth-last-of-type(1) {
    padding-right: 0;
  }
}

.landing-navbar-brand {
  img {
    max-width: 150px !important;
    max-height: 60px !important;
  }
}

.data-table-sort-parent {
  display: table;
  width: 100%;
  vertical-align: middle
}

.data-table-sort-child {
  display: table-cell;
}

.data-table-sort-icon {
  opacity: 0.3;
}

.table {
  th {
    border-bottom: none !important;
    border-top: none;
  }

  tr {
    &:nth-last-child(1) {
      td {
        border-bottom: 1px solid #dee2e6;
      }
    }
  }
}

.back-img {
  background: url("/images/background/background-image.jpeg") no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.back-img::before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
  z-index: -1;
  opacity: 0.4;
}

//Chips
.chip {
  display: inline-block;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background-color: #e4e4e4;
  margin-bottom: 5px;
  margin-right: 5px;

  .close {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
  }
}

.sign-in-sign-up-content {
  background: #ffffff;
  height: 100vh;
  overflow: auto;
  display: flex;
  align-items: center;
}

.sign-in-sign-up-form {
  max-height: 100vh;
  padding: 2.5rem !important;
  width: 100vw;

  .application-logo {
    .logo {
      max-width: 150px !important;
      max-height: 60px !important;
    }
  }
}

//Modal
.big-modal-dialog {
  max-width: 50vw;
}

.biggest-modal-dialog {
  max-width: 50vw;
}

.form-group {
  margin-bottom: 1.5rem;
}

//Buttons
.btn {
  &.app-color {
    border-color: $app-color;
    color: $white;

    &:hover {
      background-color: $green !important;
      border-color: $green !important;
    }
  }

  &.cancel-btn {
    background-color: $cancel-btn-color;
    border-color: $cancel-btn-color !important;
    color: $white;

    &:hover {
      background-color: $dark-gray !important;
      border-color: $transparent !important;
    }
  }

  &.mobile-btn {
    &:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}

.btn.app-color:not(:disabled):not(.disabled).active,
.btn.app-color:not(:disabled):not(.disabled):active,
.show > .btn.app-color {
  color: $white;
  background-color: $green !important;
  border-color: $green !important;
}

.btn.app-color:not(:disabled):not(.disabled):active,
.btn.app-color:not(:disabled):not(.disabled).active,
.show > .btn.app-color {
  color: $white;
  background-color: $green !important;
  border-color: $green !important;
}

.btn.app-color.show-selected {
  color: $white;
  background-color: $green !important;
  border-color: $green !important;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: $app-color;
}

//Position
.absolute-right {
  right: 0 !important;
}

.absolute-left {
  left: 0 !important;
}

a.disabled {
  color: $disable !important;
  cursor: default;
  pointer-events: none;

  i {
    color: $disable !important;
  }

  &:hover {

    i {
      color: $disable !important;
    }
  }
}

//Modal
.product-modal {
  max-width: 70vw;
}

//Slide effects
.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #ffffff00 !important;
  background-image: none !important;
  color: rgb(0, 0, 0) !important;
}

@media (min-width: 576px) {
  .la-plus-circle:hover {
    color: #34bfa3;
  }

  .la-minus-circle:hover {
    color: #34bfa3;
  }

  .del-icon-color:hover {
    color: #dc3545 !important;
  }
}

.cursor-text {
  cursor: text !important;
}

@media only screen and (max-width: 767px) {
  .mobile-btn {
    margin-right: 0.75rem;

    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }
  }
  .modal-dialog {
    max-width: 100vw;
  }
}

@media only screen and (max-width: 1280px) {
  .biggest-modal-dialog {
    max-width: 60vw;
  }
}

@media only screen and (max-width: 1100px) {
  .biggest-modal-dialog {
    max-width: 65vw;
  }

}

@media only screen and (max-width: 835px) {
  .biggest-modal-dialog {
    max-width: 70vw;
  }
}

.action-dropdown {
  .dropdown-toggle {
    .la-ellipsis-v {
      color: #b0b6c5 !important;
      font-size: 24px;
    }

    &:after {
      display: none;
    }
  }

  .dropdown-menu {
    border: 0;
    width: 50px !important;
    padding: 0;
    box-shadow: 0 0 10px 2px rgba(60, 55, 68, 0.15);

    .dropdown-item {
      &:hover {
        color: $app-color;
        background-color: #e6e6e6;
      }

      &:focus {
        color: $app-color;
        background-color: #e6e6e6;
      }
    }
  }

  .dropdown-menu.show {
    left: -15px !important;
  }
}

.toasted-container.top-right {
  right: 0.75rem !important;
}

// Styles for All Notification Page
.all-notification-wrapper {
  .media {
    padding: 0.4rem 0 0.4rem 0.4rem;
    transition: background-color .3s;
    border-bottom: 1px solid #dddfe2;

    &:first-of-type {
      border-top: 1px solid #dddfe2;
    }

    &:hover {
      background-color: #f6f6f7;
      cursor: pointer;
    }
  }
}

.vdp-datepicker__calendar {
  border: 0;
  box-shadow: rgb(204, 204, 204) -3px 4px 12px -1px;

  .day-header {
    color: #999;
  }

  .cell {
    height: 35px;
    font-size: 12px;
    line-height: 35px;
  }

  .selected {
    color: #fff;
    background: #2d2f3d;
  }

  .cell {
    &:hover {
      border: 0 !important;
      color: #000 !important;
      background: #eee !important;
    }
  }

  .blank {
    &:hover {
      background: transparent !important;
    }
  }
}

.form-control:invalid, .form-control.is-invalid,
.custom-select:invalid, .custom-select.is-invalid {
  background-image: none !important;
}

// Summernote editor modified style
.note-editor.note-frame {
  border-color: #e2e2e2 !important;
}

.note-editor.note-frame .note-editing-area .note-editable {
  min-height: 300px !important;
}