body {
    font-family: 'Roboto', sans-serif;
    background: #F5F6FA;
    color: #2E4765;
}

::-webkit-scrollbar {
    width: 0.2em;
}

::-webkit-scrollbar-thumb {
    background-color: #C79C3B;
    outline: none;
    scrollbar-color: #C79C3B;
}


p {
    font-weight: 300;
}

.btn:focus, button:focus, *:focus {
    outline: none;
}

a:hover {
    text-decoration: none;
}

/* btn styles */

.myBtn {
    border-radius: 16px;
    padding: 14px 20px;
    border: none;
    color: #fff;
    background: transparent linear-gradient(270deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
    cursor: pointer;
    transition: 0.4s ease all;
    text-align: center;
    display: inline-block;
    text-transform: capitalize;
    white-space: nowrap;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}

.myBtn.btnSm {
    padding: 6px 15px;
    font-size: 12px;
}

.myBtn.primary {
    background: #ccf3ff;
    border: 1px solid #1aa3de;
    color: #1aa3de
}

.myBtn.success {
    background: #d4f6ee;
    border: 1px solid #00c99c;
    color: #00c99c
}

.custom_labels {
    color: #6c757d !important;
    padding-left: 10px;
    margin-bottom: 0px;
}

.myBtn.danger {
    background: #ffd9d9;
    border: 1px solid #c60808;
    color: #c60808
}

.myBtn.warning {
    background: #f9e3c5;
    border: 1px solid #ffc162;
    color: #ffc162
}

.myBtn.dark {
    background: #000000;
}

.myBtn.golden {
    background: #C79C3B;
}

.myBtn.cancelBtn {
    background: transparent;
    color: #C79C3B;
}

.myBtn.primary:hover {
    background: #1aa3de;
}

.myBtn.success:hover {
    background: #00c99c;
}

.myBtn.danger:hover {
    background: #c60808;
}

.myBtn.warning:hover {
    background: #ffc162;
}

.myBtn.golden:hover {
    background: #000000;
}

.myBtn.cancelBtn:hover {
    background: #C79C3B;
}

.myBtn:hover {
    color: #fff;
}

/* bade styles  */

.badge {
    font-size: 12px;
    border-radius: 12px;
    font-weight: 400;
    display: inline-block;
    padding: 5px 12px;
}

.badge.primary {
    background: #ccf3ff;
    border: 1px solid #1aa3de;
    color: #1aa3de
}

.badge.success {
    background: #d4f6ee;
    border: 1px solid #00c99c;
    color: #00c99c
}

.badge.danger {
    background: #ffd9d9;
    border: 1px solid #c60808;
    color: #c60808
}

.badge.warning {
    background: #f9e3c5;
    border: 1px solid #ffc162;
    color: #f29300
}

/* status styles with dot starts here */

.status span {
    position: relative;
}

.status.danger span {
    color: #c60808;
}

.status.warning span {
    color: #FFC162;
}

.status.success span {
    color: #00c99c;
}

.status span::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: black;
    left: -12px;
    border-radius: 50%;
    top: 2px;
}

.status.danger span::before {
    background: #c60808;
}

.status.warning span::before {
    background: #FFC162;
}

.status.success span::before {
    background: #00c99c;
}

/* document icon */

.docIcon {
    height: 50px;
    width: 50px;
    display: inline-block;
    margin-right: 8px;
}

.docIcon.success svg {
    fill: #00c99c;
}

.docIcon.warning svg {
    fill: #FFC162;
}

.docIcon.danger svg {
    fill: #c60808;
}

.docIcon.warning {
    padding: 6px;
    background: #F9E3C5;
    border-radius: 5px;
}

.docIcon.success {
    padding: 6px;
    background: #D4F6EE;
    border-radius: 5px;
}

.docIcon.danger {
    padding: 6px;
    background: #FFD9D9;
    border-radius: 5px;
}

/**********************
common styles ends here
***********************/

/* side bar starts here */

.sideBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100vh;
    z-index: 1;
    background: url('../images/sidebarBG.png');
    background-size: cover;
    background-position: center;
    transition: 0.4s ease all;
}

.logoWrapper {
    width: 100%;
    padding: 0 15px;
    height: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ffffff42;
}

.logo {
    display: inline-block;
    width: 140px;
}

.logo img {
    width: 100%;
}

.logo2 {
    display: none;
}

.menuListing {
    padding: 15px;
    padding-right: 19px;
}

.mainMenu {
    max-height: calc(100% - 208px);
    min-height: calc(100% - 208px);
    overflow: auto;
    scrollbar-width: thin;
}

.menuListing::-webkit-scrollbar {
    width: 0.2em;
}

.menuListing::-webkit-scrollbar-thumb {
    background-color: #C79C3B;
    outline: none;
    scrollbar-color:  #C79C3B;
}
.course_content .tabsList{
    padding-bottom: 20px;
}
.mod_head {
    font-size: 1.5em;
    text-align: center;
}
.menuListing ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuListing ul.subMenu {
    /* padding-left: 10px; */
    display: none;
    margin: -7px 6px 0px;
    padding: 6px 8px 2px 15px;
    background-color: #7b8698;
    border-radius: 1px 1px 10px 10px;
}

.menuListing ul li a {
    color: #fff;
    text-decoration: none;
    padding: 12px 6px;
    display: flex;
    align-items: center;
    font-weight: 300;
    border-radius: 6px 0 0 6px;
    font-size: 15px;
    transition: 0.4s ease all;
    position: relative;
}

.menuListing ul li a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 70%;
    width: 7px;
    border-radius: 4px 0 0 4px;
    transform: translateY(-50%);
    transition: 0.4s ease all;
    opacity: 0;
    background: #C79C3B;
}

.menuListing ul li a i {
    width: 20px;
    flex: 0 0 20px;
}

.menuListing ul li a i svg {
    width: 100%;
    fill: #fff;
}

.menuListing ul li a:hover {
    color: #fff;
}

.menuListing ul.subMenu li a {
    margin-left: 20px;
}

.menuListing ul li a span {
    margin-left: 10px;
}

.menuListing ul li a.active {
    color: #fff;
    background: #C9BFB44D;
}

.menuListing ul li a.active::after {
    opacity: 1;
}

.menuListing ul.subMenu li a.active {
   /*  background: #fff;
    color: #fff;
    box-shadow: 0 0 0 0 rgb(85 85 85 / 37%); */
    background: #C9BFB44D;
    color: #fff;
    box-shadow: 0 0 0 0 rgb(85 85 85 / 37%);
    border-top-left-radius: 0;
}
.menuListing ul.subMenu li a.active::after{
    height: 60%;
    width: 4px;
}
.hasChild {
    position: relative;
}

.hasChild>a {
    position: relative;
}

.hasChild>a::after {
    content: "\f105";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size: 18px;
    transition: 0.4s ease all;
}

