@charset "UTF-8";
/* ------------------------------------------------------------------------------ 
Project Name : Andrews University
Description : Theme Style Sheet 
Author : Imran Rovan 
Created On : 16 Jul 2024 
--------------------------------------------------------------------------------*/
/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500&display=swap");
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic);
@import url(https://zavoloklom.github.io/material-design-iconic-font/css/docs.md-iconic-font.min.css);
:root {
  --bs-danger-rgb: 252, 66, 66;
  --bs-success-rgb: 36, 200, 9;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body,
p,
a,
li,
span,
div {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  border: none;
  display: block;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

a,
button {
  cursor: pointer;
}

a,
a:hover {
  text-decoration: none;
  outline: 0;
  transition: all 0.2s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  color: #fff;
}

p {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: #555;
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
}

input,
textarea,
select {
  outline: 0;
  border: none;
  resize: none;
}

/*Chatbox scrollbar*/
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  margin: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.6);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  background: rgba(0, 21, 36, 0.25);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #212121;
  overflow-x: hidden;
  overflow-y: auto;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span {
  word-break: break-word;
}
body .r-none {
  display: none;
}
body main {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
  display: flex;
  justify-content: flex-end;
}
body main .card-wrap {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 24px;
  border-radius: 24px;
  border: none;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  height: 100%;
}
body main .card-wrap h1,
body main .card-wrap h2,
body main .card-wrap h3,
body main .card-wrap h4,
body main .card-wrap h5,
body main .card-wrap h6 {
  margin: 0px;
  color: #212121;
}
body main .card {
  background-color: #fff;
  padding: 16px;
  border-radius: 16px;
  border: none;
}
body main .card h1,
body main .card h2,
body main .card h3,
body main .card h4,
body main .card h5,
body main .card h6 {
  margin: 0px;
  color: #212121;
}
body main nav {
  width: 260px;
  padding: 15px;
  border-radius: 24px;
  background-color: rgba(0, 21, 36, 0.4588235294);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  left: 0;
}
body main #content {
  width: calc(100% - 262px);
  padding-left: 28px;
}
body main #content header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
body main #content header .burger-menu {
  display: none;
}
body main #content header h1 {
  font-size: 22px;
  font-weight: 500;
}
body main #content header .right-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  z-index: 9;
}
body main #content header .right-wrap .search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
body main #content header .right-wrap .search .aiagent select {
  width: 36px;
  height: 36px;
  border-radius: 0px;
  font-size: 0;
  -webkit-appearance: none;
  position: absolute;
  top: 4px;
  left: 4px;
  background: #fff url(../images/icon/setting.svg) no-repeat center center;
  z-index: 2;
  cursor: pointer;
}
body main #content header .right-wrap .search .aiagent select option {
  background: #fff;
  font-size: 15px;
  padding: 6px 10px;
}
body main #content header .right-wrap .search input {
  width: 280px;
  max-width: none;
  height: 44px;
  border-radius: 12px;
  border: none;
  padding: 0 40px 0 45px;
  background: #fff url(../images/icon/search.svg) no-repeat left 10px center;
  background-size: 18px;
  transition: width 0.3s ease-in-out;
}
body main #content header .right-wrap .search input:focus {
  width: 540px;
}
body main #content header .right-wrap .btn-notify {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
body main #content header .right-wrap .btn-notify > li {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
body main #content header .right-wrap .btn-notify > li.notification {
  background-color: #f1daf6;
}
body main #content header .right-wrap .btn-notify > li.safety {
  background-color: #e7c3b6;
}
body main #content header .right-wrap .btn-notify > li.message {
  background-color: #a8d4d9;
}
body main #content header .right-wrap .btn-notify > li.email {
  background-color: #d3c2e3;
}
body main #content header .right-wrap .btn-notify > li.logout {
  background-color: #e7c3b6;
}
body main #content header .right-wrap .btn-notify > li > a {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main #content header .right-wrap .btn-notify > li.profile img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}
body main #content header .right-wrap .btn-notify > li .notification-count {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -8px;
  right: -8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #f93a3a;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
body
  main
  #content
  header
  .right-wrap
  .btn-notify.btn-head-admin
  li:nth-child(1)
  a {
  background-color: #c9e7ea;
}
body
  main
  #content
  header
  .right-wrap
  .btn-notify.btn-head-admin
  li:nth-child(2)
  a {
  background-color: #f1daf6;
}
body
  main
  #content
  header
  .right-wrap
  .btn-notify.btn-head-admin
  li:nth-child(3)
  a {
  background-color: #f3d9cf;
}
body main #content header .header-notify {
  position: absolute;
  top: 52px;
  right: -5px;
  z-index: 99;
  width: 350px;
  border-radius: 16px;
  display: none;
  overflow: hidden;
}
body main #content header .header-notify.show {
  display: block;
}
body
  main
  #content
  header
  .header-notify
  .transactions-wrap
  li:not(:last-child)
  .w-100 {
  width: calc(100% - 50px) !important;
}
body
  main
  #content
  header
  .header-notify
  .transactions-wrap
  li:not(:last-child)
  .w-100
  h6 {
  white-space: normal;
}
body main #content .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
body main #content .deprtdrop {
  margin: 0;
}
body main #content .deprtdrop select {
  height: 40px;
  line-height: 40px;
  width: 250px;
  margin: 0;
}

h2 {
  font-size: 18px;
  font-weight: 500;
}

.search {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.search input {
  width: 80%;
  max-width: 350px;
  height: 44px;
  border-radius: 12px;
  border: none;
  padding: 0 10px 0 40px;
  background: #fff url(../images/icon/search.svg) no-repeat left 15px center;
  background-size: 16px;
}
.search button {
  position: absolute;
  right: 10px;
  bottom: 0px;
  z-index: 1;
  width: 40px;
  height: 44px;
  background: transparent;
  border: none;
}

.btn-flex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.mt-40 {
  margin-top: 1rem;
}

.mb-40 {
  margin-bottom: 1rem;
}

.mt-28 {
  margin-top: 28px;
}

.mb-28 {
  margin-bottom: 28px;
}

.modal {
  background: rgba(0, 0, 0, 0.4);
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.modal::-webkit-scrollbar {
  width: 8px;
}
.modal::-webkit-scrollbar-track {
  background: #666;
}
.modal::-webkit-scrollbar-thumb {
  background: #ccc;
}
.modal::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
.modal .modal-dialog {
  max-width: 900px;
}
.modal .modal-content {
  max-height: none;
  overflow-y: visible;
  border-radius: 24px;
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.13);
}
.modal .modal-content h2 {
  font-size: 20px;
  font-weight: 500;
  color: #212121;
  margin-bottom: 5px;
}
.modal .modal-header {
  border: none !important;
  padding: 24px 24px 0 24px;
}
.modal .modal-title {
  color: #222;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 800px;
    margin: 30px auto;
  }
}
.emailform .formgroup {
  position: relative;
}
.emailform .formgroup input {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid #e3e3e3;
  padding-left: 60px;
  padding-top: 10px;
  font-weight: 600;
}
.emailform .formgroup textarea {
  width: 100%;
  height: 200px;
  border: none;
  border-bottom: 1px solid #e3e3e3;
  padding: 50px 5px 10px 0px;
  resize: none;
}
.emailform .formgroup label {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 14px;
  color: #555;
  z-index: 9;
}
.emailform .multiselect-plugin #htmlselect {
  width: 100% !important;
}
.emailform .multiselect-plugin #htmlselect .dd-select {
  border-radius: 0px !important;
  border: none !important;
  border-bottom: solid 1px #d8d8d8 !important;
  width: 100% !important;
}
.emailform .multiselect-plugin #htmlselect .dd-options {
  bottom: inherit;
  top: 50px !important;
  height: 350px;
  width: 100% !important;
}

.text-overflow {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.h-40 {
  height: 40px;
  overflow: hidden;
}

.dash-title p {
  color: rgba(255, 255, 255, 0.7);
}

.fade:not(.show) {
  visibility: hidden;
}

.fade.show {
  visibility: visible;
}

.sortable-card .grabbable {
  flex: unset !important;
}

.form-checkbox label {
  position: relative;
  cursor: pointer;
}
.form-checkbox label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #948256;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-radius: 50px;
  cursor: pointer;
  width: 22px;
  height: 22px;
}
.form-checkbox.check-square label::before {
  border-radius: 5px;
  width: 18px;
  height: 18px;
}
.form-checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
  box-shadow: none !important;
}
.form-checkbox input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 3.5px;
  left: 8px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.form-checkbox input:checked + label:before {
  background-color: #948256;
  border: 2px solid #948256;
}
.form-checkbox.check-square input:checked + label:after {
  top: 3.5px;
  left: 6px;
}
.form-checkbox.check-square input:checked + label:before {
  border: 1px solid #948256;
}

.btn-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #948256;
  background: url(../images/icon/more.svg) no-repeat right center;
  padding-right: 20px;
  text-decoration: none;
}
.btn-link:hover {
  padding-right: 17px;
  color: #948256;
}

.btn-border {
  color: #948256;
  border: 2px solid #948256;
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-border:hover {
  background-color: #948256;
  color: #fff;
}

.btn-arrow {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-block-arrow {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px;
  padding: 5px;
  width: 35px;
  height: 35px;
  border-radius: 8px;
}
.btn-block-arrow img {
  width: 20px;
  height: 20px;
}

.btn-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  height: 44px;
  padding: 0 25px;
  border-radius: 12px;
  border: none;
  border: 2px solid #948256;
}

.btn-primary {
  background-color: #948256;
  color: #fff;
}
.btn-primary:disabled {
  background-color: #948256;
  color: #fff;
  border: none;
  outline: none;
}

.btn-secondary {
  background-color: transparent;
  border-color: #948256;
  color: #948256;
}
.btn-secondary:disabled {
  background-color: transparent;
  border-color: #948256;
  color: #948256;
  outline: none;
}

.btn-primary:first-child:active,
.btn-primary:active,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: #fff;
  background-color: #a89567;
  border-color: #a89567;
}

.btn-primary:hover {
  background-color: #948256;
  color: #fff;
  border-color: #948256;
  box-shadow: 0px 4px 15px 0 rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover {
  background-color: transparent;
  border-color: #948256;
  color: #948256;
  box-shadow: 0px 4px 15px 0 rgba(0, 0, 0, 0.2);
}

.btn-danger {
  background-color: #ec5b5b;
  border-color: #ec5b5b;
}
.btn-danger:hover {
  background-color: #ca3a3a;
}

.btn-success {
  background-color: #157347;
  border-color: #157347;
}
.btn-success:hover {
  background-color: #157347;
}

.btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 2px solid #948256;
  color: #948256;
  text-decoration: none;
  height: 44px;
  width: 44px;
  border-radius: 12px;
}

.btn-primary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #948256;
  border: 2px solid #948256;
  color: #948256;
  text-decoration: none;
  height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 12px;
}

.switches-container {
  width: 100%;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: #efeadf;
  line-height: 45px;
  border-radius: 12px;
}

.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

.switches-container label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: #948256;
}

.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 4px;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.switch {
  border-radius: 10px;
  background: #948256;
  height: 100%;
}

.switch div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: #fff;
  font-weight: 600;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
}

.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
  transform: translateX(0%);
}

.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
  transform: translateX(100%);
}

.switches-container
  input:nth-of-type(1):checked
  ~ .switch-wrapper
  .switch
  div:nth-of-type(1) {
  opacity: 1;
}

.switches-container
  input:nth-of-type(2):checked
  ~ .switch-wrapper
  .switch
  div:nth-of-type(2) {
  opacity: 1;
}

.avatar-upload {
  position: relative;
  max-width: 150px;
  margin: 20px auto;
}
.avatar-upload .avatar-edit {
  position: absolute;
  right: 8px;
  z-index: 1;
  bottom: 8px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: "FontAwesome";
  color: #757575;
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  font-size: 18px;
}
.avatar-upload .avatar-preview {
  width: 125px;
  height: 125px;
  position: relative;
  border-radius: 100%;
  border: 4px solid #ccc;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

select::-ms-expand {
  display: none;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  margin-bottom: 4px;
  text-transform: capitalize;
}
.form-group label i {
  color: #ca3a3a;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group select {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border: solid 1px #d2d5da;
  background-color: #fff;
  font-size: 14px;
  color: #212121;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-group input[type="text"]:disabled,
.form-group input[type="email"]:disabled,
.form-group input[type="password"]:disabled,
.form-group input[type="date"]:disabled,
.form-group input[type="number"]:disabled,
.form-group select:disabled {
  background: #eee;
}
.form-group select {
  background: #fff url(../images/icon/dropdown.svg) no-repeat center right 15px;
  background-size: auto 20px;
  padding-right: 25px;
}
.form-group textarea {
  resize: none;
  display: block;
  width: 100%;
  height: 90px;
  line-height: 24px;
  padding: 0 10px;
  border: solid 1px #d2d5da;
  background-color: #fff;
  font-size: 14px;
  color: #212121;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-group input,
.form-group textarea,
.form-group select,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  box-shadow: none !important;
  border: solid 1px #d2d5da !important;
}

.label-group {
  margin-bottom: 16px;
}
.label-group label {
  color: #555;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.label-group p {
  font-size: 16px;
  font-weight: 500;
  color: #212121;
}

.multiselect-plugin {
  margin-top: 25px;
}
.multiselect-plugin .dd-options {
  bottom: 50px;
  border-radius: 24px;
  background-color: #fff;
  border: none;
  padding: 0px;
}
.multiselect-plugin .dd-options li a {
  padding: 10px;
  border: none;
  border-radius: 50px;
  margin: 0 0;
}
.multiselect-plugin .dd-options li a .dd-option-image {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  margin: 0 15px 0 0;
}
.multiselect-plugin .dd-options li a .dd-option-text {
  font-size: 14px;
  font-weight: 500;
  color: #212121;
}
.multiselect-plugin .dd-options li a .dd-option-description {
  font-size: 13px;
  color: #555;
}
.multiselect-plugin .dd-options li a:hover {
  background-color: #efeadf;
}
.multiselect-plugin .dd-select {
  background-color: #fff !important;
  border-radius: 12px;
  border: solid 1px #d8d8d8;
  width: 360px !important;
  height: 44px;
}
.multiselect-plugin .dd-select .dd-selected {
  font-size: 14px;
  font-weight: 400;
  color: #a3a3a3;
}
.multiselect-plugin .dd-select .dd-selected .dd-selected-image {
  height: 26px;
  border-radius: 50px;
}
.multiselect-plugin .dd-select .dd-selected .dd-selected-text {
  font-size: 14px;
  font-weight: 500;
  color: #212121;
  margin-top: 5px;
}
.multiselect-plugin .dd-select .dd-selected .dd-selected-description-truncated {
  display: none;
}

.btn-view {
  background-color: #888;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-view img {
  height: 16px;
}
.btn-view:hover {
  background-color: #157347;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
}

.btn-edit {
  background-color: #888;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-edit img {
  height: 16px;
}
.btn-edit:hover {
  background-color: #0d4f7e;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
}

.btn-delete {
  background-color: #888;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-delete img {
  height: 16px;
}
.btn-delete:hover {
  background-color: #d03535;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
}

.btn-small {
  padding: 0 10px;
  height: 35px;
  border-radius: 8px;
}

.btn-tooltip {
  position: relative;
}

.btn-tooltip:after,
.btn-tooltip:before {
  opacity: 0;
  pointer-events: none;
  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 50;
  transform: translate(-50%, 10px);
  transform-origin: top;
  transition: all 0.18s ease-out 0.18s;
}

.btn-tooltip:after {
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 3px #ddd;
  content: attr(data-tooltip);
  padding: 10px 15px;
  white-space: nowrap;
  margin-bottom: 11px;
}

.btn-tooltip:before {
  width: 0;
  height: 0;
  content: "";
  margin-bottom: 6px;
}

.btn-icon-border.active.btn-tooltip:hover:before,
.btn-icon-border.active.btn-tooltip:hover:after {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

[data-tooltip-pos="down"]:before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #2c2c2c;
  margin-top: 6px;
}

[data-tooltip-pos="down"]:before,
[data-tooltip-pos="down"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -10px);
}

[data-tooltip-pos="down"]:after {
  margin-top: 11px;
}

[data-tooltip-pos="down"]:hover:before,
[data-tooltip-pos="down"]:hover:after {
  transform: translate(-50%, 0);
}

.btn-video {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #eb2055; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

.btn-video:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 55px;
  height: 55px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-border 1100ms ease-out infinite;
}

.btn-video:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  transition: all 200ms;
}

.btn-video span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 19px solid #002a48;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  top: 10px;
  left: 5px;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.btn-toggle {
  position: relative;
}
.btn-toggle input.switch-toggle {
  position: absolute;
}
.btn-toggle input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.btn-toggle label {
  cursor: pointer;
  text-indent: -9999px;
  width: 48px;
  height: 24px;
  background: #aaa;
  display: block;
  border-radius: 100px;
  position: relative;
}
.btn-toggle label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}
.btn-toggle input:checked + label {
  background: #948256;
}
.btn-toggle input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}
.btn-toggle label:active:after {
  width: 20px;
}

.label-to {
  position: relative;
  padding-left: 50px;
  margin: 0;
}
.label-to > label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  color: #555;
  z-index: 1;
  height: 55px;
  border: none;
  border-bottom: 1px solid #e3e3e3;
  text-align: left;
  width: 50px;
  padding-top: 0px;
  display: flex;
  align-items: center;
}
.label-to .stude-details {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e3e3e3;
  text-align: left;
  padding: 0;
  height: 55px;
}
.label-to .stude-details .img {
  height: 33px;
  width: 32px;
  min-width: 32px;
  border-radius: 50px;
  overflow: hidden;
}
.label-to .stude-details .img img {
  height: 100%;
}
.label-to .stude-details .desc h6 {
  color: #212121;
}

