/*================================
=            uiversal            =
================================*/

:root {
  --primCol: #075ca9;
  --primCol-RGB: 7, 92, 169;
  --secCol: #29C0F1;
  --lpCol: #e6eff6;
  --lpCol-RGB: 230, 239, 246;
  --dpCol: #032747;
  --dpCol-RGB: 3, 39, 71;
  --ck-border-radius: 0.5rem !important;
  --sidebarWidth: 260px;
}

* {
  margin: 0;
  padding: 0;
  /* Track */
  /* Handle */
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(var(--primCol-RGB), 0.25);
}

*::-webkit-scrollbar-thumb {
  opacity: 1;
  background: rgba(var(--primCol-RGB), 0.5);
  background-clip: padding-box;
  border-radius: 15px;
}

body {
    font-family: "Manrope", sans-serif;
    position: relative;
    background: var(--lpCol) url(../images/bg.jpg);
    background-size: cover;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  color: unset;
}

a,
p,
span,
button {
  font-family: "Manrope", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  margin: 0;
}

hr {
  margin: 0;
}

button,
.btn {
  text-transform: capitalize;
}

.text-justify {
  text-align: justify;
}

/*=====  End of uiversal  ======*/

/*==============================
=            header            =
==============================*/

.header {
  background: #fff;
  padding: 0.5rem 1rem;
  box-shadow: 0px 2px 2px rgba(var(--primCol-RGB), 0.15), 0px 4px 4px rgba(var(--primCol-RGB), 0.15), 0px 8px 8px rgba(var(--primCol-RGB), 0.15);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 6;
}

.header .logo {
  height: 50px;
}

.header .user-btn button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.header .user-btn .img-wrapper {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.header .user-btn .img-wrapper img {
  width: 100%;
}

.header .navbar-toggler {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background: var(--primCol);
  padding: 0.75rem;
  flex-shrink: 0;
}

.header .navbar-toggler:focus {
  box-shadow: unset;
}

.header .navbar-toggler .navbar-toggler-custom-icon .bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--lpCol);
  display: block;
  transition: 0.3s all;
}

.header .navbar-toggler .navbar-toggler-custom-icon .bar:not(:last-child) {
  margin-bottom: 4px;
}

.header .navbar-toggler[aria-expanded=true] .navbar-toggler-custom-icon .bar {
  margin-bottom: -3px;
}

.header .navbar-toggler[aria-expanded=true] .navbar-toggler-custom-icon .bar-1 {
  transform: rotate(45deg);
}

.header .navbar-toggler[aria-expanded=true] .navbar-toggler-custom-icon .bar-2 {
  display: none;
}

.header .navbar-toggler[aria-expanded=true] .navbar-toggler-custom-icon .bar-3 {
  transform: rotate(-45deg);
}

.header.public {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*=====  End of header  ======*/

/*==============================
=            sidebar            =
==============================*/

.sidebar {
  background: #fff;
  padding: 1rem;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  position: fixed;
  z-index: 3;
  transition: 0.3s;
  width: var(--sidebarWidth);
  overflow-y: auto;
  /* Track */
  /* Handle */
}

.sidebar::-webkit-scrollbar {
  width: 5px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(var(--primCol-RGB), 0.25);
}

.sidebar::-webkit-scrollbar-thumb {
  opacity: 1;
  background: rgba(var(--primCol-RGB), 0.5);
  background-clip: padding-box;
  border-radius: 15px;
}

.sidebar .accordion {
  --bs-accordion-btn-bg: var(--lpCol);
  --bs-accordion-border-color: var(--lpCol);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--lpCol);
  --bs-accordion-active-bg: var(--primCol);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: 0.5rem;
}

.sidebar .accordion .accordion-item .accordion-header .accordion-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.sidebar .accordion .accordion-item .accordion-header .accordion-button i {
  margin-right: 0.75rem;
}

.sidebar .accordion .accordion-item .accordion-header .accordion-button::after {
  margin-left: unset;
  flex-shrink: 0;
  width: unset;
  height: unset;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 12px;
  background-image: unset;
  background-repeat: unset;
  background-size: unset;
  transition: var(--bs-accordion-btn-icon-transition);
}

.sidebar .accordion .accordion-item .accordion-body {
  padding: unset;
}

.sidebar .accordion .accordion-item .accordion-body .menu-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem;
  gap: 0.5rem;
}

.sidebar .menu {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--lpCol);
  border-radius: 0.25rem;
  text-transform: capitalize;
  border: 1px solid var(--lpCol);
}

.sidebar .menu:hover,
.sidebar .menu.active {
  background: var(--primCol);
  color: var(--lpCol);
  transition: 0.3s;
}

/*=====  End of sidebar  ======*/

/*===============================
=            content            =
===============================*/