/* .hasChild>a.active::after {
    transform: translateY(-50%) rotate(90deg);
} */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    transform:rotate(180deg)
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
.logout {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid #ffffff42;
}

/* sidebar closed design starts here */

.sideBar.closed {
    width: 70px;
    border-radius: 10px;
    height: calc(100vh - 20px);
    margin-top: 10px;
    margin-left: 10px;
}

.sideBar.closed .mainMenu {
    max-height: calc(100% - 117px);
    min-height: calc(100% - 117px);
}

.sideBar.closed .menuListing {
    padding-right: 0;
}

.sideBar.closed .logoWrapper {
    width: 100%;
    padding: 0;
    height: 70px;
}

.sideBar.closed .menuListing ul li a span, .sideBar.closed .logo1 {
    display: none;
}
/* .sideBar.closed .menuListing ul li a .notify_count_sidebar {
    display: block !important;
} */

.sideBar.closed .logo2 {
    display: block;
}

.sideBarClosed .pageWrapper {
    margin-left: 80px;
    transition: 0.4s ease all;
    border-left: none;
    border-radius: 0;
}

.sideBarClosed .topBar {
    width: calc(100% - 95px);
    left: 95px;
}

/* top bar starts here */

.topBar {
    position: fixed;
    z-index: 3;
    width: calc(100% - 268px);
    left: 268px;
    top: 0;
    padding: 15px;
    transition: 0.4s ease all;
}

.topBarInnwe {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0px 0px 32px #C2D4FF40;
    padding: 0 15px;
    border-radius: 12px;
    transition: 0.4s ease all;
}

.titleWrapper {
    display: flex;
    align-items: center;
}

.toggleMenu {
    cursor: pointer;
    display: inline-block;
    left: 0px;
    position: relative;
    width: 26px;
    height: auto;
    -webkit-transition: 0.4s ease all;
    transition: 0.4s ease all;
}

.toggleMenu span {
    background: #2E4765;
    display: block;
    height: 2px;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: auto;
    -webkit-transition: 0.4s ease all;
    transition: 0.4s ease all;
}

.toggleMenu span:nth-child(1) {
    width: 20px;
}

.toggleMenu span:nth-child(2) {
    width: 26px;
}

.toggleMenu span:nth-child(3) {
    width: 22px;
}

.toggleMenu.active span:nth-child(1) {
    -webkit-transform: translateY(2px) rotate( 45deg);
    transform: translateY(2px) rotate( 45deg);
}

.toggleMenu.active span:nth-child(3) {
    -webkit-transform: translateY(-2px) rotate( -45deg);
    transform: translateY(-2px) rotate( -45deg);
}

.toggleMenu.active span:nth-child(2) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    width: 22px;
    height: 2px;
}

.toggleMenu.active span:nth-child(1), .toggleMenu.active span:nth-child(3) {
    width: 10px;
    height: 2px;
}

.topBarInnwe h1 {
    font-size: 24px;
    font-weight: 900;
    color: #2E4765;
    margin: 0;
    margin-left: 15px;
}

.navWrapper {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profileView {
    text-align: center;
    color: #455a64;
    padding: 15px;
    border-bottom: 1px solid rgba(120, 130, 140, 0.13);
}

.profileView h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
}

.profileView p {
    font-size: 13px;
    margin-bottom: 0;
}

.profileImg {
    position: relative;
    width: 80px;
    height: 80px;
    /* overflow: hidden; */
    border-radius: 50%;
    /* border: 1px solid #445ede80; */
    margin: auto;
    margin-bottom: 10px;
}

.profileImg::before {
    content: "";
    position: absolute;
    bottom: 1%;
    right: 5%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: #009688;
    z-index: 222;
}

.profileImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profileBtn a {
    font-size: 14px;
    color: #445ede;
    transition: 0.4s ease all;
}

.profileBtn a+a {
    margin-left: 5px;
}

.profileBtn a:hover {
    color: #304aca;
}

.profileDropdown {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    box-shadow: 0 0 0 0 #ffffff40;
    transition: 0.4s ease all;
}

.profileDropdown img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown {
    display: inline-block;
    padding: 0 5px;
}

.profileCard {
    /* width: 210px; */
    width: 250px;
    box-shadow: 1px 0 14px rgb(0 0 0 / 22%);
    border: none;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    transform: none !important;
    left: auto !important;
}

.profileHeader {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eef5f9;
}

.profileHeader .profileImg {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    margin: 0;
    margin-right: 10px;
}

.proDetails h3 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
}

.proDetails span {
    font-size: 12px;
}

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

.profileCard ul a {
    color: #455a64;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    transition: 0.4s ease all;
    margin-bottom: 2px;
}
.profileCard ul a span{
    font-weight: 300;
    font-size: 90%;
}
.profileCard ul a i {
    margin-right: 6px;
}

.profileCard ul a:hover {
    background: #eef5f9;
}

