/* Google Font Import - Poppins */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Helvetica", sans-serif;
}

@font-face {
    font-family: "Yellix_regular";
    src: url(../fonts/Yellix/Yellix-Regular.ttf);
}

@font-face {
    font-family: "Yellix_light";
    src: url(../fonts//Yellix/Yellix-Light.ttf);
}

@font-face {
    font-family: "Yellix_thin";
    src: url(../fonts/Yellix/Yellix-Thin.ttf);
}

@font-face {
    font-family: "Yellix_medium";
    src: url(../fonts/Yellix/Yellix-Medium.ttf);
}

@font-face {
    font-family: "Yellix_semibold";
    src: url(../fonts/Yellix/Yellix-SemiBold.ttf);
}

@font-face {
    font-family: "Yellix_bold";
    src: url(../fonts/Yellix/Yellix-Bold.ttf);
}

/* :root { */
/*
    --body-color: #e4e9f7;

    --primary-color: #00373A;
    --primary-active-bg: #054043;
    --primary-highlight: #00DD4A;
    --primary-color-light: #f6f5ff;
    --secondary-color: #7A60E0;
    --btn-color: #7A60E0;
    --toggle-color: #ddd;
    --text-color: #fff;
    --main-color: black;


    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
} */
:root {
    /*colors*/
    --primary-color: #00373a;
    --secondary-color: #7f64e3;
    --secondary-open: #ffffff0d;
    --secondary-color-light: #00dd4a;

    /* --secondary-open: #054043; */
    --tertiary-color: #3b3b3b;
    --text-color-light: #84bc42;
    --dark-color: #000;
    --light-color: #fff;
    --delete: #ff3b30;
}

body {
    min-height: 100vh;

    transition: var(--tran-05);
    color: #000;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--primary-color);
    color: #fff;
}

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

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

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

/*remove scrollbar*/
::-webkit-scrollbar {
    display: none;
}

/* Safari */
::-moz-scrollbars {
    display: none;
}

::-o-scrollbar {
    display: none;
}

/* opera */
::-google-ms-scrollbar {
    display: none;
}

::-khtml-scrollbar {
    display: none;
}

.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: url(../asset/logo/Logo@2x.png) center no-repeat #ffffff;
    background-size: 150px;
}

.text_titel h4 span:after {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    left: 10px;
    position: relative;
    top: 5px;
    transform: rotate(135deg);
    vertical-align: top;
}

.text_titel:hover h4 span:after {
    top: 10px;
    transform: rotate(-45deg);
}

.community_box {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 6px 2px 18px #00000026;
    padding: 6px 10px;
    right: 2%;
    border-radius: 4px;
    z-index: 1;
    width: 220px;
}

.community_list li img {
    width: 35px;
    height: 40px;
    object-fit: none;
}

.community_list li img {
    margin-right: 12px;
}

.community_list li {
    padding: 10px 0;
    border-bottom: 1px solid #00000024;
}

.community_list li a {
    font: 15px/28px var(--medium-font);
    color: #1b1f1b;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#community:hover .community_box {
    display: block;
}

.hidden {
    display: none;
}

/*..........>>>>*/
.mani,
.main {
    display: flex;
    /* background: linear-gradient(183deg,
            RGB(127, 94, 232) 0%,
            RGB(153, 125, 246) 100%); */
}

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    height: 100%;
    width: 300px;
    padding: 10px 14px;
    background: var(--primary-color);
    /* background: linear-gradient(183deg, #7f5ee8 0%, rgb(153, 125, 246) 100%); */

    transition: var(--tran-05);
    z-index: 1;
}

.sidebar.close {
    width: 100px;
    transition: var(--tran-05);
    z-index: 6;
}

