:root {
   --color-primary: #ffa2b4;
}

/* General */
.btn-primary {
   color: #fff;
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   box-shadow: 0 0.125rem 0.25rem 0 var(--color-primary);
}

.btn-primary:hover {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   transform: translateY(-1px);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
}

.form-select,
.form-control {
   background-color: #f7f7f7 !important;
   color: black;
}

.form-control:focus,
.form-select:focus {
   border-color: #ffa2b4;
   color: black;
}

/* Menu */
.bg-menu-theme .menu-inner>.menu-item>.menu-link.active {
   color: var(--color-primary);
   background-color: rgba(105, 108, 255, 0.16) !important;
}

.bg-menu-theme .menu-sub>.menu-item.active>.menu-link:not(.menu-toggle)::before {
   background-color: var(--color-primary) !important;
   border: 3px solid #e7e7ff !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
   background-color: #ffd8d2;
   color: black;
   box-shadow: 0 2px 4px 0 rgb(255 216 210 / 72%);
}

.nav .nav-link:hover, .nav .nav-link:focus{
   color: #ffa2b4;
}

/* vue select */
.multiselect-tag {
   background: #5e5355 !important;
}

.multiselect,
.multiselect-search,
.multiselect-tags-search {
   background: #f7f7f7 !important;
}

.multiselect:focus,
.multiselect-search:focus,
.multiselect-tags-search:focus {
   border-color: #ffa2b4;
}

.multiselect-option.is-selected {
   background: var(--color-primary) !important;
}

/* datatable */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active>a:not(.page-link),
.pagination li.active>a:not(.page-link):hover,
.pagination li.active>a:not(.page-link):focus {
   background-color: var(--color-primary) !important;
}

@media screen and (max-width: 767px) {

   div.dataTables_wrapper div.dataTables_length,
   div.dataTables_wrapper div.dataTables_filter,
   div.dataTables_wrapper div.dataTables_info,
   div.dataTables_wrapper div.dataTables_paginate {
      margin-bottom: 1rem;
   }

}

/* swal2 */
.swal2-container {
   z-index: 9999999 !important;
}

.swal2-popup {
   border: 3rem;
   box-shadow: 0rem 0rem 1rem 0.1rem white;
}

.swal2-styled.swal2-confirm {
   background-color: var(--color-primary) !important;
   min-width: 7rem !important;
}

/* nprogress */

#nprogress .bar {
   background: #ffd8d2 !important;
   box-shadow: 0rem 0rem 0.6rem 0.1rem #ffa2b4 !important;
   height: 0.3rem !important;
}

#nprogress .peg {
   box-shadow: 0 0 10px #ffd8d2, 0 0 5px #ffd8d2 !important;
}

#nprogress .spinner {
   top: 1.9rem !important;
   right: 50% !important;
}

#nprogress .spinner-icon {
   width: 1.5rem !important;
   height: 1.5rem !important;
   border-top-color: #ffd8d2 !important;
   border-left-color: #ffd8d2 !important;
}