.notification-bell {
  width: 56px;
  height: 56px;
  bottom: 0;
  position: fixed;
  margin: 1em;
  right: 80px;
  z-index: 50;
}
.notification-bell svg.bell-con {
  fill: #fff;
  z-index: 9;
  position: relative;
  border-radius: 50px;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  background-color: #ff2129;
  padding: 15px;
}
.notification-bell.alarm-notify svg.bell-con {
  animation-name: shake;
  animation: shake 6s 0.5s ease-in-out infinite;
}
.notification-bell .notification-count {
  display: flex;
  background: linear-gradient(to right, #fff 0%, #fff 100%);
  color: #ff2129;
  font-weight: 700;
  width: 20px;
  justify-content: center;
  align-items: center;
  height: 20px;
  border-radius: 50px;
  position: absolute;
  top: 0;
  right: 2px;
  z-index: 9;
  border: 2px solid #fff;
}
.notification-bell.alarm-notify.notification-bell:before {
  content: "";
  background: #ff3a41;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  transform: scale(1);
  animation-name: transformScale;
  animation-duration: 1.5s;
  animation-delay: 0;
  animation-iteration-count: infinite;
}
.notification-bell.alarm-notify.notification-bell:after {
  content: "";
  background: #ff3a41;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  transform: scale(1);
  animation-name: transformScale;
  animation-duration: 1.5s;
  animation-delay: 0.75s;
  animation-iteration-count: infinite;
}
@keyframes transformScale {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.5);
    opacity: 0.01;
  }
}
@keyframes shake {
  0% {
    transform: rotate(0);
  }
  1% {
    transform: rotate(30deg);
  }
  3% {
    transform: rotate(-28deg);
  }
  5% {
    transform: rotate(34deg);
  }
  7% {
    transform: rotate(-32deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11% {
    transform: rotate(-28deg);
  }
  13% {
    transform: rotate(26deg);
  }
  15% {
    transform: rotate(-24deg);
  }
  17% {
    transform: rotate(22deg);
  }
  19% {
    transform: rotate(-20deg);
  }
  21% {
    transform: rotate(18deg);
  }
  23% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(14deg);
  }
  27% {
    transform: rotate(-12deg);
  }
  29% {
    transform: rotate(10deg);
  }
  31% {
    transform: rotate(-8deg);
  }
  33% {
    transform: rotate(6deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  37% {
    transform: rotate(2deg);
  }
  39% {
    transform: rotate(-1deg);
  }
  41% {
    transform: rotate(1deg);
  }
  43% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Checkbox */
.bch-checkbox,
.bch-radio {
  position: relative;
  display: block;
}

.bch-checkbox input,
.bch-radio input {
  position: absolute;
  top: 0;
  z-index: 9;
  width: 18px;
  height: 18px;
  opacity: 0.01;
  cursor: pointer;
}

.bch-checkbox > label,
.bch-radio > label {
  min-height: 18px;
  padding-right: 16px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  transition: all 400ms;
}

.bch-checkbox > label,
.bch-radio > label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.bch-checkbox > label span {
  margin-left: 30px;
}

.bch-checkbox input[type="checkbox"]:disabled + label {
  border: 2px solid #999;
}

.bch-checkbox input[type="checkbox"]:checked + label::after,
.bch-checkbox input[type="checkbox"] + label::before {
  box-sizing: border-box;
  position: absolute;
  display: table;
  content: "";
}

.bch-checkbox input[type="checkbox"] + label::before {
  content: "";
  width: 18px;
  height: 18px;
  white-space: nowrap;
  text-indent: 10px;
  cursor: pointer;
  border: 1px solid #aaa;
  border-radius: 2px;
}

.bch-checkbox input[type="checkbox"]:checked + label::before {
  background-color: #405189;
  border-color: #405189;
}

.bch-checkbox input[type="checkbox"]:checked + label::after {
  box-sizing: border-box;
  transform: rotate(45deg);
  left: 7px;
  top: 50%;
  width: 5px;
  height: 9.5px;
  border-width: 2px;
  border-style: solid;
  border-top: 0;
  border-left: 0;
  border-color: #fff;
  margin-top: -6px;
}

/* radio */
.bch-radio > label {
  border-radius: 50%;
  border-color: #aaa;
}

.bch-radio > label span {
  margin-left: 25px;
}

.bch-radio input[type="radio"]:disabled + label {
  border: 2px solid #999;
}

.bch-radio input[type="radio"]:checked + label::after,
.bch-radio input[type="radio"] + label::before {
  box-sizing: border-box;
  position: absolute;
  display: table;
  content: "";
}

.bch-radio input[type="radio"] + label::before {
  content: "";
  width: 18px;
  height: 18px;
  white-space: nowrap;
  text-indent: 10px;
  cursor: pointer;
  border: 1px solid #aaa;
  border-radius: 2px;
  border-radius: 50%;
}

.bch-radio input[type="radio"]:checked + label::before {
  background-color: #fff;
  border-color: #405189;
}

.bch-radio input[type="radio"]:checked + label::after {
  left: 4px;
  width: 10px;
  height: 10px;
  background: #405189;
  border-radius: 50px;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  text-align: center;
  width: 200px;
  margin: 0;
}
.star-rating input {
  display: none;
}
.star-rating input:checked ~ label {
  color: #f90;
}
.star-rating label {
  color: #ccc;
  cursor: pointer;
  font-size: 35px;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #fc0;
}

.showpassword {
  position: relative;
}

.showpassword > div {
  position: absolute;
  top: 25px;
  right: 0;
  width: 50px;
  height: 47px;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showpassword > div input[type="checkbox"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 47px;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
}

.showpassword > div label {
  color: #999;
}

.showpassword > div label .fa-eye::before {
  content: "\f070";
}

.showpassword > div input[type="checkbox"]:checked + label .fa-eye::before {
  content: "\f06e";
}

.react-stars span {
  /* color: red !important; */
}

.rate-progress {
  position: relative;
  width: calc(100% - 200px);
  padding-right: 20px;
}
.rate-progress .rate-progress-bar {
  height: 10px;
  background: #eee;
  margin-bottom: 20px;
  border-radius: 50px;
  overflow: hidden;
  margin-left: 20px;
}
.rate-progress .rate-progress-bar .progress-bar {
  background: #b4a581;
  height: 10px;
}
.rate-progress .rate-value {
  position: absolute;
  top: -5px;
  left: 0;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rate-progress .rate-value span:first-child {
  margin-bottom: 8px;
}
.rate-progress .rate-value span:nth-child(2) {
  margin-bottom: 8px;
}
.rate-progress .rate-value span:nth-child(3) {
  margin-bottom: 8px;
}
.rate-progress .rate-value span:nth-child(4) {
  margin-bottom: 7px;
}

.rate-dtls {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}
.rate-dtls h2 {
  font-size: 35px;
  font-weight: 300;
  color: #212121;
}
.rate-dtls p {
  font-size: 14px;
  font-weight: 400;
  color: #555;
}

.btn-training-attend:disabled {
  filter: grayscale(10);
  cursor: not-allowed;
  opacity: 0.5;
}

nav .logo {
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(48, 119, 167, 0.3);
  padding-bottom: 16px;
}
nav .logo img {
  width: 200px;
  margin: auto;
}
nav .logo span {
  margin-top: 4px;
  display: block;
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  display: none;
}
nav .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
nav .profile .profile-img {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
nav .profile .profile-img img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
nav .profile .timecapture {
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background-color: #fd7e50;
  border-radius: 50px;
  margin-top: -8px;
}
nav .profile .timecapture .clock {
  margin-top: 3px;
}
nav .profile .timecapture .clock svg {
  margin-top: -5px;
}
nav .profile h6 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-top: 15px;
  margin-bottom: 0px;
}
nav .profile p {
  font-size: 14px;
  color: #99aab6;
}
nav .burger-menu {
  display: none;
  font-size: 30px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}
nav .accordion-menu {
  margin-bottom: 15px;
  color: #fff;
}
nav .accordion-menu li {
  margin-bottom: 4px;
}
nav .accordion-menu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  height: 44px;
  border-radius: 12px;
  color: #b2bfc8;
  font-size: 15px;
  padding: 0 20px;
  cursor: pointer;
}
nav .accordion-menu li a img {
  filter: brightness(50);
  height: 25px;
}
nav .accordion-menu li a.active {
  background-color: #948256;
  font-weight: 500;
  color: #fff;
}
nav .accordion-menu li a.active img {
  filter: brightness(50);
}
nav .accordion-menu li .submenu {
  display: none;
}
nav .accordion-menu li .submenu a {
  display: block;
  padding: 10px 8px 10px 50px;
  color: white;
  text-decoration: none;
}
nav .accordion-menu li .submenu a:hover {
  background-color: #555;
}
nav .notes {
  display: none;
  margin-top: 40px;
  background-color: #2190df;
  border-radius: 12px;
  padding: 20px;
  color: #fff;
  position: relative;
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.13);
  padding-top: 40px;
}
nav .notes .icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50px;
  background-color: #fff;
  border: 4px solid #002a48;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
nav .notes h6 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
nav .notes p {
  font-size: 12px;
}
nav .poweredby {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #144668;
  margin-bottom: 15px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
}
nav .poweredby img {
  height: 22px;
}
nav .poweredby a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #c5d6e2;
  font-size: 14px;
  cursor: pointer;
  padding: 0px 10px;
}
nav .poweredby .version {
  text-align: center;
  font-size: 13px;
  color: rgb(170, 184, 194);
  letter-spacing: 0.3px;
  font-weight: 400;
  display: inline-block;
  background: #563d7c;
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  width: 100%;
}
nav .poweredby .copyrights {
  text-align: center;
  font-size: 12px;
  color: rgb(170, 184, 194);
  margin: 4px 0px;
  letter-spacing: 0.3px;
  font-weight: 400;
}
nav .signout {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #144668;
  margin-bottom: 15px;
  margin-top: auto;
}
nav .signout a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  border-radius: 12px;
  color: #b2bfc8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 15px;
}
nav .signout a:hover {
  color: #fff;
}
nav .signout a:hover img {
  filter: brightness(50);
}

.notificationwrap .notfy-card {
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
}
.notificationwrap .notfy-card .category {
  font-size: 14px;
  display: inline;
  color: #555;
}
.notificationwrap .notfy-card .date {
  font-size: 13px;
  display: block;
  color: #808080;
  letter-spacing: 1px;
  display: flex;
  gap: 6px;
}
.notificationwrap .notfy-card h6 {
  font-size: 18px;
  font-weight: 400;
  color: #212121;
  margin-bottom: 3px;
}
.notificationwrap .notfy-card p {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: #4d4d4d;
}
.notificationwrap .notfy-card img {
  max-height: 150px;
  max-width: 50%;
  margin-top: 10px;
}
.notificationwrap .notfy-card.notify-blue {
  background-color: #dfe7fc;
}
.notificationwrap .notfy-card.notify-green {
  background-color: #d9f2ec;
}
.notificationwrap .notfy-card.notify-orange {
  background-color: #ffe8df;
}
.notificationwrap .notfy-card.unread .category,
.notificationwrap .notfy-card.unread .date,
.notificationwrap .notfy-card.unread h6,
.notificationwrap .notfy-card.unread p {
  font-weight: 600;
  color: #212121;
}
.notificationwrap .notfy-card.unread .date {
  color: #5a5a5a;
}
.notificationwrap .notfy-card.unread .category::before {
  content: "New";
  padding: 2px 6px;
  color: #fff;
  font-size: 13px;
  display: inline-block;
  background-color: #f85348;
  border-radius: 4px;
  margin-right: 4px;
}

.pagination {
  width: 100%;
}
.pagination ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination ul li.previous,
.pagination ul li.next {
  display: none;
}
.pagination ul li a {
  border: solid 1px #acacac;
  border-radius: 0.2rem;
  color: #7d7d7d;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  padding: 0.5rem 0.9rem;
}
.pagination ul li.active a {
  color: #fdfdfd;
  background-color: #1d1f20;
  border: solid 1px #1d1f20;
}

.widget-card {
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.widget-card .icon {
  position: relative;
  width: 35px;
  max-width: 35px;
  min-width: 35px;
}
.widget-card .icon > img {
  width: 100%;
}
.widget-card .img {
  position: relative;
  border-radius: 16px 16px;
  overflow: hidden;
}
.widget-card .img > img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.widget-card .img .btn-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: -55px;
  right: 15px;
  transition: all 0.2s ease-in-out;
}
.widget-card .img .btn-flex a {
  filter: grayscale(0.7);
}
.widget-card .desc {
  padding: 10px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.widget-card .desc h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #212121;
  padding-right: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-card .desc p {
  color: #555;
  text-overflow: ellipsis;
  overflow: hidden;
}
.widget-card .desc a {
  position: absolute;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  z-index: 2;
}
.widget-card .img + .desc {
  width: calc(100% - 45px);
}
.widget-card .icon + .desc {
  width: calc(100% - 45px);
}
.widget-card:hover .img .btn-flex {
  bottom: 24px;
}
.widget-card:hover .img .btn-flex a:hover {
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.13);
  filter: grayscale(0);
}
.widget-card:hover .desc a {
  right: 0px;
  opacity: 1;
}

.dash-apps {
  margin-top: 1rem;
  display: flex;
}
.dash-apps .appswrap {
  width: 100%;
  margin-right: 28px;
}

.appcard {
  margin-bottom: 20px;
}
.appcard a {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 16px;
  background-color: #fff;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.appcard a img {
  height: 35px;
}
.appcard a p {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  color: #555;
}
.appcard a h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: #212121;
  word-break: break-word;
}
.appcard a span {
  margin-left: auto;
  transition: all 0.2s ease-in-out;
}
.appcard a span img {
  height: 26px;
}
.appcard a:hover {
  background-color: #948256;
}
.appcard a:hover h3,
.appcard a:hover p {
  color: #fff;
}
.appcard a:hover img {
  filter: brightness(10);
}
.appcard a:hover span {
  right: 20px;
  opacity: 1;
}

.btncard {
  margin-bottom: 10px;
}
.btncard a {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 16px;
  background-color: #fff;
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 15px;
}
.btncard a img {
  height: 24px;
  margin-bottom: 0px;
}
.btncard a div {
  width: calc(100% - 45px);
}
.btncard a p {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: #555;
}
.btncard a h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 20px);
}
.btncard a span {
  transition: all 0.2s ease-in-out;
  margin-left: auto;
  width: 24px;
}
.btncard a span img {
  height: 20px;
}
.btncard a:hover {
  background-color: #948256;
}
.btncard a:hover h3,
.btncard a:hover p {
  color: #fff;
}
.btncard a:hover span {
  right: 20px;
  opacity: 1;
}
.btncard a:hover span img {
  filter: brightness(10);
}

.planwrap {
  margin: 0px;
}
.planwrap h2 {
  margin-bottom: 20px;
}
.planwrap .card {
  display: flex;
  flex-direction: row;
  border: none;
  gap: 20px;
}
.planwrap .card .img {
  width: 172px;
  min-width: 172px;
  height: 125px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.planwrap .card .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.planwrap .card .desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.planwrap .card .desc h2 {
  font-size: 16px;
}
.planwrap .card .desc .desc-progress .progressdesc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.planwrap .card .desc .desc-progress .progressdesc p {
  font-size: 14px;
  color: #212121;
  font-weight: 600;
}
.planwrap .card .desc .progress {
  height: 8px;
  width: 100%;
  background-color: #eee;
  border-radius: 30px;
  position: relative;
}
.planwrap .card .desc .progress span {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #948256;
  height: 8px;
  border-radius: 30px;
}
.planwrap .card h2 {
  margin-bottom: 10px;
}
.planwrap .card p {
  color: #555;
  font-size: 15px;
}

.chatbot {
  position: relative;
  background-color: #fff;
  width: 315px;
  border-radius: 24px;
  padding: 0px;
}
.chatbot-header {
    background: #563d7c;
    border-radius: 15px 15px 0 0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chatbot-header .img {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
}
.chatbot-header .img img {
   height: 40px;
   filter: brightness(100);
}
.chatbot .intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  gap: 10px;
  text-align: center;
  height: 350px;
  padding-top: 35px;
}
.chatbot .intro p {
  color: #555;
  line-height: 150%;
}
.chatbot .intro img {
  margin-bottom: 20px;
  animation: up-down 7.5s infinite ease-in-out;
}
.chatbot.chat_fullscreen .intro {
  height: calc(100vh - 270px);
}
.chatbot .chatfield {
  padding: 10px;
  z-index: 9;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #eee;
}
.chatbot .chatfield textarea {
  height: 44px;
  line-height: 44px;
  white-space: nowrap;
  background-color: #f4f4f4;
  border-radius: 12px;
  width: calc(100% - 52px);
  border: none;
  color: #a3a3a3;
  padding: 0 5px 0 10px;
}
.chatbot .chatfield input {
  background-color: #efefef;
  border-color: #efefef;
}
.chatbot .chatfield button {
  height: 44px;
  width: 44px;
  border-radius: 12px;
  font-size: 0;
  border: none;
  background: #948256 url(../images/send.svg) no-repeat center center;
  cursor: pointer;
}

@keyframes up-down {
  0% {
    transform: translate(0);
  }
  12.5% {
    transform: translate(0, 3%);
  }
  25% {
    transform: translate(0);
  }
  37.5% {
    transform: translate(0, 3%);
  }
  50% {
    transform: translate(0);
  }
  62.5% {
    transform: translate(0, 3%);
  }
  75% {
    transform: translate(0);
  }
  87.5% {
    transform: translate(0, 3%);
  }
  100% {
    transform: translate(0);
  }
}
.typing-demo {
  width: 14ch;
  animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
}

@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
.stud-dash-apps .col-lg-2 {
  flex: 0 0 auto;
  width: 20%;
}
.stud-dash-apps .appcard {
  margin: 0;
}

.training-card {
  background-color: #fff;
  border-radius: 24px;
  padding: 20px;
  height: 100%;
}
.training-card .trainingdtls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.training-card .trainingdtls .img {
  width: 30%;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
}
.training-card .trainingdtls .img img {
  -o-object-fit: cover;
  object-fit: cover;
  min-height: 100px;
}
.training-card .trainingdtls .desc {
  width: 70%;
}
.training-card .trainingdtls .desc h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}
.training-card .trainingdtls .desc p {
  font-size: 15px;
  color: #555;
}
.training-card .btn-flex .btn-icon-border {
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: default;
  background-color: #fff;
  color: #ccc;
}
.training-card .btn-flex .btn {
  font-size: 14px;
  width: 85px;
}
.training-card .tran-mandaroty.active {
  background-color: #d91c48;
  color: #fff;
}
.training-card .tran-inperson.active {
  background-color: #d68060;
  color: #fff;
}
.training-card .tran-online.active {
  background-color: #47888e;
  color: #fff;
}
.training-card .border-top {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #ccc;
}
.training-card > p {
  max-height: 40px;
  overflow: hidden;
}