.sidebar:hover {
    opacity: 1;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
    list-style: none;
    display: block;
    align-items: center;
    margin: 15px 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.sidebar header .image,
.sidebar .icon {
    min-width: 60px;
    border-radius: 6px;
}

.sidebar .icon {
    min-width: 60px;
    border-radius: 6px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 8px;
}

.sidebar .text,
.sidebar .icon {
    color: #fff;
    /* transition: var(--tran-03); */
}

.sidebar .text {
    font: 14px/20px var(--regular-font) !important;
    white-space: nowrap;
    opacity: 1;
    font-weight: 400 !important;
    font-style: normal;
    letter-spacing: -0.19px;
    text-align: left;
}
.active-sidemenu span.text.nav-text,
.showactive span.text.nav-text {
    font: 14px/28px var(--bold-font) !important;
    font-weight: 600;
}

.sidebar.close .text {
    opacity: 0;
}

/* =========================== */

.sidebar header {
    position: relative;
}

.sidebar header .image-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text img {
    width: 140px;
    padding-top: 20px;
    object-fit: contain;
}

header .image-text .name {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
}

header .image-text .profession {
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    display: none;
}

.sidebar header .image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    /* border-radius: 6px; */
}

.sidebar header .toggle {
    display: none;
}

.form-control {
    border-radius: 8px;
    /* border: 1px solid #dce3ff; */
    opacity: 1;
    height: 40px;
    color: #000;
}

.sidebar.close .toggle {
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
    margin-top: 20px;
}

.sidebar li.search-box {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar li.search-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    transition: var(--tran-05);
}

.sidebar li a {
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
    justify-content: start;
    color: #fff;
}

/* .sidebar li a:hover {
    background-color: RGBA(255, 255, 255, 0.13);
} */

.sidebar li a:hover .icon,
.sidebar li a:hover .text {
    color: var(--text-color);
}

.text_titel h2::after {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    left: 10px;
    position: relative;
    top: 5px;
    transform: rotate(135deg);
    vertical-align: top;
}

.text_titel:hover h2::after {
    top: 10px;
    transform: rotate(-45deg);
}

.sidebar .menu-bar {
    height: calc(100% - 290px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: scroll;
    margin-top: 40px;
    border-top: 1px solid #ededed5c;
}

.menu-bar::-webkit-scrollbar {
    display: none;
}

.sidebar .menu-bar .mode {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-05);
}

.menu-bar .mode .sun-moon {
    height: 50px;
    width: 60px;
}

.mode .sun-moon i {
    position: absolute;
}

.mode .sun-moon i.sun {
    opacity: 0;
}

body.dark .mode .sun-moon i.sun {
    opacity: 1;
}

body.dark .mode .sun-moon i.moon {
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch {
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.toggle-switch .switch {
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-05);
}

.switch::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-04);
}

.home {
    position: fixed;
    top: 0;
    left: 300px;
    min-height: 100vh;
    height: 100%;
    width: calc(100% - 300px);
    /* background-color: #fff; */
    background-color: #fcfcfc;
    /* border-top-left-radius: 40px; */
    padding: 0;
    overflow-x: hidden;
    transition: var(--tran-05);
}

.home .text {
    font-size: 30px;
    font-weight: 500;
    color: var(--main-color);
    padding: 12px 60px;
}

.sidebar.close ~ .home {
    left: 100px;
    height: 100vh;
    width: calc(100% - 100px);
    z-index: 2;
    display: block;
}

.bottom_wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    z-index: -8;
    display: none;
}

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

.header_titel h4 {
    font: 36px/36px var(--bold-font);
    font-weight: 300;
    color: #1b1f1b;
    line-height: 2;
}

.text_titel {
    cursor: pointer;
}

.text_titels p {
    font: 12px/28px var(--regular-font);
    font-weight: 400;
    color: #798697;
}

.text_titels h4 {
    font: 16px/20px var(--regular-font);
    font-weight: 400;
    color: #242d39;
}

.community_boxs {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 6px 2px 18px #00000026;
    padding: 6px 52px;
    right: 4%;
    border-radius: 4px;
    /* top: 82%; */
    z-index: 1;
}

#communitys:hover .community_boxs {
    display: block;
}

