// font face

//dropify

$dropify-font-path: "../fonts" !default;

@import "../../node_modules/dropify/src/sass/dropify";

@import "../../node_modules/sweetalert2/src/sweetalert2";

@import "../../node_modules/bootstrap-select/sass/bootstrap-select";

@import "../../node_modules/flag-icon-css/sass/flag-icons";

@import "../../node_modules/quill/dist/quill.snow.css";

@import "../../node_modules/quill-emoji/dist/quill-emoji.css";

@import "../../node_modules/frappe-charts/src/css/charts";

// @import "../../node_modules/bootstrap-icons/font/bootstrap-icons.css";

//10-07-2023 start

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-Bold.woff2") format("woff2"),
    url("../fonts/BloggerSans-Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-BoldItalic.woff2") format("woff2"),
    url("../fonts/BloggerSans-BoldItalic.woff") format("woff");

  font-weight: bold;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-LightItalic.woff2") format("woff2"),
    url("../fonts/BloggerSans-LightItalic.woff") format("woff");

  font-weight: 300;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-Light.woff2") format("woff2"),
    url("../fonts/BloggerSans-Light.woff") format("woff");

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-Italic.woff2") format("woff2"),
    url("../fonts/BloggerSans-Italic.woff") format("woff");

  font-weight: normal;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans.woff2") format("woff2"),
    url("../fonts/BloggerSans.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-MediumItalic.woff2") format("woff2"),
    url("../fonts/BloggerSans-MediumItalic.woff") format("woff");

  font-weight: 500;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: "Blogger Sans";

  src: url("../fonts/BloggerSans-Medium.woff2") format("woff2"),
    url("../fonts/BloggerSans-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

//10-07-2023 end

@font-face {
  font-family: "Helvetica Neue";

  src: url("../fonts/HelveticaNeue.woff2") format("woff2"),
    url("../fonts/HelveticaNeue.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";

  src: url("../fonts/HelveticaNeue-Medium.woff2") format("woff2"),
    url("../fonts/HelveticaNeue-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";

  src: url("../fonts/HelveticaNeue-Bold.woff2") format("woff2"),
    url("../fonts/HelveticaNeue-Bold.woff") format("woff");

  font-weight: Bold;

  font-style: normal;

  font-display: swap;
}

body.dark-theme {
  background-color: #181c34;

  .preloader-container,
  .bg-additional-grey {
    background-color: #181c34;
  }
}

.dropify-wrapper {
  border-radius: 0.25rem;

  border: 1px solid #e8eef3;

  z-index: 0;
}

.dt-buttons button {
  font-size: 14px;

  line-height: unset;

  padding: 0.5rem;
}

.bootstrap-select .dropdown-toggle::after {
  display: inline-block;

  width: 0;

  height: 0;

  margin-left: 0.255em;

  vertical-align: 0.255em;

  content: "";

  border-top: 0.3em solid;

  border-right: 0.3em solid transparent;

  border-bottom: 0;

  border-left: 0.3em solid transparent;
}

.bootstrap-select .dropup .dropdown-toggle::after {
  display: inline-block;

  width: 0;

  height: 0;

  margin-left: 0.255em;

  vertical-align: 0.255em;

  content: "";

  border-top: 0;

  border-right: 0.3em solid transparent;

  border-bottom: 0.3em solid;

  border-left: 0.3em solid transparent;
}

.task-detail-panel {
  white-space: unset;
}

//page preloader

.no-js #loader {
  display: none;
}

.js #loader {
  display: block;

  position: absolute;

  left: 100px;

  top: 0;
}

.preloader-container {
  position: fixed;

  right: 0;

  left: 0;

  top: 0px;

  width: calc(100% - 240px);

  z-index: 9999;

  background: #f2f4f7;

  margin-left: 240px;

  margin-top: 63px;

  min-height: calc(100vh - 63px);
}

.sidebar-toggled .preloader-container {
  margin-left: 60px;

  width: calc(100% - 60px);
}

.rtl .preloader-container {
  margin-right: 240px;

  margin-left: 0px;
}

.rtl.sidebar-toggled .preloader-container {
  margin-right: 60px;

  margin-left: 0px;
}

//bootsrap select

.input-group .bootstrap-select.form-control .dropdown-toggle,
.bootstrap-select > .dropdown-toggle {
  border-color: #e8eef3;

  background-color: #fff;

  padding: 0.5rem;

  font-size: 14px;
}

//quill editor

.ql-toolbar.ql-snow {
  border-color: #e8eef3;

  border-radius: 0.25rem 0.25rem 0 0;

  @include media-breakpoint-down(md) {
    display: flex;

    flex-wrap: wrap;
  }
}

.ql-container.ql-snow {
  border-color: #e8eef3;

  border-radius: 0 0 0.25rem 0.25rem;
}

label sup {
  color: #d30000;
}

table h5 a {
  color: #28313c;

  &:hover {
    text-decoration: underline;
  }
}

.filter-box .select-box .bootstrap-select .dropdown-toggle,
.filter-box
  .select-box
  .bootstrap-select
  .btn-light:not(:disabled):not(.disabled):active,
.filter-box
  .select-box
  .bootstrap-select
  .btn-light:not(:disabled):not(.disabled).active {
  border: none;

  background-color: unset;

  font-size: 14px;

  text-transform: capitalize;

  color: #28313c;

  padding: 0.2rem 0.5rem;
}

.filter-box .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  font-weight: 500;
}