/***** preloader *****/

.preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--lpCol);
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.preloader img {
  width: 200px;
}

/***** End preloader *****/

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--primCol);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  transition: 0.3s;
}

.overlay.active {
  opacity: 0.75;
  visibility: visible;
}

.main-content {
    padding-top: 1rem;
    padding-bottom: 3rem;
    margin-left: var(--sidebarWidth);
    border: 0px solid transparent;
    border-image: url(../images/mh-border.png) 230 round;
    border-image-width: 221px;
    border-inline-width: 90px;
    border-block-width: 185px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.wrapper .card-body .label-primary {
  text-transform: uppercase;
  font-weight: bold;
  color: rgba(var(--dpCol-RGB), 0.75);
  width: 100%;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
}

.wrapper .card-body .label-primary::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background: rgba(var(--dpCol-RGB), 0.15);
}

.card .card-header {
  color: var(--primCol);
  text-transform: uppercase;
  text-align: center;
}

.card .card-header.with-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.card .card-header.with-btn button {
  border-radius: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

input::placeholder {
  text-transform: capitalize;
}

.form-floating label {
  text-transform: capitalize;
}

/* -------------------------------------------- */

/*                  custom file                 */

/* -------------------------------------------- */

.custom-file-button input[type=file] {
  margin-left: -2px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}

.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.custom-file-button:hover label {
  background-color: #dde0e3;
  cursor: pointer;
}

.custom-file-button input[type=file] {
  position: relative;
}

.custom-file-button .custom-file-label {
  position: absolute;
  background: #fff;
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
  z-index: 5;
  cursor: pointer;
}

/* -------------------------------------------- */

/*                   ckeditor                   */

/* -------------------------------------------- */

.ck.ck-editor {
  width: 100% !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  padding: 0 1rem;
}

/* -------------------------------------------- */

/*              page banner preview             */

/* -------------------------------------------- */

.card-header.banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.card-header.banner .banner-image-link {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

.card-header.banner .banner-image-link img {
  width: 100%;
  max-height: 150px;
}

.card-header.banner .banner-image-link .banner-overlay {
  width: 100%;
  height: 100%;
  background: rgba(var(--primCol-RGB), 0.85);
  display: flex;
  position: absolute;
  color: var(--lpCol);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-transform: capitalize;
  font-weight: bold;
  opacity: 0;
  visibility: hidden;
}

.card-header.banner .banner-image-link .banner-overlay i {
  font-size: 2rem;
}

.card-header.banner .banner-image-link:hover .banner-overlay {
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}

.card-header.banner .banner-image-link:hover .banner-overlay i {
  font-size: 2rem;
}

/* -------------------------------------------- */

/*                     modal                    */

/* -------------------------------------------- */

.modal {
  --bs-border-color-translucent: rgba(var(--lpCol-RGB), 0.25);
  --bs-modal-padding: 1rem 1rem;
  --bs-modal-footer-gap: 1.5rem;
}

.modal .btn-close {
  --bs-btn-close-bg: url("data: image/svg+xml, %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' %3E%3Cstyle type='text/css' %3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M256,48c114.9,0,208,93.1,208,208s-93.1,208-208,208S48,370.9,48,256S141.1,48,256,48z M256,512 c141.4,0,256-114.6,256-256S397.4,0,256,0S0,114.6,0,256S114.6,512,256,512z M175,175c-9.4,9.4-9.4,24.6,0,33.9l47,47l-47,47 c-9.4,9.4-9.4,24.6,0,33.9s24.6,9.4,33.9,0l47-47l47,47c9.4,9.4,24.6,9.4,33.9,0s9.4-24.6,0-33.9l-47-47l47-47 c9.4-9.4,9.4-24.6,0-33.9s-24.6-9.4-33.9,0l-47,47l-47-47C199.5,165.6,184.3,165.6,175,175z' /%3E%3C/svg%3E");
  width: 1.5em;
  height: 1.5em;
  background: transparent var(--bs-btn-close-bg) center/1.5em auto no-repeat;
}

.modal .modal-body .wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modal .modal-body .wrapper .label-primary {
  text-transform: uppercase;
  font-weight: bold;
  color: rgba(var(--dpCol-RGB), 0.75);
  width: 100%;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
}

.modal .modal-body .wrapper .label-primary::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background: rgba(var(--dpCol-RGB), 0.15);
}

.modal-header {
  background: var(--primCol);
  color: var(--lpCol);
}

/* -------------------------------------------- */

/*               responsive table               */

/* -------------------------------------------- */

.table > :not(caption) > * > * {
  padding: unset;
  background-color: unset;
  border-bottom-width: unset;
  box-shadow: unset;
}

.table > :not(:first-child) {
  border-top: unset;
}

.table {
  margin-bottom: 0;
  border: 1px solid rgba(var(--primCol-RGB), 0.25);
  border-radius: 1rem;
}

.table .thead:after,
.table .tbody:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background-color: rgba(7, 92, 169, 0.25);
}