.download_btn {
    padding: 8px 30px;
    border: 1px solid var(--secondary-color);
    background: transparent;
    border-radius: 4px;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 12px;
    font-family: var(--bold-font);
}

.add-btn {
    display: flex;
    justify-content: end;
    padding-top: 30px;
}

.set_time {
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background-color: var(--secondary-color);
    color: #fff;
    width: 160px;
}

table.dataTable thead th:nth-child(1) {
    /* border-bottom-left-radius: 6px; */
    border-top-left-radius: 6px;
}

table.dataTable thead th:nth-last-child(1) {
    /* border-bottom-right-radius: 6px; */
    border-top-right-radius: 6px;
}

.navbar-contens .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #f8477b;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font: 16px/22px var(--bold-font);
    font-weight: 700;
}

.navbar-sub-content {
    padding-top: 30px;
}

.navbar-sub-content .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-bottom: 4px solid #f8477b;
    color: #000 !important;
}

.navbar-sub-content .nav-tabs .nav-link {
    background: transparent;
    margin-right: 30px;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #6f829f;
    font: 16px/32px var(--medium-font);
    font-weight: 500;
}

.navbar-contens ul li {
    margin-right: 20px;
}

.navbar-contens .nav-pills .nav-link {
    border: none;
    padding: 8px 20px;
    font: 16px/28px var(--regular-font);
    font-weight: 400;
}

.navbar-contens {
    padding-top: 24px;
}

.academic_text h4 {
    font: 26px/32px var(--medium-font);
    color: #1b1f1b;
    font-weight: 600;
}

.academic_text p {
    color: #6f839f;
    font-weight: 300;
    font: 16px/32px var(--regular-font);
}

.year_btn {
    padding: 8px 30px;
    border: none;
    border-radius: 8px;
    background-color: var(--secondary-color);
    font: 15px/28px var(--bold-font);
    font-weight: 700;
    color: #fff;
}

.year_btn img {
    margin-right: 10px;
}

.titel_conts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 15px;
}

.main_table {
    /*width: 100%;*/
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 4px #acabab;
    margin-top: 20px;
    padding: 20px;
}

/* .main_table .dataTables_length {
    display: none;
} */
table.dataTable .dataTables_length {
    display: contents !important;
}

.modal-header {
    border: none;
}

.model_title,
.modal-title {
    width: 100%;
    opacity: 1;
    color: rgba(29, 29, 29, 1);
    font: 20px/30px var(--bold-font);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0px;
    text-align: center;
}

.set_years input {
    width: 200px;
    padding: 4px 10px;
}

.set_years .showactive {
    background-color: transparent !important;
}

.set_years h4 {
    font: 16px/28px var(--medium-font);
    color: #617289;
    text-align: left;
}

.set_years select {
    color: #b2bbc8;
    font: 16px/28px var(--regular-font);
    font-weight: 400;
    padding: 6px 10px;
    width: 230px;
    border-radius: 6px;
    appearance: none;
    background-position: calc(100% - 16px);
    background-size: 12px;
    background-image: url(../asset/img/down-arrow.png);
    background-repeat: no-repeat;
    cursor: pointer;
}

.satart-cont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 84%;
    margin: auto;
    padding: 30px;
}

.modal-footer {
    border: none;
}

.cancel_btn {
    background-color: #f6f6f6;
    color: #474747;
    font: 16px/32px var(--bold-font);
    font-weight: 700;
    border-radius: 6px;
    padding: 4px 34px;
}

.cancel_btn:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.create_btn {
    background-color: var(--secondary-color);
    color: #fff;
    font: 16px/32px var(--bold-font);
    font-weight: 700;
    border-radius: 6px;
    padding: 4px 34px;
}

.btn:hover {
    color: #fff;
}

.btn.focus,
.btn:focus {
    box-shadow: unset;
}

.add_slot_text {
    width: 74%;
    margin: auto;
    padding: 0px;
}

.add_slot_text p {
    text-align: left;
    font: 15px/32px var(--medium-font);
    text-decoration: underline;
    line-height: 1.6;
    font-weight: 500;
    color: var(--secondary-color);
}