.table [contenteditable="true"]:hover,
.table [contenteditable="true"]:focus {
  background-color: #f2f4f7;
}

.table [contenteditable="true"]:hover::after {
  content: "Click to edit";

  display: block;

  font-size: 11px;

  color: #99a5b5;

  position: absolute;
}

.table [contenteditable="true"]:focus::after {
  content: "Click anywhere to save";

  display: block;

  font-size: 11px;

  color: #99a5b5;

  position: absolute;
}

.bootstrap-select.form-control.is-invalid {
  border: 1px solid #d30000;
}

.w-15 {
  width: 15px;
}

.more-filters {
  .more-filter-tab {
    top: 112px;
  }
}

.multiple-users .btn .badge {
  top: 0;
}

.input-group-prepend .btn,
.input-group-append .btn {
  z-index: 1;
}

#myModal {
  z-index: 1051;
}

.taskEmployeeImg {
  border: 1px solid #e8eef3;
}

.taskEmployeeImg img {
  width: 25px;

  height: 25px;

  object-fit: cover;
}

img.taskEmployeeImg {
  width: 30px;

  height: 30px;
}

.badge img.taskEmployeeImg {
  width: 25px;

  height: 25px;
}

.filter-option-inner-inner img.taskEmployeeImg {
  width: 20px;

  height: 20px;
}

.bootstrap-timepicker-widget table td input {
  width: 100%;

  height: 35px;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
  width: 100%;
}

.glyphicon {
  cursor: pointer;

  background-color: transparent;

  font-family: "simple-line-icons";

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-size: 10px;
}

.glyphicon-chevron-up:before {
  content: "\E607";
}

.glyphicon-chevron-down:before {
  content: "\E604";
}

.dataTable .bootstrap-select .filter-option-inner-inner {
  font-size: 13px;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: visible;
}

.modal-dialog-scrollable .modal-content {
  overflow: visible;
}

.file-card .card-img,
.file-card .card-img img {
  width: 40px;

  height: 40px;

  border: none;
}

.file-card .card-img svg {
  font-size: 40px;
}

.file-card .card-body {
  /*width: 158px;*/
}

.dropzone .dz-preview.dz-image-preview {
  z-index: 0;
}

ul.thumbnails.image_picker_selector li .thumbnail {
  padding: 4px !important;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
  background: #1d82f5 !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.icon-11 {
  width: 11px;

  height: 11px;
}

.fc .fc-col-header-cell-cushion {
  color: #28313c;

  padding: 10px 4px !important;
}

.btn-active,
.btn-active.btn-secondary {
  background-color: black !important;

  border: solid 1px #000 !important;

  color: #fff !important;
}

.active-timer-count {
  left: 10px;

  top: -7px;
}

/* attendance info */

.punch-info {
  margin-bottom: 20px;
}

.punch-hours {
  align-items: center;

  border: 5px solid #1d82f5;

  border-radius: 50%;

  display: flex;

  font-size: 18px;

  height: 120px;

  justify-content: center;

  margin: 0 auto;

  width: 120px;
}

.statistics .row {
  margin-left: -5px;

  margin-right: -5px;
}

.statistics .row > div {
  padding-left: 5px;

  padding-right: 5px;
}

.punch-status .stats-box {
  margin-bottom: 0;
}

.stats-box {
  background-color: #f9f9f9;

  border: 1px solid #e3e3e3;

  margin-bottom: 15px;

  padding: 5px;
}

.stats-box p {
  margin: 0;

  font-size: 12px;
}

.stats-box > h6 {
  margin-bottom: 0;
}

.recent-activity {
  height: 318px;

  overflow-y: auto;

  overflow-x: hidden;
}

.recent-activity .res-activity-list {
  list-style-type: none;

  margin-bottom: 0;

  padding-left: 30px;

  position: relative;
}

.recent-activity .res-activity-list li {
  margin-bottom: 15px;

  position: relative;
}

.recent-activity .res-activity-list li:before {
  content: "";

  position: absolute;

  border-radius: 100%;

  width: 10px;

  height: 10px;

  left: -15px;

  top: 6px;

  border: 2px solid #1d82f5;

  margin-right: 15px;

  z-index: 2;

  background: #fff;
}