.jobs-card {
  height: 100%;
}
.jobs-card a {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in-out 0s;
}
.jobs-card a .top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.jobs-card a .top .img {
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  padding: 5px;
  max-width: 60px;
  min-width: 60px;
}
.jobs-card a .top .img img {
  max-width: 60px;
  width: 100%;
}
.jobs-card a .top span {
  transition: all 0.2s ease-in-out;
  margin-left: auto;
  width: 24px;
}
.jobs-card a .top span img {
  height: 20px;
}
.jobs-card a .top .desc h2 {
  font-size: 16px;
}
.jobs-card a .top .desc ul {
  margin-top: 6px;
}
.jobs-card a .top .desc ul li {
  font-size: 15px;
  font-weight: 500;
  color: #666;
  position: relative;
  margin-right: 20px;
}
.jobs-card a .top .desc ul li::before {
  content: ".";
  position: absolute;
  right: -10px;
  top: -2px;
}
.jobs-card a .top .desc ul li:last-child::before {
  display: none;
}
.jobs-card a > .desc {
  border-top: 1px solid #eaeaea;
  padding-top: 12px;
  margin-top: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-card a > .btm {
  margin-top: auto;
}
.jobs-card a:hover span {
  opacity: 1;
}
.jobs-card a:hover span img {
  filter: grayscale(10);
}

.snapshot-wrap {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; 
  padding: 16px;
}

@media (max-width: 1199px) {
  .snapshot-wrap {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    justify-content: center;
  }
  .snapshot-wrap .col-lg-3 {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .snapshot-wrap {
    grid-template-columns: 1fr;
  }
}

.snapshot-wrap .icon {
 min-height: 48px;
 min-width: 48px;
}

.snapshot-wrap .col-lg-3 {
  width: 100% !important;
}

.snapshot-wrap .snapshot-card {
  background-color: #fff;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.snapshot-wrap .snapshot-card:nth-child(1) .icon {
  background-color: #904f9d;
}
.snapshot-wrap .snapshot-card:nth-child(2) .icon {
  background-color: #47888e;
}
.snapshot-wrap .snapshot-card:nth-child(3) .icon {
  background-color: #d68060;
}
.snapshot-wrap .snapshot-card:nth-child(4) .icon {
  background-color: #d91c48;
}
.snapshot-wrap .snapshot-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.snapshot-wrap .snapshot-card .icon img {
  filter: brightness(10);
}
.snapshot-wrap .snapshot-card h5 {
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 4px;
}
.snapshot-wrap .snapshot-card p {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
  color: #555;
}

.training-help {
  position: relative;
}
.training-help .img {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10px;
}
.training-help .img img {
  width: 100%;
  border-radius: 10px;
  height: 170px;
  -o-object-fit: cover;
  object-fit: cover;
}
.training-help .btn-video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.reviews {
  display: flex;
  align-items: flex-start;
  margin-top: 30px;
}
.reviews .review-card:last-child {
  border-left: 1px solid #ccc;
  margin-left: 40px;
  padding-left: 40px;
}
.reviews .review-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.reviews .review-card h6 {
  font-size: 35px;
  font-weight: 700;
  color: #212121;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews .review-card h6 img {
  display: inline;
  height: 25px;
  margin-top: 10px;
}
.reviews .review-card p {
  font-size: 13px;
  font-weight: 400;
  color: #555;
}

.course-wrap h3 {
  font-size: 24px;
  font-weight: 500;
}
.course-wrap .img {
  border-radius: 24px;
  overflow: hidden;
}
.course-wrap .dtls p {
  margin-bottom: 16px;
}
.course-wrap p {
  font-size: 16px;
  color: #555;
}

.event-list .event p {
  margin-bottom: 5px;
  font-size: 16px;
  color: #555;
}

.grid-5 {
  width: 100%;
  display: flex;
  gap: 16px;
}
.grid-5 > div {
  width: 100%;
}
.grid-5 > div a {
  height: 100px;
}

.grades-wrap .tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.grades-wrap .tabs button {
  padding: 0 16px;
  height: 35px;
  line-height: 36px;
  border-radius: 50px;
  border: 1px solid #cfcfcf;
  background-color: #f4f4f4;
}
.grades-wrap .tabs button:hover {
  border-color: #948256;
  color: #948256;
}
.grades-wrap .tabs button.active {
  border-color: #948256;
  background-color: #948256;
  color: #fff;
}
.grades-wrap .tabs p {
  margin-left: auto;
  background-color: rgba(0, 42, 72, 0.7);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
}
.grades-wrap .tabs p span {
  font-weight: 300;
}

.table-card {
  width: 100%;
}
.table-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
}
.table-card table thead tr {
  border: 6px solid #f4f4f4;
}
.table-card table thead tr th {
  background-color: #fff;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #212121;
}
.table-card table thead tr th:first-child {
  border-radius: 10px 0 0 10px;
}
.table-card table thead tr th:last-child {
  border-radius: 0 10px 10px 0;
}
.table-card table tbody tr {
  border: 6px solid #f4f4f4;
}
.table-card table tbody tr td {
  background-color: #fff;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: 400;
  color: #555;
}
.table-card table tbody tr td:first-child {
  border-radius: 10px 0 0 10px;
  font-weight: 500;
}
.table-card table tbody tr td:last-child {
  border-radius: 0 10px 10px 0;
}
.table-card table tbody tr td:last-child span {
  white-space: nowrap;
}
.table-card table .grade-high span {
  color: #fff;
  background-color: #fa971d;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
}
.table-card table .grade-mid span {
  color: #fff;
  background-color: #fa7361;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
}
.table-card table .grade-low span {
  color: #fff;
  background-color: #b55252;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
}
.table-card table .grade-not span {
  color: #fff;
  background-color: #5c7e7e;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
}

@media only screen and (max-width: 1400px) {
  .training-card .border-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
  }
  .admin-main .training-card .border-top {
    flex-direction: row;
  }
  .training-card .btn-flex .btn-icon-border {
    height: 28px;
    width: 28px;
  }
}
.metrics {
  display: flex;
  align-items: center;
}

.card-chart {
  width: 100%;
  position: relative;
}

#canvas {
  position: relative;
  z-index: 2;
}

#tooltip-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.jobwrap .search input {
  background: #fff;
  padding: 0 45px 0 15px;
}

.student_metrics .top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.student_metrics .top .img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3ead2;
}
.student_metrics .top .img img {
  width: 28px;
  height: 28px;
}
.student_metrics .top .desc h2 {
  line-height: 18px;
}
.student_metrics .top .desc span {
  display: inline-block;
  font-size: 13px;
  color: #555;
}
.student_metrics .dtls {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.student_metrics .dtls .desc {
  width: 100%;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.student_metrics .dtls .desc li {
  margin-bottom: 10px;
  text-align: center;
}
.student_metrics .dtls .desc li label {
  color: #666;
  font-weight: 500;
}
.student_metrics .dtls .desc li h6 {
  color: #222;
  font-size: 16px;
  font-weight: 600;
}
.student_metrics .dtls .gauge-desc {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}
.student_metrics .dtls .gauge-desc h6 {
  font-weight: 600;
  color: #666;
}
.student_metrics .dtls .chartWrap-new {
  color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
}
.student_metrics .dtls .chartWrap-new .p-chart {
  max-height: 200px;
  padding: 0;
  margin: 0;
}
.student_metrics .dtls .grade-point-title {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
}
.student_metrics .gardedistribution .legend {
  width: 100%;
  margin: auto;
  padding-top: 0px;
}
.student_metrics .gardedistribution .legend {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 10px;
}
.student_metrics .gardedistribution .legend .legend-item {
  margin-bottom: 10px;
  font-size: 14px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.student_metrics .gardedistribution .legend .legend-color {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.student_metrics .stud-acc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 5px 0;
}
.student_metrics .stud-acc-legend div {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}
.student_metrics .stud-acc-legend div:first-child span {
  display: block;
  background-color: #0161fa;
  width: 30px;
  height: 10px;
}
.student_metrics .stud-acc-legend div:last-child span {
  display: block;
  background-color: #0bc1ff;
  width: 30px;
  height: 10px;
}
.student_metrics .stud-acc-chart {
  margin: 10px 0;
}
.student_metrics .stud-acc-chart .p-chart {
  max-height: 180px;
}
.student_metrics .chartWrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.student_metrics .chartWrap .p-chart {
  max-height: 250px;
  padding: 0;
  margin: 0;
}

.stud-course-chart .p-chart {
  max-width: 99%;
}

.grades-wrap #chart-container {
  position: relative;
  display: flex;
  justify-content: center;
}
.grades-wrap #chart-container .p-chart {
  max-height: 250px;
  padding: 0;
  margin: 0;
}

.gardedistribution {
  width: 100%;
}
.gardedistribution #chart-container {
  width: 90%;
  max-width: 250px;
  margin: auto;
  padding-top: 15px;
}
.gardedistribution .legend {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-left: 20px;
}
.gardedistribution .legend .legend-item {
  margin-bottom: 10px;
  width: 32%;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.gardedistribution .legend .legend-color {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.profilecard {
  position: relative;
}
.profilecard .profile-desc {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.profilecard .profile-desc .profile {
  position: relative;
  z-index: 15;
}
.profilecard .profile-desc .profile img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-right: 16px;
  -o-object-fit: cover;
  object-fit: cover;
}
.profilecard .profile-desc .profile h2 {
  font-size: 20px;
  font-weight: 600;
}
.profilecard .profile-desc .profile p {
  font-size: 16px;
  color: #555;
  margin: 0;
}
.profilecard .privacy-profile {
  border-top: 1px solid #e0e0e0;
  margin-top: 24px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.profilecard .privacy-profile img {
  height: 45px;
}
.profilecard .privacy-profile p {
  color: #555;
}
.profilecard .privacy-profile p strong {
  color: #212121;
  font-weight: 600;
}
.profilecard .privacy-profile .privacybtn {
  margin-left: auto;
}

.sortable-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.sortable-card li {
  margin: 0;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 12px;
  width: 100%;
  color: #212121;
  position: relative;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
}
.sortable-card li .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sortable-card li .top .handle {
  cursor: move;
  color: #aaa;
  font-size: 16px;
  position: relative;
  z-index: 6;
  filter: grayscale(1);
}
.sortable-card li .top .handle img {
  height: 24px;
}
.sortable-card li .top .counter {
  font-weight: 400;
  font-size: 25px;
  color: #e6decd;
  width: 35px;
  white-space: nowrap;
}
.sortable-card li.ui-sortable-helper .handle {
  filter: grayscale(0);
}
.sortable-card li .btm {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.sortable-card li .btm .img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  overflow: hidden;
}
.sortable-card li .btm .img img {
  width: 35px;
  height: 35px;
  -o-object-fit: cover;
  object-fit: cover;
}
.sortable-card li .btm h2 {
  width: calc(100% - 80px);
  font-size: 16px;
}
.sortable-card li .btm .form-checkbox label {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -12px;
  z-index: 2;
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 24px;
}
.sortable-card li .btm .form-checkbox label::before {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.sortable-card li .btm .form-checkbox label::after {
  position: absolute;
  top: unset;
  left: unset;
  right: 8px !important;
  bottom: 6px !important;
}
.sortable-card li .btm .form-checkbox input:checked + label {
  background-color: rgba(255, 255, 255, 0.01);
}
.sortable-card li .btm h2,
.sortable-card li .btm h3 {
  color: #212121;
}

.snapshot-wrap .col-lg-3:nth-child(1) .icon {
  background-color: #904f9d;
}
.snapshot-wrap .col-lg-3:nth-child(2) .icon {
  background-color: #47888e;
}
.snapshot-wrap .col-lg-3:nth-child(3) .icon {
  background-color: #d68060;
}
.snapshot-wrap .col-lg-3:nth-child(4) .icon {
  background-color: #d91c48;
}
.snapshot-wrap .stud-snapshot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.snapshot-wrap .stud-snapshot .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-bottom: -48px;
}
.snapshot-wrap .stud-snapshot .icon img {
  filter: brightness(10);
}
.snapshot-wrap .stud-snapshot h5 {
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
}
.snapshot-wrap .stud-snapshot p {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
  color: #555;
}

.acc-resource .card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 15px;
  cursor: pointer;
  height: 100%;
}
.acc-resource .card .img {
  height: 32px;
  width: 32px;
  min-width: 32px;
}
.acc-resource .card .img img {
  height: 32px;
}
.acc-resource .card h2 {
  font-size: 16px;
  font-weight: 600;
}
.acc-resource .card p {
  font-size: 15px;
  color: #555;
}
.acc-resource .card:hover {
  background-color: #948256;
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.13);
}
.acc-resource .card:hover .img {
  filter: brightness(10);
}
.acc-resource .card:hover h2,
.acc-resource .card:hover p {
  color: #fff;
}

.card-wrap .transactions-scroll {
  overflow: auto;
  max-height: 500px;
}
.card-wrap .transactions-scroll .adaptheight {
  max-height: 500px;
  overflow: auto;
}
.card-wrap .transactions-scroll h6.text-success {
  color: #149f26 !important;
}
.card-wrap .transactions-scroll h6.text-danger {
  color: #e51313 !important;
}
.card-wrap .transactions-wrap {
  list-style: none;
}
.card-wrap .transactions-wrap > a {
  margin-bottom: 10px;
  display: block;
}
.card-wrap .transactions-wrap li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  gap: 10px;
}
.card-wrap .transactions-wrap li:last-child {
  margin-bottom: 0px;
}
.card-wrap .transactions-wrap li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}
.card-wrap .transactions-wrap li .img {
  position: relative;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-wrap .transactions-wrap li .img.icon img {
  width: 100%;
}
.card-wrap .transactions-wrap li .img.img-orange {
  background-color: #ffe8d7;
  border-radius: 50px;
}
.card-wrap .transactions-wrap li .img.img-thumb {
  background-color: transparent;
  height: 60px;
  width: 80px;
  min-width: 80px;
  border-radius: 14px;
  overflow: hidden;
}
.card-wrap .transactions-wrap li .img.img-thumb img {
  width: 100%;
  height: 60px;
  border-radius: 14px;
  -o-object-fit: cover;
  object-fit: cover;
}
.card-wrap .transactions-wrap li .img .btn-play {
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
  margin-left: -14px;
  width: 25px !important;
  z-index: 9;
  padding: 5px;
}
.card-wrap .transactions-wrap li h3 {
  font-size: 16px;
  font-weight: 600;
  display: inline;
}
.card-wrap .transactions-wrap li p.date {
  font-size: 14px;
  white-space: nowrap;
}
.card-wrap .transactions-wrap li p {
  color: #555;
}
.card-wrap .transactions-wrap li h6 {
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
  padding-right: 15px;
}
.card-wrap .transactions-wrap li:hover {
  cursor: pointer;
}
.card-wrap .transactions-wrap li:hover > div h3 {
  background: none;
}
.card-wrap .transactions-wrap li:hover > div p {
  color: #8e8e8e;
}
.card-wrap .transactions-wrap li h3 {
  background: linear-gradient(0deg, #948256, #948256) no-repeat right bottom/0
    var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 100%;
  padding-bottom: 1px;
  --bg-h: 1px;
}
.card-wrap .transactions-wrap li:where(:hover, :focus-visible) h3 {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

.card-wrap .transactions-wrap.stud-transaction {
  border-radius: 8px;
}
.card-wrap .transactions-wrap.stud-transaction li {
  background-color: #fff;
  margin-bottom: 0;
  padding: 10px;
  border-radius: 0px;
}
.card-wrap .transactions-wrap.stud-transaction li:nth-child(even) {
  background-color: #eee;
}

.financialcard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.financialcard textarea {
  border: none;
  border-bottom: 1px solid #d3d3d3;
  height: 90px;
  border-radius: 0;
  margin: 20px 0;
  resize: none;
}

.academic-profile .title .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3ead2;
}

.grade-points li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}
.grade-points li .img {
  width: 40px;
  height: 40px;
  background-color: #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grade-points li .img svg {
  height: 20px;
}
.grade-points li:nth-child(1) .img {
  background-color: #f1daf6;
}
.grade-points li:nth-child(1) .img svg path {
  stroke: #70367c;
}
.grade-points li:nth-child(2) .img {
  background-color: #c9e7ea;
}
.grade-points li:nth-child(2) .img svg path {
  stroke: #2a5a5f;
}
.grade-points li:nth-child(3) .img {
  background-color: #f3d9cf;
}
.grade-points li:nth-child(3) .img svg path {
  stroke: #bf5832;
}
.grade-points li p {
  font-size: 16px;
}
.grade-points li h6 {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.grade-points li .profit svg path {
  stroke: #60cb0d;
}
.grade-points li .loss svg {
  transform: rotate(180deg);
}
.grade-points li .loss svg path {
  stroke: #eb2828;
}

.emailbot {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.emailbot img {
  margin-bottom: 10px;
}
.emailbot P {
  padding: 0;
  text-align: center;
  font-size: 16px;
}

.fc-event.seminar {
  background-color: #f85348 !important;
  border-color: #f85348 !important;
}

.fc-event.general {
  background-color: #00ba34 !important;
  border-color: #00ba34 !important;
}

.fc-event.conference {
  background-color: #e48832 !important;
  border-color: #e48832 !important;
}

.fc-more-popover {
  max-height: 200px;
  overflow-y: auto;
}

.colour-grid > div:nth-child(1) > div {
  background-color: #d4aadd;
}
.colour-grid > div:nth-child(2) > div {
  background-color: #98c1c6;
}
.colour-grid > div:nth-child(3) > div {
  background-color: #f3d9cf;
}
.colour-grid > div:nth-child(4) > div {
  background-color: #f6caff;
}
.colour-grid > div:nth-child(5) > div {
  background-color: #bffaff;
}
.colour-grid > div:nth-child(6) > div {
  background-color: #ffd4de;
}
.colour-grid > div > div.bgc-white {
  background-color: #fff;
}

main #content .inbox-widget .search {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}
main #content .inbox-widget .search input {
  background: #f4f4f4 url(../images/icon/search.svg) no-repeat left 6px center;
  background-size: 16px;
  height: 40px;
  width: 100%;
  border-radius: 10px;
  padding-left: 25px;
}
main #content .inbox-widget .mail-list {
  margin-bottom: 20px;
  cursor: pointer;
}
main #content .inbox-widget .mail-list .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
}
main #content .inbox-widget .mail-list .title .status {
  display: none;
  background-color: #948256;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50px;
  margin-right: 5px;
}
main #content .inbox-widget .mail-list .title h2 {
  font-size: 15px;
  font-weight: 400;
  color: #212121;
  margin: 0;
}
main #content .inbox-widget .mail-list .title i.attachment img {
  height: 12px;
  margin-left: 5px;
}
main #content .inbox-widget .mail-list .date {
  margin-left: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #8e8e8e;
}
main #content .inbox-widget .mail-list h6 {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
main #content .inbox-widget .mail-list p {
  width: 100%;
  height: 22px;
  overflow: hidden;
}
main #content .inbox-widget .mail-list.unread .status {
  display: block;
}
main #content .inbox-widget .mail-list.unread h2,
main #content .inbox-widget .mail-list.unread h6 {
  font-weight: 500;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.breadcrumb i {
  width: 8px;
  height: 8px;
  display: block;
  background-color: #948256;
  border-radius: 50px;
}