.close_box p {
    font: 15px/32px var(--medium-font);
}

.satart-cont input {
    font: 16px/32px var(--regular-font);
    color: #1b1f1b;
    font-weight: 400;
}

.set-time-table {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.set-time-table h4 {
    font-weight: 300;
    font: 20px/30px var(--bold-font);
    color: #1b1f1b;
    line-height: 2;
}

.set-time-table img {
    width: 24px;
    margin-right: 10px;
    cursor: pointer;
}

.time_sheet table tr td:first-child {
    width: 130px;
    text-align: left;
    padding-left: 0px;
    color: #242d39b3;
    font-weight: 400;
    font-size: 16px;
    font-family: var(--regular-font);
}

.time_sheet table tr td {
    padding: 15px;
    text-align: left;
    font-size: 16px;
}

.time_sheet table tr td span {
    color: #000000;
    font-weight: 900;
    font-family: var(--medium-font);
}

.time_sheet table tr th {
    padding: 15px;
}

.breadcrumb li:hover {
    font-family: var(--bold-font);
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-set {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
}

.breadcrumb-set li {
    padding-right: 6px;
    color: #7386a1;
    font-size: 14px;
}

.breadcrumb-set li a {
    color: #7386a1;
    text-decoration: underline;
}

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

.title_texts_box h4 {
    font: 24px/42px var(--bold-font);
    color: #1b1f1b;
    font-weight: 700;
}

.edit_cont {
    border: none;
    background: transparent;
    text-decoration: underline;
    font-size: 15px/28px var(--bold-font);
    font-weight: 700;
    color: var(--secondary-color);
}

.edit_cont img {
    width: 20px;
    margin-right: 10px;
}

.time_sheet {
    padding: 15px 0px;
}

.Period_btn {
    background-color: var(--secondary-color);
    color: #fff;
    border-radius: 6px;
    padding: 10px 24px;
    border: none;
    margin-right: 10px;
}

.period-img {
    margin-right: 10px;
}

svg:not(:root) {
    overflow: hidden;
    /* transform: rotate(-90deg) !important; */
}

@media (min-width: 576px) {
    .model_title .modal-dialog {
        max-width: 701px;
        margin: 1.75rem auto;
    }
}

.modal.show .modal-dialog {
    transform: translate(0px, 30%);
}

/*.mani_table  table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:after
{
    content:unset;
}
.mani_table table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:after
{
    content:unset;

}
.mani_table table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:before
{
 content:unset;
}
*/

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: transparent;
}

table.dataTable thead th,
table.dataTable tfoot th {
    /* background-color: #f5f4f9;
    padding: 10px 16px;
    border: 1px solid #ededed29;
    white-space: nowrap;

    opacity: 1;
    color: rgba(2, 2, 2, 1);
    font-family: var(--bold-font);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left; */
    background-color: #f5f4f9;
    padding: 10px 16px;
    border: 1px solid #ededed29;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    color: #1b1f1b;
    font-family: var(--medium-font);
    white-space: nowrap;
}

.modal-backdrop {
    background-color: #0005 !important;
    z-index: 0;
}

.selecttext {
    width: fit-content;
}

.showactive {
    position: relative;
    background-color: var(--secondary-open);
    /* height: 50px !important; */
    height: 56px !important;
}

.showactive::before {
    display: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--secondary-color-light);
    /* border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; */
    /* border-radius: 6px; */
}

.showactive .sidebar_icon_common {
    fill: var(--secondary-color-light);
    stroke: none;
}

.title_menus.open > .flex .sidebar_icon_common {
    fill: var(--secondary-color-light);
    stroke: none;
}

.nav-link .active-sidemenu {
    background-color: var(--primary-color) !important;
    height: 50px !important;
}

ul.breadcrumb {
    /* padding: 8px 0; */
    padding: 0px 10px;
    margin: 0;
    list-style: none;
    background-color: transparent;
    display: flex;
    align-items: end;
}

