/*
Template: Server360 - Responsive Bootstrap 4 Admin Dashboard Template
Author: iqonicthemes.in
Design and Developed by: iqonicthemes.in
NOTE: This file contains the styling for responsive Template.
*/

/*================================================
[  Table of contents  ]
================================================

:: General
:: Badge
:: Media Support
:: Best Sellers
:: Profile Avatar
:: Countdown
:: Progressbar
:: Dropdown Menu
:: Badge Img Tag
:: List Style 1
:: Icon Box
:: Tasks Card
:: Sign In
:: Dash Hover
:: Waves Effect
:: Sidebar
:: Sidebar Menu
:: Top Menu
:: Content Page
:: Error Page
:: OWL Carousel
:: Timeline
:: Team
:: User Add Block
:: Email list
:: Booking list
:: Chart
:: Material Card Style
:: Circle Progressbar
:: Tikit Booking List
:: Right Sidebar Menu
:: FAQ
:: Pricing Table
:: Table
:: Animation Card
:: Footer
:: Map Profile
:: Mail Inbox
:: Slick Arrow
:: Calender
:: From Wizard
:: Chat
:: Profile
:: Todo
:: Privacy Policy
:: User List
:: Add User

======================================
[ End table content ]
======================================*/

/*--------------------------------------------------------------------
                            General
---------------------------------------------------------------------*/
*::-moz-selection {
  background: var(--iq-primary);
  color: var(--iq-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--iq-primary);
  color: var(--iq-white);
  text-shadow: none;
}

::selection {
  background: var(--iq-primary);
  color: var(--iq-white);
  text-shadow: none;
}

/* Definition Lists */
dl dd {
  margin-bottom: 15px;
}

dl dd:last-child {
  margin-bottom: 0px;
}

/* Table */
th {}

a:hover {
  text-decoration: none;
}

.dropdown-item {
  font-size: 14px;
}

.dropdown-menu {
  border-radius: 15px;
}

.tbl-server-info.table tr td:first-child,
.tbl-server-info.table tr:first-child th {
  padding-left: 0;
}

.tbl-server-info.table tr td:last-child,
.tbl-server-info.table tr:last-child th {
  padding-right: 0;
}

/* scroller */
.scroller {
  overflow-y: auto;
  scrollbar-color: var(--iq-primary) var(--iq-light-primary);
  scrollbar-width: thin;
}

.scroller::-webkit-scrollbar-thumb {
  background-color: var(--iq-primary);
}

.scroller::-webkit-scrollbar-track {
  background-color: var(--iq-light-primary);
}

#sidebar-scrollbar {
  overflow-y: auto;
  scrollbar-color: var(--iq-primary) var(--iq-light-primary);
  scrollbar-width: thin;
}

#sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--iq-primary);
}

#sidebar-scrollbar::-webkit-scrollbar-track {
  background-color: var(--iq-light-primary);
}

/* Form */
#sidebar-scrollbar {
  height: 100%;
}

/*---------------------------------------------------------------------
                                  Badge
-----------------------------------------------------------------------*/
.badge {
  padding: .3em .6em;
  line-height: 1.3;
  text-transform: capitalize;
}

.breadcrumb.bg-primary .breadcrumb-item+.breadcrumb-item::before {
  color: var(--iq-white);
}

/*---------------------------------------------------------------------
                               Media Support
-----------------------------------------------------------------------*/
.media-support {
  display: inline-block;
  width: 100%;
}

.media-support-user-img img {
  height: 60px;
}

.media-support-header {
  display: flex;
  align-items: flex-start;
}

.media-support-info {
  flex: 1;
}

.projects-media img {
  height: 60px;
}

.iq-media-group .iq-media {
  margin-left: -20px;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.iq-media-group .iq-media:hover {
  z-index: 9;
}

.iq-media-group .iq-media img,
.iq-media-group .iq-media.border {
  border: 2px solid var(--iq-border-light);
}

.iq-media-group .iq-media:first-child {
  margin-left: 0;
}

.iq-media {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.iq-media:hover {
  text-decoration: none;
}

.media-pl {
  text-align: center;
}

/*---------------------------------------------------------------------
                                  Best Sellers
-----------------------------------------------------------------------*/
.media-sellers {
  display: flex;
  align-items: flex-start;
}

.media-sellers-media-info {
  flex: 1;
}

.media-sellers-img img {
  height: 80px;
}

.iq-card .list-star li {
  margin-right: 0;
}

/*---------------------------------------------------------------------
                                  Profile-Avatar
-----------------------------------------------------------------------*/
.iq-profile-avatar {
  position: relative;
}

.iq-profile-avatar:before {
  content: '';
  position: absolute;
  border-radius: 100%;
  z-index: 1;
  border: 2px solid var(--iq-white);
  background-color: var(--iq-body-text);
  height: 16px;
  width: 16px;
  right: 0;
  bottom: -3px;
}

.iq-profile-avatar.status-online:before {
  background-color: var(--iq-success);
}

.iq-profile-avatar.status-away:before {
  background-color: var(--iq-warning);
}

.avatar-upload {
  position: relative;
  max-width: 205px;
  margin: 15px 0 0;
}

.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input+label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: var(--iq-white);
  border: 1px solid var(--iq-body-text);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
  background: var(--iq-border-light);
  border-color: var(--iq-primary);
}

.avatar-upload .avatar-edit input+label:after {
  content: "\f040";
  font-family: "FontAwesome";
  color: var(--iq-body-text);
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
  border-radius: 100%;
  border: 6px solid var(--iq-border-light);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.avatar-upload .avatar-preview>div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*---------------------------------------------------------------------
                                  Countdown
-----------------------------------------------------------------------*/
.iq-comingsoon {
  margin-top: 80px;
}

.countdown {
  margin: 60px 0 0;
  padding: 0;
}

/*.countdown li { margin: 0 30px 0 0; padding: 45px 0; list-style: none; width: 22.8%; display: inline-block; text-align: center; line-height: normal; background: var(--iq-white); float: left; color: var(--iq-body-text); border-radius: 15px; }*/
.countdown li span {
  font-size: 60px;
  display: inline-block;
  width: 100%;
  color: var(--iq-primary);
}

.iq-comingsoon-form {
  position: relative;
}

.iq-comingsoon-form button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 9px 30px;
}

/*---------------------------------------------------------------------
                                  Progressbar
-----------------------------------------------------------------------*/
.iq-progress-bar {
  background: var(--iq-light);
  box-shadow: 0 0 0;
  height: 6px;
  margin: 0;
  position: relative;
  width: 100%;
  border-radius: 15px;
}

.iq-progress-bar>span {
  background: var(--iq-primary) none repeat scroll 0 0;
  display: block;
  height: 100%;
  width: 0;
  border-radius: 15px;
}

/*---------------------------------------------------------------------
                             Dropdown Menu
-----------------------------------------------------------------------*/
.iq-card-header .dropdown-bg {
  background: var(--iq-light-primary);
  padding: 8px 15px;
  color: var(--iq-primary);
  border-radius: 15px;
}

.iq-card-header .dropdown-menu {
  margin: 0;
  padding: 0;
  font-size: 13px;
  top: 20px !important;
  border-radius: 15px;
  border-color: var(--iq-border-light);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.iq-card-header .dropdown-menu .dropdown-item {
  padding: 8px 15px;
  color: var(--iq-body-text);
}

.iq-card-header .dropdown-menu .dropdown-item i {
  font-size: 14px;
  vertical-align: middle;
}

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: var(--iq-primary);
}

/*--------------*/
.iq-card-header select.form-control {
  background: var(--iq-border-light);
  border: none;
  font-size: 14px;
  margin-right: 15px;
}

.iq-card-header select.form-control.width-100 {
  width: 180px;
}

/*---------------------------------------------------------------------
                             Badge Img Tag
-----------------------------------------------------------------------*/
.badge-img-tag {
  position: absolute;
  top: 15px;
  left: 15px;
}

/*---------------------------------------------------------------------
                             list Style 1
-----------------------------------------------------------------------*/
.iq-list-style-1 {
  margin: 0;
  padding: 0;
}

.iq-list-style-1 li {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin-right: 15px;
}

.iq-list-style-1 li:last-child {
  margin-right: 0;
}

.iq-list-style-1 li a {
  color: var(--iq-body-text);
}

.iq-list-style-1 li a i {
  color: var(--iq-body-text);
  margin-right: 5px;
}

.iq-list-style-1 li a:hover,
.iq-list-style-1 li a:focus {
  text-decoration: none;
  color: var(--iq-primary);
}

.iq-list-style-1.text-white li a,
.iq-list-style-1.text-white li a i {
  color: var(--iq-white);
}

.list-inline.text-white li a {
  color: var(--iq-white);
}

.list-inline.text-white li a:hover {
  opacity: 0.6;
  text-decoration: none;
}

/*---------------------------------------------------------------------
                             Icon Box
-----------------------------------------------------------------------*/
.iq-icon-box {
  height: 64px;
  width: 64px;
  line-height: 64px;
  text-align: center;
  margin-right: 10px;
  font-size: 26px;
  text-decoration: none;
}

.iq-icon-box:hover {
  text-decoration: none;
}

/*---------------------------------------------------------------------
                             Tasks Card
-----------------------------------------------------------------------*/
.tasks-card {
  padding: 0 0 15px 0;
  border-bottom: 1px solid var(--iq-border-light);
  margin: 0 0 15px 0;
}

.tasks-card .close {
  font-size: 16px;
}

.tasks-card:last-child {
  border: none;
  margin: 0;
  padding: 0;
}

/*---------------------------------------------------------------------
                               Sign In
-----------------------------------------------------------------------*/
#sign-in-page-box {
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  margin: 0 auto;
  max-width: none;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-box-shadow: none;
}

.sign-in-detail {
  color: var(--iq-white);
}

.sign-in-page {
  background: #eef3f8;
  color: #162033;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: auto;
  position: relative;
  padding: 0;
}

.sign-in-page .height-self-center {
  height: 100vh;
  border-radius: 15px;
}

.sign-in-page-data {
  border-radius: 0;
  width: 100%;
}

.sign-in-detail {
  padding: 50px 80px;
}

.sign-in-logo {
  display: inline-block;
  width: auto;
}

.sign-in-logo img {
  max-height: 72px;
  width: auto;
}

.sign-in-from {
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.12);
  max-width: 440px;
  padding: 46px;
  position: relative;
}

.sign-in-mobile-logo {
  display: none;
}

.sign-in-from h1 {
  color: #121826;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 10px !important;
}

.sign-in-subtitle {
  color: #667085;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.auth-back-link {
  align-items: center;
  color: #4f35b9;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  margin-bottom: 18px;
}

.auth-back-link:hover {
  color: #3f2a98;
}

.sign-in-from label {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
}

.sign-in-from .form-group {
  margin-bottom: 20px;
}

.sign-in-from .form-control {
  background: #f9fbfd;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  color: #162033;
  font-size: 15px;
  min-height: 52px;
  padding: 12px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sign-in-from .form-control:focus {
  background: #ffffff;
  border-color: #4f35b9;
  box-shadow: 0 0 0 4px rgba(79, 53, 185, 0.12);
}

.login-password-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}

.login-password-row label {
  margin-bottom: 0;
}

.login-password-row a,
.sign-in-from .float-right {
  color: #4f35b9;
  font-size: 13px;
  font-weight: 700;
}

.sign-info {
  padding-top: 22px;
}