.recent-activity p {
  font-size: 13px;

  margin-bottom: 0;
}

.recent-activity .res-activity-time {
  color: #bbb;

  font-size: 12px;
}

.recent-activity .res-activity-list:after {
  content: "";

  border: 1px solid #e8eef3;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 19px;
}

.ticket-message {
  &:hover {
    background-color: #e8eef3 !important;

    p {
      color: #28313c;
    }
  }
}

.dropify-wrapper ~ .invalid-feedback {
  display: block;
}

.input-daterange input {
  width: 99px !important;

  @include media-breakpoint-down(sm) {
    width: 96px !important;
  }
}

.sidebar-menu li {
  -webkit-box-shadow: 0 1px 0 0 #e8eef314;

  box-shadow: 0 1px 0 0 #e8eef314;
}

.content-wrapper {
  /*--padding: 20px !important;---*/

  width: 100%;
}

/*--.settings-box {
  padding: 20px 28px;
}--*/

.sticky-note {
  height: 215px;
}

.sticky-note .card-body:first-child {
  overflow-y: clip;
}

.sidebar-brand-name {
  img {
    height: 25px;
  }
}

.sidebar-dark {
  .main-sidebar {
    background-color: $dark_bg;
  }

  .sidebar-brand-box {
    background-color: $dark_bg;
  }

  .sidebar-menu {
    background-color: $dark_bg;
  }

  .sidebarTogglerBox {
    background-color: $dark_bg;
  }
}

.sidebar-light {
  .main-sidebar {
    background-color: $white_shade;

    border-right: 1px solid #e8eef3;
  }

  .sidebar-brand-box {
    background-color: unset;
  }

  .sidebar-menu {
    background-color: unset;

    li {
      box-shadow: 0 1px 0 0 #e8eef3;

      .nav-item {
        color: #616e80;
      }
    }
  }

  .sidebarTogglerBox {
    background-color: $white_shade;

    border-right: 1px solid #e8eef3;

    border-top: 1px solid #e8eef3;
  }

  .sidebar-brand-box .sidebar-brand {
    border-bottom: 1px solid #e8eef3;
  }

  .sidebar-brand-name h1 {
    color: #28313c;
  }
}

a.btn-primary {
  display: inline-block;
}

#datatableRange,
#datatableRange2 {
  width: 220px;
}

.daterangepicker td.in-range {
  background-color: #f1f1f3;
}

.daterangepicker .ranges li.active {
  background-color: #616e80;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #616e80;
}

.user-online {
  bottom: -5px;

  right: 8px;
}

@media (max-width: 991.98px) {
  .preloader-container {
    margin-left: 0px;

    width: unset;
  }

  .rtl .preloader-container {
    margin-right: 0;
  }
}

/* Chrome, Safari, Edge, Opera */

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

  margin: 0;
}

/* Firefox */

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

.daterangepicker {
  @include media-breakpoint-down(md) {
    position: absolute;
    z-index: 1;
  }
}

@include media-breakpoint-down(md) {
  .w-50 {
    width: 100% !important;
  }

  .table-md-responsive {
    width: 100% !important;
  }
}

@include media-breakpoint-down(sm) {
  .table-sm-responsive {
    display: block;

    width: 100%;

    overflow-x: auto;
  }

  ul.thumbnails.image_picker_selector li {
    width: 100%;

    img {
      width: 100%;
    }
  }

  #leave-detail-section .w-30,
  #leave-detail-section .w-70,
  #right-modal-content .w-30,
  #right-modal-content .w-70 {
    width: 100%;
  }

  .fc .fc-toolbar {
    display: block !important;
  }

  .fc-toolbar-chunk {
    margin-bottom: 20px;
  }

  .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(
      .input-group-btn
    ) {
    width: 100% !important;
  }

  .w-sm-100 {
    width: 100%;
  }
}

#calendar .fc-toolbar-title {
  font-size: 13px !important;
}

.tagify {
  overflow: hidden;
}

.input-group .input-icon {
  width: 100%;
}

.right-sidebar {
  height: 100%;

  width: 100%;

  white-space: nowrap;

  li a {
    padding: 15px 24px;

    &:hover {
      color: #28313c !important;

      background-color: #e8eef385;

      border-right: 2px solid #28313c85;
    }
  }
}

.select-filter-project .dropdown-menu {
  left: 29px;

  .right-sidebar {
    height: 100%;

    width: 100%;

    white-space: nowrap;

    li a {
      padding: 15px 24px;

      &:hover {
        color: #28313c !important;

        background-color: #e8eef385;

        border-right: 2px solid #28313c85;
      }
    }
  }
}

