/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppFooter.vue?vue&type=style&index=0&id=18fbc493&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-18fbc493]:focus,
.date-input[data-v-18fbc493]:focus,
.form-select[data-v-18fbc493]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-18fbc493] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-18fbc493] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-18fbc493]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-18fbc493]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-18fbc493] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-18fbc493]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-18fbc493]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-18fbc493] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-18fbc493] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-18fbc493]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.footer-wrapper[data-v-18fbc493] {
  margin-top: 24px;
  background-color: white;
  z-index: 4;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/dashboard/AddReportModal.vue?vue&type=style&index=0&id=e1f9442e&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.disabled[data-v-e1f9442e] {
  background-color: #f3f4f6;
}
.form-check[data-v-e1f9442e] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 542px;

  justify-content: start;
}
.form-check-input[data-v-e1f9442e] {
  transform: scale(1.4);
  cursor: pointer;
}
.report-label[data-v-e1f9442e] {
  width: 50%;
}

/* mobile */
@media (max-width: 768px) {
[data-v-e1f9442e] .modal-dialog {
    margin: 10px;
}
[data-v-e1f9442e] .modal-xl {
    max-width: 96vw;
    width: 96vw;
    --cui-modal-width: 96vw;
    --bs-modal-width: 96vw;
}
}
.table-wrapper[data-v-e1f9442e] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper[data-v-e1f9442e] table {
  min-width: 540px;
}
@media (max-width: 768px) {
.mb-3 > .d-flex[data-v-e1f9442e] {
    flex-wrap: wrap;
    gap: 8px !important;
}
.report-label[data-v-e1f9442e] {
    width: 100%;
    margin-bottom: 4px;
}
}
@media (max-width: 768px) {
input.date-input.report-item[data-v-e1f9442e] {
    width: 100% !important;
}
}
.widget-inner-input-wrapper[data-v-e1f9442e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
.widget-inner-input-wrapper .date-input[data-v-e1f9442e] {
    width: 72px;
    text-align: center;
}
}
@media (max-width: 430px) {
.widget-inner-input-wrapper .date-input[data-v-e1f9442e] {
    width: 64px;
}
}
.widget-inner-input-text[data-v-e1f9442e] {
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 768px) {
.form-check[data-v-e1f9442e] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.form-check-input[data-v-e1f9442e] {
    transform: scale(1.2);
}
}
@media (max-width: 768px) {
[data-v-e1f9442e] .vue3-typeahead-input,[data-v-e1f9442e] .typeahead-input {
    width: 100%;
}
[data-v-e1f9442e] .vue3-typeahead-input input,[data-v-e1f9442e] .typeahead-input input {
    width: 100%;
}
}
@media (max-width: 576px) {
.float-end[data-v-e1f9442e] { float: none !important; width: 100%;
}
[data-v-e1f9442e] .modal-footer .btn { width: 100%;
}
}
@media (max-width: 430px) {
.report-label[data-v-e1f9442e] { font-size: 14px;
}
}

/* mobile  */
@media (max-width: 768px) {
[data-v-e1f9442e] .modal-dialog {
    margin: 10px;
}
[data-v-e1f9442e] .modal-xl {
    max-width: 96vw;
    width: 96vw;
    --cui-modal-width: 96vw;
    --bs-modal-width: 96vw;
}
}
.table-wrapper[data-v-e1f9442e] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper[data-v-e1f9442e] table {
  min-width: 540px;
}
@media (max-width: 768px) {
.mb-3 > .d-flex[data-v-e1f9442e] {
    flex-wrap: wrap;
    gap: 8px !important;
}
.report-label[data-v-e1f9442e] {
    width: 100%;
    margin-bottom: 4px;
}
}
@media (max-width: 768px) {
input.date-input.report-item[data-v-e1f9442e] {
    width: 100% !important;
}
}
.widget-inner-input-wrapper[data-v-e1f9442e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
.widget-inner-input-wrapper .date-input[data-v-e1f9442e] {
    width: 72px;
    text-align: center;
}
}
@media (max-width: 430px) {
.widget-inner-input-wrapper .date-input[data-v-e1f9442e] {
    width: 64px;
}
}
.widget-inner-input-text[data-v-e1f9442e] {
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 768px) {
.form-check[data-v-e1f9442e] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.form-check-input[data-v-e1f9442e] {
    transform: scale(1.2);
}
}
@media (max-width: 768px) {
[data-v-e1f9442e] .vue3-typeahead-input,[data-v-e1f9442e] .typeahead-input {
    width: 100%;
}
[data-v-e1f9442e] .vue3-typeahead-input input,[data-v-e1f9442e] .typeahead-input input {
    width: 100%;
}
}
@media (max-width: 576px) {
.float-end[data-v-e1f9442e] { float: none !important; width: 100%;
}
[data-v-e1f9442e] .modal-footer .btn { width: 100%;
}
}
@media (max-width: 430px) {
.report-label[data-v-e1f9442e] { font-size: 14px;
}
}