.login-action-row { align-items: center; display: flex; flex-wrap: nowrap; gap: 12px; }
.login-action-row .btn { align-items: center; display: inline-flex; flex: 0 1 187px; height: 52px; justify-content: center; line-height: 1; margin-bottom: 0 !important; min-width: 0; padding: 0 18px; }
.login-signup-btn { background: #ffffff; border: 1px solid #d8e0ea; border-radius: 8px; color: #4f35b9; font-weight: 700; }
.login-signup-btn:hover,.login-signup-btn:focus { background: #f4f1ff; border-color: #c9bef8; color: #4f35b9; }
@media(max-width:575px){.login-action-row{flex-wrap:wrap}.login-action-row .btn{flex:1 1 100%;}}

.error {
  background-color: #fff1f0;
  border: 1px solid #ffccc7;
  border-radius: 8px;
  color: #a8071a;
  padding: 11px 13px;
}

.auth-message {
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
}

.auth-message.is-success {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}

.auth-message.is-error {
  background: #fff1f0;
  border: 1px solid #ffccc7;
  color: #a8071a;
}

.mfa-user-pill {
  align-items: center;
  background: #f1edff;
  border: 1px solid #ded6ff;
  border-radius: 8px;
  color: #4f35b9;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  margin-bottom: 20px;
  padding: 11px 13px;
}

.mfa-user-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mfa-code-input {
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
}

.signup-page { align-items: center; background: #edf5ff; min-height: 100vh; overflow: hidden; padding: 54px 18px 28px; position: relative; }
.signup-page::before { background: rgba(99, 71, 206, .08); border-radius: 50%; content: ""; height: 330px; left: -120px; position: absolute; top: 130px; width: 330px; }
.signup-page::after { background: rgba(37, 99, 235, .08); border-radius: 50%; bottom: -150px; content: ""; height: 360px; position: absolute; right: 12%; width: 360px; }
.signup-topbar { align-items: center; display: flex; justify-content: space-between; left: 22px; position: absolute; right: 22px; top: 16px; z-index: 2; }
.signup-brand img { max-height: 26px; width: auto; }
.signup-login-btn { background: #5436cf; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; padding: 9px 16px; }
.signup-login-btn:hover { background: #4327b0; color: #fff; }
.signup-decoration { color: #111827; pointer-events: none; position: absolute; z-index: 1; }
.signup-decoration i { display: block; line-height: 1; }
.signup-decoration-left { left: 9%; top: 26%; }
.signup-decoration-left i:first-child { color: #5436cf; font-size: 76px; transform: rotate(-4deg); }
.signup-decoration-left i:nth-child(2) { color: #111827; font-size: 54px; margin-left: 70px; margin-top: 22px; transform: rotate(20deg); }
.signup-decoration-left span { background: #ff5d73; border-radius: 50%; display: block; height: 10px; margin-left: 116px; margin-top: -80px; width: 10px; }
.signup-decoration-right { right: 12%; top: 22%; }
.signup-decoration-right i:first-child { font-size: 60px; transform: rotate(-13deg); }
.signup-decoration-right i:nth-child(2) { color: #5436cf; font-size: 48px; margin-left: 36px; margin-top: 190px; transform: rotate(12deg); }
.signup-decoration-mascot { bottom: 18%; filter: drop-shadow(0 18px 24px rgba(36,41,70,.16)); max-width: 145px; pointer-events: none; position: absolute; right: 17%; z-index: 1; }
.signup-page .signup-page-box { background: transparent; box-shadow: none; min-height: 0; max-width: 720px; position: relative; width: 100%; z-index: 2; }
.signup-page .signup-container { border: 1px solid rgba(226,232,240,.9); border-radius: 14px; box-shadow: 0 18px 45px rgba(36,41,70,.12); min-height: 0; overflow: hidden; position: static; width: 100%; }
.signup-page .sign-in-page-data { min-height: 0; padding: 28px 34px; }
.signup-page .sign-in-from { background: transparent; border: 0; box-shadow: none; max-width: none; padding: 0; }
.signup-page h1 { align-items: center; color: #111827; display: flex; font-size: 25px; font-weight: 700; gap: 7px; justify-content: center; line-height: 1.1; margin-bottom: 8px !important; text-align: center; }
.signup-page h1 i { color: #5436cf; font-size: 22px; }
.signup-page .sign-in-subtitle { color: #687386; font-size: 12px; line-height: 1.45; margin: 0 auto 14px; max-width: 460px; text-align: center; }
.signup-social-panel { align-items: center; background: transparent; border: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 0; }
.signup-social-panel > span { align-items: center; color: #8992a2; display: flex; font-size: 11px; font-weight: 600; gap: 10px; justify-content: center; width: 100%; }
.signup-social-panel > span::before,.signup-social-panel > span::after { background: #e7ebf2; content: ""; flex: 1; height: 1px; }
.signup-social-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signup-social-panel .signup-social-grid { width: 100%; }
.signup-social-btn { align-items: center; background: #fff; border: 1px solid #e4e7ed; border-radius: 18px; color: #303746; display: flex; font-size: 11px; font-weight: 600; gap: 6px; justify-content: center; min-height: 34px; padding: 7px 10px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.signup-social-btn i { color: #5436cf; font-size: 18px; line-height: 1; }
.signup-social-btn:hover { border-color: #c9bef8; box-shadow: 0 8px 22px rgba(84,54,207,.09); color: #5436cf; transform: translateY(-1px); }
.signup-verified-card { align-items: center; background: #f5f2ff; border: 1px solid #e3dcff; border-radius: 12px; display: grid; gap: 11px; grid-template-columns: 34px minmax(0,1fr) 28px; margin-top: 12px; padding: 10px 12px; }
.signup-verified-card > i { align-items: center; background: #fff; border-radius: 9px; color: #5436cf; display: flex; font-size: 19px; height: 34px; justify-content: center; width: 34px; }
.signup-verified-card strong,.signup-verified-card span { display: block; min-width: 0; }
.signup-verified-card strong { color: #303746; font-size: 13px; font-weight: 600; }
.signup-verified-card span { color: #687386; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signup-verified-card a { align-items: center; color: #7b8494; display: flex; font-size: 18px; justify-content: center; }
.signup-form { margin-top: 12px; }
.signup-form-heading { display: none; }
.signup-form .profile-form-grid { gap: 11px 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.signup-form .profile-form-grid label { margin: 0; }
.signup-form .profile-form-grid label > span { color: #566074; display: block; font-size: 10px; font-weight: 600; margin-bottom: 4px; }
.signup-form .form-control { border-radius: 8px; font-size: 12px; min-height: 37px; }
.signup-form .form-control[readonly] { background: #f5f6f9; color: #687386; }
.signup-form .btn-primary { align-items: center; display: inline-flex; gap: 7px; justify-content: center; min-height: 40px; min-width: 260px; }
.signup-checkbox-field { align-items: center; background: #f8f9fb; border: 1px solid #e4e7ed; border-radius: 9px; cursor: pointer; display: grid; gap: 10px; grid-template-columns: minmax(0,1fr) 38px; margin: 0; min-height: 43px; padding: 9px 12px; }
.signup-checkbox-field > span { color: #566074; font-size: 11px; font-weight: 600; margin: 0; }
.signup-checkbox-field input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.signup-checkbox-field i { background: #dfe3e9; border-radius: 20px; height: 22px; position: relative; transition: .2s; width: 38px; }
.signup-checkbox-field i::after { background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.18); content: ""; height: 16px; left: 3px; position: absolute; top: 3px; transition: .2s; width: 16px; }
.signup-checkbox-field input:checked + i { background: #5436cf; }
.signup-checkbox-field input:checked + i::after { transform: translateX(16px); }
.signup-otp-card { align-items: center; border-top: 1px solid #eceef3; display: flex; flex-direction: column; margin-top: 18px; padding-top: 18px; text-align: center; }
.signup-otp-icon { align-items: center; background: #f4f1ff; border-radius: 12px; color: #5436cf; display: flex; font-size: 24px; height: 48px; justify-content: center; margin-bottom: 12px; width: 48px; }
.signup-otp-card h2 { color: #25293b; font-size: 22px; line-height: 1.15; margin: 0 0 6px; }
.signup-otp-card p { color: #687386; font-size: 13px; line-height: 1.45; margin: 0 0 16px; max-width: 430px; }
.signup-otp-card label { max-width: 280px; text-align: left; width: 100%; }
.signup-otp-card label span { color: #566074; display: block; font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.signup-otp-input { font-size: 22px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.signup-secondary-link { color: #5436cf; display: inline-block; font-size: 13px; margin-top: 12px; }
.signup-bottom-link { color: #687386; display: block; font-size: 12px; line-height: 1.5; margin-top: 13px; text-align: center; }
.signup-bottom-link a { color: #5436cf; font-weight: 700; }
@media(max-width:991px){.signup-page{overflow:auto;padding:64px 14px 22px}.signup-page .signup-page-box{max-width:430px}.signup-page .sign-in-page-data{padding:22px 20px}.signup-page h1{font-size:24px}.signup-decoration,.signup-decoration-mascot{display:none}.signup-form .profile-form-grid,.signup-social-grid{grid-template-columns:1fr}.signup-form .btn-primary{width:100%}}

.iq-social-media {
  margin: 0;
  padding: 0;
  float: right;
}

.iq-social-media li {
  list-style: none;
  float: left;
  margin-right: 10px;
}

.iq-social-media li:last-child {
  margin-right: 0;
}

.iq-social-media li a {
  height: 30px;
  width: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  display: inline-block;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background: var(--iq-light-primary);
  color: var(--iq-primary) !important;
}

.iq-social-media li a:hover {
  text-decoration: none;
}

.sign-in-page .btn {
  border-radius: 8px;
  font-weight: 700;
  padding: 12px 30px;
}

.sign-in-page .btn-primary {
  background: #4f35b9;
  border-color: #4f35b9;
  box-shadow: 0 12px 26px rgba(79, 53, 185, 0.24);
  min-width: 150px;
}

.sign-in-page .btn-primary:hover,
.sign-in-page .btn-primary:focus {
  background: #3f2a98;
  border-color: #3f2a98;
}

/*--------------------------*/
.social-container {
  margin: 20px 0;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.overlay {
  background: linear-gradient(135deg, #4f35b9 0%, #6f4be8 54%, #2b6eea 100%);
  color: var(--iq-white);
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-panel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  height: 100%;
  width: 50%;
  text-align: center;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-panel::before {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: "";
  height: 360px;
  position: absolute;
  right: -130px;
  top: -120px;
  width: 360px;
}

.overlay-panel::after {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  bottom: -170px;
  content: "";
  height: 460px;
  left: -130px;
  position: absolute;
  width: 460px;
}

.login-brand-card {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.login-mascot {
  display: block;
  filter: drop-shadow(0 22px 36px rgba(12, 20, 50, .28));
  margin: 0 auto 22px;
  max-height: min(42vh, 430px);
  max-width: min(78%, 380px);
  object-fit: contain;
  width: auto;
}

.login-brand-card .sign-in-logo {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 18px 24px;
}

.login-brand-card h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  margin: 24px 0 14px;
}

.login-brand-card p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 430px;
}

.login-brand-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.login-brand-points span {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.overlay-left {
  transform: translateX(-20%);
}

.iq-border-primary:hover {
  color: var(--iq-white) !important;
}

.container.right-panel-active .sign-in-container {
  transform: translateX(100%);
}

.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.container.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

/*---------------------------------------------------------------------
                               Dash Hover
-----------------------------------------------------------------------*/
.dash-hover-blank {
  background-color: var(--iq-border-light);
  border: dashed 2px var(--iq-dark);
  height: 90%;
  justify-content: center;
}

.dash-hover-blank:hover {
  cursor: pointer;
  background-color: var(--iq-border-light);
}

/*---------------------------------------------------------------------
                               Waves Effect
-----------------------------------------------------------------------*/
.iq-waves-effect {
  position: relative;
}

/*  Ripple */
.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgb(30, 61, 115, 0.1);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}

.rippleEffect {
  animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/*---------------------------------------------------------------------
                                Sidebar
-----------------------------------------------------------------------*/
.iq-sidebar {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 300px;
  height: 100%;
  background: #0e1861;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.25);
}

.iq-sidebar .iq-sidebar-logo {
  float: none;
  width: 100%;
}

/*---------------------------------------------------------------------
                             Sidebar Menu
-----------------------------------------------------------------------*/

/* Form */
#sidebar-scrollbar {
  height: 100vh;
}

.iq-sidebar #sidebar-scrollbar {
  margin-top: 15px;
}

.iq-sidebar-menu .iq-menu .iq-menu-title {
  display: block;
  color: var(--iq-body-text);
  font-size: 15px;
  position: relative;
  padding: 15px;
  font-weight: 500;
  line-height: 18px;
}

.iq-sidebar-menu .iq-menu .iq-menu-title i {
  display: none;
}

.iq-sidebar-menu {
  position: relative;
}

.iq-sidebar-menu .iq-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.iq-sidebar-menu .iq-menu li {
  list-style-type: none;
  position: relative;
  white-space: nowrap;
  border-radius: 15px;
  border-bottom: 1px solid #202c71;
  border-radius: 0px;
}
}

.iq-sidebar-menu .iq-menu li li {
  margin: 0;
  background: transparent !important;
}

.iq-sidebar-menu .iq-menu li a {
  font-size: 14px;
  white-space: nowrap;
  display: block;
  color: var(--iq-light-card);
  position: relative;
  padding: 15px 20px;
  line-height: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  border-radius: 0px;
  text-transform: capitalize;
  transition: all 0.45s ease 0s;
}

.iq-sidebar-menu .iq-menu li>a::before {
  content: "";
  width: 3px;
  height: 0px;
  display: inline-block;
  background: var(--iq-light-card);
  position: absolute;
  top: 7px;
  right: 0px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s;
}

.iq-sidebar-menu .iq-menu li.active>a::before {
  opacity: 1;
  height: 75%;
}

.iq-sidebar-menu .iq-menu li li a {
  font-size: 14px;
}

.iq-sidebar-menu .iq-menu li a i {
  font-size: 20px;
  margin-right: 10px;
  vertical-align: middle;
  width: 20px;
  display: inline-block;
  float: left;
}

.iq-sidebar-menu .iq-menu li a span {
  white-space: nowrap;
  padding: 0;
  display: inline-block;
  float: left;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  transition: none;
}

.iq-sidebar-menu .iq-menu li a .iq-arrow-right {
  margin-right: 0px;
  margin-left: auto;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.iq-sidebar-menu .iq-menu li a .badge {
  position: absolute;
  right: 15px;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -ms-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;
}

.iq-sidebar-menu .iq-menu li a:hover {
  color: var(--iq-primary);
  background: var(--iq-light-card);
}

.iq-sidebar-menu .iq-menu li.active,
.iq-sidebar-menu .iq-menu li.active-menu {
  /* background: var(--iq-light-primary);*/
}

.iq-sidebar-menu .iq-menu>li.active>a {
  color: var(--iq-primary);
  background: var(--iq-light-card);
  text-decoration: none;
}

.iq-search-bar .searchbox .search-link {
  position: absolute;
  left: 15px;
  top: 6px;
  font-size: 16px;
}

.iq-sidebar-menu .iq-menu li a[aria-expanded="true"] {
  color: var(--iq-primary);
  text-decoration: none;
  border-radius: 0;
}

.iq-sidebar-menu .iq-menu li.active a[aria-expanded="true"] {
  box-shadow: none;
}

.iq-sidebar-menu .iq-menu li a[aria-expanded="true"] .iq-arrow-right {
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.iq-sidebar-menu .iq-menu li .iq-submenu li a:hover,
.iq-sidebar-menu .iq-menu li.active .iq-submenu li>a {
  background: transparent;
}

.iq-sidebar-menu .iq-menu li.active .iq-submenu li.active>a {
  color: var(--iq-primary);
  border-radius: 0;
}

.iq-sidebar-menu .iq-menu li.active .iq-submenu li:last-child>a {
  border-radius: 0 0 5px 5px;
}

.iq-sidebar-menu .iq-menu li .iq-submenu li>a::before {
  display: none;
}

body.sidebar-main .iq-sidebar .iq-menu li a[aria-expanded="false"].collapsed {
  border-radius: 15px;
}

.iq-sidebar-menu .iq-menu li a i.iq-arrow-left,
.iq-sidebar-menu .iq-menu li>a>i.iq-arrow-left {
  /*background: transparent; color: var(--iq-body-text); text-align: center; border-radius: 15px; font-size: 16px;*/
}

.iq-sidebar-menu .iq-menu li a[aria-expanded="true"] i.iq-arrow-left,
.iq-sidebar-menu .iq-menu li.active>a>i.iq-arrow-left,
.iq-sidebar-menu .iq-menu li.active-menu>a>i.iq-arrow-left {
  color: var(--iq-primary);
  /* color: var(--iq-white);*/
}

/*------------------------*/
.iq-sidebar-menu .iq-menu li ul {
  padding-left: 0;
}

.sidebar-main .iq-sidebar-menu .iq-menu li ul {
  padding-left: 0;
}

.iq-sidebar-menu .iq-menu li ul li a {
  color: var(--iq-body-text);
}

.iq-sidebar-menu .iq-menu li ul a:hover {
  color: var(--iq-primary);
  text-decoration: none;
  background: transparent;
}

.iq-sidebar-menu .iq-menu li ul li a {
  padding-left: 40px;
}

.iq-sidebar-menu .iq-menu li ul ul li>a {
  padding-left: 65px;
}

.iq-sidebar-menu .iq-menu li ul ul ul li>a {
  padding-left: 80px;
}

.iq-sidebar-menu .iq-menu li.active .iq-submenu li a[aria-expanded="true"],
.iq-sidebar-menu .iq-menu li .iq-submenu li a[aria-expanded="true"] {
  box-shadow: none;
}

.iq-sidebar-menu .iq-menu .iq-submenu .iq-submenu-data {
  box-shadow: none;
}

.iq-sidebar-menu .iq-menu li.active ul.iq-submenu-data li.active>a {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
  border-radius: 0;
}

.iq-sidebar-menu .iq-menu li ul.iq-submenu-data li {
  margin: 0;
}


/*---------------------------------- */
#sidebar-bottom {
  padding-top: 50px !important;
  margin-bottom: 40px;
}

#sidebar-bottom .image {
  margin-top: -70px;
}

#sidebar-bottom .image img {
  max-width: 60%;
}

/*---------------------------------------------------------------------
                             Top Menu
-----------------------------------------------------------------------*/
.iq-top-navbar {
  padding: 0 15px 0 30px;
  min-height: 73px;
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  width: calc(100% - 300px);
  display: inline-block;
  z-index: 99;
  background: var(--iq-body-bg);
  margin: 0;
  transition: all 0.45s ease 0s;
}

body.sidebar-main .iq-top-navbar {
  width: calc(100% - 80px);
}

.iq-top-navbar.fixed-header {
  margin: 0;
  right: 0;
  width: calc(100% - 330px);
  border-radius: 0;
  transition: all 0.45s ease 0s;
}

.iq-top-navbar .iq-navbar-custom .navbar-breadcrumb {
  display: block;
  margin-left: 0px;
  padding: 20px 0;
}

.iq-top-navbar .breadcrumb .breadcrumb-item.active {
  color: var(--iq-body-text);
}

.iq-top-navbar .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.iq-top-navbar .navbar-breadcrumb {
  min-width: 0;
}

.iq-top-navbar .navbar-breadcrumb nav,
.iq-top-navbar .navbar-breadcrumb .breadcrumb {
  overflow: hidden;
}

.iq-top-navbar .navbar-breadcrumb .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.iq-top-navbar .navbar-breadcrumb .breadcrumb-item.active {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iq-top-navbar .breadcrumb li {
  list-style-type: none;
  /* font-size: 12px; */
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "\ea5f";
  font-family: 'remixicon';
  font-size: 14px;
  vertical-align: sub;
  color: var(--iq-body-text);
}

.iq-top-navbar .breadcrumb li a,
.iq-top-navbar .breadcrumb li a:hover {
  text-decoration: none;
}

.navbar-list {
  margin: 0;
  padding: 0;
  float: right;
}

.iq-top-navbar .navbar-list {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
}

.iq-top-navbar .navbar-list > li {
  flex: 0 0 auto;
}

.iq-top-navbar .navbar-list > li.line-height > a {
  margin-top: 0 !important;
}

.navbar-list li {
  float: left;
  list-style-type: none;
  position: relative;
}

.navbar-list li>.dropdown .dropdown-menu {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.navbar-list li .dropdown-toggle::after {
  display: none;
}

.navbar-list li>a.language-title {
  font-size: 16px;
  margin: 23px 0;
}

.navbar-list li>a {
  font-size: 18px;
  padding: 0 15px;
  color: var(--iq-primary);
  display: block;
}

.navbar-list li.nav-item.nav-icon>a {
  color: var(--iq-white);
  padding: 0;
  height: 35px;
  width: 35px;
  text-align: center;
  font-size: 14px;
  line-height: 35px;
  margin: 25px 10px;
}

.menu-tag {
  position: absolute;
  background: var(--iq-body-text);
  color: var(--iq-white);
  display: inline-block;
  top: 18px;
  left: 18px;
  font-size: 12px;
  border-radius: 90px;
  line-height: normal;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
}

.navbar-list li a:hover {
  text-decoration: none;
}

.navbar-list li>a>img {
  width: 50px;
  height: 50px;
}

.navbar-list li.iq-nav-user {
  display: flex;
  align-items: flex-start;
}

.navbar-list li.iq-nav-user span {
  flex: 1;
  font-size: 14px;
}

.iq-breadcrumb {
  display: none;
}

.nav-item span.dots {
  height: 10px;
  width: 10px;
  font-size: 0;
  text-align: center;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
  border: 2px solid var(--iq-white);
  animation: shadow-pulse-dots 1s infinite;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.nav-item span.count-mail {
  height: 10px;
  width: 10px;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
  border: 2px solid var(--iq-white);
  animation: shadow-pulse 1s infinite;
  border-radius: 50%;
}

@keyframes shadow-pulse-dots {
  0% {
    box-shadow: 0 0 0 0px rgba(230, 65, 65, 0.2);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(230, 65, 65, 0);
  }
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(230, 65, 65, 0.2);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(230, 65, 65, 0);
  }
}

div#lottie-beil,
div#lottie-mail,
div#lottie-fullscreen {
  height: 20px;
  width: 20px;
}

div#lottie-beil svg path,
div#lottie-mail svg path,
div#lottie-fullscreen svg path {
  stroke: var(--iq-primary);
}

.navbar-list li .caption {
  line-height: 16px;
}

.navbar-list li .caption p {
  color: var(--iq-body-text);
  font-size: 12px;
}

.top-nav-bottom {
  margin-left: 260px;
  border-top: 1px solid var(--iq-light-primary);
}

.topnav-toolbar li a {
  display: block;
  padding: 10px 15px;
  text-transform: capitalize;
  color: var(--iq-body-text);
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

.topnav-toolbar li.date-today {
  background: var(--iq-light);
}

.topnav-toolbar li.active a {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
}

.topnav-toolbar ul li {
  list-style: none;
  padding: 13px 0;
}

.navbar-list li>.dropdown {
  line-height: 73px;
  cursor: pointer;
}

.iq-search-bar {
  padding: 0 15px;
}

.iq-search-bar .searchbox {
  width: 480px;
  position: relative;
}

.iq-search-bar .search-input {
  width: 100%;
  height: 40px;
  padding: 5px 15px 5px 40px;
  border-radius: 15px;
  border: none;
}

.iq-search-bar .searchbox .search-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--iq-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 17px;
  height: 40px;
  justify-content: center;
  left: 12px;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 0;
  width: 22px;
  z-index: 1;
}

.iq-search-bar .searchbox .search-link i {
  line-height: 1;
  margin: 0;
}

.iq-navbar-logo {
  padding: 20px;
  width: auto;
  position: relative;
  background: var(--iq-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  background: transparent;
}

.iq-navbar-logo a {
  display: flex;
  align-items: flex-start;
}

.iq-navbar-logo a span {
  margin-left: 0px;
  font-size: 28px;
  line-height: 26px;
  color: var(--iq-body-text);
  text-transform: uppercase;
  flex: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-navbar-logo a:hover,
.iq-navbar-logo a:focus {
  text-decoration: none;
}

.iq-navbar-logo img {
  height: 45px;
}

.iq-top-navbar .iq-navbar-custom .iq-menu-bt {
  display: none;
}

/*---------- Sidebar Logo --------------*/
.iq-sidebar-logo {
  padding-top: 15px;
  padding-left: 20px;
  width: 260px;
  float: left;
  position: relative;
  background: var(--iq-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  background: transparent;
}

.iq-sidebar-logo a {
  display: flex;
  align-items: flex-start;
}

.iq-sidebar-logo a span {
  margin-left: 10px;
  font-size: 24px;
  line-height: 45px;
  color: var(--iq-body-text);
  text-transform: lowercase;
  flex: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-sidebar-logo a:hover,
.iq-sidebar-logo a:focus {
  text-decoration: none;
}

.iq-sidebar-logo img {
  height: 40px;
  max-width: 200px;
}

.iq-top-navbar .iq-navbar-custom .iq-menu-bt-sidebar .iq-menu-bt {
  display: block;
  margin: 0 0 0 20px;
}

.iq-menu-bt {}

.wrapper-menu {
  font-size: 30px;
  text-align: center;
  line-height: 15px;
  color: var(--iq-light-card);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 330ms ease-out;
  background: transparent;
  padding: 12px 0px;
  margin-right: 15px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.line-menu {
  background-color: var(--iq-primary);
  border-radius: 90px;
  width: 100%;
  height: 2px;
}

.line-menu.half {
  width: 50%;
}

.line-menu.start {
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.37, 0.37);
  transform-origin: right;
}

.open .line-menu.start {
  transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
  align-self: flex-end;
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.37, 0.37);
  transform-origin: left;
}

.open .line-menu.end {
  transform: rotate(-90deg) translateX(-3px);
}

.hover-circle {
  opacity: 0;
  position: absolute;
  top: 12px;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
}

.wrapper-menu.open .main-circle {
  opacity: 0;
}

.wrapper-menu.open .hover-circle {
  opacity: 1;
}

/*----------------------*/
.iq-top-navbar .iq-sub-dropdown {
  width: 300px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: var(--iq-white);
  transition: all 0.3s;
  padding: 0;
  border-radius: 15px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-sub-dropdown.iq-sub-dropdown-large {
  width: 500px;
}

.iq-top-navbar .iq-sub-dropdown .iq-card-body div {
  border-radius: 15px 15px 0 0;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-12-22 15:30:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.iq-show .iq-sub-dropdown {
  display: inline-block;
}

.navbar-list li .iq-sub-dropdown .iq-sub-card.iq-sub-card-big {
  width: auto;
}

.navbar-list li .iq-sub-dropdown .iq-sub-card {
  font-size: inherit;
  padding: 15px;
  line-height: normal;
  color: inherit;
  border-bottom: 1px solid var(--iq-light-primary);
  display: inline-block;
  width: 100%;
}

.iq-top-navbar .search-box {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: var(--iq-white);
  transition: all 0.3s;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.iq-show .search-box {
  display: inline-block;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.search-box .search-input {
  width: 300px;
  height: 50px;
  padding: 0 1em;
  border: 1px solid var(--iq-light-primary);
  background-color: var(--iq-light-primary);
  opacity: 1;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.iq-sub-dropdown .iq-card-icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 22px;
}

/*---------------------------------------------------------------------
                              Content Page
-----------------------------------------------------------------------*/
.content-page {
  overflow: hidden;
  margin-left: 300px;
  padding: 105px 15px 0;
  min-height: 100vh;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.iq-user-dropdown {
  width: 350px;
}

body.sidebar-main .content-page {
  margin-left: 80px;
}

.welcome-text {
  width: 60%;
  margin-bottom: 14px;
}

.welcome-right {
  width: 60%;
  float: right;
  margin: 18px 0;
}

.spacer {
  padding-top: 120px;
}

/* --------------- */
.iq-card.iq-border-box {
  border-bottom: 4px solid;
}

.right-block .image-absulute.image-absulute-1 {
  position: absolute;
  top: 10px;
  left: auto;
  right: 240px;
}

.right-block .image-absulute.image-absulute-2 {
  position: absolute;
  left: auto;
  right: 330px;
  top: 30px;
}

.iq-right-fixed .iq-card .iq-card-header {
  border-color: rgba(255, 255, 255, 0.2);
}

/*--------------------*/
.iq-card-header-list {
  margin: 0;
  padding: 0;
  float: right;
}

.iq-card-header-list li {
  list-style-type: none;
  float: left;
  display: inline-block;
  font-size: 20px;
  margin: 0 0 0 8px;
}

.iq-card-header-list li a,
.iq-card-header-list li a:hover {
  text-decoration: none;
}

/* ------------------ */
.friend-list-items.nav-pills .nav-link a {
  padding: 0 15px;
}

.friend-list-items.nav-pills .nav-link.active,
.friend-list-items.nav-pills .show>.nav-link {
  background-color: transparent;
  color: var(--iq-black);
}

.iq-friendlist-block {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* ------------------ */
.header-for-bg {
  margin-top: 75px;
  margin-bottom: -60px;
}

.header-for-bg .title-on-header {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--iq-white);
}

.header-for-bg .data-block {
  display: inline-block;
  background: rgba(255, 255, 255, 0.5);
  padding: 20px;
  border-radius: 15px;
}

.profile-header-image .profile-img {
  margin-top: -70px;
  position: relative;
}

.manufacture-block .iq-card-icon {
  border-radius: 15px 0 0 15px;
}

.iq-background-image,
.background-image-overlap {
  position: relative;
  overflow: hidden;
  z-index: 9;
}

.iq-background-image::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: -10px;
  left: 0;
  right: 10px;
  background: transparent url(../images/page-img/50.png) no-repeat scroll right bottom;
  opacity: 0.4;
  z-index: -1;
}

.iq-background-image.image-1::after {
  background: transparent url(../images/page-img/51.png) no-repeat scroll right bottom;
}

.background-image-overlap::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: -10px;
  left: 0;
  right: 10px;
  background: transparent url(../images/page-img/side-bkg.png) no-repeat scroll right center;
  opacity: 0.4;
  z-index: -1;
}

/* ------------------ */
.group-icon {
  margin-top: -70px;
}

ul.iq-week-data h6 {
  color: var(--iq-white);
}

.social-media-block .data-block {
  flex: 1;
}

.iq-duration-block p {
  margin-top: 10px;
}

/* ------------------ */
.image-hover-data {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: -60px;
  padding: 15px;
  border-radius: 0 0 5px 5px;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.45s ease 0s;
}

.user-images:hover .image-hover-data {
  bottom: 0;
  transition: all 0.45s ease 0s;
}

a.image-edit-btn {
  position: absolute;
  top: 15px;
  left: auto;
  right: 15px;
  background: var(--iq-white);
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 15px;
  opacity: 0;
}

.user-images:hover a.image-edit-btn {
  opacity: 1;
  transition: all 0.45s ease 0s;
}

.event-images img {
  border-radius: 15px 5px 0 0;
}

.iq-notify {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.files-lists.table td {
  vertical-align: middle;
}

.inner-page-title {
  position: absolute;
  top: 25%;
  left: 30px;
}

.inner-page-bg img {
  height: 150px;
}

ul.request-list>li {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

ul.request-list>li:last-child {
  border: none;
}

.post-item img.profile-img,
.user-post img.profile-img {
  border-radius: 100%;
  height: 450px;
  width: 450px;
}

.iq-card-post-toolbar .dropdown-toggle i {
  font-size: 22px;
  line-height: normal;
  color: var(--iq-body-text);
}

.iq-card-post-toolbar .dropdown-toggle::after,
.total-comment-block .dropdown-toggle::after,
.total-like-block .dropdown-toggle::after,
.like-data .dropdown-toggle::after {
  display: none;
}

.iq-card-post-toolbar .dropdown-menu a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.event-post .job-icon {
  height: 40px;
  width: 40px;
  line-height: 24px;
  text-align: center;
  font-size: 18px;
}

.job-icon-position {
  text-align: center;
  margin: -21px auto 0;
}

.play-btn {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  background: rgba(0, 0, 0, 0.8);
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 32px;
  margin: 0 auto;
  color: var(--iq-white);
  border-radius: 50%;
  font-size: 25px;
  opacity: 0;
  transition: all 0.45s ease 0s;
}

.music-thumbnail:hover .play-btn {
  opacity: 1;
  transition: all 0.45s ease 0s;
}

.top-bg-image>img {
  border-radius: 15px 5px 0 0;
}

div#post-modal-data .modal {
  position: absolute;
  height: auto;
}

div#post-modal-data .modal .modal-dialog {
  max-width: 100%;
  margin: 0;
}

.modal-open {
  overflow: scroll;
}

.iq-box-relative {
  position: relative;
  overflow: hidden;
}

.iq-box-absolute {
  position: absolute;
  left: auto;
  right: -20px;
  top: -15px;
  line-height: 65px;
}

/*----------------------------*/
button.banner-button {
  position: absolute;
  left: auto;
  right: 21%;
  bottom: 12px;
}

.social-media-block .iq-card-icon {
  border-radius: 15px 0 0 15px;
}

.right-border-block::before {
  position: absolute;
  content: "";
  border-left: 1px solid var(--iq-white);
  top: 25%;
  bottom: 0;
  left: -10px;
  right: 0;
  height: 50%;
}

.chat-detail-block.right-border-block::before {
  border-color: var(--iq-body-text);
  left: 0px;
}


/*----------------------------*/
.profile-icon {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50%;
}

/* ---------------- */
.main-temp>h1 {
  font-size: 150px;
}

.main-temp>h1>span {
  font-size: 24px;
  vertical-align: top;
  line-height: 130px;
  position: absolute;
}

/* ------------ */
.total-comment-block .dropdown:hover>.dropdown-menu,
.total-like-block .dropdown:hover>.dropdown-menu,
.like-data .dropdown:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transition: all 0.45s ease 0s;
}

.total-comment-block .dropdown>.dropdown-menu,
.total-like-block .dropdown>.dropdown-menu {
  background-color: var(--iq-dark);
}

.total-comment-block .dropdown>.dropdown-menu>a,
.total-like-block .dropdown>.dropdown-menu>a {
  color: var(--iq-white);
  padding: 2px 10px;
}

.like-data .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  width: 260px;
  top: -50px;
  border: none;
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  transition: all 0.45s ease 0s;
}

.like-data:hover span,
.comment-block:hover a {
  color: var(--iq-primary);
  transition: all 0.45s ease 0s;
}

.total-like-block .dropdown-menu,
.total-comment-block .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
}

.like-block span {
  color: var(--iq-body-text);
  cursor: pointer;
}

.like-block span:hover {
  color: var(--iq-primary);
}

/*------------------------------ */
.iq-page-menu-horizontal .iq-box-relative {
  overflow: visible;
}

.iq-page-menu-horizontal .iq-box-absolute {
  left: 10px;
  right: auto;
  line-height: 58px;
}

.iq-page-menu-horizontal .iq-search-bar .form-control::-webkit-input-placeholder {
  color: #b4a4ff !important;
  opacity: 1
}

.iq-page-menu-horizontal .iq-top-navbar:before {
  content: "";
  width: 150px;
  height: 150px;
  border-radius: 30%;
  box-shadow: -75px -30px 0 0 var(--iq-primary);
  position: absolute;
  left: -3px;
  top: 105px;
}

.iq-page-menu-horizontal .iq-top-navbar:after {
  content: "";
  width: 150px;
  height: 150px;
  border-radius: 30%;
  box-shadow: 75px -30px 0 0 var(--iq-primary);
  position: absolute;
  right: -3px;
  top: 105px
}

/*-------------------------- */
.content-body {
  margin-top: 40px;
}

.box.iq-box-relative {
  overflow: visible;
}

.box-image {
  margin-top: -58px;
  height: 175px;
  margin-right: 10px;
}

.box-image img {
  max-height: 190px;
}

.box-image1 {
  margin-top: -65px;
  height: 195px;
  margin-right: 10px;
}

.box-image1 img {
  max-height: 210px;
}

.ethernet-content {
  z-index: 8;
}

.ethernet-content:before {
  content: "";
  position: absolute;
  background: url(../images/page-img/diamond.png) no-repeat scroll center center;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.ethernet-text {
  position: absolute;
  right: 25%;
  bottom: 0;
}

.table-responsive span.dots {
  height: 11px;
  width: 11px;
  font-size: 0;
  text-align: center;
  padding: 0;
  position: absolute;
  bottom: 3px;
  right: -2px;
  border: 2px solid var(--iq-white);
  /* animation: shadow-pulse-dots 1s infinite; */
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

img {
  max-width: 100%;
}

.map-detail .iq-card-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border: 0;
}

/*--------------------------- */
.error-content .title span {
  height: 8px;
  width: 8px;
  position: absolute;
  left: -1px;
  top: 6px;
}

.error-detail .title span {
  height: 8px;
  width: 8px;
  position: absolute;
  left: -1px;
  top: 6px;
}

/*--------------------------- */
.progress-bar.rounded-right:before {
  content: "";
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: 0px;
  background: #e9ecef;
}

.total-progress span {
  height: 5px;
  width: 5px;
  position: absolute;
  left: -1px;
  top: 6px;
}

.disk-progress.progress-round.income-progress,
.average-progress.progress-round.income-progress {
  height: 120px;
  width: 120px;
  margin-top: 20px;
  margin-right: 20px;
}

/*--------------------------- */
.stock-right {
  z-index: 1;
}

.stock-right:before {
  content: "";
  height: 85px;
  width: 85px;
  position: absolute;
  left: 34%;
  top: -11px;
  border-radius: 50%;
  background-color: var(--iq-light-success);
  z-index: -1;
}

.stock-right.stock3:before {
  background-color: var(--iq-light-close);
}

/*-------------------------- */
.activities-content {
  width: 390px;
  margin: 0 auto;
}

.activities-content .activity {
  position: absolute;
  top: 42%;
  left: 0px;
  right: auto;
  margin: 0 auto;
}

.activities-content .activity-1 {
  padding-top: 90px;
  position: static;
}

.activities-content .activity-2 {
  padding-top: 50px;
}

.activities-content .activity-3 {
  padding-top: 20px;
  top: 0px;
  left: auto;
  right: 0px;
}

.activities-content .activity-1 h2,
.activities-content .activity-1 p {
  position: relative;
  z-index: 9;
}

/*-------------- Media Header ---------------*/
.iq-card .iq-card-header.iq-header-media {
  padding: 20px;
}

/* ------------------ */
.big-card {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--iq-white);
  border: 1px solid var(--iq-light-primary);
  padding: 20px;
}

.iq-card-body.relative-background {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}

.iq-image-full {
  position: relative;
}

/*---------------------------------------------------------------------
                              Error Page
-----------------------------------------------------------------------*/
.height-self-center {
  height: 100vh;
}

.iq-error {
  position: relative;
  width: 100%;
  display: inline-block;
}

.iq-error h1.text-in-box {
  font-size: 5em;
  font-weight: 700;
}

.iq-error-img {
  position: static;
  display: inline-block;
}

.error-500 .iq-error-img {
  width: 100%;
}

.iq-error>img {
  width: 50%;
}

.iq-maintenance>img {
  width: 35%;
}

/*---------------------------------------------------------------------
                               OWL Carousel
-----------------------------------------------------------------------*/
.owl-carousel .owl-nav {
  display: block;
  position: absolute;
  text-indent: inherit;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  left: 0;
  width: 100%;
  cursor: pointer;
  z-index: 999;
}

.owl-carousel .owl-nav .owl-prev {
  display: block;
  position: absolute;
  text-align: center;
  text-indent: inherit;
  left: -8%;
  width: auto;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
  -moz-transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
  -ms-transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
  transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
}

.owl-carousel .owl-nav .owl-next {
  display: block;
  position: absolute;
  text-align: center;
  text-indent: inherit;
  right: -8%;
  width: auto;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease 0s, right 0.3s ease 0s;
  -moz-transition: opacity 0.3s ease 0s, right 0.3s ease 0s;
  -ms-transition: opacity 0.3s ease 0s, right 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s, right 0.3s ease 0s;
  transition: opacity 0.3s ease 0s, right 0.3s ease 0s;
}

.owl-carousel .owl-nav i {
  font-size: 24px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  line-height: 42px;
  padding-left: 0px;
  display: inline-block;
  color: var(--iq-white);
  background: #e7e7e7;
  font-weight: normal;
  text-align: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.owl-carousel .owl-nav i:hover {
  background: #4ac4f3;
  color: var(--iq-white);
}

/* Dots */
.owl-carousel .owl-controls .owl-dot {
  margin-top: 20px;
  display: inline-block;
}

.owl-carousel .owl-dots {
  position: relative;
  width: 100%;
  display: inline-block;
  text-indent: inherit;
  text-align: center;
  cursor: pointer;
}

.owl-carousel .owl-dots .owl-dot span {
  background: var(--iq-white);
  display: inline-block;
  border-radius: 30px;
  margin: 0px 5px;
  height: 8px;
  width: 8px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.owl-carousel .owl-dots .owl-dot:hover,
.owl-carousel .owl-dots .owl-dot.active {
  outline: none;
  border: none;
}

.owl-carousel .owl-dots .owl-dot:hover span {
  background: var(--iq-white);
}

.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--iq-white);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.iq-example-row .row>.col,
.iq-example-row .row>[class^=col-] {
  padding-top: .75rem;
  color: var(--iq-body-text);
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.iq-example-row-flex-cols .row {
  margin-bottom: 15px;
  min-height: 10rem;
  background-color: rgba(255, 0, 0, .1);
}

.iq-icons-list {
  line-height: 50px;
  margin-bottom: 15px;
  display: inline-block;
}

.iq-icons-list i {
  text-align: center;
  vertical-align: middle;
  font-size: 22px;
  float: left;
  width: 40px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  display: inline-block;
}

.iq-icons-list .icon {
  text-align: center;
  vertical-align: middle;
  font-size: 22px;
  width: 40px;
  height: 40px;
  line-height: 50px;
  margin-right: 10px;
  display: inline-block;
}

.iq-icons-list span {
  display: inline-block;
  vertical-align: middle;
}

.iq-card-icon {
  height: 66px;
  width: 66px;
  display: inline-block;
  line-height: 66px;
  text-align: center;
  font-size: 22px;
}

/*---------------------------------------------------------------------
                               Timeline
-----------------------------------------------------------------------*/
.iq-timeline {
  margin: 0 0 0 20px;
  padding: 0;
  width: 100%;
  border-left: 3px solid var(--iq-light-primary);
}

.iq-timeline li {
  margin-left: 35px;
  position: relative;
  padding: 15px 15px 0 5px;
  list-style-type: none;
}

.iq-timeline li .timeline-dots {
  position: absolute;
  top: 35px;
  left: -54px;
  border: 3px solid var(--iq-primary);
  border-radius: 90px;
  padding: 5px;
  background: var(--iq-white);
  height: 40px;
  width: 40px;
  line-height: 25px;
  text-align: center;
}

.iq-timeline li .timeline-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 12px;
  text-transform: uppercase;
}

.iq-timeline li .timeline-status-due {
  background: #fff3cd;
  border: 1px solid #f0b429;
  color: #9a5b00;
}

.iq-timeline li .timeline-status-closes {
  background: #fde8e8;
  border: 1px solid #f05252;
  color: #b91c1c;
  font-size: 10px;
  font-style: normal;
}

.iq-timeline li .timeline-status-opens {
  background: #e1effe;
  border: 1px solid #3f83f8;
  color: #1a56db;
}

.iq-timeline li .timeline-status-other {
  background: #edf7ed;
  border: 1px solid #31c48d;
  color: #057a55;
  font-size: 10px;
  font-weight: 600;
}

/*---------------------------------------------------------------------
                               Team
-----------------------------------------------------------------------*/
.iq-team {
  background: var(--iq-white);
  padding: 15px;
  position: relative;
}

.team-authors-bg {
  position: relative;
  margin-bottom: 50px;
}

.team-authors-bg .avatar-80 {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*------------------------------*/
.iq-team-1 {
  position: relative;
  background: var(--iq-white);
}

.iq-team-1 .iq-team-1-info {
  position: absolute;
  padding: 30px 15px;
  bottom: 0;
  left: 0;
  width: 100%;
}

/*---------------------------------------------------------------------
                           User Add Block
-----------------------------------------------------------------------*/
.user-add-block {
  background: var(--iq-white);
}

.user-add-plus {
  position: absolute;
  right: 30px;
  font-size: 24px;
  bottom: -25px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  background: var(--iq-body-text);
  color: var(--iq-white);
  border-radius: 900px;
  -webkit-box-shadow: 0px 10px 30px 0px rgba(57, 60, 82, 0.1);
  -moz-box-shadow: 0px 10px 30px 0px rgba(57, 60, 82, 0.1);
  box-shadow: 0px 10px 30px 0px rgba(57, 60, 82, 0.1);
}

.user-add-plus:hover {
  background: var(--iq-primary);
  color: var(--iq-white);
  text-decoration: none;
}

.user-add-authors {
  position: relative;
}

.user-add-authors:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 132, 255, 0.8);
}

.user-add-authors .user-add-media {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  display: inline-block;
}

.user-add-list {
  padding: 30px;
}

/*---------------------------------------------------------------------
                             Email list
-----------------------------------------------------------------------*/
.iq-email-list .iq-email-ui {
  margin: 0;
  padding: 0;
}

.iq-email-list .iq-email-ui li {
  list-style-type: none;
  font-size: 16px;
  color: var(--iq-body-text);
  margin-bottom: 3px;
}

.iq-email-list .iq-email-ui li:last-child {
  margin-bottom: 0;
}

.iq-email-list .iq-email-ui li a {
  color: var(--iq-body-text);
  padding: 0;
  display: inline-block;
  width: 100%;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.iq-email-list .iq-email-ui li.active a,
.iq-email-list .iq-email-ui li a:hover {
  text-decoration: none;
  color: var(--iq-primary);
}

.iq-email-list .iq-email-ui li {
  list-style-type: none;
}

.iq-email-list .iq-email-ui li i {
  margin-right: 10px;
}

.iq-email-list .iq-email-ui li .badge {
  float: right;
  font-weight: normal;
  margin-top: 3px;
}

.iq-email-list .iq-email-ui.iq-email-label li {
  margin-bottom: 10px;
}

.iq-email-list .iq-email-ui.iq-email-label li:last-child {
  margin-bottom: 0;
}

/*----------------------------------*/
.iq-email-to-list ul {
  margin: 0;
  padding: 0;
}

.iq-email-to-list ul li {
  list-style-type: none;
  font-size: 20px;
  color: var(--iq-body-text);
  margin: 0 5px 0 0;
  float: left;
}

.iq-email-to-list ul li:first-child a {
  background: none;
  width: auto;
}

.iq-email-to-list ul li>a {
  color: var(--iq-primary);
  text-align: center;
  line-height: 38px;
  display: inline-block;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  background: var(--iq-light-primary);
}

.iq-email-to-list ul li a:hover,
.iq-email-to-list ul li.q-list a:hover {
  color: var(--iq-primary);
  text-decoration: none;
}

.iq-email-to-list ul li .custom-control-label::before {
  top: 13px;
  left: -20px;
}

/*----------------------------------*/
.iq-email-search {
  position: relative;
}

.iq-email-search .form-control {
  height: 40px;
  border: 1px solid var(--iq-border-light);
  width: 170px;
}

.iq-email-search .search-link {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 18px;
  line-height: 38px;
  color: var(--iq-primary);
}

.iq-email-search .search-link:hover {
  text-decoration: none;
}

/*----------------------------------*/
.iq-email-listbox .iq-email-sender-list {
  margin: 15px 0 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

.iq-email-listbox .iq-email-sender-list>li {
  list-style-type: none;
  position: relative;
  padding: 15px 20px;
  border-top: 1px solid var(--iq-border-light);
  float: left;
  display: inline-block;
  width: 100%;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.iq-email-listbox .iq-email-sender-list>li:hover {
  background: var(--iq-white);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.iq-email-listbox .iq-email-sender-list li a:hover {
  text-decoration: none;
}

.iq-email-listbox .iq-email-sender-list li.iq-unread a {
  color: var(--iq-primary);
  font-weight: 500;
}

.iq-email-listbox .iq-email-sender-list li.iq-unread li a {
  color: var(--iq-primary);
}

.iq-email-sender-info .iq-checkbox-mail,
.iq-email-sender-info .iq-star-toggle {
  display: block;
  float: left;
}

.iq-email-sender-info .iq-checkbox-mail {
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin-top: 4px;
}

.iq-email-sender-info .iq-star-toggle {
  color: var(--iq-body-text);
  margin-left: 10px;
  font-size: 18px;
}

.iq-email-sender-info .iq-email-title {
  color: var(--iq-body-text);
  position: absolute;
  top: 0;
  left: 85px;
  right: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0;
  line-height: 62px;
}

.iq-email-content {
  position: absolute;
  top: 0;
  left: 300px;
  right: 0;
  bottom: 0;
  line-height: 62px;
}

.iq-email-content .iq-email-date,
.iq-email-content .iq-email-subject {
  position: absolute;
  top: 0;
}

.iq-email-content .iq-email-subject {
  color: var(--iq-body-text);
  left: 0;
  right: 110px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.iq-email-content .iq-email-date {
  right: 20px;
  width: 100px;
  text-align: right;
  padding-left: 10px;
  color: var(--iq-body-text);
}

.iq-email-sender-list .iq-social-media {
  position: absolute;
  line-height: 62px;
  right: -200px;
  top: 0;
  background: var(--iq-white);
  font-size: 18px;
  padding: 0 30px;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.iq-email-listbox .iq-email-sender-list li:hover .iq-social-media {
  right: 0;
}

/*----------------------------------*/
.iq-inbox-details tr td {
  padding: 5px 10px;
}

.iq-inbox-details tr td:first-child {
  width: 75px;
  color: var(--iq-body-text);
}

.iq-subject-info {
  display: flex;
  align-items: flex-start;
}

.iq-subject-status {
  margin-left: 15px;
  flex: 1;
}

/*---------------------------------------------------------------------
                             Booking list
-----------------------------------------------------------------------*/
.iq-booking-date {
  background: var(--iq-border-light);
  padding: 15px 15px;
  margin: 0 15px 45px;
  outline: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  display: block;
}

.iq-booking-date:hover {
  text-decoration: none;
}

.iq-booking-date:after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: -8px;
  height: 16px;
  width: 16px;
  background: var(--iq-white);
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
  opacity: 0;
}

.iq-booking-date:before {
  content: "";
  position: absolute;
  bottom: 20px;
  right: -8px;
  height: 16px;
  width: 16px;
  background: var(--iq-white);
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
  opacity: 0;
}

.slick-slide.slick-active.slick-center .iq-booking-date {
  background: var(--iq-primary);
  color: var(--iq-white);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.slick-slide.slick-active.slick-center .iq-booking-date h3 {
  color: var(--iq-white);
}

.slick-slide.slick-active.slick-center .iq-booking-date:after {
  opacity: 1;
}

.slick-slide.slick-active.slick-center .iq-booking-date:before {
  opacity: 1;
}

.slick-initialized .slick-slide {
  outline: none;
}

.iq-booking-date .iq-booking-dot {
  height: 12px;
  width: 12px;
  margin-bottom: 10px;
  display: inline-block;
  background: var(--iq-white);
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
}

.iq-booking-date h3 {
  line-height: 1.50rem;
  margin-bottom: 0;
}

.iq-booking-date h3 small {
  font-size: 14px;
}

.icon-tag-box span {
  display: inline-block;
  width: 100%;
  font-size: 16px;
}

.iq-booking-offer-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 110%;
}

.iq-booking-offer {
  padding: 60px 100px;
  border-radius: 15px;
  margin-bottom: 30px;
}

/*----------------------------------------------------------------------
                        Chart
 ----------------------------------------------------------------------*/
#sda1-chart,
#sda1-chart1,
#sda1-chart2 {
  min-height: 200px !important;
}

#report-chart-02 {
  min-height: 170px !important;
}

#iq-income-chart {
  min-height: 234px !important;
}

#report-chart-04 {
  min-height: 184px !important;
}

#chart-001 {
  min-height: 293px !important;
}

#trafic-chart {
  min-height: 235px !important;
}

#activies-chart-01 {
  min-height: 230px !important;
}

#activies-chart {
  min-height: 401px !important;
}

/*-----------------------------------------------------------------
                        Material Card Style1
----------------------------------------------------------------- */
.card-style1 {
  display: flex;
}

.card-style1 img {
  object-fit: cover;
  border-radius: 100px;
  height: 75px;
  margin-right: 10px;
}

.card-style1 .title {
  text-transform: capitalize;
  font-weight: bold;
}

.card-style1 .percentage {
  font-weight: bolder;
  font-size: 1.5rem;
  margin: auto;
}

.card-style1 .percentage span {
  font-weight: normal;
}

/*-----------------------------------------------------------------
                        Material Card Style2
----------------------------------------------------------------- */
.card-style1.card-style2 .iq-details {
  width: 100%;
}

.card-style1.card-style2 .percentage {
  font-weight: bolder;
  font-size: 1.2rem;
  margin-top: -5px;
  margin-left: -50px;
}

/*-----------------------------------------------------------------
                        Circle Progressbar
------------------------------------------------------------------- */
.iq-circle-progressbar .percent {
  font-size: 1.3rem !important;
}

.iq-circle-progressbar svg {
  width: 100px !important;
  height: 100px !important;
}

.iq-circle-progressbar {
  margin: 0 auto;
  width: 100px !important;
  height: 100px !important;
}

.progress-round {
  width: 50px;
  height: 50px;
  background: none;
  position: relative;
}

.progress-round::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--iq-border-light);
  position: absolute;
  top: 0;
  left: 0;
}

.progress-round>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress-round .progress-left {
  left: 0;
}

.progress-round .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 3px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress-round .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress-round .progress-right {
  right: 0;
}

.progress-round .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress-round .progress-value {
  position: absolute;
  top: 0;
  left: 0;
}

#home-chart-03 .apexcharts-legend.center.position-right {
  right: 35px !important;
}

.progress-round.income-progress {
  height: 77px;
  width: 77px;
}

.progress-round.income-progress.disk-usage {
  height: 86px;
  width: 86px;
}

.progress-round.heatmap-progress {
  height: 97px;
  width: 97px;
}

.progress-round.income-progress .progress-bar,
.progress-round.heatmap-progress .progress-bar {
  border-width: 10px;
}

.progress-round.income-progress::after,
.progress-round.heatmap-progress::after {
  border: 10px solid #ff9273;
}

.progress-round.alarams-progress {
  height: 110px;
  width: 110px;
}

/*-----------------------------------------------------------------
                        Tikit Booking List
------------------------------------------------------------------- */
.iq-booking-ab {
  display: inline-block;
}

.iq-booking-ab li {
  line-height: 3rem;
  height: 45px;
  margin-bottom: 1rem;
  position: relative;
}

.iq-booking-ab li.friest-booking-blank {
  margin-bottom: 0;
  height: 40px;
}

.iq-booking-ab li.secondary-booking-blank {
  height: 70px;
}

.iq-booking-ab li.three-booking-blank {
  height: 70px;
}

.iq-booking-no li {
  width: 4.9%;
  text-align: center;
  margin-right: 0 !important;
}

.iq-booking-no li .iq-seat {
  background: var(--iq-light-primary);
  width: 45px;
  height: 45px;
  display: inline-block;
  padding: 10px;
  border-radius: 15px;
}

.iq-booking-no li .iq-seat img {
  width: 100%;
}

.iq-booking-no li .iq-seat img.active-seat {
  display: none;
}

.iq-booking-no li .iq-seat.bg-secondary img.default,
.iq-booking-no li .iq-seat.active img.default {
  display: none;
}

.iq-booking-no li .iq-seat.bg-secondary img.active-seat,
.iq-booking-no li .iq-seat.active img.active-seat {
  display: inline-block;
}

.iq-booking-no li .iq-seat.active {
  background: var(--iq-success);
}

.iq-booking-status {
  line-height: 30px;
  display: inline-block;
  margin-right: 30px;
}

.iq-booking-status span {
  width: 16px;
  height: 16px;
  border-radius: 15px;
  display: inline-block;
  background: var(--iq-light-primary);
  margin-right: 10px;
  margin-top: 6px;
  float: left;
}

/*-----------------------------------------------------------------
                        Right Sidebar Menu
------------------------------------------------------------------- */
#right-sidebar-scrollbar {
  height: 100vh;
}

.iq-sidebar-right-menu {
  position: fixed;
  top: 75px;
  right: -400px;
  width: 360px;
  background: var(--iq-border-light);
  overflow: hidden;
  z-index: 99;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.iq-sidebar-right-menu.film-side {
  right: 0;
}

.iq-sidebar-booking,
.iq-sidebar-payment {
  padding: 30px;
}

.iq-booking-ticket {
  background: var(--iq-white);
  border-radius: 15px;
  padding: 30px 25px 30px;
  position: relative;
}

.iq-booking-ticket:after {
  content: "";
  position: absolute;
  bottom: 100px;
  left: -10px;
  height: 20px;
  width: 20px;
  background: var(--iq-primary);
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
}

.iq-booking-ticket:before {
  content: "";
  position: absolute;
  bottom: 100px;
  right: -10px;
  height: 20px;
  width: 20px;
  background: var(--iq-primary);
  -webkit-border-radius: 90px;
  -moz-border-radius: 90px;
  border-radius: 90px;
}

/*---------------------------------------------------------------------
FAQ
-----------------------------------------------------------------------*/
.iq-accordion.career-style.faq-style .iq-accordion-block .accordion-title span {
  padding-left: 0px;
}

.iq-accordion.career-style .iq-accordion-block {
  margin-bottom: 30px;
}

.iq-accordion.career-style.faq-style .accordion-title:before {
  display: inline-block;
  cursor: pointer;
  content: "\f218";
  font-family: "Ionicons";
  position: absolute;
  top: -8px;
  right: 15px;
  color: #1e1e1e;
  font-size: 16px;
  line-height: 16px;
  font-weight: normal;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  border-radius: 15px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
}

.iq-accordion.career-style.faq-style .iq-accordion-block .accordion-details p {
  padding-left: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.iq-accordion.career-style .iq-accordion-block .accordion-title span {
  font-size: 16px;
  display: table-cell;
  color: var(--iq-dark);
}

.iq-accordion.career-style.faq-style .iq-accordion-block.accordion-active .accordion-title:before {
  content: "\f209";
  display: inline-block;
}

.iq-accordion.career-style.faq-style .active-faq .row {
  background: transparent;
  padding: 10px 0px;
}

.iq-accordion.career-style.faq-style .iq-accordion-block {
  padding: 10px 5px;
  border-radius: 15px;
}

.iq-accordion.career-style.faq-style .iq-accordion-block.accordion-active .accordion-title:before,
.iq-accordion.career-style.faq-style .accordion-title:before {
  background-image: -moz-linear-gradient(0deg, rgb(109, 115, 239) 0%, rgb(163, 120, 252) 100%);
  border-radius: 90px;
}

.active-faq a.accordion-title {
  display: block;
  padding-right: 45px;
}

/*---------------------------------------------------------------------
Pricing Table
-----------------------------------------------------------------------*/
.card-img-overlay {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
}

/*---------------------------------------------------------------------
Table
-----------------------------------------------------------------------*/
table tr th img {
  width: 35px;
  height: 35px;
  border-radius: 90px;
}

.progress-animate {
  animation: progress-bar-stripes 1s linear infinite;
}

img.summary-image-top {
  width: 35px;
}

.iq-subject-info img {
  width: 80px;
}

.table.table-test thead {
  border: 0px;
}

/*---------------------------------------------------------------------
Animation Card
-----------------------------------------------------------------------*/
.animation-card {
  position: relative;
}

.animation-card .an-img {
  margin-top: -60px;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.animation-card .an-img .bodymovin {
  width: 162%;
  margin-bottom: -57px;
  margin-left: -50px;
}

.animation-card .an-text {
  position: absolute;
  width: 180px;
  display: inline-block;
  top: 75px;
  left: 30px;
}

.animation-card .an-text h2 {
  margin-top: 0;
}

/*------------*/
.an-img-two {
  width: 700px;
  position: absolute;
  right: -35%;
  top: -175px;
  z-index: -1;
}

.iq-card.bg-primary.sb-top-banner-card {
  z-index: 1;
  position: relative;
}

.bodymovin {
  z-index: -1;
}

/*------------*/
.offer-an-img {
  position: absolute;
  top: -183px;
  width: 695px;
  left: -100px;
}

/*---------------------------------------------------------------------
Footer
-----------------------------------------------------------------------*/
.iq-footer {
  background: var(--iq-light-card);
  padding: 15px;
  margin-left: 300px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

body.sidebar-main .iq-footer {
  margin-left: 80px;
}

.iq-footer ul li a {
  color: var(--iq-body-text);
}

.iq-footer ul li a:hover {
  color: var(--iq-primary);
  text-decoration: none;
}

.bg-banner-image.style-three {
  height: 150px;
  background: url('../images/bg-03.jpg');
}

.iq-mt--70 {
  margin-top: -70px
}

.banner-main-text {
  position: absolute;
  left: 15%;
  bottom: 13%;
}

.nav.nav-pills.style-three .nav-link.active:before,
.nav.nav-pills.style-three .nav-link:hover:before {
  display: inline-block;
  width: 100%;
  height: 3px;
  background: var(--iq-primary);
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
}

.nav.nav-pills.style-three .nav-link:before {
  width: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  height: 3px;
  background: var(--iq-primary);
  content: "";
  position: absolute;
  right: 0;
  bottom: 0px;
}

.iq-card-body.banner-box {
  padding-bottom: 0;
}

.nav.nav-pills.style-three {
  margin-top: 10px;
}

.nav.nav-pills.style-three a:last-child {
  margin-right: 0px;
}

.nav.nav-pills.style-three a {
  background: transparent;
  position: relative;
  margin-right: 30px;
  padding: 10px 0px;
}

/*---------------------------------------------------------------------
Map Profile
-----------------------------------------------------------------------*/
.dash-tracking-icon {
  height: 80px;
}

.map-profile-card {
  margin-right: 30px;
  border: 1px solid var(--iq-border-light);
  margin-bottom: 15px;
}

.track {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  overflow-x: scroll;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--iq-border-light);
  border-radius: 15px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--iq-body-text);
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--iq-dark);
  border-radius: 15px;
}

/*---------------------------------------------------------------------
Mail Inbox
-----------------------------------------------------------------------*/
.email-app-details.show {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.email-app-details {
  position: absolute;
  display: block;
  z-index: 6;
  visibility: hidden;
  opacity: 0;
  top: 0;
  width: calc(100% - 7px);
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  height: 100%;
  left: auto;
  right: 0;
  background-color: var(--iq-white);
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

.attegement ul {
  padding: 0;
  list-style: none;
}

.send-panel a {
  height: 30px;
  width: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 30px;
  display: inline-block;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  cursor: pointer;
}

#compose-email-popup {
  position: fixed;
  max-width: 700px;
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  padding: 0 !important;
  max-height: 555px;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#compose-email-popup .iq-card {
  border-radius: 15px 5px 0 0;
}

button.close-popup {
  background: transparent;
  color: var(--iq-black);
  border: none;
  font-size: 20px;
  line-height: 20px;
}

.compose-bottom {
  border-top: 1px solid var(--iq-body-text);
}

.select2-container--default .select2-selection--multiple {
  border-color: var(--iq-border-light);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  color: var(--iq-body-text);
  border-color: var(--iq-border-light);
  box-shadow: none;
}

/* colors changes in radio button, checkbox, switch */
.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none;
}

.custom-checkbox.custom-checkbox-color input.bg-primary~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-primary~label::before,
.custom-radio.custom-radio-color input.bg-primary~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-primary~label::before,
.custom-switch.custom-switch-color input:checked.bg-primary~label::before {
  background-color: var(--iq-primary) !important;
  border-color: var(--iq-primary) !important;
}

.custom-checkbox.custom-checkbox-color input.bg-success~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-success~label::before,
.custom-radio.custom-radio-color input.bg-success~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-success~label::before,
.custom-switch.custom-switch-color input:checked.bg-success~label::before {
  background-color: var(--iq-success) !important;
  border-color: var(--iq-success) !important;
}

.custom-checkbox.custom-checkbox-color input.bg-danger~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-danger~label::before,
.custom-radio.custom-radio-color input.bg-danger~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-danger~label::before,
.custom-switch.custom-switch-color input:checked.bg-danger~label::before {
  background-color: var(--iq-danger) !important;
  border-color: var(--iq-danger) !important;
}

.custom-checkbox.custom-checkbox-color input.bg-warning~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-warning~label::before,
.custom-radio.custom-radio-color input.bg-warning~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-warning~label::before,
.custom-switch.custom-switch-color input:checked.bg-warning~label::before {
  background-color: var(--iq-warning) !important;
  border-color: var(--iq-warning) !important;
}

.custom-checkbox.custom-checkbox-color input.bg-dark~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-dark~label::before,
.custom-radio.custom-radio-color input.bg-dark~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-dark~label::before,
.custom-switch.custom-switch-color input:checked.bg-dark~label::before {
  background-color: var(--iq-body-text) !important;
  border-color: var(--iq-body-text) !important;
}

.custom-checkbox.custom-checkbox-color input.bg-info~label::before,
.custom-checkbox.custom-checkbox-color-check input:checked.bg-info~label::before,
.custom-radio.custom-radio-color input.bg-info~label::before,
.custom-radio.custom-radio-color-checked input:checked.bg-info~label::before,
.custom-switch.custom-switch-color input:checked.bg-info~label::before {
  background-color: var(--iq-info) !important;
  border-color: var(--iq-info) !important;
}

/* checkbox with icon */
.custom-checkbox.checkbox-icon label i {
  position: absolute;
  top: 6px;
  left: -21px;
  font-size: 10px;
  transform: scale(0);
  -webkit-transform: scale(0);
  -webkit-transition: all .15s ease-in;
  transition: all .15s ease-in;
}

.custom-checkbox.checkbox-icon input:checked~label i {
  transform: scale(1);
  -webkit-transform: scale(1);
  color: var(--iq-white);
}

.custom-checkbox.checkbox-icon input:checked~label::after {
  display: none;
}

/* switch with icon */
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgb(78, 55, 178, .5);
}

.custom-switch.custom-switch-icon label .switch-icon-left,
.custom-switch.custom-switch-icon label .switch-icon-right,
.custom-switch.custom-switch-text label .switch-icon-left,
.custom-switch.custom-switch-text label .switch-icon-right {
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: -3px;
}

.custom-switch.custom-switch-icon label .switch-icon-left i,
.custom-switch.custom-switch-icon label .switch-icon-right i {
  font-size: 10px;
}

.custom-switch.custom-switch-icon label .switch-icon-left,
.custom-switch.custom-switch-text label .switch-icon-left {
  left: 8px;
  right: auto;
  color: var(--iq-white);
}

.custom-switch.custom-switch-icon label .switch-icon-right,
.custom-switch.custom-switch-text label .switch-icon-right {
  right: 5px;
  left: auto;
}

.custom-switch.custom-switch-icon,
.custom-switch.custom-switch-text {
  padding-left: 0;
}

.custom-switch.custom-switch-icon .custom-control-label {
  height: 20px;
  width: 42px;
  padding: 0;
}

.custom-switch.custom-switch-text .custom-control-label {
  width: 46px;
}

.custom-switch.custom-switch-icon .custom-control-label::before,
.custom-switch.custom-switch-text .custom-control-label::before {
  height: 20px;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  user-select: none;
  top: 0;
  left: 1px;
  width: 2.75rem;
}

.custom-switch.custom-switch-text .custom-control-label::before {
  width: 100%;
}

.custom-switch.custom-switch-icon .custom-control-label:after,
.custom-switch.custom-switch-text .custom-control-label:after {
  position: absolute;
  top: 1px;
  left: 2px;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  user-select: none;
  height: 18px;
  width: 18px
}

.custom-switch.custom-switch-icon .custom-control-input:checked~.custom-control-label::after {
  -webkit-transform: translateX(1.4rem);
  -ms-transform: translateX(1.4rem);
  transform: translateX(1.4rem);
}

.custom-switch.custom-switch-text .custom-control-input:checked~.custom-control-label::after {
  -webkit-transform: translateX(1.6rem);
  -ms-transform: translateX(1.6rem);
  transform: translateX(1.6rem);
}

.custom-switch-inner {
  display: block;
  text-align: center;
}

.custom-switch.custom-switch-text input:checked~label::before {
  color: var(--iq-white);
  content: attr(data-on-label);
  text-align: left;
}

.custom-switch.custom-switch-text label::before {
  color: var(--iq-black);
  content: attr(data-off-label);
  width: 2.85rem;
  height: 20px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 18px;
  text-align: right;
}

.custom-switch.custom-switch-text label:after {
  position: absolute;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  user-select: none;
  height: 16px;
  width: 16px;
}

.custom-switch.custom-switch-text input:checked~label.custom-control-label::after {
  transform: translateX(1.6rem);
  -webkit-transform: translateX(1.6rem);
}

.form-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-label-group>label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  padding: .6rem;
  color: var(--iq-body-text);
  font-size: .85rem;
  opacity: 0;
}

.counter-value {
  color: var(--iq-white);
  padding: 1px 6px;
  font-size: .6rem;
  border-radius: 0 0 5px 5px;
  margin-right: 1rem;
}

.vector-map.h-500 {
  width: 100%;
  height: 500px;
}

/*---------------------------------------------------------------------
slick Arrow
-----------------------------------------------------------------------*/
.slick-arrow.left {
  left: 0;
  top: 0;
}

.slick-arrow.right {
  right: 0;
  top: 0;
}

.slick-arrow {
  background: var(--iq-light-primary);
  padding: 11px;
  font-size: 24px;
  position: absolute;
  line-height: 90px;
  z-index: 9;
}

.slick-arrow:hover {
  text-decoration: none;
}

/*---------------------------------------------------------------------
Calender
-----------------------------------------------------------------------*/
.fc-unthemed .fc-toolbar .fc-button {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
  border: none;
  text-transform: capitalize;
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

.fc-unthemed .fc-toolbar .fc-button.fc-button-active,
.fc-unthemed .fc-toolbar .fc-button:active,
.fc-unthemed .fc-toolbar .fc-button:focus {
  color: var(--iq-white);
  background-color: var(--iq-primary);
}

.job-classification li,
.today-schedule li {
  list-style-type: none;
  margin-bottom: 10px;
}

.job-classification li>i,
.today-schedule li i {
  margin-right: 10px;
  border-radius: 50%;
  color: var(--iq-white);
}

.schedule-text span {
  display: block;
}

.calender-small .flatpickr-calendar.animate.inline {
  width: 100%;
  box-shadow: none;
}

.calender-small .dayContainer {
  width: 100%;
  min-width: auto;
}

.calender-small .flatpickr-days {
  width: 100%;
}

.calender-small .flatpickr-day.today {
  color: var(--iq-white);
  border-color: var(--iq-primary);
  background: var(--iq-primary);
}

.calender-small .flatpickr-day.today:hover,
.calender-small .flatpickr-day.today:focus {
  color: var(--iq-white);
  border-color: var(--iq-primary);
  background: var(--iq-primary)
}

.calender-small .flatpickr-months {
  margin-bottom: 10px;
}

.calender-small .flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 16px;
}

.calender-small .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: transparent;
  color: var(--iq-primary);
}

.calender-small .flatpickr-current-month input.cur-year {
  font-size: 16px;
}

.calender-small .numInputWrapper:hover {
  background: transparent;
}

.calender-small .flatpickr-months .flatpickr-prev-month,
.calender-small .flatpickr-months .flatpickr-next-month {
  padding: 7px 10px;
}

.calender-small .flatpickr-day.selected,
.calender-small .flatpickr-day.startRange,
.calender-small .flatpickr-day.endRange,
.calender-small .flatpickr-day.selected.inRange,
.calender-small .flatpickr-day.startRange.inRange,
.calender-small .flatpickr-day.endRange.inRange,
.calender-small .flatpickr-day.selected:focus,
.calender-small .flatpickr-day.startRange:focus,
.calender-small .flatpickr-day.endRange:focus,
.calender-small .flatpickr-day.selected:hover,
.calender-small .flatpickr-day.startRange:hover,
.calender-small .flatpickr-day.endRange:hover,
.calender-small .flatpickr-day.selected.prevMonthDay,
.calender-small .flatpickr-day.startRange.prevMonthDay,
.calender-small .flatpickr-day.endRange.prevMonthDay,
.calender-small .flatpickr-day.selected.nextMonthDay,
.calender-small .flatpickr-day.startRange.nextMonthDay,
.calender-small .flatpickr-day.endRange.nextMonthDay {
  color: var(--iq-white);
  border-color: var(--iq-primary);
  background: var(--iq-primary);
}

.calender-small .flatpickr-day.inRange,
.calender-small .flatpickr-day.prevMonthDay.inRange,
.calender-small .flatpickr-day.nextMonthDay.inRange,
.calender-small .flatpickr-day.today.inRange,
.calender-small .flatpickr-day.prevMonthDay.today.inRange,
.calender-small .flatpickr-day.nextMonthDay.today.inRange,
.calender-small .flatpickr-day:hover,
.calender-small .flatpickr-day.prevMonthDay:hover,
.calender-small .flatpickr-day.nextMonthDay:hover,
.calender-small .flatpickr-day:focus,
.calender-small .flatpickr-day.prevMonthDay:focus,
.calender-small .flatpickr-day.nextMonthDay:focus {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
  border-color: transparent;
}

.smaill-calender-home .flatpickr-calendar.animate.inline {
  margin: 0 auto;
  width: 100%;
  box-shadow: none;
  border: none;
  border-radius: 15px;
}

.smaill-calender-home .flatpickr-day.selected,
.smaill-calender-home .flatpickr-day.startRange,
.smaill-calender-home .flatpickr-day.endRange,
.smaill-calender-home .flatpickr-day.selected.inRange,
.smaill-calender-home .flatpickr-day.startRange.inRange,
.smaill-calender-home .flatpickr-day.endRange.inRange,
.smaill-calender-home .flatpickr-day.selected:focus,
.smaill-calender-home .flatpickr-day.startRange:focus,
.smaill-calender-home .flatpickr-day.endRange:focus,
.smaill-calender-home .flatpickr-day.selected:hover,
.smaill-calender-home .flatpickr-day.startRange:hover,
.smaill-calender-home .flatpickr-day.endRange:hover,
.smaill-calender-home .flatpickr-day.selected.prevMonthDay,
.smaill-calender-home .flatpickr-day.startRange.prevMonthDay,
.smaill-calender-home .flatpickr-day.endRange.prevMonthDay,
.smaill-calender-home .flatpickr-day.selected.nextMonthDay,
.smaill-calender-home .flatpickr-day.startRange.nextMonthDay,
.smaill-calender-home .flatpickr-day.endRange.nextMonthDay {
  color: var(--iq-white);
  text-decoration: none;
  background: var(--iq-primary);
  text-decoration: none;
  border-color: var(--iq-primary);
}

.smaill-calender-home .flatpickr-days,
.smaill-calender-home .dayContainer {
  width: 100%;
}

.smaill-calender-home .flatpickr-innerContainer {
  justify-content: space-around;
  margin-top: 30px;
}

.smaill-calender-home .flatpickr-current-month {
  left: 0;
}

.smaill-calender-home .flatpickr-months .flatpickr-prev-month,
.smaill-calender-home .flatpickr-months .flatpickr-next-month {
  height: 30px;
  width: 30px;
  line-height: 30px;
  background-color: #fafafb;
  padding: 0;
}

.smaill-calender-home .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.smaill-calender-home .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  left: auto;
  right: 40px;
}

.smaill-calender-home .flatpickr-months .flatpickr-prev-month:hover svg,
.smaill-calender-home .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--iq-primary);
}

/*---------------------------------------------------------------------
 Wizard
-----------------------------------------------------------------------*/
#form-wizard1,
#form-wizard2,
#form-wizard3 {
  position: relative;
}

#form-wizard1 input[type="file"] {
  line-height: 27px;
}

#form-wizard1 fieldset:not(:first-of-type) {
  display: none
}

.card {
  z-index: 0;
  border: none;
  position: relative
}

.steps {
  font-size: 20px;
  color: var(--iq-body-text);
  font-weight: normal;
  text-align: right
}

#top-tab-list {
  margin: 0 -10px 60px;
  overflow: hidden;
  color: var(--iq-body-text);
}

#top-tab-list .active {
  color: var(--iq-primary);
}

#top-tab-list li {
  list-style-type: none;
  font-size: 18px;
  width: 25%;
  float: left;
  text-align: left;
  position: relative;
  font-weight: 400
}

#top-tab-list li i {
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 50%;
  margin: 0 15px 0 0;
  color: var(--iq-white);
  background: var(--iq-primary);
}

#top-tab-list li.active a {
  color: var(--iq-white);
  background: var(--iq-primary);
}

#top-tab-list li.active.done a {
  background: var(--iq-success);
}

#top-tab-list li.active.done i {
  color: var(--iq-success);
}

#top-tab-list li#confirm.active a {
  background: var(--iq-success);
}

#top-tab-list li#confirm.active i {
  color: var(--iq-success);
}

#top-tab-list li a {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
  display: block;
  padding: 15px;
  margin: 0 10px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  text-decoration: none;
}

#top-tab-list li.active i {
  background-color: var(--iq-white);
  color: var(--iq-primary);
}

.fit-image {
  width: 100%;
  object-fit: cover
}

/* validate */
.stepwizard-row {
  display: block;
  margin: 0 -20px;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.setup-content {
  margin-top: 60px;
}

.wizard-step {
  font-size: 18px;
  width: 25%;
  float: left;
  position: relative;
  font-weight: 400;
  text-align: center;
}

.stepwizard-row .wizard-step a.btn {
  background: var(--iq-white);
  color: var(--iq-body-text);
  font-size: 18px;
  font-weight: 400;
  display: block;
  padding: 50px 15px;
  margin: 10px 20px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  text-decoration: none;
  border: 1px solid var(--iq-light-primary);
}

.stepwizard-row .wizard-step i {
  display: block;
  text-align: center;
  height: 65px;
  width: 65px;
  line-height: 65px;
  font-size: 25px;
  border-radius: 50%;
  margin: 0 auto 20px;
  color: var(--iq-white);
  background: var(--iq-primary);
}

.stepwizard-row #user.active a {
  background: var(--iq-light-primary);
  border-color: var(--iq-primary);
}

.stepwizard-row #document.active a {
  background: var(--iq-light-danger);
  border-color: var(--iq-danger);
}

.stepwizard-row #bank.active a {
  background: var(--iq-light-success);
  border-color: var(--iq-success);
}

.stepwizard-row #confirm.active a {
  background: var(--iq-light-warning);
  border-color: var(--iq-warning);
}

.stepwizard-row .wizard-step#user i {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
}

.stepwizard-row .wizard-step#document i {
  background: var(--iq-light-danger);
  color: var(--iq-danger);
}

.stepwizard-row .wizard-step#bank i {
  background: var(--iq-light-success);
  color: var(--iq-success);
}

.stepwizard-row .wizard-step#confirm i {
  background: var(--iq-light-warning);
  color: var(--iq-warning);
}

.stepwizard-row .wizard-step.active i {
  background-color: var(--iq-white) !important;
}

.stepwizard-row .wizard-step#document.active i {
  background: var(--iq-light-danger);
  color: var(--iq-danger);
}

.stepwizard-row .wizard-step#bank.active i {
  background: var(--iq-light-success);
  color: var(--iq-success);
}

.stepwizard-row .wizard-step#confirm.active i {
  background: var(--iq-light-warning);
  color: var(--iq-warning);
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: var(--iq-danger);
}