.swal2-popup.swal2-toast {
  flex-direction: row !important;
}

@include media-breakpoint-down(xl) {
  #user-search {
    width: 249px;
  }
}

@include media-breakpoint-down(lg) {
  #user-search {
    width: 225px;
  }
}

@include media-breakpoint-down(md) {
  .w-tables {
    overflow-x: scroll;
  }
}

@include media-breakpoint-down(sm) {
  .table-sm-responsive {
    display: block;

    width: 100%;

    overflow-x: auto;
  }
}

.fc .fc-daygrid-body {
  position: relative;

  z-index: 0 !important;
}

.fc .fc-button-group > .fc-button.fc-button-active,
.fc .fc-button-group > .fc-button:active,
.fc .fc-button-group > .fc-button:focus,
.fc .fc-button-group > .fc-button:hover {
  z-index: 0 !important;
}

.swal2-title {
  font-size: 1.1em !important;
}

.swal2-content {
  font-size: 0.8em !important;
}

.mw-250 {
  max-width: 250px;

  min-width: 140px;
}

.mw-120 {
  max-width: 120px;
}

.typing {
  align-items: center;

  display: flex;

  height: 13px;
}

.typing .dot {
  animation: mercuryTypingAnimation 1.8s infinite ease-in-out;

  background-color: #e8eef2;

  border-radius: 50%;

  height: 4px;

  margin-right: 2px;

  vertical-align: middle;

  width: 4px;

  display: inline-block;
}

.typing .dot:nth-child(1) {
  animation-delay: 200ms;
}

.typing .dot:nth-child(2) {
  animation-delay: 300ms;
}

.typing .dot:nth-child(3) {
  animation-delay: 400ms;
}

.typing .dot:last-child {
  margin-right: 0;
}

.autocomplete-password {
  opacity: 0;

  position: absolute;

  width: 0;
}

@keyframes mercuryTypingAnimation {
  0% {
    transform: translateY(0px);

    background-color: #e8eef2;
  }

  28% {
    transform: translateY(-7px);

    background-color: #aaadaf;
  }

  44% {
    transform: translateY(0px);

    background-color: #87888a;
  }
}

// .input-group > .form-control:not(:first-child) {

//     border-top-left-radius: 0.25rem;

//     border-bottom-left-radius: 0.25rem;

// }

.more-user-count {
  padding: 2px 3px;
}

.custom-control {
  z-index: auto;
}

.flag-icon-ja-jp.flag-icon-squared {
  background-image: url(../flags/1x1/ja-JP.svg);
}

.bootstrap-select > select.mobile-device {
  width: auto !important;

  z-index: auto !important;
}

.importBox {
  min-height: 280px !important;

  width: 250px !important;

  margin: 2px !important;
}

.importOptions {
  padding: 10px !important;

  /* height: 150px !important; */

  vertical-align: middle !important;
}

.unchanged {
  border: 2px solid #d0d0d0;
}

.matched {
  border: 2px solid #52bad5;
}

.importSample .sampleHeading,
.importSample .sample {
  padding: 5px 15px;

  margin: 0px;
}

.unchanged .sampleHeading {
  background-color: #e0e0e0;
}

.unchanged .sample {
  background-color: #ffffff;
}

.matched .sampleHeading {
  background-color: #52bad5;
}

.matched .sample {
  background-color: #b1e0ec;
}

.unmatched .sampleHeading {
  background-color: #ee836e;
}

.unmatched .sample {
  background-color: #f1f1f3;
}

.importBox .notimported {
  padding: 5px 10px;

  margin: 5px 0px;
}

.sampleHeading,
.sample {
  overflow-x: hidden;

  max-height: 31px;

  overflow-y: hidden;
}

.dropzone .dz-preview .dz-image img {
  height: 100%;

  width: 100%;

  object-fit: cover;
}

.dropzone .dz-preview .dz-progress {
  z-index: 999 !important;
}

.w-180 {
  width: 180px;
}

.w-150 {
  width: 150px;
}

.view-notification p {
  line-height: 16px;
}

.fc-view-harness {
  z-index: 0;
}

.fc-daygrid-dot-event .fc-event-title {
  font-weight: normal !important;
}

.deactive {
  opacity: 0.6;
}

.icon-background {
  font-size: 40px;
}

.appreciation-icon {
  top: 20px;
  left: 13px;
}

.notification-apr-icon {
  top: 9px;

  left: 9px;
}

.fs-40 {
  font-size: 40px;
}

.fs-30 {
  font-size: 30px;
}

.dropdown-item.active .text-muted {
  color: $white !important;
}

.dropdown-item.active .text-darkest-grey {
  color: $white !important;
}

.select2-selection {
  height: 37px !important;
}