/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppBreadcrumb.vue?vue&type=style&index=0&id=5b6781c7&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-5b6781c7]:focus,
.date-input[data-v-5b6781c7]:focus,
.form-select[data-v-5b6781c7]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-5b6781c7] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-5b6781c7] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-5b6781c7]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-5b6781c7]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-5b6781c7] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-5b6781c7]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-5b6781c7]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-5b6781c7] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-5b6781c7] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-5b6781c7]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
@media screen and (max-width: 768px) {
.breadcrumb-link[data-v-5b6781c7] {
    font-size: 14px;
}
}
.header-wrapper[data-v-5b6781c7] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/LanguageSwitcher.vue?vue&type=style&index=0&id=002130ee&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-002130ee]:focus,
.date-input[data-v-002130ee]:focus,
.form-select[data-v-002130ee]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-002130ee] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-002130ee] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-002130ee]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-002130ee]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-002130ee] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-002130ee]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-002130ee]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-002130ee] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-002130ee] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-002130ee]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.lang-header[data-v-002130ee] {
  display: flex;
  align-items: center;
  color: rgba(44, 56, 74, 0.95) !important;
}
.dropdown-item-lang[data-v-002130ee] {
  display: flex;
  align-items: center;
}
.dropdown-item-lang-img[data-v-002130ee] {
  margin-right: 4px;
  width: 16px;
  height: 11px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/hr/LoaderMini.vue?vue&type=style&index=0&id=34412851&lang=scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.loading-wrapper1 {
  display: flex;
  width: 100%;
  justify-content: center;
}
.loading-wrapper1 .loading1 {
  display: inline-block;
  width: 10px;
  height: 10px;
}
.loading-wrapper1 .loading1:after {
  content: " ";
  display: block;
  width: 14px;
  height: 13px;
  margin-top: 2px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid #321fdb;
  border-color: #321fdb transparent #321fdb transparent;
  animation: loading 1.2s linear infinite;
}
@keyframes loading {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/dashboard/AddPinModal.vue?vue&type=style&index=0&id=2081e79c&scoped=true&lang=scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-2081e79c]:focus,
.date-input[data-v-2081e79c]:focus,
.form-select[data-v-2081e79c]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-2081e79c] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-2081e79c] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-2081e79c]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-2081e79c]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-2081e79c] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-2081e79c]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-2081e79c]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-2081e79c] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-2081e79c] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-2081e79c]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.btns-wrapper[data-v-2081e79c] {
  display: flex;
  gap: 20px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppHeaderDropdownAccnt.vue?vue&type=style&index=0&id=29e46390&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-29e46390]:focus,