.report-wrap .reportimg {
  height: 120px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 15px;
}
.report-wrap .reportimg img {
  height: 120px;
  width: 100%;
}
.report-wrap .reportimg + .status {
  position: absolute;
  top: 30px;
  right: 30px;
}
.report-wrap .status {
  margin-left: auto;
  margin-bottom: 20px;
}
.report-wrap .status span {
  margin-left: auto;
  background-color: #ccc;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 4px;
}
.report-wrap .status .open {
  background-color: #2971dc;
}
.report-wrap .status .completed {
  background-color: #009f40;
}

.class-faculty {
  background-color: #f2f2f2;
  padding: 15px;
  border-radius: 12px;
  height: 100%;
}
.class-faculty p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.class-faculty h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px !important;
}
.class-faculty img {
  height: 32px;
  margin-bottom: 4px;
}
.class-faculty:hover {
  background-color: #948256;
  cursor: pointer;
}
.class-faculty:hover h3,
.class-faculty:hover p {
  color: #fff;
}
.class-faculty:hover img {
  filter: brightness(10);
}

.imgs {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.imgs .avatar-group {
  display: flex;
  margin-left: 15px;
}
.imgs .avatar-group .avatar {
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  background-color: #fff;
  border: 2px solid #fff;
  margin-left: -15px;
}
.imgs .avatar-group .avatar img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.reviews {
  display: flex;
  align-items: flex-start;
}
.reviews .review-card:last-child {
  border-left: 1px solid #ccc;
  margin-left: 40px;
  padding-left: 40px;
}
.reviews .review-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.reviews .review-card h6 {
  font-size: 24px;
  font-weight: 700;
  color: #212121;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews .review-card h6 img {
  display: inline;
  height: 20px;
  margin-top: 10px;
}
.reviews .review-card p {
  font-size: 13px;
  font-weight: 400;
  color: #555;
  margin-bottom: 0;
}
.reviews .review-card .btn {
  padding: 6px;
  height: 26px;
  font-weight: 500;
  font-size: 14px;
  float: right;
}

.tasks-list > li {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.tasks-list > li .checkbox input {
  width: 16px;
  height: 16px;
  border: 1px solid #555;
}
.tasks-list > li .img {
  width: 32px;
  height: 32px;
  border-radius: 50px;
  overflow: hidden;
  display: none;
}
.tasks-list > li .img img {
  width: 35px;
}
.tasks-list > li .desc {
  font-size: 16px;
  color: #212121;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 80%;
}
.tasks-list > li .actions {
  padding: 0;
  margin: 0 0px 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.tasks-list > li .actions span {
  display: inline-block;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.tasks-list > li .actions span.high {
  background-color: #f8cbcb;
  color: #b13838;
}
.tasks-list > li .actions span.mid {
  background-color: #fed09a;
  color: #7a4a12;
}
.tasks-list > li .actions span.low {
  background-color: #caf9d0;
  color: #01460a;
}
.tasks-list > li .actions button {
  background-color: #dadada;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  filter: grayscale(1);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tasks-list.tasks-list-dtls {
  height: 100%;
}
.tasks-list.tasks-list-dtls li {
  margin: 0;
  height: 100%;
  background-color: #fff !important;
  padding: 0 !important;
}

.schedule-wrap .days {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 18px;
}
.schedule-wrap .days li {
  min-width: 50px;
  width: 80px;
  background-color: #eee;
  padding: 12px 10px;
  border-radius: 10px;
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #8e8e8e;
  cursor: pointer;
  text-align: center;
}
.schedule-wrap .days li span {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  text-align: center;
}
.schedule-wrap .days li.active {
  background-color: rgba(0, 42, 72, 0.7);
  color: #fff;
}
.schedule-wrap .days li.active span {
  color: #fff;
}
.schedule-wrap .schedule {
  margin-top: 15px;
  display: flex;
  gap: 15px;
}
.schedule-wrap .schedule li {
  width: 33%;
  padding: 10px 16px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.schedule-wrap .schedule li .time {
  text-transform: uppercase;
  margin-bottom: 5px;
}
.schedule-wrap .schedule li .desc h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.schedule-wrap .schedule li .desc p {
  display: flex;
  gap: 15px;
  color: #555;
}

@media (min-width: 992px) {
  .col-grid-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}
.filter-sidebar {
  position: fixed;
  width: 350px;
  height: 100vh;
  max-width: 80%;
  padding: 30px;
  top: 0;
  right: 0;
  transition: all 0.4s ease-in-out 0s;
  z-index: 8;
  background: #eee;
  transform: translateX(101%);
}
.filter-sidebar h2 {
  color: #212121;
}

.filter-sidebar.active {
  transform: translateX(0);
}

.over-dark {
  cursor: not-allowed;
  display: block;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  background: rgba(32, 33, 36, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: all 0.4s ease-in-out 0s;
}

.over-dark.active {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}

.eventwrap .eventcard {
  background-color: #fff;
  margin-bottom: 15px;
  border-radius: 10px;
  display: flex;
  border: 1px solid #ddd;
}
.eventwrap .eventcard .date {
  background-color: #ddd;
  padding: 15px;
  text-align: center;
  max-width: 150px;
  border-radius: 10px 0 0 10px;
}
.eventwrap .eventcard .date .day {
  font-size: 24px;
}
.eventwrap .eventcard .desc {
  padding: 15px;
  text-align: left;
}

.financeresources .appcard h3 {
  font-size: 14px;
}

.feedbackwrap {
  position: relative;
}
.feedbackwrap .rate-star span {
  font-size: 18px;
  color: #948256;
  height: 30px;
  line-height: 30px;
}

.card-wrap .transactions-wrap.earlyalerts .w-100 {
  width: calc(100% - 50px) !important;
}

ul li {
  list-style: none;
}

.fabs {
  bottom: 0;
  position: fixed;
  margin: 1em;
  right: 0;
  z-index: 998;
}

.chat {
  background-color: #fff;
}

.fab {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-align: center;
  color: #f0f0f0;
  margin: 25px auto 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: all 0.1s ease-out;
  position: relative;
  z-index: 998;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 42, 72, 0.7);
}

.fab > img {
  height: 35px;
  transition: all 0.2s ease-in-out;
}

.fab > i {
  font-size: 2em;
  line-height: 55px;
  transition: all 0.2s ease-in-out;
}

.fab:not(:last-child) {
  width: 0;
  height: 0;
  margin: 20px auto 0;
  opacity: 0;
  visibility: hidden;
  line-height: 40px;
}

.fab:not(:last-child) > i {
  font-size: 1.4em;
  line-height: 40px;
}

.fab:not(:last-child).is-visible {
  width: 40px;
  height: 40px;
  margin: 15px auto 10;
  opacity: 1;
  visibility: visible;
}

.fab:nth-last-child(1) {
  transition-delay: 25ms;
}

.fab:not(:last-child):nth-last-child(2) {
  transition-delay: 20ms;
}

.fab:not(:last-child):nth-last-child(3) {
  transition-delay: 40ms;
}

.fab:not(:last-child):nth-last-child(4) {
  transition-delay: 60ms;
}

.fab:not(:last-child):nth-last-child(5) {
  transition-delay: 80ms;
}

/*Chatbox*/
.chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  z-index: 99;
  box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
  border-radius: 15px;
  transition: all 0.2s ease-in-out;
}

.chat.chat_fullscreen {
  position: fixed;
  right: 0px;
  bottom: 0px;
  top: 0px;
  z-index: 999;
}
.chat.chat_fullscreen .chatfield {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}
.chat.chat_fullscreen .chatfield textarea {
  height: 80px;
  line-height: 24px;
  color: #666;
  padding: 8px;
  width: 100%;
  white-space: normal;
}
.chat.chat_fullscreen .fa-window-maximize:before {
  content: "\f066";
  font-weight: 900;
}

.chat_header {
  /* margin: 10px; */
  font-size: 13px;
  font-weight: 500;
  color: #f3f3f3;
  height: 55px;
  background: #42a5f5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 8px;
}

.chat_header2 {
  /* margin: 10px; */
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.chat_header .span {
  float: right;
}

.chat_fullscreen_loader {
  float: right;
  cursor: pointer;
  /* margin: 10px; */
  font-size: 20px;
  opacity: 0.5;
  /* padding: 20px; */
  margin: -10px 10px;
}

.chat.is-visible {
  opacity: 1;
  visibility: visible;
  animation: zoomIn 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}

.is-hide {
  opacity: 0;
}

.chat_option {
  float: left;
  font-size: 15px;
  list-style: none;
  position: relative;
  height: 100%;
  width: 100%;
  text-align: relative;
  margin-right: 10px;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.chat_option img {
  border-radius: 50%;
  width: 55px;
  float: left;
  margin: -30px 20px 10px 20px;
  border: 4px solid rgba(0, 0, 0, 0.21);
}

.change_img img {
  width: 35px;
  margin: 0px 20px 0px 20px;
}

.chat_option .agent {
  font-size: 12px;
  font-weight: 300;
}

.chat_option .online {
  opacity: 0.4;
  font-size: 11px;
  font-weight: 300;
}

.chat_color {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 10px;
  float: left;
}

.chat_body {
  background: #fff;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
  overflow-y: auto;
  height: 350px;
}

.chat_fullscreen .chat_body {
  height: 100vh;
}

#chat_body {
  height: 450px;
}

.chat_login p,
.chat_body li,
.chat_body p,
.chat_body a {
  animation: zoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.chat_body a {
  width: 10%;
  text-align: center;
  border: none;
  box-shadow: none;
  line-height: 40px;
  font-size: 15px;
}

.chat_field {
  position: relative;
  margin: 5px 0 5px 0;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  font-weight: 500;
  color: #4b4b4b;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  border: none;
  outline: none;
  display: inline-block;
}

.chat_field.chat_message {
  height: 30px;
  resize: none;
  font-size: 13px;
  font-weight: 400;
}

.chat_category {
  text-align: left;
}

.chat_category {
  margin: 20px;
  background: rgba(0, 0, 0, 0.03);
  padding: 10px;
}

.chat_category ul li {
  width: 80%;
  height: 30px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  cursor: pointer;
  line-height: 30px;
  color: #888;
  text-align: center;
}

.chat_category li:hover {
  background: #83c76d;
  color: #fff;
}

.chat_category li.active {
  background: #83c76d;
  color: #fff;
}

/*Chatbox scrollbar*/
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  margin: 2px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

/*Element state*/
.is-active {
  transform: rotate(180deg);
  transition: all 1s ease-in-out;
}

.is-float {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}

.is-loading {
  display: block;
  animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite;
}

/*Animation*/
@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes load {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
  .chat {
    width: 250px;
  }
  .chat.chat_fullscreen {
    width: 250px;
  }
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
  .chat {
    width: 300px;
  }
  .chat.chat_fullscreen {
    width: 300px;
  }
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
  .chat {
    width: 300px;
  }
  .chat.chat_fullscreen {
    width: 350px;
  }
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
  .chat {
    width: 400px;
  }
  .chat.chat_fullscreen {
    width: 600px;
  }
}
/*Color Options*/
.blue .fab {
  background: #42a5f5;
  color: #fff;
}

.blue .chat {
  background: #42a5f5;
  color: #999;
}

/* Ripple */
.ink {
  display: block;
  position: absolute;
  background: rgba(38, 50, 56, 0.4);
  border-radius: 100%;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  webkit-transform: scale(0);
  transform: scale(0);
}

/*animation effect*/
.ink.animate {
  animation: ripple 0.5s ease-in-out;
}
@keyframes ripple {
  /*scale the element to 250% to safely cover the entire link and fade it out*/
  100% {
    opacity: 0;
    -moz-transform: scale(5);
    -ms-transform: scale(5);
    webkit-transform: scale(5);
    transform: scale(5);
  }
}
::-webkit-input-placeholder {
  /* Chrome */
  color: #bbb;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #bbb;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbb;
}

:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #bbb;
}

.chatbot .maximize {
  display: flex;
  justify-content: flex-end;
}
.chatbot .maximize button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 0;
  padding: 2px;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatbot .maximize button img {
  filter: brightness(100);
  opacity: 0.7;
}

.finance-chat .fab {
  background-color: #948256;
}
.finance-chat .zmdi {
  display: none;
}
.finance-chat .is-visible img {
  display: none;
}
.finance-chat .is-visible .zmdi {
  display: block;
}
.finance-chat .zmdi-close:before {
  content: "\f136";
}
.finance-chat .chatbot .chatfield {
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex-direction: column;
}
.finance-chat .chatbot .chatfield .form-group {
  margin-bottom: 10px;
  width: 100%;
}
.finance-chat .chatbot .chatfield .form-group textarea {
  width: 100%;
  min-height: 90px;
}

@media only screen and (min-width: 300px) and (max-width: 480px) {
  .chat {
    width: calc(100% - 36px) !important;
  }
}
.calendar .calendar-container {
  margin: 0px;
}
.calendar .header-calendar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
}
.calendar .header-calendar h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0px 10px 0 0;
  color: #212121;
}
.calendar .header-calendar button.btn-arrow {
  background: transparent;
  border: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50px;
}
.calendar .header-calendar .btn-primary {
  margin-left: auto;
}
.calendar .week-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  overflow: auto;
  padding-bottom: 8px;
}
.calendar .week-day {
  min-width: 40px;
  background-color: #eee;
  padding: 8px 4px;
  border-radius: 10px;
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}
.calendar .week-day span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}
.calendar .week-day.selected {
  background-color: rgba(0, 42, 72, 0.7);
  color: #fff;
}
.calendar .event-list {
  margin-top: 20px;
}
.calendar #event-container {
  margin-top: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  flex-direction: column;
  margin-bottom: 15px;
}
.calendar #event-container .event {
  width: 100% !important;
  padding: 10px 16px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.calendar #event-container .event h4 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
}
.calendar #event-container .event h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}
.calendar #event-container .event .time {
  text-transform: uppercase;
  margin-bottom: 5px;
}
.calendar #event-container-1 {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-bottom: 10px;
  max-height: 300px;
  overflow: auto;
}
.calendar #event-container-1 .event {
  width: 100% !important;
  padding: 10px 16px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.calendar #event-container-1 .event h4 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
}
.calendar #event-container-1 .event h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}
.calendar #event-container-1 .event .time {
  text-transform: uppercase;
  margin-bottom: 5px;
}

.noevents {
  font-weight: 600;
  color: #222;
}

.calendar-monthview .calendar-container .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.calendar-monthview .calendar-container .calendar-header button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
}
.calendar-monthview .calendar-container .calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}
.calendar-monthview .calendar-container .calendar-day {
  padding: 0;
  border: non;
  cursor: pointer;
  position: relative;
  border-radius: 50px;
  width: 45px;
  height: 45px;
  line-height: 44px;
  background-color: rgba(255, 255, 255, 0.15);
}
.calendar-monthview .calendar-container .today {
  background-color: #948156;
  color: white;
}
.calendar-monthview .calendar-container .has-event {
  background-color: #ffeee7;
  color: #948156;
}
.calendar-monthview .calendar-container .calendar-header div {
  font-size: 20px;
}
.calendar-monthview .calendar-container .calendar-week {
  font-size: 18px;
  font-weight: 600;
}
.calendar-monthview .calendar-container .calendar-week div {
  width: 45px;
  height: 35px;
}

.btn-arrow-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-arrow-wrap button.btn-arrow {
  background: transparent;
  border: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50px;
}