.select2-container--default .select2-selection--single {
  border-color: #e8eef3;

  background-color: #fff;

  /*padding: 0.2rem;*/

  font-size: 14px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-style: none;
}

.width-35 {
  width: 35px;
}

.btrr {
  border-top-right-radius: 4px;
}

.w-tables {
  box-shadow: 0 0 4px 0 #d2d9e4;

  @include media-breakpoint-down(sm) {
    overflow-x: scroll;
  }
}

.dataTables_wrapper {
  width: 100%;

  z-index: 0;
}

.dataTables_filter {
  display: none;
}

.table thead th,
.table th,
.table td {
  border: 0px;

  padding: 6px;
}

.table thead th {
  font-size: 13px;

  font-weight: 500;

  color: #99a5b5;

  box-shadow: 0 1px 0 0 #f1f1f3;
}

.table thead th:first-child,
.table tbody td:first-child {
  padding-left: 20px;
}

.table tr td {
  font-size: 13px;

  color: #28313c;

  box-shadow: 0 1px 0 0 #f1f1f3;

  vertical-align: middle;
}

.taskEmployeeImg {
  width: 25px;

  height: 25px;

  display: inline-block;

  overflow: hidden;

  object-fit: cover;
}

.task_view {
  border: 1px solid #99a5b5;

  border-radius: 4px;

  display: inline-flex;

  .taskView {
    padding: 0px 7px;

    line-height: 2;

    color: #99a5b5;

    border-right: 1px solid #99a5b5;

    &:hover {
      background-color: #f2f4f7;
    }
  }

  .task_view_more {
    color: #99a5b5;

    padding: 6.3px 5px;

    border-radius: 4px;

    &:hover {
      background-color: #f2f4f7;
    }

    &:after {
      content: none;
    }
  }

  .dropdown-menu {
    border: 0;

    -webkit-box-shadow: 1px 4px 6px 4px #68686814;

    box-shadow: 1px 4px 6px 4px #68686814;
  }
}

table.dataTable {
  margin-bottom: 0px !important;

  @include media-breakpoint-down(sm) {
    width: 862px;
  }
}

.dataTables_length {
  padding: 15px 20px;
}

.dataTables_length select {
  height: 35px;

  min-width: 53px;
}

/*************************** BACKGROUND COLORS **************************/

.bg-dark {
  background-color: $dark_bg;
}

.bg-grey {
  background-color: #e8eef3;
}

.bg-light-grey {
  background-color: #f1f1f3;
}

.bg-dark-grey {
  background-color: #616e80;
}

.bg-darkest-grey {
  background-color: #28313c;
}

.bg-lightest-grey {
  background-color: #99a5b5;
}

.bg-blue {
  background-color: #1d82f5;
}

.bg-red {
  background-color: #d30000;
}

.bg-yellow {
  background-color: #fcbd01;
}

.bg-light-green {
  background-color: #39e500;
}

.bg-dark-green {
  background-color: #2cb100;
}

.bg-additional-grey {
  background-color: #f2f4f7;
}

.bg-amt-grey {
  background-color: #e7e9eb;
}

.bg-white-shade {
  background-color: $white_shade;
}

/*************************** TEXT COLORS **************************/

.text-darkest-grey {
  color: #4d4f5c !important;
}

.text-dark-grey {
  color: #616e80;
}

.text-dark {
  color: #28313c !important;
}

.text-lightest {
  color: #99a5b5;
}

.text-blue {
  color: #0000ff;
}

.text-red {
  color: #d30000;
}

.text-yellow {
  color: #fcbd01;
}

.text-light-green {
  color: #39e500;
}

.text-dark-green {
  color: #2cb100;
}

.text-white-shade {
  color: $white_shade;
}

.text-pink {
  color: $pink;
}

/*************************** BORDERS **************************/

.border-grey {
  border: 1px solid #e8eef3;
}

.border-left-grey {
  border-left: 1px solid #e8eef3;
}

.border-right-grey {
  border-right: 1px solid #e8eef3;
}

.border-top-grey {
  border-top: 1px solid #e8eef3;
}

.border-bottom-grey {
  border-bottom: 1px solid #e8eef3;
}

.border-additional-grey {
  border: 1px solid #f2f4f7;
}

@include media-breakpoint-down(sm) {
  .border-left-grey-sm-0 {
    border-left: 0px !important;
  }

  .border-right-grey-sm-0 {
    border-right: 0px !important;
  }
}

#reset-filters {
  height: 40px;

  margin-top: 26px;
}

