/* Default */

html {
   scroll-behavior: smooth;
   height: 100%;
   font-size: 14px;
}

body {
   font-family: 'IRANSans',IRANSans,Tahoma,sans-serif;
   text-align: right;
   font-size: 1rem;
   color: #444444;
   background: #FFFFFF;
   min-height: 100%;
   display: grid;
   grid-template-rows: 1fr auto;
}

h1, h2, h3, h4, h5, h6, .heading-font {
   font-family: 'IRANSans',IRANSans,Tahoma,sans-serif;
   margin-bottom: 0;
}

p {
   display: block;
   line-height: 1.75rem;
   color: #444444;
   font-weight: 300;
   font-size: 1rem;
   text-align: justify;
   margin-bottom: 0;
}

b {
   font-weight: 500;
}

blockquote {
   background-color: #f9f9fa;
   padding: 1.25rem 2.5rem 1.25rem 1.25rem;
   line-height: 1.8;
   border-radius: 0.625rem;
   border-right: 5px solid #404E5A;
   font-size: 0.312rem;
}

blockquote, q {
   quotes: none;
}

a {
   display: inline-flex;
   color: #0179BE;
}

a:hover {
   text-decoration: none;
   color: #0179BE;
}

img {
   max-width: 100%;
   max-height: 100%;
}

svg {
   width: 100%;
   height: 100%;
}

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

button:focus {
   outline: none;
}

::selection {
   background: #0179BE;
   text-shadow: none;
}

select {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url('../img/dropdown-arrow.svg');
   background-repeat: no-repeat;
   background-position: 1.25rem center;
}

select option {
   background: #D7D7D7;
   color: #444444;
}

select option:hover {
   background: #000;
}

/*::-webkit-scrollbar {*/

/*    width: 0.625rem;*/

/*}*/

/*!* Track *!*/

/*::-webkit-scrollbar-track {*/

/*    background: #FFFF;*/

/*    border-radius: 0;*/

/*}*/

/*!* Handle *!*/

/*::-webkit-scrollbar-thumb {*/

/*    background: #0179be;*/

/*    border-radius: 0;*/

/*}*/

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none !important;
   margin: 0;
}

/* Firefox */

input[type=number] {
   /*appearance: textfield;*/
   -moz-appearance: textfield !important;
}

::-moz-selection {
   background: rgba(255, 24, 68, 0.5);
}

::selection {
   background: rgba(255, 24, 68, 0.5);
}

input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible {
   outline: none;
}

.lg-outer {
   direction: ltr;
}

main {
   display: flex;
   flex-direction: column;
   width: 100%;
   overflow-x: hidden;
}

input::-webkit-input-placeholder {
   color: #444444;
}

input:-ms-input-placeholder {
   color: #444444;
}

input::placeholder {
   color: #444444;
}

[class*="span"] {
   margin-bottom: 0;
}

/* form elements */

select {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url('../img/dropdown-arrow.svg');
   background-repeat: no-repeat;
   background-position: 1.25rem center;
}

select option {
   background: #F9FBFC;
   color: #404E5A;
}

select option:hover {
   background: #000;
}

::-webkit-scrollbar {
   width: 0.625rem;
}

/* Track */

::-webkit-scrollbar-track {
   background: #F0F4F8;
   border-radius: 0.625rem;
}

/* Handle */

::-webkit-scrollbar-thumb {
   background: #006494;
   border-radius: 0;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none !important;
   margin: 0;
}

/* Firefox */

input[type=number] {
   /*appearance: textfield;*/
   -moz-appearance: textfield !important;
}

input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox */

input[type=number] {
   -moz-appearance: textfield;
}

::-moz-selection {
   background: rgba(255, 24, 68, 0.5);
}

::selection {
   background: rgba(255, 24, 68, 0.5);
}

.form-group {
   position: relative;
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
}

input[type="radio"] {
   display: none !important;
}

input[type="checkbox"] {
   display: none !important;
}

::placeholder {
   color: #444444;
   font-size: 0.75rem;
}

:-ms-input-placeholder {
   color: #444444;
   font-size: 0.75rem;
}

::-ms-input-placeholder {
   color: #444444;
   font-size: 0.75rem;
}

input[type="tel"]::placeholder {
   color: #444444;
}

input[type="tel"]:-ms-input-placeholder {
   color: #444444;
}

input[type="tel"]::-ms-input-placeholder {
   color: #444444;
}

form input:focus, select:focus, textarea:focus {
   outline: none;
}

.form-group .form-control {
   border-radius: 24px;
   border: 1px solid #D7D7D7;
   min-height: 3rem;
   font-size: 0.875rem;
   font-weight: 300;
   color: #444444;
   padding: 0.75rem 1.25rem;
}

.form-group .form-control::placeholder {
   font-size: 0.875rem;
   font-weight: 300;
   color: #444444;
   text-align: right;
}

.form-group .form-control:disabled, .form-control[readonly], .form-group select:disabled~.cbs {
   border: none;
   background-color: #ffffff;
   color: #444444
}

.form-group .input-wrapper {
   display: flex;
   position: relative;
}

.form-control:focus {
   outline: none;
   box-shadow: none;
   border-color: #60B72C;
}

.form-group .inp-label {
   font-size: 0.875rem;
   font-weight: 500;
   margin-bottom: 0.625rem;
}

.form-group .error, .form-group~.error, .login-sec .inner-log .error {
   font-size: 0.75rem;
   color: #FF7575;
   display: none;
   margin: 0;
}

.form-group .error {
   padding-right: 1.25rem;
}

.form-group.invalid .error, .form-group.invalid~.error, .login-sec .form-group.invalid~.inner-log .error {
   display: flex;
}

.form-group.invalid .form-control {
   border-color: #FF7575;
}

.form-group.tel .form-control:focus, .form-group.phone .form-control:focus {
   background-image: none;
}

.form-group .c-label {
   font-size: 0.875rem;
   margin-bottom: 0.625rem;
   font-weight: 500;
}

.checkboxes {
   display: flex;
   margin-bottom: 1rem;
   flex-wrap: wrap;
   justify-content: space-between;
}

.checkboxes .form-radio {
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
   width: 48%;
}

.checkboxes .form-radio label {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   user-select: none;
   margin-top: 0;
   margin-bottom: 0;
   cursor: pointer;
}

.checkboxes .form-radio label .box-p {
   display: inline-block;
   font-size: 0.875rem;
   font-weight: 300;
   border: 1px solid #D7D7D7;
   color: #444444;
   line-height: 2.25rem;
   text-align: center;
   width: 100%;
   border-radius: 24px;
}

.checkboxes .form-radio label input:checked~.box-p {
   color: #FFFFFF;
   background: #60B72C;
}

.checkbox-group {
   display: flex;
   align-items: center;
}

.checkbox-group label {
   display: flex;
   align-items: center;
   margin-left: 1.25rem;
   cursor: pointer;
}

.checkbox-group label .radio-checkmark {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 1.125rem;
   height: 1.125rem;
   border: 2px solid #A1A1A1;
   border-radius: 50%;
   background-color: #fff;
   margin-left: 7px;
   position: relative;
}

.checkbox-group label .radio-checkmark::after {
   content: '';
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
   background-color: #60B72C;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   display: none;
}

.checkbox-group label input:checked~.radio-checkmark::after {
   display: inline-block;
}

.checkbox-group label .r-o-label {
   font-size: 0.75rem;
   color: #444444;
   font-weight: 300;
}

.checkbox-group label .checkbox-checkmark {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   background-color: #fff;
   border: 2px solid #A1A1A1;
   border-radius: 10px;
   margin-left: 0.75rem;
   position: relative;
}

.checkbox-group label .checkbox-checkmark::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background-image: url('../img/correct.svg');
   background-repeat: no-repeat;
   width: 0.75rem;
   height: 0.8rem;
   background-size: contain;
   background-position: center center;
   display: none;
}

.checkbox-group label input:checked~.checkbox-checkmark {
   background-color: #60B72C;
   border: none;
}

.checkbox-group label input:checked~.checkbox-checkmark::after {
   display: inline-block;
}

.datepicker-plot-area {
   font-family: 'IRANSans',IRANSans,Tahoma,sans-serif;
}