ul.breadcrumb li {
    display: inline;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    color: rgba(106, 115, 131, 1);
    font: 13px/22px var(--regular-font);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left;
    transition: all 0.3s ease;
}

ul.breadcrumb li + li:before {
    padding: 8px;
    color: #71829f;
    content: "\203A";
    font-size: 20px;
}

ul.breadcrumb li a {
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    color: rgba(106, 115, 131, 1);
    font: 13px/22px var(--regular-font);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    text-align: left;
    transition: all 0.3s ease;
}

ul.breadcrumb li a:hover {
    color: rgb(79, 87, 99);
    font: 14px/22px var(--regular-font);
    /* font-size: 12px; */
}

#loading-spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 50px auto;
    border: 6px solid var(--secondary-color);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: apiLoaderSpin 1s linear infinite;
}

@keyframes apiLoaderSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.api_loading {
    background: rgb(255 255 255 / 50%);
    margin: 0 auto;
    height: 100%;
    width: calc(100% - 0px);
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 9999;
    display: none;
}

.cont_loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 9999;
    justify-content: center;
}

.logo-text-img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 100px;
    /* border: 8px solid #a592ec; */
    margin-top: 20px;
}

.powerd_cont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}

.powerd_text {
    font-size: 12px;
    color: #ffffffc9;
    font-family: "Helvetica_Neue_regular";
}

.powerd_text_img {
    width: 75px;
    padding-top: 10px;
}

.selects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    /* margin-top: 30px; */
}

/* .......new.... */

.logo-text-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px;
    /* border: 8px solid #a592ec; */
    margin-top: 20px;
}

.powerd_cont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}

.powerd_text {
    font-size: 12px;
    color: #ffffffc9;
    line-height: 25px;
    font-family: "Helvetica_Neue_regular";
}

.powerd_text_img {
    width: 75px;
    padding-top: 10px;
}

.select {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
}

.logo-text-img1 {
    border-radius: 100px;
    /* border: 4px solid #a592ec; */
}

.side_logo1 {
    display: flex;
    flex-direction: column;
    height: 100px;
}

.text {
    margin-left: 0px;
}

.sidebar header .toggle {
    position: absolute;
    top: 77px;
    right: -35px;
    transform: translateY(-50%) rotate(180deg);
    height: 45px;
    width: 45px;
    background-color: #ffffff;
    color: #000000a3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    box-shadow: 2px 0px 8px var(--secondary-color);
    cursor: pointer;
    transition: 0.5s all;
}

/* .home{
        left: 100px;
        width: calc(100% - 100px);
    } */
/* .sidebar {
    box-shadow: 0 2px 9px #7f5ee8;
} */
.approved {
    width: 120px;
    color: #5daa38;
    background: #e1fad6;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;

    border: none;
}