.admin-main .admin-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  overflow: auto;
}
.admin-main .admin-tabs li a {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #212121;
  padding: 0 16px;
  height: 35px;
  border-radius: 50px;
  border: 1px solid #cfcfcf;
  background-color: #f4f4f4;
}
.admin-main .admin-tabs li:hover a {
  border-color: #948256;
  color: #948256;
}
.admin-main .admin-tabs li a.active {
  border-color: #948256;
  background-color: #948256;
  color: #fff;
}
.admin-main .admin-wrap {
  display: flex;
  gap: 28px;
  min-height: calc(100% - 75px);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 24px;
  border: none;
  position: relative;
  -webkit-backdrop-filter: blur(40px);
  -moz-backdrop-filter: blur(40px);
  height: 100%;
}
.admin-main .admin-wrap h1,
.admin-main .admin-wrap h2,
.admin-main .admin-wrap h3,
.admin-main .admin-wrap h4,
.admin-main .admin-wrap h5,
.admin-main .admin-wrap h6 {
  margin: 0px;
  color: #212121;
}
.admin-main .admin-wrap .adminnav {
  background-color: #fff;
  border-radius: 12px;
  min-width: 190px;
  overflow: hidden;
}
.admin-main .admin-wrap .adminnav ul li {
  border-bottom: 1px solid #dadada;
}
.admin-main .admin-wrap .adminnav ul li:last-child {
  border: none;
}
.admin-main .admin-wrap .adminnav ul li a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  padding: 15px 35px 15px 15px;
  position: relative;
}
.admin-main .admin-wrap .adminnav ul li a:before {
  content: "";
  width: 25px;
  height: 20px;
  background: url(../images/icon/arrow-right.svg) no-repeat center right;
  background-size: auto 18px;
  display: block;
  position: absolute;
  top: 12px;
  right: 15px;
  transition: all 0.2s ease-in-out;
}
.admin-main .admin-wrap .adminnav ul li:hover {
  background-color: #efeadf;
  border-bottom: 1px solid #efeadf;
}
.admin-main .admin-wrap .adminnav ul li:hover a:before {
  right: 6px;
}
.admin-main .admin-wrap .adminnav ul li a.active {
  background-color: #efeadf;
  font-weight: 600;
  color: #948256;
}
.admin-main .admin-wrap .admincontent {
  width: 100%;
}
.admin-main .admin-wrap .admincontent ul.d-flex {
  width: 100%;
}
.admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable {
  width: calc(25% - 12px);
  max-width: calc(25% - 12px);
  min-width: calc(25% - 12px);
  flex: auto !important;
}
.admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable li {
  width: 100% !important;
  height: 100%;
}

.admin-card {
  margin: 0;
  padding: 15px;
  background-color: #fff;
  border-radius: 24px;
  width: calc(25% - 12px);
  color: #212121;
  position: relative;
}
.admin-card h2 {
  font-size: 16px;
  font-weight: 600;
}
.admin-card .btn-flex {
  gap: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.5;
}
.admin-card .btn-flex:hover {
  opacity: 1;
}
.admin-card:hover .btn-flex {
  display: flex;
}
.admin-card .top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 5px;
}
.admin-card .top .handle {
  cursor: move;
  color: #aaa;
  font-size: 16px;
  position: relative;
  filter: grayscale(1);
}
.admin-card .top .counter {
  font-weight: 400;
  font-size: 32px;
  color: #efeadf;
  margin-left: 10px;
}
.admin-card .top .form-checkbox {
  margin-left: auto;
}
.admin-card .top .form-checkbox label {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
}
.admin-card .top .form-checkbox label::before {
  position: absolute;
  right: 0px;
  top: 0px;
  left: unset;
}
.admin-card .top .form-checkbox label::after {
  position: absolute;
  right: 7px;
  top: 4px;
  left: unset;
}
.admin-card .top .form-checkbox input:checked + label {
  background-color: rgba(255, 255, 255, 0.01);
}
.admin-card.ui-sortable-helper .handle {
  filter: grayscale(0);
}
.admin-card .btm {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-card .btm h3 {
  font-size: 14px;
  font-weight: 600;
}
.admin-card .btm .img {
  height: 50px;
  overflow: hidden;
}
.admin-card .btm .img img {
  -o-object-fit: contain;
  object-fit: contain;
  height: 40px;
  width: auto !important;
  max-width: 100%;
}
.admin-card .btm p {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-card .btm.training-card {
  background: transparent;
  border-radius: none;
  padding: 0;
  height: auto;
}
.admin-card h2,
.admin-card h3 {
  color: #212121;
  word-break: break-word;
}

.grid-3 .admin-card {
  width: calc(33% - 20px);
}

.admin-card.card-blue {
  background-color: #dfe7fc;
}
.admin-card.card-blue .counter {
  color: #aaa;
}
.admin-card.card-green {
  background-color: #d9f2ec;
}
.admin-card.card-green .counter {
  color: #aaa;
}
.admin-card.card-orange {
  background-color: #ffe8df;
}
.admin-card.card-orange .counter {
  color: #aaa;
}

.btn-admin-absolute {
  position: absolute;
  top: 15px;
  right: 45px;
  z-index: 99;
}

.admincontent .title a.btn.btn-primary {
  height: 35px;
}

.cropping-wrap .cropping-container .ReactCrop__child-wrapper {
  max-width: 100%;
  width: 100%;
}
.cropping-wrap .cropping-container .ReactCrop__child-wrapper img {
  width: 100%;
  min-width: 383px;
  min-height: 263px;
  max-height: 75vh;
  max-width: 75vw;
}

.card-wrap.card-snapshot {
  min-height: 200px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.card-wrap.card-snapshot .title .btn-link {
  display: none;
}

.admin-card-configuration .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.admin-card-configuration {
  margin: 0;
  padding: 15px;
  background-color: #fff;
  border-radius: 24px;
  width: calc(50% - 12px);
  color: #212121;
  position: relative;
}

.btn-flex-configuration {
  gap: 6px !important;
}

.p-dropdown-panel .p-dropdown-items-wrapper .p-dropdown-items li span {
  line-height: normal;
}

.fileuploader-input {
  position: relative;
  display: inline-block;
  flex: 1;
  align-self: flex-start;
  padding: 13px 16px;
  margin-right: 16px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  color: #212121;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fileuploader-button {
  display: inline-block;
  margin: 0;
  padding: 14px 22px;
  border: none;
  border-radius: 30px;
  outline: 0;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  background: #948256;
  background: linear-gradient(135deg, #f4a94c 0, #948256 100%);
  background-size: 140% auto;
  background-position: center;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  background-position: right;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
  transform: translate3d(0, 2px, 0);
}

.column-title {
  padding-left: 16px;
  padding-right: 16px;
}

.column-title div {
  font-size: 15px;
  font-weight: 700;
  color: #74809d;
  overflow: hidden;
}

.column-title span {
  font-size: 13px;
  font-weight: 400;
  color: #979fb8;
  overflow: hidden;
}

.fileuploader-remove {
  margin-left: auto;
}
.fileuploader-remove a {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #c0c6d2;
  cursor: pointer;
  vertical-align: top;
}
.fileuploader-remove a i {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  background: #fe7676;
  box-shadow: -1px 1px 6px rgba(254, 118, 118, 0.8);
  text-shadow: none;
}

.card-connect {
  background-color: #fff;
  padding: 16px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 16px;
}
.card-connect:hover {
  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.13);
}
.card-connect .img {
  width: 88px;
  min-width: 88px;
  height: 88px;
  border-radius: 50px;
  position: relative;
  margin-bottom: 15px;
}
.card-connect .img img {
  width: 100%;
  border-radius: 50px;
}
.card-connect .img p {
  display: none;
  width: 175px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  color: #fff;
  padding: 5px;
  font-size: 12px;
  line-height: 18px;
  position: absolute;
  bottom: -25px;
  left: 25px;
}
.card-connect .img:hover p {
  display: block;
}
.card-connect .img.attention {
  border: 3px solid #4abd65;
}
.card-connect .img.attention::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  bottom: -3px;
  left: -3px;
  z-index: 9;
}
.card-connect .img.attention.good {
  border: 4px solid #4abd65;
}
.card-connect .img.attention.intermediate {
  border: 4px solid #ffa800;
}
.card-connect .img.attention.constant {
  border: 4px solid #f3522c;
}
.card-connect .desc {
  text-align: center;
  margin-bottom: 20px;
  max-width: 100%;
}
.card-connect .desc h2 {
  font-size: 16px;
  font-weight: 600;
  color: #212121;
}
.card-connect .desc a {
  font-size: 14px;
  font-weight: 400;
  color: #8e8e8e;
}
.card-connect .desc .comm-emailid {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 3px;
  display: block;
}
.card-connect .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.card-connect .btns button,
.card-connect .btns a {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-connect .btns button img,
.card-connect .btns a img {
  height: 24px;
}
.card-connect .btns button:hover img,
.card-connect .btns a:hover img {
  filter: brightness(10);
}
.card-connect .btns .con-chat {
  background-color: #f1daf6;
}
.card-connect .btns .con-chat:hover {
  background-color: #70367c;
}
.card-connect .btns .con-email {
  background-color: #c9e7ea;
}
.card-connect .btns .con-email:hover {
  background-color: #2a5a5f;
}
.card-connect .btns .con-call {
  background-color: #e7c3b6;
}
.card-connect .btns .con-call:hover {
  background-color: #cca394;
}
.card-connect .btns .con-call img {
  height: 20px;
}
.card-connect .btns .disabled {
  background-color: #eee;
  cursor: default !important;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.card-connect .btns .disabled:hover {
  background-color: #eee;
}
.card-connect .btns .disabled:hover img {
  filter: grayscale(1);
  opacity: 0.4;
}
.card-connect .btns .disabled img {
  filter: grayscale(1);
  opacity: 0.4;
}

.login-contents {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-contents .content-center {
  width: 450px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.login-contents .content-center .topban {
  padding: 0px;
  background: #e8eff9;
  position: relative;
  height: 200px;
  overflow: hidden;
}
.login-contents .content-center .topban img {
  width: 100%;
  margin: auto;
}
.login-contents .content-center .topban .toplogo {
  position: absolute;
  top: 10px;
  display: flex;
  justify-content: space-between;
  left: 0;
  width: 100%;
}
.login-contents .content-center .topban .logo {
  background: #333;
  padding: 10px 25px;
  border-radius: 0 60px 60px 0;
  width: 70%;
}
.login-contents .content-center .topban .logo img {
  width: 100%;
}
.login-contents .content-center .topban .btnr {
  margin-right: 10px;
  margin-top: 15px;
}
.login-contents .content-center .topban .btnr a {
  background: #427fd3;
  padding: 8px 15px;
  border-radius: 6px;
  color: #fff;
}
.login-contents .content-center .col-lg-12 {
  padding: 15px 30px;
}
.login-contents .content-center .col-lg-12 h3 {
  font-size: 18px;
  font-weight: 600;
}

main.main-login {
  justify-content: center;
}

main.main-login #content {
  padding: 0;
}

.signout {
  display: none !important;
}

.user-select select {
  width: 230px;
  height: 44px;
  border-radius: 12px;
  border: none;
  padding: 0 10px;
  background: #fff url(../images/icon/dropdown.svg) no-repeat center right 15px;
  background-size: auto 20px;
  padding-right: 25px;
  border: 1px solid #ddd;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body
  main
  #content
  header
  .right-wrap
  .btn-notify.btn-head-admin
  li:nth-child(4)
  a {
  background-color: #efeadf;
}

.notiy-safety a {
  background-color: #ffd598 !important;
}

.notiy-safety a svg {
  height: 22px;
  fill: #cd8111;
}

.btn-gold {
  height: 44px;
  padding: 10px 25px;
  background-color: #948256;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
}

.course-wrap .tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.course-wrap .tabs button {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  border: 1px solid #cfcfcf;
  background-color: #f4f4f4;
}
.course-wrap .tabs button:hover {
  border-color: #948256;
  color: #948256;
}
.course-wrap .tabs button.active {
  border-color: #948256;
  background-color: #948256;
  color: #fff;
}
.course-wrap .tabs .quickwrap {
  margin-left: auto;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 0 10px 14px;
  border-radius: 12px;
  position: relative;
}
.course-wrap .tabs .quickwrap #quicklinkwrap {
  position: absolute;
  background: #fff;
  z-index: 9;
  width: 250px;
  border-radius: 16px;
  top: 52px;
  right: 0;
  display: none;
  overflow: hidden;
}
.course-wrap .tabs .quickwrap #quicklinkwrap.show {
  display: block;
}
.course-wrap .tabs .quickwrap #quicklinkwrap a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  font-size: 16px;
  color: #212121;
  font-weight: 400;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.course-wrap .tabs .quickwrap #quicklinkwrap a:last-child {
  border-bottom: none;
}
.course-wrap .tabs .quickwrap #quicklinkwrap a:hover {
  background-color: #eee;
}
.course-wrap .tabs .quickwrap #quicklinkwrap a img {
  height: 18px;
  width: auto;
}

ul.courseinst {
  margin-top: 20px;
}
ul.courseinst li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}
ul.courseinst li .img {
  height: 45px;
  width: 45px;
  overflow: hidden;
}
ul.courseinst li .img img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
ul.courseinst li .desc label {
  font-size: 15px;
  color: #555;
}
ul.courseinst li .desc p {
  font-size: 16px;
  font-weight: 600;
  color: #212121;
}

ul.course-list {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  padding-right: 15px;
  min-height: 370px;
  overflow: auto;
}
ul.course-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 0px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
ul.course-list li.active {
  background-color: rgba(148, 130, 86, 0.1843137255);
}
ul.course-list li.active .dtls h6 {
  color: #716342;
}
ul.course-list li .img {
  width: 55px;
  min-width: 55px;
  border-radius: 12px;
}
ul.course-list li .img img {
  width: 55px;
  min-width: 55px;
  height: 55px;
  border-radius: 0px;
  -o-object-fit: cover;
  object-fit: cover;
}
ul.course-list li .dtls {
  width: calc(100% - 70px);
}
ul.course-list li .dtls h6 {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
ul.course-list li .dtls p {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.coursetabs .transactions-scroll ul.course-list {
  border-right: none;
  padding-right: 0px;
}

ul.course-list.resouce-list,
ul.course-list.apps-list {
  height: 370px;
}

.apps-list .img.icon img {
  padding: 5px;
}

.appsdtls {
  display: none;
}
.appsdtls.show {
  display: flex;
}

.resourcedtls {
  display: none;
}
.resourcedtls.show {
  display: flex;
}

.coursetabs {
  display: none;
}
.coursetabs.show {
  display: flex;
}

.studeacc-desc li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.studeacc-desc li label {
  color: #666;
  font-weight: 500;
}
.studeacc-desc li h6 {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  margin-left: 14px !important;
}
.studeacc-desc li span {
  height: 10px;
  width: 10px;
  border-radius: 50px;
  display: inline-block;
  margin-right: 4px;
}
.studeacc-desc li:first-child span {
  background-color: #0161fa;
}
.studeacc-desc li:last-child span {
  background-color: #0bc1ff;
}

.profile-drop {
  margin-left: auto;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  border-radius: 12px;
  position: relative;
}
.profile-drop #quicklinkwrap {
  position: absolute;
  background: #fff;
  z-index: 9;
  min-width: 250px;
  border-radius: 16px;
  top: 52px;
  right: 0;
  display: none;
  overflow: hidden;
}
.profile-drop #quicklinkwrap.show {
  display: block;
}
.prof-info {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.prof-info h5 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333
}
.prof-info p {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 5px;
  color: #666;
}
ul.prof-list li  {
  padding: 0px;
  margin:0;
}
ul.prof-list {
 border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
ul.prof-list li span {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    padding: 0 12px;
}
.profile-drop #quicklinkwrap a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 16px;
  color: #212121;
  font-weight: 400;
 
}
.profile-drop #quicklinkwrap a:last-child {
  border-bottom: none;
}
.profile-drop #quicklinkwrap a:hover {
  background-color: #eee;
}
.profile-drop #quicklinkwrap a img {
  height: 18px !important;
  width: auto !important;
  border-radius: none !important;
}
.profile-drop #quicklinkwrap .img-logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  width: 100%;
}
.profile-drop #quicklinkwrap .img-logout img {
  height: 25px !important;
  width: auto !important;
  border-radius: none !important;
}
.profile-drop #quicklinkwrap .img-logout h6 {
  font-size: 18px;
  line-height: 20px;
  color: #222;
}
.profile-drop #quicklinkwrap .img-logout span {
  font-size: 13px;
  opacity: 0.6;
  white-space: nowrap;
  margin-right: 30px;
}

.reportcard {
  padding: 10px 20px !important;
}
.reportcard:hover {
  background-color: #948256;
}
.reportcard:hover h3,
.reportcard:hover p {
  color: #fff;
}
.reportcard:hover img {
  filter: brightness(10);
}

.img-more {
  filter: grayscale(1);
}

.btn-task,
.btncard a.btn-task {
  background-color: #dadada;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  filter: grayscale(1);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.btn-task + .dropdown-menu .dropdown-item {
  border-radius: 0 !important;
}

.broadcastwrap {
  position: relative;
}
.broadcastwrap .broadcastlist {
  background-color: #fff;
  width: 300px;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 9;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.broadcastwrap .broadcastlist .checkall {
  position: relative;
}
.broadcastwrap .broadcastlist .checkall span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.broadcastwrap .broadcastlist .checkall span::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  display: inline-block;
}
.broadcastwrap .broadcastlist .checkall input:checked + span::before {
  content: "✔" !important;
  background-color: #4690f7 !important;
  border: 1px solid #4690f7 !important;
}
.broadcastwrap .broadcastlist #studentList {
  max-height: 250px;
  overflow: auto;
}
.broadcastwrap .broadcastlist #studentList li {
  margin-bottom: 10px;
}
.broadcastwrap .broadcastlist #studentList li div {
  display: flex;
  align-items: center;
}
.broadcastwrap .broadcastlist #studentList li div::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
}
.broadcastwrap .broadcastlist #studentList li div img {
  height: 40px;
  border-radius: 50px;
  margin: 0 10px;
}
.broadcastwrap .broadcastlist #studentList li div p {
  background: #fff;
  color: #222;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}
.broadcastwrap .broadcastlist label input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
}
.broadcastwrap .broadcastlist label input:checked + div::before {
  content: "✔" !important;
  background-color: #4690f7 !important;
  border: 1px solid #4690f7 !important;
}
.broadcastwrap .broadcastlist .sendmailwrap {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.broadcastwrap .broadcastlist .sendmailwrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  background-color: #948256;
  border-color: #948256;
  padding: 10px 25px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  cursor: pointer;
}