.left-menu-active {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.h5,
h5 {
  font-size: 12px !important;
}

* Cropper.js v1.5.12

 * https://fengyuanchen.github.io/cropperjs

 *

 * Copyright 2015-present Chen Fengyuan

 * Released under the MIT license

 *

 * Date: 2021-06-12T08:00:11.623Z

 */

.cropper-container {
  direction: ltr;

  font-size: 0;

  line-height: 0;

  position: relative;

  touch-action: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;
}

.cropper-container img {
  display: block;

  height: 100%;

  image-orientation: 0deg;

  max-height: none !important;

  max-width: none !important;

  min-height: 0 !important;

  min-width: 0 !important;

  width: 100%;
}

.cropper-canvas,
.cropper-crop-box,
.cropper-drag-box,
.cropper-modal,
.cropper-wrap-box {
  bottom: 0;

  left: 0;

  position: absolute;

  right: 0;

  top: 0;
}

.cropper-canvas,
.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;

  opacity: 0;
}

.cropper-modal {
  background-color: #000;

  opacity: 0.5;
}

.cropper-view-box {
  display: block;

  height: 100%;

  outline: 1px solid #39f;

  outline-color: rgba(51, 153, 255, 0.75);

  overflow: hidden;

  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;

  display: block;

  opacity: 0.5;

  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;

  border-top-width: 1px;

  height: 33.3333333333%;

  left: 0;

  top: 33.3333333333%;

  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;

  border-right-width: 1px;

  height: 100%;

  left: 33.3333333333%;

  top: 0;

  width: 33.3333333333%;
}

.cropper-center {
  display: block;

  height: 0;

  left: 50%;

  opacity: 0.75;

  position: absolute;

  top: 50%;

  width: 0;
}

.cropper-center:after,
.cropper-center:before {
  background-color: #eee;

  content: " ";

  display: block;

  position: absolute;
}

.cropper-center:before {
  height: 1px;

  left: -3px;

  top: 0;

  width: 7px;
}

.cropper-center:after {
  height: 7px;

  left: 0;

  top: -3px;

  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;

  height: 100%;

  opacity: 0.1;

  position: absolute;

  width: 100%;
}

.cropper-face {
  background-color: #fff;

  left: 0;

  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;

  right: -3px;

  top: 0;

  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;

  height: 5px;

  left: 0;

  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;

  left: -3px;

  top: 0;

  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;

  cursor: ns-resize;

  height: 5px;

  left: 0;
}

.cropper-point {
  background-color: #39f;

  height: 5px;

  opacity: 0.75;

  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;

  margin-top: -3px;

  right: -3px;

  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;

  left: 50%;

  margin-left: -3px;

  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;

  left: -3px;

  margin-top: -3px;

  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;

  cursor: s-resize;

  left: 50%;

  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;

  right: -3px;

  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;

  left: -3px;

  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;

  cursor: nesw-resize;

  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;

  cursor: nwse-resize;

  height: 20px;

  opacity: 1;

  right: -3px;

  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;

    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;

    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;

    opacity: 0.75;

    width: 5px;
  }
}

.cropper-point.point-se:before {
  background-color: #39f;

  bottom: -50%;

  content: " ";

  display: block;

  height: 200%;

  opacity: 0;

  position: absolute;

  right: -50%;

  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;

  height: 0;

  position: absolute;

  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* select start */

.search-width-large {
  width: 300px !important;
}

.btn-cancel {
  border: 1px solid #2262c6;
}

.page-item .page-link {
  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0;

  text-align: center;

  transition: all ease 0.3s;

  border-radius: 50%;

  background-color: #2262c6;

  margin: 0px 3px;
}

.paginate_button.previous {
  /*padding-right: 15px;

    padding-top: 8px;

    font-size: 20px;*/

  color: #2262c6;

  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0;

  text-align: center;

  transition: all ease 0.3s;

  border-radius: 50%;
}

.paginate_button.previous:before {
  content: "< ";
}

.paginate_button.previous:hover {
  color: #fff;

  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0;

  text-align: center;

  transition: all ease 0.3s;

  border-radius: 50%;

  background-color: #2262c6;
}

.paginate_button.next {
  /* padding-left: 15px;

    padding-top: 8px;

    font-size: 20px;*/

  color: #2262c6;

  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0;

  text-align: center;

  transition: all ease 0.3s;

  border-radius: 50%;

  background-color: #fff;
}

.paginate_button.next:after {
  content: " >";
}

.paginate_button.next:hover {
  color: #fff;

  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0;

  text-align: center;

  transition: all ease 0.3s;

  border-radius: 50%;

  background-color: #2262c6;
}

.page-item .page-link {
  color: #2262c6;

  background-color: #fff;

  border-color: #fff;
}

.page-item .page-link:hover {
  color: #fff;

  background-color: #2262c6;

  border-color: #2262c6;
}

.page-item.active .page-link {
  z-index: 3;

  color: #fff;

  background-color: #2262c6;

  border-color: #2262c6;
}

.page-item:first-child .page-link {
  display: none;
}

.page-item:last-child .page-link {
  display: none;
}

.dataTables_wrapper .dataTables_length {
  margin-top: 20px;
}

.dataTables_wrapper .dataTables_info {
  margin-top: 20px;
}

.dataTables_wrapper .paging_simple_numbers {
  margin-top: 20px;
}

div.dataTables_wrapper div.dataTables_info {
  padding: 20px;
}

div.dataTables_wrapper div.dataTables_paginate {
  margin-top: 30px;
}

.margin-top-minus-7 div.dt-buttons .btn-secondary {
  margin-top: -7px;
}

.export-button-magin-top-0 .dt-buttons .btn-secondary {
  margin-top: 0px !important;
}

.--hidden {
  display: none;
}

#hide-project-menues {
  display: none;
}