.has-error .form-control {
  border: 1px solid var(--iq-danger);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* vertical */
#form-wizard3 fieldset:not(:first-of-type) {
  display: none
}

#top-tabbar-vertical {
  overflow: hidden;
  color: var(--iq-body-text);
  margin: 0 -20px 60px;
}

#top-tabbar-vertical .active {
  color: var(--iq-primary);
}

#top-tabbar-vertical li {
  list-style-type: none;
  font-size: 18px;
  width: 100%;
  float: left;
  position: relative;
  font-weight: 400
}

#top-tabbar-vertical li i {
  display: inline-block;
  text-align: center;
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 50%;
  margin: 0 20px 0 0;
}

#top-tabbar-vertical li#personal i {
  background: var(--iq-light-primary);
  color: var(--iq-primary);
}

#top-tabbar-vertical li#contact i {
  background: var(--iq-light-danger);
  color: var(--iq-danger);
}

#top-tabbar-vertical li#official i {
  background: var(--iq-light-success);
  color: var(--iq-success);
}

#top-tabbar-vertical li#payment i {
  background: var(--iq-light-warning);
  color: var(--iq-warning);
}

#top-tabbar-vertical li.active a {
  border-color: transparent;
}

#top-tabbar-vertical li a {
  background: var(--iq-white);
  color: var(--iq-black);
  display: block;
  padding: 20px 15px;
  margin: 10px 20px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  text-decoration: none;
  border: 1px solid var(--iq-light-primary);
}

#top-tabbar-vertical li.active i {
  background-color: var(--iq-white);
  color: var(--iq-primary);
}

#top-tabbar-vertical #personal.active a {
  background: var(--iq-light-primary);
}

#top-tabbar-vertical #contact.active a {
  background: var(--iq-light-danger);
}

#top-tabbar-vertical #official.active a {
  background: var(--iq-light-success);
}

#top-tabbar-vertical #payment.active a {
  background: var(--iq-light-warning);
}

#top-tabbar-vertical li.active i {
  background: var(--iq-white) !important;
}

/*---------------------------------------------------------------------
Chat
-----------------------------------------------------------------------*/
.chat-page img {
  border-radius: 15px;
}

#chat-search {
  padding-left: 40px;
}

.form-group.chat-search-data>i {
  position: absolute;
  top: 8px;
  left: 15px;
  color: var(--iq-primary);
  font-size: 16px;
}

.chat-sidebar-name {
  width: 100%;
}

.chat-msg-counter {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  line-height: 16px;
  margin: 0 auto;
  font-size: 7px;
}

.chat-meta span {
  font-size: 8px;
}

span.avatar-status {
  position: absolute;
  bottom: -10px;
  top: auto;
  left: auto;
  right: 0;
}

.iq-chat-ui li a {
  text-decoration: none;
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--iq-border-light);
}

.iq-chat-ui li a.active {
  border-color: transparent;
}

.nav-pills li a.active {
  color: var(--iq-primary);
  background-color: var(--iq-light-primary);
}

.iq-chat-ui li:last-child a {
  border: none;
}

.iq-chat-ui li:nth-child(2) a,
.iq-chat-ui li:nth-child(6) a {
  border: none;
}

.chat-sidebar-channel {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100vh - 19rem);
  margin-bottom: 15px;
}

.chat-data {
  background: url(../images/page-img/100.jpg) no-repeat scroll center center;
  background-size: cover;
}

.chat-header-icons .dropdown-toggle:empty::after {
  display: none;
}

.chat-header-icons>a,
.chat-header-icons>span {
  width: 40px;
  height: 40px;
  font-size: 20px;
  margin: 0 5px 0 0;
  color: var(--iq-primary);
  display: inline-block;
  text-align: center;
  line-height: 40px;
  border-radius: 15px;
  cursor: pointer;
}

.chat-content {
  position: relative;
  height: calc(100vh - 17rem);
  text-align: center;
  padding: 1.4rem;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat-user {
  float: right;
  text-align: center;
}

.chat-user span.chat-time {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.chat-detail {
  overflow: hidden;
}

.chat-message {
  position: relative;
  float: right;
  text-align: right;
  padding: .75rem 1rem;
  margin: 0 1.33rem 1.33rem .3rem;
  clear: both;
  word-break: break-word;
  color: var(--iq-white);
  background: var(--iq-primary);
  border-radius: 15px;
  box-shadow: 0 2px 4px 0 rgb(80, 181, 255);
}

.chat-message>p {
  margin: 0;
}

.chat-left .chat-message::after {
  right: auto;
  left: -7px;
  border-width: 5px 7px 5px 0;
  border-color: transparent var(--iq-white) transparent transparent;
}

.chat-content .chat-left .chat-message {
  text-align: left;
  float: left;
  margin: 0 .3rem 1.8rem 1.3rem;
  color: var(--iq-body-text);
  background-color: var(--iq-white);
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
}

.chat-sidebar-channel .avatar,
.avatar {
  position: relative;
}

.chat-start {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 10rem);
  flex-direction: column;
}

span.iq-start-icon {
  font-size: 50px;
  background: var(--iq-white);
  width: 100px;
  text-align: center;
  border-radius: 50%;
}

.chat-attagement {
  font-size: 20px;
}

.chat-attagement a {
  color: var(--iq-body-text);
}

.chat-detail .chat-message .chat-time {
  position: absolute;
  bottom: -20px;
  right: 0;
  color: var(--iq-body-text);
  font-size: .8rem;
  white-space: nowrap;
}

.chat-left .chat-user {
  float: left;
}

.chat-content .chat-body .chat-message p {
  margin-bottom: 0;
}

.chat-data .tab-content {
  position: relative;
}

.chat-searchbar {
  position: relative;
}

.chat-user-detail-popup {
  position: absolute;
  top: 0;
  width: 360px;
  background: var(--iq-white);
  right: 0;
  overflow: hidden;
  left: auto;
  z-index: 9;
  height: 100%;
  opacity: 0;
  transform: translateX(110%);
  -webkit-transform: translateX(110%);
  transition: all 0.45s ease 0s;
  -webkit-transition: all 0.45s ease 0s;
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  border-radius: 15px;
  visibility: hidden;
}

.chat-user-detail-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  transition: all 0.45s ease 0s;
  -webkit-transition: all 0.45s ease 0s;
}

.chatuser-detail .title {
  font-weight: 500;
}

.chatuser-detail {
  padding: 0 35px;
}

.user-profile button.close-popup {
  display: block;
  font-size: 24px;
}

ul.user-status {
  list-style: none;
}

#user-detail-popup {
  position: absolute;
  top: 0;
  width: 310px;
  background: var(--iq-white);
  right: 0;
  overflow: hidden;
  left: auto;
  z-index: 9;
  height: 100%;
  opacity: 0;
  transform: translateX(-90%);
  -webkit-transform: translateX(-90%);
  transition: all 0.45s ease 0s;
  -webkit-transition: all 0.45s ease 0s;
  box-shadow: 0px 0px 20px 0px rgba(44, 101, 144, 0.1);
  border-radius: 15px;
  visibility: hidden;
}

#user-detail-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  transition: all 0.45s ease 0s;
  -webkit-transition: all 0.45s ease 0s;
}

#user-detail-popup .user-profile button.close-popup {
  text-align: right;
  width: 100%;
}

.chat-sidebar-channel h5 {
  border-bottom: 1px solid var(--iq-border-light);
  padding-bottom: 10px;
}

.chat-sidebar-name h6 {
  font-size: 14px;
}

.chat-sidebar-name span {
  color: var(--iq-body-text);
  font-size: 12px;
}

button.close-btn-res {
  display: none;
}

div.sidebar-toggle {
  display: none;
}

/*---------------------------------------------------------------------
Profile Page
-----------------------------------------------------------------------*/
.profile-img img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
}

.cover-container {
  position: relative;
}

ul.header-nav {
  position: absolute;
  left: auto;
  right: 0;
  top: auto;
  bottom: 20px;
}

ul.header-nav li {
  list-style: none;
}

ul.header-nav li a {
  display: block;
  list-style: none;
  height: 40px;
  width: 40px;
  background: var(--iq-white);
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  color: var(--iq-primary);
  font-size: 18px;
  margin: 0 15px 0 0;
}

.profile-feed-items li {
  list-style: none;
}

.profile-feed-items li:last-child a {
  margin: 0;
}

.profile-feed-items li a.nav-link {
  text-decoration: none;
  text-transform: capitalize;
  color: var(--iq-body-text);
  text-align: center;
}

.nav-pills.profile-feed-items li a.active {
  color: var(--iq-white);
  background: var(--iq-primary);
  border-radius: 15px;
}

.news-icon {
  font-size: 18px;
  margin-right: 20px;
}

ul.profile-img-gallary {
  list-style: none;
  margin: 0 -1px 0 -4px !important;
}

.twit-feed p span i {
  background: var(--iq-primary);
  color: var(--iq-white);
  height: 10px;
  width: 10px;
  border-radius: 50%;
  font-size: 10px;
}

.twit-feed .twit-meta-tag {
  color: var(--iq-primary);
}

.twit-feed .media-support-user-img img {
  height: 50px;
}

ul.media-story li>img,
ul.media-story li>i {
  line-height: 20px;
  font-size: 18px;
  /*height: 60px; width: 60px;  line-height: 60px; text-align: center; border: 1px solid rgba(0, 0, 0, .1); */
  padding: 2px;
  border-radius: 50%;
}

ul.media-story li.active img {
  border-color: var(--iq-primary);
}

.add-suggestion {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: var(--iq-primary);
}

.suggestions-lists .btn {
  display: block;
}

.feather-icon a,
.message-icon a {
  color: var(--iq-body-text);
  font-weight: 300;
}

.feather-icon a:hover,
.message-icon a:hover {
  color: var(--iq-primary);
}

ul.post-comments {
  list-style: none;
}

.comment-activity>a {
  margin-right: 10px;
  text-transform: capitalize;
  color: var(--iq-primary);
  text-decoration: none;
}

form.comment-text {
  position: relative;
}

form.comment-text input {
  padding-right: 130px;
}

.comment-attagement {
  position: absolute;
  left: auto;
  right: 0;
  font-size: 20px;
}

.comment-attagement a {
  color: var(--iq-body-text);
}

#profile-activity .iq-timeline li {
  margin-bottom: 15px;
}

#profile-activity .course-timeline-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 150px minmax(0, 1fr) auto; min-height: 60px; }
#profile-activity .course-timeline-date { color: #4b5563; display: block; font-size: 14px; line-height: 1.35; white-space: nowrap; }
#profile-activity .course-timeline-date span, #profile-activity .course-timeline-date em { display: block; }
#profile-activity .course-timeline-date em { color: #667085; font-style: normal; margin-top: 2px; }
#profile-activity .course-timeline-main { align-self: center; min-width: 0; padding-right: 12px; }
#profile-activity .course-timeline-main h6 { color: #111827; font-size: 18px; font-weight: 500; line-height: 1.35; margin: 0 0 8px; max-width: 520px; }
#profile-activity .course-timeline-side { align-items: flex-end; display: flex; justify-content: center; min-width: 172px; text-align: right; }
#profile-activity .course-timeline-action { background: #fff; border: 1px solid #c8d1de; border-radius: 8px; color: #475467; display: inline-flex; font-size: 13px; font-weight: 500; justify-content: center; line-height: 1; min-width: 142px; padding: 10px 12px; white-space: nowrap; }
#profile-activity .course-timeline-action:hover { background: #f8fafc; border-color: #98a6b8; color: #111827; }
@media (max-width: 767px) { #profile-activity .course-timeline-row { align-items: flex-start; gap: 8px 14px; grid-template-columns: minmax(0, 1fr); min-height: 0; } #profile-activity .course-timeline-date { white-space: normal; } #profile-activity .course-timeline-main { padding-right: 0; } #profile-activity .course-timeline-main h6 { font-size: 16px; max-width: none; } #profile-activity .course-timeline-side { align-items: flex-start; min-width: 0; text-align: left; } #profile-activity .course-timeline-action { min-width: 0; } }

.about-info a,
div#profile-profile a {
  color: var(--iq-body-text);
}

.twit-date a {
  color: var(--iq-body-text);
}