.onetlist table {
  width: 100%;
}
.onetlist table tbody tr {
  border-bottom: 1px solid #ddd !important;
}
.onetlist table tbody tr td {
  padding: 15px 15px;
}
.onetlist table thead th {
  padding: 15px 15px;
  border: none !important;
  background-color: #ddd;
}
.onetlist table thead th:first-child {
  border-radius: 16px 0 0 0;
}
.onetlist table thead th:last-child {
  border-radius: 0 16px 0 0;
}
.onetlist table svg {
  height: 14px;
}
.onetlist table h3,
.onetlist table .h3,
.onetlist table h4,
.onetlist table .h4,
.onetlist table h5,
.onetlist table .h5,
.onetlist table h6,
.onetlist table .h6 {
  font-weight: 400;
  margin: 0px;
  color: #004488;
}
.onetlist table small,
.onetlist table .small {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: #666;
}

.modal-backdrop {
  background-color: rgba(0, 21, 36, 0.4588235294) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.modal.modal-full .modal-dialog {
  max-width: 1300px !important;
  width: 80% !important;
}

.allapps .btncard a {
  border: 1px solid #ddd !important;
}

.modal .modal-footer {
  border: none;
  padding: 0 15px 10px;
}
.modal .modal-footer button {
  width: 90px;
}
.modal .modal-body {
  padding: 24px;
}

.img-card {
  max-height: 250px;
  overflow: hidden;
}
.img-card img {
  width: 100%;
}

.sweet-alert h2 {
  color: #222;
}
.sweet-alert button,
.sweet-alert a {
  border: none;
  box-shadow: none;
}
.sweet-alert .btn-link {
  background: transparent !important;
  border: 2px solid #948256 !important;
  color: #948256;
  padding: 0 20px !important;
}
.sweet-alert .btn {
  min-width: 80px;
  box-shadow: none !important;
}

.p-calendar {
  width: 100%;
}
.p-calendar .p-datepicker {
  width: 100%;
  background-color: transparent;
}
.p-calendar .p-datepicker .p-datepicker-header {
  display: none;
}
.p-calendar .p-datepicker table tr th,
.p-calendar .p-datepicker table tr td {
  text-align: center;
}
.p-calendar .p-datepicker table tr th span,
.p-calendar .p-datepicker table tr td span {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-monthly-calendar .p-calendar .p-datepicker {
  width: 100%;
  background-color: transparent;
}
.event-monthly-calendar .p-calendar .p-datepicker .p-datepicker-header {
  background-color: transparent;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
}
.event-monthly-calendar
  .p-calendar
  .p-datepicker
  .p-datepicker-header
  button.p-datepicker-prev,
.event-monthly-calendar
  .p-calendar
  .p-datepicker
  .p-datepicker-header
  button.p-datepicker-next {
  display: none;
}
.event-monthly-calendar .p-calendar .p-datepicker table tr td span {
  margin-bottom: 6px;
}
.event-monthly-calendar .p-calendar .p-datepicker table tr td span div {
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 50px;
  width: 100%;
  height: 100%;
  max-width: 44px;
  max-height: 44px;
  background-color: rgba(255, 255, 255, 0.15);
  aspect-ratio: 16/16;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-monthly-calendar
  .p-calendar
  .p-datepicker
  table
  tr
  td
  span
  div.special-date {
  background-color: #ffeee7;
  color: #948156;
}
.event-monthly-calendar
  .p-calendar
  .p-datepicker
  table
  tr
  td
  span
  .p-hidden-accessible {
  display: none;
}
.event-monthly-calendar
  .p-calendar
  .p-datepicker
  table
  tr
  td
  span.p-highlight
  .p-highlight {
  background-color: #948156;
  color: white;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(2);
  backdrop-filter: blur(2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

img.profile-pic {
  height: inherit;
  width: inherit;
  -o-object-fit: cover;
  object-fit: cover;
}

.dash-report .appcard a h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dash-report .appcard a:hover img {
  filter: brightness(1);
}

.training-all-wrap .widget-card .img {
  height: 180px;
}

.academic-profile .gauge-desc.gauge-position {
  position: absolute;
  bottom: 10px;
  text-align: center;
}
.academic-profile .gauge-desc.gauge-position h2 {
  font-size: 25px;
  font-weight: 600;
}
.academic-profile .gauge-desc.gauge-position h2 span {
  display: block;
  font-size: 16px;
  color: #666;
}

.coursetabs .transactions-scroll {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  padding-right: 15px;
}

.card-wrap ul.transactions-wrap.stud-transaction.transactions-scroll {
  overflow: auto;
  max-height: 315px;
}

.para-hide-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.para-hide-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.para-hide-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.para-hide-6 {
  display: -webkit-box;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-150 {
  width: 150px;
}

.grade-list-scroll {
  height: 289px;
  overflow: auto;
}

.emailform .multiselect-plugin .to-email-box {
  border-bottom: 1px solid #e3e3e3;
}

.grade-list-scroll,
.transactions-scroll {
  padding-right: 8px;
}
.grade-list-scroll::-webkit-scrollbar,
.transactions-scroll::-webkit-scrollbar {
  width: 8px;
}
.grade-list-scroll::-webkit-scrollbar-track,
.transactions-scroll::-webkit-scrollbar-track {
  background: #aaa;
}
.grade-list-scroll::-webkit-scrollbar-thumb,
.transactions-scroll::-webkit-scrollbar-thumb {
  background: #666;
}
.grade-list-scroll::-webkit-scrollbar-thumb:hover,
.transactions-scroll::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.inputfile {
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
}

.inputfile label {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  border-right: 1px solid #ccc;
  background: #f1f1f1;
  cursor: pointer;
}

.inputfile span {
  padding: 0 10px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 125px);
}

.inputfile-flex {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 5px;
}
.inputfile-flex .inputfile-wrap {
  width: 100%;
}
.inputfile-flex .inputfile-img + .inputfile-wrap {
  width: calc(100% - 50px);
}

.p-multiselect {
  position: relative;
}

.p-multiselect-panel
  .p-multiselect-items-wrapper
  .p-multiselect-items
  li
  .p-multiselect-checkbox {
  height: 30px;
  display: flex;
  align-items: center;
}

.p-multiselect-panel .p-multiselect-items-wrapper .p-multiselect-items li span {
  line-height: normal;
  white-space: normal;
}

.p-multiselect-header .p-multiselect-select-all .p-checkbox {
  padding: 0 15px;
}

.p-multiselect-panel
  .p-multiselect-header
  .p-multiselect-filter-container
  input {
  margin-left: 10px;
}

.w-multiselect {
  width: calc(100% - 120px);
}

.report-all-card .card {
  display: flex;
  gap: 15px;
  flex-direction: row;
  align-items: center;
}
.report-all-card .card .img {
  width: 300px;
}
.report-all-card .card .img img {
  width: 100%;
}
.report-all-card .card .desc {
  width: calc(100% - 325px);
}

.chartWrap-new {
  width: 100%;
  position: relative;
}

.card-faculty-apps .btncard a:hover img {
  filter: brightness(30);
}

.jobwrap .pagination {
  width: 100%;
  margin-top: 10px;
}

.h-career {
  min-height: calc(100vh + 140px);
}

.mb-s3 {
  margin-bottom: -1rem !important;
}

.card-wrap.freshman-register img {
  width: 100%;
}

body main nav.active + div + #content {
  overflow: hidden;
  height: 100vh;
}

.ReactModalPortal .react-modal-overlay .react-modal-content {
  overflow: visible !important;
}
.ReactModalPortal .p-multiselect-panel.p-component {
  max-width: 99%;
}

.dd-freshman-config
  .p-multiselect-panel
  .p-multiselect-items-wrapper
  .p-multiselect-items
  li {
  padding: 8px 12px;
  align-items: center;
}

.tab-dropdown {
  display: flex;
  padding-right: 15px;
}
.tab-dropdown .p-dropdown {
  max-width: 450px;
}

.profile_details_text + .d-flex .form-checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inputfile-flex .inputfile-img {
  font-size: 12px;
}

.to-email-box input.to-email-input {
  height: 50px;
}

.grades-wrap .gardedistribution #chart-container {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding-top: 10px;
}
.grades-wrap .gardedistribution #chart-container .p-chart {
  height: 270px;
  max-height: 270px;
}

.resourcecard a {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 16px;
  background-color: #fff;
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 15px;
}
.resourcecard a p {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: #555;
}
.resourcecard a .img {
  position: relative;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resourcecard a h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resourcecard a .dtls {
  width: calc(100% - 55px);
}
.resourcecard a span {
  transition: all 0.2s ease-in-out;
  margin-left: auto;
  width: 24px;
}
.resourcecard a span img {
  height: 20px;
}
.resourcecard a:hover {
  background-color: #948256;
}
.resourcecard a:hover h3,
.resourcecard a:hover p {
  color: #fff;
}
.resourcecard a:hover span {
  right: 20px;
  opacity: 1;
}
.resourcecard a:hover span img {
  filter: brightness(10);
}

.card-wrap .transactions-wrap.early-alert-card li {
  background-color: #fff;
  flex-wrap: nowrap;
  flex-direction: row;
}

.icon-visibility:hover a img {
  filter: brightness(10);
}

.label-info {
  position: relative;
}
.label-info span {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 1;
  white-space: wrap;
  font-size: 13px;
  line-height: 18px;
  margin-left: 8px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  display: none;
  width: 300px;
  transform: translate(-10%, 0%);
}
.label-info span::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: -6px;
  left: 15px;
  margin-left: 0;
}
.label-info:hover span {
  display: block;
}

.side-filter {
  display: flex;
  align-items: center;
  gap: 15px;
}
.side-filter .w-full.p-dropdown {
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
}
.side-filter .w-full.p-dropdown svg {
  zoom: 0.85;
}
.side-filter .col-md-6 .p-dropdown-panel.p-component {
  left: inherit !important;
  right: 0 !important;
}
.side-filter .col-md-6 .p-dropdown-panel.p-component li span {
  white-space: normal;
}

.ReactModalPortal .react-modal-overlay {
  z-index: 99;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px 30px;
  position: fixed;
  top: 0%;
  left: 0%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
}
.ReactModalPortal .react-modal-overlay::-webkit-scrollbar {
  width: 12px;
}
.ReactModalPortal .react-modal-overlay::-webkit-scrollbar-track {
  background: #666;
}
.ReactModalPortal .react-modal-overlay::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 20px;
  border: 3px solid #666;
}
.ReactModalPortal .react-modal-overlay .react-modal-content {
  position: relative;
  z-index: 101;
  background: #fff;
  width: 90%;
  max-width: 800px;
  padding: 15px 30px 15px 30px;
  margin: 15px 0;
  overflow: auto;
  border-radius: 10px;
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.ReactModalPortal .react-modal-overlay .react-modal-content.full-width {
  width: 90%;
  max-width: 1200px;
}
.ReactModalPortal .react-modal-overlay .modal-close {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==);
  border: none;
  position: sticky;
  top: 10px;
  left: 101%;
  margin-right: -40px;
  opacity: 0.5;
  z-index: 102;
  text-decoration: none;
  outline: 0;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.ReactModalPortal .react-modal-overlay .modal-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ReactModalPortal .react-modal-overlay .modal-header .modal-title {
  font-weight: 400;
  color: #222;
}
.ReactModalPortal .react-modal-overlay .modal-footer {
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ReactModalPortal .react-modal-overlay h1,
.ReactModalPortal .react-modal-overlay h2,
.ReactModalPortal .react-modal-overlay h3,
.ReactModalPortal .react-modal-overlay h4,
.ReactModalPortal .react-modal-overlay h5,
.ReactModalPortal .react-modal-overlay h6 {
  margin: 0px;
  color: rgb(33, 33, 33);
}
.ReactModalPortal .react-modal-overlay .modal-body {
  padding-bottom: 24px;
}

.ReactModal__Body--open {
  overflow: hidden;
}

.modal-backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.p-dropdown {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border: solid 1px #d2d5da;
  background-color: #fff;
  font-size: 14px;
  color: #212121;
  border-radius: 5px;
  box-shadow: none;
}

.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container {
  padding: 10px;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 40px 0 15px;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-container svg {
  margin-right: 10px;
}
.p-dropdown-panel .p-dropdown-items-wrapper .p-dropdown-items li {
  padding: 10px 15px;
  text-transform: capitalize;
}

.p-multiselect {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border: solid 1px #d2d5da;
  background-color: #fff;
  font-size: 14px;
  color: #212121;
  border-radius: 5px;
  box-shadow: none;
}

.p-multiselect-label {
  padding: 0;
}

.p-checkbox-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  outline: 0 none;
  cursor: pointer;
}

.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
  padding: 10px;
}
.p-multiselect-panel
  .p-multiselect-header
  .p-multiselect-filter-container
  input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 40px 0 15px;
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container svg {
  margin-right: 10px;
}
.p-multiselect-panel .p-multiselect-items-wrapper .p-multiselect-items li {
  padding: 10px 15px;
  text-transform: capitalize;
}

.p-checkbox.p-component .p-checkbox-box {
  border: 1px solid #ccc;
  min-width: 22px;
}

.p-multiselect-panel .p-multiselect-items-wrapper .p-multiselect-items li {
  gap: 10px;
}

.notify-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notify-content .notify-wrap {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 24px;
  border-radius: 24px;
  border: none;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  width: 90%;
  max-width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.notify-content .notify-wrap img {
  max-height: 320px;
  margin-bottom: 15px;
}
.notify-content .notify-wrap h5 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.36;
  letter-spacing: 0.22px;
  text-align: center;
  color: #222222;
  margin-bottom: 0px;
}
.notify-content .notify-wrap.notify-expired h5 {
  color: #ce2020;
}
.notify-content .notify-wrap.notify-success h5 {
  color: #259a1a;
}
.notify-content .notify-wrap span {
  font-size: 15px;
  max-width: 460px;
  display: block;
  margin: 0 auto;
  letter-spacing: 0.21px;
  text-align: center;
  color: #666;
}

.freshman-wrap .filter {
  margin-bottom: 10px;
}
.freshman-wrap .filter .btn-filter {
  background-color: transparent;
  color: #fff;
  border: none;
}
.freshman-wrap .task-wrap.card-wrap {
  background-color: rgba(54, 51, 74, 0.7);
  border-radius: 0 24px 24px 0;
  margin-left: -28px;
  height: calc(100vh - 100px);
  height: 100%;
  overflow: auto;
}
.freshman-wrap .task-wrap.card-wrap .task-list li {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 15px;
  cursor: default;
  transition: all 0.2s ease-in-out;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.8;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top .leftwrap {
  display: flex;
  align-items: center;
  gap: 15px;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top .leftwrap span {
  color: rgba(0, 0, 0, 0.8);
  border-radius: 50px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(213, 213, 213, 0.5);
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top .leftwrap h6 {
  color: #222;
  font-weight: 500;
  font-size: 15px;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top .leftwrap .date {
  display: none;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  margin-top: 5px;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .top .rightwrap .btn-accord {
  width: 25px;
  height: 25px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid #aaa;
  background-color: transparent;
  color: #aaa;
  font-size: 14px;
  cursor: pointer;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li
  .top
  .rightwrap
  .task-success {
  display: none;
  background-color: transparent;
  color: #157347;
  cursor: default;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .btm {
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 12px;
  margin-top: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .btm .task-progress {
  width: 80%;
  background-color: #ddd;
  height: 4px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .btm .task-progress span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
  height: 4px;
  border-radius: 5px;
  background-color: #134da5;
}
.freshman-wrap .task-wrap.card-wrap .task-list li .btm .percentage {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.active {
  cursor: pointer;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.active .top .leftwrap .date {
  display: block;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.active
  .top
  .rightwrap
  .btn-accord {
  transform: rotate(180deg);
}
.freshman-wrap .task-wrap.card-wrap .task-list li.active .btm {
  display: flex;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.completed {
  cursor: pointer;
  background: rgb(37, 185, 87);
  background: linear-gradient(
    90deg,
    rgb(37, 185, 87) 0%,
    rgb(25, 186, 79) 100%
  );
}
.freshman-wrap .task-wrap.card-wrap .task-list li.completed .top .leftwrap h6 {
  color: #fff;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.completed
  .top
  .leftwrap
  .date {
  display: none;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.completed
  .top
  .rightwrap
  .btn-accord {
  display: none;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.completed
  .top
  .rightwrap
  .task-success {
  display: block;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.completed .btm {
  display: none;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.inprogress {
  cursor: pointer;
  background: rgb(67, 178, 233);
  background: linear-gradient(
    90deg,
    rgb(67, 178, 233) 0%,
    rgb(10, 136, 171) 100%
  );
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.inprogress
  .top
  .leftwrap
  span {
  color: rgba(255, 255, 255, 0.7);
}
.freshman-wrap .task-wrap.card-wrap .task-list li.inprogress .top .leftwrap h6 {
  color: #fff;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.inprogress
  .top
  .leftwrap
  .date {
  color: rgba(255, 255, 255, 0.9);
  display: block;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.inprogress
  .top
  .rightwrap
  .btn-accord {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  transform: rotate(180deg);
  display: flex;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.inprogress .btm {
  display: flex;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.inprogress
  .btm
  .task-progress {
  width: 80%;
  background-color: rgba(255, 255, 255, 0.3);
  height: 4px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.inprogress
  .btm
  .task-progress
  span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
  height: 4px;
  border-radius: 5px;
  background-color: #134da5;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.inprogress .btm .percentage {
  color: #fff;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.next-task {
  cursor: pointer;
  background-color: #fff;
}
.freshman-wrap .task-wrap.card-wrap .task-list li.next-task .top {
  opacity: 1;
}
.freshman-wrap
  .task-wrap.card-wrap
  .task-list
  li.next-task
  .top
  .rightwrap
  .btn-accord {
  display: flex;
}
.freshman-wrap .taskdtl-wrap {
  position: relative;
}
.freshman-wrap .taskdtl-wrap .gridlines {
  margin: 80px 0 50px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  justify-content: space-evenly;
  z-index: 0;
}
.freshman-wrap .taskdtl-wrap .gridlines span {
  display: block;
  width: 1px;
  height: 100%;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.freshman-wrap .taskdtl-wrap .gridlines span:nth-child(5) {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.freshman-wrap .taskdtl-wrap .taskdtls-list {
  display: none;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask {
  margin-top: 40px;
  position: relative;
  z-index: 2;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li {
  position: relative;
  width: 50%;
  margin-bottom: 20px;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card {
  background-color: #fff;
  border-radius: 50px !important;
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 10px;
  overflow: hidden;
  margin: 0px;
  position: relative;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .num {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #948256;
  position: relative;
  z-index: 2;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .dtls {
  position: relative;
  z-index: 2;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .dtls span {
  color: rgba(0, 0, 0, 0.5);
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .dtls h6 {
  color: #222;
  font-weight: 500;
  font-size: 15px;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .dtls h6 a {
  color: #222;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card .dtls p {
  font-size: 13px;
  line-height: 17px;
  margin-top: 5px;
  color: #444;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li
  .inner-card
  .progress-txt {
  position: relative;
  z-index: 2;
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li
  .inner-card
  .progress-txt
  p {
  background-color: #ccc;
  border-radius: 20px;
  padding: 5px 12px;
  font-weight: 500;
  white-space: nowrap;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li
  .inner-card
  .progress-txt
  .btn-subtask {
  background: #ddd;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: none;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card > span {
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 0;
  opacity: 0.8;
  border-radius: 0px;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-progress
  .inner-card {
  background-color: #e3effb;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-progress
  .inner-card
  > span {
  background-color: #0171df;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li.subtask-progress .dtls {
  position: relative;
  z-index: 2;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-progress
  .dtls
  span {
  color: #222;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-progress
  .dtls
  h6 {
  color: #222;
  font-weight: 500;
  font-size: 15px;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-progress
  .progress-txt
  P {
  background-color: #fff;
  color: #0171df;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .inner-card {
  background-color: rgb(37, 185, 87);
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .inner-card
  h6
  a {
  cursor: default;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .inner-card
  > span {
  background-color: rgb(37, 185, 87);
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li.subtask-success .dtls {
  position: relative;
  z-index: 2;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .dtls
  span {
  color: rgba(255, 255, 255, 0.7);
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .dtls
  h6 {
  color: rgb(255, 255, 255);
  font-weight: 500;
  font-size: 15px;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-success
  .progress-txt
  P {
  background-color: #fff;
  color: rgb(25, 145, 65);
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li.subtask-disabled {
  opacity: 0.6;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li.subtask-disabled .num,
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li.subtask-disabled .dtls,
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.subtask-disabled
  .progress-txt {
  opacity: 0.7;
  filter: grayscale(1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li > .task-percentage {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin: auto;
  width: 80%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li
  > .task-percentage
  input {
  background-color: rgba(0, 0, 0, 0.2);
  height: 40px;
  padding: 0 8px;
  color: #fff;
  width: 100%;
  border-radius: 5px 0 0 5px;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li
  > .task-percentage
  button {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0 5px 5px 0;
  height: 40px;
  padding: 0 8px;
  color: #fff;
  width: 50px;
  border: none;
}
.freshman-wrap
  .taskdtl-wrap
  .taskdtls-list
  .subtask
  li.show-percentage
  .task-percentage {
  height: auto;
  opacity: 1;
  visibility: visible;
}
.freshman-wrap .taskdtl-wrap .taskdtls-list.active {
  display: block;
}

.accordion-container {
  width: 100%;
  margin: 0;
}
.accordion-container .ui-accordion-header {
  cursor: pointer;
}
.accordion-container .pgm-dtls {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.accordion-container .pgm-dtls h6 {
  font-size: 16px;
  font-weight: 400;
}
.accordion-container .pgm-dtls h6 strong {
  display: block;
  font-weight: 600;
}
.accordion-container .accordion-item {
  margin-bottom: 5px;
}
.accordion-container .accordion-item .ui-accordion-header-icon.ui-icon {
  display: none;
}
.accordion-container .sub-item-list {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
.accordion-container .sub-item {
  padding: 5px;
  margin: 5px 0;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}
.accordion-container .ui-accordion .accordion-item {
  border: 1px solid #ddd;
  border-radius: 0px;
}
.accordion-container .ui-accordion .accordion-item .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 0;
  border-radius: 0;
  border: none !important;
  padding: 15px 20px;
  font-size: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header
  .ui-accordion-header-icon.ui-icon {
  background: transparent url(../images/icon/draggable.svg) no-repeat left
    center;
  background-size: contain;
  width: 16px;
  height: 16px;
  opacity: 0.4;
  margin-right: 10px;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header
  .order-number {
  font-size: 14px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #948256;
  position: relative;
  z-index: 2;
  margin-right: 10px;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header
  .arrow-acc {
  transform: rotate(90deg);
  margin-left: auto;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header
  .arrow-acc
  img {
  height: 18px;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header.active-item-fresh {
  background-color: #948256;
  color: #fff;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-header.active-item-fresh
  .arrow-acc {
  filter: brightness(10);
  transform: rotate(270deg);
}
.accordion-container .ui-accordion .accordion-item .ui-accordion-content {
  height: auto !important;
}
.accordion-container .ui-accordion .accordion-item .ui-accordion-content h4 {
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 10px;
  color: #555555;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-content
  .sub-item-list
  .sub-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  padding: 15px;
  cursor: default;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-content
  .sub-item-list
  .sub-item
  .order-number {
  font-size: 14px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background-color: #ccc;
  position: relative;
  z-index: 2;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-content
  .sub-item-list
  .sub-item
  h6
  a {
  font-weight: 600;
  color: #333;
  margin-bottom: 3px;
}
.accordion-container
  .ui-accordion
  .accordion-item
  .ui-accordion-content
  .sub-item-list
  .sub-item
  .btn-accd--edit {
  margin-left: auto;
}

.modal-dialog.full-width {
  width: 90%;
  max-width: 1200px;
}

.fresman-config {
  display: flex;
  gap: 15px;
}
.fresman-config > div {
  border: 1px solid #ccc;
  padding: 0px;
  border-radius: 10px;
  width: 50%;
}
.fresman-config .maintask-content,
.fresman-config .subtask-content {
  height: calc(100vh - 350px);
  overflow: auto;
}
.fresman-config .maintask-content .titlewrap,
.fresman-config .subtask-content .titlewrap {
  background-color: #eee;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fresman-config .maintask-content .titlewrap h6,
.fresman-config .subtask-content .titlewrap h6 {
  color: #333;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
  width: 180px;
}
.fresman-config .maintask-content .titlewrap input,
.fresman-config .subtask-content .titlewrap input {
  max-width: 100%;
}
.fresman-config .maintask-content ul,
.fresman-config .subtask-content ul {
  padding: 8px;
}
.fresman-config .maintask-content ul li,
.fresman-config .subtask-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.fresman-config .maintask-content ul li .drag,
.fresman-config .subtask-content ul li .drag {
  cursor: grab;
  opacity: 0.6;
  filter: grayscale(1);
}
.fresman-config .maintask-content ul li .drag:hover,
.fresman-config .subtask-content ul li .drag:hover {
  opacity: 1;
  filter: grayscale(0);
}
.fresman-config .maintask-content ul li .form-checkbox,
.fresman-config .subtask-content ul li .form-checkbox {
  margin-left: auto;
}
.fresman-config .maintask-content ul li .form-checkbox button,
.fresman-config .subtask-content ul li .form-checkbox button {
  font-size: 12px;
}
.fresman-config .maintask-content ul li .title,
.fresman-config .subtask-content ul li .title {
  width: 75%;
}
.fresman-config .maintask-content ul li .title p,
.fresman-config .subtask-content ul li .title p {
  font-weight: 600;
  color: #333;
  margin: 0;
}
.fresman-config .maintask-content ul li .title .form-group,
.fresman-config .subtask-content ul li .title .form-group {
  margin: 0;
}
.fresman-config .maintask-content ul li .title .form-group select,
.fresman-config .maintask-content ul li .title .form-group input,
.fresman-config .subtask-content ul li .title .form-group select,
.fresman-config .subtask-content ul li .title .form-group input {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
}
.fresman-config .maintask-content ul li .numbered,
.fresman-config .subtask-content ul li .numbered {
  font-size: 14px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background-color: #ddd;
  position: relative;
  z-index: 2;
  margin-right: 10px;
}
.fresman-config .maintask-content ul li.active,
.fresman-config .subtask-content ul li.active {
  background-color: #f4f4f4;
}

.freshman-wrap .list-course-freshman {
  margin-bottom: 15px;
}
.freshman-wrap .list-course-freshman > p {
  color: #fff;
  font-size: 15px;
}

.fresman-config .maintask-content ul,
.fresman-config .subtask-content ul {
  position: relative;
}

.fresman-config > div .titlewrap > .w-100 {
  width: calc(100% - 150px) !important;
}

body {
  scroll-behavior: smooth;
}

.help-wrap {
  position: relative;
}
.help-wrap .sidebar {
  position: sticky;
  top: 10px;
  background-color: #fff;
  border-radius: 12px;
  min-width: 190px;
  overflow: hidden;
  overflow-y: auto;
  padding: 20px;
  transition: transform 0.3s ease-in-out;
}
.help-wrap .sidebar h2 {
  font-size: 20px;
  margin-top: 0;
  color: #121212;
  margin-bottom: 20px;
}
.help-wrap .sidebar a {
  color: #666;
  text-decoration: none;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.2s;
}
.help-wrap .sidebar a.active,
.help-wrap .sidebar a:hover {
  padding-left: 10px;
  color: #222;
}
.help-wrap .section {
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  flex: 1;
}
.help-wrap .section h2 {
  font-size: 24px;
  color: #222;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.help-wrap .section h3 {
  font-size: 18px;
  color: #222;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  margin-bottom: 15px;
  margin-top: 20px;
}
.help-wrap .section p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}
.help-wrap ol {
  list-style: decimal;
  margin-left: 40px;
}
.help-wrap ul li {
  list-style: circle;
  margin-left: 40px;
}
.help-wrap ol li,
.help-wrap ul li {
  margin-bottom: 15px;
  color: #333;
}
.help-wrap img {
  width: 100%;
}
.help-wrap table.feature-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border-radius: 8px;
}
.help-wrap table.feature-table,
.help-wrap .feature-table th,
.help-wrap .feature-table td {
  border: 1px solid #ccc;
}
.help-wrap .feature-table th,
.help-wrap .feature-table td {
  padding: 10px;
  text-align: left;
}
.help-wrap .feature-table th {
  background: #f0f0f0;
  font-weight: 600;
}
.help-wrap .feature-table td {
  text-align: center;
}
.help-wrap .feature-table td:first-child {
  text-align: left;
}
.help-wrap .highlight {
  background: #e8f4ff;
  padding: 10px;
  border-left: 4px solid #0056b3;
  margin: 10px 0;
}
.settings-wrap.card-wrap {
  position: relative;
}
.settings-wrap.card-wrap .dropsetting-label {
    position: absolute;
    top: 0;
    right: 15px;
    width: 260px;
}

.settings-wrap.card-wrap .p-dropdown {
    height: 35px;
    line-height: 35px;
}
.settings-wrap.card-wrap .dropsetting-label + .sortable-card {
  margin-top: 45px;
}
.inputfile-wrap .inputfile button.btn-close {
    zoom: 0.7;
}
@media (min-width: 1950px) {
  body {
    font-size: 18px;
    font-weight: 400;
  }
  body main nav {
    width: 320px;
  }
  body main #content {
    width: calc(100% - 320px);
  }
  nav .accordion-menu li {
    margin-bottom: 6px;
  }
  nav .accordion-menu li a {
    font-size: 18px;
  }
  nav .accordion-menu li a img {
    height: 28px;
  }
  nav .poweredby a {
    font-size: 16px;
  }
  nav .profile p {
    font-size: 16px;
  }
  nav .profile h6 {
    font-size: 20px;
  }
  body main #content header h1 {
    font-size: 25px;
  }
  h2 {
    font-size: 20px;
    font-weight: 500;
  }
  p {
    font-size: 18px;
    line-height: 24px;
  }
  .stud-acc-legend div {
    font-size: 16px;
  }
  .stud-acc-legend div:first-child span,
  .stud-acc-legend div:last-child span {
    height: 13px;
  }
  .btncard a h3,
  .appcard a h3,
  .widget-card .desc h3,
  .card-wrap .transactions-wrap li h6 {
    font-size: 18px;
  }
  .btncard a img {
    height: 30px;
  }
  .btn-link {
    font-size: 16px;
  }
  ul.course-list li .dtls h6,
  .sortable-card li .btm h2 {
    font-size: 18px;
  }
  ul.course-list li .dtls p,
  ul.courseinst li .desc label {
    font-size: 16px;
  }
  ul.courseinst li .desc p,
  .emailbot P,
  .snapshot-wrap .snapshot-card p {
    font-size: 18px;
  }
  .btn {
    font-size: 16px;
    font-weight: 500;
  }
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"],
  .form-group input[type="file"],
  .form-group input[type="date"],
  .form-group input[type="time"],
  .form-group input[type="number"],
  .form-group select {
    font-size: 16px;
  }
  .calendar .week-day span,
  .student_metrics .dtls .desc li h6,
  .acc-resource .card h2,
  .card-wrap .transactions-wrap li h3,
  .label-group p,
  .notificationwrap .notfy-card p,
  .tasks-list > li .desc {
    font-size: 18px;
  }
  .table-card table thead tr th,
  .table-card table tbody tr td,
  .acc-resource .card p,
  .btncard a p,
  .card-wrap .transactions-wrap li p,
  .label-group label,
  .notificationwrap .notfy-card .category,
  .notificationwrap .notfy-card .date {
    font-size: 16px;
  }
  .h-40 {
    height: 50px;
  }
  .grade-list-scroll {
    height: 275px;
  }
  .jobintro .fs-6,
  .notificationwrap .notfy-card h6 {
    font-size: 20px !important;
  }
  body main #content header .right-wrap .search input:focus {
    width: 700px;
  }
  .label-to > label,
  .emailform .formgroup label,
  .form-group label {
    font-size: 16px;
  }
  .profile-drop #quicklinkwrap .img-logout h6 {
    font-size: 20px;
    line-height: 22px;
  }
  .profile-drop #quicklinkwrap .img-logout span {
    font-size: 15px;
  }
  .class-faculty h3 {
    font-size: 18px;
  }
  .tasks-list > li .actions span {
    font-size: 14px;
  }
  .card-connect .desc h2 {
    font-size: 20px;
  }
  .card-connect .desc a {
    font-size: 18px;
  }
  .card-connect .btns button,
  .card-connect .btns a {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }
  .report-wrap.reports-mobile .acc-resource .col-lg-4 {
    width: 25%;
  }
  .report-wrap .reportimg,
  .report-wrap .reportimg img {
    height: 220px;
  }
  .gardedistribution #chart-container .p-chart {
    max-height: 300px;
  }
}
@media (min-width: 1899px) {
  .report-wrap .reportimg,
  .report-wrap .reportimg img {
    height: 160px;
  }
}
@media (min-width: 2020px) and (max-width: 2499px) {
  body main {
    zoom: 1;
  }
  body main.main-login {
    zoom: 1 !important;
  }
  .login-contents .content-center {
    zoom: 1.3;
  }
  .ReactModalPortal {
    zoom: 1.2;
  }
  .grade-list-scroll {
    height: 288px;
  }
}
@media (min-width: 2500px) and (max-width: 3799px) {
  body main {
    zoom: 1.25;
  }
  body main.main-login {
    zoom: 1 !important;
  }
  .login-contents .content-center {
    zoom: 1.5;
  }
  .ReactModalPortal {
    zoom: 1.4;
  }
  .stud-course-chart .p-chart {
    max-width: 350px;
  }
  .student_metrics .dtls .chartWrap-new .p-chart {
    max-height: 250px;
  }
  .academic-profile .chart .p-chart {
    max-height: 350px;
    padding: 0 30px;
  }
  .fresman-config .maintask-content,
  .fresman-config .subtask-content {
    height: calc(100vh - 700px);
    overflow: auto;
  }
  .grade-list-scroll {
    height: 288px;
  }
}
@media (min-width: 3800px) {
  body main {
    zoom: 1.6;
  }
  body main.main-login {
    zoom: 1 !important;
  }
  .login-contents .content-center {
    zoom: 2;
  }
  .ReactModalPortal {
    zoom: 1.8;
  }
  .stud-course-chart .p-chart {
    max-width: 360px;
  }
  .student_metrics .dtls .chartWrap-new .p-chart {
    max-height: 260px;
  }
  .academic-profile .chart .p-chart {
    height: 350px;
    max-width: 400px;
  }
  .fresman-config .maintask-content,
  .fresman-config .subtask-content {
    height: calc(100vh - 800px);
    overflow: auto;
  }
}
@media (max-width: 1499px) {
  .staff-training-list .training-card > .btn-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  body main #content header .right-wrap .search input:focus {
    width: 550px;
  }
  .gardedistribution .legend.Workload-legend .legend-item {
    margin-bottom: 10px;
    width: 50%;
  }
  .report-wrap .reportimg,
  .report-wrap .reportimg img {
    height: 100px;
  }
  .grade-list-scroll {
    height: 288px;
  }
  .studpro-mobile .academic-profile > .row > .col-lg-6:first-child > .card {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 1300px) {
  body main {
    padding: 18px;
  }
  body main nav {
    width: 260px;
  }
  body main #content {
    width: calc(100% - 260px);
    padding-left: 18px;
  }
  nav .accordion-menu li a {
    font-size: 14px;
  }
  nav .accordion-menu li a img {
    height: 20px;
  }
  nav .accordion-menu li a {
    gap: 10px;
  }
  h2 {
    font-size: 16px;
    font-weight: 500;
  }
  .studdash-mobile > .col-lg-8 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .studdash-mobile > .col-lg-4 {
    width: 50%;
    margin-bottom: 1rem;
  }
  body main #content header h1 {
    font-size: 20px;
  }
  .dash-title.col-lg-6 {
    width: 100%;
  }
  .btn-link {
    white-space: nowrap;
  }
  .admin-main > .row:last-child > .col-lg-8 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-grid-5 {
    flex: 0 0 auto;
    width: 33.33%;
  }
  .gardedistribution .legend {
    margin-top: 10px;
    margin-left: 10px;
  }
  .calendar .week-day span {
    font-weight: 400;
    white-space: nowrap;
  }
  .acc-resource .card {
    gap: 10px;
  }
  .grades-wrap .tabs button {
    font-size: 14px;
  }
  .dtls .desc {
    width: 130px;
  }
  .studcource-mobile > .col-lg-4 {
    width: 100%;
  }
  .studcource-mobile > .col-lg-4 > .row > .col-md-12 {
    width: 50%;
    margin: 0 !important;
  }
  .grades-wrap > .row > .col-lg-4 {
    width: 50%;
    margin-bottom: 1rem !important;
  }
  .jobs-card .top .desc h2 {
    font-size: 16px;
  }
  .btn {
    font-size: 12px;
  }
  body main #content header .right-wrap .search input:focus {
    width: 400px;
  }
  .grades-wrap .tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }
  .grades-wrap .tabs button {
    white-space: nowrap;
  }
  .broadcastwrap {
    position: absolute;
    right: 25px;
    top: 25px;
  }
  .admin-card {
    width: calc(33.33% - 13px);
  }
  .adminnav + .admincontent .d-flex > .admin-card {
    width: calc(50% - 12px);
  }
  .admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: calc(50% - 12px);
  }
  .academic-profile .card .p-chart {
    max-height: 125px;
  }
  .academic-profile .gauge-desc.gauge-position {
    bottom: 0;
  }
  .training-card .trainingdtls {
    flex-direction: column;
    align-items: flex-start;
  }
  .training-card .trainingdtls .desc {
    width: 100%;
  }
  .training-card .trainingdtls .img {
    min-width: 100px;
  }
  .calendar #event-container {
    grid-template-columns: repeat(4, 1fr);
  }
  .freshman-wrap .task-wrap.card-wrap {
    margin-left: -18px;
    padding: 18px;
  }
  .freshman-wrap .task-wrap.card-wrap .task-list li {
    margin-bottom: 10px;
  }
  .freshman-wrap .task-wrap.card-wrap .task-list li .top .leftwrap span {
    width: 35px;
    min-width: 35px;
    height: 35px;
    min-height: 35px;
  }
}
@media (max-width: 1100px) {
  .studacct-mobile > .col-lg-6 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .studacct-mobile > .col-lg-6 > .row > .col-lg-6 {
    width: 50%;
    margin-bottom: 1rem;
  }
  .studacct-mobile .snapshot-wrap .col-lg-3 {
    width: 50%;
  }
  .studpro-mobile > .col-lg-8,
  .studpro-mobile > .col-lg-4 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .studpro-mobile > .col-lg-4 > .row > .col-lg-12 {
    width: 50%;
    margin-bottom: 1rem;
  }
  .jobintro .col-lg-3,
  .jobintro .col-lg-9 {
    width: 50%;
  }
  .facldash-mobile + .faculty-wrap > .row > .col-lg-4 {
    width: 50%;
  }
  .admin-card {
    width: calc(50% - 13px);
  }
  .adminnav + .admincontent .d-flex > .admin-card {
    width: calc(100% - 12px);
  }
  .admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable {
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    min-width: calc(100% - 12px);
  }
  body main #content header .right-wrap .search input,
  body main #content header .right-wrap .search input:focus {
    width: 280px;
  }
  .calendar #event-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .ReactModalPortal .react-modal-overlay .modal-body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .freshman-wrap .col-md-3,
  .freshman-wrap .col-md-9 {
    flex: 0 0 auto;
    width: 100%;
  }
  .freshman-wrap .task-wrap.card-wrap {
    border-radius: 24px;
    margin-left: 0;
    margin-bottom: 16px;
  }
  .task-wrap.card-wrap ul.task-list {
    height: 250px;
    overflow: auto;
  }
  .freshman-wrap .taskdtl-wrap {
    margin-top: 16px;
  }
}
@media (max-width: 1024px) {
  body main #content header h1 {
    display: none;
  }
  body main #content header {
    margin-bottom: 20px;
  }
}
@media (max-width: 991px) {
  body main #content header {
    margin-left: 60px;
  }
  body main #content header .burger-menu {
    position: absolute;
    z-index: 99;
    color: #fff;
    top: 15px;
    left: 28px;
    font-size: 30px;
    padding: 0px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  body main #content header .burger-menu span {
    width: 27px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
  }
  body main nav {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: -280px;
    z-index: 999;
    height: 100vh;
    border-radius: 0;
    overflow: auto;
    transition: all 0.3s linear;
  }
  body main nav.active {
    left: 0;
    opacity: 1;
    visibility: visible;
  }
  body main nav + .dackdrop-nav {
    content: "";
    width: 100vw;
    height: 100vh;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: fixed;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s linear;
  }
  body main nav.active + .dackdrop-nav {
    opacity: 1;
    visibility: visible;
  }
  body main nav > div,
  body main nav > ul {
    position: relative;
    z-index: 9;
  }
  body main #content {
    width: 100%;
    padding-left: 0;
  }
  .gauge-desc {
    margin-top: -80px !important;
  }
  .resourcedtls .col-lg-3 img {
    width: auto !important;
    height: 200px;
    margin-bottom: 15px;
  }
  ul.course-list.resouce-list,
  ul.course-list.apps-list {
    max-height: 225px;
    min-height: auto;
    height: auto;
  }
  .studcource-mobile .card-wrap .transactions-scroll {
    max-height: 220px;
  }
  .studcource-mobile ul.course-list {
    min-height: unset;
    overflow: hidden;
  }
  .settings-mobile .col-md-6 {
    width: 100%;
  }
  .report-wrap.reports-mobile .acc-resource .col-lg-4 {
    width: 50%;
    margin-bottom: 1rem !important;
  }
  .comm-mobile .col-grid-5,
  .stafconn-mobile .row .col-grid-5 {
    width: 50%;
  }
  .admin-main .admin-tabs {
    max-width: 100%;
    overflow: auto;
    padding-bottom: 10px;
  }
  .staftrng-mobile .col-lg-4 {
    margin-bottom: 1rem;
  }
  .resource-mobile .resourcedtls .col-lg-3 {
    display: none;
  }
  .resource-mobile .resourcedtls .col-lg-9 img.r-none,
  #studentapps .appsdtls .col-lg-12 img,
  .studcource-mobile .coursetabs .adaptheight .col-lg-12 p img {
    display: inline-block;
    float: left;
    margin-right: 15px;
    width: 40%;
    max-width: 200px;
    height: auto !important;
  }
  .studcource-mobile .coursetabs .adaptheight .col-lg-3 img {
    display: none;
  }
  .freshman-wrap .taskdtl-wrap .gridlines span:nth-child(5) {
    border: 1px dashed rgba(0, 0, 0, 0.1);
  }
  .freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li {
    width: 100%;
    margin-bottom: 15px;
    transform: none !important;
  }
  .freshman-wrap .taskdtl-wrap .taskdtls-list > h2 {
    margin-bottom: 40px;
  }
  .freshman-wrap .taskdtl-wrap .taskdtls-list .subtask {
    margin-top: 0px;
  }
  .freshman-wrap .col-md-3 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .freshman-wrap .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .ReactModalPortal .react-modal-overlay .modal-footer {
    padding-bottom: 50px;
    margin-top: 10px;
    height: auto;
  }
}
@media (max-width: 768px) {
  body main {
    padding: 0 28px;
  }
  body main #content header {
    margin-left: 0px;
  }
  body main #content header .right-wrap {
    margin-left: auto;
    margin-top: 15px;
  }
  body main {
    padding: 0 28px;
  }
  body main #content header .right-wrap {
    margin-left: auto;
    margin-top: 15px;
    gap: 0;
    width: 100%;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-end;
  }
  body main #content header .right-wrap .search input {
    width: 100%;
    max-width: 100%;
  }
  body main #content header .right-wrap .search {
    position: relative;
    min-width: unset !important;
    width: 100%;
  }
  body main #content header .right-wrap .search input,
  body main #content header .right-wrap .search input:focus {
    width: 100%;
  }
  body main #content header {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 25px;
    margin-bottom: 10px;
  }
  .studdash-mobile > .col-lg-4 {
    width: 100%;
  }
  .course-wrap .tabs {
    max-width: 100%;
    padding-bottom: 10px;
  }
  .grades-wrap .tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }
  .course-wrap .tabs button,
  .grades-wrap .tabs button {
    white-space: nowrap;
  }
  .btn {
    font-size: 14px;
  }
  body main #content header .header-notify .transactions-wrap li .btn {
    padding: 0;
  }
  .studcource-mobile > .col-lg-4 > .row > .col-md-12 {
    width: 100%;
    margin-bottom: 1rem !important;
  }
  .grades-wrap > .row > .col-lg-4 {
    width: 100%;
    margin-bottom: 1rem !important;
  }
  .studacct-mobile .snapshot-wrap .col-lg-3 {
    width: 100%;
  }
  .card-wrap .transactions-wrap li h6 {
    white-space: nowrap;
  }
  .studacct-mobile > .col-lg-6 > .row > .col-lg-6 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .studpro-mobile > .col-lg-4 > .row > .col-lg-12 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .jobintro .col-lg-3,
  .jobintro .col-lg-9 {
    width: 100%;
  }
  body main #content .title {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .feedbackwrap .title .w-50 {
    width: 100% !important;
    gap: 15px;
  }
  .feedbackwrap .title .justify-content-end {
    justify-content: flex-end !important;
    margin-left: auto;
  }
  .label-to .stude-details .desc p span {
    display: block;
  }
  .label-to .stude-details {
    height: 70px;
  }
  .card.emailform .label-to:first-child label,
  .feedbackwrap .emailform .label-to:first-child label,
  .modal-body .emailform .label-to:first-child label {
    height: 70px;
    line-height: 45px;
  }
  .profilecard .profile-desc {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 15px;
  }
  .report-wrap.reports-mobile .acc-resource .col-lg-4 {
    width: 100%;
  }
  .comm-mobile .col-grid-5,
  .stafconn-mobile .row .col-grid-5 {
    width: 100%;
  }
  .stafdash-mobile + .row .stud-dash-apps .col-lg-4,
  .resource-mobile .col-lg-12,
  .staftrng-mobile .col-lg-4,
  .stafreport-mobile .col-lg-12 {
    margin-bottom: 1rem;
  }
  .report-wrap.stafreport-mobile .acc-resource .col-lg-4 {
    margin-bottom: 10px;
  }
  .admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: calc(50% - 12px);
  }
  .adminnav + .admincontent .d-flex > .admin-card {
    width: calc(50% - 12px);
  }
  .admin-main .admin-wrap .adminnav {
    min-width: 140px;
  }
  .ReactModalPortal .react-modal-overlay .react-modal-content {
    width: 100%;
    padding: 10px;
    margin: 0px 0;
  }
  body main #content .admincontent .title {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }
  .facldash-mobile + .faculty-wrap > .row > .col-lg-4 {
    width: 100%;
  }
  .broadcastwrap {
    position: absolute;
    right: 25px;
    top: 58px;
  }
  .admin-main .admin-wrap {
    flex-direction: column;
  }
  .admin-main .admin-wrap .adminnav {
    background-color: transparent;
    border-radius: 0;
  }
  .admin-main .admin-wrap .adminnav ul {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: auto;
    gap: 10px;
    padding-bottom: 6px;
  }
  .admin-main .admin-wrap .adminnav ul li {
    border-radius: 50px;
  }
  .admin-main .admin-wrap .adminnav ul li a {
    background-color: #fff;
    border-radius: 50px !important;
    white-space: nowrap;
  }
  .admin-main .admin-tabs {
    display: none;
  }
  .admin-main .admin-wrap {
    gap: 15px;
  }
  .admin-main .admin-wrap .admincontent {
    width: 100%;
    overflow: auto;
    height: calc(100vh - 250px);
  }
  .report-all-card .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .report-all-card .card .img {
    height: 200px;
    overflow: hidden;
  }
  .calendar #event-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .freshman-wrap .col-md-3,
  .freshman-wrap .col-md-9 {
    flex: 0 0 auto;
    width: 100%;
  }
  .freshman-wrap .task-wrap.card-wrap {
    border-radius: 24px;
    margin-left: 0;
    margin-bottom: 16px;
  }
  .task-wrap.card-wrap ul.task-list {
    height: 250px;
    overflow: auto;
  }
  .freshman-wrap .taskdtl-wrap {
    margin-top: 16px;
  }
  .admin-card-configuration {
    width: 100%;
  }
  .admin-card-configuration .top {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 5px;
  }
  .admin-card-configuration .top .btn-flex-configuration {
    margin-left: auto;
    width: 100%;
  }
  .fresman-config {
    flex-direction: column;
  }
  .fresman-config > div {
    width: 100%;
  }
  .fresman-config .maintask-content .titlewrap,
  .fresman-config .subtask-content .titlewrap {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
  }
  .fresman-config .maintask-content .titlewrap .w-multiselect,
  .fresman-config .subtask-content .titlewrap .w-100 {
    width: 100% !important;
  }
  .coursetabs .col-lg-8 .adaptheight .col-lg-9 > .d-flex {
    flex-direction: column;
    gap: 15px;
  }
  .coursetabs .col-lg-8 .adaptheight .col-lg-9 .btn.btn-primary {
    display: block;
    width: 100%;
  }
  .course-wrap p {
    text-align: justify;
  }
  .desktop-stud-resouces {
    display: none;
  }
  .studacct-mobile .mobile-stud-resouces.d-none {
    display: block !important;
  }
  .desktop-stud-resouces + .col-lg-6.mt-3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .snapshot-wrap .snapshot-card h5 {
    font-size: 24px;
    margin-bottom: 0;
  }
  .sortable-card li .btm h2 {
    width: calc(100% - 40px);
  }
  .course-wrap .course-tab-desktop,
  .coursetabs .course-tab-desktop {
    display: none;
  }
  .course-wrap .course-tab-mobile.d-none,
  .coursetabs .course-tab-mobile.d-none {
    display: block !important;
  }
  .course-tab-mobile label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
  }
}
@media (max-width: 550px) {
  body main {
    padding: 0 18px 18px 18px;
  }
  body p,
  body span {
    text-align: justify;
  }
  .search.w-25 {
    width: 100% !important;
  }
  body main #content header .burger-menu {
    left: 18px;
  }
  body main #content header .header-notify {
    right: -120px;
    width: 300px;
  }
  body main #content header .header-notify .w-100 > div {
    flex-direction: column-reverse;
    align-items: flex-start !important;
  }
  body main #content header .header-notify .w-100 > div h6 {
    white-space: normal;
  }
  .admin-main .admin-wrap .admincontent ul.d-flex > div.grabbable {
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    min-width: calc(100% - 12px);
  }
  .adminnav + .admincontent .d-flex > .admin-card {
    width: calc(100% - 12px);
  }
  .title > .form-group {
    width: 100%;
  }
  body main #content .admincontent .title {
    flex-direction: column;
  }
  body main #content .admincontent .title a.btn.btn-primary {
    height: 35px;
    margin-left: auto;
  }
  .admin-card {
    width: 100%;
  }
  .card-wrap .transactions-wrap.earlyalerts li .w-100 > .d-flex {
    flex-direction: column-reverse;
    align-items: flex-start !important;
  }
  .card-wrap .transactions-wrap.earlyalerts li .w-100 > .d-flex h6 {
    white-space: normal;
  }
  .sortable-card li .btm {
    flex-direction: column;
    align-items: flex-start;
  }
  .sortable-card li .btm h3 {
    order: 3;
  }
  .sortable-card li .btm .ms-auto {
    order: 1;
  }
  .resourcedtls .col-lg-3 img {
    width: 100% !important;
    height: auto;
  }
  .calendar #event-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .freshman-wrap .taskdtl-wrap .taskdtls-list .subtask li .inner-card {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
@media (max-width: 450px) {
  .dtls.gardedistribution {
    flex-direction: column-reverse !important;
  }
}
/* Safari-only styles */
@media only screen and (min-resolution: 192dpi) {
  @supports (-webkit-touch-callout: none) {
    .ReactModalPortal .react-modal-overlay .react-modal-content {
      margin-bottom: 60px;
    }
  }
}
@supports (-webkit-touch-callout: none) {
  nav .poweredby {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
  nav .poweredby {
    padding-bottom: 60px;
  }
}
@media screen and (-webkit-touch-callout: none) {
  body main #content header .burger-menu {
    line-height: 35px;
  }
} 



/* Chat Bot */
.chatbot .intro .message-user {
  margin:  0px;
    background-color: #e6e9f0;
    padding: 10px 12px;
    border-radius: 6px;
    white-space: pre-line;
    text-align: left;
    max-width: 80%;
    margin-left: auto;
}
.chatbot .intro .message-bot {
  margin: 0px;
    background-color: #efeadf;
    padding: 10px 12px;
    border-radius: 6px;
    white-space: pre-line;
    text-align: left;
    max-width: 76%;
    margin-left: 50px;
    position: relative;
    width: fit-content;
}
.chatbot .intro .message-bot::before {
  content: '';
  width: 40px;
  height: 40px;
  display: block;
  background: #8e7d52 url(../images/chatbot-wh.svg) no-repeat center center;
  background-size: auto 24px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -50px;
  z-index: 1;
}
.bot-suggesition {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  padding: 0;
  margin: 2px 0 0 0;
  background-color: white;
  border-radius: 10px;
  overflow: auto;
  max-height: 300px;
}
.limit-excedeed {
  margin: 10px auto;
  color: red;
  padding: 7px;
  border-radius: 12px;
  height: 22px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  text-align: center;
}
.dropsetting-label > label {
  margin-bottom: 5px;
}
.mw-250 .p-dropdown {
  min-width: 250px !important;
}