.success {
    width: 120px;
    color: #5daa38;
    background: #e1fad6;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.absent {
    width: 120px;
    color: #e84339;
    background: #fbdfd6;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.pending {
    width: 120px;
    color: #d38300;
    background: #ffe38d;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning {
    width: 120px;
    color: #d38300;
    background: #ffe38d;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leave {
    width: 120px;
    color: #034082;
    background: #c9e5fe;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.reject,
.rejected {
    width: 120px;
    color: #b78811;
    background: #ffb7005c;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.fail {
    width: 120px;
    color: #e84339;
    background: #fbdfd6;
    padding: 4px;
    border-radius: 4px;
    font: 14px/20px var(--medium-font);
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hide-content {
    display: none;
}
.viewHwTitle,
.form-group p {
    opacity: 1;
    color: #242d39;
    font: 14px/20px var(--regular-font);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1px;
    text-align: left;
}
p.texttitle {
    font: 16px/29px var(--medium-font);
}

.modal-dialog .input-group .form-control:first-child {
    border: 1px solid #dce4ff !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.small,
small {
    font-size: 14px !important;
    font-weight: 400;
    opacity: 0.6;
}

@media only screen and (max-width: 1250px) {
    /* .home {
        position: fixed;
        left: 100px;
        width: calc(100% - 100px);
    } */
}

@media (max-width: 1399px) {
    .sidebar {
        width: 320px;
    }

    .home {
        left: 320px;
        width: calc(100% - 320px);
    }

    .se-pre-con {
        left: 247px;
        width: calc(98% - 220px);
    }

    .sidebar .icon {
        min-width: 46px;
    }

    .sidebar .text {
        font: 14px/28px var(--medium-font);
    }

    /* .sidebar li a
   {
    width:unset;
   } */
    /* .nav-link.active-sidemenu
   {
    min-width: 290px;
   } */
}

P {
    font: 16px/22px var(--regular-font);
    word-break: break-all;
}

.secondary_heading {
    font: 20px/36px var(--bold-font);
}

/* input */

.form__div {
    position: relative;
    height: 48px;
    width: 100%;
    margin: 24px 0;
}

.form__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font: 16px/22px var(--regular-font);
    border: 1.5px solid #dce4ff;
    border-radius: 0.5rem;
    outline: none;
    padding: 1rem;
    background: none;
    z-index: 1;
}

.form__select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100px;
    height: 100%;
    font: 16px/22px var(--regular-font);
    border: 1.5px solid #dce4ff;
    border-radius: 4px;
    outline: none;
    padding: 1rem;
    background: none;
    z-index: 1;
}

.form__label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: 0 0.25rem;
    background-color: #fff;
    color: var(--input-color);
    font: 14px/22px var(--regular-font);
    transition: 0.3s;
    z-index: 0;
}

.form__button:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.15);
}

/*Input focus move up label*/
.form__input:focus + .form__label {
    top: -0.5rem;
    left: 0.8rem;
    color: var(--first-color);
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
}

.group_1 {
    position: relative;
}

textarea {
    font-size: 16px;
    width: 100%;
    height: 160px;
    border: 1px solid #dce4ff;
    padding: 12px 18px;
    font: 16px/22px var(--regular-font);
    border-radius: 6px;
    outline: none;
}

.group_1 textarea + span {
    position: absolute;
    top: -16px;
    left: 14px;
    transition: all 0.1s ease;
    opacity: 1;
    background: white;
    border-width: 0 2px 0 2px;
    padding: 1px 5px;
    transform: translateY(calc(50% + 0px));
    font: 14px/12px var(--regular-font);
    color: #0000008f;
    font-weight: 500;
    line-height: 16px;
}

.group_1 select {
    color: #1b1f1b;
    font: 16px/21px var(--regular-font);
    /* font-weight: 600; */
    width: 380px;
    /* height: 67px; */
    /* margin: 16px 0; */
    padding: 6px 18px;
    border: 1px solid #dce3ff;
    border-radius: 4px !important;
    appearance: none;
    transition: all 0.1s;
    background-position: calc(100% - 16px);
    background-size: 12px;
    /* background-image: url(../asset/img/down-arrow.png); */
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 0;
}

.group_1 select + label {
    position: absolute;
    top: -22px;
    left: 14px;
    transition: all 0.1s ease;
    opacity: 1;
    background: white;
    border-width: 0 2px 0 2px;
    padding: 1px 5px;
    transform: translateY(calc(50% + 0px));
    font: 13px/12px var(--regular-font);
    color: #0000008f;
    line-height: 22px;
    z-index: 2;
}

.enter input + label,
.enter input + span {
    position: absolute;
    top: -13px !important;
    left: 13px;
    transition: all 0.1s ease;
    opacity: 1;
    background: white;
    border-width: 0 2px 0 2px;
    padding: 1px 5px;
    transform: translateY(calc(50% + 0px));
    font: 13px/12px var(--regular-font);
    color: #000000c9;
    font-weight: 500;
    line-height: 16px;
}

