/*================================
=            uiversal            =
================================*/
:root {
  --primCol: #2B3382;
  --primCol-RGB: 43, 51, 130;
  --secCol: #F47D42;
  --secCol-RGB: 244, 125, 66;
  --lpCol: #EAEBF3;
  --lpCol-RGB: 234, 235, 243;
  --dpCol: #121537;
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-feature-settings: "lnum" 1;
  position: relative;
}
.form-floating.required::after {
    content: "\f621";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    color: red;
    top: 50%;
    transform: translateY(-50%);
}
.form-floating.requiredf::before {
    content: "\f621";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    color: red;
    top: 50%;
    transform: translateY(-100%);
}

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

a,
p,
span,
button {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-feature-settings: "lnum" 1;
}

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

hr {
  margin: 0;
}

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

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

/**
    * Reinstate scrolling for non-JS clients
*/
.simplebar-content-wrapper {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: initial;
  width: initial;
  height: initial;
}

.simplebar-scrollbar::before {
  background-color: var(--primCol);
  opacity: 0.5;
}

.simplebar-scrollable-y:hover .simplebar-scrollbar::before {
  opacity: 1;
}

.simplebar-track {
  background: rgba(var(--primCol-RGB), 0.25);
  border-radius: 999px;
  width: 30px;
}

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color: var(--lpCol) !important;
    background-image: none !important;
    color: var(--bs-body-color) !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0 0px 1000px var(--lpCol) inset !important;
    outline: none !important;
    -webkit-text-fill-color: var(--bs-body-color) !important;
}

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png);
}

.ui-datepicker {
    font-family: var(--bs-font-sans-serif);
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--bs-font-sans-serif);
}

.ui-datepicker .ui-datepicker-title select {
    background-color: var(--bs-body-bg);
}

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

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid var(--primCol-RGB);
    background: var(--primCol);
    color: var(--bs-white);
}

.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, a.ui-button:active,
.ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid var(--secCol);
    background: var(--secCol);
    color: var(--primCol);
    font-weight: 700;
}
/*==============================
=            header            =
==============================*/
/***** header *****/
.header-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.header-content .header {
  background: var(--lpCol);
  padding: 0.75rem 1rem;
  width: 100%;
  border-radius: 0.5rem;
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px -16px 0 3px #fff;
  border: 1px solid rgba(var(--primCol-RGB), 0.15);
  z-index: 3;
}
.header-content .header .breadcrumb {
  text-transform: capitalize;
  margin-bottom: 0;
  font-size: 2rem;
  margin-left: 0.5rem;
  color: var(--primCol);
  font-weight: 300;
}
.header-content .header .user .dropdown .dropdown-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.header-content .header .user .dropdown .dropdown-toggle::after {
  margin-left: 0.5rem;
}
.header-content .header .user .dropdown .dropdown-toggle .user-img {
  width: 45px;
  height: 45px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--primCol);
}
.header-content .header .user .dropdown .dropdown-toggle .user-img img {
  width: auto;
  height: 100%;
}
.header-content .header .user .dropdown .dropdown-toggle .name-level {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.header-content .header .user .dropdown .dropdown-toggle .name-level label {
  font-size: 1.125rem;
}
.header-content .header .user .dropdown .dropdown-toggle .name-level .level {
  font-size: 0.875rem;
  color: grey;
  margin-top: -5px;
}
.header-content .header .user .dropdown .dropdown-toggle:hover .name-level .level {
  color: rgba(var(--lpCol-RGB), 0.5);
}
.header-content .header .navbar-togglerr {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background: var(--primCol);
  overflow: hidden;
  border: none;
  padding: 0.7rem;
}
.header-content .header .navbar-togglerr:focus {
  box-shadow: unset;
}
.header-content .header .navbar-togglerr .navbar-toggler-custom-icon .bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--lpCol);
  display: block;
  transition: 0.3s all;
}
.header-content .header .navbar-togglerr .navbar-toggler-custom-icon .bar:not(:last-child) {
  margin-bottom: 4px;
}
.header-content .header .navbar-togglerr[aria-expanded=true] .navbar-toggler-custom-icon .bar {
  margin-bottom: -3px;
}
.header-content .header .navbar-togglerr[aria-expanded=true] .navbar-toggler-custom-icon .bar-1 {
  transform: rotate(45deg);
}
.header-content .header .navbar-togglerr[aria-expanded=true] .navbar-toggler-custom-icon .bar-2 {
  transform: translateX(200%);
}
.header-content .header .navbar-togglerr[aria-expanded=true] .navbar-toggler-custom-icon .bar-3 {
  transform: rotate(-45deg);
}