.datepicker-plot-area .datepicker-day-view .table-days td span {
   border-radius: 8px;
   transition: 0.2s;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span, .datepicker-plot-area .datepicker-year-view .year-item.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected {
   background-color: #60B72C;
}

.form-group .form-control.dropdown {
   padding: 0;
}

.form-group .cbs {
   background-color: transparent;
   height: 100%;
   padding: 0.75rem 0.75rem;
   border: 1px solid #E5E5E5;
   border-radius: 24px;
   color: #444444;
   font-weight: 300;
   position: relative;
}

.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle.cbs {
   background-color: transparent !important;
   border-color: #60B72C !important;
}

.bootstrap-select>select.mobile-device:focus+.dropdown-toggle.cbs, .bootstrap-select .dropdown-toggle.cbs:focus {
   outline: none !important;
   outline-offset: unset !important;
   box-shadow: none !important;
   border-color: #60B72C;
}

.bootstrap-select .dropdown-toggle.cbs .filter-option {
   text-align: right !important;
}

div.form-control.bootstrap-select {
   border: none;
}

.dropup .dropdown-toggle.cbs::after {
   border: none;
}

.dropdown .dropdown-toggle.cbs::after {
   border: none;
}

.dropdown-toggle.cbs::after {
   background-image: url(../img/dropdown-arrow.svg);
   background-repeat: no-repeat;
   background-position: center center;
   width: 1.125rem;
   height: 0.625rem;
   background-size: contain;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto 0;
   left: 1.25rem;
}

.bootstrap-select>.dropdown-toggle.cbs.bs-placeholder {
   color: #444444;
   font-size: 0.875rem;
   font-weight: 300;
}

.dropdown.show button.cbs.dropdown-toggle.btn-light {}

.form-group .cbs~.dropdown-menu {
   margin: 0;
   border-radius: 24px;
   padding: 0;
}

.bs-searchbox, .bs-actionsbox, .bs-donebutton {
   padding: 0;
   position: relative;
}

.bs-searchbox .form-control {
   border-radius: 0;
   border-right: none;
   border-top: none;
   border-left: none;
   position: relative;
   padding-left: 2.25rem;
}

.bs-searchbox::after {
   content: '';
   /*background-image: url(../img/search-black.svg);*/
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   position: absolute;
   left: 0.75rem;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 1.5rem;
   height: 1.5rem;
}

.bs-searchbox .form-control:focus {
   border-color: #E5E5E5;
}

.bootstrap-select .cbs .dropdown-menu.inner {
   padding: 1.25rem 0;
}

.dropdown-item.active, .dropdown-item:active {
   background-color: #efffe6;
   border-radius: 8px;
}

.dropdown-menu.inner .dropdown-item span {
   font-size: 0.875rem;
   color: #444444;
}

.dropdown-menu.inner .dropdown-item.active span {
   /* color: #fff; */
}

.bootstrap-select .dropdown-menu li a {
   display: flex;
   align-items: center;
   padding: 0 1.25rem;
}

.bootstrap-select .dropdown-menu li a .text {
   line-height: 2.1875rem;
}

.bootstrap-select .dropdown-menu li a span.check-mark {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
   background-color: #fff;
   border: 2px solid #60B72C;
   border-radius: 5px;
   margin-left: 0.8125rem;
   position: relative;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
   margin: 0;
}

.bootstrap-select .bs-ok-default:after {
   border: none;
   position: absolute;
   left: 0;
   right: 0;
   width: 0.75rem;
   height: 0.5rem;
   top: 0;
   bottom: 0;
   margin: auto;
   background-image: url(../img/correct.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   transform: none;
   /* display: none; */
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
   position: relative;
   right: unset;
   top: unset;
   background-color: #60B72C;
}

.checkbox-group.checkbox-box label .r-o-label {
   background: #ffffff;
   color: #444444;
   border: 2px solid #ECECFF;
   border-radius: 10px;
   width: 100%;
}

.checkbox-group.checkbox-box label input:checked~.r-o-label {
   background: #60B72C;
   color: #ffffff;
}

.checkbox-group.checkbox-box {
   flex-wrap: wrap;
   justify-content: space-between;
}

.checkbox-group.checkbox-box label {
   width: 48%;
   line-height: 3rem;
   text-align: center;
   margin-left: 0;
}

/* /form elements */

/* elements */

.pb-btn {
   display: inline-flex;
   border-radius: 24px;
   color: #FFFF;
   justify-content: center;
   align-items: center;
   /* width: 100%; */
   position: relative;
   background: linear-gradient(to right, #60B72C, #87C64B);
   box-shadow: 0 3px 10px #6AC45A;
   line-height: 3rem;
}

.pb-btn a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   width: 100%;
   font-size: 1rem;
   font-weight: 500;
   height: 100%;
   padding: 0 1.5rem;
   white-space: nowrap;
}

.pb-btn button {
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   width: 100%;
   font-size: 1rem;
   font-weight: 500;
   height: 100%;
   padding: 0 1.5rem;
   white-space: nowrap;
   border: unset;
   background: inherit;
   border-radius: inherit;
}

.pb-btn-outline {
   display: inline-flex;
   border-radius: 24px;
   color: #60B72C;
   justify-content: center;
   align-items: center;
   /* width: 100%; */
   position: relative;
   background: #FFFFFF;
   border: 1px solid #60B72C;
   line-height: 2.25rem;
}

.pb-btn-outline a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   width: 100%;
   font-size: 1em;
   font-weight: 500;
   height: 100%;
   padding: 0 1.5rem;
   white-space: nowrap;
}

.pb-btn-outline button {
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   width: 100%;
   font-size: 1em;
   font-weight: 500;
   height: 100%;
   padding: 0 1.5rem;
   white-space: nowrap;
}

.pb-btn.blue-btn {
   background: linear-gradient(to right, #1A8DCF, #0179BE);
   box-shadow: 0 3px 10px #5EBAEF;
   color: #FFFFFF;
}

.pb-btn.gray-btn {
   background: linear-gradient(to right, #D7D7D7, #A1A1A1);
   box-shadow: 0 3px 10px #D7D7D7;
   color: #FFFFFF;
}

.pb-btn.b-light {
   background: #FFFFFF;
   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
   color: #0179BE;
}

.black-20-m {
   font-size: 1.25rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
}

.black-18-m {
   font-size: 1rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
}

.black-16-m {
   font-size: 1rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
   line-height: 1.5625rem;
}

.black-14-m {
   font-size: 0.875rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
}

.black-14 {
   font-size: 0.875rem;
   color: #444444;
   display: inline-flex;
}

.black-12 {
   font-size: 0.75rem;
   color: #444444;
   display: inline-flex;
}

.green-16 {
   font-size: 1rem;
   color: #60B72C;
   display: inline-flex;
}

.green-18-l {
   font-size: 1.125rem;
   font-weight: 300;
   color: #60B72C;
   display: inline-flex;
}

.green-14 {
   font-size: 0.875rem;
   color: #60B72C;
   display: inline-flex;
}

.green-16 a {
   font-size: 1rem;
   color: #60B72C;
   display: inline-flex;
}

.blue-14 {
   font-size: 0.875rem;
   color: #0179BE;
   display: inline-flex;
}

.blue-14-m {
   font-size: 0.875rem;
   font-weight: 500;
   color: #0179BE;
   display: inline-flex;
}

.blue-16 {
   font-size: 1rem;
   color: #0179BE;
   display: inline-flex;
}

.blue-16 a {
   font-size: 1rem;
   color: #0179BE;
   display: inline-flex;
}

.green-m-16 {
   font-size: 1rem;
   font-weight: 500;
   color: #60B72C;
   display: inline-flex;
}

.black-16-m a, .black-18-m a, .black-20-m a {
   color: inherit;
}

.hp-main-header {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 2.5rem;
}

.hp-main-title {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.875rem;
   font-weight: bold;
   color: #D2D2D2;
   position: relative;
}

.main-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2.5rem;
}

/* /elements */

/* Header */

.main-header {
   display: flex;
   background: #F2F2F2;
   flex-direction: column;
   margin-bottom: 0;
   padding-bottom: 40px;
}

.header-bg:after {
   content: '';
   height: 120px;
   background: #F2F2F2;
   position: absolute;
   top: 60px;
   z-index: -999;
   right: 0;
   left: 0;
   background-size: cover;
}

.border-top-header {
   width: 100%;
   height: 8px;
   background: linear-gradient(to left, #60B72C, #87C64B);
}

.main-header .main-logo-holder {
   display: inline-block;
   margin-left: 3.5625rem;
}

.main-header .main-logo-holder a {
   display: inline-block;
   width: 127px;
}

.main-header .main-logo-holder a img {
   display: inline-block;
}

.main-header .navbar-collapse .main-logo-holder {
   display: none;
}

.main-header .navbar {
   display: flex;
   padding: 0;
}

.main-header .navbar ul.navbar-nav li {
   display: inline-block;
   margin: 0.5rem 0 0 2.5rem;
}

.red-circle {
   width: 8px;
   height: 8px;
   background: #FF7575;
   text-align: center;
   vertical-align: middle;
   border-radius: 50%;
   position: absolute;
   top: 14px;
   right: 12px;
}

.main-header .navbar ul.navbar-nav li a {
   color: #444444;
   font-size: 1rem;
   font-weight: 300;
   padding: 0.625rem 0;
   white-space: nowrap;
}

.socialNetwork-login {
   display: flex;
   align-self: flex-start;
}

.social-network {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   line-height: 40px;
   background-image: linear-gradient(to top, #60B72C, #87C64B);
   border-radius: 0 0 20px 20px;
   /*margin-left: 1.25rem;*/
   padding: 10px;
}

.social-network ul {
   display: flex;
}

.socialNetwork-login .social-network ul li {
   float: right;
   margin: 0 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
}

.socialNetwork-login .login {
   display: flex;
   align-items: center;
   justify-content: space-between;
   line-height: 40px;
   background-color: #FFFFFF;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
   border-radius: 0 0 20px 20px;
   padding: 0 15px;
   position: relative;
}

.socialNetwork-login div:not(:last-child) {
   margin-left: 1.25rem;
}

.socialNetwork-login .login a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: #60B72C;
}

.socialNetwork-login .login a .i-pro {
   background: url(../img/pro.svg) no-repeat center center /cover;
   width: 14px;
   height: 18px;
}

.socialNetwork-login .login a .i-bag {
   background: url(../img/i-bag.svg) no-repeat center center /cover;
   width: 18px;
   height: 19px;
}

.socialNetwork-login .login a .text {
   display: inline-block;
   margin-right: 0.437rem;
   white-space: nowrap;
}

.logo-resBtn {
   display: flex;
   margin-top: 0.5rem;
}

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

.main-header .login .dropdown-toggle::after {
   content: none;
}

.main-header .login ul.dropdown-menu.show {
   position: absolute;
   display: flex;
   flex-direction: column;
   transform: unset !important;
   top: 100% !important;
   right: unset;
   left: 0;
   border: unset;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
   margin-top: 10px;
}

.main-header .login ul.dropdown-menu.show li {
   margin: 0;
   padding: 0.5rem 0.75rem;
   position: relative;
   cursor: pointer;
   line-height: 1;
}

.main-header .login ul.dropdown-menu.show li span {
   color: #444444;
   font-size: 0.875rem;
   font-weight: 500;
}

.main-header .login ul.dropdown-menu.show li a {
   white-space: nowrap;
   color: #444444;
   font-size: 0.75rem;
   justify-content: flex-start;
}

.bars {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}

.bar1, .bar2, .bar3 {
   width: 15px;
   height: 2px;
   background-color: #60B72C;
   margin: 2px 0;
   transition: 0.4s;
   display: flex;
}

.nav-backdrop {
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .7);
   position: fixed;
   cursor: pointer;
   z-index: 700;
   transition: opacity .5s cubic-bezier(.38, .11, .01, 1);
}

.navbar-toggler[aria-expanded=false] .nav-backdrop {
   opacity: 0;
   visibility: hidden;
   display: none;
}

.navbar-toggler[aria-expanded=true] .nav-backdrop {
   opacity: .5;
   visibility: visible;
   display: block;
}

.navbar>.container, .navbar>.container-fluid {
   align-items: flex-start;
}

/* /Header */

/* intro-sec */

.intro-sec {
   display: block;
   margin-bottom: 90px;
   position: relative;
   width: 100%;
   background-repeat: repeat;
   background-color: #F2F2F2;
   /*background-position: center;*/
   padding-bottom: 100px;
   padding-top: 125px;
}

.intro-title {
   display: flex;
   color: #0179BE;
   font-size: 1.875rem;
   font-weight: bold;
   margin-bottom: 1.875rem;
}

.intro-subtitle {
   margin-bottom: 1.875rem;
   position: relative;
   display: flex;
   align-items: center;
   padding-right: 2.25rem;
}

.intro-subtitle:before {
   content: '';
   position: absolute;
   right: 0;
   width: 24px;
   height: 12px;
   border-radius: 10px;
   background: url(../img/arrow-left.svg) no-repeat bottom center / cover;
}

.description {
   margin-bottom: 2.8125rem;
}

.intro-btns {
   display: flex;
}

.intro-btns .pb-btn {
   margin-left: 1.25rem;
}

.intro-img {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   top: 0;
   z-index: 6;
}

.banner {
   display: flex;
   line-height: 50px;
   height: 50px;
   background: #FFFFFF;
   border-radius: 40px;
   padding: 0 50px;
   justify-content: center;
   position: absolute;
   right: 0;
   left: 110px;
   margin-right: auto;
   bottom: -125px;
   width: max-content;
}

.banner-txt {
   display: flex;
   margin-left: 1.25rem;
}

.banner-txt span {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
}

.banner .name {
   display: flex;
}

.banner .name span {
   display: flex;
   color: #60B72C;
   font-size: 1.125rem;
   font-weight: 500;
}

.header-img {
   display: flex;
   justify-content: center;
   position: absolute;
   top: -125px;
   right: 0;
   left: 0;
   z-index: 1;
}

.header-img img {}

.intro-card {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 136px;
   min-height: 100px;
   z-index: 3;
}

/*@keyframes move {
    0% {
        transform: rotate(10deg);
    }
    25% {
        transform: rotate( 0deg);
    }
    50% {
        transform: rotate( -10deg);
    }
    75% {
        transform: rotate( 0deg);
    }
    100% {
        transform: rotate(10deg);
    }
}*/

@keyframes move1 {
   0% {
      transform: translateY(-5px) rotate(-23deg);
   }
   25% {
      transform: translateY(0) rotate(-23deg);
   }
   50% {
      transform: translateY(5px) rotate(-23deg);
   }
   75% {
      transform: translateY(0) rotate(-23deg);
   }
   100% {
      transform: translateY(-5px) rotate(-23deg);
   }
}

@keyframes move2 {
   0% {
      transform: translateY(5px) rotate(15deg);
   }
   25% {
      transform: translateY(0) rotate(15deg);
   }
   50% {
      transform: translateY(-5px) rotate(15deg);
   }
   75% {
      transform: translateY(0) rotate(15deg);
   }
   100% {
      transform: translateY(5px) rotate(15deg);
   }
}

@keyframes move3 {
   0% {
      transform: translateY(5px) rotate(-8deg);
   }
   25% {
      transform: translateY(0) rotate(-8deg);
   }
   50% {
      transform: translateY(-5px) rotate(-8deg);
   }
   75% {
      transform: translateY(0) rotate(-8deg);
   }
   100% {
      transform: translateY(5px) rotate(-8deg);
   }
}

.intro-card.intro1 {
   top: 35px;
   left: 50px;
   animation: move1 6s cubic-bezier(0.32, 0.29, 0.44, 0.42) infinite;
}

.intro-card.intro2 {
   top: -91px;
   right: 75px;
   animation: move2 6s cubic-bezier(0.32, 0.29, 0.44, 0.42) infinite;
   transition-delay: 2s;
}

.intro-card.intro3 {
   bottom: 59px;
   right: 30px;
   animation: move3 6s cubic-bezier(0.32, 0.29, 0.44, 0.42) infinite;
}

.intro-card .opacity {
   display: flex;
   border-radius: 20px;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
   background: #FFFF;
   opacity: .65;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.intro-card-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.intro-card .card-icon {
   display: flex;
   width: 31px;
   height: 31px;
   text-align: center;
   margin-bottom: 6px;
}

.intro-card .card-icon img {}

.intro-card .card-name {
   text-align: center;
}

.images {
   display: flex;
   margin-top: 10px;
}

.images .card-img {
   display: flex;
   width: 31px;
   height: 31px;
}

/* /intro-sec */

/* system-sec */

.system-sec {
   display: flex;
   margin-bottom: 4.286rem;
}

.s-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.s-card .s-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, .1);
   border-radius: 1.5rem;
   padding: 1.5rem;
   z-index: 6;
   transition: 0.3s;
   margin-bottom: 50px;
}

.s-card .card-icon {
   display: flex;
   width: 62px;
   height: 55px;
   text-align: center;
   margin-bottom: 2.0625rem;
}

.s-card .card-icon img {
   display: flex;
}

.s-card .card-name {
   display: flex;
   margin-bottom: 1.875rem;
   white-space: nowrap;
}

.s-card .pb-btn {
   width: unset;
   margin-bottom: -45px;
}

.s-card .pb-btn::after {
   content: '';
   width: calc(100% + 16px);
   height: calc(100% + 16px);
   background: #ffffff;
   border-radius: 32px;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -2;
   box-shadow: 1px 30px 5px 0 rgba(0, 0, 0, .04) inset;
}

/* /system-sec */

/* teachers-sec */

.teachers-sec {
   display: flex;
   margin-bottom: 2.143rem;
}

.s-card .card-image {
   display: flex;
   width: 9.375rem;
   border-radius: 35px;
   /* border: 3px solid #FFFFFF; */
   position: relative;
   margin-top: -80px;
   margin-bottom: 22px;
   justify-content: center;
}

.s-card .card-image a {
   border-radius: inherit;
   width: 100%;
   height: 100%;
}

.s-card .card-image img {
   border-radius: inherit;
   border: 3px solid #FFFFFF;
}

.s-card .card-image::after {
   content: '';
   width: calc(100% + 16px);
   height: calc(100% + 16px);
   background: linear-gradient(to bottom, #EAF9FE, #21C3FC);
   border-radius: inherit;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -1;
}

.s-card .card-sub-name {
   display: flex;
   margin-bottom: 2rem;
}

.card-bg:after {
   content: '';
   width: 100%;
   height: 85%;
   position: absolute;
   background: url(../img/card-bg.svg) no-repeat bottom center / cover;
   top: 0;
   z-index: -2;
}

.teachers-sec .card-bg:after {
   height: 60%;
}

.same-course-sec .card-bg:after {
   height: 60%;
}

.filters-menu-sec .card-bg:after {
   height: 60%;
}

.card-bg {
   margin-top: 60px;
}

.s-card .card-bg .card-name {
   margin-bottom: 10px;
   white-space: normal;
}

.card-det {
   display: flex;
}

.card-det .det {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   /* border-right: 1px solid #D7D7D7; */
}

.card-det .det .d-num {
   position: relative;
   display: flex;
   border-left: 1px solid #D7D7D7;
   padding: 5px 25px;
}

.card-det .det:last-child .d-num {
   border-left: unset;
}

.card-det .det .d-num span {
   font-size: 1rem;
   color: #444444;
   display: inline-flex;
}

.card-det .det .d-text {
   position: relative;
   display: flex;
}

.card-det .det .d-text span {
   font-size: 12px;
   font-weight: 300;
   color: #A1A1A1;
   display: inline-flex;
   white-space: nowrap;
}

.card-det .d-icon {
   display: flex;
}

.card-det .d-icon .icon {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
}

.card-det .d-icon .icon.i-period {
   background-image: url(../img/bag.svg);
   width: 16px;
   height: 17px;
}

.card-det .d-icon .icon.i-video {
   background-image: url(../img/video.svg);
   width: 18px;
   height: 14px;
}

.card-det .d-icon .icon.i-cost {
   background-image: url(../img/cost.svg);
   width: 16px;
   height: 16px;
}

.card-det .d-icon .icon.i-note {
   background-image: url(../img/note.svg);
   width: 17px;
   height: 17px;
}

.teachers-sec .s-card .s-card-inner:hover {
   transform: translateY(-20px);
}

/* /teachers-sec */

/* teacher-top-students-sec */

.teacher-top-students-sec {
   display: flex;
   margin-bottom: 2.857rem;
}

.top-std-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.top-std-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   padding: 1.25rem;
   z-index: 6;
   transition: 0.3s;
   margin-bottom: 3.125rem;
   margin-top: 40px;
}

.top-std-card-header {
   display: flex;
   width: 100%;
   text-align: center;
   margin-bottom: 1.25rem;
}

.top-std-card .std-card-image {
   display: flex;
   border-radius: 50%;
   width: 82px;
   height: 82px;
   /* margin-bottom: -33px; */
   margin-top: -55px;
   position: relative;
   text-align: center;
   justify-content: center;
}

.top-std-card .std-card-image img {
   border-radius: inherit;
}

.top-std-card .std-card-name {
   display: flex;
   text-align: center;
   margin-right: 10px;
}

.top-std-card .std-card-det {
   display: flex;
   width: 100%;
   justify-content: space-between;
}

.top-std-card .std-card-det .detail {
   display: flex;
}

.top-std-card .std-card-image::after {
   content: '';
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   background: #ffffff;
   border-radius: 50%;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -2;
   box-shadow: 0 -20px 5px 0 rgba(0, 0, 0, 0.04) inset;
}

.owl-carousel-students .owl-prev, .owl-carousel-students .owl-next {
   position: absolute;
   top: 50%;
   transform: translateY(100%);
}

/* /teacher-top-students-sec */

/* top-scores-sec */

.top-scores-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

.owl-carousel-items.owl-carousel .owl-stage-outer {
   overflow: hidden;
}

.carousel-card {
   position: relative;
   display: flex;
   flex-direction: column;
}

.carousel-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   opacity: .3;
}

.carousel-card .card-image {
   display: flex;
   width: 110px;
   border-radius: 50%;
   border: 4px solid #FFFFFF;
   position: relative;
   margin-bottom: 34px;
   justify-content: center;
   margin-top: 10px;
}

.carousel-card .card-image img {
   border-radius: inherit;
}

.carousel-card .card-image::after {
   content: '';
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   background: linear-gradient(to right, #60B72C, #0179BE);
   border-radius: 50%;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -1;
}

.carousel-card .card-name {
   display: flex;
   margin-bottom: 1rem;
}

.carousel-card .card-sub-name {
   display: flex;
   margin-bottom: 0;
}

.owl-carousel .owl-stage {
   align-items: flex-start;
   justify-content: center;
   display: flex;
}

.owl-carousel-items .owl-item.active.center .carousel-card .card-image {
   width: 225px;
   border: 6px solid #FFFFFF;
}

.owl-carousel-items .owl-item.active.center .carousel-card .card-image::after {
   width: calc(100% + 24px);
   height: calc(100% + 24px);
}

.owl-carousel-items .owl-item.active.medium .carousel-card .card-image {
   width: 170px;
   border: 3px solid #FFFFFF;
}

.owl-carousel-items .owl-item.active.medium .carousel-card .card-image::after {
   width: calc(100% + 16px);
   height: calc(100% + 16px);
}

.owl-carousel-items .owl-item.active.small .carousel-card .card-image {
   width: 120px;
   border: 3px solid #FFFFFF;
}

.owl-carousel-items .owl-item.active.small .carousel-card .card-image::after {
   width: calc(100% + 15px);
   height: calc(100% + 15px);
}

.owl-carousel-items .owl-item.active.medium .carousel-card .carousel-card-inner {
   opacity: .6;
}

.owl-carousel-items .owl-item.active.small .carousel-card .carousel-card-inner {
   opacity: .4;
}

.owl-carousel-items .owl-item.active.center .carousel-card .carousel-card-inner {
   opacity: 1;
}

/* owl-carousel*/

.owl-theme .owl-nav [class*=owl-]:hover {
   background: unset !important;
}

.owl-prev {
   left: -3rem;
}

.owl-next {
   right: -3rem;
}

.owl-carousel-items .owl-prev, .owl-carousel-items .owl-next {
   position: absolute;
   top: 3.937rem;
   transform: translateY(100%);
}

.owl-dots {
   margin-top: 35px !important;
}

.owl-theme .owl-dots .owl-dot span {
   color: #E1E1E1;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
   background: #60B72C;
   width: 12px;
   height: 12px;
   margin: 4px 7px;
}

/* /owl-carousel*/

/* /top-scores-sec */

/* recently-news-sec */

.recently-news-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

.carousel-n-card {
   position: relative;
   display: flex;
   margin-top: 30px;
}

.carousel-n-card-inner {
   display: flex;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, .1);
   border-radius: 24px;
   z-index: 7;
}

.carousel-n-card .card-image {
   display: flex;
   border-radius: 24px;
   justify-content: center;
   padding-right: 1rem;
   width: 278px;
   margin-top: -50px;
   padding-bottom: 1rem;
}

.carousel-n-card .card-image img {
   border-radius: inherit;
}

.carousel-n-card .card-detail {
   display: flex;
   flex-direction: column;
   padding: 1.143rem 1.143rem 1.143rem 2rem;
   width: calc(100% - 278px);
}

.carousel-n-card .card-name {
   margin-bottom: 1.25rem;
   display: flex;
   text-align: start;
}

.carousel-n-card .card-des {
   display: flex;
   margin-bottom: 1.25rem;
}

.carousel-n-card .card-des p {
   display: block;
   font-size: 14px;
   color: #444444;
   font-weight: 300;
   text-align: justify;
   margin-bottom: 0;
}

.carousel-n-card .card-det {
   display: flex;
}

.carousel-n-card .card-det .d-icon {
   display: flex;
   margin-left: 5px;
}

.carousel-n-card .card-det .d-icon .i-date {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/calendar.svg);
   width: 17px;
   height: 17px;
}

.carousel-n-card .card-det .d-text {
   display: inline-flex;
}

.carousel-n-card .card-det .d-text span {
   display: inline-flex;
   font-size: 12px;
   color: #444444;
}

.owl-carousel .owl-stage-outer {
   overflow: unset;
}

.owl-carousel-news .owl-item.active.medium .carousel-n-card-inner {
   opacity: .6;
}

.owl-carousel-news .owl-item.active.medium .carousel-n-card .card-des {
   margin-bottom: 1.25rem;
}

.owl-carousel-news {
   margin-top: 40px;
}

/* /recently-news-sec */

/* why-apex-sec */