.searchField {
    width: 380px;
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

.searchField input {
    width: 100%;
    border: none;
    background: #d8d8d838;
    border-radius: 5px;
    outline: none;
    padding: 8px 12px;
    font-size: 15px;
    color: #fff;
}

.searchField input::placeholder {
    color: #ffffff75;
}

.searchField button {
    background: #6e85ff;
    position: absolute;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 5px 14px;
    font-size: 14px;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    cursor: pointer;
    box-shadow: 0 0 8px #1034f5ad;
}

/* notification starts here */

.notification {
    width: 30px;
    border: none;
    cursor: pointer;
    background: none;
}

.notification svg {
    fill: #2E4765;
}

/* page content area starts here */

.pageWrapper {
    margin-left: 248px;
    margin-top: 0;
    min-height: 100vh;
    transition: 0.4s ease all;
    border-left: 5px solid #c79c3b;
    border-radius: 25px 0 0 25px;
    z-index: 2;
    position: relative;
    padding: 0 15px 0 30px;
    overflow: hidden;
    padding-top: 95px;
    background: #F5F6FA;
}

.pageTitle {
    margin-bottom: 15px;
}
.pageTitle.as_card{
    height: calc(100% - 15px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.pageTitle h2 {
    color: #2E4765;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 0;
}

.sectionTitle {
    color: #08152C;
    font-size: 24px;
    /* font-size: 20px; */
    font-weight: 500;
    margin-bottom: 10px;

    /* font-size: 30px;
    font-family: 'Satoshi-bold';
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
    color: #08152C;
    line-height: normal; */
}
.contentWrapper p{
    text-align: left;
    letter-spacing: 0.1px;
    color: #7B8698;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.pageTitle h2 b {
    font-weight: 800;
}

.pageTitle p {
    /* color: #B6C5D8; */
    color: #2E4765;
    margin-bottom: 0;
}

.contentCard {
    position: relative;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 30px;
    box-shadow: 0 4px 6px 0 rgb(85 85 85 / 9%), 0 1px 20px 0 rgb(0 0 0 / 8%), 0px 1px 11px 0px rgb(0 0 0 / 6%);
    box-shadow: 0 0 40px 0 rgb(94 92 154 / 6%);
}

.nsc-bottom-bar{
    margin: 10px;
    padding: 20px;
}

.ai_contentCard {
    position: relative;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 50px;
    padding: 65px 30px;
    box-shadow: 0 4px 6px 0 rgb(85 85 85 / 9%), 0 1px 20px 0 rgb(0 0 0 / 8%), 0px 1px 11px 0px rgb(0 0 0 / 6%);
    box-shadow: 0 0 40px 0 rgb(94 92 154 / 6%);
}

.cardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cardHeader h1 {
    font-size: 20px;
    width: 100%;
    font-weight: 700;
    color: #2E4765;
    margin-bottom: 0;
}

.cardHeader .toogleCard {
    color: #fff !important;
    background-color: #1b55e2!important;
    border-color: #1b55e2;
    box-shadow: 0 10px 20px -10px #1b55e2;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: 0.4s ease all;
}

.cardHeader .toogleCard i {
    transition: 0.4s ease all;
    transform: rotate(0);
}

.cardHeader .toogleCard.open i {
    transform: rotate(180deg);
}

.cardHeader .toogleCard:hover {
    box-shadow: 0 0 0 0 #1b55e2;
}

.cardBody {
    padding-top: 15px;
}

.topBar.stickTop {
    padding-top: 0;
}

.topBar.stickTop .topBarInnwe {
    border-radius: 0 0 15px 15px;
}

/* table design starts here */

/* table designs starts here */

.secondaryTable table {
    width: 100%;
    margin-bottom: 150px;
}

.secondaryTable table thead {
    background: transparent linear-gradient( 272deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

.secondaryTable th+th, .secondaryTable td+td {
    text-align: center;
}

.secondaryTable td, .secondaryTable th {
    font-size: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid #d8d8d8;
    font-weight: 300;
}

/* main table design  */

.mainTable table {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0 20px;
}

.mainTable table tbody tr {
    background: #ffffff;
    box-shadow: 0px 3px 5px #5467ef0f;
    border-radius: 15px;
    margin-top: 15px;
}

.mainTable table td {
    padding: 15px 5px;
    color: #727174;
    font-size: 14px;
}
.danger_bg{
    background:  #F32013 !important;
}
.mainTable table .danger_bg td {
    color: #fff;
}
.mainTable table td:first-child {
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    text-align: left;
    padding-left: 20px;
}

.mainTable table td:last-child {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    text-align: right;
    padding-right: 20px;
}
.mainTable table th:first-child {

    text-align: left;
    padding-left: 20px;
}

.mainTable table th:last-child {

    text-align: right;
    padding-right: 50px;
}

.mainTable .circleProgress {
    max-height: 40px;
    max-width: 40px;
    margin: auto;
}
.mainTable .circleProgress span{
    font-size: 80%;
}
.mainTable .pagination {
    padding-top: 35px;
}

.mainTable .pagination .page-item {
    margin: 0 10px;
}

.mainTable .pagination .page-link {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    border: none;
    color: #B4B4B4;
}

.mainTable .pagination .page-link.active {
    background: #D4D4D4
}

/* .paginationWrapper ul {
    float: right;
}

.paginationWrapper .page-link {
    width: 35px;
    height: 35px;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paginationWrapper .page-link svg {
    width: 16px;
}

.page-item.active .page-link {
    background-color: #304aca;
    border-color: #304aca;
    border: 1px solid #e0e6ed;
} */

/* form design starts here */

.formWrapper .cardHeader h1 {
    font-size: 16px;
    padding-bottom: 5px;
}

.inlineField label {
    margin: 0;
}

.formWrapper label {
    /* color: #3b3f5c;
    font-size: 14px;
    font-weight: 500; */
    font-size: 14px;
    font-weight: 500;
    color: #0F1825;
    /* font-family: 'Satoshi-bold'; */
    line-height: 15.6px;
}

.formWrapper input:not([type='checkbox'], [type='radio']), .formWrapper select, .formWrapper textarea {
    /* border-radius: 7px;
    padding: 10px;
    font-size: 14px;
    height: 45px;
    border: 1px solid #e0e6ed;
    -webkit-box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    transition: 0.4s ease all;
    width: 100%; */
    border-radius: 16px;
    padding: 12px 16px 13px 20px;
    font-size: 14px;
    height: 60px;
    border: 1px solid #D0D7E2;
    -webkit-box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    transition: 0.4s ease all;
    width: 100%;
}
.icon_input {
    padding: 12px 16px 13px 42px !important;
}
/* .formWrapper .country_field_bx input:not([type='checkbox'], [type='radio']),
.formWrapper .country_field_bx select,  */
.formWrapper .country_field_bx .radio_input {
    padding: 12px 16px 13px 46px;
    border-radius: 16px;
    font-size: 14px;
    height: 60px;
    border: 1px solid #D0D7E2;
    -webkit-box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    box-shadow: 0 0 0 0 rgb(31 45 61 / 10%);
    transition: 0.4s ease all;
    width: 100%;
}
.formWrapper .country_field_bx .radio_input.input {
    padding: 12px 16px 13px 20px;
}
.formWrapper .country_field_bx .radio_input input {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 17px;
    top: 17px;
}
input[type=radio]#radio_btn {
    accent-color: #2A67DD;
}
.formWrapper .country_field_bx .radio_input span{
    color: #0F1825;
    /* font-family: Satoshi; */
    font-size: 15px;
    font-weight: 700;
    line-height: 32px;
}
.formWrapper textarea {
    height: auto;
    resize: none;
}

.formWrapper input:not([type='checkbox'], [type='radio']):focus, .formWrapper select:focus, .formWrapper textarea:focus {
    -webkit-box-shadow: 2px 5px 17px 0 rgb(31 45 61 / 10%);
    box-shadow: 2px 5px 17px 0 rgb(31 45 61 / 10%);
    border: 1px solid #304aca;
}

.searchWrapper select {
    width: 30%;
    float: left;
    border-right: none;
    border-radius: 7px 0 0 7px;
}

.searchWrapper input:not([type='checkbox'], [type='radio']) {
    width: 70%;
    float: left;
    border-radius: 0 7px 7px 0;
}

.customCheck {
    position: relative;
    margin: 0 4px;
}

.customCheck::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #dcdcdc;
    border-radius: 50%;
}

.customCheck::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #dcdcdc;
    border: 1px solid #dcdcdc;
    /*  transition: 0.4s ease all; */
    cursor: pointer;
}

.customCheck:checked:after {
    border-color: #ffffff;
    border-width: 2px;
    border-top: none;
    border-left: none;
    width: 5px;
    transform: translate(-50%, -60%) rotate(45deg);
    background: #00C99C;
}

.customCheck:checked:before {
    background: #00C99C;
}

.inlineInput {
    display: flex;
    align-items: center;
}

.inlineInput input {
    width: 100%;
    margin-left: 10px;
}

.radio_btn label {
    padding-right: 30px;
    padding-left: 10px;
}

.radio_btn {
    padding: 0 30px;
}

.custom_checkbox input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.custom_checkbox .checkmark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Admin dashboard cards design starts here */

/* dashboard cards design starts here */

.dashboardCard {
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    /* height: 100%; */
    height: calc(100% - 15px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
    transition: 0.4s ease all;
    margin-bottom: 15px;
    /* cursor: pointer; */
    position: relative;
}

.dashboardCard h3 {
    font-size: 20px;
    font-weight: 700;
}
.dashboardCard h1 {
    font-size: 45px;
    font-weight: 700;
}
.counts h2 {
    font-size: 28px;
}

.counts h2 span {
    color: #00C99C;
    font-size: 15px;
    font-weight: 400;
}

.counts h4 {
    font-size: 18px;
    margin-bottom: 0;
}

.counts.small h2 {
    font-size: 20px;
}

.counts p {
    font-size: 14px;
    margin-bottom: 0;
}

.dashboardCard a {
    font-size: 14px;
}

.cardIcon {
    font-size: 70px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    transition: 0.4s ease all;
}

.cardContent {
    max-width: 70%;
}

.fullWidth {
    width: 100%
}

.counts+.counts {
    margin-top: 10px;
}

.counts.small .circleProgress {
    max-height: 60px;
    max-width: 60px;
}

.counts.small .circleProgress span {
    font-size: 18px;
}

.counts.small {
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.dashboardCard.green {
    background: transparent linear-gradient(298deg, #02A883 0%, #48AEBE 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

.dashboardCard.blue {
    background: transparent linear-gradient(298deg, #3956E5 0%, #07B4E6 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}
.dashboardCard.purple {
    background: transparent linear-gradient( 298deg , #8339e5 0%, #9a07e6 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}
.dashboardCard.red {
    background: transparent linear-gradient(115deg, #EA4A85 0%, #BB0449 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}
.dashboardCard.golden {
    background: transparent linear-gradient(119deg, #FEB72B 0%, #D4900A 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}
.dashboardCard.yellow {
    background: transparent linear-gradient( 298deg , #e55939 0%, #e69907 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}
.dashboardCard.grey {

    background:#8983834a;
    /* background: transparent linear-gradient(298deg, #babdcfe0 0%, #addae7c9 100%) 0% 0% no-repeat padding-box; */
    color: #fff;
}

/* line progress bar starts here */

.progressWraper {
    overflow: hidden;
    height: 17px;
    padding-top: 6px;
    margin-right: -5px;
    padding-right: 5px;
}

.progress {
    height: .35rem;
    background-color: #ffffff4f;
    overflow: visible;
}

.progress-bar {
    background-color: #ffffff;
    position: relative;
    border-radius: 8px;
}

.progress_node {
    position: absolute;
    right: -4px;
    width: 15px;
    height: 15px;
    background: #385ae5;
    border-radius: 50%;
    border: 3px solid #fff;
}

.progress .progress-bar {
    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

@keyframes animateBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.progressWraper.gradient .progress-bar {
    background: transparent linear-gradient(90deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
}

.progressWraper.gradient .progress {
    background-color: #C8C8C8;
}

/* circle progress bar starts here */

.circleProgress-sm svg {
    width: 38px !important;
    height: 42px !important;
    transform: rotate(-90deg) !important;
}

.circleProgress {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 120px;
    max-width: 120px;
}

.circleProgress span {
    font-weight: 700;
    font-size: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.circleProgress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circleProgress .bg {
    fill: none;
    stroke-width: 16px;
    stroke: #C0CDF2;
}

.circleProgress .inCircle {
    fill: none;
    stroke-width: 16px;
    stroke: #00C99C;
    stroke-linecap: round;
    stroke-dasharray: 565.487;
    stroke-dashoffset: 565.487;
    transition: stroke-dashoffset 0.8s ease-in-out 0s;
}

/* dashboard page srarts here */

.newsWrapper {
    padding: 15px;
    background: #D4F6EE;
    box-shadow: 0px 0px 25px #8C98A429;
    border: 1px dashed #00C99C;
    border-radius: 8px;
}
.newsWrapper.new {
    background: #f7f7f7;
    box-shadow: 0px 0px 25px #8c98a429;
    border: none;
    /* border: 1px dashed #858585; */
}

.newsWrapper h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 5px;
}

.newsWrapper p {
    font-size: 14px;
    margin: 0;
}

.dateInline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: 500;
}

.dateInline svg {
    width: 16px;
    margin-right: 10px;
}

.newsWrapper+.newsWrapper {
    margin-top: 10px;
}

/* calender design starts here */

.datepicker thead tr:nth-child(2) th {
    font-weight: 500;
    color: #2E4765;
    font-size: 18px;
    background: #fff;
    transition: 0.4s ease all;
}

.datepicker thead tr:nth-child(2) th:hover {
    background: #eff1f9;
}

.calenderDesign .datepicker th {
    font-weight: 400;
    color: #2E4765;
    font-size: 14px;
}

.datepicker td, .datepicker th {
    min-width: 44px;
    height: 44px;
}

.datepicker tbody td.disabled {
    cursor: not-allowed;
}

.datepicker tbody td, .datepicker table tr td.highlighted {
    background: #fff;
    position: relative;
    font-size: 14px;
    border-radius: 50%;
}

.datepicker tbody tr {
    position: relative;
    z-index: 3;
}

.datepicker table tr td {
    color: #575656;
}

.datepicker tbody td.highlighted::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #F4F5FA;
}

.datepicker tbody tr:first-child td::before {
    border-radius: 50px 50px 0 0;
}

.datepicker tbody tr:last-child td::before {
    border-radius: 0 0 50px 50px;
}

.datepicker tbody td.active {
    background: inherit;
}

.datepicker tbody td.active::before {
    opacity: 1;
}

.datepicker table tr td.highlighted {
    background: transparent;
}

.datepicker table tr td.active {
    background: linear-gradient(51deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box !important;
}

.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    cursor: not-allowed;
    color: #9CA7B2;
}

.datepicker-inline {
    width: auto;
}

/* calender design ends here */

/* event section starts here */

.eventsOuter {
    display: flex;
}

.events {
    width: 100%;
    padding-left: 15px;
}

.eventsListing {
    max-height: 335px;
    overflow: auto;
}
.eventWrapper.primary{
    background: transparent linear-gradient(97deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
}
.eventWrapper {
    cursor: pointer;
    background: #C79C3B;
    padding: 12px;
    padding-right: 20px;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 3px 3px 10px #8d8d8d4f;
    position: relative;
    transition: 0.4s ease all;
}

.eventWrapper::after {
    content: "\f105";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 50%;
    right: 20px;
    color: #fff;
    opacity: 0.7;
    transform: translateY(-50%);
    transition: 0.4s ease all;
}

.eventWrapper p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
}

.timeInline {
    color: #fff;
    font-size: 12px;
    opacity: 0.7;
}

.timeInline svg {
    width: 15px;
    transform: translateY(-1px);
    fill: #fff;
}

.eventWrapper:hover {
    box-shadow: 0 0 0 #8d8d8d4f;
}

.eventWrapper:hover::after {
    right: 10px;
    opacity: 1;
}

/* ********************
appointment page starts
**********************/

.appointmentOuter {
    display: flex;
    justify-content: space-between;
}

.timeSlots {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F5F6FA 100%) 0% 0% no-repeat padding-box;
    width: 130px;
    text-align: center;
}

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

.btnSelect {
    background: #fff;
    color: #2E4765;
    font-size: 14px;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 3px 6px #00000029;
    padding: 8px 20px;
    display: inline-block;
    cursor: pointer;
    fill: #2E4765;
    transition: 0.4s ease all;
}

.btnSelect svg {
    width: 15px;
}

.btnSelect:hover {
    background: #f4f5fa;
}

.btnSelect.active {
    background: transparent linear-gradient(104deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
    color: #fff;
    fill: #fff;
}

.timeSlots .btnSelect+.btnSelect {
    margin-top: 20px;
}

.calenderDesign .btnSelect {
    margin: 15px 0;
}

.calenderDesign .btnSelect+.btnSelect {
    margin-left: 10px;
}

.dateWrapper {
    color: #2E4765;
    fill: #2E4765;
    display: flex;
    align-items: center;
}

.dateWrapper p {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    margin: 0;
    line-height: 1.3;
}

.dateWrapper svg {
    width: 38px;
    flex: 0 0 38px;
    margin-right: 12px;
}

.dateWrapper p span {
    display: block;
    font-size: 12px;
    font-weight: 300;
    opacity: 0.7;
}

.dateWrapper+.dateWrapper {
    margin-top: 15px;
}
.appointmentCard.admin{
    width: auto;
    color: #ffffff;
    border-radius: 18px;
    min-height: 465px;
}
.appointmentCard {
    padding: 20px;
    background: transparent linear-gradient( 144deg, #672DDE 0%, #4069EB 100%) 0% 0% no-repeat padding-box;
    border-radius: 18px 18px 0 0;
    max-width: 100%;
    width: 340px;
}

.appointmentCard .dateWrapper {
    color: #fff;
    fill: #fff;
}

.appointmentHeader {
    background: #ffffffcf;
    border-radius: 18px 18px 0 0;
    padding: 15px;
}

.userInfo {
    display: flex;
    align-items: center;
}

.userInfo h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #4536E3;
}

.userInfo p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.2;
    color: #2E4765;
}

.userDetail {
    margin-left: 10px;
}

.userImg {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.userImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-80 {
    width: 80px;
    flex: 0 0 80px;
    height: 80px;
}

.w-60 {
    width: 60px;
    flex: 0 0 60px;
    height: 60px;
}

.w-50 {
    width: 50px;
    flex: 0 0 50px;
    height: 50px;
}

.w-40 {
    width: 40px;
    flex: 0 0 40px;
    height: 40px;
}
.w-30 {
    width: 30px;
    flex: 0 0 30px;
    height: 30px;
}
.appointmentChanel.red{
    background: transparent linear-gradient(100deg, #EA4A85 0%, #BB0449 100%) 0% 0% no-repeat padding-box;
}
.appointmentChanel.green{
    background: transparent linear-gradient(100deg, #79CABD 0%, #09A46F 100%) 0% 0% no-repeat padding-box;
}
.appointmentChanel.orange{
    background: transparent linear-gradient(101deg, #FF8335 0%, #BE4900 100%) 0% 0% no-repeat padding-box;
}
.appointmentChanel.yellow{
    background: transparent linear-gradient(100deg, #FEB72B 0%, #D4900A 100%) 0% 0% no-repeat padding-box;
}
.appointmentChanel.blue{
    background: transparent linear-gradient(100deg, #44BBE8 0%, #0087B8 100%) 0% 0% no-repeat padding-box;
}
.appointmentChanel {
    display: flex;
    /* align-items: center; */
    justify-content: space-around;
    max-width: 100%;
    color: #fff;
    margin: 20px 0;
}
.cahnel_wrapper .appointmentChanel{
    width: calc(100% - 60px);
    margin: 6px 0;
}
.admin .appointmentChanel{
    /* padding: 5px 0; */
    padding: 12px;
    border-radius: 10px;
    position: relative;
    z-index: 1;

}

.admin .dateWrapper svg{
    width: 25px;
    flex: 0 0 25px;
    margin-right: 5px;
}
.admin .appointmentChanel::before {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    /* top: 40%; */
    top: 27px;
    left: 50%;
    width: calc(100% - 148px);
    height: 1px;
    background: #fff;
    z-index: -1;
}
.appointmentChanel span {
    margin-top: 2px;
    font-size: 10px;
    opacity: 0.7;
    display: block;
    text-align: center;
}

.appointmentChanel .userImg, .appointmentChanel .viaIcon {
    margin: auto;
}

.appointmentChanel .viaIcon {
    background: #fff;
    width: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appointmentChanel .viaIcon svg {
    width: 60%;
}

.appointmentCard .myBtn {
    width: 100%;
    margin-top: 20px;
}

/* chat section starts here */
.chatTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    padding: 20px;
    background: #f3f4fa;
}

.chatWrapper {
/*     height: calc(100vh - 110px); */
    height: calc(100vh - 170px);
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px 0 2E476514, 0 1px 20px 0 2E476514, 0px 1px 11px 0px 2E476514;
    margin-bottom: 15px;
    box-shadow: -30px 20px 20px #2E476514, 30px 20px 20px #2E476514;
}

.ChatArea {
    height: calc(100% - 90px);
    overflow: auto;
}
.mainLessonBody .ChatArea{
    /* height: calc(100% - 166px); */
    height: calc(100% - 226px);
}
.MsgRecived, .MsgSent {
    padding: 15px;
    max-width: 60%;
    width: fit-content;
}


.msg_icons {
    max-width: 25px;
    margin: 0px 5px 0px 5px;
}

.MsgSent {
    display: block;
    margin-left: auto;
}

.MsgSent .Message .dropdown {
    position: absolute;
    right: -35px;
    top: 0;
    cursor: pointer;
}

.MsgRecived .Message .dropdown{
    position: absolute;
    right: -35px;
    top: 0;
    cursor: pointer;
}

.Message .dropdown .profileCard{
    width: auto;
}

.MsgRecived {
    display: block;
    margin-left: 0;
}

.Message {
    background: #F5F6FA;
    max-width: calc(100% - 60px);
    width: fit-content;
    padding: 15px;
    position: relative;
    margin-left: 60px;
    /* font-size: 14px; */
    font-size: 16px;
    font-weight: 400;
    z-index: 2;
}

.Message+.Message {
    margin-top: 5px;
}

/* .Message:nth-last-child(2)::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 18px;
    height: 18px;
    background: #F5F6FA;
    transform: rotate( 89deg) skew( 14deg, 14deg);
    z-index: -2;
} */

.massanger {
    display: flex;
    align-items: center;
    margin-top: -6px;
    font-size: 12px;
}

.massanger .userImg {
    margin-right: 15px;
}

.massanger .time {
    white-space: nowrap;
}

/* .massanger .name {
    width: 100%;
} */

/* msg sent design starts here */

.MsgSent .Message {
    background: transparent linear-gradient(105deg, #C9E5EF 0%, #a0d7eb 100%) 0% 0% no-repeat padding-box;
    color: #000;
    margin-right: 60px;
    margin-left: auto;
}

.MsgSent .massanger {
    flex-direction: row-reverse;
}

.MsgSent .massanger .userImg {
    margin-right: 0;
    margin-left: 15px;
}

.MsgSent .massanger .name {
    text-align: right;
}

.MsgSent .Message::before {
    left: auto;
    right: -2px;
    background: #96d8f0;
    transform: rotate( -89deg) skew( -14deg, -14deg);
}

/* border radius design */

.MsgRecived .Message {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.MsgRecived .Message:first-child {
    border-top-left-radius: 8px;
}

.MsgRecived .Message:nth-last-child(2) {
    border-bottom-left-radius: 8px;
}

.MsgSent .Message {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.MsgSent .Message:first-child {
    border-top-right-radius: 8px;
}

.MsgSent .Message:nth-last-child(2) {
    border-bottom-right-radius: 8px;
}

.dateSpliter {
    margin: auto;
    text-align: center;
    position: relative;
    font-size: 12px;
    z-index: 0;
    padding: 15px 0;
    margin: 0 15px;
}

.dateSpliter::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #E9E9E9;
    width: 100%;
    height: 1px;
    font-size: 10px;
    z-index: -1;
}

.dateSpliter span {
    background: #fff;
    color: #2E4765;
    padding: 15px;
}

.sendArea_admin_mod {
    padding: 10px 20px;
    /* padding: 20px; */
    /* height: 250px; */
    height: 320px;
    /* display: flex; */
    /* align-items: center; */
    justify-content: space-between;
    background: #F2F4FA;
    border-radius: 0 0 12px 12px;
}

.fr-box.fr-basic .fr-element{
    min-height: 165px !important;
}

/* send area stars here */
.sendArea {
    padding: 20px;
    height: 150px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    background: #F2F4FA;
    border-radius: 0 0 12px 12px;
}

.sendArea .youMessage {
    border: none;
    padding: 0;
    background: transparent;
    width: 100%;
    resize: none;
}

.sendMsg {
    border-radius: 50%;
    /* width: 46px;
    height: 46px;
    flex: 0 0 46px; */
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    margin-top: 5px;
    border: none;
    background: transparent linear-gradient(132deg, #C49730 0%, #805E14 100%) 0% 0% no-repeat padding-box;
    fill: #fff;
    cursor: pointer;
   padding: 10px;
}

.sendMsg svg {
    width: 20px;
    transition: all 0.2s;
}

.attachmentBtn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: none;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    /* overflow: hidden; */
}

.attachmentBtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #F2F4FA;
    width: 42px;
    height: 42px;
}

.attachmentBtn::after {
    content: "\f0c6";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate( 80deg);
    font-size: 31px;
}
.attachmentBtn .trig{
   /*  visibility: hidden; */
   width: 40px;
   height: 40px;
   flex: 0 0 40px;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   position: relative;
   z-index: 9;
   opacity: 0;
}
/* cources page starts here */

.overAllProgress {
    z-index: 2;
    position: relative;
}


.tabsList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}

.tabItem {
    text-align: center;
    cursor: pointer;
    position: relative;
    width: 100%;
}

.tabItem::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #E9E9E9;
    z-index: -1;
}

/* .tabItem.success::after{
    content: '';
    position: absolute;
    top: 25px;
    left: 0;
    width: 50%;
    height: 3px;
    z-index: -1;
    background: #00c99c;
} */

.tabItem.passed::before {
    background: #00c99c;
}

.tabItem .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    transition: 0.4s ease all;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.cust .tabItem .icon{
    background: #858481;
    border: 1px solid #858481;
    width: 60px;
    height: 60px;
    position: relative;
}
.icon .step {
    color: #fff;
    transform: rotate(-90deg);
    position: absolute;
    left: -3px;
    font-weight: 400;
    font-size: 12px;
}
.cust .tabItem::before{
    display: none;
}
.tabItem .icon svg {
    width: 60%;
}

.tabItem p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 01;
    padding-top: 5px;
    white-space: nowrap;
}

.tabItem span {
    font-size: 12px;
    display: block;
}

.tabItem.current .icon {
    background: #ccf3ff;
    border: 2px solid #1aa3de;
    fill: #1aa3de
}

.tabItem.passed .icon {
    background: #d4f6ee;
    border: 2px solid #00c99c;
    fill: #00c99c
}

.tabItem.locked .icon {
    background: #f9e3c5;
    border: 2px solid #ffc162;
    fill: #ffc162;
    color: #C8C9CC
}
.tabItem.active .icon {
    background: #0b81b5;
    border: 1px solid #0b81b5;
}
.tabItem.locked {
    color: #C8C9CC
}

/* .tabItem .icon.primary:hover {background: #1aa3de;}
.tabItem .icon.success:hover {background: #00c99c;}
.tabItem .icon.danger:hover {background: #c60808;}
.tabItem .icon.warning:hover {background: #ffc162;}
.tabItem .icon:hover {color: #fff;} */

/* cards design starts here */

.moduleCard {
    background: #fff;
    box-shadow: 30px 20px 20px #2E476514;
    border-radius: 8px;
    padding: 15px;
    background: #3F3D5A;
    color: #fff;
    fill: #fff;

}

.moduleHeader {
    display: flex;
    justify-content: space-between;
}

.moduleIcon {
    max-width: 100px;
    width: 100px;
    flex: 0 0 100px;
    text-align: right;
}

.moduleIcon img {
    width: 100%;
}

.moduleIcon svg {
    width: 70%;
    opacity: 0.4;
    margin-left: auto;
}

.moduleCard hr {
    border-color: #ffffff45;
}

.moduleCard+.moduleCard {
    margin-top: 15px;
    margin-bottom: 15px;
}
.leson_tab {
    margin-top: 30px;
}
.moduleCard h1 {
    font-size: 19px;
}

.moduleCard h1 svg {
    width: 19px;
    margin-top: -6px;
}

.moduleCard p {
    font-size: 14px;
    margin-bottom: 0;
}
.moduldeTitle>p {
    min-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* font-size: 14px; */
}
.moduleCard .counts.small h2 {
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 10px;
}

.moduleCard.passed {
    background: #00C99C
}

.moduleCard.current {
    background: transparent linear-gradient(300deg, #3956E5 0%, #07B4E6 100%) 0% 0% no-repeat padding-box;
}

.counts.medium h3 {
    font-size: 16px;
    text-align: center;
}

.counts.medium p {
    text-align: center;
}

.counts.medium .circleProgress {
    max-height: 75px;
    max-width: 75px;
    margin: auto;
}

.counts.medium .circleProgress span {
    font-size: 20px;
}

/* lessons starts here */

.lesson.passed .lessonHeader h1 {
    color: #00C99C;
}

.lesson.passed .circleProgress .inCircle {
    stroke: #00C99C
}

.lesson.current .circleProgress .inCircle {
    stroke: #1AA3DE
}

.lesson.pending .circleProgress .inCircle {
    stroke: #FFC162
}

.lesson.passed .playProgress .icon {
    border-color: #00C99C;
    fill: #00C99C;
    background: #d4f6ee
}

.lesson.current .playProgress .icon {
    border-color: #1aa3de;
    fill: #1aa3de;
    background: #d4f6ee
}

.lesson.pending .playProgress .icon {
    border-color: #ffc162;
    fill: #ffc162;
    background: #f9e3c5
}

.lesson.passed .playProgress:hover .icon {
    background: #00C99C;
    fill: #fff
}

.lesson.current .playProgress:hover .icon {
    background: #1aa3de;
    fill: #fff
}

.lesson.pending .playProgress:hover .icon {
    background: #ffc162;
    fill: #fff
}

.moduleCardsWrapper {
    margin-bottom: 15px;
}

.sectionTitle {
    font-weight: 600;
    margin-bottom: 15px;
}

.lessonHeader {
    background: #fff;
    box-shadow: 30px 20px 20px #2E476514;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.lesson+.lesson {
    margin-top: 15px
}

.playProgress {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    box-sizing: content-box;
    margin-right: 10px;
    padding: 15px;
    position: relative;
    border-right: 1px solid #E9E9E9;
    cursor: pointer;
}

.playProgress .icon {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 1px solid #E9E9E9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease all;
}

.playProgress .icon svg {
    width: 50%;
    transform: rotate(0);
}

.lessonHeader .title {
    padding: 15px;
    padding-left: 5px;
    color: #2E4765;
    width: 84%;
}

.lessonHeader h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

.lessonHeader p {
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.lessonBody {
    background: #fff;
    box-shadow: 30px 20px 20px #2e476514;
    padding: 20px;
    width: calc(100% - 95px);
    margin-left: auto;
    border-radius: 0 0 12px 12px;
    position: relative;
    border-top: 1px solid #E9E9E9;
}

.lessonBody::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    right: 0;
    width: 10px;
    height: 10px;
    background: white;
}

.lessonBody h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.lessonBody p {
    font-size: 14px;
    margin: 0;
}

.resultRow {
    display: flex;
    justify-content: space-between;
}

.resultRow+.resultRow {
    margin-top: 10px;
}

.resultRow .resultClm {
    text-align: center;
}

.resultRow .resultClm:first-child {
    text-align: left;
}

.resultRow .resultClm:last-child {
    text-align: right;
}

/* lesson page starts here */

.mainLessonHeader {
    background: transparent linear-gradient( 112deg, #C49730 0%, #805E14 100%) 0% 0% no-repeat padding-box;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    color: #fff;
}

.lessonActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lessonActions .myBtn {
    padding: 6px 16px;
    font-size: 14px;
    background: #ffffff52;
}

.lessonActions .myBtn:hover {
    background: #fff;
    color: #C49730;
}

.backTo {
    font-size: 12px;
    color: inherit;
    opacity: 0.8;
    transition: 0.4s ease all;
}

.backTo:hover {
    color: inherit;
    opacity: 1;
}

.mainLessonHeader h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}

.mainLessonHeader p {
    font-size: 14px;
    margin-bottom: 0;
    min-height: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 6;
}

.mainLessonHeader p a {
    font-size: 10px;
    color: #fff;
}

.mainLessonBody {
    margin-bottom: 20px;
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: -30px 20px 20px #2e476514, 30px 20px 20px #2e476514;
}

.mainLessonBody .chatWrapper {
    margin-bottom: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0px 20px 20px #2e476514;
}

.mainLessonBody .MsgRecived,.mainLessonBody .MsgSent {
    max-width: 80%;
}

.lessonContent {
    /* padding: 0 20px 0 30px; */
    padding: 0 20px 0 0;
}

.videoWrapper {
    margin-top: -155px !important;
    width: calc(100% - 15px);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding-top: 57%;
    margin: 0 0px 15px 15px;
    box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
    background: #fff;
}
.videoWrapper iframe {
    /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    object-fit: cover;
}

.videoWrapper img, .videoWrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    object-fit: cover;
}

.lessonContent p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1px;
}

/*****************
Upload Profile
*****************/

.completeProfile {
    padding-top: 55px;
    background: #F5F6FA
}

.welcomeMessage {
    text-align: center;
}

.welcomeIcon img {
    width: 85px;
}

.welcomeMessage h3 {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 24px;
    margin-top: 20px;
}

.welcomeMessage p {
    font-size: 18px;
    color: #2E4765;
    line-height: 1.3;
    font-weight: 400;
}

.completeProfile .overAllProgress {
    max-width: 100%;
    width: 320px;
    margin: auto;
}

.contentWrapper {
    text-align: center;
}

.tabContent p {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 0.1px;
}

.tabContent h4 {
    font-size: 18px;
    margin-bottom: 10px;
}
.infoWrapper.red h4 {
    color: #C90000;
}
/* arrow animate */

.arrow_wrapper{
    display: flex;
    max-width: 190px;
    justify-content: center;
  }
  .arrow{
      padding: 10px;
      animation: bounce 0.5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
  }

  .down-arrow-head{
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right:  12px solid transparent;
      border-top: 12px solid #C90000;
  }
  .arrow-body{
      height: 20px;
      width: 10px;
      background-color: #C90000;
      margin-left: 7px;
  }

  @keyframes bounce {
    from { transform: translate3d(0, 0, 0);     }
    to   { transform: translate3d(0, 10px, 0); }
  }

/* arrow animate */
.signatureWrapper {
    padding-bottom: 50px;
}
/* #upload .uploadWrapper{
    height: 250px;
} */
.upload_doc_sec {
    padding: 45px !important;
}
.upload_doc_sec h4{
    color: #08152C;
    font-size: 18px;
    letter-spacing: .5px;
    font-style: normal;
    font-weight: 700;
    margin-top: 15px;
}
.upload_doc_sec h4 span{
    color: #A7AFBC;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
}
.uploadWrapper {
    /* background: #FEF7EE; */
    /* border: 1px dashed #C79C3B; */
    text-align: center;
    position: relative;
    padding: 45px 50px;
    background-size: 60vh, 60vh !important;
    overflow: hidden;
    border-radius: 16px;
    min-height: 315px;
    background-size: 100% 100% !important;
}
.upload_doc_bx {
    margin: 15px 0;
    transition: .5s;
    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='16' ry='16' stroke='%23D0D7E2FF' stroke-width='3' stroke-dasharray='14%2c 14%2c 14' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 16px;
    cursor: pointer;
}
.upload_doc_bx:hover {
    transition: .5s;
    background-color: #F5F9FF;
    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='16' ry='16' stroke='%235585E4FF' stroke-width='3' stroke-dasharray='14%2c 14%2c 14' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e");
}
.upload_doc_err_bx{
    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='14' ry='14' stroke='%23FD5D49FF' stroke-width='3' stroke-dasharray='16%2c 16' stroke-dashoffset='32' stroke-linecap='square'/%3e%3c/svg%3e");
}

.error_doc_box {
    border-radius: 14px;
    transition: .5s;
    cursor: pointer;
}


.error_doc_box .upload_document_error_div .icon{
    border-radius: 100px;
    background: #FED0CA !important;
    box-shadow: 0 0 0 10px #FFEDEB;
}

.uploadWrapper.primary{
    background: #7367F01C;
    border: 1px dashed #4536E3;
}
.uploadWrapper.large{
    padding: 200px 0;
}
.uploadWrapper.large .icon{
    width: 120px;
}
.uploadWrapper h1 {
    font-size: 28px;
    margin-bottom: 0;
}
.uploadWrapper h2 {
    font-size: 14px;
    margin-bottom: 0;
}

.uploadWrapper .icon {
    width: 65px;
    height: 65px;
    margin: auto;
    margin-bottom: 10px;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #F2F4F7;
}
.uploadWrapper .icon svg {
    width: 38px;
    height: auto;
    filter: contrast(0.1);
    opacity: .5;
}
.uploadWrapper .icon.uploadImg_3 {
    background: #D4E1F8;
}
.uploadWrapper .uploadImg_3 svg{
    filter: contrast(1);
    /* opacity: 1; */
}
.uploadWrapper:hover .icon{
    background: #D4E1F8;
}
.uploadWrapper:hover .icon svg {
    filter: contrast(1);
    opacity: 1;
}

.uploadWrapper p {
    font-size: 18px;
    color: #A7AFBC;
    letter-spacing: .5px;
    text-align: center;
    font-weight: 300;
    margin: 20px 0;
}

.uploadWrapper input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
}
.uploadWrapper .upload_doc input {
    margin: auto;
    height: 50px !important;
    bottom: 0;
    z-index: 99;
    padding: 3px 9px;
    line-height: 40px;
}
.infoWrapper {
    margin-bottom: 15px;
}

.infoWrapper span {
    border-bottom: 1px solid #1AA3DE;
    font-size: 14px;
    display: inline-block;
}

.infoWrapper span.signature {
    width: 188px;
    background: #f7f7f7;
}

.infoWrapper span.signature img {
    width: 100%;
}

/* simple table design starts here */

.simpleTable .table td, .simpleTable .table th {
    font-size: 14px;
    border-top: 1px solid #707070;
    vertical-align: middle;
}

.alignMent .table td, .alignMent .table th {
    text-align: center;
}

.simpleTable .table thead th {
    border-bottom: none;
}

.simpleTable .table {
    border: 1px solid #707070;
    border-top: 0;
}

.alignMent .table td:first-child, .alignMent .table th:first-child {
    text-align: left;
}

.alignMent .table td:last-child, .alignMent .table th:last-child {
    text-align: right;
}

.signatureWrapper input[type="button"] {
    width: auto;
    height: auto;
    color: #fff;
    background: #178bc6;
    font-family: "Roboto", sans-serif;
    line-height: 18px;
    border: none;
    font-size: 16px;
    transition: 0.3s;
    padding: 10px 15px;
    border-radius: 4px;
}

.signatureWrapper .tools {
    margin: 95px auto 0;
}

.signatureWrapper .signatureCanv input[type="button"] {
    width: auto!important;
    left: 50%!important;
    transform: translate(-50%, 40px);
}

.signatureWrapper .tools input+input {
    margin-right: 5px;
}

.signatureWrapper .jSignature {
    background: #e6e6e6;
}

.errorMsg {
    font-size: 14px;
    font-weight: 400;
    color: red;
    text-align: center;
}
.signatureWrapper .tools {
    margin: 95px auto 0;
}
.certificate >img{
    width: 100%;
    /* margin: auto; */
    /* display: block; */
    /* max-height: 800px; */
    /* height: 100%; */
    /* margin-bottom: 20px; */
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}
@media  screen and (max-width:767px) {
    .profileCard{
        width: 200px;
    }
    .overAllProgress{
        display: none;
    }
    .leader_board .cardHeader{
        margin-bottom: 30px;
    }
    .logo2{
        display: none;
    }
}
.select2-container .select2-selection--multiple{
    min-height:45px;
}


/* Open Ai  */

#support_image{
    /* border-radius: 24px; */
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* box-shadow: 0px 0px 25px 3px #241616; */
  }
  .support_image.ai_image
{
    height: 100%;
}

.support_image.ai_image img
{
    max-width: 100%;
    max-height: 500px;
    /* width: 100%;
    height: 100%; */
    /* object-fit: cover; */
}

  .micbtn{
    position: absolute;
    top: 75%;
    left: 31%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #c4f6ff;
    border: 1px solid #bb94943d;
    border-radius: 7px;
    padding: 11px 20px;
    cursor: pointer;
    text-align: center;
  }
  #icons{
      font-size:50px;
  }
  #start-record-btn:hover{
      background-color: #bb94943d;
  }
  #back_url:hover{
    background-color: #bb94943d;
}
  .btn:focus {
      box-shadow: none;
  }
  .image .record_btn{
    right: 68%;
    top: 78%; position:
    absolute; color: #c4f6ff;
    border: 1px solid #bb94943d;
    border-radius: 7px;
  }
  .image .record_btn:hover{
  background-color: #bb94943d;
  }
  .no-browser-support {
    display: none;
    font-size: 1.2rem;
    color: #e64427;
    margin-top: 35px;
  }

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }


  @media only screen and (max-width: 600px) {
    .vr-blurry{
      transform: rotate(180deg);
      width: 95%;
      margin: 18px 0px 17px 7px;
    }
    .vr{
      min-height: 0 !important;
    }
  }
  .transparent{
    opacity: 0.5;
  }