/***** End header *****/
/*=====  End of header  ======*/
/*==============================
=            sidebar            =
==============================*/
/***** sidebar *****/
.sidebar {
  position: sticky;
  top: 1rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 270px;
  width: 100%;
}
.sidebar .menu-wrapper {
  background: var(--lpCol);
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--primCol-RGB), 0.15);
}
.sidebar .menu-wrapper .logo-wrapper .logo {
  max-width: 100%;
  max-height: 30px;
}
.sidebar .menu-wrapper .logo-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--primCol-RGB), 0.5);
  margin-block: 0.5rem;
}
.sidebar .menu-wrapper .menu-container {
  height: calc(100vh - 313px);
}
.sidebar .menu-wrapper .menu-container .accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item {
  border-radius: 0.5rem;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item:not(:first-of-type) {
  border-top: 1px solid rgba(var(--primCol-RGB), 0.25);
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-header .accordion-button {
  border-radius: 0.5rem 0.5rem 0 0;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-header .accordion-button.collapsed {
  border-radius: 0.5rem;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-collapse .accordion-body {
  padding: unset;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-collapse .accordion-body .menu {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  text-transform: capitalize;
  width: 100%;
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  font-size: 0.875rem;
  transition: 0.3s;
  /*word-break:break-all;*/
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-collapse .accordion-body .menu:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-collapse .accordion-body .menu:hover, .sidebar .menu-wrapper .menu-container .accordion .accordion-item .accordion-collapse .accordion-body .menu.active {
    background: var(--primCol);
    color: var(--lpCol);
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button .user-img {
  width: 45px;
  height: 45px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--primCol);
  flex-shrink: 0;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button .user-img img {
  width: auto;
  height: 100%;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button .name-level {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button .name-level label {
  font-size: 1rem;
  white-space: nowrap;
}
.sidebar .menu-wrapper .menu-container .accordion .accordion-item.user-dropdown .accordion-header .accordion-button .name-level .level {
  font-size: 0.75rem;
  color: grey;
}
.sidebar {
    position: fixed;
    top: 0;
    left: -270px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 270px;
    width: 100%;
    height: 100vh;
    padding: 1rem 0rem 1rem 1rem;
    transition: left 0.3s ease;
    z-index: 4;
}
.sbar-toggle-btn {
    position: absolute;
    right: -18px;
    top: 17px;
    background-color: var(--primCol);
    color: var(--bs-white);
    padding: 5px 6px;
    cursor: pointer;
    border: none;
    line-height: 1;
    border-radius: 4px;
    border: none;
    font-size: 10px;
}
.sidebar-header-wrapper.sidebar-active .sidebar {
    left: 0;
}
.header-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-left: 0;
    transition: margin-left 0.3s ease;
}
.sidebar-header-wrapper.sidebar-active .header-content {
    margin-left: 270px;
}

/***** End sidebar *****/
/*=====  End of sidebar  ======*/
/*===============================
=            content            =
===============================*/
.sidebar-header-wrapper {
  display: flex;
  flex-direction: row;
  align-items: start;
  padding: 1rem;
  gap: 1.5rem;
}

.divider {
  width: 100%;
  background: rgba(var(--primCol-RGB), 1);
  height: 2px;
  display: block;
  margin-block: 0.5rem;
  border-radius: 999px;
}

.box {
  background: var(--lpCol);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* -------------------------------------------- */
/*               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;
  background: var(--lpCol);
  border-radius: 1rem;
}
.table .thead:after, .table .tbody:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 2px;
  background-color: rgba(43, 51, 130, 0.5);
}
.table .thead .tr, .table .tbody .tr {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-evenly;
}
.table .thead .tr .th, .table .tbody .tr .th, .table .tbody .tr .td {
  font-weight: bold;
  color: var(--primCol);
  text-transform: capitalize;
  font-size: 0.875rem;
  padding: 8px 16px;
  font-family: "Roboto", serif;
}
.table .tbody:after {
  display: none;
}
.table .tbody .tr:not(:last-child) {
  border-bottom: 1px solid rgba(43, 51, 130, 0.25);
}
.table .tbody .tr.hoverable:hover {
  background: rgba(43, 51, 130, 0.15);
  cursor: pointer;
}
.table .tbody .tr.parent {
  background: rgba(var(--secCol-RGB), 0.25);
}
.table .tbody .tr.parent .td {
  text-transform: capitalize;
  white-space: nowrap;
}
.table .tbody .tr .td {
  color: var(--dpCol);
  font-weight: 400;
  font-family: "Roboto", 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 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;
}

#file-upload-button + span {
  display: none;
}

/* -------------------------------------------- */
/*                 section title                */
/* -------------------------------------------- */
.sec-title {
  padding: 0.5rem 0;
  color: var(--primCol);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.sec-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(var(--primCol-RGB), 0.5);
  border-radius: 999px;
  margin-block: 0.25rem;
}

/*=====  End of content  ======*/
/*===============================
=            footer            =
===============================*/
/***** footer *****/
.footer {
  background: var(--lpCol);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-transform: capitalize;
}
.footer .divider {
  background: rgba(var(--primCol-RGB), 0.5);
}
.footer .project-of {
  width: 100%;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.footer .project-of span {
  font-weight: bold;
}
.footer .project-of .ucas-logo {
  height: 30px;
}
.footer img {
  max-width: 100%;
  max-height: 50px;
}
.form-check, .form-check input, .form-check label {
    cursor: pointer !important;
}
.checks .form-check.active {
    background: #0e73a9;
    border-radius: 4px;
    padding: 5px 10px 5px 30px;
    width: auto;
    color: #fff;
}

.tutulx.accordion-button:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.menu-wrapper .dashboard {
    background-color: #db3838;
    border: none;
    width: 100%;
}

.ui-datepicker {
    z-index: 9999 !important;
}
/***** End footer *****/
/*=====  End of footer  ======*/ /*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
/*# sourceMappingURL=common.css.map */
@media (max-width: 992px) {
    .sidebar {
    position: fixed;
    transform: translateX(100%);
    right: -50px;
    max-width: calc(100% - 2rem);
    transition: 0.3s;
    top: 103px;
    z-index: 2;
    filter: drop-shadow(0px 0px 10px var(--primCol));
  }
  .sidebar.open {
    right: 16px;
    transform: translateX(0%);
    z-index: 3;
  }
}

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        left: 50px;
        right: 0px;
        max-width: calc(100% - 1rem);
        transition: 0.3s;
        top: 103px;
        z-index: 2;
        filter: drop-shadow(0px 0px 10px var(--primCol));
        border-radius: 1rem;
        height: calc(100vh - 113px);
    }
    .sidebar .menu-wrapper .menu-container {
        height: calc(100vh - 313px);
    }
    .sidebar.open {
        left: 0px;
        right: 0px;
    }
    .header-content {
        margin-left: 0;
    }
    .sbar-toggle-btn {
        display: none;
    }
}

@media (max-width: 768px) {
  .header-content .header .breadcrumb {
    font-size: 1.5rem;
  }
  .sidebar .menu-wrapper .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sidebar .menu-wrapper .menu-container {
    height: calc(100vh - 250px);
  }
  .table {
    overflow: hidden;
  }
  .table .thead, .table .tbody {
    display: none;
  }
  .table .tbody {
    display: block;
  }
  .table .tbody:after {
    display: none;
  }
  .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 16px;
  }
  .table .tbody .tr .td:first-child {
    justify-content: center;
    background: var(--primCol);
    color: var(--lpCol);
    font-weight: bold;
  }
  .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;
  }
  .table .tbody .tr {
    flex-wrap: wrap;
    align-items: start;
  }
  .custom-file-button .custom-file-label {
    display: none;
  }
}


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

@media (max-width: 576px) {
    .header-content .header {
        box-shadow: none;
        border: none;
    }
}