.why-apex-sec {
   padding-top: 50px;
   padding-bottom: 10px;
   background: linear-gradient(to bottom, #42B752, #84C54B);
   margin-bottom: 100px;
}

.why-apex-sec .why-apex-img {
   display: flex;
   justify-content: center;
}

.why-apex-sec .why-apex-img img {}

.why-apex-sec .reasons-apex {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 15px;
}

.why-apex-sec .r-apex {
   width: 48%;
   display: flex;
   flex-direction: column;
   padding: 10px 0;
}

.why-apex-sec .r-apex .ra-icon {
   display: flex;
   width: 3.125rem;
   height: 3.125rem;
   margin-bottom: 12px;
}

.why-apex-sec .r-apex .ra-icon img {}

.why-apex-sec .r-apex .ra-title {
   display: flex;
   color: #FFFFFF;
   font-size: 1rem;
   margin-bottom: 1.125rem;
   font-weight: normal;
}

.why-apex-sec .r-apex .ra-des {
   display: flex;
   color: #FFFFFF;
   font-size: 12px;
   margin-bottom: 0;
   font-weight: 300;
}

.why-apex-title {
   display: flex;
   margin-bottom: 1.875rem;
   padding-right: 15px;
}

.why-apex-title .title {
   display: flex;
   color: #FFFFFF;
   font-size: 1.25rem;
   font-weight: 500;
}

/* /why-apex-sec */

/* top-students-sec */

.top-students-sec {
   display: flex;
   margin-bottom: 6.25rem;
   position: relative;
}

.top-students-sec:after {
   content: '';
   width: 7.375rem;
   height: 7.375rem;
   background: #0179BE;
   border-radius: 50%;
   position: absolute;
   top: 35px;
   z-index: -999;
   right: 15px;
   background-size: cover;
}

.top-students-sec:before {
   content: '';
   width: 7.375rem;
   height: 7.375rem;
   background: #60B72C;
   border-radius: 50%;
   position: absolute;
   bottom: -22px;
   z-index: -999;
   left: 35px;
   background-size: cover;
}

.table-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.table-card .t-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 24px rgba(0, 0, 0, .1);
   border-radius: 24px;
   margin-top: 40px;
   z-index: 7;
}

.table-card .t-card-header {
   display: flex;
   justify-content: space-between;
   padding: 1.25rem 1.25rem 0.625rem 1.25rem;
   border-bottom: 1px solid #D7D7D7;
   margin-bottom: 20px;
   width: 100%;
}

.table-card .t-card-header .t-card-th span {
   display: flex;
   color: #D7D7D7;
   font-size: 12px;
}

.table-card .t-card-body {
   display: flex;
   flex-direction: column;
   padding: 0 1.25rem 0.9375rem 1.25rem;
   width: 100%;
}

.table-card .t-card-body .t-card-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 16px;
}

.table-card .t-card-body .t-card-tb {
   display: flex;
}

.table-card .t-card-body .t-card-tb span {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
   text-align: right;
}

.table-card .t-card-title {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   margin-top: -23px;
   margin-bottom: 20px;
}

.table-card .t-card-title::after {
   content: '';
   width: calc(100% + 70px);
   height: calc(100% + 45px);
   background: #ffffff;
   border-radius: 32px;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -2;
   box-shadow: 0 -17px 10px -6px rgba(0, 0, 0, 0.04) inset;
}

/* /top-students-sec */

/* testimonial-sec */

.testimonial-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

.owl-carousel-testimonial.owl-carousel .owl-stage-outer {
   overflow: hidden;
}

.carousel-t-card {
   position: relative;
   display: flex;
   border-radius: 35px;
   background: linear-gradient(to bottom, #EBF7ED, #3EB652);
   padding: 5px;
   width: 150px;
   max-height: 160px;
   width: 173px;
   opacity: 0.3;
}

.carousel-t-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: space-between;
   align-items: flex-start;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, .1);
   border-radius: 35px;
   z-index: 7;
   padding: 20px;
}

.carousel-t-card .card-name {
   margin-bottom: 10px;
   display: flex;
}

.carousel-t-card .card-des {
   display: flex;
   margin-bottom: 0;
}

.carousel-t-card .card-des p {
   display: block;
   font-size: 0.929rem;
   color: #444444;
   font-weight: 300;
   text-align: justify;
   margin-bottom: 0;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   white-space: normal;
   overflow: hidden;
}

.carousel-t-card .card-name:before {
   content: '';
   width: 3px;
   height: 1.5625rem;
   background-color: #0179BE;
   border-radius: 3px;
   margin-left: 7px;
}

.owl-carousel-testimonial .owl-item.active.center .carousel-t-card {
   opacity: 1;
   width: 276px;
   min-height: 253px;
}

.owl-carousel-testimonial .owl-item.active.medium .carousel-t-card {
   opacity: .6;
   width: 225px;
   min-height: 207px;
}

.owl-carousel-testimonial .owl-item.active.small .carousel-t-card {
   opacity: .4;
   width: 175px;
   min-height: 162px;
}

.owl-carousel-testimonial .owl-item.active.center .carousel-t-card .card-des p {
   -webkit-line-clamp: 5;
}

.owl-carousel-testimonial .owl-item.active.medium .carousel-t-card .card-des p {
   -webkit-line-clamp: 4;
}

.owl-carousel-testimonial .owl-item.active.small .carousel-t-card .card-des p {
   -webkit-line-clamp: 2;
}

/* /testimonial-sec */

/* blog-sec */

.blog-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

.view-all {
   display: flex;
   align-items: center;
   justify-content: center;
}

.blog-card {
   display: flex;
   flex-direction: column;
   position: relative;
   margin-bottom: 2.125rem;
}

.blog-card a {
   display: flex;
   flex-direction: column;
}

.blog-card .card-detail a {
   display: inline-flex;
   flex-direction: row;
}

.blog-card .card-img {
   border-radius: 26px;
   /* position: absolute; */
   /* bottom: calc(100% - 57px); */
   /* top: 100%; */
   /* z-index: -1; */
}

.blog-card .card-img .blur-img {
   height: 31.25rem;
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   border-radius: 26px;
}

.blog-card .card-img .blur-img .main-img {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   border-radius: 26px;
}

.blog-card .card-img .blur-img .main-img img {
   width: 60%;
   border-radius: inherit;
}

.blog-card .card-img img {
   border-radius: inherit;
}

.blog-card .card-detail {
   display: flex;
   width: calc(100% - 20px);
   flex-direction: column;
   background: #FFFFFF;
   box-shadow: 1px 2px 30px 0 rgba(0, 0, 0, .1);
   border-radius: 10px 0 10px 10px;
   padding: 1.25rem;
   position: absolute;
   top: 75%;
   right: 0;
}

.blog-card .card-detail .card-d {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 1rem;
}

.blog-card .card-d .date {
   display: flex;
   margin-bottom: .25rem;
}

.blog-card .card-d .date .i-date {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/calendar.svg);
   width: 17px;
   height: 17px;
   margin-left: 4px;
}

.blog-card .card-d .date span {
   display: flex;
   color: #444444;
   font-size: 12px;
   margin-left: 7px;
}

.blog-card .card-d .cat {
   display: flex;
   margin-bottom: 0.25rem;
}

.blog-card .card-d .cat span {
   display: flex;
   color: #D7D7D7;
   font-size: 12px;
}

.blog-card .card-detail .card-title {
   margin-bottom: 1.25rem;
   display: flex;
   position: relative;
   transition: 0.3s;
}

.blog-card .card-detail .card-des {
   display: flex;
}

.blog-card .card-detail .card-des p {
   font-size: 1rem;
   color: #444444;
   font-weight: 300;
   text-align: justify;
   margin-bottom: 0;
   overflow: hidden;
   width: calc(100% - 20px);
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   white-space: normal;
}

.blog-card .card-detail .card-title:before {
   content: none;
   position: absolute;
   right: 0;
   width: 4px;
   height: 100%;
   background-color: #0179BE;
}

.blog-card:hover .card-detail .card-title:before {
   content: '';
}

.blog-card:hover .card-detail .card-title {
   padding-right: 15px;
}

/* /blog-sec */

/* blog-sgl */

.blog-header {
   display: flex;
   margin-bottom: 1rem;
}

.blog-header .title {
   font-size: 1.125rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
}

.blog-body {
   display: flex;
   flex-direction: column;
}

.blog-item {
   display: flex;
   margin-bottom: 1.786rem;
   align-items: center;
}

.blog-item .word-hld {
   display: inline-flex;
   margin-left: 1rem;
   position: relative;
}

.blog-item .word {
   font-size: 1.125rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
   margin-right: 24px;
}

.blog-item .des {
   display: inline-flex;
}

.blog-item .des p {
   font-size: 1rem;
   color: #444444;
   font-weight: 300;
   display: inline-flex;
   text-align: justify;
}

.blog-item .word-hld::after {
   content: '';
   background: #006494;
   width: 12px;
   height: 12px;
   background-size: contain;
   position: absolute;
   right: 0;
   top: 6px;
   border-radius: 3px;
}

.post-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.post-footer .taglist .tag-title {
   font-size: 1rem;
   color: #444444;
   font-weight: 500;
}

.post-footer .taglist .tagitem a {
   color: #444444;
   font-weight: 300;
   font-size: 0.875rem;
   transition: 0.3s;
}

.post-footer .taglist .tagitem:not(:last-child)::after {
   content: "،";
   color: rgb(116, 138, 157);
   font-weight: 300;
   font-size: 14px;
   margin-right: 3px;
}

.post-footer .share-cm {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   left: 0;
}

.post-footer .share-cm ul {
   display: flex;
   list-style: none;
   padding: 9px 10px;
   background-color: #fff;
   border-radius: 10px;
   margin: 0;
}

.post-footer .share-cm ul li:not(:last-child) {
   margin-left: 10px;
}

.post-footer .share-cm ul li a {
   display: flex;
   width: 32px;
   height: 32px;
   transition: 0.3s;
}

.post-footer .share-cm .cm-link-copy a {
   background: url(../img/aparat-share.svg) no-repeat center center /cover;
}

.post-footer .share-cm .telegram a {
   background: url(../img/telegramH.svg) no-repeat center center /cover;
}

.post-footer .share-cm .whatsapp a {
   background: url(../img/insta-share.svg) no-repeat center center /cover;
}

.post-footer .share-cm .twitter a {
   background: url(../img/twitter-share.svg) no-repeat center center /cover;
}

.blog-item-inner {
   display: flex;
   margin-bottom: 2.438rem;
   align-items: center;
   padding-right: 3.75rem;
}

.blog-item-inner .word-hld {
   display: inline-flex;
   margin-left: 1rem;
   position: relative;
}

.blog-item-inner .des {
   display: inline-flex;
}

.blog-item-inner .word {
   font-size: 1rem;
   color: #444444;
   font-weight: 500;
   display: inline-flex;
   margin-right: 1rem;
}

.blog-item-inner .des p {
   font-size: 0.875rem;
   color: #444444;
   font-weight: 300;
   display: inline-flex;
   text-align: justify;
}

.blog-item-inner .word-hld::after {
   content: '';
   background-color: #E5E5E5;
   width: 10px;
   height: 10px;
   background-size: contain;
   position: absolute;
   right: 0;
   top: 6px;
   border-radius: 3px;
}

.blog-sec .blog-card .card-img {
   margin-bottom: -60px;
}

.blog-sec .blog-card .card-detail {
   position: relative;
   min-height: 200px;
}

.blog-sec .blog-category {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 0.5rem 0;
}

.blog-category ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin-bottom: 0;
   overflow: auto;
   scrollbar-visibility: hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.blog-category ul li:not(:last-child) {
   margin-left: 1.5rem;
}

.blog-category ul li a {
   color: #444444;
   transition: 0.3s;
   white-space: nowrap;
   font-size: 1.125rem;
   font-width: 300;
}

.blog-category ul li a:before {
   content: '#';
   margin-left: 5px;
}

.comment-blog {
   display: flex;
   margin-bottom: 6.25rem;
}

.comment-blog .pb-btn-hld {
   display: flex;
   justify-content: flex-end;
}

.owl-carousel-cmt-students .owl-prev, .owl-carousel-cmt-students .owl-next {
   position: absolute;
   bottom: 140px;
   transform: translateY(100%);
}

.sgl-blog-det {
   display: flex;
   margin-right: auto;
}

.sgl-blog-det .cmt {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
   align-items: center;
}

.sgl-blog-det .cmt .i-cmt {
   background: url(../img/cmt-blog.svg) no-repeat center center /cover;
   width: 1rem;
   height: 1rem;
   margin-left: 0.5rem;
}

.sgl-blog-det .date {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
   margin-left: 1.875rem;
   align-items: center;
}

.sgl-blog-det .date .i-date {
   background: url(../img/calender-blog.svg) no-repeat center center /cover;
   width: 1rem;
   height: 1rem;
   margin-left: 0.5rem;
}

.sgl-blog-cat {
   display: flex;
   margin-bottom: 1.429rem;
}

.sgl-blog-cat a {
   font-size: 0.875rem;
   color: #A1A1A1;
}

.ul-hld {
   display: flex;
}

.ul-hld ul {
   display: flex;
   flex-direction: column;
}

.ul-hld ul li {
   display: inline-block;
   margin-bottom: 1.429rem;
   position: relative;
}

.ul-hld ul li span {
   font-size: 1.125rem;
   color: #444444;
   font-weight: 500;
   display: inline;
   margin-right: 24px;
   margin-left: 1rem;
   position: relative;
   height: 100%;
   line-height: 100%;
   min-height: 100%;
}

.ul-hld ul li::after {
   content: '';
   background: #006494;
   width: 12px;
   height: 12px;
   background-size: contain;
   position: absolute;
   right: 0;
   top: 10px;
   border-radius: 3px;
}

.ul-hld ul li p {
   font-size: 1rem;
   color: #444444;
   font-weight: 300;
   display: inline;
   text-align: justify;
   margin-bottom: 0;
}

.ul-hld ul li ul {
   display: flex;
   flex-direction: column;
   padding-right: 3.75rem;
   margin-top: 1.429rem;
}

.ul-hld ul li ul li {
   display: inline-block;
   margin-bottom: 2.438rem;
   position: relative;
}

.ul-hld ul li ul li span {
   font-size: 1rem;
   color: #444444;
   font-weight: 500;
   display: inline;
   margin-right: 1rem;
}

.ul-hld ul li ul li p {
   font-size: 0.929rem;
   color: #444444;
   font-weight: 300;
   display: inline;
   text-align: justify;
}

.ul-hld ul li ul li::after {
   content: '';
   background-color: #E5E5E5;
   width: 10px;
   height: 10px;
   background-size: contain;
   position: absolute;
   right: 0;
   top: 10px;
   border-radius: 3px;
}

/* /blog-sgl */

/* aboutus-sec */

.aboutus-sec {
   display: flex;
   margin-bottom: 5.25rem;
   position: relative;
}

.aboutus-sec .hp-main-header {
   justify-content: flex-start;
}

.aboutus-sec:after {
   content: '';
   height: 350px;
   background: linear-gradient(to top, #42B752, #84C54B);
   position: absolute;
   bottom: 0;
   z-index: -999;
   right: 0;
   left: 0;
   bottom: 90px;
   background-size: cover;
}

.aboutus-sec .in-list {
   display: flex;
   flex-direction: column;
   margin-top: 6.25rem;
}

.aboutus-sec .in-list .info {
   display: flex;
   margin-bottom: 3.125rem;
}

.aboutus-sec .in-list .in-tg {
   display: flex;
   color: #FFFFFF;
   font-size: 12px;
   font-weight: 300;
   margin-bottom: 5px;
}

.aboutus-sec .in-list .in-vl {
   display: flex;
   color: #FFFFFF;
   font-size: 1rem;
   font-weight: 300;
}

.aboutus-sec .in-list .info-det {
   display: flex;
   flex-direction: column;
}

.aboutus-sec .in-list .icon {
   display: flex;
}

.aboutus-sec .in-list .icon:before {
   content: '';
   background-repeat: no-repeat;
   background-size: cover;
   width: 3.125rem;
   height: 3.125rem;
   margin-left: 1rem;
   display: inline-block;
   vertical-align: middle;
}

.aboutus-sec .in-list .icon.i-call:before {
   background-image: url(../img/call.svg);
}

.aboutus-sec .in-list .icon.i-email:before {
   background-image: url(../img/email.svg);
}

.aboutus-sec .in-list .icon.i-address:before {
   background-image: url(../img/location.svg);
}

.aboutus-sec .form-box {
   display: flex;
   flex-direction: column;
   /* margin-top: 116px; */
   padding: 3.125rem 1.25rem 1.25rem 1.25rem;
   margin-bottom: 0.9375rem;
   border-radius: 26px;
   background: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.1);
}

.aboutus-sec .form-box form {
   display: flex;
}

.aboutus-sec .form-box form .f-group-view {
   display: flex;
   flex-direction: column;
   width: 100%;
   margin-bottom: 1.25rem;
}

.aboutus-sec .form-box form .f-group-view label {
   display: inline-block;
   margin-left: 1.25rem;
   font-size: 12px;
   font-weight: 300;
   color: #444444;
   white-space: nowrap;
   margin-bottom: 1rem;
}

.aboutus-sec .form-box form .f-group-view input {
   display: inline-block;
   line-height: 3rem;
   background: #ffffff;
   color: #444444;
   font-size: 14px;
   border-radius: 12px;
   padding: 0 3.125rem 0 12px;
   width: 100%;
   outline: none;
   border: 1px solid #D7D7D7;
}

.aboutus-sec .form-box form .f-group-view textarea {
   display: inline-block;
   line-height: 3rem;
   background: #ffffff;
   color: #444444;
   font-size: 14px;
   border-radius: 12px;
   padding: 0 12px;
   width: 100%;
   outline: none;
   border: 1px solid #D7D7D7;
}

.aboutus-sec .form-box form .f-group-view input:focus, .aboutus-sec .form-box form .f-group-view textarea:focus {
   border-color: #60B72C;
}

.aboutus-sec .form-box form .f-group-view .icon {
   display: inline-block;
   margin-left: 1.0625rem;
   position: relative;
}

.aboutus-sec .form-box form .f-group-view .icon:after {
   content: ' ';
   background-repeat: no-repeat;
   background-size: contain;
   display: inline-block;
   vertical-align: middle;
   position: absolute;
   right: 12px;
   bottom: 12px;
}