.reset_filter_top_margin_34 {
  margin-top: 34px !important;
}

.min-width-14 {
  min-width: 14px !important;
}

.dropdown .dropdown-toggle .la-file-code {
  min-width: 14px !important;
}

.select2-container .select2-dropdown {
  min-width: 200px !important;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-100 {
  width: 100%;
}

.message-card-img {
  width: inherit;
}

.inside_image {
  width: 120px;
}

@media screen and (max-width: 480px) {
  .search-width-large {
    width: 80% !important;
  }

  .mobile-width-155 {
    width: 155px !important;
  }

  .mobile-mr-1 {
    margin-right: 5px !important;
  }

  /*-- .mobile-mt-4 {
    margin-top: 20px !important;
  }--*/

  .dropify-wrapper {
    width: 210px !important;
  }
}

/*--.ql-editor {
  height: 20px;
}--*/

.left-content-area h2 {
  font-family: "Blogger Sans";

  font-weight: bold;
}

.clock_in_out {
  display: flex;
  justify-content: end;
  align-items: center;
}
.calendar-border {
  border-top: 1px solid #f5f5f5;
  padding-top: 30px;
}
.widgetsettings {
  display: flex;
  justify-content: end;
  align-items: center;
}
.datatblrng input {
  width: 100% !important;
  text-align: center !important;
}

.quick-category-icon {
  font-size: 40px !important;
}
.qc-warning {
  background: #ffebd2;
  color: #e2a03f;
}
.qc-secondary {
  background: #dbc4ff;
  color: #5c1ac3;
}
.qcompare-success {
  background: #8dbf42;
  color: #ffffff;
}
.qcompare-danger {
  background: #e7515a;
  color: #ffffff;
}
.bg-light-danger {
  background-color: #ffe1e2 !important;
  border-color: #ffe1e2;
  color: #e7515a;
}
.bg-light-success {
  background-color: #e6ffbf !important;
  border-color: #e6ffbf;
  color: #8dbf42;
}
.bg-light-info {
  background-color: #bae7ff !important;
  border-color: #bae7ff;
  color: #2196f3;
}

.filter-box .bootstrap-select.btn-group > .dropdown-toggle {
  height: 44px !important;
}

.widget .dropdown-toggle {
  max-height: inherit !important;
  margin-bottom: 0 !important;
}
.task_view_more {
  border: none !important;
  min-width: 10px !important;
}
.dropdown:not(.custom-dropdown-icon) .dropdown-menu a.dropdown-item {
  font-weight: inherit;
  color: inherit;
}
.buttons-excel {
  border-radius: 1.875rem !important;
  padding: 0.4375rem 1.25rem !important;
}
.task-project-loghours-ticket {
  color: #515365;
}
.dropdown-sm-size {
  width: 100px;
  display: block;
}
#employees-table > tbody > tr > td {
  letter-spacing: inherit;
}

#normaltab .active {
  color: #2262c6;
  font-weight: 600;
  background: rgb(241 241 241 / 90%);
}
.right-bar .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: #fff;
  background: rgba(34, 98, 198, 0.9);
}
.edit-profile-form h4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.view-related-leave {
  padding: 3px 6px !important;
  border-radius: 0.25rem !important;
}

.modal-header .modal-title {
  color: #3b3f5c;
  font-size: 17px;
  font-weight: 600;
}
.leave-quota-class .card-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.leave-quota-class h6 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #3b3f5c;
  font-size: 17px;
  font-weight: 600;
}
.leave-details .active {
  font-size: 17px;
  font-weight: 600;
}
.leave-details-action {
  width: 80px !important;
  min-width: 80px !important;
}
.document-padding-left .avatar-xl {
  border: 1px solid #dee2e6 !important;
  padding: 2px !important;
  border-radius: 0.25rem !important;
}