.table .thead .tr,
.table .tbody .tr {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.table .thead .tr .th,
.table .tbody .tr .th,
.table .tbody .tr .td {
  font-weight: bold;
  color: var(--primCol);
  text-transform: uppercase;
  padding: 8px 16px;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
}

.table .tbody:after {
  display: none;
}

.table .tbody .tr:not(:last-child) {
  border-bottom: 1px solid rgba(7, 92, 169, 0.25);
}

.table .tbody .tr.hoverable:hover {
  background: rgba(7, 92, 169, 0.15);
  cursor: pointer;
}

.table .tbody .tr .td {
  color: var(--dpCol);
  font-weight: 400;
  font-family: "Manrope", sans-serif;
  padding: 4px 16px;
  text-transform: none;
}

.table .thead .tr .th,
.table .thead .tr .td,
.table .tbody .tr .th,
.table .tbody .tr .td {
  flex-basis: 100%;
}

/* -------------------------------------------- */

/*                 custom check                 */

/* -------------------------------------------- */

.custom-check .form-control {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  cursor: pointer;
  border-color: #dee2e6;
}

/* -------------------------------------------- */

/*             jquery datepicker css            */

/* -------------------------------------------- */

.ui-datepicker {
  z-index: 6 !important;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: var(--primCol);
  color: #fff;
  font-weight: bold;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  border: 1px solid #1F438D;
  background: #73A1FF;
  color: #173268;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  border: 1px solid #0E224A;
  background: var(--primCol);
  font-weight: bold;
  color: #fff;
}

/*=====  End of content  ======*/

/*===============================
=            footer            =
===============================*/

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  color: var(--primCol);
  width: -webkit-fill-available;
  width: -moz-available;
  margin-left: var(--sidebarWidth);
}

.footer .copyright {
  padding: 0.5rem 1rem;
}

.footer .ucas {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.footer .ucas img {
  height: 30px;
}

/*=====  End of footer  ======*/

/* -------------------------------------------- */

/*                responsive css                */

/* -------------------------------------------- */

/*# sourceMappingURL=common.css.map */

@media (max-width: 769px){
:root {
  --a: a;
}

.header .user-btn {
  display: none;
}

.sidebar {
  overflow-y: auto;
  right: 0;
  transform: translateX(100%);
}

.sidebar.show {
  transform: translateX(0);
}

.main-content {
  margin-left: unset;
}

.card .card-header.with-btn {
  flex-direction: column;
}

.card .card-header.with-btn button {
  margin-top: 0.5rem;
}

.custom-file-button .custom-file-label {
  display: none;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-left: unset;
}

.footer .copyright {
  border-bottom: 1px solid rgba(var(--primCol-RGB), 0.15);
  width: 100%;
}

.footer .ucas {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
}

@media (min-width: 769px){
:root {
  --a: a;
}

.header .navbar-toggler {
  display: none;
}

.sidebar {
  box-shadow: 2px 0px 2px rgba(var(--primCol-RGB), 0.15), 2px 0px 4px rgba(var(--primCol-RGB), 0.15), 2px 0px 8px rgba(var(--primCol-RGB), 0.15);
}
}

@media (max-width: 576px){
:root {
  --a: a;
}

.header .logo {
  height: unset;
  width: 100%;
  max-width: 215px;
}
}

@media (max-width: 992px){
.table {
  overflow: hidden;
}

.table .thead,
.table .tbody {
  display: none;
}

.table .tbody {
  display: block;
}

.table .tbody .tr {
  flex-wrap: wrap;
  align-items: start;
}

.table .tbody .tr .td {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
  margin: unset;
  text-align: right;
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--primCol) 25%, #fff);
  padding: 8px;
  gap: 0.5rem;
}

.table .tbody .tr .td:first-child {
  justify-content: center;
  background: var(--primCol);
  color: var(--lpCol);
  font-weight: bold;
}

.table .tbody .tr .td:first-child .th-sm {
  color: var(--lpCol);
}

.table .tbody .tr .td:first-child .th-sm::after {
  content: ":";
  margin-right: 0.5rem;
}

.table .tbody .tr .td:first-child,
.table .tbody .tr .td:last-child {
  border-bottom: unset;
}

.table .tbody .tr .td .th-sm {
  font-weight: bold;
  color: var(--primCol);
  text-align: left;
}
}

@media (min-width: 992px){
.table .tbody .tr .th-sm {
  display: none;
}
}

@media (max-width: 350px){
.footer .ucas {
  flex-direction: column;
}
}