.aboutus-sec .form-box form .f-group-view .i-pro:after {
   background-image: url(../img/f-pro.svg);
   width: 24px;
   height: 24px;
}

.aboutus-sec .form-box form .f-group-view .i-mail:after {
   background-image: url(../img/f-mail.svg);
   width: 24px;
   height: 24px;
}

.aboutus-sec .form-box form .f-group-view .i-call:after {
   background-image: url(../img/f-phone.svg);
   width: 24px;
   height: 24px;
}

.aboutus-sec .form-box form .pb-btn {
   margin: auto;
   width: unset;
   margin-top: 10px;
}

.aboutus-sec .form-box form .pb-btn a {
   padding: 0 10px;
}

.pb-btn .i-send {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/send.svg);
   min-width: 44px;
   height: 44px;
   margin: 2px;
}

/* /aboutus-sec */

/* representatives-sec */

.representatives-sec {
   display: flex;
   margin-bottom: 6.25rem;
}

.representatives-sec .hp-main-header {
   justify-content: flex-start;
}

.search-group {
   display: flex;
   justify-content: space-between;
   position: relative;
   background: #fff;
   padding: 1rem 0;
}

.input-search {
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
}

.input-search input {
   display: inline-block;
   line-height: 3rem;
   background: #ffffff;
   color: #444444;
   padding: 0px 13px;
   font-weight: 200;
   width: 100%;
   border-radius: 24px;
   outline: none;
   border: 1px solid #D7D7D7;
}

.search-group .pb-btn {
   position: absolute;
   left: 0;
   width: 120px;
}

.search-group:after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 90%;
   height: 35px;
   background-color: #E1DADA;
   filter: blur(20px);
   z-index: -1;
}

.list-city {
   display: flex;
   /* background: #FFFFFF; */
   max-height: 300px;
   overflow-y: scroll;
   margin-top: 42px;
   direction: ltr;
}

.no-result {
   display: none;
}

.list-city ul {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding: 0 20px;
   direction: rtl;
}

.list-city ul li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 18px;
   position: relative;
   cursor: pointer;
}

.list-city ul li .name {
   display: flex;
   font-weight: 300;
   font-size: 14px;
   color: #444444;
   margin-right: 26px;
}

.list-city ul li .num {
   display: flex;
   font-size: 14px;
   color: #444444;
}

.list-city ul li:before {
   content: '';
   position: absolute;
   right: 0;
   width: 10px;
   height: 10px;
   border-radius: 10px;
   background-color: #0179BE;
}

.list-city::-webkit-scrollbar {
   width: 5px;
}

.list-city::-webkit-scrollbar-track {
   background: #FFFF;
   border-radius: 5px;
}

.list-city::-webkit-scrollbar-thumb {
   background: #EEEEEE;
   border-radius: 5px;
}

.list-city input::-webkit-outer-spin-button, .list-city input::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none !important;
   margin: 0;
}

.search-group .city-name {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto;
}

.search-group .city-name .name {
   display: flex;
   color: #444444;
   font-size: 1.125rem;
}

.search-group .back {
   position: relative;
   display: flex;
   align-items: center;
}

.search-group .back a {}

.search-group .i-back {
   display: flex;
   align-items: center;
}

.search-group .i-back:before {
   content: '';
   width: 20px;
   height: 13px;
   display: inline-block;
   vertical-align: middle;
   background: url(../img/back.svg) no-repeat center center / cover;
   margin-right: 2.25rem;
}

.representatives-sec .in-list {
   display: flex;
   flex-direction: column;
   margin-top: 3.875rem;
}

.representatives-sec .in-list .info {
   display: flex;
   margin-bottom: 1.875rem;
}

.representatives-sec .in-list .in-tg {
   display: flex;
   color: #444444;
   font-size: 12px;
   font-weight: 300;
   margin-bottom: 5px;
}

.representatives-sec .in-list .in-vl {
   display: flex;
   color: #444444;
   font-size: 1rem;
}

.representatives-sec .in-list .info-det {
   display: flex;
   flex-direction: column;
}

.representatives-sec .in-list .icon {
   display: flex;
}

.representatives-sec .in-list .icon:before {
   content: '';
   background-repeat: no-repeat;
   background-size: cover;
   width: 3.125rem;
   height: 3.125rem;
   margin-left: 1rem;
   display: inline-block;
   vertical-align: middle;
}

.representatives-sec .in-list .icon.i-call:before {
   background-image: url(../img/telephone.svg);
}

.representatives-sec .in-list .icon.i-email:before {
   background-image: url(../img/i-email.svg);
}

.representatives-sec .in-list .icon.i-address:before {
   background-image: url(../img/i-address.svg);
}

.representatives-sec .map {
   display: flex;
   width: auto;
   margin-right: auto;
}

.representatives-sec .map path {
   fill: #ECECEC;
}

.representatives-sec .map path.selected {
   fill: #81C246;
}

#map1 {
   position: relative;
   background: #ffff;
}

#map1:after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: 100%;
   height: 80px;
   background-color: #FFFFFF;
   opacity: 0.6;
}

#map1.searching:after {
   content: none;
}

#map2 {
   display: none;
}

/* /representatives-sec */

/* main-footer */