/*---------------------------------------------------------------------
Profile Edit 
-----------------------------------------------------------------------*/
.profile-pic {
  max-width: 100%;
  display: block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.profile-img-edit {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
}

.file-upload {
  display: none;
}

.p-image {
  position: absolute;
  top: auto;
  right: 8px;
  bottom: 10px;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  background: var(--iq-primary);
  color: var(--iq-white);
  border-radius: 50%;
  height: 30px;
  width: 30px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

.upload-button {
  font-size: 1.5em;
}

.iq-edit-profile .nav-link {
  padding: 20px 15px;
  border-radius: 0;
  color: var(--iq-body-text);
  text-align: center;
  font-size: 16px;
  border-left: 1px solid var(--iq-light-primary);
}

.iq-edit-profile.nav-pills .nav-link.active,
.iq-edit-profile.nav-pills .show>.nav-link {
  color: var(--iq-white);
  background: var(--iq-primary);
}

ul.iq-edit-profile li:first-child a {
  border-radius: 15px 0 0 15px;
  border-left: none;
}

ul.iq-edit-profile li:last-child a {
  border-radius: 0 15px 15px 0;
}

/*---------------------------------------------------------------------
Todo Page
-----------------------------------------------------------------------*/
.iq-todo-page .search-link,
.iq-todo-right .search-link {
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 18px;
  line-height: 43px;
  color: var(--iq-body-text);
}

.iq-todo-page .todo-search,
.iq-todo-right .todo-search {
  padding-left: 35px;
}

.add-new-project>a {
  padding: 0 15px;
  color: var(--iq-body-text);
  text-transform: capitalize;
  text-decoration: none;
}

.notification-icon>span {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  line-height: 15px;
  font-size: 8px;
  text-align: center;
  position: absolute;
  top: -5px;
  left: auto;
  right: -8px;
}

.todo-date {
  font-size: 16px;
}

.iq-todo-page ul {
  list-style: none;
}

.iq-todo-page ul li a {
  color: var(--iq-body-text);
  text-decoration: none;
}

.iq-todo-page ul ul li a {
  padding-left: 25px;
}

.iq-todo-page ul>li>a {
  padding: 10px 15px;
  display: block;
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

.iq-todo-page ul>li[aria-expanded="true"]>a {
  color: var(--iq-primary);
  background: var(--iq-light-primary);
}

.iq-todo-page ul>li li:hover a,
.iq-todo-page ul>li li.active a {
  color: var(--iq-primary);
  background: var(--iq-light-primary);
}

ul.todo-task-lists li:hover {
  background: var(--iq-light-primary);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

ul.todo-task-lists li.active-task {
  background: var(--iq-light-primary);
}

.media-support-info p {
  line-height: normal;
  font-size: 0.7rem;
}

.todo-task-list .sub-task {
  display: none;
}

.todo-task-list .sub-task.show {
  display: block;
}

/*---------------------------------------------------------------------
Privacy Policy Page
-----------------------------------------------------------------------*/
.privacy-status {}

.input-group .input-group-text {
  background: var(--iq-light);
  border: 0px solid var(--iq-border-light);
}

.data-privacy {
  margin: 30px 0;
}

/*---------------------------------------------------------------------
User List Page
-----------------------------------------------------------------------*/
.list-user-action a {
  font-size: 16px;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  margin: 0 3px;
  display: inline-block;
  border-radius: 15px;
}

#user-list-table.table td {
  vertical-align: middle;
}

.user-list-files a {
  padding: 10px 15px;
  margin: 0 0 0 10px;
  border-radius: 15px;
  line-height: normal;
}

.table-responsive #exampleInputSearch {
  width: auto;
}

/*---------------------------------------------------------------------
Add User Page
-----------------------------------------------------------------------*/
.add-img-user .p-image {
  position: static;
  text-align: left;
  display: block;
  height: auto;
  width: auto;
  background: transparent;
  margin-top: 20px;
}

.img-extension a,
.img-extension span {
  color: var(--iq-body-text);
  padding: 0 3px;
  font-size: 13px;
}

.iq-card-block a p {
  color: var(--iq-body-text) !important;
}

.card-title {
  display: inline-block;
}

.section-title .badge {
  top: -4px;
  position: relative;
}

.section-title .ri-arrow-right-s-line {
  top: 1px;
  position: relative;
  margin-right: 5px;
}

.course-style .accordion-active i.ri-arrow-right-s-line {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
  display: inline-block;
}

.fl-right button {
  float: right;
}

.fit {
  width: fit-content;
}

.bl-at {
  display: inline-block;
  width: fit-Content;
}

.brbt {
  /* border-bottom: 1px solid #ececec;  */
  padding-bottom: 10px;
  padding-top: 20px;
}

.iq-card-header {
  background: #ebebeb;
}

.course-style .iq-accordion-block .iq-card-header {
  border-radius: 15px;
}

.course-style .iq-accordion-block.accordion-active .iq-card-header {
  border-radius: 15px 15px 0 0;
}

.course-section-progress { flex: 1; min-width: 0; }
.course-section-heading { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.course-section-heading .card-title { align-items: center; display: flex; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.course-progress-summary { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }
.course-progress-count { background: #fff; border: 1px solid #d8dee7; border-radius: 8px; color: #596273; flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 6px 9px; }
.course-progress-count strong { color: #237a3b; }
.course-progress-count.is-untracked { color: #8a94a3; font-weight: 500; }
.course-progress-track { background: #d9dee6; border-radius: 8px; height: 6px; overflow: hidden; width: 82px; }
.course-progress-track span { background: #2f8f46; display: block; height: 100%; transition: width .3s ease; }
.course-progress-percent { color: #4c5866; flex: 0 0 44px; font-size: 11px; text-align: right; white-space: nowrap; }
.course-header-actions { align-items: center; display: flex; gap: 12px; justify-content: flex-end; min-width: 0; }
.overall-course-progress { align-items: center; background: #fff; border: 1px solid #edf0f2; border-radius: 18px; box-shadow: 0 2px 8px rgba(32, 45, 58, .06); color: #343a40; display: flex; flex: 0 0 auto; gap: 9px; min-width: 0; padding: 6px 11px; white-space: nowrap; }
.overall-course-progress-track { background: #d8d8d8; border-radius: 10px; flex: 0 1 142px; height: 8px; overflow: hidden; width: 142px; }
.overall-course-progress-track span { background: #07865f; border-radius: inherit; display: block; height: 100%; transition: width .3s ease; }
.overall-course-progress-percent, .overall-course-progress-count { align-items: center; display: inline-flex; font-size: 14px; gap: 5px; }
.overall-course-progress-percent i { font-size: 19px; line-height: 1; }
.overall-course-progress-count i { align-items: center; border: 1px solid #9ca3a8; border-radius: 50%; display: inline-flex; font-size: 14px; height: 21px; justify-content: center; line-height: 1; width: 21px; }
.overall-course-progress-divider { align-self: stretch; background: #e0e0e0; width: 1px; }
.course-support-button { align-items: center; border-radius: 50% !important; display: inline-flex; font-size: 21px; height: 40px; justify-content: center; padding: 0; width: 40px; }
.course-support-menu .dropdown-toggle::after { display: none; }
.course-content-page .profile-info > .row { flex-wrap: nowrap; justify-content: space-between; }
.course-content-page .profile-info > .row > .col-md-6:first-child { flex: 1 1 auto; max-width: none; min-width: 0; width: auto; }
.course-content-page .profile-info > .row > .col-md-6:last-child { flex: 0 0 auto; max-width: none; min-width: 0; width: auto; }
.course-content-page .profile-feed-items { flex-wrap: nowrap; gap: 16px; min-width: 0; }
.course-content-page .profile-feed-items li { flex: 0 0 auto; }
.course-content-page .profile-feed-items li a.nav-link { margin: 0; white-space: nowrap; }
.course-content-page .course-header-actions { flex-wrap: nowrap; }
.course-content-page .course-header-actions .user-detail > .d-flex { flex-wrap: nowrap !important; }
.course-content-page .course-header-actions .profile-detail { min-width: 0; }
.course-content-page .course-header-actions .profile-detail h4,
.course-content-page .course-header-actions .profile-detail p { white-space: nowrap; }
@media (max-width: 991px) {
  .course-content-page .profile-info > .row { flex-wrap: wrap; }
  .course-content-page .profile-info > .row > .col-md-6:first-child,
  .course-content-page .profile-info > .row > .col-md-6:last-child { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .course-content-page .course-header-actions { justify-content: flex-start; margin-top: 14px; }
}
.scorm-activity-header { align-items: center; display: flex; justify-content: space-between; padding: 20px 24px; }
.scorm-eyebrow, .scorm-section-heading span { color: #768196; display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scorm-attempt-badge { background: #e9e4ff; border-radius: 20px; color: #5138bd; font-size: 12px; font-weight: 700; padding: 7px 12px; }
.scorm-intro { margin-bottom: 22px; }
.scorm-launch-action { margin: 4px 0 26px; }
.scorm-launch-action .btn { min-width: 160px; }
.scorm-summary-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; }
.scorm-summary-grid > div { background: #f7f8fb; border: 1px solid #edf0f4; border-radius: 12px; padding: 16px; }
.scorm-summary-grid span { color: #778195; display: block; font-size: 12px; margin-bottom: 7px; }
.scorm-summary-grid strong { color: #242b3a; display: block; font-size: 15px; }
.scorm-completion-panel { align-items: center; background: linear-gradient(135deg, #f8f7ff 0%, #f5f8ff 100%); border: 1px solid #e7e3f8; border-radius: 14px; display: flex; gap: 28px; justify-content: space-between; margin: -6px 0 22px; padding: 18px 20px; }
.scorm-completion-heading { align-items: center; display: flex; flex: 0 0 auto; gap: 12px; }
.scorm-completion-heading h5 { color: #242b3a; font-size: 15px; margin: 0 0 3px; }
.scorm-completion-heading p { color: #778195; font-size: 12px; margin: 0; }
.scorm-completion-icon { align-items: center; background: #e9e4ff; border-radius: 10px; color: #6247c7; display: inline-flex; font-size: 20px; height: 40px; justify-content: center; width: 40px; }
.scorm-completion-list { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.scorm-completion-item { align-items: center; background: #fff; border: 1px solid #e2e5eb; border-radius: 20px; color: #4e596b; display: inline-flex; font-size: 13px; font-weight: 600; gap: 7px; padding: 7px 11px; }
.scorm-completion-item i { color: #929bad; font-size: 16px; }
.scorm-completion-item.is-complete { background: #edf9f2; border-color: #cdebd9; color: #237a4b; }
.scorm-completion-item.is-complete i { color: #2d9b61; }
.folder-activity-header { align-items: center; display: flex; justify-content: space-between; padding: 20px 24px; }
.folder-title, .folder-browser-heading { align-items: center; display: flex; gap: 13px; }
.folder-title h4 { margin: 2px 0 0; }
.folder-eyebrow, .folder-browser-heading > div > span { color: #778195; display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.folder-title-icon { align-items: center; background: #fff3d6; border-radius: 12px; color: #d88a0d; display: inline-flex; flex: 0 0 auto; font-size: 24px; height: 46px; justify-content: center; width: 46px; }
.folder-file-count { background: #fff3d6; border-radius: 20px; color: #a86600; font-size: 12px; font-weight: 700; padding: 7px 12px; }
.folder-description { margin-bottom: 22px; }
.folder-summary { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 180px)); margin-bottom: 20px; }
.folder-summary > div { background: #f7f8fb; border: 1px solid #edf0f4; border-radius: 12px; padding: 14px 16px; }
.folder-summary span { color: #778195; display: block; font-size: 12px; margin-bottom: 5px; }
.folder-summary strong { color: #242b3a; font-size: 17px; }
.folder-completion-panel { align-items: center; background: #f8f7ff; border: 1px solid #e7e3f8; border-radius: 14px; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 20px; padding: 16px 18px; }
.folder-completion-panel h5 { font-size: 15px; margin: 0 0 3px; }
.folder-completion-panel p { color: #778195; font-size: 12px; margin: 0; }
.folder-completion-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.folder-completion-item { align-items: center; background: #fff; border: 1px solid #e2e5eb; border-radius: 20px; color: #4e596b; display: inline-flex; font-size: 13px; font-weight: 600; gap: 7px; padding: 7px 11px; }
.folder-completion-item i { color: #929bad; font-size: 16px; }
.folder-completion-item.is-complete { background: #edf9f2; border-color: #cdebd9; color: #237a4b; }
.folder-completion-item.is-complete i { color: #2d9b61; }
.folder-open-button { min-width: 150px; }
.folder-empty { align-items: center; background: #f7f8fb; border: 1px dashed #cfd5df; border-radius: 12px; color: #778195; display: flex; flex-direction: column; justify-content: center; min-height: 160px; padding: 28px; text-align: center; }
.folder-empty i { color: #d89a2b; font-size: 34px; }
.folder-empty p { margin: 8px 0 0; }
.folder-browser-page { background: #f4f6f9; min-height: 100vh; }
.folder-browser-header { align-items: center; background: #fff; border-bottom: 1px solid #e7eaf0; display: flex; justify-content: space-between; padding: 14px 28px; }
.folder-browser-heading h1 { font-size: 19px; margin: 2px 0 0; }
.folder-browser-content { margin: 0 auto; max-width: 1080px; padding: 28px 20px 50px; }
.folder-browser-description { background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; margin-bottom: 16px; padding: 18px; }
.folder-browser-list { display: flex; flex-direction: column; gap: 10px; }
.folder-file-row { align-items: center; background: #fff; border: 1px solid #e7eaf0; border-radius: 13px; display: flex; gap: 14px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.folder-file-row:hover { border-color: #d7d0f5; box-shadow: 0 5px 18px rgba(49, 40, 87, .07); }
.folder-file-icon { align-items: center; background: #f3f0ff; border-radius: 10px; color: #654ac9; display: inline-flex; flex: 0 0 auto; font-size: 22px; height: 42px; justify-content: center; width: 42px; }
.folder-file-info { min-width: 0; flex: 1; }
.folder-file-info h2 { font-size: 15px; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-file-info span { color: #7b8494; font-size: 12px; }
.folder-file-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.folder-file-actions .btn { font-size: 12px; padding: 7px 11px; }
.course-grades-dashboard { background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; overflow: hidden; }
.course-grades-header { align-items: center; border-bottom: 1px solid #e8ebf0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.course-grades-header h4 { color: #242b3a; font-size: 18px; margin: 0; }
.course-grades-header p { color: #7b8494; font-size: 13px; margin: 3px 0 0; }
.course-grade-print-btn { flex: 0 0 auto; font-size: 13px; }
.course-fellow.is-hidden { display: none !important; }
.course-contact-btn { align-items: center; background: transparent; border: 0; color: #5236c7; cursor: pointer; display: inline-flex; font-size: 20px; justify-content: center; padding: 5px; }
.course-contact-btn:disabled { cursor: wait; opacity: .55; }
.course-contact-state { align-items: center; display: inline-flex; font-size: 20px; justify-content: center; padding: 5px; }
.course-contact-state.is-sent { color: #9a6700; }
.course-contact-state.is-friend { color: #218653; }
.course-fellow .media-support-info { min-width: 0; }
.course-fellow .media-support-info h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-chat-widget { background: #fff; border: 1px solid #e2e6ed; border-radius: 15px 15px 0 0; bottom: 0; box-shadow: 0 12px 40px #24304a38; display: none; flex-direction: column; height: 470px; max-height: calc(100vh - 90px); overflow: hidden; position: fixed; right: 24px; width: 350px; z-index: 1090; }
.course-chat-widget.is-open { display: flex; }
.course-chat-widget-head { align-items: center; background: #5236c7; color: #fff; display: flex; gap: 10px; min-height: 64px; padding: 11px 13px; }
.course-chat-widget-head img { border: 2px solid #ffffff88; border-radius: 50%; height: 40px; object-fit: cover; width: 40px; }
.course-chat-widget-head > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.course-chat-widget-head strong { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-chat-widget-head small { color: #ddd6ff; font-size: 10px; }
.course-chat-widget-head a, .course-chat-widget-head button { background: transparent; border: 0; color: #fff; font-size: 18px; padding: 5px; }
.course-chat-widget-messages { background: #f7f8fb; display: flex; flex: 1; flex-direction: column; gap: 5px; overflow-y: auto; padding: 12px; }
.course-chat-widget-messages > p { color: #8992a2; margin: auto; text-align: center; }
.course-chat-widget-bubble { align-self: flex-start; display: flex; flex-direction: column; max-width: 82%; }
.course-chat-widget-bubble span { background: #fff; border: 1px solid #e2e6ed; border-radius: 4px 11px 11px; color: #303746; font-size: 12px; line-height: 1.35; padding: 7px 9px; white-space: pre-wrap; word-break: break-word; }
.course-chat-widget-bubble small { color: #929aaa; font-size: 8px; padding: 2px 3px; }
.course-chat-widget-bubble.is-mine { align-self: flex-end; text-align: right; }
.course-chat-widget-bubble.is-mine span { background: #5236c7; border-color: #5236c7; border-radius: 11px 4px 11px 11px; color: #fff; text-align: left; }
.course-chat-widget-compose { align-items: center; border-top: 1px solid #e4e8ef; display: flex; gap: 7px; padding: 9px; }
.course-chat-widget-compose textarea { border: 1px solid #dce1e9; border-radius: 10px; flex: 1; font-size: 12px; min-height: 39px; outline: 0; padding: 9px; resize: none; }
.course-chat-widget-compose button { background: #5236c7; border: 0; border-radius: 9px; color: #fff; height: 39px; width: 39px; }
.course-mentor-chat { align-items: center; background: #f1eeff; border-radius: 50%; color: #5236c7; display: inline-flex; flex: 0 0 auto; font-size: 18px; height: 38px; justify-content: center; width: 38px; }
.course-support-menu .add-suggestion { align-items: center; display: flex; gap: 9px; }
.course-support-menu .add-suggestion a { color: #5236c7; font-size: 18px; }
@media (max-width: 575px) { .course-chat-widget { border-radius: 14px 14px 0 0; left: 8px; right: 8px; width: auto; } }
.dashboard-courses { margin-bottom: 30px; margin-top: 10px; }
.dashboard-courses-header { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; }
.dashboard-courses-header span { color: #2563eb; display: block; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-courses-header h4 { color: #151b2b; font-size: 22px; font-weight: 500; margin: 3px 0 0; }
.dashboard-courses-header a { align-items: center; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 8px; color: #2563eb; display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; padding: 9px 12px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.dashboard-courses-header a:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; transform: translateY(-1px); }
.dashboard-courses-header button { align-items: center; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 8px; color: #2563eb; cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; min-height: 39px; padding: 9px 12px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.dashboard-courses-header button:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; transform: translateY(-1px); }
.dashboard-courses-header .dashboard-interest-edit { font-size: 17px; height: 40px; justify-content: center; min-height: 40px; padding: 0; width: 40px; }
.dashboard-courses-header > strong { background: #e8f5ef; border: 1px solid #ccebdc; border-radius: 8px; color: #147a45; font-size: 12px; font-weight: 800; padding: 8px 11px; white-space: nowrap; }
.dashboard-interest-alert { align-items: center; border-radius: 8px; display: flex; gap: 8px; margin-bottom: 16px; }
.dashboard-interest-success-modal .modal-dialog { max-width: 460px; }
.dashboard-interest-success-modal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 24px 60px rgba(16,24,40,.24); }
.dashboard-interest-success-modal .modal-body { align-items: center; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 28px; text-align: center; }
.dashboard-interest-success-modal .modal-body > i { align-items: center; background: #e6fff6; border: 1px solid #bdf7e2; border-radius: 50%; color: #00d199; display: flex; font-size: 30px; height: 58px; justify-content: center; width: 58px; }
.dashboard-interest-success-modal h5 { color: #101828; font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0; }
.dashboard-interest-success-modal button { background: #00d199; border: 1px solid #00d199; border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 40px; min-width: 96px; padding: 0 18px; }
.dashboard-career-card .iq-card-body { display: flex; height: 100%; }
.dashboard-skill-cta { align-items: flex-start; background: #f7f8ff; border: 1px solid #e3e6ff; border-radius: 8px; display: flex; gap: 14px; justify-content: space-between; margin: 0; min-height: 132px; padding: 22px 88px 24px 22px; position: relative; width: 100%; }
.dashboard-skill-cta strong, .dashboard-skill-cta span { display: block; }
.dashboard-skill-cta strong { color: #101828; font-size: 20px; line-height: 1.18; max-width: 245px; }
.dashboard-skill-cta span { color: #667085; font-size: 14px; line-height: 1.35; margin-top: 8px; max-width: 230px; }
.dashboard-skill-cta button { align-items: center; background: linear-gradient(135deg, #635bff 0%, #20c5a8 100%); border: 0; border-radius: 50%; bottom: 20px; box-shadow: 0 12px 24px rgba(79, 70, 229, .28); color: #fff; cursor: pointer; display: inline-flex; flex: 0 0 50px; font-size: 24px; height: 50px; justify-content: center; padding: 0; position: absolute; right: 22px; transition: box-shadow .2s ease, transform .2s ease; width: 50px; }
.dashboard-skill-cta button:hover { box-shadow: 0 16px 30px rgba(79, 70, 229, .36); transform: translate(3px, -3px); }
.dashboard-skill-cta button:focus { box-shadow: 0 0 0 4px rgba(99, 91, 255, .18), 0 12px 24px rgba(79, 70, 229, .28); outline: 0; }
.dashboard-top-picks { background: #fff; border: 1px solid #eceff5; border-radius: 8px; flex: 0 0 calc(100% - 30px); margin: 4px 15px 30px; max-width: calc(100% - 30px); padding: 18px 20px 10px; }
.dashboard-top-picks .dashboard-courses-header { margin-bottom: 12px; }
.dashboard-top-picks .dashboard-courses-header h4 { font-size: 20px; }
.dashboard-top-picks .dashboard-course-card { box-shadow: none; }
.dashboard-top-pick-card .dashboard-course-image { aspect-ratio: 16 / 7; }
.dashboard-top-pick-card .dashboard-course-overlay { padding: 9px; }
.dashboard-top-pick-card .dashboard-course-overlay span { font-size: 10px; padding: 5px 7px; }
.dashboard-top-pick-card .dashboard-course-content { padding: 12px 14px 14px; }
.dashboard-top-pick-card .dashboard-course-category { display: -webkit-box; font-size: 10px; line-height: 1.35; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-top-pick-card .dashboard-course-content h5 { font-size: 15px; line-height: 1.35; margin: 8px 0 10px; min-height: 41px; overflow-wrap: anywhere; }
.dashboard-top-pick-card .dashboard-course-tags { margin: 0; }
.career-interest-modal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 28px 70px rgba(16,24,40,.22); overflow: hidden; }
.career-interest-modal .modal-dialog { max-width: min(1280px, calc(100vw - 80px)); width: min(1280px, calc(100vw - 80px)); }
.career-interest-modal .modal-header { align-items: center; background: linear-gradient(135deg, #f8f9ff, #ffffff); border-bottom: 1px solid #edf0f6; padding: 22px 24px; }
.career-interest-modal .modal-header span { color: #4f46e5; display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.career-interest-modal .modal-title { color: #101828; font-size: 22px; font-weight: 700; margin: 3px 0 0; }
.career-interest-modal .close { align-items: center; background: #f2f4f7; border-radius: 50%; color: #344054; display: flex; height: 38px; justify-content: center; margin: 0; opacity: 1; padding: 0; text-shadow: none; width: 38px; }
.career-interest-modal .modal-body { padding: 24px; }
.career-interest-intro { align-items: center; background: #f7fbff; border: 1px solid #e4eefc; border-radius: 8px; display: flex; gap: 15px; margin-bottom: 18px; padding: 16px; }
.career-interest-intro > i { align-items: center; background: #e8f0ff; border-radius: 8px; color: #2563eb; display: flex; flex: 0 0 48px; font-size: 25px; height: 48px; justify-content: center; width: 48px; }
.career-interest-intro strong { color: #101828; display: block; font-size: 16px; }
.career-interest-intro p { color: #667085; font-size: 13px; line-height: 1.55; margin: 4px 0 0; }
.career-interest-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.career-interest-option { background: #fff; border: 1px solid #e3e8f0; border-radius: 8px; cursor: pointer; display: grid; gap: 6px; margin: 0; min-height: 106px; padding: 14px 14px 13px; position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.career-interest-option input { opacity: 0; position: absolute; }
.career-interest-option > span { align-items: center; background: #f2f4f7; border-radius: 50%; color: transparent; display: flex; height: 24px; justify-content: center; margin-left: auto; width: 24px; }
.career-interest-option strong { color: #111827; font-size: 14px; font-weight: 700; }
.career-interest-option small { color: #667085; font-size: 11px; line-height: 1.35; }
.career-interest-option:hover, .career-interest-option.is-selected { border-color: #635bff; box-shadow: 0 14px 30px rgba(79,70,229,.12); transform: translateY(-2px); }
.career-interest-option.is-selected > span { background: #4f46e5; color: #fff; }
.career-skill-toggle { align-items: center; background: transparent; border: 0; color: #4f46e5; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 3px; justify-self: start; line-height: 1; margin-top: 4px; padding: 0; }
.career-skill-toggle i { font-size: 15px; transition: transform .2s ease; }
.career-interest-option.is-open .career-skill-toggle i { transform: rotate(180deg); }
.career-skill-tags { display: none; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.career-interest-option.is-open .career-skill-tags { display: flex; }
.career-skill-tags b { background: #f3f5ff; border: 1px solid #e2e6ff; border-radius: 999px; color: #475467; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; padding: 6px 8px; }
.career-interest-modal .modal-footer { border-top: 1px solid #edf0f6; gap: 10px; padding: 18px 24px; }
.career-interest-modal .modal-footer button { border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 40px; padding: 0 18px; }
.career-interest-modal .modal-footer button[type="button"] { background: #fff; border: 1px solid #dfe5ee; color: #475467; }
.career-interest-modal .modal-footer button[type="submit"] { background: #4f46e5; border: 1px solid #4f46e5; color: #fff; }
.my-courses-page { margin-top: 0; padding-bottom: 24px; }
.course-filter-bar { align-items: center; display: flex; flex-wrap: nowrap; gap: 7px; margin: 0 0 22px; max-width: 100%; overflow: visible; }
.course-filter-search, .course-filter-select, .course-filter-submit, .course-filter-clear { align-items: center; background: #fff; border: 1px solid #d8e1ef; border-radius: 20px; color: #111827; display: inline-flex; flex: 0 1 auto; gap: 6px; min-height: 36px; min-width: 0; padding: 0 10px; white-space: nowrap; }
.course-filter-search { flex: 1 1 190px; max-width: 250px; }
.course-filter-search.course-filter-tag { flex: 0 1 130px; max-width: 145px; }
.course-filter-sort { flex-basis: 188px; max-width: 196px; min-width: 176px; }
.course-filter-category { flex-basis: 265px; max-width: 290px; min-width: 210px; }
.course-filter-level { flex-basis: 145px; max-width: 155px; min-width: 128px; }
.course-filter-search input, .course-filter-select select { background: transparent; border: 0; color: #111827; font-size: 13px; font-weight: 400; outline: 0; }
.course-filter-search input { min-width: 0; width: 100%; }
.course-filter-search input::placeholder { color: #8a94a6; font-weight: 500; }
.course-filter-select { min-width: 128px; padding-left: 34px; padding-right: 34px; position: relative; }
.course-filter-select select { appearance: none; cursor: pointer; inset: 0; min-width: 0; padding: 0 38px 0 34px; position: absolute; width: 100%; }
.course-filter-select > i:first-child { left: 11px; position: absolute; z-index: 1; }
.course-filter-select > i.ri-arrow-down-s-line { color: #111827; font-size: 16px; pointer-events: none; position: absolute !important; right: 12px !important; z-index: 3; }
.course-filter-search > i, .course-filter-select > i:first-child, .course-filter-submit i, .course-filter-clear i { color: #111827; font-size: 14px; }
.course-filter-select.is-enhanced select { opacity: 0; pointer-events: none; }
.course-filter-select-button { background: transparent; border: 0; color: #111827; cursor: pointer; font-size: 13px; font-weight: 400; inset: 0; overflow: hidden; padding: 0 38px 0 34px; position: absolute; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; z-index: 2; }
.course-filter-select.is-open { border-color: #9bc4ff; box-shadow: 0 8px 22px rgba(37, 99, 235, .12); z-index: 12; }
.course-filter-select.is-open > i:last-child { transform: rotate(180deg); }
.course-filter-options { background: #fff; border: 1px solid #d8e1ef; border-radius: 8px; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); box-sizing: border-box; display: none; left: 0; list-style: none; margin: 8px 0 0; max-height: 240px; min-width: 100%; overflow-y: auto; padding: 4px; position: absolute; top: 100%; width: 100%; z-index: 30; }
.course-filter-options li { margin: 0; padding: 0; }
.course-filter-category .course-filter-options { width: min(390px, calc(100vw - 48px)); }
.course-filter-select.is-open .course-filter-options { display: block; }
.course-filter-options button { background: transparent; border: 0; border-radius: 6px; box-sizing: border-box; color: #1f2937; cursor: pointer; display: block; font-size: 13px; font-weight: 500; line-height: 1.25; min-height: 32px; overflow: hidden; padding: 8px 10px; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.course-filter-options button:hover { background: #eef6ff; color: #1d4ed8; }
.course-filter-options button.is-selected { background: #2563eb; color: #fff; }
.my-courses-page .course-filter-select,
.explore-courses-page .course-filter-select { border-radius: 20px; min-height: 36px; }
.my-courses-page .course-filter-options,
.explore-courses-page .course-filter-options { border-radius: 8px; padding: 4px; }
.my-courses-page .course-filter-options button,
.explore-courses-page .course-filter-options button { border-radius: 6px; min-height: 32px; padding: 8px 10px; }
.course-filter-divider { align-self: stretch; background: #cbd5e1; flex: 0 0 1px; margin: 0 5px; width: 1px; }
.course-filter-submit { cursor: pointer; flex: 0 0 auto; font-size: 13px; font-weight: 400; transition: background .2s ease, border-color .2s ease, transform .2s ease; margin-top: -8px;}
.course-filter-submit:hover { background: #f8fbff; border-color: #bdd7ff; transform: translateY(-1px); }
.course-filter-clear { color: #ee7b07; font-size: 13px; font-weight: 400; margin-top: -8px; }
.course-filter-clear:hover { background: #fff5f5; border-color: #fecaca; color: #dc2626; }
.dashboard-course-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-course-carousel { display: block; }
.dashboard-course-carousel .owl-stage { display: flex; padding: 6px 0 22px; }
.dashboard-course-carousel .owl-item { display: flex; }
.dashboard-course-carousel .dashboard-course-card { display: flex; height: 100%; width: 100%; }
.dashboard-course-carousel .owl-nav { cursor: default; display: flex; gap: 8px; justify-content: flex-end; left: auto; margin-top: 2px; position: static; top: auto; transform: none; width: auto; z-index: auto; }
.dashboard-course-carousel .owl-nav button.owl-prev,
.dashboard-course-carousel .owl-nav button.owl-next { align-items: center; background: #fff !important; border: 1px solid #dfe5ee !important; border-radius: 8px; box-shadow: 0 8px 18px rgba(17,24,39,.06); color: #2563eb !important; display: inline-flex; height: 38px; justify-content: center; left: auto; position: static; right: auto; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; width: 38px; }
.dashboard-course-carousel .owl-nav button i { background: transparent; color: inherit; font-size: 18px; height: auto; line-height: 1; width: auto; }
.dashboard-course-carousel .owl-nav button:hover { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; transform: translateY(-1px); }
.dashboard-course-carousel .owl-nav button.disabled { cursor: not-allowed; opacity: .45; transform: none; }
.dashboard-course-carousel .owl-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.dashboard-course-carousel .owl-dot { background: #cbd5e1 !important; border-radius: 999px; height: 7px; transition: background .2s ease, width .2s ease; width: 7px; }
.dashboard-course-carousel .owl-dot.active { background: #2563eb !important; width: 22px; }
.dashboard-course-card { background: #fff; border: 1px solid #e5eaf2; border-radius: 8px; box-shadow: 0 12px 32px rgba(17, 24, 39, .06); min-width: 0; overflow: hidden; position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dashboard-course-card:hover { border-color: #bdd7ff; box-shadow: 0 1px 24px rgba(46, 48, 52, 0.247); transform: translateY(-4px); }
.dashboard-course-card > a { color: inherit; display: flex; flex-direction: column; height: 100%; }
.dashboard-course-card > a:hover { color: inherit; }
.dashboard-course-image { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #dbeafe, #f1f5f9); overflow: hidden; position: relative; }
.dashboard-course-image::after { content: ""; inset: 0; position: absolute; }
.dashboard-course-image img { height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; width: 100%; }
.dashboard-course-card:hover .dashboard-course-image img { filter: saturate(1.08); transform: scale(1.055); }
.dashboard-course-overlay { align-items: flex-start; color: #fff; display: flex; inset: 0; justify-content: flex-end; padding: 13px; position: absolute; z-index: 1; }
.dashboard-course-overlay span { align-items: center; backdrop-filter: blur(10px); background: rgba(15, 23, 42, .58); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; display: flex; font-size: 11px; font-weight: 800; gap: 5px; padding: 7px 9px; }
.dashboard-course-favorite { align-items: center; backdrop-filter: blur(10px); background: rgba(255,255,255,.92); border: 0; border-radius: 8px; color: #64748b; cursor: pointer; display: inline-flex; font-size: 17px; height: 34px; justify-content: center; padding: 0; position: relative; transition: background .2s ease, color .2s ease, transform .2s ease; width: 34px; z-index: 2; }
.dashboard-course-favorite:hover, .dashboard-course-favorite.is-favourite { background: #ffffff; color: #ef4444; transform: scale(1.04); }
.dashboard-course-favorite.is-loading { cursor: wait; opacity: .68; pointer-events: none; }
.dashboard-course-content { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.dashboard-course-category { align-items: center; color: #2563eb; display: inline-flex; font-size: 11px; font-weight: 400; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.dashboard-course-content h5 { color: #151b2b; display: -webkit-box; font-size: 17px; font-weight: 600; line-height: 1.35; margin: 9px 0 8px; min-height: 46px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-course-content p { color: #667085; display: -webkit-box; font-size: 13px; line-height: 1.55; margin: 0 0 18px; min-height: 40px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-course-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.dashboard-course-meta span { align-items: center; background: #f8fafc; border: 1px solid #e5eaf2; border-radius: 8px; color: #344054; display: inline-flex; font-size: 8px; font-weight: 500; gap: 0; line-height: 1.1; max-width: 100%; min-height: 20px; overflow-wrap: anywhere; padding: 4px 6px; margin-left: 2px; }
.profile-right .dashboard-course-meta span{font-size: 10px;}
.dashboard-course-meta i { color: #2563eb; font-size: 13px; line-height: 1; }
.dashboard-course-image-meta { bottom: 10px; left: 10px; margin: 0; max-width: calc(100% - 20px); position: absolute; right: 10px; z-index: 2; }
.dashboard-course-image-meta span { backdrop-filter: blur(10px); background: rgba(15, 23, 42, .68); border-color: rgba(255,255,255,.18); color: #fff; min-height: 20px; text-shadow: 0 1px 1px rgba(15,23,42,.25); }
.dashboard-course-image-meta i { color: #bfdbfe; }
.dashboard-course-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.dashboard-course-tags span { background: #eef6ff; border: 1px solid #d8e8ff; border-radius: 14px; color: #2563eb; font-size: 10px; font-weight: 800; padding: 4px 8px; }
.dashboard-course-progress { background: #f8fafc; border: 1px solid #edf1f6; border-radius: 8px; margin-top: auto; padding: 12px; }
.dashboard-course-progress > div:first-child { color: #667085; display: flex; font-size: 12px; font-weight: 700; justify-content: space-between; margin-bottom: 8px; }
.dashboard-course-progress strong { color: #151b2b; }
.dashboard-course-track { background: #e5e7eb; border-radius: 999px; height: 8px; overflow: hidden; }
.dashboard-course-track i { background: linear-gradient(90deg, #22c55e, #2563eb); border-radius: inherit; display: block; height: 100%; }
.dashboard-course-action { align-items: center; background: #f8fafc; border: 1px solid #edf1f6; border-radius: 8px; color: #2563eb; display: flex; font-size: 12px; font-weight: 800; justify-content: space-between; margin-top: auto; padding: 12px; }
.dashboard-course-action i { font-size: 17px; }
.dashboard-courses-empty { background: #fff; border: 1px dashed #cfd8e6; border-radius: 8px; color: #8791a1; padding: 38px; text-align: center; }
.dashboard-courses-empty i { color: #2563eb; font-size: 36px; }
.dashboard-courses-empty h5 { color: #151b2b; margin: 8px 0 3px; }
.dashboard-courses-empty p { margin: 0; }
.dashboard-mascot-art {
  bottom: 10px;
  max-width: 210px;
  position: absolute;
  right: 24px;
  top: -5px;
  z-index: 1;
}
.dashboard-mascot-art img {
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .18));
  max-height: 290px;
  object-fit: contain;
}
.mascot-empty-state img,
.empty-mascot {
  display: block;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
  height: 118px;
  margin: 0 auto 10px;
  object-fit: contain;
  width: auto;
}
.mascot-empty-state i {
  display: none;
}
.course-attendance-card .iq-card-body { align-items: center; display: grid; gap: 0px; grid-template-columns: 105px minmax(0, 1fr); padding: 22px; }
.course-attendance-ring { align-items: center; background: conic-gradient(#62ce8e calc(var(--attendance) * 1%), #eef0f2 0); border-radius: 50%; display: flex; height: 90px; justify-content: center; margin: 0; position: relative; width: 90px; }
.course-attendance-ring::before { background: #fff; border-radius: 50%; content: ""; inset: 13px; position: absolute; }
.course-attendance-ring > div { display: flex; flex-direction: column; position: relative; z-index: 1; }
.course-attendance-ring strong { color: #242b3a; font-size: 16px; font-weight: 600; line-height: 1.1; text-align: center; }
.course-attendance-ring span { color: #7b8494; font-size: 10px; font-weight: 700; margin-top: 0px; text-align: center; text-transform: uppercase; }
.course-attendance-details { min-width: 0; }
.course-attendance-details h5 { color: #242b3a; font-size: 18px; margin: 0 0 9px; }
.course-attendance-detail { align-items: center; display: grid; font-size: 12px; gap: 6px; grid-template-columns: 10px 1fr auto; margin-top: 0px; }
.course-attendance-detail i { border-radius: 50%; height: 7px; width: 7px; }
.course-attendance-detail span { color: #687386; }
.course-attendance-detail strong { color: #303746; font-size: 13px; }
.course-attendance-detail.is-total i { background: #8067dc; }
.course-attendance-detail.is-present i { background: #20c997; }
.course-attendance-detail.is-absent i { background: #ff806f; }
.course-summary-card { align-items: center; background: #fff; border: 0; border-radius: 15px; box-shadow: 0 6px 30px rgba(15,23,42,.06); color: #303746; cursor: pointer; display: grid; gap: 10px; grid-template-columns: 38px minmax(0,1fr) 22px; margin: 0 0 18px; overflow: hidden; padding: 16px; text-align: left; transition: box-shadow .2s ease, transform .2s ease; width: 100%; }
.course-summary-card:hover { box-shadow: 0 10px 34px rgba(15,23,42,.1); transform: translateY(-1px); }
.course-summary-card:focus { outline: 2px solid rgba(82,54,199,.26); outline-offset: 2px; }
.course-summary-card-icon { align-items: center; background: #f4f1ff; border-radius: 10px; color: #5236c7; display: flex; font-size: 19px; height: 38px; justify-content: center; width: 38px; }
.course-summary-card-body { display: flex; flex-direction: column; min-width: 0; }
.course-summary-card-body strong { color: #171a2b; font-size: 18px; font-weight: 500; line-height: 1.2; }
.course-summary-card-body small { color: #777d8a; font-size: 13px; line-height: 1.45; margin-top: 2px; }
.course-summary-card-arrow { align-items: center; color: #8b93a3; display: flex; font-size: 22px; justify-content: flex-end; }
.course-summary-card-meta { background: #fbfcff; border-top: 1px solid #edf0f4; grid-column: 1 / -1; margin: 4px -16px -16px; padding: 12px 16px 14px; }
.course-summary-card-meta span { background: #fff; border-color: #e4e7ed; color: #3f4757; }
.course-summary-card-meta i { color: #5236c7; }
.course-summary-mentor-card { background: #fff; border-radius: 15px; box-shadow: 0 6px 30px rgba(15,23,42,.06); margin: 0 0 18px; padding: 16px; }
.course-summary-mentor-head { align-items: center; display: grid; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) 38px; }
.course-summary-mentor-head > div { min-width: 0; }
.course-summary-mentor-head strong { color: #171a2b; display: block; font-size: 16px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-summary-mentor-head small { color: #777d8a; display: block; font-size: 13px; line-height: 1.35; margin-top: 2px; }
.course-summary-mentor-head .course-summary-card-icon { height: 40px; width: 40px; }
.course-summary-mentor-menu { display: block; margin-top: 14px; width: 100%; }
.course-summary-mentor-menu .dropdown-menu { width: 100%; }
.course-summary-mentor-toggle { align-items: center; background: #f4f1ff; border: 0; border-radius: 10px; color: #5236c7; display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; min-height: 40px; padding: 0 12px; width: 100%; }
.course-summary-mentor-toggle::after { display: none; }
.course-summary-mentor-toggle:hover,
.course-summary-mentor-toggle:focus { background: #e9e3ff; color: #5236c7; }
.course-activity-restricted { color: #929aaa; cursor: not-allowed; display: inline-flex; flex-direction: column; outline: 0; }
.course-activity-restricted h5 { color: #8a93a2; margin-bottom: 5px; }
.course-activity-restricted h5 > i { color: #b07b22; }
.course-activity-restricted > span { align-items: center; background: #fff6df; border-radius: 12px; color: #9a6700; display: inline-flex; font-size: 12px; gap: 4px; padding: 3px 8px; width: fit-content; }
.course-label-popup-trigger { background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 0; text-align: left; }
.course-label-popup-trigger:focus { outline: 2px solid rgba(37, 99, 235, .35); outline-offset: 3px; }
.course-label-content-template { display: none; }
.course-label-modal .modal-dialog { max-width: 80vw; width: 80vw; }
.course-label-modal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 28px 70px rgba(16, 24, 40, .24); }
.course-label-modal .modal-header { align-items: center; border-bottom: 1px solid #edf1f6; padding: 18px 22px; }
.course-label-modal .modal-title { color: #101828; font-size: 20px; line-height: 1.3; margin: 0; }
.course-label-modal .close { align-items: center; background: #f2f4f7; border-radius: 50%; color: #344054; display: flex; height: 36px; justify-content: center; margin: 0; opacity: 1; padding: 0; text-shadow: none; width: 36px; }
.course-label-modal .modal-body { color: #344054; font-size: 15px; line-height: 1.7; max-height: calc(100vh - 180px); overflow: auto; padding: 22px; }
.course-label-modal .modal-body img,
.course-label-modal .modal-body video,
.course-label-modal .modal-body iframe { max-width: 100%; }
.course-label-modal .modal-body img,
.course-label-modal .modal-body video { height: auto; }
.course-label-modal .modal-body table { background: #fff; border: 1px solid #e5eaf2; border-collapse: separate; border-radius: 8px; border-spacing: 0; box-shadow: 0 10px 28px rgba(16, 24, 40, .06); margin: 18px 0 8px; max-width: 100%; overflow: hidden; width: 100%; }
.course-label-modal .modal-body th,
.course-label-modal .modal-body td { border-bottom: 1px solid #edf1f6; color: #4b5565; font-size: 14px; line-height: 1.45; padding: 12px 14px; vertical-align: top; }
.course-label-modal .modal-body th { background: #f8fafc; color: #344054; font-weight: 800; }
.course-label-modal .modal-body tr:last-child th,
.course-label-modal .modal-body tr:last-child td { border-bottom: 0; }
.course-label-modal .modal-body tr:nth-child(even) td { background: #fbfcfe; }
.course-label-modal .modal-body td:first-child,
.course-label-modal .modal-body th:first-child { width: 14%; }
.course-label-modal .modal-body td strong,
.course-label-modal .modal-body th strong { color: #273142; }
#coursesummary .modal-body table { background: #fff; border: 1px solid #e5eaf2; border-collapse: separate; border-radius: 8px; border-spacing: 0; box-shadow: 0 10px 28px rgba(16, 24, 40, .06); margin: 18px 0 8px; max-width: 100%; overflow: hidden; width: 100%; }
#coursesummary .modal-body th,
#coursesummary .modal-body td { border-bottom: 1px solid #edf1f6; color: #4b5565; font-size: 14px; line-height: 1.45; padding: 12px 14px; vertical-align: top; }
#coursesummary .modal-body th { background: #f8fafc; color: #344054; font-weight: 800; }
#coursesummary .modal-body tr:last-child th,
#coursesummary .modal-body tr:last-child td { border-bottom: 0; }
#coursesummary .modal-body tr:nth-child(even) td { background: #fbfcfe; }
#coursesummary .modal-body td:first-child,
#coursesummary .modal-body th:first-child { width: 14%; }
#coursesummary .modal-body td strong,
#coursesummary .modal-body th strong { color: #273142; }
@media (max-width: 767px) { .course-label-modal .modal-dialog { max-width: calc(100vw - 24px); width: calc(100vw - 24px); }.course-label-modal .modal-header,.course-label-modal .modal-body { padding-left: 16px; padding-right: 16px; } }

.activity-header-actions,
.activity-header-competencies { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin-left: auto; }
.activity-card-header { align-items: center; gap: 14px; }
.activity-card-header .iq-header-title,
.activity-viewer-hero > div:not(.activity-header-competencies) { min-width: 0; }
.iq-card-header .activity-header-competencies,
.iq-card-header .activity-header-actions { flex: 0 0 auto; }
.activity-competency-dropdown { position: relative; }
.activity-competency-trigger { align-items: center; background: #f7f5ff; border: 1px solid #ded6ff; border-radius: 8px; color: #5436cf; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; min-height: 32px; padding: 0 10px; white-space: nowrap; }
.activity-competency-trigger:hover,
.activity-competency-trigger:focus { background: #ede8ff; border-color: #c9bef8; color: #4327b0; outline: 0; }
.activity-competency-trigger i { font-size: 16px; line-height: 1; }
.activity-competency-menu { border: 0; border-radius: 8px; box-shadow: 0 18px 42px rgba(15, 23, 42, .18); margin-top: 8px; min-width: 430px; padding: 8px; z-index: 1080; }
.activity-competency-menu-item { align-items: center; border-radius: 8px; display: grid; gap: 14px; grid-template-columns: minmax(180px, 1fr) auto; padding: 10px 8px; white-space: nowrap; }
.activity-competency-menu-item:hover { background: #f8f6ff; }
.activity-competency-menu-item + .activity-competency-menu-item { border-top: 1px solid #f0f3f8; }
.activity-competency-menu-item strong,
.activity-competency-menu-item small { display: block; min-width: 0; }
.activity-competency-menu-item strong { color: #25293b; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-competency-menu-item small { color: #9299a8; font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-competency-menu-item > span { align-items: center; display: inline-flex; font-size: 11px; font-weight: 800; gap: 5px; justify-self: end; white-space: nowrap; }
.activity-competency-menu-item > span i { font-size: 15px; line-height: 1; }
.activity-competency-menu-item.is-proficient > span { color: #159b67; }
.activity-competency-menu-item.is-gap > span { color: #e16a58; }
.activity-competency-menu-item.is-unrated > span { color: #ad7a1e; }
.activity-competency-empty { color: #697386; font-size: 12px; font-weight: 700; padding: 12px 8px 8px; }
@media (max-width: 767px) { .activity-card-header { align-items: flex-start !important; flex-direction: column; }.activity-header-actions,.activity-header-competencies { align-items: stretch; flex-direction: column; margin-left: 0; width: 100%; }.activity-competency-dropdown,.activity-competency-trigger { width: 100%; }.activity-competency-trigger { justify-content: center; }.activity-competency-menu { min-width: min(430px, calc(100vw - 32px)); }.activity-competency-menu-item { grid-template-columns: minmax(140px, 1fr) auto; } }
.tooltip-inner { max-width: 320px; padding: 9px 12px; text-align: left; }
.course-skills-dashboard { background: #fff; border: 1px solid #e5e9ef; border-radius: 14px; overflow: hidden; }
.course-skills-header { align-items: center; border-bottom: 1px solid #e8ebf0; display: flex; justify-content: space-between; padding: 24px; }
.course-skills-header > div:first-child > span { color: #8067dc; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.course-skills-header h4 { margin: 4px 0; }
.course-skills-header p { color: #7b8494; font-size: 12px; margin: 0; }
.course-skills-score { align-items: center; background: conic-gradient(#20c997 calc(var(--skill-score) * 1%), #e8ebef 0); border-radius: 50%; display: flex; flex: 0 0 auto; height: 92px; justify-content: center; position: relative; width: 92px; }
.course-skills-score::before { background: #fff; border-radius: 50%; content: ""; inset: 10px; position: absolute; }
.course-skills-score strong,.course-skills-score span { position: relative; z-index: 1; }
.course-skills-score strong { color: #242b3a; font-size: 19px; }
.course-skills-score span { color: #7b8494; font-size: 8px; text-transform: uppercase; }
.course-skills-score { flex-direction: column; }
.course-skills-metrics { display: grid; grid-template-columns: repeat(4,1fr); padding: 18px 24px; }
.course-skills-metrics > div { border-right: 1px solid #e8ebf0; display: flex; flex-direction: column; padding: 5px 18px; }
.course-skills-metrics > div:last-child { border: 0; }
.course-skills-metrics strong { color: #303746; font-size: 25px; }
.course-skills-metrics span { color: #7b8494; font-size: 11px; }
.course-skills-metrics .is-proficient strong { color: #198754; }
.course-skills-metrics .is-gap strong { color: #d65d4b; }
.course-skills-metrics .is-unrated strong { color: #8a93a2; }
.course-skill-list { border-top: 1px solid #e8ebf0; }
.course-skill-item { border-bottom: 1px solid #e8ebf0; }
.course-skill-item summary { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 28px minmax(160px,1fr) auto auto 20px; list-style: none; padding: 16px 22px; }
.course-skill-item summary::-webkit-details-marker { display:none; }
.course-skill-state { font-size: 21px; }
.course-skill-item.is-proficient .course-skill-state,.course-skill-item.is-proficient .course-skill-label { color:#198754; }
.course-skill-item.is-gap .course-skill-state,.course-skill-item.is-gap .course-skill-label { color:#d65d4b; }
.course-skill-item.is-unrated .course-skill-state,.course-skill-item.is-unrated .course-skill-label { color:#8992a2; }
.course-skill-name { display:flex; flex-direction:column; min-width:0; }
.course-skill-name strong { color:#303746; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.course-skill-name small,.course-skill-activity-count { color:#8992a2; font-size:10px; }
.course-skill-label { font-size:11px; font-weight:700; white-space:nowrap; }
.course-skill-arrow { color:#8992a2; transition:transform .2s; }
.course-skill-item[open] .course-skill-arrow { transform:rotate(180deg); }
.course-skill-detail { background:#f8f9fb; padding:18px 22px 20px 62px; }
.course-skill-detail p { color:#687386; font-size:12px; margin:0 0 14px; }
.course-skill-detail h6 { font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.course-skill-activities { display:flex; flex-wrap:wrap; gap:8px; }
.course-skill-activities a,.course-skill-activity-disabled { align-items:center; background:#fff; border:1px solid #dfe3e9; border-radius:10px; color:#3c4655; display:inline-flex; font-size:11px; gap:8px; min-width:245px; padding:9px 11px; }
.course-skill-activities a>span,.course-skill-activity-disabled>span { display:flex; flex:1; flex-direction:column; }
.course-skill-activities a small,.course-skill-activity-disabled small { color:#8992a2; }
.course-skill-activities a em,.course-skill-activity-disabled em { align-items:center; color:#7458d7; display:flex; font-size:10px; font-style:normal; gap:3px; margin-left:auto; }
.course-skill-activities a.is-completed { border-color:#cbe9da; }
.course-skill-activities a.is-completed em { color:#198754; }
.course-skill-activities a:hover { border-color:#8067dc; box-shadow:0 5px 14px rgba(84,54,207,.09); transform:translateY(-1px); }
.course-skill-activity-disabled { color:#969daa; cursor:not-allowed; }
.course-skill-activity-disabled em { color:#ad7a1e; }
.course-skill-no-activity { color:#b07b22; font-size:11px; }
.course-skills-empty { color:#8992a2; padding:50px; text-align:center; }
.course-skills-empty i { color:#8067dc; font-size:38px; }
.course-skills-empty h5 { margin:8px 0 3px; }
.course-skills-empty p { margin:0; }
@media(max-width:767px){.course-skills-header{align-items:flex-start;gap:15px}.course-skills-metrics{grid-template-columns:1fr 1fr}.course-skills-metrics>div:nth-child(2){border-right:0}.course-skill-item summary{grid-template-columns:26px 1fr auto}.course-skill-activity-count{display:none}.course-skill-label{grid-column:2}.course-skill-arrow{grid-column:3;grid-row:1}.course-skill-detail{padding-left:22px}}

.activity-competencies { align-items:center; background:linear-gradient(135deg,#f5f2ff 0%,#fff 70%); border:1px solid #e5defe; border-radius:16px; box-shadow:0 8px 24px rgba(68,50,156,.07); display:flex; gap:24px; justify-content:space-between; margin:0 0 20px; padding:18px 22px; }
.activity-competencies-heading { align-items:center; display:flex; flex:0 0 auto; gap:12px; }
.activity-competencies-icon { align-items:center; background:#5436cf; border-radius:12px; color:#fff; display:flex; font-size:22px; height:44px; justify-content:center; width:44px; }
.activity-competencies-eyebrow { color:#7559df; display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.activity-competencies-heading h4 { color:#14172b; font-size:17px; margin:2px 0 0; }
.activity-competencies-list { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }
.activity-competency { align-items:center; background:#fff; border:1px solid #e5e7ed; border-radius:12px; display:flex; gap:18px; min-width:230px; padding:9px 12px; }
.activity-competency strong,.activity-competency small { display:block; }
.activity-competency strong { color:#25293b; font-size:13px; }
.activity-competency small { color:#9299a8; font-size:10px; margin-top:1px; }
.activity-competency>span { align-items:center; color:#7d8492; display:flex; font-size:11px; font-weight:600; gap:4px; margin-left:auto; white-space:nowrap; }
.activity-competency.is-proficient>span { color:#159b67; }
.activity-competency.is-gap>span { color:#e16a58; }
.activity-competency.is-unrated>span { color:#ad7a1e; }
@media(max-width:991px){.activity-competencies{align-items:flex-start;flex-direction:column}.activity-competencies-list{justify-content:flex-start;width:100%}.activity-competency{flex:1 1 230px}}

/* User profile and account */
.profile-alert { align-items:center; border:0; border-radius:12px; display:flex; gap:8px; }
.profile-page-shell { align-items:flex-start; display:grid; gap:22px; grid-template-columns:280px minmax(0,1fr); }
.profile-summary-card,.profile-settings-card { background:#fff; border:1px solid #e9ebf1; border-radius:18px; box-shadow:0 9px 30px rgba(36,41,70,.06); }
.profile-summary-card { overflow:hidden; padding:0 22px 24px; position:sticky; text-align:center; }
.profile-cover { background:linear-gradient(135deg,#5134c9,#886de4); height:92px; margin:0 -22px; }
.profile-picture-form { align-items:center; display:flex; flex-direction:column; }
.profile-picture-wrap { height:92px; margin-top:-46px; position:relative; width:92px; }
.profile-page-avatar { background:#fff; border:5px solid #fff; border-radius:50%; height:92px; object-fit:cover; width:92px; }
.profile-picture-edit { align-items:center; background:#5436cf; border:3px solid #fff; border-radius:50%; bottom:-2px; color:#fff; cursor:pointer; display:flex; height:31px; justify-content:center; margin:0; position:absolute; right:-2px; transition:.2s; width:31px; }
.profile-picture-edit:hover { background:#3f27ae; transform:scale(1.06); }
.profile-picture-save { background:#f0edff; border:0; border-radius:18px; color:#5436cf; font-size:10px; font-weight:700; margin:9px 0 -4px; padding:6px 11px; }
.profile-picture-save i { margin-right:4px; }
.profile-summary-card h3 { color:#171a2b; font-size:20px; margin:10px 0 2px; }
.profile-summary-card>p { color:#8992a2; font-size:12px; margin-bottom:9px; overflow:hidden; text-overflow:ellipsis; }
.profile-summary-card>span { background:#f0edff; border-radius:20px; color:#6347ce; display:inline-flex; font-size:11px; gap:5px; padding:5px 10px; }
.profile-section-nav { border-top:1px solid #eceef3; display:flex; flex-direction:column; gap:4px; margin-top:20px; padding-top:14px; text-align:left; }
.profile-section-nav a { align-items:center; border-radius:9px; color:#586174; display:flex; font-size:12px; gap:9px; padding:9px 10px; }
.profile-section-nav a:hover { background:#f4f1ff; color:#5436cf; }
.profile-settings { display:flex; flex-direction:column; gap:18px; min-width:0; }
.profile-settings-card { scroll-margin-top:110px; padding:22px 24px 24px; }
.profile-settings-card>header { align-items:center; border-bottom:1px solid #eceef3; display:flex; justify-content:space-between; margin-bottom:20px; padding-bottom:15px; }
.profile-settings-card>header span { color:#8067dc; display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.profile-settings-card>header h4 { color:#171a2b; font-size:18px; margin:2px 0 0; }
.profile-settings-card>header>i { background:#f1edff; border-radius:10px; color:#6347ce; font-size:20px; padding:9px; }
.profile-info-grid,.profile-form-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-info-grid>div { background:#f8f9fb; border-radius:11px; padding:13px 15px; }
.profile-info-grid small { color:#929aaa; display:block; font-size:10px; margin-bottom:3px; text-transform:uppercase; }
.profile-info-grid strong { color:#303746; font-size:13px; overflow-wrap:anywhere; }
.profile-form label>span { color:#566074; display:block; font-size:11px; font-weight:600; margin-bottom:6px; }
.profile-form .form-control { background:#f8f9fb; border:1px solid #e4e7ed; border-radius:9px; font-size:12px; height:43px; }
.profile-form textarea.form-control { height:auto; resize:vertical; }
.profile-form .is-wide { grid-column:1/-1; }
.profile-form>.btn { border-radius:9px; margin-top:18px; padding:9px 16px; }
.profile-managed-notice { align-items:center; background:#f5f2ff; border:1px solid #e3dcff; border-radius:12px; display:flex; gap:11px; margin-bottom:18px; padding:12px 14px; }
.profile-managed-notice>i { color:#5b3bd1; font-size:22px; }
.profile-managed-notice>div { display:flex; flex:1; flex-direction:column; }
.profile-managed-notice strong { color:#34394a; font-size:12px; }
.profile-managed-notice span { color:#858d9c; font-size:10px; }
.profile-managed-notice a { align-items:center; background:#5436cf; border-radius:8px; color:#fff; display:flex; font-size:10px; gap:4px; padding:8px 10px; white-space:nowrap; }
.profile-switch-row { align-items:center; border-bottom:1px solid #eceef3; cursor:pointer; display:flex; justify-content:space-between; margin:0; padding:14px 0; }
.profile-switch-row>span strong,.profile-switch-row>span small { display:block; }
.profile-switch-row>span strong { color:#303746; font-size:13px; }
.profile-switch-row>span small { color:#8992a2; font-size:11px; margin-top:2px; }
.profile-switch-row input { height:0; opacity:0; position:absolute; width:0; }
.profile-switch-row>i { background:#dfe3e9; border-radius:20px; height:24px; position:relative; transition:.2s; width:43px; }
.profile-switch-row>i:after { background:#fff; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,.18); content:""; height:18px; left:3px; position:absolute; top:3px; transition:.2s; width:18px; }
.profile-switch-row input:checked+i { background:#5b3bd1; }
.profile-switch-row input:checked+i:after { transform:translateX(19px); }
@media(max-width:991px){.profile-page-shell{grid-template-columns:1fr}.profile-summary-card{position:static}.profile-section-nav{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:575px){.profile-info-grid,.profile-form-grid{grid-template-columns:1fr}.profile-section-nav{grid-template-columns:1fr}.profile-settings-card{padding:18px}.profile-form .is-wide{grid-column:auto}}
.progress-tracker { padding-bottom: 30px; }
.progress-summary-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 42px; }
.progress-summary-card { background: #fff; border: 1px solid #d9dde4; border-radius: 13px; min-height: 315px; padding: 26px; }
.progress-summary-card.is-primary { background: var(--iq-danger); border-color: #fddfa1; }
.progress-summary-card.is-primary h5 { color: #fff; font-size: 17px; margin: 0 0 14px; }
.progress-summary-card.is-primary > strong, .progress-summary-card.is-primary li, .progress-summary-card.is-primary li b { color: #fff; }
.progress-summary-card h5 { color: #252b36; font-size: 17px; margin: 0 0 14px; }
.is-primary .progress-ring { background: conic-gradient(#56c661 calc(var(--value) * 1%), #ffffff 0); }
.progress-ring { align-items: center; background: conic-gradient(#8067dc calc(var(--value) * 1%), #dfe1e5 0); border-radius: 50%; display: flex; height: 88px; justify-content: center; position: relative; width: 88px; }
.progress-ring::before { background: #fff; border-radius: 50%; content: ""; inset: 11px; position: absolute; }
.progress-summary-card.is-primary .progress-ring::before { background: #e4e4e4; }
.progress-ring span { color: #242b3a; font-size: 18px; position: relative; }
.progress-summary-card > strong { color: #242b3a; display: block; font-size: 15px; margin-top: 8px; }
.progress-summary-card ul { border-top: 1px solid #dfe2e7; list-style: none; margin: 17px 0 0; padding: 10px 0 0; }
.progress-summary-card li { color: #4d5664; font-size: 12px; margin-top: 6px; }
.progress-summary-card li b { color: #202632; display: inline-block; min-width: 24px; }
.progress-table-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 13px; }
.progress-table-head h3 { margin: 0; }
.progress-table-head label { align-items: center; background: #fff; border: 1px solid #dce1e8; border-radius: 9px; display: flex; gap: 7px; padding: 8px 11px; }
.progress-table-head input { border: 0; outline: 0; width: 210px; }
.progress-table { background: #fff; border: 1px solid #e2e5ea; border-radius: 10px; overflow: hidden; }
.progress-table thead th { background: var(--iq-light-danger); border: 0; color: #242b3a; font-size: 12px; padding: 15px 14px; white-space: nowrap; }
.progress-table td { border-color: #edf0f4; font-size: 12px; padding: 15px 14px; vertical-align: middle; }
.progress-cell { background: #e9ebef; border-radius: 5px; display: inline-block; height: 6px; margin-right: 6px; overflow: hidden; vertical-align: middle; width: 75px; }
.progress-cell span { background: #62ce8e; display: block; height: 100%; }
.tracker-status { align-items:center; border-radius:14px; display:inline-flex; font-size:11px; font-weight:600; gap:5px; padding:5px 9px; white-space:nowrap; }
.tracker-status.is-completed { background:#e8f8ef; color:#178653; }
.tracker-status.is-progress { background:#fff4d8; color:#a46a00; }
.tracker-status.is-not-started { background:#eef1f5; color:#687386; }
@media (max-width: 1199px) { .progress-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .progress-summary-grid { grid-template-columns: 1fr; }.progress-table-head { align-items: stretch; flex-direction: column; gap: 10px; }.progress-table-head input { width: 100%; } }
@media print { .iq-sidebar,.iq-top-navbar,.iq-footer,.progress-summary-grid,.progress-table-head { display:none!important; }.content-page{margin:0!important;padding:0!important}.progress-table th:last-child,.progress-table td:last-child{display:none} }

.learning-dashboard { color: #10162f; padding-bottom: 34px; }
.learning-dashboard a { color: #5b3fd6; }
.progress-loader { align-items: center; background: rgba(248, 250, 252, .92); display: flex; inset: 0; justify-content: center; min-height: 100vh; padding: 24px; position: fixed; transition: opacity .32s ease, visibility .32s ease; z-index: 10050; }
.progress-loader.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.progress-loader-card { background: #fff; border: 1px solid #e4e8f0; border-radius: 12px; box-shadow: 0 24px 70px rgba(43, 35, 104, .18); max-width: 420px; padding: 30px; text-align: center; width: min(420px, 100%); }
.progress-loader-orbit { align-items: center; background: linear-gradient(135deg, #6840e4, #8d73f4); border-radius: 24px; display: grid; height: 108px; isolation: isolate; margin: 0 auto 20px; overflow: hidden; place-items: center; position: relative; width: 154px; }
.progress-loader-orbit::before { background: rgba(255,255,255,.18); content: ""; height: 100%; left: 38px; position: absolute; top: 0; transform: skewX(-24deg); width: 46px; z-index: -1; }
.progress-loader-orbit span { animation: progressLoaderBars 1.1s ease-in-out infinite; background: rgba(255,255,255,.86); border-radius: 8px 8px 0 0; bottom: 24px; position: absolute; width: 12px; }
.progress-loader-orbit span:nth-child(1) { height: 28px; left: 42px; }
.progress-loader-orbit span:nth-child(2) { animation-delay: .14s; height: 46px; left: 68px; }
.progress-loader-orbit span:nth-child(3) { animation-delay: .28s; height: 64px; left: 94px; }
.progress-loader-orbit i { color: #fff; font-size: 34px; position: absolute; right: 18px; top: 17px; }
.progress-loader-card strong { color: #10162f; display: block; font-size: 20px; font-weight: 650; margin-bottom: 8px; }
.progress-loader-card p { color: #667085; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.progress-loader-track { background: #eceff6; border-radius: 999px; height: 7px; overflow: hidden; }
.progress-loader-track i { animation: progressLoaderTrack 1.2s ease-in-out infinite; background: linear-gradient(90deg, #6840e4, #43be78); border-radius: inherit; display: block; height: 100%; width: 42%; }
@keyframes progressLoaderBars { 0%, 100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
@keyframes progressLoaderTrack { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } }
.learning-hero { align-items: center; background: linear-gradient(135deg, #653be0 0%, #7c5df0 58%, #9a7df6 100%); border-radius: 8px; color: #fff; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.5fr) 180px minmax(210px, .7fr) 126px; margin-bottom: 22px; min-height: 230px; overflow: hidden; padding: 30px 38px; position: relative; }
.learning-hero::after { background: radial-gradient(circle, rgba(255,255,255,.24), transparent 62%); bottom: -80px; content: ""; height: 240px; position: absolute; right: -40px; width: 300px; }
.learning-hero-copy { position: relative; z-index: 1; }
.learning-hero-copy > span { display: block; font-size: 17px; margin-bottom: 10px; }
.learning-hero-copy h2 { color: #fff; font-size: 29px; font-weight: 650; line-height: 1.25; margin: 0 0 9px; max-width: 430px; }
.learning-hero-copy p { color: rgba(255,255,255,.92); font-size: 14px; margin: 0 0 22px; }
.learning-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.learning-hero-actions a { align-items: center; border: 1px solid rgba(255,255,255,.52); border-radius: 7px; color: #fff; display: inline-flex; font-size: 12px; font-weight: 650; gap: 6px; min-height: 40px; padding: 0 20px; }
.learning-hero-actions a:first-child { background: #fff; border-color: #fff; color: #5b3fd6; }
.learning-hero-ring { align-items: center; border-radius: 50%; display: flex; flex-direction: column; height: 144px; justify-content: center; position: relative; width: 144px; z-index: 1; }
.learning-hero-ring svg { inset: 0; position: absolute; transform: rotate(90deg); }
.learning-hero-ring circle { fill: none; stroke-width: 15; }
.learning-hero-ring-track { stroke: rgba(255,255,255,.28); }
.learning-hero-ring-value { stroke: #fff; }
.learning-hero-ring strong, .learning-hero-ring span { position: relative; z-index: 1; }
.learning-hero-ring strong { color: #fff; font-size: 34px; line-height: 1; }
.learning-hero-ring span { color: rgba(255,255,255,.86); font-size: 8px; margin-top: 5px; }
.learning-level-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; display: grid; gap: 12px; padding: 22px; position: relative; z-index: 1; }
.learning-level-card > span, .learning-level-card small { color: rgba(255,255,255,.72); font-size: 11px; }
.learning-level-card strong { align-items: center; color: #fff; display: flex; font-size: 14px; font-weight: 650; gap: 8px; margin: 0; }
.learning-level-card strong i { color: #ffc84a; font-size: 18px; }
.learning-level-meta { align-items: baseline; display: flex; gap: 8px; }
.learning-level-meta b { color: #fff; font-size: 20px; line-height: 1; }
.learning-level-meta small { color: rgba(255,255,255,.78); }
.learning-hero-mascot { align-self: stretch; border-radius: 8px; margin: 0; min-height: 154px; overflow: hidden; position: relative; z-index: 1; }
.learning-hero-mascot img { height: 100%; object-fit: cover; object-position: center 26%; width: 100%; }
.learning-stats-grid { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; }
.learning-stat-card { align-items: flex-end; background: #fff; border: 1px solid #e4e8f0; border-radius: 8px; box-shadow: 0 10px 26px rgba(17,24,39,.04); display: flex; min-height: 116px; overflow: hidden; padding: 18px; position: relative; }
.learning-stat-card > span { align-items: center; border-radius: 0; bottom: -30px; display: flex; font-size: 52px; height: 116px; justify-content: center; opacity: .16; position: absolute; right: -35px; width: 124px; z-index: 0; }
.learning-stat-card > div { position: relative; z-index: 1; }
.learning-stat-card .is-blue { color: #2f7bed; }
.learning-stat-card .is-slate { color: #42526b; }
.learning-stat-card .is-orange { color: #ff9600; }
.learning-stat-card .is-indigo { color: #6655e8; }
.learning-stat-card .is-red { color: #ff672f; }
.learning-stat-card .is-purple { color: #704ee8; }
.learning-stat-card small, .learning-stat-card em { display: block; font-style: normal; }
.learning-stat-card small { color: #172036; font-size: 12px; font-weight: 650; }
.learning-stat-card strong { color: #10162f; display: block; font-size: 22px; line-height: 1.1; margin: 5px 0; }
.learning-stat-card em { color: #5b3fd6; font-size: 11px; font-weight: 650; }
.learning-main-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr); margin-bottom: 16px; }
.learning-three-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, .85fr); margin-bottom: 16px; }
.learning-panel { background: #fff; border: 1px solid #e4e8f0; border-radius: 8px; box-shadow: 0 10px 26px rgba(17,24,39,.035); padding: 18px; }
.learning-panel > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.learning-panel h4 { color: #11182f; font-size: 17px; font-weight: 650; margin: 0; }
.learning-panel header a { font-size: 12px; font-weight: 650; }
.learning-panel header small { color: #6b7280; display: block; font-size: 12px; margin-top: 2px; }
.learning-course-list, .learning-competency-list { display: grid; gap: 14px; }
.learning-course-row { align-items: center; display: grid; gap: 13px; grid-template-columns: 74px minmax(0, 1fr) auto; }
.learning-course-thumb { align-items: center; border-radius: 8px; color: #fff; display: flex; font-weight: 700; height: 58px; justify-content: center; letter-spacing: .04em; width: 74px; }
.color-1 { background: linear-gradient(135deg, #6c52e8, #8c7af2); }
.color-2 { background: linear-gradient(135deg, #35b976, #6cd79b); }
.color-3 { background: linear-gradient(135deg, #ffae2f, #ffc76b); }
.learning-course-row strong, .learning-course-row small { display: block; }
.learning-course-row strong { color: #151b2f; font-size: 13px; font-weight: 500; }
.learning-course-row small { color: #6b7280; font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-mini-progress { background: #e7eaf0; border-radius: 999px; height: 5px; margin-top: 12px; overflow: hidden; }
.learning-mini-progress i, .learning-table-progress i { background: #6c52e8; border-radius: inherit; display: block; height: 100%; }
.learning-course-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.learning-course-row b { color: #11182f; font-size: 12px; line-height: 1; white-space: nowrap; }
.learning-course-actions > a { border: 1px solid #bbaef4; border-radius: 7px; font-size: 11px; font-weight: 650; padding: 8px 12px; text-align: center; white-space: nowrap; }
.learning-competency-row { align-items: center; background: #fbfcff; border: 1px solid #edf0f6; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 36px minmax(110px, 170px) minmax(90px, 1fr) 40px minmax(92px, 120px); min-height: 54px; min-width: 0; padding: 9px 12px; width: 100%; }
.learning-competency-row > span { align-items: center; background: #eee9ff; border-radius: 50%; color: #6c52e8; display: flex; height: 36px; justify-content: center; width: 36px; }
.learning-competency-row strong { color: #172036; font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.learning-competency-row div { background: #e6e9ef; border-radius: 999px; height: 7px; overflow: hidden; }
.learning-competency-row div i { background: #6c52e8; border-radius: inherit; display: block; height: 100%; }
.learning-competency-row.tone-2 div i { background: #438beb; }
.learning-competency-row.tone-3 div i { background: #43be78; }
.learning-competency-row.tone-4 div i { background: #f59e0b; }
.learning-competency-row.tone-5 div i { background: #7c3aed; }
.learning-competency-row b, .learning-competency-row em { font-size: 12px; font-style: normal; font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.learning-competency-row em { color: #1e9d60; }
.learning-achievement, .learning-upcoming { align-items: center; display: flex; gap: 14px; margin-bottom: 18px; }
.learning-achievement > span, .learning-upcoming > span { align-items: center; background: #eef1ff; border-radius: 50%; color: #6c52e8; display: flex; flex: 0 0 44px; font-size: 23px; height: 44px; justify-content: center; width: 44px; }
.learning-achievement > span img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.learning-achievement.is-certificate > span { background: #e9f8ef; color: #2da66a; }
.learning-achievement strong, .learning-achievement small, .learning-achievement em, .learning-upcoming strong, .learning-upcoming small { display: block; }
.learning-achievement strong, .learning-upcoming strong { color: #172036; font-size: 13px; font-weight: 500; }
.learning-achievement small, .learning-upcoming small { color: #6b7280; font-size: 11px; margin-top: 2px; }
.learning-achievement em { color: #111827; font-size: 11px; font-style: normal; font-weight: 800; margin-top: 3px; }
.learning-upcoming em { border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; margin-left: auto; padding: 6px 10px; white-space: nowrap; }
.learning-upcoming em.is-soon { background: #fff1f1; color: #ef4444; }
.learning-upcoming em.is-later { background: #fff4df; color: #e07800; }
.learning-calendar-head { align-items: center; color: #5b3fd6; display: flex; justify-content: space-between; margin-bottom: 14px; }
.learning-calendar-head strong { color: #172036; font-size: 13px; }
.learning-calendar { display: grid; gap: 7px; grid-template-columns: repeat(7, 1fr); text-align: center; }
.learning-calendar b { color: #8a94a6; font-size: 9px; }
.learning-calendar span { align-items: center; border-radius: 50%; color: #475467; display: flex; font-size: 11px; height: 26px; justify-content: center; margin: 0 auto; width: 26px; }
.learning-calendar span.is-done { background: #6c52e8; color: #fff; }
.learning-calendar span.is-today { border: 1px solid #6c52e8; }
.learning-streak-foot { align-items: center; display: grid; grid-template-columns: 1fr auto; margin-top: 18px; }
.learning-streak-foot strong { color: #5b3fd6; font-size: 18px; }
.learning-streak-foot span { color: #172036; font-size: 12px; font-weight: 800; }
.learning-streak-foot i { color: #ffb020; font-size: 34px; grid-row: span 2; }
.learning-timeline { display: grid; gap: 12px; }
.learning-timeline > div { align-items: center; display: grid; gap: 12px; grid-template-columns: 75px 34px minmax(0, 1fr); }
.learning-timeline time { color: #172036; font-size: 10px; font-weight: 400; text-align: right; line-height: 12px; }
.learning-timeline time small { color: #8a94a6; display: block; font-size: 10px; font-weight: 400; }
.learning-timeline span { align-items: center; background: #e9f8ef; border-radius: 50%; color: #2da66a; display: flex; height: 34px; justify-content: center; width: 34px; }
.learning-timeline p { margin: 0; }
.learning-timeline strong, .learning-timeline small { display: block; }
.learning-timeline strong { color: #172036; font-size: 13px; font-weight: 500; }
.learning-timeline small { color: #6b7280; font-size: 11px; }
.learning-recommended-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.learning-recommended-grid article { border: 1px solid #e5e9f1; border-radius: 8px; overflow: hidden; padding-bottom: 10px; }
.learning-rec-art { background: #eef2f7; height: 82px; overflow: hidden; }
.learning-rec-art img { height: 100%; object-fit: cover; width: 100%; }
.learning-recommended-grid h5 { color: #172036; display: -webkit-box; font-size: 13px; font-weight: 650; line-height: 1.3; margin: 10px 12px 9px; min-height: 34px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.learning-recommended-grid p, .learning-recommended-grid small { display: none; }
.learning-recommended-grid a { border: 1px solid #d9dfee; border-radius: 7px; display: block; font-size: 11px; font-weight: 650; margin: 0 12px; padding: 8px 10px; text-align: center; }
.learning-courses-table-panel header label { align-items: center; border: 1px solid #e1e6ee; border-radius: 7px; display: flex; gap: 8px; padding: 8px 10px; }
.learning-courses-table-panel header input { border: 0; font-size: 12px; outline: 0; width: 210px; }
.learning-courses-table { margin-bottom: 0; }
.learning-courses-table thead th { background: #f4f6fb; border: 0; color: #172036; font-size: 12px; padding: 14px 16px; }
.learning-courses-table td { border-color: #edf0f5; color: #172036; font-size: 12px; padding: 14px 16px; vertical-align: middle; }
.learning-courses-table td:nth-child(2) { align-items: center; display: flex; gap: 10px; min-width: 160px; white-space: nowrap; }
.learning-courses-table td:nth-child(2) b { flex: 0 0 42px; }
.learning-courses-table td strong, .learning-courses-table td small { display: block; }
.learning-courses-table td small { display: none; }
.learning-table-progress { background: #e6e9ef; border-radius: 999px; display: inline-block; flex: 0 0 110px; height: 6px; overflow: hidden; vertical-align: middle; width: 110px; }
.learning-badge-stack { align-items: center; display: flex; gap: 5px; }
.learning-badge-stack i, .learning-badge-stack em { align-items: center; background: #eef1ff; border-radius: 50%; color: #6c52e8; display: flex; font-size: 13px; font-style: normal; height: 24px; justify-content: center; width: 24px; }
.learning-badge-stack img { border-radius: 50%; height: 24px; object-fit: cover; width: 24px; }
.learning-courses-table td > a { border: 1px solid #bbaef4; border-radius: 7px; display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; min-width: 74px; padding: 7px 12px; }
.learning-courses-table button { background: transparent; border: 0; color: #172036; font-size: 18px; }
.learning-empty { color: #6b7280; font-size: 13px; font-weight: 700; padding: 20px; text-align: center; }
@media (max-width: 1399px) { .learning-hero { grid-template-columns: minmax(0, 1fr) 160px minmax(220px, .8fr); }.learning-hero-mascot { display: none; }.learning-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .learning-competency-row { grid-template-columns: 32px minmax(90px, 140px) minmax(80px, 1fr) 36px minmax(78px, 100px); gap: 9px; }.learning-competency-row em { font-size: 11px; } }
@media (max-width: 1199px) { .learning-main-grid, .learning-three-grid { grid-template-columns: 1fr; }.learning-recommended-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .learning-hero { grid-template-columns: 1fr; padding: 24px; }.learning-hero-ring { height: 124px; width: 124px; }.learning-hero-ring circle { stroke-width: 14; }.learning-stats-grid, .learning-recommended-grid { grid-template-columns: 1fr; }.learning-course-row, .learning-competency-row { grid-template-columns: 1fr; }.learning-course-thumb { width: 100%; }.learning-courses-table-panel header { align-items: flex-start; flex-direction: column; gap: 12px; }.learning-courses-table-panel header input { width: 100%; } }
@media print { .learning-hero,.learning-stats-grid,.learning-main-grid,.learning-three-grid,.iq-sidebar,.iq-top-navbar,.iq-footer { display:none!important; }.content-page{margin:0!important;padding:0!important} }
.achievements-page { padding-bottom: 34px; }
.achievements-hero { align-items: center; background: linear-gradient(135deg,#5436cf 0%,#8067dc 58%,#efe9ff 58%,#fff 100%); border-radius: 18px; box-shadow: 0 16px 35px rgba(68,50,156,.12); color: #fff; display: flex; justify-content: space-between; margin-bottom: 24px; overflow: hidden; padding: 28px 30px; }
.achievements-hero span { color: rgba(255,255,255,.82); display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; text-transform: uppercase; }
.achievements-hero h2 { color: #fff; font-size: 30px; margin: 0; }
.achievements-hero p { color: rgba(255,255,255,.86); font-size: 14px; margin: 7px 0 0; max-width: 560px; }
.achievements-report-link { align-items: center; background: #fff; border-radius: 24px; box-shadow: 0 8px 18px rgba(37,43,54,.12); color: #5236c7; display: inline-flex; flex: 0 0 auto; font-weight: 800; gap: 8px; padding: 12px 18px; }
.achievements-report-link:hover { color: #3b259c; }
.achievements-summary-grid { display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 24px; }
.achievements-summary-card { align-items: center; background: #fff; border: 1px solid #e1e5ec; border-radius: 16px; display: flex; gap: 14px; padding: 20px; }
.achievements-summary-card.is-primary { background: #fff7e7; border-color: #ffe0a0; }
.achievements-summary-card > span { align-items: center; background: #f1eeff; border-radius: 14px; color: #5236c7; display: flex; flex: 0 0 auto; font-size: 24px; height: 50px; justify-content: center; width: 50px; }
.achievements-summary-card.is-primary > span { background: #5236c7; color: #fff; }
.achievements-summary-card strong { color: #182033; display: block; font-size: 26px; line-height: 1; }
.achievements-summary-card small { color: #788398; display: block; font-size: 12px; margin-top: 5px; }
.achievements-toolbar { align-items: center; display: flex; justify-content: space-between; margin: 20px 0 14px; }
.achievements-toolbar h4 { margin: 0; }
.achievements-toolbar p { color: #778195; font-size: 13px; margin: 3px 0 0; }
.achievements-toolbar label { align-items: center; background: #fff; border: 1px solid #dce1e8; border-radius: 12px; display: flex; gap: 8px; margin: 0; padding: 10px 13px; }
.achievements-toolbar input { border: 0; min-width: 250px; outline: 0; }
.achievements-grid { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.achievement-skill-card { background: #fff; border: 1px solid #e2e6ee; border-radius: 16px; box-shadow: 0 10px 25px rgba(31,38,58,.04); padding: 20px; }
.achievement-skill-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.achievement-skill-head h5 { color: #151b2f; font-size: 18px; margin: 0; }
.achievement-skill-head small { color: #8067dc; display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; margin-top: 4px; text-transform: uppercase; }
.achievement-skill-card > p { color: #596579; font-size: 13px; line-height: 1.55; margin: 13px 0 0; }
.achievement-status { align-items: center; border-radius: 18px; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 800; gap: 5px; padding: 7px 10px; white-space: nowrap; }
.achievement-status.is-achieved, .achievement-course-list em.is-achieved { background: #e8f8ef; color: #178653; }
.achievement-status.is-partial { background: #f1eeff; color: #5236c7; }
.achievement-status.is-gap, .achievement-course-list em.is-gap { background: #fff4d8; color: #a46a00; }
.achievement-status.is-unrated, .achievement-course-list em.is-unrated { background: #eef1f5; color: #687386; }
.achievement-progress { background: #f6f7fa; border-radius: 12px; margin: 16px 0; overflow: hidden; padding: 11px 12px 13px; position: relative; }
.achievement-progress div { align-items: center; color: #657086; display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 8px; position: relative; z-index: 1; }
.achievement-progress strong { color: #182033; }
.achievement-progress::after { background: #e2e6ee; border-radius: 5px; bottom: 9px; content: ""; height: 6px; left: 12px; position: absolute; right: 12px; }
.achievement-progress > i { background: #62ce8e; border-radius: 5px; bottom: 9px; display: block; height: 6px; left: 12px; max-width: calc(100% - 24px); position: absolute; z-index: 1; }
.achievement-course-list { display: grid; gap: 8px; }
.achievement-course-list a { align-items: center; background: #fafbfe; border: 1px solid #edf0f5; border-radius: 11px; color: #252b36; display: flex; gap: 10px; justify-content: space-between; padding: 10px 11px; }
.achievement-course-list a:hover { border-color: #cfc6fb; color: #5236c7; }
.achievement-course-list span { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achievement-course-list em { align-items: center; border-radius: 14px; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-style: normal; font-weight: 800; gap: 4px; padding: 5px 8px; }
.achievement-course-report { margin-top: 26px; }
@media (max-width: 1199px) { .achievements-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.achievements-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .achievements-hero,.achievements-toolbar { align-items: stretch; flex-direction: column; gap: 14px; }.achievements-summary-grid { grid-template-columns: 1fr; }.achievements-toolbar input { min-width: 0; width: 100%; }.achievement-skill-head { flex-direction: column; }.achievement-course-list a { align-items: flex-start; flex-direction: column; } }
@media (max-width: 1199px) {
  .course-attendance-card .iq-card-body { gap: 13px; grid-template-columns: 110px minmax(0, 1fr); padding: 18px; }
  .course-attendance-ring { height: 110px; width: 110px; }
}
@media (max-width: 1399px) { .dashboard-course-grid:not(.dashboard-course-carousel) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .career-interest-modal .modal-dialog { max-width: calc(100vw - 48px); width: calc(100vw - 48px); }.career-interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .dashboard-course-grid:not(.dashboard-course-carousel), .career-interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dashboard-courses-header { align-items: flex-start; flex-direction: column; gap: 10px; }.dashboard-courses-header a,.dashboard-courses-header button,.dashboard-courses-header > strong { width: max-content; }.dashboard-courses-header .dashboard-interest-edit { width: 40px; }.dashboard-skill-cta,.career-interest-intro { align-items: flex-start; flex-direction: column; }.dashboard-skill-cta { padding-right: 80px; }.dashboard-skill-cta button { flex-basis: 50px; width: 50px; }.dashboard-top-picks { padding: 20px 16px 14px; }.career-interest-grid { grid-template-columns: 1fr; }.career-interest-modal .modal-header,.career-interest-modal .modal-body,.career-interest-modal .modal-footer { padding-left: 18px; padding-right: 18px; }.course-filter-bar { align-items: stretch; flex-direction: column; }.course-filter-search, .course-filter-select, .course-filter-submit, .course-filter-clear { justify-content: flex-start; max-width: none; width: 100%; }.course-filter-divider { display: none; }.dashboard-course-grid:not(.dashboard-course-carousel) { grid-template-columns: 1fr; }.dashboard-course-content { padding: 16px; }.dashboard-course-carousel .owl-nav { justify-content: center; }.dashboard-course-carousel .owl-stage { padding-bottom: 16px; } }
.site-chat-link { position: relative; }
.site-chat-badge { align-items: center; background: #e33d55; border: 2px solid #fff; border-radius: 12px; color: #fff; display: flex; font-size: 9px; font-weight: 700; height: 18px; justify-content: center; min-width: 18px; padding: 0 4px; position: absolute; right: 0; top: 0; }
.site-chat-badge[hidden] { display: none !important; }
.site-chat-dropdown-list { max-height: 330px; overflow-y: auto; }
.site-chat-dropdown-empty { color: #8992a2; font-size: 12px; padding: 22px; text-align: center; }
.site-chat-sender p { color: #8067dc; font-size: 11px; }
.site-chat-view-all { border-top: 1px solid #edf0f4; color: #5236c7; display: block; font-size: 12px; font-weight: 700; padding: 12px; text-align: center; }
.site-notification-list { max-height: 380px; overflow-y: auto; }
.site-notification-item.is-unread { background: #f4f1ff; }
.site-notification-item p { color: #778195; font-size: 11px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-notification-empty { align-items: center; color: #8992a2; display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.site-notification-empty i { font-size: 24px; }
.chat-shell { background: #fff; border: 1px solid #e5e8ef; border-radius: 16px; display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 600px; overflow: hidden; }
.chat-sidebar { border-right: 1px solid #e8ebf1; display: flex; flex-direction: column; min-width: 0; }
.chat-sidebar-head, .chat-main-head { align-items: center; border-bottom: 1px solid #e8ebf1; display: flex; min-height: 76px; padding: 15px 20px; }
.chat-sidebar-head { justify-content: space-between; }
.chat-sidebar-head span { color: #8067dc; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat-sidebar-head h4 { margin: 2px 0 0; }
.chat-search { align-items: center; background: #f4f5f8; border-radius: 10px; display: flex; gap: 8px; margin: 14px 16px; padding: 10px 12px; }
.chat-search input { background: transparent; border: 0; min-width: 0; outline: 0; width: 100%; }
.chat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 16px 12px; }
.chat-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #768196; font-size: 12px; padding: 9px 3px; }
.chat-tabs button.is-active { border-color: #5236c7; color: #5236c7; font-weight: 700; }
.chat-tabs button.has-updates::after { background: #e33d55; border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-left: 5px; vertical-align: top; width: 6px; }
.chat-panel { display: none; overflow-y: auto; padding: 4px 10px 16px; }
.chat-panel.is-active { display: block; }
.chat-person { align-items: center; background: transparent; border: 0; border-radius: 11px; display: flex; gap: 11px; padding: 10px; text-align: left; width: 100%; }
.chat-person:hover, .chat-person.is-active { background: #f1eeff; }
.chat-person img, .chat-request img, .chat-course-member img { border-radius: 50%; height: 42px; object-fit: cover; width: 42px; }
.chat-person span, .chat-request span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.chat-person strong, .chat-request strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person small, .chat-request small, .chat-course small { color: #8992a2; font-size: 11px; }
.chat-request, .chat-course-member { align-items: center; display: flex; gap: 10px; padding: 10px 6px; }
.chat-request button, .chat-course-member button { background: #5236c7; border: 0; border-radius: 7px; color: #fff; font-size: 11px; padding: 6px 8px; }
.chat-course { border-bottom: 1px solid #edf0f4; padding: 5px 0; }
.chat-course summary { align-items: center; cursor: pointer; display: flex; gap: 10px; list-style: none; padding: 10px 6px; }
.chat-course summary > span { display: flex; flex-direction: column; }
.chat-course-member { padding-left: 20px; }
.chat-course-member > span { flex: 1; font-size: 12px; }
.chat-course-member img { height: 30px; width: 30px; }
.chat-empty { color: #8992a2; font-size: 12px; padding: 25px 12px; text-align: center; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-main-head { gap: 11px; }
.chat-main-head > img { border-radius: 50%; height: 42px; object-fit: cover; width: 42px; }
.chat-main-head > div:nth-child(3) { flex: 1; }
.chat-main-head h5 { margin: 0; }
.chat-main-head small { color: #8992a2; }
.chat-actions { display: flex; gap: 5px; }
.chat-actions button, .chat-mobile-open, .chat-mobile-close { background: transparent; border: 0; border-radius: 8px; color: #687386; font-size: 19px; padding: 7px; }
.chat-actions button:hover, .chat-actions button.is-active { background: #f1eeff; color: #5236c7; }
.chat-messages { background: #f8f9fb; display: flex; flex: 1; flex-direction: column; gap: 5px; overflow-y: auto; padding: 14px 18px; }
.chat-welcome { color: #8992a2; margin: auto; text-align: center; }
.chat-welcome i { color: #8067dc; font-size: 44px; }
.chat-welcome img {
  display: block;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
  height: 120px;
  margin: 0 auto 12px;
  object-fit: contain;
  width: auto;
}
.chat-bubble { align-self: flex-start; max-width: min(70%, 620px); }
.chat-bubble > div { background: #fff; border: 1px solid #e4e8ef; border-radius: 4px 12px 12px; color: #303746; font-size: 13px; line-height: 1.35; padding: 7px 10px; white-space: pre-wrap; word-break: break-word; }
.chat-bubble.is-mine { align-self: flex-end; text-align: right; }
.chat-bubble.is-mine > div { background: #5236c7; border-color: #5236c7; border-radius: 14px 4px 14px 14px; color: #fff; text-align: left; }
.chat-bubble small { color: #929aaa; font-size: 8px; line-height: 1; padding: 1px 4px 2px; }
.chat-compose { align-items: flex-end; border-top: 1px solid #e8ebf1; display: flex; gap: 8px; padding: 13px 16px; position: relative; }
.chat-compose textarea { border: 1px solid #dde2ea; border-radius: 12px; flex: 1; max-height: 110px; min-height: 44px; outline: 0; padding: 10px 12px; resize: none; }
.chat-compose button { background: transparent; border: 0; color: #5236c7; font-size: 21px; height: 44px; width: 44px; }
.chat-compose .chat-send { background: #5236c7; border-radius: 11px; color: #fff; }
.chat-compose button:disabled { opacity: .4; }
.chat-emoji-picker { background: #fff; border: 1px solid #e1e5ec; border-radius: 10px; bottom: 65px; box-shadow: 0 8px 25px #25304a24; left: 15px; max-width: 270px; padding: 8px; position: absolute; }
.chat-emoji-picker button { background: transparent; border: 0; font-size: 21px; height: 36px; padding: 3px; width: 36px; }
.chat-mobile-open, .chat-mobile-close { display: none; }
@media (max-width: 767px) {
  .chat-shell { display: block; height: calc(100vh - 120px); min-height: 520px; position: relative; }
  .chat-sidebar { background: #fff; bottom: 0; left: 0; position: absolute; top: 0; transform: translateX(-102%); transition: transform .2s; width: min(88vw, 330px); z-index: 5; }
  .chat-sidebar.is-open { transform: translateX(0); }
  .chat-main { height: 100%; }
  .chat-mobile-open, .chat-mobile-close { display: inline-block; }
  .chat-actions { gap: 0; }
  .chat-bubble { max-width: 86%; }
}
.print-grade-report { display: none; }
.course-grade-metrics { border-bottom: 1px solid #e8ebf0; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 24px; }
.course-grade-metric { background: #f6f7f9; border-radius: 11px; min-width: 0; padding: 16px; }
.course-grade-metric > span { color: #7b8494; display: block; font-size: 13px; }
.course-grade-metric strong { color: #242b3a; display: block; font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.course-grade-metric strong em { color: #7b8494; font-size: 14px; font-style: normal; font-weight: 400; }
.course-grade-metric small { color: #7b8494; display: block; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-grade-metric.is-success { background: #ebf8f0; }
.course-grade-metric.is-success > span, .course-grade-metric.is-success strong, .course-grade-metric.is-success small { color: #237a4b; }
.course-grade-metric.is-warning { background: #fff6df; }
.course-grade-metric.is-warning > span, .course-grade-metric.is-warning strong, .course-grade-metric.is-warning small { color: #9a6700; }
.course-grade-table { padding: 8px 0 16px; }
.course-grade-row { align-items: center; border-top: 1px solid #e8ebf0; display: grid; gap: 12px; grid-template-columns: minmax(180px, 1.6fr) minmax(90px, 1fr) minmax(130px, 1.4fr) minmax(90px, .9fr); padding: 14px 24px; }
.course-grade-table-head { border-top: 0; color: #7b8494; font-size: 12px; padding-bottom: 12px; padding-top: 12px; }
.course-grade-activity { align-items: center; color: #2f3746; display: flex; font-size: 14px; gap: 9px; min-width: 0; }
.course-grade-activity i { color: #7b8494; flex: 0 0 auto; font-size: 17px; }
.course-grade-activity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-grade-score { color: #2f3746; font-size: 14px; }
.course-grade-score span { color: #7b8494; }
.course-grade-progress > span { background: #edf0f3; border-radius: 6px; display: block; height: 7px; overflow: hidden; }
.course-grade-progress i { display: block; height: 100%; min-width: 0; transition: width .3s ease; }
.course-grade-progress i.is-success { background: #3aa76d; }
.course-grade-progress i.is-danger { background: #db5a66; }
.course-grade-progress i.is-pending { background: #c4cad2; }
.course-grade-status { border-radius: 14px; display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; white-space: nowrap; }
.course-grade-status.is-success { background: #ebf8f0; color: #237a4b; }
.course-grade-status.is-danger { background: #fdecef; color: #b63846; }
.course-grade-status.is-pending { background: #f0f2f5; color: #667180; }
.course-grades-footer { align-items: center; border-top: 1px solid #e8ebf0; color: #606b7a; display: flex; font-size: 13px; gap: 8px; padding: 14px 24px; }
.course-grades-footer i { color: #7b8494; font-size: 17px; }
.course-grades-empty { align-items: center; color: #7b8494; display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: 28px; text-align: center; }
.course-grades-empty i { color: #8067dc; font-size: 34px; }
.course-grades-empty p { margin: 8px 0 0; }
@media print {
  @page { margin: 12mm; size: A4; }
  body * { visibility: hidden !important; }
  body { background: #fff !important; }
  .print-grade-report, .print-grade-report * { visibility: visible !important; }
  .print-grade-report {
    background: #fff;
    color: #1e2a3a;
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .print-grade-head { align-items: flex-start; border-bottom: 3px double #1e2a3a; display: flex; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; }
  .print-grade-brand { align-items: center; display: flex; gap: 10px; margin-bottom: 14px; }
  .print-grade-brand img { height: 34px; max-width: 150px; object-fit: contain; object-position: left center; width: auto; }
  .print-grade-brand span { color: #1e2a3a; font-family: Georgia, serif; font-size: 15px; font-weight: bold; }
  .print-grade-head h1 { color: #1e2a3a; font-family: Georgia, serif; font-size: 28px; margin: 0; }
  .print-grade-head p { color: #6b6255; font-size: 11px; letter-spacing: 1.4px; margin: 5px 0 0; text-transform: uppercase; }
  .print-grade-meta { color: #6b6255; font-family: monospace; font-size: 10px; line-height: 1.6; text-align: right; }
  .print-grade-student { border-bottom: 1px solid #c9c3b5; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-bottom: 28px; padding-bottom: 22px; }
  .print-grade-student label, .print-grade-summary label { color: #8a8172; display: block; font-size: 9px; letter-spacing: 1.1px; margin-bottom: 5px; text-transform: uppercase; }
  .print-grade-student span { border-bottom: 1px dotted #b5ad9b; display: block; font-size: 13px; min-height: 23px; padding-bottom: 4px; }
  .print-grade-attendance { background: #f3efe4 !important; border-left: 3px solid #2f7d52; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: -10px 0 26px; padding: 12px 15px; }
  .print-grade-attendance label { color: #6b6255; display: block; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
  .print-grade-attendance strong { color: #1e2a3a; display: block; font-family: Georgia, serif; font-size: 17px; margin-top: 3px; }
  .print-grade-table { border-collapse: collapse; margin: 0; width: 100%; }
  .print-grade-table th { border-bottom: 2px solid #1e2a3a; color: #6b6255; font-size: 9px; letter-spacing: 1px; padding: 0 7px 9px; text-align: left; text-transform: uppercase; }
  .print-grade-table th:not(:first-child), .print-grade-table td:not(:first-child) { text-align: center; }
  .print-grade-table td { border-bottom: 1px solid #ddd8cb; color: #1e2a3a; font-size: 12px; padding: 10px 7px; }
  .print-grade-table tr { break-inside: avoid; }
  .print-grade-track { background: #e5e1d6; border-radius: 3px; display: block; height: 5px; min-width: 80px; overflow: hidden; }
  .print-grade-track i { background: #7a2e2e; display: block; height: 100%; }
  .print-grade-track i.mid { background: #97731b; }
  .print-grade-track i.high { background: #2f5233; }
  .print-grade-badge { border: 1.5px solid; border-radius: 50%; display: inline-block; font-family: Georgia, serif; font-size: 12px; height: 27px; line-height: 24px; text-align: center; width: 27px; }
  .print-grade-badge.is-a { color: #2f5233; }
  .print-grade-badge.is-b { color: #3b5a8a; }
  .print-grade-badge.is-c { color: #97731b; }
  .print-grade-badge.is-f { color: #7a2e2e; }
  .print-grade-badge.is-na { border-style: dashed; color: #9a9284; }
  .print-grade-summary { border: 1px solid #1e2a3a; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
  .print-grade-summary > div { border-right: 1px solid #c9c3b5; padding: 14px; }
  .print-grade-summary > div:last-child { border: 0; }
  .print-grade-summary strong { color: #1e2a3a; font-family: Georgia, serif; font-size: 20px; }
  .print-grade-note { background: #f3efe4 !important; border-left: 3px solid #97731b; color: #4a4437; font-size: 12px; line-height: 1.5; margin-top: 24px; padding: 12px 15px; }
  .print-grade-footer { align-items: flex-end; display: flex; justify-content: space-between; margin-top: 42px; }
  .print-grade-footer span { border-top: 1px solid #1e2a3a; color: #6b6255; font-size: 9px; letter-spacing: .5px; padding-top: 6px; text-transform: uppercase; width: 220px; }
  .print-grade-footer small { color: #6b6255; font-family: monospace; font-size: 9px; text-transform: uppercase; }
  .print-grade-empty { color: #6b6255; padding: 35px; text-align: center; }
}
.scorm-player-section, .scorm-results { border-top: 1px solid #edf0f4; padding-top: 22px; }
.scorm-results { margin-top: 28px; }
.scorm-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 15px; }
.scorm-section-heading h5 { margin: 3px 0 0; }
.scorm-player { background: #f3f4f6; border: 1px solid #dfe3e8; border-radius: 12px; height: 70vh; min-height: 520px; width: 100%; }
.scorm-player-empty, .scorm-no-attempts { align-items: center; background: #f7f8fb; border: 1px dashed #cfd5df; border-radius: 12px; color: #778195; display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: 30px; text-align: center; }
.scorm-player-empty i, .scorm-no-attempts i { color: #8067dc; font-size: 34px; }
.scorm-player-empty h5 { margin: 10px 0 4px; }
.scorm-player-empty p, .scorm-no-attempts p { margin: 0; }
.scorm-attempt-table thead th { border-top: 0; color: #778195; font-size: 11px; text-transform: uppercase; }
.scorm-status { background: #e9f7ef; border-radius: 14px; color: #218653; display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 9px; }
.scorm-status.is-progress { background: #fff6df; color: #9a6700; }
.scorm-unavailable-icon { font-size: 42px; }
.scorm-launch-page { background: #111827; margin: 0; overflow: hidden; }
.scorm-launch-header { align-items: center; background: #fff; display: flex; height: 76px; justify-content: space-between; padding: 12px 24px; }
.scorm-launch-header span { color: #768196; display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scorm-launch-header h1 { font-size: 18px; margin: 3px 0 0; }
.scorm-launch-stage { align-items: center; display: flex; height: calc(100vh - 76px); justify-content: center; }
.scorm-launch-stage iframe { background: #fff; border: 0; height: 100%; width: 100%; }
.scorm-launch-error { color: #fff; max-width: 560px; padding: 30px; text-align: center; }
.scorm-launch-error > i { color: #f4b740; font-size: 48px; }
.scorm-launch-error h2 { color: #fff; margin: 12px 0 7px; }
.scorm-launch-error p { color: #cbd5e1; }
@media (max-width: 991px) {
  .scorm-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scorm-completion-panel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .scorm-completion-list { justify-content: flex-start; }
  .folder-completion-panel { align-items: flex-start; flex-direction: column; }
  .folder-completion-list { justify-content: flex-start; }
  .folder-file-row { align-items: flex-start; flex-wrap: wrap; }
  .folder-file-actions { padding-left: 56px; width: 100%; }
  .course-grade-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grade-row { grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 1fr) minmax(100px, 1fr) minmax(80px, .8fr); }
}

.course-style .iq-card.accordion-active {
  border-radius: 15px 15px 0 0 !important;
}

.iq-card .iq-card-header {
  border-radius: 15px 15px 0 0;
}

.todo-list {
  margin-bottom: 0px !important;
  list-style: none;
  padding-left: 20px;
  line-height: 25px;
}

.items-todo {
  font-size: .75rem;
  white-space: nowrap;
  margin-right: 20px;
}

.items-todo.text-success:before {
  content: "\2713";
  border-radius: 50px;
  border: .5px solid #ededed;
  padding: 2px 5px;
  margin-right: 5px;
}

.items-todo.text-success {
  color: #00cc10 !important;
}

.items-todo.text-danger:before {
  content: "\00D7";
  border-radius: 50px;
  border: .5px solid #ededed;
  padding: 2px 5px;
  margin-right: 5px;
}

.items-todo.text-danger {
  color: var(--iq-danger) !important;
}

.dropdown-menu {
  min-width: auto !important;
}

.logo-white {
  filter: brightness(0) invert(1);
}

.sidebar-main .logo-white {
  width: 100%;
}

.mb-20 {
  margin-bottom: 10px !important;
}

.iq-media-group .iq-media:first-child {
  margin-left: 0;
}

.iq-media-group .iq-media {
  margin-left: -20px;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.iq-media {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.border-bottom-menu {
  border-bottom: 1px solid var(--iq-light-primary);
  padding-bottom: 10px;
}

.teachers-lists .start-menu {
  background: var(--iq-primary);
  color: #fff;
  text-decoration: none;
  padding: 20px 20px;
  border-radius: 13px 13px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.nowrap {
  white-space: nowrap;
}

.avatar-40 {
  min-width: 40px !important;
}

.teachers-lists h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8rem;
}

.capitalize {
  text-transform: capitalize;
}

.teachers-lists .add-suggestion {
  font-size: 20px;
  display: flex;
  gap: 7px;
  margin-left: 15px;
}

.subpills {
  font-size: 12px;
}

.course-image {
  width: 100%;
  height: 220px;      
  object-fit: cover;  
  object-position: center;
  display: block;
}

/* Forum discussion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.forum-page-heading { margin-bottom: 24px; }
.forum-back-link { color: var(--iq-body-text); font-size: 14px; font-weight: 500; }
.forum-back-link:hover { color: var(--iq-primary); }
.forum-back-link i { margin-right: 5px; }
.forum-eyebrow { color: var(--iq-primary); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.forum-reply-count { background: var(--iq-light-primary); border-radius: 30px; color: var(--iq-primary); font-size: 13px; font-weight: 600; padding: 9px 15px; }
.forum-reply-count i { margin-right: 5px; }
.forum-reply-count:hover { color: var(--iq-primary); text-decoration: none; }
.iq-card .forum-discussion-header { min-height: 96px; padding: 0 !important; position: relative; }
.forum-discussion-header .iq-header-title { align-items: center; display: flex; inset: 0; padding: 0 310px 0 24px; position: absolute; width: 100%; }
.forum-discussion-header .card-title { margin: 0; }
.forum-discussion-actions { align-items: center; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.forum-discussion-actions form { margin: 0; }
.forum-action-btn { align-items: center; background: #fff; border: 1px solid #dfe3ea; border-radius: 20px; color: #667085; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 600; gap: 5px; padding: 7px 12px; }
.forum-action-btn:hover { border-color: var(--iq-primary); color: var(--iq-primary); }
.forum-action-btn.is-active { background: #fff8df; border-color: #f2c94c; color: #a56b00; }
.forum-thread { margin: 0 auto; padding: 30px; }
.forum-post-card { background: #fff; border: 1px solid #edf0f5; border-radius: 14px;  margin-bottom: 22px; overflow: hidden; position: relative; }
.forum-post-card { scroll-margin-top: 105px; }
.forum-post-card:target { border-color: var(--iq-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.forum-post-card .forum-post-accent { background: #dfe7ef; bottom: 0; left: 0; position: absolute; top: 0; width: 4px; }
.forum-post-original { border: 0; }
.forum-post-original .forum-post-accent { background: var(--iq-primary); width: 5px; }
.forum-post-reply { margin-left: calc(var(--forum-depth, 1) * 24px); }
.forum-post-reply .forum-post-inner{ background: #f8f9fb; }
#forum-reply-form{ background: #f8f9fb; border: 1px solid #e8edf3; border-radius: 14px; margin-top: 24px; padding: 24px; }
.forum-post-inner { padding: 20px; }
.forum-post-header { align-items: center; border-bottom: 1px solid #f0f2f5; display: flex; padding-bottom: 18px; }
.forum-author-avatar { border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 9px rgba(0, 0, 0, .12); height: 52px; min-width: 52px; object-fit: cover; width: 52px; }
.forum-author-meta { margin-left: 13px; min-width: 0; }
.forum-author-meta h5 { color: #263238; font-size: 16px; font-weight: 600; margin: 0 9px 0 0; }
.forum-author-badge { background: #eef6ff; border-radius: 20px; color: var(--iq-primary); font-size: 11px; font-weight: 600; padding: 4px 9px; }
.forum-post-time { color: #8b96a5; font-size: 12px; margin-top: 5px; }
.forum-post-number { color: #b0b8c3; font-size: 12px; margin-left: auto; }
.forum-post-number:hover { color: var(--iq-primary); text-decoration: none; }
.forum-reply-subject { color: #344054; font-size: 18px; margin: 22px 0 -6px; }
.forum-post-message { color: #4c5866; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; padding: 22px 0 10px; }
.forum-post-message p:last-child { margin-bottom: 0; }
.forum-post-message img { height: auto; max-width: 100%; }
.forum-attachments { border-top: 1px solid #f0f2f5; margin-top: 16px; padding-top: 18px; }
.forum-section-label { color: #657080; font-size: 12px; font-weight: 700; letter-spacing: .4px; margin-bottom: 13px; text-transform: uppercase; }
.forum-section-label i { margin-right: 5px; }
.forum-attachment-card { align-items: center; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; color: #4c5866; display: flex; min-height: 70px; overflow: hidden; transition: .2s ease; }
.forum-attachment-card:hover { border-color: var(--iq-primary); box-shadow: 0 5px 15px rgba(50, 100, 160, .1); color: var(--iq-primary); transform: translateY(-2px); }
.forum-attachment-preview { flex: 0 0 88px; height: 70px; overflow: hidden; }
.forum-attachment-preview img { height: 100%; object-fit: cover; width: 100%; }
.forum-file-icon { color: var(--iq-primary); font-size: 27px; padding: 0 18px; }
.forum-file-info { min-width: 0; padding: 10px 13px; }
.forum-file-info strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-file-info span { color: #929baa; display: block; font-size: 11px; margin-top: 4px; }
.forum-file-info span i { margin-left: 5px; }
.forum-post-footer { align-items: center; border-top: 1px solid #f0f2f5; display: flex; justify-content: space-between; margin-top: 14px; padding-top: 17px; }
.forum-tags span { background: #f2f4f7; border-radius: 20px; color: #667085; display: inline-block; font-size: 11px; margin: 3px 6px 3px 0; padding: 5px 10px; }
.forum-tags span i { margin-right: 4px; }
.forum-reply-btn { border-radius: 8px; font-size: 13px; padding: 7px 15px; }
.forum-post-reply { border-radius: 10px; margin-bottom: 10px; }
.forum-post-reply .forum-post-inner { padding: 12px 16px; }
.forum-post-reply .forum-post-header { padding-bottom: 9px; }
.forum-post-reply .forum-author-avatar { border-width: 2px; height: 36px; min-width: 36px; width: 36px; }
.forum-post-reply .forum-author-meta { margin-left: 10px; }
.forum-post-reply .forum-author-meta h5 { font-size: 14px; }
.forum-post-reply .forum-post-time { font-size: 11px; margin-top: 2px; }
.forum-post-reply .forum-reply-subject { font-size: 14px; margin: 10px 0 0; }
.forum-post-reply .forum-post-message { font-size: 14px; line-height: 1.55; padding: 10px 0 4px; }
.forum-post-reply .forum-post-message p { margin-bottom: 6px; }
.forum-post-reply .forum-attachments { margin-top: 8px; padding-top: 10px; }
.forum-post-reply .forum-post-footer { margin-top: 7px; padding-top: 9px; }
.forum-post-reply .forum-tags span { padding: 3px 8px; }
.forum-post-reply .forum-reply-btn { margin-top: 0; padding: 4px 11px; }
.forum-reply-form-card { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 14px; margin-top: 24px; padding: 24px; }
.forum-reply-form-card h5 { color: #263238; margin-bottom: 18px; }
.forum-reply-form-card h5 i { color: var(--iq-primary); margin-right: 6px; }
.forum-reply-form-card textarea { min-height: 130px; resize: vertical; background: #fff; border: 1px solid #e8edf3; border-radius: 10px; padding: 12px 14px; width: 100%; }
.forum-replying-to { background: #eef2ff; border-left: 3px solid var(--iq-primary); border-radius: 5px; color: #4f46b8; font-size: 12px; margin-bottom: 12px; padding: 7px 10px; }
.forum-empty-state { background: #fff; border-radius: 14px; box-shadow: 0 5px 22px rgba(44, 62, 80, .06); padding: 60px 20px; text-align: center; }
.forum-empty-state > i { color: var(--iq-primary); font-size: 48px; }
.forum-empty-state h4 { margin: 12px 0 6px; }
.forum-empty-state p { margin: 0; }

@media (max-width: 767px) {
  .iq-card .forum-discussion-header { min-height: 78px; }
  .forum-discussion-header .iq-header-title { padding: 0 210px 0 16px; }
  .forum-discussion-actions { right: 16px; }
  .forum-discussion-actions span { display: none; }
  .forum-page-title { font-size: 24px; }
  .forum-reply-count { margin-top: 12px; }
  .forum-post-reply { margin-left: calc(var(--forum-depth, 1) * 10px); }
  .forum-post-inner { padding: 20px 18px 17px; }
  .forum-author-badge { display: block; margin-top: 5px; }
  .forum-post-footer { align-items: flex-start; flex-direction: column; }
  .forum-reply-btn { margin-top: 12px; }
}

@media (max-width: 575px) {
  .course-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .course-progress-summary, .course-progress-count.is-untracked { margin-left: 29px; }
  .course-header-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: 14px; }
  .overall-course-progress { width: max-content; }
  .overall-course-progress-track { width: 112px; }
  .scorm-summary-grid { grid-template-columns: 1fr; }
  .scorm-player { min-height: 420px; }
  .course-grades-header, .course-grade-metrics, .course-grades-footer { padding-left: 16px; padding-right: 16px; }
  .course-grade-metrics { grid-template-columns: 1fr; }
  .course-grade-table { padding: 4px 12px 14px; }
  .course-grade-table-head { display: none; }
  .course-grade-row { border: 1px solid #e8ebf0; border-radius: 10px; gap: 10px; grid-template-columns: 1fr auto; margin-top: 10px; padding: 13px; }
  .course-grade-activity { grid-column: 1 / -1; }
  .course-grade-progress { grid-column: 1 / -1; grid-row: 3; }
}

/* Tracked media resources */
.resource-viewer-body { background: #10151d; color: #fff; min-height: 100vh; }
.resource-viewer { display: flex; flex-direction: column; min-height: 100vh; }
.resource-viewer-header { align-items: center; background: #fff; color: #182230; display: flex; gap: 18px; justify-content: space-between; min-height: 76px; padding: 14px 24px; }
.resource-viewer-header > div:first-child { min-width: 0; }
.resource-viewer-header span { color: #697586; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.resource-viewer-header h1 { font-size: 19px; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-viewer-header .btn { align-items: center; display: inline-flex; font-size: 20px; height: 40px; justify-content: center; padding: 0; width: 40px; }
.resource-header-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 10px; }
.resource-header-actions .resource-competencies { flex: 0 0 auto; margin-left: 0; }
.resource-header-actions .activity-competency-trigger { min-height: 40px; }
.resource-header-actions .resource-download-btn { border-radius: 8px; font-size: 14px; font-weight: 800; gap: 7px; height: 40px; padding: 0 15px; width: auto; }
.resource-header-actions .resource-read-btn { border-radius: 8px; font-size: 14px; font-weight: 800; gap: 7px; height: 40px; padding: 0 15px; width: auto; }
.resource-header-actions .resource-read-stop { flex: 0 0 auto; }
.resource-media-stage { align-items: center; display: flex; flex: 1; justify-content: center; min-height: 0; padding: 28px; }
.resource-media-stage:has(.resource-document-viewer) { align-items: stretch; padding: 0; }
.resource-media-stage.has-playlist { align-items: stretch; gap: 0; padding: 0; }
.resource-video-player { align-items: center; display: flex; flex: 1; justify-content: center; min-width: 0; padding: 28px; }
.resource-media-stage video { background: #000; max-height: calc(100vh - 132px); max-width: 1200px; width: 100%; }
.resource-video-playlist { background: #fff; border-right: 1px solid #e2e8f0; color: #182230; flex: 0 0 310px; max-height: calc(100vh - 76px); overflow-y: auto; }
.resource-playlist-heading { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; padding: 15px 18px; }
.resource-playlist-heading > div > span { display: block; font-size: 14px; font-weight: 700; }
.resource-playlist-heading > div > strong { color: #697586; display: block; font-size: 11px; margin-top: 2px; }
.resource-autoplay-toggle { align-items: center; color: #596273; cursor: pointer; display: flex; font-size: 11px; font-weight: 600; gap: 6px; margin: 0; }
.resource-autoplay-toggle input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.resource-autoplay-switch { background: #cfd5de; border-radius: 10px; height: 18px; position: relative; transition: background .2s ease; width: 32px; }
.resource-autoplay-switch::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); content: ""; height: 14px; left: 2px; position: absolute; top: 2px; transition: transform .2s ease; width: 14px; }
.resource-autoplay-toggle input:checked + .resource-autoplay-switch { background: var(--iq-primary); }
.resource-autoplay-toggle input:checked + .resource-autoplay-switch::after { transform: translateX(14px); }
.resource-autoplay-toggle input:focus + .resource-autoplay-switch { box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.resource-playlist-item { align-items: center; border-bottom: 1px solid #eef1f5; color: #344054; display: flex; gap: 11px; min-height: 72px; padding: 12px 15px; transition: background .15s ease; }
.resource-playlist-item:hover { background: #f8fafc; color: var(--iq-primary); }
.resource-playlist-item.is-active { background: #eef6ff; box-shadow: inset 3px 0 0 var(--iq-primary); color: var(--iq-primary); }
.resource-playlist-number { align-items: center; background: #eef1f5; border-radius: 50%; display: inline-flex; flex: 0 0 32px; font-size: 12px; font-weight: 700; height: 32px; justify-content: center; width: 32px; }
.resource-playlist-item.is-active .resource-playlist-number { background: var(--iq-primary); color: #fff; }
.resource-playlist-title { min-width: 0; }
.resource-playlist-title strong, .resource-playlist-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-playlist-title strong { font-size: 13px; }
.resource-playlist-title small { color: #8a94a3; font-size: 10px; margin-top: 4px; }
.resource-playlist-completion { align-items: center; background: #e4e7ec; border-radius: 50%; color: #98a2b3; display: inline-flex; flex: 0 0 25px; height: 25px; justify-content: center; margin-left: auto; width: 25px; }
.resource-playlist-completion.is-complete { background: #dcfae6; color: #16803c; }
.resource-playlist-completion i { font-size: 16px; font-weight: 700; }
.resource-audio-player { background: #fff; border-radius: 8px; color: #182230; max-width: 620px; padding: 36px; text-align: center; width: 100%; }
.resource-audio-player > i { color: var(--iq-primary); font-size: 52px; }
.resource-audio-player h2 { font-size: 19px; margin: 12px 0 24px; overflow-wrap: anywhere; }
.resource-audio-player audio { width: 100%; }
.resource-document-viewer { background: #fff; border-radius: 0; height: calc(100vh - 76px); overflow: hidden; width: 100%; }
.resource-document-viewer iframe { border: 0; height: 100%; width: 100%; }
.resource-pdf-canvas-viewer { background: #525866; overflow: auto; padding: 28px 16px; text-align: center; }
.resource-pdf-page { background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); display: block; height: auto; margin: 0 auto 22px; max-width: min(100%, 1120px); width: auto; }
.resource-pdf-loading { align-items: center; color: #fff; display: flex; font-weight: 700; height: 100%; justify-content: center; }
.resource-pdf-loading.is-error { color: #ffd7d7; }
.resource-image-viewer { align-items: center; display: flex; height: calc(100vh - 132px); justify-content: center; max-width: 1180px; overflow: auto; width: 100%; }
.resource-image-viewer img { max-height: 100%; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }

@media (max-width: 575px) {
  .resource-viewer-header { padding: 12px 15px; }
  .resource-viewer-header h1 { font-size: 16px; }
  .resource-header-actions { gap: 7px; }
  .resource-header-actions .resource-competencies { width: auto; }
  .resource-header-actions .activity-competency-trigger { font-size: 0; padding: 0; width: 40px; }
  .resource-header-actions .activity-competency-trigger i { font-size: 18px; }
  .resource-header-actions .activity-competency-trigger span { display: none; }
  .resource-header-actions .resource-download-btn,
  .resource-header-actions .resource-read-btn { font-size: 0; padding: 0; width: 40px; }
  .resource-header-actions .resource-download-btn i,
  .resource-header-actions .resource-read-btn i { font-size: 18px; margin: 0; }
  .resource-media-stage { padding: 14px; }
  .resource-media-stage:has(.resource-document-viewer) { padding: 0; }
  .resource-media-stage.has-playlist { display: block; padding: 0; }
  .resource-video-playlist { border-bottom: 1px solid #e2e8f0; border-right: 0; flex: none; max-height: 230px; }
  .resource-video-player { padding: 14px; }
  .resource-audio-player { padding: 26px 18px; }
  .resource-document-viewer { height: calc(100vh - 70px); }
  .resource-image-viewer { height: calc(100vh - 118px); }
}

/* Assignment activity */
.assignment-page { background: #fff; border: 1px solid #e8edf3; border-radius: 8px; overflow: hidden; margin-bottom: 50px;}
.assignment-heading { align-items: center; background: #fff; border-bottom: 1px solid #eef2f7; display: flex; gap: 14px; justify-content: space-between; padding: 20px 24px; }
.assignment-title-group { min-width: 0; }
.assignment-eyebrow { color: var(--iq-primary); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; margin-bottom: 5px; text-transform: uppercase; }
.assignment-heading h2 { color: #263238; font-size: 26px; margin: 0; overflow-wrap: anywhere; }
.assignment-heading .card-title { margin-bottom: 0; }
.assignment-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.assignment-badges .btn { margin-bottom: 0 !important; }
.assignment-badges .badge { font-size: 12px; margin-right: 7px; padding: 7px 10px; }
.assignment-badges i { margin-right: 4px; }
.assignment-open-btn { flex: 0 0 auto; margin-left: 24px; }
.assignment-open-btn i { margin-right: 5px; }
.assignment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.assignment-main { min-width: 0; padding: 30px; margin-bottom:50px; }
.assignment-section h4, .assignment-summary h4 { color: #344054; font-size: 17px; margin-bottom: 20px; }
.assignment-description { color: #4c5866; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.assignment-description img { height: auto; max-width: 100%; }
.assignment-description p:last-child { margin-bottom: 0; }
.assignment-alert i { margin-right: 6px; }
.assignment-workflow-tabs { border-bottom: 1px solid #e2e8f0; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.assignment-workflow-tab { align-items: center; background: #f8fafc; border: 0; border-right: 1px solid #e2e8f0; color: #7b8794; display: flex; gap: 10px; min-height: 70px; padding: 12px 15px; text-align: left; }
.assignment-workflow-tab:last-child { border-right: 0; }
.assignment-workflow-tab small { display: block; font-size: 10px; font-weight: 700; margin-bottom: 2px; text-transform: uppercase; }
.assignment-workflow-tab:not(:disabled) { cursor: pointer; }
.assignment-workflow-tab:disabled { cursor: not-allowed; opacity: .55; }
.assignment-workflow-tab.is-active { background: #eef6ff; box-shadow: inset 0 -3px 0 var(--iq-primary); color: #344054; }
.assignment-workflow-tab.is-complete { color: var(--iq-success); }
.assignment-tab-status { align-items: center; border: 1px solid #cbd5e1; border-radius: 50%; display: inline-flex; flex: 0 0 30px; height: 30px; justify-content: center; width: 30px; }
.assignment-workflow-tab.is-complete .assignment-tab-status { background: var(--iq-success); border-color: var(--iq-success); color: #fff; }
.assignment-workflow-panel { display: none; padding-top: 28px; }
.assignment-workflow-panel.is-active { display: block; }
.assignment-confirm-section, .assignment-submitted-state { border-top: 1px solid #e8edf3; margin-top: 28px; padding-top: 28px; }
.assignment-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.assignment-section-heading h4 { margin: 3px 0 0; }
.assignment-section-heading > i { color: var(--iq-primary); font-size: 28px; }
.assignment-step { color: var(--iq-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.assignment-submission-form label { color: #344054; display: block; font-weight: 600; margin-bottom: 8px; }
.assignment-submission-form textarea { line-height: 1.6; min-height: 220px; resize: vertical; }
.assignment-file-upload { margin-top: 22px; }
.assignment-file-drop { align-items: center; background: #f8fafc; border: 1px dashed #b8c2cc; border-radius: 8px; display: flex; gap: 14px; min-height: 96px; padding: 18px; position: relative; }
.assignment-file-drop > i { color: var(--iq-primary); font-size: 34px; }
.assignment-file-drop strong, .assignment-file-drop span { display: block; }
.assignment-file-drop strong { color: #344054; font-size: 14px; }
.assignment-file-drop span { color: #7b8794; font-size: 12px; margin-top: 3px; }
.assignment-file-drop input { cursor: pointer; inset: 0; opacity: 0; position: absolute; width: 100%; }
.assignment-selected-files { color: #4c5866; font-size: 13px; margin-top: 8px; }
.assignment-selected-files div { padding: 4px 0; }
.assignment-selected-files i { color: var(--iq-primary); margin-right: 6px; }
.assignment-form-actions { margin-top: 16px; }
.assignment-form-actions i, .assignment-confirm-section button i { margin-right: 5px; }
.assignment-review-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 14px; padding: 18px; }
.assignment-review-block h6 { color: #344054; font-size: 13px; margin-bottom: 10px; text-transform: uppercase; }
.assignment-review-block p { color: #4c5866; margin-bottom: 0; overflow-wrap: anywhere; }
.assignment-review-files { list-style: none; margin: 0; padding: 0; }
.assignment-review-files li { color: #4c5866; padding: 4px 0; }
.assignment-review-files i { color: var(--iq-primary); margin-right: 6px; }
.assignment-review-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 20px; }
.assignment-review-actions i { margin: 0 4px; }
.assignment-confirm-section { background: #f7f9fc; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 28px; padding: 24px; }
.assignment-confirm-check { align-items: flex-start; color: #344054; cursor: pointer; display: flex; line-height: 1.5; margin: 20px 0; }
.assignment-confirm-check input { flex: 0 0 auto; height: 18px; margin: 2px 10px 0 0; width: 18px; }
.assignment-submitted-state { align-items: center; display: flex; }
.assignment-submitted-state > i { color: var(--iq-success); font-size: 38px; margin-right: 14px; }
.assignment-submitted-state h4 { margin-bottom: 4px; }
.assignment-summary { background: #fbfcfd; border-left: 1px solid #e8edf3; padding: 30px; }
.assignment-detail-list { margin: 0; }
.assignment-detail-list > div { border-bottom: 1px solid #e8edf3; margin-bottom: 16px; padding-bottom: 16px; }
.assignment-detail-list > div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.assignment-detail-list dt { color: #7b8794; font-size: 12px; font-weight: 600; margin-bottom: 5px; text-transform: uppercase; }
.assignment-detail-list dt i { color: var(--iq-primary); font-size: 15px; margin-right: 5px; }
.assignment-detail-list dd { color: #344054; font-size: 14px; font-weight: 600; margin: 0; }
.assignment-detail-list dd.assignment-time-active { color: var(--iq-success); }
.assignment-detail-list dd.assignment-time-overdue { color: var(--iq-danger); }
.assignment-empty-icon { color: var(--iq-primary); font-size: 45px; }

@media (max-width: 991px) {
  .assignment-layout { grid-template-columns: 1fr; }
  .assignment-summary { border-left: 0; border-top: 1px solid #e8edf3; }
}

@media (max-width: 575px) {
  .assignment-heading { align-items: flex-start; flex-direction: column; padding: 22px 20px; }
  .assignment-heading .card-title { font-size: 18px; }
  .assignment-open-btn { margin: 18px 0 0; width: 100%; }
  .assignment-main, .assignment-summary { padding: 22px 20px; }
  .assignment-workflow-tabs { grid-template-columns: 1fr; }
  .assignment-workflow-tab { border-bottom: 1px solid #e2e8f0; border-right: 0; min-height: 58px; }
  .assignment-review-actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .assignment-review-actions .btn { width: 100%; }
}

/* Quiz activity */
.quiz-completion-rules { align-items: center; border-bottom: 1px solid #e8edf3; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding-bottom: 20px; }
.quiz-completion-pill { background: #f1f3f5; border-radius: 20px; color: #343a40; display: inline-flex; font-size: 13px; gap: 4px; padding: 8px 11px; }
.quiz-completion-pill strong { font-weight: 700; }
.quiz-completion-pill.is-complete { background: #2f7d36; color: #fff; }
.quiz-completion-pill i { font-size: 16px; line-height: 1; }
.quiz-single-attempt { color: #7b8794; display: block; font-size: 12px; margin-top: 4px; }
.quiz-description { color: #4c5866; line-height: 1.7; margin-bottom: 20px; overflow-wrap: anywhere; }
.quiz-attempt-history { border-top: 1px solid #e8edf3; margin-top: 28px; padding-top: 24px; }
.quiz-attempt-history-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.quiz-attempt-history-heading > div > span { color: var(--iq-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.quiz-attempt-history-heading h5 { color: #344054; font-size: 17px; margin: 3px 0 0; }
.quiz-attempt-count { background: #eef1f5; border-radius: 8px; color: #596273; font-size: 12px; font-weight: 600; padding: 7px 10px; }
.quiz-final-score { align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid var(--iq-primary); border-radius: 8px; display: flex; justify-content: space-between; margin-bottom: 16px; padding: 15px 18px; }
.quiz-final-score span { color: #344054; display: block; font-size: 14px; font-weight: 700; }
.quiz-final-score small { color: #7b8794; font-size: 11px; font-weight: 500; }
.quiz-final-score > strong { color: #237a3b; font-size: 23px; }
.quiz-final-score > strong small { font-size: 13px; }
.quiz-final-score > strong.is-hidden { color: #7b8794; font-size: 13px; }
.quiz-attempt-table { margin-bottom: 0; }
.quiz-attempt-table th { border-top: 0; color: #7b8794; font-size: 11px; text-transform: uppercase; }
.quiz-attempt-table td { color: #344054; font-size: 13px; vertical-align: middle; }
.quiz-attempt-state { background: #fff2cc; border-radius: 8px; color: #8a6100; display: inline-block; font-size: 11px; font-weight: 700; padding: 5px 8px; }
.quiz-attempt-state.is-finished { background: #e7f6ec; color: #237a3b; }
.quiz-attempt-grade { color: #237a3b; }

/* Quiz attempt */
.quiz-attempt-body { background: #f5f7fa; color: #182230; min-height: 100vh; }
.quiz-attempt-header { align-items: center; background: #fff; border-bottom: 1px solid #e3e8ef; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 88px; padding: 14px max(24px, calc((100vw - 1240px) / 2)); position: sticky; top: 0; z-index: 10; }
.quiz-brand-mark { align-items: center; background: #f4dd24; border: 2px solid #182230; border-radius: 50%; color: #182230; display: flex; font-size: 28px; font-weight: 800; height: 52px; justify-content: center; width: 52px; }
.quiz-attempt-header span { color: #697586; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.quiz-attempt-header h1 { color: #182230; font-size: 22px; margin: 2px 0 0; overflow-wrap: anywhere; }
.quiz-progress-label { background: #eef1f5; border-radius: 8px; color: #344054; font-size: 13px; font-weight: 700; padding: 9px 13px; }
.quiz-header-tools { align-items: center; display: flex; gap: 12px; }
.quiz-timer { align-items: center; background: #182230; border: 1px solid #344054; border-radius: 8px; color: #fff; display: flex; gap: 10px; min-height: 54px; min-width: 154px; padding: 7px 12px 7px 8px; text-align: left; transition: background .2s ease, border-color .2s ease; }
.quiz-timer-icon { align-items: center; background: #f4dd24; border-radius: 50%; color: #182230 !important; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; width: 38px; }
.quiz-timer-icon i { font-size: 21px; }
.quiz-timer > div > span { color: #cbd2dc; display: block; font-size: 9px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.quiz-timer strong { color: #fff; display: block; font-family: Consolas, monospace; font-size: 19px; letter-spacing: 0; line-height: 1.15; margin-top: 3px; white-space: nowrap; }
.quiz-timer.is-warning { animation: quiz-timer-warning 1s infinite; background: #b54708; border-color: #f79009; }
.quiz-timer.is-warning .quiz-timer-icon { background: #fdb022; color: #7a2e0e !important; }
.quiz-timer.is-critical { animation: quiz-timer-critical .55s infinite; background: #b42318; border-color: #f04438; }
.quiz-timer.is-critical .quiz-timer-icon { background: #fff; color: #b42318 !important; }
@keyframes quiz-timer-warning { 50% { background: #dc6803; box-shadow: 0 0 0 4px rgba(247, 144, 9, .16); } }
@keyframes quiz-timer-critical { 50% { background: #d92d20; box-shadow: 0 0 0 5px rgba(240, 68, 56, .2); } }
.quiz-attempt-shell { margin: 0 auto; max-width: 1240px; padding: 36px 24px 60px; }
.quiz-attempt-workspace { align-items: flex-start; display: grid; gap: 26px; grid-template-columns: 330px minmax(0, 1fr); }
.quiz-question-panel { min-width: 0; }
.quiz-navigator-card { background: #fff; border: 1px solid #eef0f4; border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); color: #1b1d24; padding: 26px 24px; position: sticky; top: 112px; }
.quiz-navigator-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.quiz-navigator-heading h2 { color: #1b1d24; font-size: 18px; font-weight: 800; line-height: 1.25; margin: 0; }
.quiz-navigator-heading span { background: #1b1d24; border-radius: 999px; color: #fff; flex: 0 0 auto; font-size: 14px; font-weight: 800; line-height: 1; padding: 10px 12px; }
.quiz-navigator-progress { background: #eceef2; border-radius: 999px; height: 10px; margin-top: 22px; overflow: hidden; }
.quiz-navigator-progress span { background: #1b1d24; border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.quiz-navigator-meta { align-items: center; color: #777986; display: flex; font-size: 14px; font-weight: 700; justify-content: space-between; margin-top: 12px; }
.quiz-navigator-grid { border-top: 1px solid #f1f2f5; display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); margin-top: 22px; padding-top: 22px; }
.quiz-navigator-question { align-items: center; background: #fff; border: 1px solid #dfe3ea; border-radius: 8px; color: #555963; cursor: pointer; display: flex; font-size: 18px; font-weight: 800; height: 54px; justify-content: center; padding: 0; position: relative; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease; width: 100%; }
.quiz-navigator-question:hover { border-color: #18b982; color: #1b1d24; transform: translateY(-1px); }
.quiz-navigator-question.is-answered { background: #18b982; border-color: #18b982; color: #fff; }
.quiz-navigator-question.is-current { background: #1b1d24; border-color: #1b1d24; box-shadow: 0 0 0 4px #f4dd24; color: #fff; }
.quiz-navigator-question.is-marked::before { background: #7c3aed; border-radius: 2px 2px 0 0; content: ""; height: 13px; position: absolute; right: -4px; top: -6px; width: 13px; }
.quiz-navigator-question.is-marked::after { border-bottom: 5px solid transparent; border-left: 7px solid #7c3aed; content: ""; position: absolute; right: -4px; top: 7px; }
.quiz-navigator-question i { align-items: center; background: #fff; border: 1px solid #dff7ed; border-radius: 50%; bottom: -7px; color: #18b982; display: flex; font-size: 15px; height: 20px; justify-content: center; position: absolute; right: -6px; width: 20px; }
.quiz-navigator-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
.quiz-navigator-actions .btn { align-items: center; border-radius: 8px; display: inline-flex; font-weight: 800; gap: 7px; justify-content: center; min-height: 50px; padding: 10px 12px; white-space: nowrap; }
.quiz-navigator-mark { background: #7c3aed; border: 1px solid #7c3aed; color: #fff; }
.quiz-navigator-mark:hover { background: #6d28d9; color: #fff; }
.quiz-navigator-clear { background: #fff; border: 1px solid #e6e8ed; color: #a6a9b1; }
.quiz-navigator-clear:hover { border-color: #ccd1da; color: #626773; }
.quiz-navigator-legend { border-top: 1px solid #eef0f4; display: grid; gap: 14px 18px; grid-template-columns: 1fr 1fr; margin-top: 30px; padding-top: 24px; }
.quiz-navigator-legend strong { color: #a3a6b0; font-size: 13px; font-weight: 800; grid-column: 1 / -1; letter-spacing: .08em; text-transform: uppercase; }
.quiz-navigator-legend span { align-items: center; color: #4b4f59; display: inline-flex; font-size: 14px; font-weight: 700; gap: 9px; }
.quiz-navigator-legend i { border-radius: 50%; display: inline-flex; flex: 0 0 12px; height: 12px; width: 12px; }
.legend-answered { background: #18b982; }
.legend-current { background: #1b1d24; box-shadow: 0 0 0 2px #f4dd24; }
.legend-unanswered { background: #fff; border: 1px solid #cfd4dd; }
.legend-marked { background: #c4b5fd; border: 1px solid #a78bfa; }
.quiz-progress-track { background: #e4e9ef; height: 7px; margin-bottom: 28px; overflow: hidden; }
.quiz-progress-track span { background: #f4dd24; display: block; height: 100%; transition: width .25s ease; }
.quiz-question-card { background: #f4dd24; border: 1px solid #dfc900; border-radius: 8px; padding: 42px; position: relative; }
.quiz-question-card::after { background: #f4dd24; border-bottom: 1px solid #dfc900; border-right: 1px solid #dfc900; bottom: -13px; content: ""; height: 25px; position: absolute; right: 80px; transform: rotate(45deg); width: 25px; }
.quiz-question-symbol { align-items: center; background: #182230; border-radius: 50%; color: #f4dd24; display: flex; font-size: 30px; font-weight: 800; height: 54px; justify-content: center; left: 28px; position: absolute; top: -27px; width: 54px; z-index: 2; }
.quiz-question-card .que { background: transparent; display: grid; gap: 24px; grid-template-columns: 145px minmax(0, 1fr); margin: 0; }
.quiz-question-card .que .info { background: rgba(255, 255, 255, .55); border: 1px solid rgba(24, 34, 48, .15); border-radius: 8px; height: fit-content; padding: 16px; width: auto; }
.quiz-question-card .que .info h3 { color: #182230; font-size: 16px; margin-bottom: 8px; }
.quiz-question-card .que .info > div { color: #596273; font-size: 12px; margin-top: 5px; }
.quiz-question-card .questionflag, .quiz-question-card .questionflagimage { display: none !important; }
.quiz-question-card .que .content { float: none; margin: 0; width: auto; }
.quiz-question-card .formulation { background: #fff; border: 2px solid #182230; border-radius: 8px; color: #182230; margin: 0; padding: 26px; }
.quiz-question-card .qtext { font-size: 20px; font-weight: 700; line-height: 1.45; margin-bottom: 22px; }
.quiz-question-card .answer { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-question-card .answer > div { align-items: center; background: #f8fafc; border: 1px solid #aeb7c2; border-radius: 8px; cursor: pointer; display: flex; margin: 0; min-height: 58px; padding: 8px 14px; position: relative; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.quiz-question-card .answer > div:hover { background: #fff9c7; border-color: #182230; }
.quiz-question-card .answer > div:has(input:checked) { background: #fff5a3; border-color: #182230; box-shadow: inset 0 0 0 1px #182230; }
.quiz-question-card .answer > div > div { align-items: center; display: flex; flex: 1; min-width: 0; }
.quiz-question-card .answer label { align-items: center; background: transparent; border: 0; color: #344054; cursor: pointer; display: flex; flex: 1; font-size: 15px; font-weight: 600; min-height: 40px; padding: 0; width: auto; }
.quiz-question-card .answer input[type="radio"], .quiz-question-card .answer input[type="checkbox"] { accent-color: #182230; flex: 0 0 auto; height: 20px; margin: 0 12px 0 0; width: 20px; }
.quiz-question-card .answer > div:has(input:checked) label { color: #182230; font-weight: 700; }
.quiz-question-card .answer .answernumber { display: none; }
.quiz-question-card .qtype_multichoice_clearchoice { grid-column: 1 / -1; }
.quiz-question-card .qtype_multichoice_clearchoice, .quiz-question-card .qtype_multichoice_clearchoice label { background: transparent; border: 0; box-shadow: none; color: #5b6574; cursor: pointer; min-height: auto; padding: 3px 0; }
.quiz-question-card .ablock { margin: 0; }
.quiz-question-card .prompt { color: #596273; font-size: 13px; margin-bottom: 10px; }
.quiz-question-card .clearer, .quiz-question-card .accesshide { height: 1px; overflow: hidden; position: absolute; width: 1px; }
.quiz-attempt-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 38px; position: relative; z-index: 2; }
.quiz-attempt-actions .btn { border-radius: 8px; font-weight: 700; padding: 11px 18px; }
.quiz-btn-primary, .quiz-btn-finish { background: #182230; color: #fff; }
.quiz-btn-primary:hover, .quiz-btn-finish:hover { background: #344054; color: #fff; }
.quiz-btn-secondary { background: #fff; border: 1px solid #9aa4b2; color: #344054; }
.quiz-finished-screen { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 30px; text-align: center; }
.quiz-finished-icon { align-items: center; background: #2f7d36; border-radius: 50%; color: #fff; display: flex; font-size: 38px; height: 72px; justify-content: center; margin-bottom: 20px; width: 72px; }
.quiz-finished-screen h1 { color: #182230; font-size: 30px; }
.quiz-finished-screen p { color: #697586; margin: 8px 0 22px; }

@media (max-width: 991px) {
  .quiz-attempt-workspace { grid-template-columns: 1fr; }
  .quiz-navigator-card { position: static; }
}

@media (max-width: 767px) {
  .quiz-attempt-header { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .quiz-progress-label { grid-column: 1 / -1; text-align: center; }
  .quiz-header-tools { grid-column: 1 / -1; justify-content: space-between; }
  .quiz-progress-label { grid-column: auto; }
  .quiz-attempt-shell { padding: 28px 14px 45px; }
  .quiz-navigator-card { padding: 20px 18px; position: static; }
  .quiz-navigator-heading { align-items: flex-start; flex-direction: column; }
  .quiz-navigator-grid { gap: 10px; }
  .quiz-navigator-question { height: 48px; }
  .quiz-navigator-actions, .quiz-navigator-legend { grid-template-columns: 1fr; }
  .quiz-question-card { padding: 34px 16px 24px; }
  .quiz-question-card .que { grid-template-columns: 1fr; }
  .quiz-question-card .que .info { display: none; }
  .quiz-question-card .formulation { padding: 18px; }
  .quiz-question-card .qtext { font-size: 17px; }
  .quiz-question-card .answer { grid-template-columns: 1fr; }
}
.course-description{
  margin-bottom: 20px;
  background: #fff;
  border-radius: 15px 15px 0 0;
  padding: 20px;
  box-shadow: 0px 4px 20px 0px rgba(44, 101, 144, 0.1);
}
.course-support-button i{
  margin-right: 0px !important;
}
.iq-card-body.accrordion{
  padding-left: 30px !important;
}

/* Toggleable course navigation layout */
.sidebar-layout-toggle { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; bottom: 18px; color: #fff; cursor: pointer; display: flex; font-size: 13px; font-weight: 600; gap: 8px; height: 42px; justify-content: center; left: 18px; padding: 0; position: absolute; right: 18px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.sidebar-layout-toggle:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.32); color: #fff; transform: translateY(-1px); }
.sidebar-layout-icon { display: block; height: 18px; position: relative; width: 16px; }
.sidebar-layout-icon::before, .sidebar-layout-icon::after { content: ""; position: absolute; }
.sidebar-layout-toggle.is-vertical .sidebar-layout-icon::before { background: #fff; border-radius: 8px; box-shadow: 0 6px 0 #fff, 0 12px 0 #fff; height: 3px; left: 3px; top: 2px; width: 16px; }
.sidebar-layout-toggle.is-vertical .sidebar-layout-icon::after { border-left: 3px solid #fff; border-top: 3px solid #fff; height: 7px; left: -11px; top: 7px; transform: rotate(45deg); width: 7px; }
.sidebar-layout-toggle.is-horizontal .sidebar-layout-icon::before { background: #fff; border-radius: 8px; box-shadow: 0 6px 0 #fff, 0 12px 0 #fff; height: 3px; left: 4px; top: 2px; width: 16px; }
.sidebar-layout-toggle.is-horizontal .sidebar-layout-icon::after { border-left: 3px solid #fff; border-top: 3px solid #fff; height: 7px; left: -6px; top: 5px; transform: rotate(-45deg); width: 7px; }
.sidebar-layout-toggle span { display: none !important; }

body.course-nav-horizontal .iq-sidebar { align-items: center; box-shadow: 0 8px 22px rgba(15, 23, 42, .12); display: flex; height: 60px; left: 0; padding: 0 18px; top: 85px; transition: none !important; width: 100%; }
body.course-nav-horizontal .iq-sidebar .iq-sidebar-logo { display: none !important; }
body.course-nav-horizontal .iq-sidebar #sidebar-scrollbar { align-self: stretch; flex: 1; height: 100%; margin: 0; min-width: 0; overflow: visible; }
body.course-nav-horizontal .iq-sidebar-menu { height: 100%; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu { align-items: stretch; display: flex; gap: 0; height: 100%; overflow-x: auto; overflow-y: hidden; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li { border-bottom: 0; border-radius: 0; flex: 0 0 auto; height: 100%; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li a { align-items: center; border-radius: 0; color: #e9ecff; display: flex; gap: 6px; height: 100%; padding: 0 17px; transition: none !important; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li a i { color: inherit; float: none; margin-right: 0; width: auto; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li a span { color: inherit; float: none; transition: none !important; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li>a::before { display: none; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover { background: #fff; border-radius: 0; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li a:hover { background: transparent; color: #0e1861 !important; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu { background: #fff; border-radius: 0; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a { background: transparent; border-radius: 0; color: #0e1861 !important; }
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a i,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a span,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a i,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a span,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a i,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a span { color: #0e1861 !important; }
body.course-nav-horizontal .sidebar-layout-toggle { bottom: auto; flex: 0 0 42px; left: auto; margin-left: 10px; position: relative; right: auto; top: auto; width: 42px; }
body.course-nav-horizontal .iq-top-navbar,
body.course-nav-horizontal.sidebar-main .iq-top-navbar { left: 0; transition: none !important; width: 100%; }
body.course-nav-horizontal .content-page,
body.course-nav-horizontal.sidebar-main .content-page { margin-left: 0; padding-top: 177px; transition: none !important; }
body.course-nav-horizontal .content-page.spacer,
body.course-nav-horizontal.sidebar-main .content-page.spacer { padding-top: 187px; }
body.course-nav-horizontal .iq-footer,
body.course-nav-horizontal.sidebar-main .iq-footer { margin-left: 0; width: 100%; }

body.nav-layout-animating .iq-sidebar {
  overflow: hidden;
  transition: left .36s ease, top .36s ease, width .36s ease, height .36s ease, padding .36s ease, box-shadow .36s ease !important;
}
body.nav-layout-animating .iq-top-navbar,
body.nav-layout-animating .content-page,
body.nav-layout-animating .iq-footer {
  transition: left .36s ease, margin-left .36s ease, padding-top .36s ease, width .36s ease !important;
}
body.nav-layout-animating .iq-sidebar #sidebar-scrollbar,
body.nav-layout-animating .iq-sidebar-menu,
body.nav-layout-animating .iq-sidebar-menu .iq-menu {
  transition: height .28s ease, margin .28s ease, opacity .22s ease !important;
}
body.nav-layout-animating .iq-sidebar-logo,
body.nav-layout-animating .iq-sidebar-menu .iq-menu li,
body.nav-layout-animating .iq-sidebar-menu .iq-menu li a {
  transition: opacity .24s ease, background .24s ease, color .24s ease, padding .32s ease !important;
}

@media (max-width: 767px) {
  .sidebar-layout-toggle { display: none; }
  body.course-nav-horizontal .iq-sidebar { display: inline-block; height: 100%; left: -300px; padding: 15px 0 0; top: 0; width: 300px; }
  body.course-nav-horizontal .iq-sidebar #sidebar-scrollbar { height: 100vh; margin-top: 15px; }
  body.course-nav-horizontal .iq-sidebar-menu .iq-menu { display: block; height: auto; overflow: visible; }
  body.course-nav-horizontal .content-page,
  body.course-nav-horizontal.sidebar-main .content-page,
  body.course-nav-horizontal .content-page.spacer,
  body.course-nav-horizontal.sidebar-main .content-page.spacer { padding-top: 100px; }
}

html.course-nav-horizontal .iq-sidebar { align-items: center; box-shadow: 0 8px 22px rgba(15, 23, 42, .12); display: flex; height: 60px; left: 0; padding: 0 18px; top: 85px; transition: none !important; width: 100%; }
html.course-nav-horizontal .iq-sidebar .iq-sidebar-logo { display: none !important; }
html.course-nav-horizontal .iq-sidebar #sidebar-scrollbar { align-self: stretch; flex: 1; height: 100%; margin: 0; min-width: 0; overflow: visible; }
html.course-nav-horizontal .iq-sidebar-menu { height: 100%; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu { align-items: stretch; display: flex; gap: 0; height: 100%; overflow-x: auto; overflow-y: hidden; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li { border-bottom: 0; border-radius: 0; flex: 0 0 auto; height: 100%; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li a { align-items: center; border-radius: 0; color: #e9ecff; display: flex; gap: 6px; height: 100%; padding: 0 17px; transition: none !important; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li a i { color: inherit; float: none; margin-right: 0; width: auto; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li a span { color: inherit; float: none; transition: none !important; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li>a::before { display: none; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover { background: #fff; border-radius: 0; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li a:hover { background: transparent; color: #0e1861 !important; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu { background: #fff; border-radius: 0; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a { background: transparent; border-radius: 0; color: #0e1861 !important; }
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a i,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li:hover > a span,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a i,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active > a span,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a i,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu li.active-menu > a span { color: #0e1861 !important; }
html.course-nav-horizontal .sidebar-layout-toggle { bottom: auto; flex: 0 0 42px; left: auto; margin-left: 10px; position: relative; right: auto; top: auto; width: 42px; }
html.course-nav-horizontal .iq-top-navbar { left: 0; transition: none !important; width: 100%; }
html.course-nav-horizontal .content-page { margin-left: 0; padding-top: 177px; transition: none !important; }
html.course-nav-horizontal .content-page.spacer { padding-top: 187px; }
html.course-nav-horizontal .iq-footer { margin-left: 0; width: 100%; }

@media (max-width: 767px) {
  html.course-nav-horizontal .iq-sidebar { display: inline-block; height: 100%; left: -300px; padding: 15px 0 0; top: 0; width: 300px; }
  html.course-nav-horizontal .iq-sidebar #sidebar-scrollbar { height: 100vh; margin-top: 15px; }
  html.course-nav-horizontal .iq-sidebar-menu .iq-menu { display: block; height: auto; overflow: visible; }
  html.course-nav-horizontal .content-page,
  html.course-nav-horizontal .content-page.spacer { padding-top: 100px; }
}
.course-nav-horizontal .iq-navbar-custom{
  padding:0px !important;
}

.course-preview-page { padding-bottom: 40px; }
.course-preview-hero { background: #fff; border-radius: 0; display: grid; gap: 22px; margin-bottom: 22px; overflow: visible; }
.course-preview-hero-main { align-items: start; display: grid; gap: 70px; grid-template-columns: minmax(420px, .88fr) minmax(520px, 1fr); }
.course-preview-visual { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding-top: 10px; }
.course-preview-media { background: #eef4fb; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);  overflow: hidden; }
.course-preview-media img { height: 100%; object-fit: cover; width: 100%; }
.course-preview-summary { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 0; }
.course-preview-eyebrow { align-items: center; align-self: flex-start; background: #eaf1ff; border-radius: 8px; color: #06164d; display: inline-flex; font-size: 12px; font-weight: 500; gap: 14px; line-height: 1.25; margin-bottom: 20px; padding: 5px 18px 5px 14px; }
.course-preview-eyebrow i { align-items: center; background: #d8e5ff; border-radius: 50%; color: #08256f; display: inline-flex; flex: 0 0 34px; font-size: 20px; height: 34px; justify-content: center; width: 34px; }
.course-preview-summary h2 { color: #06164d; font-size: 32px; font-weight: 800; letter-spacing: 0; line-height: 1.06; margin: 0; max-width: 640px; overflow-wrap: anywhere; }
.course-preview-title-rule { background: #2f66e8; border-radius: 99px; display: block; height: 5px; margin: 24px 0 18px; width: 64px; }
.course-preview-summary p { color: #1f2937; font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 650px; }
.course-preview-details { align-items: stretch; border: 1px solid #cfe0fb; border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); overflow: hidden; }
.course-preview-detail { align-items: center; background: #fff; display: grid; gap: 14px; grid-template-columns: 52px minmax(0, 1fr); min-height: 92px; padding: 17px 24px; position: relative; }
.course-preview-detail + .course-preview-detail { border-left: 1px solid #dce8f7; }
.course-preview-detail i { align-items: center; background: linear-gradient(135deg, #4f7df1, #1f54d4); border-radius: 50%; box-shadow: 0 8px 18px rgba(47, 102, 232, .22); color: #fff; display: flex; font-size: 27px; height: 52px; justify-content: center; width: 52px; }
.course-preview-detail span { color: #111827; display: block; font-size: 14px; font-weight: 800; line-height: 1.25; margin-bottom: 3px; }
.course-preview-detail strong { color: #111827; display: block; font-size: 15px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.course-header-meta { margin: 10px 0 16px; }
.course-preview-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin: 0; }
.course-preview-actions .btn { align-items: center; border-radius: 8px; display: inline-flex; font-size: 14px; font-weight: 800; gap: 8px; justify-content: center; min-height: 44px; padding: 0 18px; }
.course-preview-actions .btn i { font-size: 18px; line-height: 1; }
.course-preview-actions .btn-primary { background: #5236c7; border-color: #5236c7; box-shadow: 0 10px 22px rgba(82, 54, 199, .16); }
.course-preview-actions .btn-primary:hover,
.course-preview-actions .btn-primary:focus { background: #4327b0; border-color: #4327b0; }
.course-preview-actions .btn-outline-primary { background: #fff; border-color: #5236c7; color: #5236c7; }
.course-preview-actions .btn-outline-primary:hover,
.course-preview-actions .btn-outline-primary:focus { background: #f5f2ff; border-color: #4327b0; color: #4327b0; }
.course-preview-self-enrol-form { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.course-preview-self-enrol-form .form-control { border: 1px solid #d6e0ee; border-radius: 8px; height: 44px; max-width: 210px; }
.course-preview-alert { border-radius: 8px; font-size: 14px; font-weight: 700; margin: 0 0 14px; padding: 11px 13px; }
.course-preview-alert.is-error { background: #fff1f1; color: #b42318; }
.course-preview-alert.is-success { background: #ecfdf3; color: #067647; }
.course-preview-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 360px; }
.course-preview-panel { background: #fff; border: 1px solid #e4eaf3; border-radius: 8px; overflow: hidden; }
.course-preview-panel > header { align-items: center; border-bottom: 1px solid #e8edf4; display: flex; gap: 12px; padding: 20px 22px; }
.course-preview-panel > header > i { align-items: center; background: #eef6ff; border-radius: 8px; color: #2563eb; display: flex; flex: 0 0 38px; font-size: 20px; height: 38px; justify-content: center; width: 38px; }
.course-preview-panel header span { color: #667085; display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.course-preview-panel header h4 { color: #101828; font-size: 18px; margin: 2px 0 0; }
.course-preview-section-list { padding: 4px 0 14px; }
.course-preview-section { border-bottom: 1px solid #edf1f6; padding: 18px 22px; }
.course-preview-section:last-child { border-bottom: 0; }
.course-preview-section h5 { color: #344054; font-size: 15px; margin: 0 0 12px; }
.course-preview-section ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.course-preview-section li { align-items: center; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; color: #344054; display: grid; gap: 10px; grid-template-columns: 20px minmax(0, 1fr) auto; min-height: 42px; padding: 9px 11px; }
.course-preview-section li i { color: #667085; font-size: 17px; }
.course-preview-section li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-preview-section li em { background: #eef1f5; border-radius: 12px; color: #667085; font-size: 10px; font-style: normal; font-weight: 800; padding: 4px 7px; }
.course-preview-enrol-list { display: grid; gap: 10px; padding: 18px; }
.course-preview-enrol-method { align-items: center; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; display: flex; gap: 11px; padding: 12px; }
.course-preview-enrol-method > i { align-items: center; background: #e8f5ef; border-radius: 50%; color: #147a45; display: flex; flex: 0 0 34px; height: 34px; justify-content: center; width: 34px; }
.course-preview-enrol-method > div { flex: 1 1 auto; min-width: 0; }
.course-preview-enrol-method strong { color: #344054; display: block; font-size: 14px; }
.course-preview-enrol-method span { color: #667085; display: block; font-size: 12px; margin-top: 2px; }
.course-preview-inline-enrol { margin: 0; }
.course-preview-inline-enrol button,
.course-preview-enrol-method > a { background: #2563eb; border: 0; border-radius: 8px; color: #fff; display: inline-flex; font-size: 12px; font-weight: 800; padding: 8px 10px; white-space: nowrap; }
.course-preview-enrol-method > a:hover { color: #fff; }
.course-preview-payment-note { color: #b42318; flex: 0 0 auto; font-size: 12px; font-weight: 800; white-space: nowrap; }
.course-preview-actions .btn:disabled { cursor: not-allowed; opacity: .65; }
.course-preview-enrol-link { align-items: center; border-top: 1px solid #e8edf4; color: #2563eb; display: flex; font-weight: 800; gap: 7px; padding: 15px 18px; }
.course-preview-empty { color: #667085; padding: 34px 24px; text-align: center; }
.course-preview-empty i { color: #2563eb; font-size: 34px; }
.course-preview-empty h5 { color: #101828; margin: 8px 0 4px; }
.course-preview-empty p { margin: 0; }
.course-preview-empty small { color: #b42318; display: block; font-size: 12px; font-weight: 700; margin-top: 10px; }
.course-preview-rewards-panel > header { min-height: 132px; padding-right: 116px; position: relative; }
.course-preview-rewards-panel > header > i { background: #fff7e7; color: #b76e00; }
.course-preview-rewards-mascot { bottom: 12px; max-height: 118px; object-fit: contain; position: absolute; right: 16px; width: 92px; }
.course-preview-reward-list { display: grid; gap: 10px; padding: 16px; }
.course-preview-reward { align-items: center; background: #f8fafc; border: 1px solid #edf1f6; border-radius: 8px; display: grid; gap: 11px; grid-template-columns: 38px minmax(0, 1fr); min-height: 66px; padding: 12px; }
.course-preview-reward > i { align-items: center; background: #eef6ff; border-radius: 50%; color: #2563eb; display: flex; font-size: 19px; height: 38px; justify-content: center; width: 38px; }
.course-preview-reward strong, .course-preview-reward span { display: block; min-width: 0; }
.course-preview-reward strong { color: #344054; font-size: 14px; line-height: 1.2; }
.course-preview-reward span { color: #667085; font-size: 12px; line-height: 1.35; margin-top: 3px; overflow-wrap: anywhere; }
.course-preview-reward em { background: #eef1f5; border-radius: 14px; color: #667085; font-size: 10px; font-style: normal; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
.course-preview-reward.is-certificate > i { background: #e8f8ef; color: #178653; }
.course-preview-reward.is-certificate em { background: #e8f8ef; color: #178653; }
.course-preview-reward.is-competency > i { background: #f1eeff; color: #5236c7; }
.course-preview-reward.is-competency em { background: #f1eeff; color: #5236c7; }
.course-preview-reward.is-badge > i { background: #fff4d8; color: #a46a00; }
.course-preview-reward.is-badge em { background: #fff4d8; color: #a46a00; }
.course-preview-reward.is-achievement > i { background: #eef6ff; color: #2563eb; }
.course-preview-request-link { background: #2563eb; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; margin-top: 16px; padding: 9px 13px; }
.course-preview-request-link:hover { background: #1d4ed8; }
.course-access-request-modal .modal-header { border-bottom: 1px solid #edf1f6; padding: 20px 24px; }
.course-access-request-modal .modal-header span { color: #667085; display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.course-access-request-modal .modal-title { color: #101828; font-size: 20px; margin-top: 2px; }
.course-access-request-modal .modal-body { display: grid; gap: 8px; padding: 22px 24px; }
.course-access-request-modal label { color: #344054; font-size: 13px; font-weight: 800; margin: 8px 0 0; }
.course-access-request-modal .form-control { border: 1px solid #d6e0ee; border-radius: 8px; color: #344054; min-height: 44px; }
.course-access-request-modal textarea.form-control { min-height: 112px; resize: vertical; }
.course-access-request-modal .modal-footer { border-top: 1px solid #edf1f6; gap: 10px; padding: 18px 24px; }
.course-access-request-modal .modal-footer button { border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 40px; padding: 0 18px; }
.course-access-request-modal .modal-footer button[type="button"] { background: #fff; border: 1px solid #dfe5ee; color: #475467; }
.course-access-request-modal .modal-footer button[type="submit"] { align-items: center; background: #2563eb; border: 1px solid #2563eb; color: #fff; display: inline-flex; gap: 7px; }
@media (max-width: 1199px) { .course-preview-hero-main { gap: 28px; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1fr); }.course-preview-summary h2 { font-size: 44px; }.course-preview-summary p { font-size: 18px; }.course-preview-detail { padding: 16px; } }
@media (max-width: 991px) { .course-preview-hero-main, .course-preview-grid { grid-template-columns: 1fr; }.course-preview-visual { order: -1; padding-top: 0; }.course-preview-actions { justify-content: flex-start; }.course-preview-summary { padding: 0; }.course-preview-summary h2 { font-size: 40px; }.course-preview-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }.course-preview-detail + .course-preview-detail { border-left: 0; }.course-preview-detail:nth-child(even) { border-left: 1px solid #dce8f7; }.course-preview-detail:nth-child(n+3) { border-top: 1px solid #dce8f7; }.course-preview-rewards-panel > header { padding-right: 108px; }.course-preview-rewards-mascot { max-height: 108px; width: 84px; } }
@media (max-width: 480px) { .course-preview-hero { gap: 18px; }.course-preview-eyebrow { font-size: 14px; margin-bottom: 22px; padding: 10px 14px 10px 10px; }.course-preview-eyebrow i { flex-basis: 30px; font-size: 18px; height: 30px; width: 30px; }.course-preview-summary h2 { font-size: 34px; }.course-preview-title-rule { margin: 18px 0 14px; }.course-preview-summary p { font-size: 16px; }.course-preview-details { grid-template-columns: 1fr; }.course-preview-detail { min-height: 82px; }.course-preview-detail:nth-child(even), .course-preview-detail + .course-preview-detail { border-left: 0; }.course-preview-detail:nth-child(n+2) { border-top: 1px solid #dce8f7; }.course-preview-rewards-panel > header { align-items: flex-start; min-height: 118px; padding-right: 86px; }.course-preview-rewards-mascot { max-height: 92px; right: 10px; width: 72px; }.course-preview-reward { grid-template-columns: 38px minmax(0, 1fr); }.course-preview-reward em { grid-column: 2; justify-self: start; } }

.activity-viewer-page { padding-bottom: 38px; }
.activity-viewer-hero { align-items: flex-start; background: #fff; border: 1px solid #e4eaf3; border-radius: 8px; display: flex; gap: 18px; margin-bottom: 18px; padding: 24px; }
.activity-viewer-icon { align-items: center; background: #eef6ff; border-radius: 8px; color: #2563eb; display: flex; flex: 0 0 52px; font-size: 25px; height: 52px; justify-content: center; width: 52px; }
.activity-viewer-type { color: #2563eb; display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; margin-bottom: 5px; text-transform: uppercase; }
.activity-viewer-hero h2 { color: #101828; font-size: 28px; line-height: 1.25; margin: 0 0 10px; }
.activity-viewer-intro { color: #667085; font-size: 15px; line-height: 1.7; }
.activity-viewer-intro p:last-child { margin-bottom: 0; }
.activity-viewer-alert { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; color: #b45309; font-weight: 700; margin-bottom: 18px; padding: 12px 14px; }
.activity-viewer-panel { background: #fff; border: 1px solid #e4eaf3; border-radius: 8px; color: #344054; font-size: 15px; line-height: 1.7; padding: 24px; }
.activity-viewer-page-h5p .activity-viewer-hero { align-items: center; margin-bottom: 24px; padding: 14px 18px; }
.activity-viewer-page-h5p .activity-viewer-type,
.activity-viewer-page-h5p .activity-viewer-intro { display: none; }
.activity-viewer-page-h5p .activity-viewer-hero h2 { font-size: 30px; font-weight: 500; margin: 0; }
.activity-viewer-panel-h5p { background: transparent; border: 0; border-radius: 0; padding: 0; }
.activity-viewer-panel h1,
.activity-viewer-panel h2,
.activity-viewer-panel h3,
.activity-viewer-panel h4,
.activity-viewer-panel h5,
.activity-viewer-panel h6 { color: #101828; margin-top: 0; }
.activity-viewer-panel img { height: auto; max-width: 100%; }
.activity-viewer-panel table { max-width: 100%; width: 100%; }
.activity-viewer-url { align-items: center; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; display: grid; gap: 14px; grid-template-columns: 38px minmax(0, 1fr) auto; padding: 14px; }
.activity-viewer-url > i { align-items: center; background: #e8f5ef; border-radius: 50%; color: #147a45; display: flex; font-size: 20px; height: 38px; justify-content: center; width: 38px; }
.activity-viewer-url strong { color: #344054; display: block; }
.activity-viewer-url span { color: #667085; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-viewer-url a { background: #2563eb; border-radius: 8px; color: #fff; font-weight: 800; padding: 9px 12px; white-space: nowrap; }
.activity-viewer-url a:hover { color: #fff; }
.activity-viewer-h5p { background: #fff; border: 1px solid #cfd9e7; border-radius: 8px; overflow: hidden; }
.activity-viewer-h5p-toolbar { align-items: center; background: #fff; border-bottom: 1px solid #e8edf4; display: flex; gap: 16px; justify-content: space-between; padding: 14px 16px; }
.activity-viewer-h5p-toolbar strong { color: #101828; display: block; font-size: 14px; }
.activity-viewer-h5p-toolbar span { color: #667085; display: block; font-size: 12px; margin-top: 2px; }
.activity-viewer-h5p-frame { background: #fff; border: 0; display: block; height: min(68vh, 860px); min-height: 620px; width: 100%; }
.activity-viewer-h5p-player { background: #fff; display: block; min-height: 620px; padding: 0; width: 100%; }
.activity-viewer-h5p-player iframe { border: 0; display: block; width: 100%; }
.activity-viewer-h5p-status { background: #eef6ff; border: 1px solid #cfe0fb; border-radius: 8px; color: #344054; margin-top: 18px; padding: 16px 20px; }
.activity-viewer-h5p-status span { color: #2563eb; display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.activity-viewer-h5p-status strong { color: #101828; display: block; font-size: 16px; margin-top: 3px; }
.activity-viewer-h5p-status small { color: #667085; display: block; font-size: 12px; line-height: 1.5; margin-top: 4px; }
.activity-viewer-list { display: grid; gap: 12px; }
.activity-viewer-list-item { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 14px; }
.activity-viewer-list-item strong { color: #101828; display: block; font-size: 16px; margin-bottom: 4px; }
.activity-viewer-list-item span { color: #667085; display: block; font-size: 12px; font-weight: 700; }
.activity-viewer-empty { color: #667085; font-weight: 700; padding: 24px; text-align: center; }
@media (max-width: 767px) { .activity-viewer-hero { flex-direction: column; padding: 20px; }.activity-viewer-url { grid-template-columns: 38px minmax(0, 1fr); }.activity-viewer-url a { grid-column: 1 / -1; text-align: center; }.activity-viewer-h5p-toolbar { align-items: flex-start; flex-direction: column; }.activity-viewer-h5p-frame { min-height: 520px; }.activity-viewer-h5p-player { min-height: 520px; padding: 12px; } }

.competency-page {
  color: #14213d;
  padding: 0 0 36px;
}

.competency-hero {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 210px;
  padding: 22px 18px 12px;
}

.competency-hero h2 {
  color: #101c35;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 14px;
}

.competency-hero p {
  color: #526079;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 18px;
}

.competency-hero a {
  align-items: center;
  color: #4f46e5;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
}

.competency-hero-art {
  height: 170px;
  position: relative;
}

.competency-hero-art::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(255, 255, 255, .9));
  border-radius: 80px 80px 12px 12px;
  bottom: 0;
  content: "";
  height: 138px;
  position: absolute;
  right: 0;
  width: 250px;
}

.competency-hero-badge,
.competency-hero-person,
.competency-hero-flag,
.competency-hero-step {
  position: absolute;
}

.competency-hero-mascot {
  bottom: -2px;
  filter: drop-shadow(0 16px 28px rgba(50, 38, 132, .2));
  max-height: 180px;
  object-fit: contain;
  position: absolute;
  right: 86px;
  z-index: 4;
}

.competency-hero-badge {
  align-items: center;
  background: #37b878;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 24px;
  height: 50px;
  justify-content: center;
  right: 210px;
  top: 46px;
  width: 50px;
}

.competency-hero-person {
  color: #303b7a;
  display: none;
  font-size: 72px;
  right: 120px;
  top: 50px;
  z-index: 2;
}

.competency-hero-flag {
  color: #6a5cf6;
  font-size: 54px;
  right: 34px;
  top: 34px;
  z-index: 3;
}

.competency-hero-step {
  background: #cfd3ff;
  bottom: 0;
  width: 42px;
}

.competency-hero-step.is-one { height: 38px; right: 162px; }
.competency-hero-step.is-two { height: 68px; right: 108px; }
.competency-hero-step.is-three { height: 104px; right: 54px; }

.competency-overview-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 22px;
}

.competency-overview-card,
.competency-panel,
.competency-matrix-panel,
.competency-help-strip {
  background: #fff;
  border: 1px solid #e1e7f0;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .04);
}

.competency-overview-card {
  min-height: 210px;
  padding: 28px;
}

.competency-overview-card h5,
.competency-panel h4,
.competency-matrix-head h4 {
  color: #101c35;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.competency-status-layout {
  align-items: center;
  display: grid;
  gap: 26px;
  grid-template-columns: 150px minmax(0, 1fr) 86px;
  margin-top: 28px;
}

.competency-donut {
  align-items: center;
  background: conic-gradient(#38b27a var(--competency-percent), #d9dadd 0);
  border-radius: 50%;
  display: flex;
  height: 150px;
  justify-content: center;
  width: 150px;
}

.competency-donut > div {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 104px;
  justify-content: center;
  width: 104px;
}

.competency-donut strong {
  color: #101c35;
  font-size: 25px;
  line-height: 1;
}

.competency-donut span,
.competency-status-percent span {
  color: #61708a;
  font-size: 12px;
}

.competency-status-legend {
  display: grid;
  gap: 16px;
}

.competency-status-legend span {
  align-items: center;
  color: #526079;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 10px 26px minmax(0, 1fr);
}

.competency-status-legend i {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.competency-status-legend .is-competent { background: #35ad75; }
.competency-status-legend .is-not-yet { background: #f2ac18; }
.competency-status-legend .is-not-started { background: #d1d5db; }

.competency-status-percent {
  text-align: center;
}

.competency-status-percent strong {
  color: #25a968;
  display: block;
  font-size: 28px;
  line-height: 1.1;
}

.competency-journey {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  padding: 18px 10px;
}

.competency-journey div {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  text-align: center;
}

.competency-journey div:not(:last-child)::after {
  border-top: 2px dashed #d8deea;
  content: "";
  left: calc(50% + 34px);
  position: absolute;
  top: 31px;
  width: calc(100% - 28px);
}

.competency-journey span {
  align-items: center;
  background: #f0efff;
  border-radius: 50%;
  color: #5d52de;
  display: flex;
  font-size: 28px;
  height: 62px;
  justify-content: center;
  width: 62px;
}

.competency-journey div:nth-child(4) span {
  background: #fff3dc;
  color: #e79a15;
}

.competency-journey strong {
  color: #14213d;
  font-size: 13px;
}

.competency-journey em {
  color: #101c35;
  font-size: 24px;
  font-style: normal;
}

.competency-panel {
  margin-bottom: 22px;
  padding: 28px 26px;
}

.competency-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.competency-title-block {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.competency-title-block > span,
.competency-info-strip > span,
.competency-help-strip > span {
  align-items: center;
  background: #f0efff;
  border-radius: 14px;
  color: #5d52de;
  display: flex;
  flex: 0 0 42px;
  font-size: 24px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.competency-title-block p,
.competency-matrix-head p,
.competency-help-strip p {
  color: #61708a;
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 0;
}

.competency-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.competency-tools button,
.competency-tools label {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  color: #61708a;
  display: inline-flex;
  font-size: 12px;
  height: 40px;
  margin: 0;
}

.competency-tools button {
  cursor: pointer;
  font-weight: 700;
  padding: 0 18px;
}

.competency-tools button.active {
  border-color: #6857f4;
  color: #5144d8;
}

.competency-tools label {
  gap: 8px;
  min-width: 215px;
  padding: 0 12px;
}

.competency-tools input {
  border: 0;
  color: #14213d;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.competency-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.competency-card {
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  min-height: 90px;
  padding: 15px;
}

.competency-card[hidden] {
  display: none;
}

.competency-card-top {
  align-items: center;
  display: flex;
  gap: 15px;
}

.competency-card-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: 0 0 56px;
  font-size: 29px;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.competency-card-icon.tone-1 { background: #eeeaff; color: #5c4be4; }
.competency-card-icon.tone-2 { background: #e8f3ff; color: #2478dc; }
.competency-card-icon.tone-3 { background: #e8f8ef; color: #2fa76e; }
.competency-card-icon.tone-4 { background: #efe9ff; color: #7d58e5; }
.competency-card-icon.tone-5 { background: #fff0d6; color: #e69a17; }
.competency-card-icon.tone-6 { background: #e8f6ee; color: #2c9d67; }
.competency-card-icon.tone-7 { background: #eaf0ff; color: #336fd7; }

.competency-card h5 {
  color: #14213d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 4px;
}

.competency-card small {
  color: #61708a;
  display: block;
  font-size: 12px;
}

.competency-pill {
  background: #eef1f5;
  border-radius: 18px;
  color: #61708a;
  display: block;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 13px;
  text-align: center;
  width: max-content;
  margin-top: 10px;
}

.competency-pill.competent {
  background: #e7f8ef;
  color: #238b59;
}

.competency-pill.not-yet {
  background: #fff3d6;
  color: #9b6500;
}

.competency-card-status {
  border-top: 1px solid #e8edf4;
  display: grid;
  gap: 6px;
  padding-top: 16px;
}

.competency-card-status span,
.competency-card p {
  color: #61708a;
  font-size: 12px;
}

.competency-card-status strong {
  color: #14213d;
  font-size: 13px;
}

.competency-card p {
  line-height: 1.55;
  margin: 12px 0 0;
}

.competency-info-strip {
  align-items: center;
  background: #f6f7ff;
  border-radius: 12px;
  display: flex;
  gap: 14px;
  margin-top: 28px;
  padding: 13px 16px;
}

.competency-info-strip p {
  color: #526079;
  flex: 1 1 auto;
  font-size: 13px;
  margin: 0;
}

.competency-info-strip a {
  color: #5d52de;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.competency-matrix-panel {
  margin-bottom: 22px;
  padding: 28px 24px;
}

.competency-matrix-head {
  margin-bottom: 18px;
}

.competency-course-matrix {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  overflow: hidden;
}

.competency-course-matrix th,
.competency-course-matrix td {
  border-color: #e8edf4 !important;
  color: #14213d;
  font-size: 13px;
  padding: 14px 16px !important;
  text-align: center;
  vertical-align: middle !important;
}

.competency-course-matrix th:first-child,
.competency-course-matrix td:first-child {
  min-width: 280px;
  text-align: left;
}

.competency-course-matrix thead th {
  background: #f7f9fd;
  font-weight: 700;
}

.competency-course-matrix a {
  align-items: center;
  color: #5144d8;
  display: inline-flex;
  gap: 9px;
  line-height: 1.3;
}

.competency-progress-cell {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  min-width: 145px;
}

.competency-progress-cell span {
  background: #e3e7ef;
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
  width: 90px;
}

.competency-progress-cell i {
  background: #35ad75;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.competency-progress-cell em {
  color: #14213d;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.competency-covered {
  color: #2aa86b;
  font-size: 17px;
}

.competency-missing {
  color: #7a879c;
  font-weight: 700;
}

.competency-matrix-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 15px;
}

.competency-matrix-legend span {
  align-items: center;
  color: #61708a;
  display: inline-flex;
  font-size: 12px;
  gap: 8px;
}

.competency-matrix-legend i {
  color: #2aa86b;
}

.competency-help-strip {
  align-items: center;
  display: flex;
  gap: 18px;
  padding: 20px 28px;
}

.competency-help-strip > span {
  background: linear-gradient(135deg, #6957e8, #8b7cf6);
  color: #fff;
  height: 54px;
  width: 54px;
}

.competency-help-strip div {
  flex: 1 1 auto;
}

.competency-help-strip h5 {
  color: #14213d;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.competency-help-strip a {
  align-items: center;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  color: #4f46e5;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 11px 18px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .competency-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .competency-panel-head { display: grid; }
  .competency-tools { justify-content: flex-start; }
}

@media (max-width: 991px) {
  .competency-hero,
  .competency-overview-grid { grid-template-columns: 1fr; }
  .competency-hero-art { display: none; }
  .competency-status-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .competency-status-percent { grid-column: 1 / -1; text-align: left; }
  .competency-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .competency-journey { gap: 16px; }
  .competency-journey div:not(:last-child)::after { display: none; }
}

@media (max-width: 767px) {
  .competency-hero { padding-left: 0; padding-right: 0; }
  .competency-hero h2 { font-size: 28px; }
  .competency-status-layout,
  .competency-journey,
  .competency-card-grid { grid-template-columns: 1fr; }
  .competency-panel,
  .competency-matrix-panel { padding: 20px 16px; }
  .competency-info-strip,
  .competency-help-strip { align-items: flex-start; flex-direction: column; }
  .competency-info-strip a,
  .competency-help-strip a { white-space: normal; }
  .competency-tools,
  .competency-tools label { width: 100%; }
  .competency-tools button { flex: 1 1 auto; justify-content: center; }
}

html.course-nav-horizontal .iq-sidebar #sidebar-scrollbar,
body.course-nav-horizontal .iq-sidebar #sidebar-scrollbar,
html.course-nav-horizontal .iq-sidebar-menu,
body.course-nav-horizontal .iq-sidebar-menu,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu {
  align-items: stretch !important;
  display: flex !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

html.course-nav-horizontal .iq-sidebar-menu .iq-menu,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu {
  gap: 0 !important;
}

html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li {
  align-items: stretch !important;
  border-radius: 0 !important;
  display: flex !important;
  height: 100% !important;
  margin: 0 !important;
}

html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li > a {
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  height: 100% !important;
  line-height: 1 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li:hover,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active-menu,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li:hover,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active-menu {
  background: #fff !important;
  border-radius: 0 !important;
}

html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li:hover > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active > a,
html.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active-menu > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li:hover > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active > a,
body.course-nav-horizontal .iq-sidebar-menu .iq-menu > li.active-menu > a {
  color: #0e1861 !important;
}

html body.nav-layout-animating .iq-sidebar,
html.course-nav-horizontal body.nav-layout-animating .iq-sidebar,
html body.nav-layout-animating.course-nav-horizontal .iq-sidebar {
  overflow: hidden !important;
  transition: left .36s ease, top .36s ease, width .36s ease, height .36s ease, padding .36s ease, box-shadow .36s ease !important;
}

html body.nav-layout-animating .iq-top-navbar,
html body.nav-layout-animating .content-page,
html body.nav-layout-animating .iq-footer,
html.course-nav-horizontal body.nav-layout-animating .iq-top-navbar,
html.course-nav-horizontal body.nav-layout-animating .content-page,
html.course-nav-horizontal body.nav-layout-animating .iq-footer {
  transition: left .36s ease, margin-left .36s ease, padding-top .36s ease, width .36s ease !important;
}

html body.nav-layout-animating .iq-sidebar #sidebar-scrollbar,
html body.nav-layout-animating .iq-sidebar-menu,
html body.nav-layout-animating .iq-sidebar-menu .iq-menu,
html.course-nav-horizontal body.nav-layout-animating .iq-sidebar #sidebar-scrollbar,
html.course-nav-horizontal body.nav-layout-animating .iq-sidebar-menu,
html.course-nav-horizontal body.nav-layout-animating .iq-sidebar-menu .iq-menu {
  transition: height .28s ease, margin .28s ease, opacity .22s ease !important;
}
.cpm_name{ font-size:12px !important; }

.fees-page {
  display: grid;
  gap: 22px;
}

.fees-prototype-note {
  align-items: center;
  background: #fff7e8;
  border: 1px solid #f4d6a6;
  border-radius: 8px;
  color: #8a5b11;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 11px 14px;
}

.fees-quick-pay {
  align-items: center;
  background: linear-gradient(135deg, #0f185f, #4f46e5);
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  overflow: hidden;
  padding: 24px 28px;
  position: relative;
}

.fees-quick-pay::after {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  content: "";
  height: 180px;
  position: absolute;
  right: -58px;
  top: -80px;
  width: 180px;
}

.fees-quick-copy {
  position: relative;
  z-index: 1;
}

.fees-quick-copy span,
.fees-stat-card small,
.fees-panel header p {
  color: #7d8aa3;
  font-size: 12px;
}

.fees-quick-copy span {
  color: #cbd5ff;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.fees-quick-copy h2 {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  margin: 6px 0 4px;
}

.fees-due-countdown {
  color: #dbe2ff;
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}

.fees-quick-copy p {
  color: #dbe2ff;
  margin: 0;
}

.fees-quick-actions,
.fees-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.fees-btn {
  align-items: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  padding: 10px 16px;
}

.fees-btn-primary {
  background: linear-gradient(135deg, #6256e9, #2ebbd2);
  color: #fff;
}

.fees-btn-white {
  background: #fff;
  color: #0f185f;
}

.fees-btn-light {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
}

.fees-btn-outline {
  background: #fff;
  border: 1px solid #dfe6f1;
  color: #14213d;
}

.fees-btn-soft {
  background: #ece9ff;
  color: #5145cd;
}

.fees-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fees-stat-card,
.fees-panel {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 24, 95, .04);
}

.fees-stat-card {
  display: grid;
  gap: 7px;
  padding: 20px;
}

.fees-stat-card span {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 21px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.fees-stat-card.total span { background: #ece9ff; color: #5d52df; }
.fees-stat-card.paid span { background: #e2f6ee; color: #1f9f69; }
.fees-stat-card.due span { background: #fdeceb; color: #d9483c; }
.fees-stat-card.next span { background: #fff1df; color: #e0782f; }

.fees-stat-card strong {
  color: #14213d;
  font-size: 23px;
  font-weight: 800;
}

.fees-stat-card em {
  color: #7d8aa3;
  font-size: 12px;
  font-style: normal;
}

.fees-panel header {
  align-items: center;
  border-bottom: 1px solid #edf1f7;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 20px 24px;
}

.fees-panel header h5 {
  color: #14213d;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 3px;
}

.fees-panel header p {
  margin: 0;
}

.fees-tab-list {
  align-items: center;
  background: #f3f6fb;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.fees-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.fees-tab.is-active {
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 24, 95, .08);
  color: #0f185f;
}

.fees-tab i {
  font-size: 16px;
  line-height: 1;
}

.fees-tab-panel[hidden] {
  display: none;
}

.fees-table-wrap {
  overflow-x: auto;
  padding: 6px 24px 22px;
}

.fees-table {
  border-collapse: collapse;
  min-width: 840px;
  width: 100%;
}

.fees-table th {
  border-bottom: 1px solid #edf1f7;
  color: #7d8aa3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 12px 10px;
  text-align: left;
  text-transform: uppercase;
}

.fees-table td {
  border-bottom: 1px solid #edf1f7;
  color: #334155;
  font-size: 13px;
  padding: 14px 10px;
  vertical-align: middle;
}

.fees-table tbody tr:last-child td {
  border-bottom: 0;
}

.fees-table td strong {
  color: #14213d;
  display: block;
  font-weight: 800;
}

.fees-table td small {
  color: #7d8aa3;
  display: block;
  margin-top: 2px;
}

.fees-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  padding: 5px 11px;
  white-space: nowrap;
}

.fees-badge::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 6px;
  width: 6px;
}

.fees-badge.paid { background: #e2f6ee; color: #1f9f69; }
.fees-badge.due { background: #fdeceb; color: #d9483c; }
.fees-badge.partial { background: #fff5dd; color: #bd7d18; }
.fees-badge.pending { background: #eef2ff; color: #6471a8; }

.fees-icon-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  color: #0f185f;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.fees-row-actions {
  align-items: center;
  display: flex;
  gap: 7px;
}

.fees-muted-action {
  color: #a0abc0;
  display: inline-flex;
  justify-content: center;
  width: 34px;
}

.fees-progress-row {
  align-items: center;
  display: flex;
  gap: 16px;
  padding: 22px 24px;
}

.fees-progress-track {
  background: #edf1f7;
  border-radius: 999px;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
}

.fees-progress-track span {
  background: linear-gradient(135deg, #6256e9, #2ebbd2);
  display: block;
  height: 100%;
}

.fees-progress-row strong {
  color: #14213d;
  font-size: 13px;
  white-space: nowrap;
}

.fees-modal-backdrop {
  align-items: flex-start;
  background: rgba(12, 18, 48, .52);
  display: none;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  position: fixed;
  z-index: 1100;
}

.fees-modal-backdrop.show {
  display: flex;
}

.fees-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(15, 24, 95, .25);
  max-width: 460px;
  overflow: hidden;
  width: 100%;
}

#feesPayModal .fees-modal {
  max-width: min(620px, calc(100vw - 32px));
}

#feesDetailModal .fees-modal {
  max-width: min(640px, calc(100vw - 32px));
}

.fees-modal header {
  align-items: center;
  border-bottom: 1px solid #edf1f7;
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
}

.fees-modal header h5 {
  color: #14213d;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.fees-modal header button {
  background: #f3f6fb;
  border: 0;
  border-radius: 999px;
  color: #14213d;
  height: 32px;
  width: 32px;
}

.fees-modal-body {
  display: grid;
  gap: 11px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding: 16px 20px 18px;
}

.fees-pay-summary {
  align-items: center;
  background: #ff8a8a;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 14px;
}

.fees-pay-summary span {
  color: #fff;
  font-size: 16px;
  min-width: 0;
  font-weight:500;
  overflow-wrap: anywhere;
}

.fees-pay-summary strong {
  color: #14213d;
  font-size: 18px;
  justify-self: end;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: nowrap;
}

.fees-detail-summary {
  background: #f3f6fb;
}

.fees-detail-summary span {
  color: #14213d;
}

.fees-detail-table-wrap {
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  overflow: hidden;
}

.fees-detail-table {
  border-collapse: collapse;
  width: 100%;
}

.fees-detail-table th,
.fees-detail-table td {
  border-bottom: 1px solid #edf1f7;
  color: #334155;
  font-size: 13px;
  line-height: 1.4;
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}

.fees-detail-table tr:last-child th,
.fees-detail-table tr:last-child td {
  border-bottom: 0;
}

.fees-detail-table th {
  background: #f8fafc;
  color: #7d8aa3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  width: 38%;
}

.fees-detail-table td {
  color: #14213d;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.fees-detail-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.fees-pay-lines {
  display: grid;
  gap: 8px;
}

.fees-pay-line {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  cursor: pointer;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  margin: 0;
  padding: 9px 12px;
}

.fees-pay-line input {
  accent-color: #5145cd;
  height: 16px;
  margin: 0;
  width: 16px;
}

.fees-pay-line span,
.fees-pay-line strong,
.fees-pay-line small,
.fees-pay-line em {
  display: block;
  min-width: 0;
}

.fees-pay-line strong {
  color: #14213d;
  font-size: 13px;
  line-height: 1.25;
}

.fees-pay-line small {
  color: #7d8aa3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2px;
}

.fees-pay-line em {
  color: #14213d;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.fees-pay-line.is-required,
.fees-pay-line.is-linked {
  background: #f8fafc;
}

.fees-pay-line.is-disabled {
  opacity: .62;
}

.fees-modal label {
  color: #14213d;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.fees-modal input,
.fees-modal select,
.fees-modal textarea {
  background: #fbfcff;
  border: 1px solid #dfe6f1;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  min-height: 44px;
  padding: 9px 12px;
}

.fees-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.fees-wide-btn {
  min-height: 46px;
  width: 100%;
}

.fees-secure-note {
  color: #7d8aa3;
  font-size: 12px;
  margin: -2px 0 0;
  text-align: center;
}

.fees-toast {
  align-items: center;
  background: #0f185f;
  border-radius: 8px;
  bottom: 26px;
  color: #fff;
  display: flex;
  gap: 8px;
  left: 50%;
  opacity: 0;
  padding: 12px 18px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 16px);
  transition: .2s ease;
  z-index: 1200;
}

.fees-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1199px) {
  .fees-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fees-quick-pay,
  .fees-panel header,
  .fees-progress-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .fees-tab-list {
    width: 100%;
  }
  .fees-tab {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
  .fees-summary-grid,
  .fees-form-grid {
    grid-template-columns: 1fr;
  }
  .fees-progress-track,
  .fees-panel-actions,
  .fees-detail-actions,
  .fees-btn {
    width: 100%;
  }
  .fees-detail-actions {
    flex-direction: column;
  }
  .fees-detail-table th,
  .fees-detail-table td {
    display: block;
    width: 100%;
  }
  .fees-detail-table th {
    border-bottom: 0;
    padding-bottom: 3px;
  }
  .fees-detail-table td {
    padding-top: 3px;
  }
  .fees-pay-summary {
    align-items: start;
    grid-template-columns: 1fr;
  }
  .fees-pay-summary strong {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

@media print {
  .fees-prototype-note,
  .fees-quick-actions,
  .fees-panel-actions,
  .fees-icon-btn,
  .fees-modal-backdrop,
  .fees-toast {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .dashboard-mascot-art {
    opacity: .35;
    right: 12px;
  }
}

@media (max-width: 991px) {
  .login-mascot {
    max-height: 280px;
    max-width: 260px;
  }
  .dashboard-mascot-art {
    display: none;
  }
}

@media (max-width: 767px) {
  .login-mascot {
    display: none;
  }
  .mascot-empty-state img,
  .empty-mascot,
  .chat-welcome img {
    height: 92px;
  }
}