.group_1 input + span {
    position: absolute;
    top: -16px;
    left: 14px;
    transition: all 0.1s ease;
    opacity: 1;
    background: white;
    border-width: 0 2px 0 2px;
    padding: 1px 5px;
    transform: translateY(calc(50% + 0px));
    font-size: 12px;
    color: #000000c9;
    font-weight: 500;
    line-height: 16px;
}

.enter input:focus + span {
    color: var(--secondary-color) !important;
    top: -14px !important;
    /* left: -13px !important; */
}

.enter input:focus + label.date_lable {
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
}

.enter input:focus + .date_lable {
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
}

.enter input:focus {
    border: 2px solid var(--secondary-color) !important;
    box-shadow: 2px 2px 13px var(--secondary-color);
}

.verification-code--inputs input[type="text"] {
    border: 1px solid #dce3ff !important;
}

.verification-code--inputs input[type="text"]:focus {
    box-shadow: 2px 2px 13px var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
}

.otp:focus,
.form-control:focus {
    box-shadow: 2px 2px 13px var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
}

.group_1 select:focus {
    outline: 0;
    /* border-color: var(--secondary-color); */
    box-shadow: 2px 2px 13px var(--secondary-color) !important;
    border: 2px solid var(--secondary-color);
}

.fselecttext:focus {
    outline: 0;
    box-shadow: 2px 2px 13px var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
}

.group_1 select:focus + label {
    color: var(--secondary-color) !important;
    font: 14px/21px var(--bold-font);
}

.form__div input:focus + label {
    color: var(--secondary-color) !important;
    font: 14px/21px var(--bold-font);
}

.group_1 textarea:focus + span {
    color: var(--secondary-color) !important;
    font: 14px/21px var(--bold-font);
}

.form__div input:focus {
    outline: 0;
    /* border: 1px solid var(--secondary-color) ; */
    box-shadow: 2px 2px 13px var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
}

.form__input:focus,
.form__input:not(:placeholder-shown) {
    outline: none;
    /* border: 2px solid var(--secondary-color);
    box-shadow: 2px 2px 13px var(--secondary-color); */
}

.form__input:focus + .form__label,
.form__input:not(:placeholder-shown) + .form__label {
    top: -10px;
    background: #fff;
    color: #0000008f;
    font: 14px/21px var(--medium-font);
    z-index: 2;
    left: 12px;
}

.enter input {
    background-image: url(../asset/teacher/Calender.svg) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 16px) !important;
    border: 1px solid #dce3ff;
    text-indent: 7px;
}

.group_1 textarea:focus {
    outline: 0;
    /* border: 1px solid var(--secondary-color); */
    box-shadow: 2px 2px 13px var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.enter_span {
    position: absolute;
    padding: 2px;
    background: white;
    left: 15px;
    top: -7px;
    font: 14px/12px var(--regular-font);
}

.set_years input:focus + .set_years h4 {
    color: var(--secondary-color) !important;
}

.set_timeing input:focus,
.set_years input:focus {
    box-shadow: 2px 2px 13px var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__textarea:not(:focus) + .form__label {
    top: -0.5rem;
    left: 0.8rem;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
}

/*Input focus*/
.form__input:focus {
    border: 1.5px solid var(--secondary-color);
}

.form__textarea {
    padding: 20px !important;
}

.form__textarea:focus {
    border: 1.5px solid #dce4ff;
}

.cancel-btn:hover {
    color: #000000 !important;
}

/*  */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
    display: flex;
    align-items: center;
}

.icons-new-s {
    font-size: 24px !important;
    filter: opacity(0.5);
}

.description_tex {
}

.sidebar_footer_section {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    border-top: 1px solid #f8f8f81c;
    padding: 20px 0 0px;
}

.sidebar_footer_section p {
    color: #fff;
    font: 14px/22px var(--regular-font);
}
td.dataTables_empty.sorting_1 {
    width: 100%;
}
.custom-loader {
    width:35px;
    height:35px;
    border-radius:50%;
    border:8px solid;
    border-color:#E4E4ED;
    border-right-color: #766DF4;
    animation:s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}