.main-footer {
   display: flex;
   flex-direction: column;
   padding-bottom: 1.857rem;
   background: linear-gradient(to left, #5FB62E, #1A4694);
   margin-top: 6.071rem;
}

.main-footer.dashboard-footer {
   padding-bottom: 2.429rem;
}

.main-footer .footer-wrapper {
   margin-top: -6.071rem;
}

.main-footer.dashboard-footer .footer-wrapper {
   margin-top: -2rem;
}

.main-footer-bg {
   display: flex;
   background-color: #F2F2F2;
   border-radius: 20px 20px 0 0;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding: 0 2.857rem;
}

.menu-footer {
   display: flex;
   align-items: center;
}

.main-footer .main-logo-holder {
   display: inline-block;
   margin-left: 3.5625rem;
}

.main-footer .main-logo-holder a {
   display: inline-block;
   width: 127px;
}

.main-footer .main-logo-holder a img {
   display: inline-block;
}

.footer-links {
   display: flex;
}

.footer-links ul {
   display: flex;
}

.footer-links ul li {
   display: flex;
   margin-left: 2.5rem;
}

.footer-links ul li a {
   display: flex;
   color: #444444;
   font-size: 1.143rem;
   font-weight: 300;
}

.trusted-logo {
   display: flex;
   padding: 1.5rem 0 1rem 0;
}

.tr-logo {
   display: flex;
   background: #FFFFFF;
   width: 80px;
   height: 80px;
}

.tr-logo:not(:last-child) {
   margin-left: 1.429rem;
}

.copyright {
   display: flex;
   background-color: #EBE9E9;
   justify-content: space-between;
   text-align: center;
   align-items: center;
   min-height: 40px;
   flex-wrap: wrap;
   border-radius: 0 0 20px 20px;
   padding: 1.143rem 2.857rem;
}

.dashboard-footer .copyright {
   border-radius: 20px;
}

.copyright p {
   display: block;
   color: #444444;
   font-size: 14px;
   font-weight: 300;
   margin-bottom: 0;
   /* margin-left: 10px; */
   text-align: start;
}

.copyright ul {
   display: flex;
}

.copyright ul li {
   float: right;
   /* margin: 0 10px; */
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.copyright ul li:not(:last-child) {
   margin-left: 1.429rem;
}

.gotop {
   position: fixed;
   display: none;
   bottom: 20px;
   right: 15px;
   cursor: pointer;
   z-index: 999;
}

.gotop a {
   display: inline-flex;
   width: 3.429rem;
   height: 3.429rem;
   background-image: linear-gradient(to top, #39B7FF, #0179BE);
   box-shadow: 0 3px 10px 0 #0179BE;
   border-radius: 50%;
   position: relative;
}

.gotop a::after {
   content: "";
   width: 1.714rem;
   height: 1rem;
   background-image: url(../img/scroll-arrow.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   position: absolute;
   right: 0;
   left: 0;
   bottom: 0;
   top: 0;
   margin: auto;
}

rem
/* /main-footer */

/* teacher-course-sec */

.teacher-course-sec {
   display: flex;
   margin-bottom: 6.25rem;
}

.c-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 15px 0;
}

.c-card .c-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   border-radius: 24px;
   transition: 0.3s;
}

.c-card .course-img {
   position: relative;
   width: 100%;
   height: auto;
   transition: .3s ease;
   backface-visibility: hidden;
   border-radius: inherit;
}

.c-card .course-img img {
   border-radius: inherit;
}

.c-card .over {
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: inherit;
   padding: 1rem;
   background-color: #FFFFFF;
   border-radius: inherit;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   opacity: 0.86;
   height: 5rem;
}

.c-card .over .title-hld {
   display: flex;
}

.c-card .over .title-hld span {
   display: flex;
   color: #0179BE;
   font-size: 1rem;
   font-weight: 500;
}

.info-btn {
   display: flex;
   border-radius: 8px;
   color: #FFFF;
   justify-content: center;
   align-items: center;
   /*width: 100%;*/
   position: relative;
   background: linear-gradient(to right, #0674B8, #31408E);
   line-height: 2.25rem;
}

.info-btn span {
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   font-size: .875rem;
   height: 100%;
   padding: 0 1.875rem;
   white-space: nowrap;
}

/* /teacher-course-sec */

/* course */

.filter .group .bootstrap-select>.dropdown-toggle {
   color: #979797;
   background: unset;
   border: unset !important;
   outline: none !important;
   font-size: 0.875rem;
   margin-bottom: 2px;
   padding: 0;
   box-shadow: unset !important;
}

.t-profile {
   padding: 4px 10px 4px 4px;
}

.filters-menu-sec, .filters-teacher-sec {
   display: flex;
   margin-bottom: 4.375rem;
}

.filters-teacher-sec .card-bg:after {
   height: 60%;
}

.filters-menu-sec .t-profile {
   margin-top: 0;
   padding: 4px 10px 4px 4px;
}

.filter {
   display: flex;
   align-items: center;
   border-left: 1px solid #EFEFEF;
   padding-left: 2.5rem;
   padding-right: 1.375rem;
}

.filter:first-child {
   padding-right: 0;
}

.filter:last-child {
   width: unset;
   border-left: unset;
   padding-left: 0;
}

.filter:nth-last-child(2) {
   border-left: unset;
   width: 100%;
   padding-left: 0;
}

.filter .icon {
   display: flex;
}

.filter .icon:before {
   content: '';
   background-repeat: no-repeat;
   background-size: cover;
   margin-left: 1.5rem;
   display: inline-block;
   vertical-align: middle;
}

.filter .i-teacher:before {
   background-image: url(../img/i-profile.svg);
   width: 29px;
   height: 32px;
}

.filter .i-lesson:before {
   background-image: url(../img/lesson.svg);
   width: 30px;
   height: 30px;
}

.filter .group .bootstrap-select {
   width: auto !important;
}

.filter .i-grade:before {
   background-image: url(../img/grade.svg);
   width: 30px;
   height: 30px;
}

.filter .i-course:before {
   background-image: url(../img/i-course.svg);
   width: 32px;
   height: 32px;
}

.filter .group {
   display: flex;
   flex-direction: column;
}

.filter .group .label {
   display: flex;
   color: #444444;
   font-size: 1.125rem;
   margin-bottom: 2px;
   position: relative;
   cursor: pointer;
}

.filter .group .dropdown.custom {}

.filter .group .dropdown.custom .dropdown-toggle {
   display: flex;
   color: #979797;
   font-size: 0.875rem;
   margin-bottom: 2px;
}

.filter .group .dropdown.custom ul {
   display: none;
   flex-direction: column;
   background-color: #fff;
   box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
   border: 1px solid #D7D7D7;
   min-width: 180px;
   width: fit-content;
   border-radius: 10px;
   text-align: right;
   padding: 3px 0;
   z-index: 999;
}

.filter .group .dropdown.custom ul.show {
   position: absolute;
   display: flex;
   top: 0 !important;
   right: -4.375rem;
   transform: unset !important;
   margin-top: 2.2rem;
}

.filter .group .dropdown.custom ul li {
   display: inline-flex;
   align-items: center;
   margin: 0;
   padding: 7px 20px;
   cursor: pointer;
   color: #444444;
}

.filter .group .dropdown ul li a {
   white-space: nowrap;
   color: #444444;
   font-size: 0.875rem;
   font-weight: normal;
}

.filter .group .dropdown .dropdown-toggle::after {
   border: unset;
   background-image: url(../img/Arrow-Down2.svg);
   background-repeat: no-repeat;
   width: 12px;
   height: 7px;
   left: -1.25rem;
   top: 0;
   bottom: 0;
   margin: auto 0;
   position: absolute;
   z-index: 11;
}

.filter .group.dropdown-toggle::after {
   content: none;
}

.main-content .wrapper .dashboard-filters .pb-btn {
   border-radius: 16px;
   height: 100%;
   margin: auto;
}

.filter .pb-btn {
   border-radius: 16px;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder.f-cbs, .bootstrap-select>.dropdown-toggle.bs-placeholder.f-cbs:active, .bootstrap-select>.dropdown-toggle.bs-placeholder.f-cbs:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder.f-cbs:hover {
   color: #979797;
   font-size: 0.875rem;
   margin-bottom: 2px;
   background-color: unset;
   border: unset;
   outline: unset !important;
   box-shadow: unset;
   padding: 0;
}

.f-cbs~.dropdown-menu {
   top: 100% !important;
   right: -4.375rem;
   background-color: #fff;
   box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
   border: 1px solid #D7D7D7;
   min-width: 180px;
   width: fit-content;
   border-radius: 10px;
   text-align: right;
   padding: 3px 0;
   z-index: 999;
   transform: unset !important;
   margin-top: 1.375rem;
}

.bootstrap-select .dropdown-toggle.f-cbs .filter-option {
   text-align: right;
}

.filter .search-holder {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: 0.3s;
   border-radius: 20px;
}

.filter .search-holder input {
   border: none;
   line-height: 50px;
   width: 100%;
   padding: 0 35px 0 10px;
   display: flex;
   font-size: 14px;
   font-weight: 300;
   align-items: center;
   justify-content: space-between;
   transition: 0.3s;
   border-radius: 10px;
}

.filter:hover input, .filter input:focus {
   background-color: #F0F4F8;
}

.filter .search-holder::after {
   content: '';
   background-image: url(../img/search.svg);
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   position: absolute;
   right: 10px;
}

.g-card-image {
   display: flex;
   border-radius: 35px;
   /* border: 3px solid #FFFFFF; */
   position: relative;
   margin-top: -80px;
   margin-bottom: 22px;
   justify-content: center;
}

.s-card .g-card-image::after {
   content: '';
   width: calc(100% + 16px);
   height: calc(100% + 16px);
   background: linear-gradient(to bottom, #EAF9FE, #60B72C);
   border-radius: inherit;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -1;
}

.g-card-image a {
   border-radius: inherit;
}

.g-card-image img {
   border-radius: inherit;
   border: 3px solid #FFFFFF;
}

/* /course */

/* login */

.cbs~.dropdown-menu {
   top: 100% !important;
   /* right: -85px; */
   background-color: #fff;
   box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.1);
   border: 1px solid #D7D7D7;
   /* min-width: 180px; */
   /* width: fit-content; */
   border-radius: 10px;
   text-align: right;
   padding: 3px 0;
   z-index: 999;
   transform: unset !important;
   margin-top: 10px !important;
   max-height: 276px !important;
}

.login-sec {
   display: flex;
   position: relative;
   background-position: center;
   min-height: 100vh;
   width: 100%;
   background-repeat: repeat;
   background-color: #F2F2F2;
}

.login-sec .userpanel {
   width: 100%;
   background: #fff;
   /* padding: 1.25rem 2.5rem; */
   border-radius: 26px;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.1);
   max-width: 450px;
   flex-direction: column;
   display: flex;
   margin: 154px auto 85px auto;
   position: relative;
   /* padding-bottom: 1.25rem; */
}

.login-sec .header {
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
   position: relative;
   align-items: center;
   overflow: hidden;
   border-radius: 26px 26px 0 0;
   height: 5rem;
}

.login-sec .header .logo-holder {
   display: flex;
   margin: 0 auto;
   width: 8rem;
}

.login-sec .back-HP-holder {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.login-sec .header .back-HP-holder a {
   background-image: url(../img/back.svg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 20px;
   height: 14px;
   position: absolute;
   right: 2.25rem;
}

.login-sec .content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 2.5rem;
   padding-bottom: 1.25rem;
   position: relative;
   overflow: hidden;
   border-radius: 0 0 26px 26px;
}

.login-sec .pb-btn a {
   padding: 0 3.5625rem;
}

.log-btn {
   display: flex;
   justify-content: center;
   margin-top: 1.5625rem;
}

.login-sec .footer {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 5px;
   position: relative;
   overflow: hidden;
   padding-bottom: 1.25rem;
   border-radius: 0 0 26px 26px;
}

.login-sec .header:before {
   content: '';
   width: 8.75rem;
   height: 8.75rem;
   background: #0179BE;
   border-radius: 50%;
   position: absolute;
   top: -4rem;
   left: -4rem;
   background-size: cover;
   z-index: 2;
}

.login-sec .inner-log {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 8px;
   padding: 0 1.25rem;
}

.login-sec .inner-log .link {}

.login-sec .inner-log .link a {
   font-size: 0.75rem;
   color: #444444;
   display: inline-flex;
}

.inner .checkbox-group label {
   margin-bottom: 0;
}

.login-sec .form-group.invalid~.inner-log .checkbox-group {
   display: none;
}

.inner-footer {
   display: inline-flex;
   align-items: center;
}

.inner-footer button {
   background-color: transparent;
   border: none;
}

.input-hlr-pwd {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.input-hlr-pwd label {
   font-size: 0.875rem;
   font-weight: 300;
   margin-bottom: 1rem;
   color: #444444;
   display: inline-flex;
}

.input-hlr-pwd .input-pwd {
   display: flex;
   flex-direction: row-reverse;
   margin: 0 auto;
}

.input-hlr-pwd input {
   text-align: center;
   font-size: 1.375rem;
   color: #444444;
   border-radius: 14px;
   display: flex;
   border: 2px solid #D7D7D7;
   width: 3rem;
   line-height: 2.75rem;
   margin: 0 5px;
}

.input-hlr-pwd input:focus {
   border-color: #60B72C;
}

.label-checkbox {
   font-size: 0.875rem;
   color: #444444;
   display: inline-flex;
   margin-bottom: 1rem;
}

.acquaintance {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

/*.login-sec .footer:before{
    content: '';
    width: 8.75rem;
    height: 8.75rem;
    background: #60B72C;
    border-radius: 50%;
    position: absolute;
    bottom: -4rem;
    right: -4rem;
    background-size: cover;
    z-index: 2;
}*/

.login-sec.register .content:after {
   content: '';
   width: 8.75rem;
   height: 8.75rem;
   background: #D7D7D7;
   border-radius: 50%;
   position: absolute;
   z-index: 0;
   top: 180px;
   left: 94%;
   background-size: cover;
}

.login-sec.register .content:before {
   content: '';
   width: 8.75rem;
   height: 8.75rem;
   background: #60B72C;
   border-radius: 50%;
   position: absolute;
   z-index: 1;
   bottom: -4rem;
   right: -4rem;
   background-size: cover;
}

.login-sec.register .userpanel:after {
   content: '';
   width: 8.75rem;
   height: 8.75rem;
   background: #D7D7D7;
   border-radius: 50%;
   position: absolute;
   bottom: -4rem;
   z-index: 0;
   right: -4rem;
   background-size: cover;
}

.login-sec .userpanel:before {
   content: '';
   width: 8.75rem;
   height: 8.75rem;
   background: #D7D7D7;
   border-radius: 50%;
   position: absolute;
   top: -4rem;
   z-index: 0;
   left: -4rem;
   background-size: cover;
}

.cbs~.dropdown-menu ::-webkit-scrollbar {
   width: 8px;
}

.cbs~.dropdown-menu ::-webkit-scrollbar-track {
   background: #D7D7D7;
   border-radius: 5px;
}

.cbs~.dropdown-menu ::-webkit-scrollbar-thumb {
   background: #60B72C;
   border-radius: 5px;
}

.cbs~.dropdown-menu .inner.show {
   margin-top: 20px;
   margin-left: 20px;
   max-height: 160px !important;
}

/* /login */

/* teacher-video-sec */

.teacher-video-sec {
   display: flex;
   margin-bottom: 3.75rem;
}

.v-card {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 228px;
   margin-bottom: 2.5rem;
}

.v-card a {
   display: flex;
   width: 100%;
   height: 100%;
}

.v-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.07);
   border-radius: 26px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.v-card-inner .over {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: rgba(69, 111, 149, 0.7);
   border-radius: 26px;
   overflow: hidden;
   transition: 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

.v-card-inner .over .title-hld {
   display: flex;
}

.v-card-inner .over .title-hld .title {
   display: inline-flex;
   color: #FFFFFF;
   font-size: 18px;
   font-weight: 500;
}

.v-card-inner .over .card-icon {
   display: flex;
   width: 56px;
   height: 56px;
   text-align: center;
   margin-bottom: 0.75rem;
   background: #fff;
   border-radius: 25px;
   padding: 5px;
}

.v-card-inner .over .card-icon img {}

.v-card-inner .over .v-card-det {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   margin-right: 0.625rem;
}

.v-card-inner .over .v-inner-over {
   display: flex;
   background: #ffffff;
   border-radius: 28px;
   padding-left: 3.125rem;
}

.v-card-inner .over .v-inner-over .card-icon {
   margin-bottom: 0;
}

.v-card-inner .over .v-card-det .v-d {
   margin-bottom: 5px;
}

/* /teacher-video-sec */

/* teacher-pro-sec */

.teacher-pro-sec {
   display: flex;
   margin-bottom: 2.812rem;
   position: relative;
}

.t-image {
   display: flex;
   width: calc(100% - 15px);
   border-radius: 35px;
   position: relative;
   margin-top: 13px;
   justify-content: center;
}

.t-image::after {
   content: '';
   width: calc(100% + 42px);
   height: calc(100% + 42px);
   background: linear-gradient(to bottom, #EAF9FE, #21C3FC);
   border-radius: inherit;
   position: absolute;
   bottom: 0;
   top: 0;
   margin: auto;
   z-index: -1;
}

.t-image img {
   border-radius: inherit;
   border: 8px solid #ffffff;
}

.t-profile {
   display: flex;
   position: relative;
   width: 100%;
   margin-bottom: 2.5rem;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 24px;
   padding: 0.75rem 2.5rem;
   z-index: 7;
   transition: 0.3s;
}

.teacher-pro-sec .t-profile {
   margin-bottom: 2.5rem;
   margin-top: 50px;
}

.t-profile .t-img {
   display: flex;
   border-radius: 50%;
   justify-content: center;
   min-width: 60px;
   width: 60px;
   margin-left: 1.25rem;
}

.t-profile .t-img img {
   border-radius: 50%;
}

.t-name-info {
   display: flex;
   flex-direction: column;
   border-left: 1px solid #D7D7D7;
   padding-left: 20px;
}

.t-name-info .name {
   display: flex;
   color: #444444;
   font-size: 1rem;
   margin-bottom: 10px;
   white-space: nowrap;
}

.t-name-info .instructor {
   display: flex;
   color: #0179BE;
   font-size: 16px;
   white-space: nowrap;
}

.t-info-det {
   display: flex;
   width: 100%;
   justify-content: space-around;
}

.t-info-det .det {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

.t-info-det .d-icon {
   display: flex;
   margin-bottom: 13px;
}

.t-info-det .d-icon .icon {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
}

.t-info-det .d-icon .icon.i-course {
   background-image: url(../img/course.svg);
   width: 18px;
   height: 18px;
}

.t-info-det .d-icon .icon.i-video {
   background-image: url(../img/i-video.svg);
   width: 22px;
   height: 18px;
}

.t-info-det .d-icon .icon.i-note {
   background-image: url(../img/i-note.svg);
   width: 18px;
   height: 18px;
}

.t-info-det .d-icon .icon.i-pro {
   background-image: url(../img/i-profile.svg);
   width: 16px;
   height: 18px;
}

.t-info-det .d-icon .icon.i-users {
   background-image: url(../img/users.svg);
   width: 20px;
   height: 18px;
}

.t-info-det .d-icon .icon.i-translate {
   background-image: url(../img/translate.svg);
   width: 20px;
   height: 20px;
}

.t-info-det .d-icon .icon.i-cost {
   background-image: url(../img/i-cost.svg);
   width: 20px;
   height: 19px;
}

.t-info-det .det .d-text {
   position: relative;
   display: flex;
}

.t-info-det .det .d-text span {
   font-size: 14px;
   color: #444444;
   display: inline-flex;
   white-space: nowrap;
}

.t-about {
   display: flex;
   flex-direction: column;
}

.t-about .header {
   display: flex;
   flex-direction: column;
   margin-bottom: 1.25rem;
}

.t-about .body {
   display: flex;
   flex-direction: column;
}

.t-about .body p {
   font-size: 1rem;
}

.teacher-history-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

.t-history-box {
   display: flex;
   flex-direction: column;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 26px;
   background: #FFFF;
}

.t-history-box .t-h-item {
   border: none;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid #D7D7D7;
}

.t-history-box .t-h-item:last-child {
   border-bottom: none;
}

.t-history-box .card-h-history {
   display: flex;
   align-items: center;
   border: none;
   cursor: pointer;
   z-index: 1;
   transition: 0.3s;
   padding: 1.429rem 1rem;
}

.t-history-box .card-h-history .name {
   display: flex;
}

.t-history-box .card-body-outer {
   position: relative;
}

.t-history-box .card-body {
   display: flex;
   padding: 5px 1rem 10px;
}

.t-history-box .card-body .icon {
   display: flex;
}

.t-history-box .card-body .icon:before {
   content: '';
   background-repeat: no-repeat;
   background-size: cover;
   width: 3.75rem;
   height: 3.75rem;
   margin-left: 1.25rem;
   display: inline-block;
   vertical-align: middle;
}

.t-history-box .card-body .icon.i-education:before {
   background-image: url(../img/i-education.svg);
}

.t-history-box .card-body .icon.i-occupation:before {
   background-image: url(../img/occupation.svg);
}

.t-history-box .card-body .icon.i-prize:before {
   background-image: url(../img/prize.svg);
}

.t-history-box .card-body .info {
   display: flex;
   flex-direction: column;
}

.t-history-box .card-body .info .info-name {
   display: flex;
   margin-bottom: 10px;
}

.t-history-box .card-body .info .info-det {
   display: flex;
   flex-wrap: wrap;
}

.t-history-box .card-body .info .info-det .i-d {
   display: flex;
   color: #444444;
   font-size: 14px;
   font-weight: 300;
   margin-left: 12px;
   margin-bottom: 5px;
}

.t-history-box .card-h-history:before {
   content: '';
   background-image: url(../img/collapse-arrow.svg);
   background-repeat: no-repeat;
   width: 28px;
   height: 28px;
   position: absolute;
   left: 2.812rem;
   transition: 0.3s;
}

.t-history-box .card-h-history[aria-expanded=true]:before {
   transform: rotate(180deg);
}

/* /teacher-pro-sec */

/* cmt-students-card */

.comment-sec {
   display: flex;
   margin-bottom: 5rem;
}

.owl-carousel-cmt-students.owl-carousel .owl-stage-outer {
   overflow-x: hidden;
}

.cmt-students-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.cmt-students-card-inner {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
   padding: 1rem;
   margin: 1rem;
}

.owl-carousel-cmt-students.owl-carousel .owl-stage-outer {
   overflow-x: hidden;
}

.cmt-students-card .card-des {
   display: flex;
   border-bottom: 1px solid #D7D7D7;
   margin-bottom: 1.25rem;
   padding-bottom: 1.25rem;
   width: 100%;
}

.cmt-students-card .card-des p {
   display: block;
   font-size: 0.875rem;
   color: #444444;
   font-weight: 300;
   text-align: justify;
   margin-bottom: 0;
   /*text-overflow: ellipsis;*/
   /*-webkit-box-orient: vertical;*/
   /*display: -webkit-box;*/
   /*-webkit-line-clamp: 5;*/
   /*-webkit-box-orient: vertical;*/
   /*white-space: normal;*/
   /*overflow: hidden;*/
}

.cmt-students-card .card-det {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
}

.cmt-students-card .card-det .img {
   display: flex;
   border-radius: 50%;
   justify-content: center;
   min-width: 60px;
   width: 60px;
   margin-left: 1.25rem;
}

.cmt-students-card .card-det .img img {
   border-radius: inherit;
   display: block;
   width: 100%;
}

.cmt-students-card .card-det .name-date {
   display: flex;
   flex-direction: column;
}

.cmt-students-card .card-det .name-date .card-name {
   display: flex;
   margin-bottom: 1rem;
}

.black-16 {
   color: #444444;
   font-size: 1rem
}

.cmt-students-card .card-det .name-date .date {
   display: flex;
}

.cmt-students-card .card-det .name-date .date .i-date {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/calendar.svg);
   width: 16px;
   height: 16px;
   margin-left: 4px;
}

.cmt-students-card .card-det .name-date .date span {
   display: flex;
   color: #444444;
   font-size: 12px;
}

.cmt-students-card a {
   width: 100%;
}

/* /cmt-students-card */

/* same-course-sec */

.same-course-sec {
   margin-bottom: 3.125rem;
}

/* /same-course-sec */

.course-sql-sec {
   display: flex;
   margin-bottom: 5.714rem;
}

/* article-list */

.article-list {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.article-list .article {
   display: flex;
   /* border-bottom: 1px solid #D7D7D7; */
   /* padding: 2.3125rem 0; */
   position: relative;
   align-items: center;
}

.article-list .article:before {
   content: '';
   width: 6px;
   height: 100%;
   background: #F2F2F2;
   position: absolute;
   bottom: 0;
   right: 22px;
   margin: auto;
   z-index: 0;
   background-size: cover;
}

.article-list .article:last-child .article-det {
   border-bottom: none;
}

.article-list .article:last-child:before {
   height: 50%;
   top: 0;
   bottom: unset;
}

.article-list .article:first-child:before {
   height: 50%;
}

.article-list .article .icon {
   display: flex;
   /* padding: 2.3125rem 0; */
}

.article-list .article .icon:before {
   content: '';
   background-repeat: no-repeat;
   background-size: cover;
   width: 3.125rem;
   height: 3.125rem;
   margin-left: 1rem;
   display: inline-block;
   vertical-align: middle;
   z-index: 0;
}

.article-list .article .icon.i-play:before {
   background-image: url(../img/atc-play.svg);
}

.article-list .article .icon.i-lock:before {
   background-image: url(../img/atc-lock.svg);
}

.article-list .article .article-det {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
   border-bottom: 1px solid #D7D7D7;
   padding: 2.3125rem 0;
}

.article-list .article .article-det .atc-name {}

.article-list .article .article-det .date {
   display: flex;
   align-items: center;
}

.article-list .article .article-det .date span {
   display: flex;
   color: #444444;
   font-size: 1rem;
}

.article-list .article .article-det .date .i-date {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/calendar.svg);
   width: 16px;
   height: 16px;
   margin-right: 7px;
}

.article-list .article .article-det .date .i-time {
   display: inline-block;
   background-repeat: no-repeat;
   background-size: cover;
   vertical-align: middle;
   background-image: url(../img/clock.svg);
   width: 16px;
   height: 16px;
   margin-right: 7px;
}

.light-box-15 {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
   padding: 1.25rem;
}

.light-box-15 .title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

/* /article-list */

.detail-bax {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
   padding-top: 1.25rem;
}

.stars-hld {
   display: flex;
   align-items: center;
   background: #F1F9EC;
   border-radius: 18px;
   padding: 0 1.4375rem;
   line-height: 2.25rem;
   margin-right: auto;
}

.stars {
   display: flex;
}

.stars i {
   width: 22px;
   height: 22px;
   background-image: url(../img/star-border.svg);
   background-size: cover;
   background-repeat: no-repeat;
   margin-left: 3px;
}

.stars i.active {
   background-image: url(../img/star.svg);
}

/* summery-cart */

.summery-cart {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding: 1.25rem;
}

.summery-det {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1rem;
}

.summery-det .property, .summery-det .value, .summery-det-price .property, .summery-det-price .value {
   display: flex;
}

.summery-det .property span {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
}

.summery-det .value span {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
}

.summery-det-price {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.summery-det-price .property span {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
}

.summery-det-price .value span {
   display: flex;
   color: #0179BE;
   font-size: 1.125rem;
}

.summery-footer {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: #F1F9EC;
   padding: 1.25rem;
   border-radius: 0 0 16px 16px;
}

.summery-footer .wallet {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1.875rem;
}

.summery-footer .wallet-prop {
   display: flex;
   flex-direction: column;
   position: relative;
   justify-content: center;
}

.summery-footer .wallet-txt {
   display: flex;
   color: #444444;
   font-size: 0.875rem;
   margin-right: 0.625rem;
   align-items: center;
}

.summery-footer i.i-wallet {
   display: flex;
   background: url(../img/i-wallet.svg) no-repeat center center /cover;
   width: 20px;
   height: 19px;
}

.summery-footer .wallet-txt-price {
   display: flex;
   color: #A1A1A1;
   font-size: 12px;
   margin-top: 0.625rem;
}

.wallet-label {
   display: flex;
}

.summery-footer i.i-installment {
   display: flex;
   background: url(../img/installment.svg) no-repeat center center /cover;
   width: 21px;
   height: 21px;
}

.summery-footer i.i-coupon {
   display: flex;
   background: url(../img/discount.svg) no-repeat center center /cover;
   width: 22px;
   height: 18px;
}

.coupon {
   display: flex;
   flex-direction: column;
   margin-bottom: 1.875rem;
}

.coupon .coupon-body {
   display: flex;
   flex-direction: column;
   padding-top: 1.875rem;
}

.coupon .wallet-prop:after {
   content: '';
   background-image: url(../img/angle-down.svg);
   background-repeat: no-repeat;
   width: 16px;
   height: 8px;
   left: 0;
   position: absolute;
   z-index: 11;
   transition: 0.3s;
}

.coupon .wallet-prop[aria-expanded="true"]::after {
   transition: 0.3s;
   transform: rotate( 180deg);
}

.form-group .input-wrapper .prefix button {
   background: unset;
   color: #006494;
   border: unset;
   font-size: 0.875rem;
}

.detail-bax .result {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 1.875rem;
   flex-wrap: wrap;
}

.detail-bax .result .result-txt {
   display: flex;
   color: #444444;
   font-size: 12px;
}

.detail-bax .result i.i-del {
   display: flex;
   background: url(../img/trash.svg) no-repeat center center /cover;
   width: 20px;
   height: 20px;
   margin-right: auto;
}

.switch {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 18px;
   margin-bottom: 0;
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.round {
   position: absolute;
   cursor: pointer;
   border-radius: 11px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to right, #C5C5C5, #9E9E9E);
   -webkit-transition: .4s;
   transition: .4s;
}

.round:before {
   position: absolute;
   content: "";
   height: 10px;
   width: 10px;
   left: 4px;
   bottom: 4px;
   border-radius: 50%;
   background-color: #ffffff;
   -webkit-transition: .4s;
   transition: .4s;
}

input:checked+.round {
   background: linear-gradient(to left, #60B72C, #87C64B);
}

input:checked+.round:before {
   background: #FFFFFF;
}

input:checked+.round:before {
   -webkit-transform: translateX(0.875rem);
   -ms-transform: translateX(1.625rem);
   transform: translateX(22px);
}

.form-group .input-wrapper .prefix {
   color: #006494;
   display: flex;
   height: fit-content;
   font-size: 0.875rem;
   direction: ltr;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   left: 0.75rem;
}

.form-group .input-wrapper .prefix button {
   color: #60B72C;
   font-size: 0.875rem;
}

/* /summery-cart */

/* swal */

.swal2-popup.alert {
   min-width: 500px;
}

.swal2-popup {
   border-radius: 26PX !important;
   position: relative;
}

.swal2-popup.alert.del:before {
   content: '';
   position: absolute;
   top: -3rem;
   right: 1.25rem;
   background-image: url(../img/swall-trash.svg);
   display: flex;
   width: 100px;
   height: 100px;
   background-repeat: no-repeat;
}

.swal2-popup.alert.cmt:before {
   content: '';
   position: absolute;
   top: -3rem;
   right: 1.25rem;
   background-image: url(../img/swall-lock.svg);
   display: flex;
   width: 100px;
   height: 100px;
   background-repeat: no-repeat;
}

.swal2-popup.alert.logout:before {
   content: '';
   position: absolute;
   top: -3rem;
   right: 1.25rem;
   background-image: url(../img/alert_logout.svg);
   display: flex;
   width: 100px;
   height: 100px;
   background-repeat: no-repeat;
}

.alert.confirm:before {
   content: '';
   position: absolute;
   top: -3rem;
   right: 1.25rem;
   background-image: url(../img/confirm.svg);
   display: flex;
   width: 100px;
   height: 100px;
   background-repeat: no-repeat;
}

.alert-header {
   align-items: flex-start !important;
   padding-right: 0 !important;
   padding-left: 0 !important;
   margin-right: 7.25rem;
}

.swal2-header .alert-title {
   font-size: 1.1rem !important;
   font-weight: 500 !important;
   text-align: right !important;
   margin-left: 1.125rem !important;
}

.alert-actions {
   direction: ltr !important;
   justify-content: flex-start !important;
   padding-right: 0 !important;
   padding-left: 0 !important;
   margin-top: 2.375rem !IMPORTANT;
}

.alert-actions .swal2-confirm {
   background-color: #60B72C !important;
   line-height: 2.5rem !important;
   border-radius: 24px !important;
   /* min-width: 164px !important; */
   padding: 0 53px;
   font-weight: 500;
   margin: 0 !important;
   font-size: 1rem !important;
}

.alert-actions .swal2-confirm:focus {
   box-shadow: none !important;
}

.alert-actions .swal2-deny:focus {
   box-shadow: none !important;
}

.alert-actions .swal2-deny {
   background-color: #ffff !important;
   line-height: 2.2rem !important;
   border-radius: 24px !important;
   color: #60B72C !important;
   /* min-width: 9.375rem !important; */
   padding: 0 53px;
   font-weight: 500;
   font-size: 1rem;
   margin: 0 0 0 1.25rem !important;
   border: 2px solid #60B72C !important;
}

/* /swal */

/* cart */

.cart-items {
   display: flex;
   flex-direction: column;
}

.light-box-20 {
   display: flex;
   position: relative;
   width: 100%;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
   border-radius: 16px;
   padding: 1.25rem;
   margin-bottom: 12px;
}

.light-box-20 .title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.cart-header {
   display: flex;
   /* justify-content: space-between; */
   align-items: center;
   width: 100%;
}

.cart-main {
   display: flex;
   align-items: center;
}

.cart-det {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
}

.cart-header .img-hld {
   display: flex;
   border-radius: 12px;
   min-width: 100px;
   width: 100px;
   margin-left: 2.5rem;
   position: relative;
}

.cart-header .img-hld img {
   border-radius: inherit;
}

.cart-header .cart-title {
   display: flex;
   align-items: center;
}

.cart-header .img-hld::after {
   content: '';
   width: 7px;
   height: 100%;
   display: flex;
   background-color: #0179BE;
   border-radius: 4px;
   position: absolute;
   left: -1.25rem;
}

.price-trash {
   display: flex;
   margin-right: auto;
}

.price-trash .trash {
   display: flex;
   align-items: center;
   margin-right: 1.875rem;
}

.price-trash .trash a {}

.price-trash .trash a .i-trash {
   width: 20px;
   height: 20px;
}

.price-trash .trash:hover a .i-trash path {
   fill: #FF7575;
}

.installments-list {
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
}

.installment {
   display: flex;
   justify-content: space-between;
   position: relative;
   align-items: center;
   margin-bottom: 1rem;
}

.installment .title, .installment .date, .installment .price {
   display: flex;
}

.installment .title {
   width: 33.33%;
   margin-right: 15px;
}

.installment .date {
   width: 33.33%;
   justify-content: center;
}

.installment .price {
   width: 33.33%;
   justify-content: flex-end;
}

.installment:before {
   content: '';
   position: absolute;
   right: 0;
   width: 10px;
   height: 10px;
   border-radius: 10px;
   background-color: #60B72C;
}

/* /cart */

/* nav-tabs */

.nav-tabs {
   border: none;
   border-bottom: none;
   margin-bottom: 2.5rem;
   width: 100%;
}

.nav-tabs .nav-item {
   margin-left: 1.25rem;
}

.nav-tabs .nav-item .nav-link.active {
   color: #FFFFFF;
   border-top: none;
   border-right: none;
   border-left: none;
   background: linear-gradient(to right, #60B72C, #87C64B);
}

.nav-tabs .nav-item .nav-link {
   line-height: 2.25rem;
   border-radius: 24px;
   padding: 0 1.5rem;
   border: 2px solid #60B72C;
   color: #60B72C;
   min-width: 144px;
   text-align: center;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
   color: #ffffff;
   background-color: #006494;
}

.tab-content .pb-btn-hld {
   display: flex;
   justify-content: flex-end;
}

/* /nav-tabs */

/* course-dashboard */

.course-dashboard .tab-apex {
   margin: 6.875rem 0 5rem 0;
}

/* /course-dashboard */

/* empty */

.empty {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
   margin-top: 100px;
   margin-bottom: 50px;
}

.empty span {
   color: #A1A1A1;
   font-size: 1rem;
   white-space: nowrap;
   display: inline-block;
}

.empty .i {
   min-width: 230px;
   display: flex;
   margin-bottom: 2.5rem;
}

/* /empty */

/* pagination */

.apx-pagination {
   display: flex;
   justify-content: center;
   position: relative;
   margin-top: 0;
   margin-bottom: 2rem;
   width: 100%;
}

.apx-pagination ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.apx-pagination ul li {
   display: flex;
   margin: 0.75rem 0 0.75rem 0.75rem;
}

.page-Item:last-child {
   margin-left: 0;
}

.apx-pagination ul li a,.apx-pagination ul li span {
   display: flex;
   font-size: 1.143rem;
   line-height: 25px;
   border-radius: 6px;
   color: #A1A1A1;
   padding: 0 0.625rem;
}

.apx-pagination ul li a.active, .apx-pagination ul li.active a,
.apx-pagination ul li.active a, .apx-pagination ul li.active span{
   background-color: #0179BE;
   color: #FFFFFF;
}

.pb-table .table-body .tb-row .tb-row-item .pb-btn {
   line-height: 2.25rem;
}

/* /pagination */

.anim-cart {
   display: flex;
   flex-direction: column;
   padding-bottom: 1.25rem;
   margin-bottom: 1.875rem;
   width: 100%;
   align-items: center;
}

.anim-cart-img {
   display: flex;
   position: relative;
   border-radius: 20px;
   margin-bottom: -45px;
   width: 100%;
}

.anim-cart-img a {
   border-radius: inherit;
   width: 100%;
}

.anim-image-holder {
   position: relative;
   width: 100%;
   height: auto;
   border-radius: inherit;
}

.anim-image-holder img {
   display: flex;
   width: 100%;
   border-radius: inherit;
}

.anim-cart-img .over-bg {
   transition: .3s ease;
   opacity: 0.3;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   background: #000000;
   border-radius: inherit;
   padding: 1rem;
}

.anim-cart-detail {
   padding-top: 0.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: #FFFFFF;
   box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   width: calc(100% - 40px);
   /* position: absolute; */
   /* top: 56px; */
   z-index: 0;
}

.anim-cart-detail .title-hld {
   display: flex;
   margin-bottom: 0.75rem;
}

.anim-cart-detail .title-hld a {
   color: #444444;
}

.anim-cart-detail .title-hld a .title {
   color: #444444;
   display: flex;
   font-size: 1rem;
   margin-bottom: 0;
}

.anim-cart-detail .anim-des {
   display: flex;
}

.anim-cart-detail .anim-des .des {
   color: #444444;
   font-size: 1rem;
   font-weight: 300;
   margin-bottom: 0.75rem;
}

.anim-cart-detail .pb-btn {
   width: 100%;
   line-height: 2.25rem;
}

/* dashboard - my courses */

header.dashboard-header {
   padding: 1.063rem 0;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   background-color: #fff;
   z-index: 99;
}

.dashboard-header .main-logo-holder {
   width: 7.875rem;
}

.dashboard-header .header-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.dashboard-header .header-wrapper .logo-resBtn {
   margin: 0;
}

.dashboard-header .header-wrapper .main-logo-holder {
   display: flex;
}

.dashboard-header .header-menu {
   display: flex;
   align-items: center;
}

.dashboard-header .header-menu .navbar-toggler {
   width: 50px;
   padding: 0 10px;
}

.dashboard-header .header-menu .navbar-toggler span {
   width: 100%;
   border-bottom: 2px solid #60B72C;
   margin: 5px 0;
   display: flex;
}

.dashboard-header .header-menu .notifications {
   margin-left: 0.75rem;
}

.dashboard-header .header-menu .notifications button {
   background-color: #FAFAFA;
   border: none;
   border-radius: 12px;
   color: #444444;
   font-size: 0.875rem;
   padding: 0.563rem 0.75rem 0.563rem 2rem;
   display: flex;
   align-items: center;
   position: relative;
   z-index: 999;
}

.dashboard-header .header-menu .notifications button::after {
   display: none;
}

.dashboard-header .header-menu .notifications button .notif-icon {
   margin-left: 0.75rem;
   position: relative;
   width: 1.5rem;
   height: 1.75rem;
}

.notifications button .notif-icon.unread::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #FF7575;
   position: absolute;
   top: 0;
   right: 0;
}

.dashboard-header .header-menu .user-info {
   display: flex;
}

.dashboard-header .header-menu .user-info a.dropdown-toggle {
   align-items: center;
   background-color: #FAFAFA;
   border-radius: 12px;
   padding: 0.313rem 0.75rem 0.313rem 1.75rem;
}

.dashboard-header .header-menu .user-info:hover .dropdown-menu {
   display: block;
   width: 100%;
}

.dashboard-header .header-menu .user-info a::after {
   display: none;
}

.dashboard-header .header-menu .user-info a .name {
   color: #444444;
   font-size: 0.875rem;
}

.dashboard-header .header-menu .user-info .user-img {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   margin-left: 0.75rem;
   width: 2.25rem;
   height: 2.25rem;
}

.dashboard-header .header-menu .user-info .user-img img {
   border-radius: inherit;
}

.dashboard-header .header-menu .user-info .dropdown-menu {
   padding: 0.625rem 0;
   border: 1px solid #D7D7D7;
   border-radius: 10px;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   margin-top: 0;
}

.dashboard-header .header-menu .user-info .dropdown-menu .dropdown-item {
   color: #444444;
   font-size: 0.875rem;
   padding-top: 0;
   padding-bottom: 0;
   line-height: 2.25rem;
}

.dashboard-header .header-menu .user-info .dropdown-menu .dropdown-item.exit {
   color: #FF6464;
}

.stickySidebar-wrapper {
   display: flex;
   justify-content: space-between;
   overflow: hidden;
}

.sidebar-menu {
   padding-right: 1.25rem;
   width: 250px;
   /*position: fixed;*/
   /*right: 0;*/
   background-color: #fff;
   z-index: 98;
   overflow-y: scroll;
   transition: width 0.3s;
   overflow-x: hidden;
   padding-top: 80px;
}

.main-content .wrapper.pos {
   position: fixed;
}

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

.sidebar-menu::-webkit-scrollbar-thumb {
   background: #EBE9E9;
}

.sidebar-menu .user-score {
   width: 100%;
   background-color: #F1F9EC;
   border-radius: 22px;
   padding: 1.125rem 0;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 1rem;
   transition: all 0.3s;
}

.sidebar-menu .user-score .user-score-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.user-score-inner .us-icon {
   width: 3.125rem;
   height: 3.125rem;
   margin-bottom: 0.75rem;
   background-image: url(../img/score.svg);
   background-repeat: no-repeat;
   background-size: contain;
}

.user-score-inner .score {
   display: flex;
   align-items: center;
}

.user-score-inner .score span {
   font-size: 1rem;
}

.sidebar-menu .panel-menu {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding-bottom: 0.625rem;
   overflow: hidden;
}

.sidebar-menu .panel-menu li.active a {
   background-color: #E5F1F9;
}

.sidebar-menu .panel-menu li.active a .icon svg path {
   fill: #0179BE;
}

.sidebar-menu .panel-menu li.active a span {
   color: #0179BE;
}

.sidebar-menu .panel-menu li {
   display: flex;
   height: fit-content;
}

.sidebar-menu .panel-menu li a {
   width: 100%;
   padding: 0 0.75rem;
   line-height: 3.75rem;
   border-radius: 15px;
   transition: all 0.3s;
}

.sidebar-menu .panel-menu li.exit a span {
   color: #FF6464;
}

.sidebar-menu .panel-menu li a:hover {
   background-color: #E5F1F9;
}

.sidebar-menu .panel-menu li a .icon {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: 1.125rem;
   max-width: 2rem;
}

.sidebar-menu .panel-menu li a .icon svg path {
   transition: all 0.3s;
}

.sidebar-menu .panel-menu li a:hover .icon svg path {
   fill: #0179BE;
}

.sidebar-menu .panel-menu li a span {
   color: #A1A1A1;
   font-size: 1rem;
   transition: all 0.3s;
}

.sidebar-menu .panel-menu li a:hover span {
   color: #0179BE;
}

.main-content {
   padding-top: 70px;
   position: relative;
   z-index: 1;
   height: 100%;
   width: calc(100% - 260px);
}

.main-content .wrapper {
   background-color: #FAFAFA;
   border-radius: 0 20px 20px 0;
   /*overflow-y: hidden;*/
   padding: 2.143rem 4rem 0 4.7rem;
}

.main-content .wrapper .wrapper-header {
   margin-bottom: 1.75rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main-content .wrapper .dashboard-filters {
   display: flex;
   background-color: #fff;
   border: 1px solid #60B72C;
   border-radius: 16px;
   margin-bottom: 3.25rem;
   padding: 5px;
}

.dashboard-filters .dropdowns {
   display: flex;
   flex-grow: 1;
}

.dashboard-filters .form-group {
   margin: 0;
   border-left: 1px solid #EFEFEF;
}

.dashboard-filters .dashboard-filter {
   padding-top: 0;
   padding-bottom: 0;
}

.dashboard-filters .dashboard-filter::after {
   border: none;
   margin: 0;
   width: 1px;
   height: 2.25rem;
   display: flex;
   background-color: #E6E6E6;
}

.dashboard-filters .dashboard-filter:focus {
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
}

.dashboard-filters .dashboard-filter .filter-option-inner {
   text-align: right;
   color: #444444;
   font-size: 1.125rem;
   width: fit-content;
   position: relative;
}

.dashboard-filters .dashboard-filter .filter-option-inner::after {
   content: '';
   background-image: url(../img/green-arrow.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   transform: rotate(180deg);
   transition: all 0.3s;
   position: absolute;
   right: calc(100% + 30px);
   top: 0;
   bottom: 0;
   margin: auto;
   width: 1rem;
   height: 0.5rem;
}

.dashboard-filters .dashboard-filter[aria-expanded="true"] .filter-option-inner::after {
   transform: rotate(0deg);
}

.dashboard-filters .dropdowns button.dropdown-toggle {
   width: 100%;
   background-color: #fff;
   border: none;
   display: flex;
   align-items: center;
   line-height: 3.5rem;
   border-radius: 16px;
   padding-right: 1.875rem;
   padding-left: 0;
}

.dashboard-filters .dropdowns button.dropdown-toggle::after {
   display: none;
}

.dashboard-filters .dropdowns .dropdown-toggle span {
   font-size: 1.125rem;
   display: flex;
   align-items: center;
   position: relative;
}

.dashboard-filters .dropdowns .dropdown-toggle span::after {
   content: '';
   background-image: url(../img/green-arrow.svg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   width: 0.875rem;
   height: 0.5rem;
   margin-right: 1.875rem;
   transform: rotate(-180deg);
   transition: all 0.3s;
}

.dashboard-filters .dropdown-menu {
   border-radius: 10px;
   box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
}

.dashboard-filters .search.filter {
   padding-left: 1.875rem;
   margin: 0;
   flex-grow: 0.2;
   width: auto;
   border-left: none;
}

.overlay {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #0D2C54;
   filter: blur(20px);
   z-index: 997;
   opacity: 0.2;
   display: none;
}

.notifications.show .overlay {
   display: block;
}

.notification-box {
   position: fixed;
   left: -23.75rem;
   top: 80px;
   transform: none;
   right: unset;
   width: 23.75rem;
   background-color: #fff;
   border-radius: 15px;
   padding: 1.25rem;
   z-index: 999;
   height: calc(100vh - 95px);
   transition: all 0.3s;
   display: block;
   border: none;
   overflow: hidden;
}

.notification-box.show {
   left: 15px !important;
}

.notification-box .nt-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.25rem;
}

.notification-box .nt-header .view-all {
   font-size: 0.875rem;
   color: #A1A1A1;
}

.notification-box .nt-body {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: auto;
}

.notification-box .nt-body .nt-item {
   padding: 0.625rem 3rem 0.625rem 1.25rem;
   background-color: #FAFAFA;
   position: relative;
   border-radius: 16px;
}

.notification-box .nt-body .nt-item:not(:last-child) {
   margin-bottom: 0.875rem;
}

.notification-box .nt-body .nt-item::before {
   content: '';
   width: 0.438rem;
   height: calc(100% - 20px);
   position: absolute;
   background-color: #60B72C;
   border-radius: 4px;
   right: 1.25rem;
   top: 0;
   bottom: 0;
   margin: auto;
}

.nt-item .nt-item-header a {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nt-item .nt-item-header a .nt-title {
   color: #444444;
   font-size: 1rem;
}

.nt-item .nt-item-header a .nt-det {
   display: flex;
   align-items: center;
}

.nt-item .nt-item-header a .nt-det::after {
   content: '';
   width: 0.813rem;
   height: 0.438rem;
   display: inline-flex;
   background-image: url(../img/Arrow-Down2.svg);
   background-repeat: no-repeat;
   background-size: contain;
   margin-right: 0.875rem;
   transition: all 0.3s;
}

.nt-item .nt-item-header a[aria-expanded="true"] .nt-det::after {
   transform: rotate(180deg);
}

.nt-item.unread .nt-item-header a .nt-det::before {
   content: '';
   width: 0.75rem;
   height: 0.75rem;
   background-color: #FF7575;
   border-radius: 50%;
   margin-left: 1.25rem;
}

.nt-item .nt-item-header a .nt-det .send-info {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.nt-item .nt-item-header a .nt-det .send-info span {
   color: #A1A1A1;
   font-size: 0.875rem;
}

.nt-item .nt-item-body .des p {
   margin-top: 0.875rem;
   margin-bottom: 0;
}

.collapse-btn {
   margin-bottom: 0.625rem;
}

.collapse-btn button {
   background-color: transparent;
   border: none;
   width: 60px;
   display: flex;
   flex-direction: column;
   padding: 0 10px 0 20px;
}

.collapse-btn button span {
   width: 100%;
   border-bottom: 2px solid #60B72C;
   margin: 4px 0;
}

/* /dashboard - my courses */

/* schedule */

.reminder-notifs {
   margin-bottom: 2.5rem;
   position: relative;
   display: block;
}

.reminder-notifs .reminder-notifs-inner {
   max-height: 17.5rem;
   overflow-y: hidden;
   transition: all 0.3s;
}

.reminder-notifs.notifs-open .reminder-notifs-inner {
   max-height: 391px;
   overflow-y: auto;
}

.notif-item {
   background-color: #fff;
   border-radius: 16px;
}

.notif-item:not(:last-child) {
   margin-bottom: 0.875rem;
}

.notif-item .notif-header {
   display: flex;
   justify-content: space-between;
}

.notif-item .notif-header a {
   display: flex;
   justify-content: space-between;
   padding: 0.857rem 1rem;
   align-items: center;
   width: 100%;
}

.notif-item .notif-header .notif-main {
   display: flex;
   height: 100%;
}

.notif-item .notif-header .title {
   display: flex;
   align-items: center;
}

.notif-item .notif-header .title::after {
   content: '';
   width: 7px;
   height: 100%;
   background-color: #60B72C;
   border-radius: 4px;
   margin-right: 0.75rem;
}

.notif-item .notif-header .title span {
   font-size: 1rem;
   color: #A1A1A1;
}

.notif-item .notif-header .notif-title {
   padding-right: 1.25rem;
   display: flex;
   align-items: center;
}

.notif-item .notif-header .notif-title span {
   font-size: 1rem;
   color: #444444;
   transition: color 0.2s;
}

.notif-item .notif-header a .notif-det {
   display: flex;
   align-items: center;
}

.notif-item .notif-header a .notif-det::after {
   content: '';
   width: 0.857rem;
   height: 0.429rem;
   display: inline-flex;
   background-image: url(../img/Arrow-Down2.svg);
   background-repeat: no-repeat;
   background-size: contain;
   margin-right: 1rem;
   transition: all 0.3s;
}

.notif-item .notif-header a:not(.collapsed) .notif-det::after {
   transform: rotate(180deg);
}

.notif-item.unread .notif-header a .notif-det::before {
   content: '';
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 50%;
   background-color: #FF7575;
   margin-left: 1.25rem;
}

.notif-item .notif-header a .notif-det span {
   color: #A1A1A1;
   font-size: 0.875rem;
}

.notif-item .notif-body .des {
   padding: 0 1.25rem 1.25rem 1.25rem;
}

.notif-item .notif-body p {
   margin: 0;
   font-size: 1rem;
}

.reminder-notifs .show-all {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: linear-gradient(to top, #fff, transparent);
   text-align: center;
   display: none;
}

.reminder-notifs .show-all button {
   background-color: transparent;
   border: none;
   color: #60B72C;
}

.reminder-notifs.notifs-open .show-all {
   bottom: unset;
   top: 100%;
   background-image: none;
}

.gradient-box {
   display: flex;
   border-radius: 15px;
   background-image: linear-gradient(to top, #D5E9F4, #0179BE);
   padding: 1rem 1.25rem 1rem 1.25rem;
   margin-bottom: 1rem;
}

.gradient-box .title span {
   color: #fff;
   font-size: 1.25rem;
}

.gradient-box .date-picker {
   display: flex;
   justify-content: center;
   align-items: center;
}

.gradient-box .date-picker .dp-inner {
   display: flex;
   justify-content: center;
}

.gradient-box .date-picker .dp-inner .date {
   line-height: 2.25rem;
   padding: 0 1.25rem;
   background-color: #fff;
   color: #60B72C;
   margin: 0 2px;
}

.gradient-box .date-picker .dp-inner button {
   width: 2.25rem;
   height: 2.25rem;
   background-color: #fff;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
}

.gradient-box .date-picker .dp-inner button::after {
   content: '';
   width: 0.875rem;
   height: 0.438rem;
   background-image: url(../img/green-arrow.svg);
   background-repeat: no-repeat;
   background-size: contain;
}

.gradient-box .date-picker .dp-inner button.pre {
   border-radius: 0 18px 18px 0;
}

.gradient-box .date-picker .dp-inner button.pre::after {
   transform: rotate(90deg);
}

.gradient-box .date-picker .dp-inner button.next {
   border-radius: 18px 0 0 18px;
}

.gradient-box .date-picker .dp-inner button.next::after {
   transform: rotate(-90deg);
}

.schedule-holder {
   display: flex;
   flex-direction: column;
}

.schedule-holder .schedule-row {
   display: flex;
   margin-bottom: 0.857rem;
   min-height: 8rem;
}

.schedule-row .day {
   display: flex;
   background-color: #fff;
   border-radius: 15px;
   width: 6.429rem;
   justify-content: center;
   align-items: center;
   margin-left: 0.714rem;
}

.schedule-row .classes {
   display: flex;
   overflow-x: auto;
}

.classes::-webkit-scrollbar {
   height: 8px;
}

.classes::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: #006494;
}

.schedule-row .classes .class-item {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.714rem 1.286rem;
   border-radius: 15px;
   flex-direction: column;
   margin-left: 0.857rem;
}

.schedule-row .classes .class-item:nth-child(even) {
   background-color: #F1F9EC;
}

.schedule-row .classes .class-item:nth-child(odd) {
   background-color: #fff;
}

.schedule-row .classes .class-item.canceled {
   background-color: #FFF1F1;
}

.schedule-row .classes .class-item .class-title {
   font-size: 1rem;
   font-weight: 300;
   margin-bottom: 0.571rem;
   white-space: nowrap;
}

.schedule-row .classes .class-item .class-det {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.schedule-row .classes .class-item .class-det .class-time {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.714rem;
}

.classes .class-item .class-det .det-title {
   font-size: 0.857rem;
   font-weight: 300;
   color: #A1A1A1;
}

.classes .class-item .class-det .class-time .time-val {
   font-size: 1rem;
   color: #0179BE;
}

.classes .class-item .class-det .class-handout {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.classes .class-item .class-det .class-handout .download-handout {
   border: none;
   background-color: transparent;
   width: 1.143rem;
   height: 1rem;
   background-image: url(../img/direct-download.svg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

/* /schedule */

/* quiz results */

.results {
   margin-bottom: 3.125rem;
}

.results .notif-item {
   margin-bottom: 1.875rem;
   transition: all 0.2s;
}

.results .notif-item:hover {
   background-color: #0179BE;
}

.results .notif-item:hover .notif-main .notif-title span {
   color: #fff;
}

.results .notif-item:hover .notif-header .cl-arrow {
   background-color: #fff;
}

.results .notif-item:hover .notif-header .cl-arrow svg path {
   fill: #0179BE;
}

.results .notif-item .notif-header .title::after {
   margin: 0;
}

.results .notif-item .notif-header .cl-arrow {
   width: 2.5rem;
   height: 2.5rem;
   background-color: #0179BE;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s;
}

.results .notif-item .notif-header .cl-arrow svg {
   width: auto;
   height: auto;
}

/* /quiz results */

/* quiz single */

.pb-table {
   display: flex;
   flex-direction: column;
   margin-bottom: 3.125rem;
   border-radius: 26px;
   box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
}

.pb-table .table-heading {
   display: flex;
   padding: 1.25rem 2.6875rem 1rem 2.6875rem;
}

.pb-table .table-heading .table-heading-title {
   font-size: 1.125rem;
}

.pb-table .table-header {
   display: table;
   width: 100%;
   padding: 1rem 0;
   table-layout: fixed;
   background-color: #F1F9EC;
   border-radius: 26px 26px 0 0;
}

.pb-table.has-heading .table-header {
   border-radius: 0;
}

.pb-table .table-header .th-header-item {
   display: table-cell;
   word-break: break-word;
   text-align: center;
}

.pb-table .table-header .th-header-item span {
   font-size: 0.875rem;
   color: #60B72C;
}

.pb-table .table-body {
   display: flex;
   flex-direction: column;
}

.pb-table .table-body .tb-row {
   background-color: #fff;
}

.pb-table .table-body .tb-row.unsuccessful {
   background-color: #FFF8F8;
}

.pb-table .table-body .tb-row:last-child {
   border-radius: 0 0 26px 26px;
}

.pb-table .table-body .tb-row:not(:last-child) {
   border-bottom: 1px solid #F1F9EC;
}

.pb-table .table-body .tb-row .responsive-session {
   display: none;
}

.pb-table .table-body .tb-row .tb-row-body {
   display: table;
   width: 100%;
   table-layout: fixed;
   padding: 1rem 0;
   background-color: inherit;
}

.pb-table .table-body .tb-row .tb-row-body:last-child {
   border-radius: 0 0 26px 26px;
}

.pb-table .table-body .tb-row .tb-row-item {
   display: table-cell;
   word-break: break-word;
   text-align: center;
}

.pb-table .table-body .tb-row .tb-row-item .f-small {
   font-size: 0.875rem;
}

.pb-table .table-body .tb-row .tb-row-item .text-blue {
   color: #0179BE;
}

.pb-table .table-body .tb-row .tb-row-item .download {
   background-color: transparent;
   border: none;
   display: inline-block;
   vertical-align: middle;
   background-image: url(../img/direct-download-light.svg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   width: 1.5rem;
   height: 1.25rem;
   margin: 0 auto;
   padding: 0;
}

.pb-table .table-body .tb-row .tb-row-item .responsive-title {
   display: none;
}

/* /quiz single */

/* wallet */

.wallet-charge {
   display: flex;
   flex-direction: column;
   background-color: #fff;
   border-radius: 26px;
   margin-bottom: 1.429rem;
   box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.1);
   max-width: 30rem;
   position: relative;
}

.wallet-charge .wallet-card-header {
   display: flex;
   align-items: center;
   flex-direction: column;
   padding: 1.25rem 0 1rem 0;
   position: relative;
}

.wallet-charge .wallet-card-header::after {
   content: '';
   width: 5rem;
   height: 5.375rem;
   background-image: url(../img/wallet-icon.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   position: absolute;
   left: -1.625rem;
   top: -1.25rem;
}

.wallet-charge .wallet-card-header .title {
   font-size: 1.25rem;
   margin-bottom: 0.875rem;
}

.wallet-charge .wallet-card-header .balance {
   display: flex;
   align-items: center;
}

.wallet-charge .wallet-card-header .balance span:not(.symbol) {
   font-size: 1.714rem;
   color: #60B72C;
}

.wallet-charge .wallet-card-header .balance .symbol {
   font-size: 1rem;
   margin-right: 0.75rem;
}

.wallet-charge .divider-holder {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow-x: hidden;
   height: 1.625rem;
   margin-bottom: 1rem;
}

.wallet-charge .divider-holder .divider {
   width: 87%;
   height: 1px;
   background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
   background-size: 10px 1px;
   background-repeat: repeat-x;
}

.wallet-charge .divider-holder::before {
   content: '';
   width: 1.625rem;
   height: 1.625rem;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   left: -0.813rem;
   border-radius: 50%;
   background-color: #FAFAFA;
   box-shadow: 1px 2px 30px 0 rgba(0, 0, 0, 0.06) inset;
}

.wallet-charge .divider-holder::after {
   content: '';
   width: 1.625rem;
   height: 1.625rem;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   right: -0.813rem;
   border-radius: 50%;
   background-color: #FAFAFA;
   box-shadow: 1px 2px 30px 0 rgba(0, 0, 0, 0.06) inset;
}

.wallet-charge .wallet-card-body {
   padding: 0 1.25rem 2.625rem 1.25rem;
   position: relative;
}

/*.wallet-charge::after {*/

/*    content: '';*/

/*    width: 19.143rem;*/

/*    height: 12rem;*/

/*    background-image: url(../img/bank-cart.svg);*/

/*    background-repeat: no-repeat;*/

/*    background-position: center center;*/

/*    background-size: contain;*/

/*    position: absolute;*/

/*    left: -15rem;*/

/*    bottom: -2.857rem;*/

/*    z-index: -1;*/

/*}*/

.wallet-charge .wallet-card-body::after {
   content: '';
   width: 5rem;
   height: 5.375rem;
   background-image: url(../img/dollar-icon.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   position: absolute;
   right: -1.875rem;
   bottom: -2.063rem;
}

.wallet-charge .wallet-card-body .balance-input {
   margin-bottom: 2.5rem;
}

.wallet-card-body .form-group.balance-input .inp-label {
   font-size: 1rem;
   margin-bottom: 1.25rem;
}

.wallet-card-body .form-group.balance-input .inputs {
   display: flex;
}

.wallet-card-body .form-group.balance-input .inputs .form-control {
   font-size: 1.286rem;
   border: 1px solid #D7D7D7;
   border-radius: 0;
   background-color: #FAFAFA;
   margin: 0 0.125rem;
   min-height: 2.857rem;
   text-align: center;
}

.wallet-card-body .form-group.balance-input .inputs button {
   background-color: #FAFAFA;
   border: 1px solid #D7D7D7;
   color: #A1A1A1;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 34px;
   position: relative;
   margin: 0;
   padding: 0 0.938rem;
   min-width: 2.857rem;
}

.wallet-card-body .form-group.balance-input .inputs .inc {
   border-radius: 0 30px 30px 0;
}

.wallet-card-body .form-group.balance-input .inputs .inc::after {
   content: '';
   width: 1.286rem;
   height: 0.125rem;
   background-color: #A1A1A1;
   border-radius: 1px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.wallet-card-body .form-group.balance-input .inputs .inc::before {
   content: '';
   width: 0.125rem;
   height: 1.286rem;
   background-color: #A1A1A1;
   border-radius: 1px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.wallet-card-body .form-group.balance-input .inputs .dec {
   border-radius: 30px 0 0 30px;
}

.wallet-card-body .form-group.balance-input .inputs .dec::after {
   content: '';
   width: 1.286rem;
   height: 0.125rem;
   background-color: #A1A1A1;
   border-radius: 1px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.wallet-card-body .wallet-card-btn {
   display: flex;
   justify-content: space-between;
}

.wallet-card-body .wallet-card-btn .pb-btn.btn-outline {
   background: none;
   box-shadow: none;
   border: 2px solid #60B72C;
   color: #60B72C;
   line-height: 2.75rem;
}

.wallet-card-body .wallet-card-btn .pb-btn.btn-outline a {
   padding: 0 2rem;
}

.wallet-card-body .wallet-card-btn .pb-btn a {
   padding: 0 4rem;
}

.wallet-card-body .wallet-card-btn .pb-btn:not(.btn-outline) a::after {
   content: '';
   position: absolute;
   left: 0.143rem;
   top: 0;
   bottom: 0;
   margin: auto 0;
   background-color: #fff;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   background-image: url(../img/arrow-left.svg);
   background-repeat: no-repeat;
   background-position: center center;
   transform: rotate(90deg);
}

/* /wallet */

/* profile */

#save_btn {
   display: none;
}

#waiting_btn {
   display: none;
}

#waiting_btn_upload {
   display: none;
}

.file-upload-hld .i-edit {
   background-image: url(../img/edit-img.svg);
   width: 40px;
   height: 40px;
   background-repeat: no-repeat;
   background-size: contain;
   display: flex;
   align-items: center;
   cursor: pointer;
   justify-content: center;
   position: absolute;
   top: 0;
   z-index: 2;
   right: 0;
   left: 0;
   margin: auto;
   bottom: 0;
}

.btn-hld-pro {
   display: flex;
   justify-content: center;
   margin-bottom: 3.125rem;
   margin-top: 1.5rem;
}

.btn-hld-pro .pb-btn {
   display: flex;
   justify-content: center;
   min-width: 278px;
}

.profile-header {
   display: flex;
   margin-bottom: 1.875rem;
}

.profile-header .i-edit {
   background: url(../img/pencil.svg) no-repeat center center /cover;
   width: 24px;
   height: 24px;
   display: flex;
   margin-left: 0.75rem;
}

.profile-header .i-info {
   background: url(../img/pencil.svg) no-repeat center center /cover;
   width: 24px;
   height: 24px;
   display: flex;
   margin-left: 0.75rem;
}

.profile-header .header-call {
   color: #444444;
   font-size: 1.125rem;
   margin-right: 0.75rem;
}

.file-upload-hld {
   height: 160px;
   margin-bottom: 1rem;
}

input[type="file"] {
   display: none;
}

.file-upload-hld .hidden {
   display: none;
}

.upload-img-hld:not(.hidden)+label.custom-file-upload {
   display: none;
}

.upload-img-hld:not(.hidden)~.custom-file-upload {
   background: #FFFFFF;
   display: flex;
   padding: 2.375rem 10px;
   text-align: center;
   cursor: pointer;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #444444;
   font-weight: 300;
   font-size: 0.75rem;
   border-radius: 15px;
   margin-bottom: 1rem;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='15' ry='15' stroke='%23D7D7D7FF' stroke-width='2' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.file-upload-hld .hidden~.custom-file-upload {
   background: #FFFFFF;
   display: flex;
   padding: 2.375rem 10px;
   text-align: center;
   cursor: pointer;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #444444;
   font-weight: 300;
   font-size: 0.75rem;
   border-radius: 15px;
   margin-bottom: 0;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='15' ry='15' stroke='%23D7D7D7FF' stroke-width='2' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
   height: 100%;
}

.custom-file-upload .i-file {
   background: url(../img/file.svg) no-repeat center center /cover;
   width: 40px;
   height: 40px;
   display: flex;
   margin-bottom: 1.5625rem;
}

.upload-img-hld {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   height: inherit;
}

.upload-img-hld img {
   width: 100%;
   border-radius: 15px;
   height: 100%;
}

.upload-img-hld .i-close {
   background-image: url(../img/delete-img.svg);
   width: 40px;
   height: 40px;
   background-repeat: no-repeat;
   background-size: contain;
   display: flex;
   align-items: center;
   cursor: pointer;
   justify-content: center;
   position: absolute;
   z-index: 2;
}

.upload-img-hld .over-bg {
   opacity: 0.3;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000000;
   border-radius: 15px;
   z-index: 1;
}

/* /profile */

/* exam */

.sidebar-menu .panel-menu li.take-exam a, .sidebar-menu .panel-menu li.take-exam a:hover {
   background-image: linear-gradient(to right, #3DB753, #0179BE);
}

.sidebar-menu .panel-menu li.take-exam a span, .sidebar-menu .panel-menu li.take-exam a:hover span {
   color: #FFFFFF;
}

.sidebar-menu .panel-menu li.take-exam a .icon svg path, .sidebar-menu .panel-menu li.take-exam a:hover .icon svg path {
   fill: #FFFFFF;
}

.answers {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.answers .form-radio {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.5625rem;
   width: 47%;
}

.answers .form-radio label {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   user-select: none;
   margin-top: 0;
   margin-bottom: 0;
   cursor: pointer;
}

.answers .form-radio label .box-p {
   display: flex;
   font-size: 1rem;
   padding: 0.75rem 0;
   padding-left: 15px;
   border: 1px solid #D7D7D7;
   background: #FFFFFF;
   color: #444444;
   border-radius: 14px;
   align-items: center;
   width: 100%;
}

.answers .form-radio label input:checked~.box-p {
   border: 1px solid #0179BE;
}

.answers .form-radio label .box-p .ans {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 1.375rem;
}

.answers .form-radio label .box-p .qsn-number {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #F1F9EC;
   color: #444444;
   width: 1.875rem;
   height: 1.875rem;
   border-radius: 50%;
   font-size: 1rem;
   margin-right: -0.9375rem;
}

.answers .form-radio label input:checked~.box-p .qsn-number {
   background: #0179BE;
   color: #FFFFFF;
}

.question-box {
   width: 100%;
   background: #fff;
   border-radius: 20px;
   flex-direction: column;
   display: flex;
   position: relative;
   padding: 1.25rem;
   margin-bottom: 1.875rem;
}

.question-box p {
   color: #444444;
   font-size: 1rem;
   font-weight: 300;
}

.footer-qsn {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 6.25rem;
}

.footer-qsn .pb-btn, .footer-qsn .pb-btn-outline {
   line-height: 2.25rem;
   margin: 0 0.625rem;
}

.time {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #444444;
   font-size: 20px;
}

.time.time-exam .t {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
   background: linear-gradient(to bottom, #3CB652, #86C54B);
   border-radius: 10px;
   color: #FFFFFF;
   margin: 0 5px;
}

/* /exam */

/* Rules */

.card-detail-rules {
   display: flex;
   width: calc(100% - 40px);
   margin-right: 20px;
   flex-direction: column;
   background: #FFFFFF;
   box-shadow: 1px 2px 30px 0 rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   padding: 1.25rem;
}

/* /Rules */

/* online class */

.return-header {
   width: 100%;
   text-align: center;
   justify-content: center;
   align-items: center;
   color: #444444;
   background-color: #FAFAFA;
   border-radius: 12px;
   padding: 0 0.75rem;
   white-space: nowrap;
   line-height: 2.875rem;
}

.return-header a {
   display: flex;
}

.return-header a .txt {
   display: inline-block;
   margin-left: 1.875rem;
   color: #444444;
}

.return-header a .i-return {
   background: url(../img/return.svg) no-repeat center center /cover;
   width: 24px;
   height: 18px;
   display: flex;
   margin: auto;
}

.sidebar-menu-class {
   width: 300px;
   position: fixed;
   right: 20px;
   background-color: #FAFAFA;
   border-radius: 22px;
   z-index: 2;
   top: 95px;
   direction: ltr;
   transition: 0.3s;
}

.sidebar-menu-class.close-menu-class {
   right: -100%;
}

.sidebar-menu-class.close-menu-class~.main-content-class {
   width: 100%;
}

.sidebar-menu-class.close-menu-class .pm-main-box {
   display: none;
}

.main-content-class {
   padding-top: 95px;
   position: relative;
   z-index: 1;
   background-color: #FFFFFF;
   height: 100%;
   width: calc(100% - 332px);
   margin-right: auto;
   float: right;
   display: flex;
   position: relative;
}

.switch-bg {
   position: relative;
   display: inline-block;
   width: 102px;
   height: 48px;
   margin: 0;
   direction: rtl;
}

.switch-bg .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   background: #ffffff;
   left: 0;
   right: 0;
   bottom: 0;
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 12px;
}

.switch-bg .slider:before {
   position: absolute;
   content: "";
   height: 44px;
   width: 44px;
   right: 0;
   bottom: 0px;
   background-color: #F1F9EC !important;
   -webkit-transition: .4s;
   border: 1px solid #60B72C;
   transition: .4s;
   border-radius: 12px;
}

.switch-bg input:checked+.round {
   background: #ffffff;
}

.switch-bg input:checked+.slider:before {
   -webkit-transform: translateX(-57px);
   -ms-transform: translateX(-57px);
   transform: translateX(-57px);
}

.switch-bg .theme-toggler-bg {
   display: flex;
   align-items: center;
   height: 100%;
   position: relative;
   justify-content: space-between;
}

.switch-bg .theme-toggler-bg span {
   /* width: 15px; */
   /* height: 15px; */
   display: flex;
   justify-content: center;
   align-items: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
}

.switch-bg .theme-toggler-bg span.theme-toggler-public svg {
   width: 26px;
   height: 20px;
   margin: auto;
}

.switch-bg .theme-toggler-bg span.theme-toggler-public {
   padding-right: 10px;
}

.switch-bg .theme-toggler-bg span.theme-toggler-private svg {
   width: 16px;
   height: 20px;
}

.switch-bg .theme-toggler-bg span.theme-toggler-private {
   padding-left: 15px;
}

.switch-bg input:checked+.slider .theme-toggler-bg span.theme-toggler-private svg path {
   fill: #60B72C;
}

.slider .theme-toggler-bg span.theme-toggler-public svg path {
   fill: #60B72C;
}

.switch-bg input:checked+.slider .theme-toggler-bg span.theme-toggler-public svg path {
   fill: #A1A1A1;
}

.chat-box {
   display: flex;
   flex-direction: column;
   padding-top: 0.85rem;
   padding-bottom: 235px;
   overflow-y: scroll;
   /* transition: width 0.3s; */
   /* overflow-x: hidden; */
   height: calc(100vh - 55px);
   margin-top: 1.875rem;
   z-index: 5;
}

.chat-box::-webkit-scrollbar {
   width: 5px;
}

.chat-box::-webkit-scrollbar-track {
   background: #FAFAFA;
   border-radius: 5px;
}

.chat-box::-webkit-scrollbar-thumb {
   background: #EEEEEE;
   border-radius: 5px;
}

.chat-box input::-webkit-outer-spin-button, .chat-box input::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none !important;
   margin: 0;
}

.pm-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 1.875rem;
}

.pm-card-inner {
   display: flex;
   justify-content: center;
   align-items: center;
   direction: rtl;
}

.pm-card-image {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: 5px;
}

.pm-card-image img {
   border-radius: inherit;
}

.pm-card.sent .pm-main-box {
   background: #F1F9EC;
}

.pm-card.sent .pm-card-inner {
   direction: ltr;
}

.pm-card.sent .pm-header {
   flex-direction: row-reverse;
}

.pm-card.sent .pm-card-image {
   margin-right: 0;
   margin-left: 5px;
}

.pm-main-box {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #FFFFFF;
   box-shadow: 0 2px 20px rgb(0 0 0 / 10%);
   border-radius: 12px;
   padding: 0.75rem;
   z-index: 6;
   transition: 0.3s;
}

.pm-header {
   display: flex;
   justify-content: space-between;
   width: 100%;
   margin-bottom: 8px;
}

.pm-card-name {
   display: flex;
}

.pm-card-name .name {
   display: flex;
   color: #0179BE;
   font-size: 12px;
   font-weight: 300;
}

.pm-card-time {
   display: flex;
}

.pm-card-time .time {
   display: flex;
   color: #A1A1A1;
   font-size: 12px;
}

.pm-tct {
   display: flex;
}

.pm-tct p {
   display: flex;
   color: #444444;
   font-size: 14px;
   font-weight: 300;
   margin-bottom: 0;
}

.massage-box {
   display: flex;
   justify-content: space-between;
   position: fixed;
   bottom: 0;
   padding: 1.25rem;
   padding-top: 0;
   z-index: 6;
   direction: rtl;
   background: #f8f8f8;
   /* border-radius: 0 22px 22px 0; */
   margin-right: 20px;
}

.msg-inner-box {
   display: flex;
   border: 1px solid #D7D7D7;
   border-radius: 12px;
   background: #ffffff;
   align-items: center;
}

.massage-box .input-msg {
   /* position: relative; */
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
}

.massage-box .input-msg input {
   display: inline-block;
   line-height: 3rem;
   background: #ffffff;
   color: #444444;
   padding: 0px 13px;
   font-weight: 200;
   width: 100%;
   border-radius: 12px;
   outline: none;
   border: none;
}

.massage-box .i-msg-send {
   display: flex;
   background-repeat: no-repeat;
   background-image: url(../img/msg-send.svg);
   min-width: 48px;
   height: 48px;
   align-items: center;
   justify-content: center;
   border: none;
   background-color: transparent;
}

.v-class-hld {
   display: flex;
   width: 100%;
   height: calc(100vh - 95px);
   border-radius: 26px;
   background: #000;
   align-items: center;
   justify-content: center;
}

.v-class-hld img, .v-class-hld video {
   border-radius: inherit;
}

.header-chat {
   display: flex;
   margin: 20px;
   justify-content: flex-end;
}

.sidebar-menu-class .expend {
   display: flex;
   position: absolute;
   top: 20px;
   left: 20px;
}

.sidebar-menu-class .expend .i-expend {
   background: url(../img/expansion.svg) no-repeat center center /cover;
   width: 16px;
   height: 14px;
   display: flex;
   margin: auto;
}

.sidebar-menu-class~.expend {
   display: none;
}

.sidebar-menu-class.close-menu-class~.expend {
   padding: 15px 5px;
   border-radius: 10px 0 0 10px;
   display: flex;
   position: absolute;
   top: 85px;
   right: 0;
   background: #fafafa;
   cursor: pointer;
   z-index: 5;
}

.sidebar-menu-class.close-menu-class~.expend .i-expend {
   background: url(../img/expansion.svg) no-repeat center center /cover;
   width: 16px;
   height: 14px;
   display: flex;
   margin: auto;
   transform: rotate(180deg);
}

.answers-on-class {
   display: flex;
   flex-direction: column;
   background: #FFFFFF;
   border-radius: 26px;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   padding: 1.25rem;
   position: absolute;
   top: 95px;
   left: 20px;
   max-width: 38%;
   height: calc(100vh - 95px);
   overflow-y: scroll;
   direction: ltr;
}

.answers-on-class .answers .form-radio {
   width: 100%;
   margin-bottom: 8px;
}

.answers-on-class .qsn-on-class {
   display: flex;
   flex-direction: column;
   direction: rtl;
}

.counte-on-class {
   display: flex;
   margin: 20px 0 16px;
}

.counte-on-class .num {
   display: flex;
   color: #444444;
   font-size: 1rem;
}

.counte-on-class .all-qsn {
   display: flex;
   color: #444444;
   font-size: 1rem;
}

.time-exam-on-class {
   padding: 0 21px;
   background: #F1F9EC;
   border-radius: 5px;
   width: fit-content;
   margin: auto;
}

.time-exam-on-class .t {
   color: #60B72C;
   font-size: 1rem;
}

.answers-on-class .pb-btn {
   margin-top: 30px;
}

.answers-on-class::-webkit-scrollbar {
   width: 6px;
}

.answers-on-class::-webkit-scrollbar-track {
   background: #FAFAFA;
   border-radius: 5px;
   margin: 50px;
}

.answers-on-class::-webkit-scrollbar-thumb {
   background: #EEEEEE;
   border-radius: 5px;
}

.answers-on-class input::-webkit-outer-spin-button, .answers-on-class input::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none !important;
   margin: 0;
}

.form-hld-class {
   display: flex;
}

/* /online class */

/* notification-box-main  */

.ntf-box-main {
   position: unset;
   width: 100%;
   background: transparent;
   padding: 0;
   height: unset;
   margin-bottom: 6.25rem;
}

.ntf-box-main.notification-box .nt-body .nt-item {
   background: #FFFFFF;
   border-radius: 26px;
   padding: 1.25rem;
   margin-bottom: 1.25rem;
}

.ntf-box-main.notification-box .nt-item .nt-item-header a .nt-title {
   position: relative;
   font-size: 1rem;
   font-weight: 300;
}

.ntf-box-main.notification-box .nt-body .nt-item .nt-item-header a .nt-title::before {
   content: '';
   width: 7px;
   height: 36px;
   position: absolute;
   background-color: #60B72C;
   border-radius: 4px;
   left: -20px;
   top: 0;
   bottom: 0;
   margin: auto;
}

.ntf-box-main.notification-box .nt-body .nt-item::before {
   content: none;
}

.ntf-box-main .nt-item .nt-item-header a .nt-main-title {
   color: #444444;
   font-size: 1.125rem;
   margin-left: auto;
   position: relative;
   margin-right: 35px;
}

.ntf-box-main .nt-item .nt-item-body .des p {
   font-size: 1rem;
   font-weight: 400;
   margin-top: 1.25rem;
}

/* /notification-box-main  */

.toast.success {
   background-color: #3EF3D4;
}

.toast.warning {
   background-color: #dfaa18;
}

.toast.warning .toast-header {
   background-color: #dfaa18;
}

.toast.warning .toast-header span {
   color: #fff;
}

.toast.warning .toast-body {
   color: #fff;
}

.toast.success .toast-header {
   background-color: #3EF3D4;
}

.toast.success .toast-header span {
   color: #4C249F;
}

.toast.success .toast-body {
   color: #4C249F;
}

.toast.error {
   background-color: #ff5353;
}

.toast.error .toast-header {
   background-color: #ff5353;
   border-color: #bf1515;
}

.toast.error .toast-header span {
   color: #fff;
}

.toast.error .toast-body {
   color: #fff;
}

.toast {
   width: 350px;
   max-width: 100%;
   font-size: 0.875rem;
   pointer-events: auto;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   border-radius: 4px;
}

.toast:not(.showing):not(.show) {
   opacity: 0;
}

.toast.hide {
   display: none;
}

.toast-container {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
   max-width: 100%;
   pointer-events: none;
}

.toast-container> :not(:last-child) {
   margin-bottom: 15px;
}

.toast-header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 0.5rem 0.75rem;
   color: #6c757d;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
}

.toast-header .btn-close {
   margin-right: -0.375rem;
   margin-left: 0.75rem;
}

.toast-body {
   padding: 0.75rem;
}
.video_apex{
   width: 100%;
   height:100%;
   min-height:500px;
   display:block;
   position:relative;
}