.document-padding-left .card-body {
  padding: 12px 8px !important;
}
.document-padding-left .card-title {
  font-size: 16px !important;
  margin-bottom: 3px !important;
}
.document-padding-left .btn {
  padding: 3px 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 56px !important;
  min-width: 56px !important;
}
#summery {
  min-height: 200px;
}
.color-code-popup {
  z-index: 9999999;
}
.bi-airplane-fill::before {
  position: absolute;
  content: "✈";
  color: #fff;
  font-size: 13px;
}

.permisison-table {
  border: 1px solid #eee !important;
}
.permisison-table .border-left {
  border-left: 1px solid #eee !important;
}

.permisison-table .table .heading-h6 {
  font-size: 13px !important;
}
#module-custom-permission-1 .table {
  margin-top: 15px !important;
}
.fc .fc-button-primary {
  color: #fff;
  background-color: #2262c6 !important;
  border-color: #2262c6 !important;
}
.fc .fc-button-active {
  background-color: black !important;
  border: solid 1px #000 !important;
}
.fc .fc-button-primary {
  color: #fff;
  background-color: #2262c6 !important;
  border-color: #2262c6 !important;
}
.fc .fc-button-active {
  background-color: black !important;
  border: solid 1px #000 !important;
}
.heading-h1 {
  color: #3b3f5c !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
}
.border-rounded {
  border-radius: 6px !important;
}
.card-box-no-margin .card-title {
  padding: 0 !important;
}
.leave-report-module-title {
  font-size: 17px !important;
  font-weight: 600 !important;
}
.leave-report-module-body .b-shadow-4 {
  border: 1px solid #bfc9d4;
}
.leave-report-module-nav .active {
  color: #2262c6 !important;
  font-weight: 600 !important;
  background: rgb(241 241 241 / 90%) !important;
}
.border-additional-grey {
  border: 1px solid #bfc9d4 !important;
}
.vaccine-list-card {
  border: 1px solid #e8eef3 !important;
}
.fa-file-pdf {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #dee2e6 !important;
  padding: 2px !important;
  border-radius: 0.25rem !important;
  display: flex;
}
.fa-file-pdf::before {
  position: absolute;
  content: " ";
  color: #000;
  font-size: 13px;
  background: url(../img/pdf-file.png) no-repeat top left;
  width: 27px;
  height: 27px;
  left: 16px;
  top: 16px;
}

.reimbursement-table .table .media {
  display: ruby !important;
}
.zoom-category .dropdown-toggle {
  height: 41px !important;
}
.zoom-employee .dropdown-toggle {
  height: 41px !important;
}
.zoom-meeting-host .dropdown-toggle {
  padding: 4px 5px !important;
}
.zoom-meeting-date-range {
  width: 100% !important;
}
.employee-drop-down .dropdown-toggle {
  height: 46px !important;
  border-radius: 4px !important;
}
.remove-border {
  border: none !important;
  box-shadow: none !important;
}
.msg-content-left .card {
  border-radius: 0.25rem !important;
  margin-bottom: 10px;
}
.msg-content-left .card .avatar-xl {
  width: 100% !important;
}
.msg-content-left .card .card-body h6 {
  font-size: 16px !important;
}
.msg-content-left .card .card-body p {
  font-size: 0.875rem;
}
.msg-content-right .f-15 {
  font-size: 16px !important;
}
.msg-content-right .widget {
  border-radius: 0.25rem !important;
  margin-bottom: 10px;
  border: 1px solid #e8eef3 !important;
  box-shadow: none !important;
}
.msg-content-right .card-img img {
  width: 80px !important;
}
.message-div-outer .card-img img {
  width: inherit !important;
}
.multiple-dropdown .select2-selection {
  height: 100px !important;
}
.dashoard-nav .active {
  border: 1px solid #2262c6 !important;
}
.designation-name {
  font-size: 15px !important;
}
.appraisal-index-table .row .row {
  padding: 0 !important;
}
.nav-tabs .nav-link.active {
  color: #2262c6 !important;
  font-weight: 600 !important;
  background: rgb(241 241 241 / 90%) !important;
}

.job-appl-search-box .border-additional-grey {
  width: 100% !important;
}
#offer-letter-logo {
  width: 161px;
}
@media (min-width: 320px) and (max-width: 991px) {
  .dropdown-sm-size {
    width: 100% !important;
  }
  #datatableRange,
  #datatableRange2 {
    width: 100%;
  }
  .attendance-dashboard .d-flex {
    display: inherit !important;
  }
  .attendance-by-member .d-flex {
    display: inherit !important;
  }
  .attendance-by-hour .d-flex {
    display: inherit !important;
  }
  .msg-header-left {
    width: 100% !important;
  }
  .msg-header-left .flex-lg-grow-1 {
    width: 100% !important;
    margin-bottom: 10px;
  }
  .msg-content-left {
    width: min-content;
  }
  .msg-content-right {
    width: 100% !important;
  }
  #reset-filters {
    margin-top: 0 !important;
  }
}