.date-input[data-v-29e46390]:focus,
.form-select[data-v-29e46390]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-29e46390] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-29e46390] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-29e46390]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-29e46390]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-29e46390] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-29e46390]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-29e46390]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-29e46390] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-29e46390] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-29e46390]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.report-icon[data-v-29e46390] {
  margin: 0 15px 5px 10px;
}
.report-icon[data-v-29e46390]:hover {
  cursor: pointer;
}
.profile-avatar[data-v-29e46390] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.dropdown[data-v-29e46390] {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 592px) {
.dropdown[data-v-29e46390] {
    position: initial;
}
}
.dropdown-wrapper[data-v-29e46390] {
  cursor: pointer;
  position: relative;
}
.dropdown-menu[data-v-29e46390] {
  padding: 0;
}
.dropdown-item[data-v-29e46390] {
  cursor: pointer;
  font-weight: 700;
  color: #2c384a;
}
@media screen and (max-width: 430px) {
.dropdown-item[data-v-29e46390] {
    font-size: 12px;
}
}
.dropdown-item[data-v-29e46390]:hover {
  background-color: white;
}
.dropdown-item-checked[data-v-29e46390] {
  font-weight: 400;
}
.dropdown-icon[data-v-29e46390] {
  height: 32px !important;
  width: 24px !important;
}
.dropdown-count[data-v-29e46390] {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -10px;
  right: 0;
  color: white;
  font-size: 10px;
  text-align: center;
  background-color: orangered;
  border-radius: 50%;
}
.dropdown-count p[data-v-29e46390] {
  margin-top: 5px;
  font-weight: bold;
}
.notification-wrapper[data-v-29e46390] {
  max-width: 40vw;
  position: absolute;
  top: 40px;
  right: 0;
  max-height: 320px;
  overflow-y: scroll;
  background-color: white;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding-bottom: 5px;
}
@media screen and (max-width: 533px) {
.notification-wrapper[data-v-29e46390] {
    max-width: 95vw;
    right: -20vw;
}
}
@media screen and (max-width: 430px) {
.notification-wrapper[data-v-29e46390] {
    max-width: 95vw;
    right: -34vw;
}
}
@media screen and (max-width: 390px) {
.notification-wrapper[data-v-29e46390] {
    max-width: 95vw;
    right: -37vw;
}
}
@media screen and (max-width: 375px) {
.notification-wrapper[data-v-29e46390] {
    max-width: 95vw;
    right: -39vw;
}
}
@media screen and (max-width: 360px) {
.notification-wrapper[data-v-29e46390] {
    max-width: 95vw;
    right: -41vw;
}
}
.notification-wrapper[data-v-29e46390]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  margin: 5px 5px;
  padding: 5px 5px;
}
.notification-wrapper[data-v-29e46390]::-webkit-scrollbar-thumb {
  background-color: #3C4B64;
  border-radius: 6px;
}
.notification-wrapper[data-v-29e46390]::-webkit-scrollbar-track {
  background-color: white;
  border-bottom-right-radius: 10px;
}
.notification-wrapper-general[data-v-29e46390] {
  position: relative;
}
.title[data-v-29e46390] {
  padding-left: 10px;
  font-weight: 700;
  background-color: #ebedef;
}
.title[data-v-29e46390]:hover {
  background-color: #ebedef;
}
.title-b-day[data-v-29e46390] {
  color: rgb(192, 4, 195);
}
.title-vacations[data-v-29e46390] {
  color: rgb(71, 179, 0);
}
.title-requests[data-v-29e46390] {
  color: red;
}
.title-candidates[data-v-29e46390] {
  color: rgb(239, 153, 6);
}
.title-onetoone[data-v-29e46390] {
  color: rgb(16, 157, 244);
}
.title-projects[data-v-29e46390] {
  color: rgb(0, 98, 255);
}
.requests[data-v-29e46390] {
  color: red;
  font-weight: bold;
}
.vacations[data-v-29e46390] {
  color: green;
  font-weight: bold;
}
.candidates[data-v-29e46390] {
  color: orange;
  font-weight: bold;
}
.one-to-one[data-v-29e46390] {
  color: rgb(0, 132, 255);
  font-weight: bold;
}
.nav-wrapper[data-v-29e46390] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-width: 400px;
  position: sticky;
  top: 0;
  background-color: ghostwhite;
  width: 100%;
  border-bottom: 1px solid lightgray;
}
@media screen and (max-width: 430px) {
.nav-wrapper[data-v-29e46390] {
    min-width: 0;
    max-width: 100%;
}
}
.nav-btns[data-v-29e46390] {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.nav-btns-btn[data-v-29e46390] {
  border: none;
  transition: 0.2s all;
  display: inline-block;
  flex-wrap: nowrap;
}
@media screen and (max-width: 430px) {
.nav-btns-btn[data-v-29e46390] {
    font-size: 0.8em;
}
}
.nav-btns-btn[data-v-29e46390]:hover {
  background-color: ghostwhite;
  color: #4f5d73;
  text-decoration: underline;
}
.notification-item[data-v-29e46390] {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  margin-left: 10px;
  transition: all 0.2s;
  border-radius: 15px;
  margin-bottom: 5px;
}
.notification-item[data-v-29e46390]:hover {
  background-color: lightblue;
}
.notification-text[data-v-29e46390] {
  max-width: 35vw;
  overflow-x: hidden;
  margin-right: 10px;
  color: rgba(0, 0, 21, 0.65);
}
@media screen and (max-width: 430px) {
.notification-text[data-v-29e46390] {
    max-width: 90vw;
    overflow: hidden;
}
}
.notification-text[data-v-29e46390]:hover {
  text-decoration: underline;
}
.notification-text-checked[data-v-29e46390] {
  font-weight: 400;
}
.notification-remove[data-v-29e46390] {
  color: darkred;
  margin-left: 20px;
  margin-right: 20px;
}
.notification-remove[data-v-29e46390]:hover {
  text-decoration: underline;
}
.empty-notifications[data-v-29e46390] {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  min-width: 400px;
  min-height: 50px;
  overflow: hidden;
}
.user-lnk[data-v-29e46390] {
  color: blue;
  text-decoration: underline;
}
.sickInput[data-v-29e46390] {
  padding: 10px 90% 10px 5px;
  border-radius: 10px;
  outline: none;
  width: 100%;
  border: 1px solid grey;
}
.days-count-warn[data-v-29e46390] {
  margin-top: 10px;
}
.pin-button[data-v-29e46390] {
  position: relative;
  display: inline-block;
}
.pins-menu[data-v-29e46390] {
  min-width: 300px;
}
.pins-menu-wrapper[data-v-29e46390] {
  border-bottom: 1px solid lightgray;
  padding: 5px;
}
.pin-item[data-v-29e46390] {
  display: flex;
  justify-content: space-between;
}
.pin-item-name[data-v-29e46390] {
  display: flex;
}
.pin-item-name img[data-v-29e46390] {
  width: 15px;
  margin-left: 15px;
}
.pin-item a[data-v-29e46390]:hover {
  text-decoration: underline;
}
.pin-close[data-v-29e46390]:hover {
  cursor: pointer;
  text-decoration: underline;
}
.lang-wrap[data-v-29e46390] {
  margin-top: 5px;
  margin-right: 20px;
}
.no-pins[data-v-29e46390] {
  color: grey;
  font-weight: 400;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppHeader.vue?vue&type=style&index=0&id=62e67898&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.header.header-sticky {
  z-index: 1000;
}
.white {
  background-color: white;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Sidebar/AdminMenu.vue?vue&type=style&index=0&id=b670a19c&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-slider .nav-group .nav-group-items .nav-link {
  margin-left: 20px;
}
.nav-icon {
  text-decoration: none !important;
}
.router-link-active .link-text {
  text-decoration: underline !important;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Sidebar/PmMenu.vue?vue&type=style&index=0&id=93eab26e&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-slider .nav-group .nav-group-items .nav-link {
  margin-left: 20px;
}
.nav-icon {
  text-decoration: none !important;
}
.router-link-active .link-text {
  text-decoration: underline !important;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Sidebar/SalesMenu.vue?vue&type=style&index=0&id=cbba3cf4&lang=scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-slider .nav-group .nav-group-items .nav-link {
  margin-left: 20px;
}
.nav-icon {
  text-decoration: none !important;
}
.router-link-active .link-text {
  text-decoration: underline !important;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Sidebar/HrMenu.vue?vue&type=style&index=0&id=59c92d0c&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-slider .nav-group .nav-group-items .nav-link {
  margin-left: 20px;
}
.nav-icon {
  text-decoration: none !important;
}
.router-link-active .link-text {
  text-decoration: underline !important;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/Sidebar/UserMenu.vue?vue&type=style&index=0&id=01b39dd2&lang=scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-slider .nav-group .nav-group-items .nav-link {
  margin-left: 20px;
}
.nav-icon {
  text-decoration: none !important;
}
.router-link-active .link-text {
  text-decoration: underline !important;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppSidebarNav.vue?vue&type=style&index=0&id=c5c046e2&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-c5c046e2]:focus,
.date-input[data-v-c5c046e2]:focus,
.form-select[data-v-c5c046e2]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-c5c046e2] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-c5c046e2] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-c5c046e2]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-c5c046e2]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-c5c046e2] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-c5c046e2]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-c5c046e2]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-c5c046e2] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-c5c046e2] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-c5c046e2]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.nav-link[data-v-c5c046e2] {
  cursor: pointer;
}
.iconimg[data-v-c5c046e2] {
  width: 10%;
  margin-left: 3%;
  margin-right: 8%;
  color: rgba(255, 255, 255, 0.6);
  fill: rgba(255, 255, 255, 0.6);
}
.sidebar-slider[data-v-c5c046e2] {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 160px;
}
.nav-link[data-v-c5c046e2] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.link-text[data-v-c5c046e2] {
  text-decoration: none;
}
.nav-group .link-text[data-v-c5c046e2] {
  margin-left: 8px;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/styles/_default_table.scss ***!
  \********************************************************************************************************************************************************************************************************************************/

.vgt-table.bordered {
  border: none;
}
// head
.vgt-table thead,
.vgt-table thead tr,
.vgt-table thead th {
  background: rgba(8, 3, 48, 0.6);
    color: #fff !important;
    text-align: center;
  vertical-align: middle;
  padding: 10px 10px !important;
}

.vgt-table thead tr th:first-child {
  border-top-left-radius: 8px;
  overflow: hidden;
  border: none;
}

.vgt-table thead tr th:last-child {
  border-top-right-radius: 8px;
  overflow: hidden;
  border: none;
}

.vgt-table thead tr th {
  border: none;
  border-bottom: 2px solid #9ca3af;
}


// arrows
.vgt-table th.sortable button:before {
  border-top: 5px solid white;
}
.vgt-table th.sortable button:after {
  border-bottom: 5px solid white;
}



.content-filter-btn,
.main-btn,
.content-filter-range {
  background-color: $secondary-main !important;
  border: none;
}

.vgt-table th,
.vgt-table td {
  padding: 2px 12px !important;
}

.vgt-table tbody td {
  text-align: center;
  vertical-align: middle;
}

.vgt-table.bordered td,
.vgt-table.bordered th,
.vgt-table.bordered tbody tr,
.vgt-table.bordered thead th {
  border: none !important;
}

.vgt-table td,
.vgt-table th {
  padding: 4px 8px !important;
}

.vgt-table.striped tbody tr:nth-child(even) {
  background-color: rgba(8, 3, 48, 0.07);
}

.vgt-table.striped tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.btn-profile {
  background-color: $secondary-main;
  border: none;
  border-radius: 5px;
  color: white;
}

.vgt-table {
  max-width: 1576px !important;
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
}

.vgt-table table {
  table-layout: fixed !important;
  width: 100%;
}

.col-report {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 500px !important;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
// tabs
.nav {
  border-bottom: none;
  margin-bottom: 0 !important;
  display: flex;
}



.filter-btn {
  height: 36px !important;
}

.tabs-item {
  color: black !important;
}

.tabs-item.active-tab {
  background-color: $primary-main;
  color: white !important;
  margin-bottom: 3px;
  &:hover {
    background-color: $primary-main;
    color: white;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppSidebarNav.vue?vue&type=style&index=1&id=c5c046e2&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.sidebar-slider .nav-icon {
  font-size: 24px;
  color: white;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppSidebar.vue?vue&type=style&index=0&id=59656dee&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-59656dee]:focus,
.date-input[data-v-59656dee]:focus,
.form-select[data-v-59656dee]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-59656dee] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-59656dee] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-59656dee]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-59656dee]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-59656dee] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-59656dee]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-59656dee]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-59656dee] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-59656dee] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-59656dee]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar-brand-wrapper[data-v-59656dee] {
  justify-content: flex-start;
}
.sidebar-brand-logo[data-v-59656dee] {
  height: 45px;
  margin: 8px 20px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/base/AppSidebar.vue?vue&type=style&index=1&id=59656dee&lang=scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.sidebar {
  background-color: rgba(8, 3, 48, 0.9) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  filter: none !important;
  min-height: 100vh;
}
.sidebar-nav {
  min-height: 100vh;
}
.nav-group {
  background: none !important;
}
.router-link-active {
  font-weight: 700;
}
.sidebar-nav a {
  color: white !important;
}
.nav-link svg {
  color: white !important;
}
.sidebar, .sidebar > * {
  background-color: rgba(8, 3, 48, 0.9) !important;
}
.nav-group-items {
  background-color: rgba(12, 4.5, 72, 0.9) !important;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/vacation/GetVacationModal.vue?vue&type=style&index=0&id=4dbbcc72&lang=scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.checkbox-input-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.checkbox-input-item {
  margin-right: 8px;
}
.checkbox-input-label {
  margin-bottom: 0;
}
.days-count {
  margin-bottom: 10px;
  font-weight: bold;
}
.days-count-warn {
  margin-bottom: 10px;
  color: red;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/vacation/GetDayOffModal.vue?vue&type=style&index=0&id=108b7e88&lang=scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control:focus,
.date-input:focus,
.form-select:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn:disabled {
  border: 1px solid grey !important;
}
.table-btn-size {
  height: 25px;
  width: 50px;
}
.btn-red {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.checkbox-pay {
  margin-top: 20px;
}
.checkbox-input-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.checkbox-input-item {
  margin-right: 8px;
}
.checkbox-input-label {
  margin-bottom: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/hr/EventModal.vue?vue&type=style&index=0&id=7703e553&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.form-control[data-v-7703e553]:focus,
.date-input[data-v-7703e553]:focus,
.form-select[data-v-7703e553]:focus {
  border-color: rgba(8, 3, 48, 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgba(153, 153, 153, 0.25) !important;
}
.primary-input[data-v-7703e553] {
  padding: 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey !important;
}
.main-primary-btn[data-v-7703e553] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #459DE5;
  border: none;
  color: white;
}
.main-primary-btn[data-v-7703e553]:hover {
  background-color: rgb(113.7452830189, 180.5754716981, 235.2547169811) !important;
  color: white;
}
.main-primary-btn[data-v-7703e553]:disabled {
  border: 1px solid grey !important;
}
.main-secondary-btn[data-v-7703e553] {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #459DE5;
  border: 1px solid #459DE5;
}
.main-secondary-btn[data-v-7703e553]:hover {
  background-color: rgb(247.35, 247.35, 247.35);
  color: #459DE5;
  border: 1px solid #459DE5 !important;
}
.main-secondary-btn[data-v-7703e553]:disabled {
  border: 1px solid grey !important;
}
.table-btn-size[data-v-7703e553] {
  height: 25px;
  width: 50px;
}
.btn-red[data-v-7703e553] {
  background-color: red !important;
  color: white !important;
  border: none !important;
}
.btn-red[data-v-7703e553]:hover {
  background-color: rgb(255, 110, 110) !important;
  color: white !important;
  border: none !important;
}
.pending[data-v-7703e553] {
  color: orange;
}
.approved[data-v-7703e553] {
  color: green;
}
.notApproved[data-v-7703e553] {
  color: red;
}