/*
  Install VSCode extension "Autoprefixer" by mrmlnc
*/

* {
    box-sizing: border-box !important;
    font-size: 100%;
}

:root {
    --color-primary: #9A4FDB;
    --color-primary-light: #D0C5D9;
    --color-accent: #E7D8F4;
    --color-button-background: #000000;
    --color-button-foreground: #FFFFFF;
    --color-grid-item-background: #EEF7FF;
    --color-grid-item-foreground: #000000;
    --color-badge-background: #FF9431;
    --color-sidenav-background: #000000;
    --color-sidenav-foreground: #FFFFFF;
    /*bsharah 2024-08-11*/
    --color-topnavbar-background: #F3F3F3;  /* #FFFFFF; */
    /*bsharah 2024-08-11*/
    --color-topnavbar-border: #CDCDCD; /* #F4F4F4 */
    --color-notification: #D84910;
    --color-notification-transparent: #f8dfd4;
    --color-success: #374FC7;
    --color-success-transparent: #dbdff5;
    --color-error-transparent: #fcdcdc;
    --color-error: #F03D3E;
    --color-danger: #E76B6B;
    --color-primary-bs5: #0d6efd;
    --color-secondary-bs5: #6c757d;
    --color-success-bs5: #198754;
    --color-danger-bs5: #dc3545;
    --color-warning-bs5: #ffc107;
    --color-light-bs5: #f8f9fa;
    --color-dark-bs5: #343a40;
    --gl-menu-size-vertical: 4.4rem;
    --gl-menu-size-vertical-expanded: 15rem;
    /* FIRAS - 2024-07-30 */
    --gl-menu-size-horizontal: 5rem;
    --size-md: 768px;
    --size-lg: 1200px;
    --size-xl: 1280px;
    --size-input: 3.625rem;
    --size-input-small: 2.5rem;
    /* FIRAS - 2024-08-28 */
    --color-link: #8095ff;
}

* {
    -webkit-overflow-scrolling: touch !important;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-size: 16px !important;
}

body>[ui-view] {
    height: 100%;
    overflow: hidden;
}

body>[ui-view]>#wrapper {
    height: 100%;
    overflow-y: auto;
}

body>[ui-view] .gl-layout>#wrapper {
    overflow: hidden;
}

main-content>[ui-view]>[ng-controller]:not(.gl-screen-content)>.wrapper.wrapper-content>.row {
    margin: 0px !important;
}

.rtls:not([dir]),
.rtls *:not([dir]) {
    direction: rtl;
    text-align: right;
}

[dir] {
    text-align: start;
}

.gl-clickable {
    cursor: pointer
}

.rtls .gl-ltr {
    text-align: end;
    direction: ltr;
}

.gl-conversation-item {
    /* Your existing styles for the conversation item */
    position: relative;
}

.gl-delete-container {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
}

.rtls .gl-delete-container {
    left: 0;
    right: auto;
}

.gl-delete-icon {
    width: 24px;
    height: 24px;
    filter: invert(34%) sepia(30%) saturate(5677%) hue-rotate(334deg) brightness(88%) contrast(96%);
    cursor: pointer;
    margin-inline: 5px;
}

.gl-edit-icon {
    cursor: pointer;
    margin-inline: 5px;
    display: flex;
    height: 44px;
    width: 44px;
    padding: 10px 10px 10px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #E0E0E0;
}

.gl-edit-icon-green {
    width: 24px;
    height: 24px;
    cursor: pointer;
    filter: invert(37%) sepia(98%) saturate(327%) hue-rotate(100deg) brightness(93%) contrast(98%);
    margin-inline: 5px;
}

#page-wrapper>[ui-view]>.gl-screen,
.gl-layout>.gl-layout-main-content>[ui-view],
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude,
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude>.gl-screen,
.gl-layout>.gl-layout-main-content>[ui-view]>[ng-controller] {
    height: 100%;
    overflow: hidden;
    padding: 0px !important;
}
/* FIRAS - 2024-08-06 */
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude {
    display: block;
}
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude>#wrapper {
    height: 100%;
}

#page-wrapper>[ui-view]>[ng-controller]>.wrapper.wrapper-content,
.gl-layout>.gl-layout-main-content>[ui-view]>[ng-controller]>.wrapper.wrapper-content,
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude>[ng-controller]>.wrapper.wrapper-content {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}

.gl-screen-content,
.gl-layout>.gl-layout-main-content>[ui-view]>[ng-controller]:not(.gl-screen-content)>.wrapper.wrapper-content,
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude>[ng-controller]>.wrapper.wrapper-content,
.gl-layout>.gl-layout-main-content>[ui-view]>ng-transclude>#wrapper>#page-wrapper>.wrapper.wrapper-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto !important;
    scroll-behavior: smooth;
    background-color: #FFFFFF;
}

.gl-layout-multilevel .gl-layout-main-content [ng-controller] {
    padding: 0px 15px !important;
}

.gl-layout-multilevel .gl-layout-main-content [ng-controller]>.row.wrapper,
.gl-layout-multilevel .gl-layout-main-content .wrapper.wrapper-content>.row {
    margin: 0px !important;
}

.gl-layout .customDetailsScreen {
    margin: 0px !important;
}

.gl-screen-content {
    padding: 1rem;
}

.gl-screen-content .row {
    margin: 0px !important;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-column {
    flex-direction: column;
}

/* FIRAS - 2024-08-06 */
.flex-inline {
    display: inline-flex;
}

/* FIRAS - 2024-08-06 */
.flex-wrap {
    flex-wrap: wrap;
}

.align-center {
    align-items: center !important;
}

.align-stretch {
    align-items: stretch !important;
}

.align-start {
    align-items: start !important;
}

.align-end {
    align-items: end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-stretch {
    justify-content: stretch !important;
}

.justify-start {
    justify-content: start !important;
}

.justify-end {
    justify-content: end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.gap {
    gap: 0.2rem;
}

.gap.gap-sm {
    gap: 0.4rem;
}

.gap.gap-md {
    gap: 0.8rem;
}

.gap.gap-lg {
    gap: 1rem;
}

.scroll-y {
    overflow-y: auto;
}

.wrapper.wrapper-content {
    padding: 0px !important;
}

.sk-spinner-container {
    height: 40px !important;
}

.sk-spinner-wave div {
    background-color: var(--color-primary);
}

.modal-open .modal {
    z-index: 8888 !important;
}

.modal-title {
    font-size: 1.8rem !important;
}


/* BLURS */

.gl-blur-sm {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}


/* /BLURS */


/* FAB */

.gl-fab {
    display: flex;
    width: 4.125rem;
    height: 4.125rem;
    align-items: center;
    justify-content: center;
    background-image: url('../img/glool/icon_fab.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-inline-start: calc(100% - 4.125rem);
    margin-top: 0.5rem;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 0px;
}


/* /FAB */


/* INPUTS + SEARCH */

input:not(.k-input):not(.k-widget).gl-input {
    height: var(--size-input) !important;
}

input:not(.k-input):not(.k-widget).gl-input.gl-input-small {
    height: var(--size-input-small) !important;
}

.gl-input {
    flex: 1;
    border: 1px solid var(--color-primary);
    border-radius: 0.75rem;
    font-size: 0.8rem;
    font-weight: 300;
    padding: 1.15rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
}

.gl-input.gl-search-input {
    padding-inline-end: 2.5rem;
    background-image: url('../img/glool/icon_search.svg');
    background-size: auto;
    background-position: calc(100% - 1rem) center;
    background-repeat: no-repeat;
}

.gl-filter-button {
    width: var(--size-input);
    height: var(--size-input);
    border: 1px solid var(--color-primary);
    border-radius: 0.75rem;
    background-image: url('../img/glool/icon_filter.svg');
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.gl-filter-button.gl-filter-button-small {
    width: var(--size-input-small);
    height: var(--size-input-small);
}


/* /INPUTS + SEARCH */


/* TOASTER */

#toast-container>.toast {
    display: grid;
    align-items: center;
    gap: 0rem 1rem;
    grid-template-columns: 1.5rem 1fr 1.5rem;
    grid-template-areas: "icon message close";
    padding: 1rem !important;
    max-width: 45rem;
    margin: auto;
    opacity: 1;
}

#toast-container>.toast>[ng-if="toaster.showCloseButton"] {
    grid-area: close;
}

#toast-container>.toast>[ng-if="toaster.showCloseButton"]>.toast-close-button {
    top: 0rem;
    right: 0rem;
    margin: 0px;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 2rem;
    color: #212429;
}

#toast-container>.toast>.toast-message {
    grid-area: message;
}

#toast-container>.toast::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
    margin: 0rem !important;
    position: unset;
    grid-area: icon;
    color: inherit;
}

#toast-container>.toast-info {
    background-color: var(--color-notification-transparent) !important;
    color: var(--color-notification) !important;
    background-image: none !important;
}

#toast-container>.toast-info::before {
    mask-image: url('../img/glool/icon_bell.svg');
    -webkit-mask-image: url('../img/glool/icon_bell.svg');
}

#toast-container>.toast-success {
    background-color: var(--color-success-transparent) !important;
    color: var(--color-success) !important;
    background-image: none !important;
}

#toast-container>.toast-success::before {
    mask-image: url('../img/glool/icon_success.svg');
    -webkit-mask-image: url('../img/glool/icon_success.svg');
}

#toast-container>.toast-error {
    background-color: var(--color-error-transparent) !important;
    color: var(--color-error) !important;
    background-image: none !important;
}

#toast-container>.toast-error::before {
    mask-image: url('../img/glool/icon_error.svg');
    -webkit-mask-image: url('../img/glool/icon_error.svg');
}


/* /TOASTER */


/* NOTIFICATIONS */

.gl-error-notitication {
    background: var(--color-error-transparent) !important;
    color: var(--color-error) !important;
    justify-content: center !important;
}

.gl-info-notitication {
    background: var(--color-notification-transparent) !important;
    color: var(--color-notification) !important;
    justify-content: center !important;
}


/* /NOTIFICATIONS */


/* SEARCH FORM */

.gl-search-form .form-group {
    display: flex;
    align-items: center;
}

.gl-search-form .form-group .form-control:not([type=checkbox]) {
    width: 19.5rem !important;
    height: 2.675rem !important;
    outline: none !important;
    border-radius: 0.25rem !important;
    border: 1px solid #E4E4E4 !important;
}


/* BSHARAH 2023-08-30 */

.gl-search-container {
    /* display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0px 0.5rem; */
    /* BSHARAH 2023-9-6 */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0px 0.5rem;
    align-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.gl-modal-body-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0px 0.5rem;
    justify-content: center;
    align-content: center;
    align-items: center;
}


/* BSHARAH 2023-08-30 */

.gl-width-full {
    width: 100% !important;
}


/* BSHARAH 2023-08-30 */

.gl-screen-content .gl-side-panel-container textarea,
.gl-side-panel .gl-side-panel-container textarea {
    border-radius: 0.5rem;
    border: 1px solid var(--gray, #B4B4B4);
    display: flex;
    padding: 0.9375rem 1.25rem;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    width: 100%;
    /*temp for the mobile web veriosn*/
}


/* .gl-screen-content  .search-box-margin-inline{

    margin-inline-start: 0.5rem !important;
} */


/* SIDE PANEL */

.gl-side-panel-container {
    display: block;
    width: auto;
    height: auto;
    position: fixed;
    z-index: 9998;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    pointer-events: none;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

.modal-open .gl-side-panel-container {
    z-index: 998 !important;
}

.gl-side-panel-container .gl-side-panel {
    display: flex;
    width: 50vw;
    max-width: 1000px;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 999;
    background: white;
    right: -100%;
    transition: all 0.2s ease-in;
}

.gl-side-panel-container.gl-visible {
    background: rgba(0, 0, 0, 0.3);
    pointer-events: all;
}

.rtls .gl-side-panel-container .gl-side-panel {
    right: unset !important;
    left: -100% !important;
}

.gl-side-panel-container.gl-visible .gl-side-panel {
    right: 0px !important;
}

.rtls .gl-side-panel-container.gl-visible .gl-side-panel {
    right: unset !important;
    left: 0px !important;
}

.modal-open .gl-side-panel-container .gl-side-panel {
    z-index: 999 !important;
}

.gl-side-panel .gl-side-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    margin: 10px;
}

.gl-side-panel .gl-side-panel-actions .gl-side-panel-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    font-size: 2rem;
    font-weight: bold;
    background: var(--color-button-foreground);
    color: var(--color-button-background);
}

.gl-side-panel .gl-side-panel-actions .gl-side-panel-action.inverse {
    background: var(--color-button-background);
    color: var(--color-button-foreground);
}

.gl-side-panel .gl-side-panel-header {
    padding: 1rem;
}

.gl-side-panel .gl-side-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}


/* /SIDE PANEL */


/* SCROLLABLE */

.gl-scrollable {
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    pointer-events: none;
}

::-webkit-scrollbar:hover {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    pointer-events: none;
}

::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 100px;
    pointer-events: none;
}


/* /SCROLLABLE */


/* GRID */

.gl-grid {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    flex-wrap: wrap;
    /* grid-template-columns: repeat(1, 1fr); */
    gap: 1rem;
    width: 100%;
    margin-bottom: 20px;
}


/* GRID */


/* GRID ITEM */

.gl-grid-item-container {
    /* padding-top: 80%; */
    /* width: 15.25rem;
    height: 12.8rem; */
    width: 17.5rem;
    height: 10rem;
    position: relative;
}

.gl-grid-item-container.gl-grid-subject-collapse {
    width: 17.5rem;
    position: relative;
    min-height: 10rem;
    height: fit-content;
}

.gl-grade-subject-stu-label {
    color: var(--Gray-2, #7D7D7D);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.gl-grade-subject-stu-number {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.gl-grade-subject-name {
    /* color: #000; */
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.gl-grid-item.gl-grade-item.gl-grid-subject-item {
    height: auto;
}

.gl-grade-subjects-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.gl-subject-item-container {
    height: 8rem;
}


/*bsharah edit 26/9/2023*/

.gl-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* background: var(--color-grid-item-background); */
    color: var(--color-grid-item-foreground);
    cursor: pointer;
    /* padding: 20px; */
    /* position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px; */
    /* border-radius: 5px; */
    border-radius: 0.75rem;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 1.875rem 2.5rem;
    width: 100%;
}

.gl-grid-item:not(.gl-grid-subject-item):hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.gl-grid-item-container.gl-has-indicator .gl-grid-item::after {
    width: 15px;
    height: 15px;
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 999;
    background: var(--color-badge-background);
    border-radius: 100%;
}

.rtls .gl-grid-item-container.gl-has-indicator .gl-grid-item::after {
    right: unset;
    left: -5px;
}

.gl-grid-item .gl-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    word-break: break-word;
    position: relative;
    text-align: flex-start;
}

.gl-grid-item .gl-action {
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
    background: var(--color-button-background);
    color: var(--color-button-foreground);
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    border-radius: 100%;
    cursor: pointer;
    transition: transform 0.1s ease-in;
}

.rtls .gl-grid-item .gl-action {
    right: unset;
    left: 10px;
}

.gl-grid-item .gl-action:hover {
    transform: scale(0.95);
}

.gl-grid-item .gl-action.action-add::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../img/glool/icon_plus.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.gl-grid-item .gl-favourite {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.1s ease-in;
    background-image: url("../img/glool/icon_favourite.svg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rtls .gl-grid-item .gl-favourite {
    right: unset;
    left: 10px;
}

.gl-grid-item .gl-favourite.favourite-1 {
    background-image: url("../img/glool/icon_favourite_active.svg");
}


/* /GRID ITEM */


/* GRADE ITEM */

.gl-grade-item {
    justify-content: flex-start;
    flex-direction: column;
}


/*bsharah 26/9/2023 edit */

.gl-grade-item .gl-title {
    /* justify-content: flex-end; */
    justify-content: flex-start;
    gap: 0.75rem;
}


/*bsharah 26/9/2023 edit */

.gl-grade-item .gl-title .gl-title-main {
    /* font-size: 1.4rem; */
    /* font-weight: bold;
    color: #9A4FDB;
    font-weight: 700;
    font-size: 1.5rem; */
    /* color: var(--Purple, #9A4FDB);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: bolder; */
    /* line-height: normal; */
    color: var(--Purple, #9A4FDB);
    font-family: Poppins, Readex !important;
    font-size: 1.35rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/*bsharah 26/9/2023*/

.gl-menu-item-container {
    border-radius: 0.5625rem;
    /* background: #FFF; */
    display: flex;
    width: 24rem;
    height: 4.9375rem;
    /* padding: 0.9375rem 1.875rem; */
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}


/* .gl-menu-item-container.gl-grid-subject-collapse {
    padding: 0px;
} */


/*bsharah 26/9/2023*/

.gl-title-counter-flex-end {
    display: flex;
    justify-content: center;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    padding: 0.625rem;
    max-width: max-content;
    max-height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    font-family: Inter;
    font-style: normal;
    line-height: normal;
}


/*bsharah 26/9/2023*/

.gl-title-counter-border {
    border-radius: 0.4375rem;
    border: 1px solid var(--Purple, #9A4FDB);
}

.gl-grade-item .gl-title .gl-title-small {
    /* font-size: 1rem;
    font-weight: normal; */
    color: #000;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.gl-gradesubject-subject-container {
    display: flex;
    width: 100%;
    padding-top: 0.75rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem
}

.gl-grade-subject-button {
    display: flex;
    width: 100%;
    padding: 0.625rem;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 0.5625rem;
    /* background: var(--Gary-40, #E7E7E7); */
    cursor: pointer;
    /* margin-bottom: 0.75rem; */
    background: white;
    border: 1px solid var(--color-primary, #9A4FDB);
    color: var(--color-primary, #9A4FDB);
}

.gl-grade-subject-button:hover {
    /* background: #676767; */
    background: var(--color-primary, #9A4FDB);
    color: #fff !important;
}

.gl-grade-item.gl-grid-subject-item {
    cursor: unset;
}


/* /GRADE ITEM */


/* MENU ITEM */

.gl-menu-item {
    justify-content: flex-start;
}

.gl-menu-item .gl-title {
    justify-content: flex-end;
    font-size: 0.85rem;
    font-weight: 500;
}

.gl-menu-item .gl-title .gl-title-counter {
    flex: 1;
    display: flex;
    align-items: flex-end;
}


/*bsharah edit 28-9-2023*/

.gl-menu-item .gl-title .gl-title-main {
    text-align: flex-start;
    flex: 1;
    display: flex;
    align-items: flex-start;
    color: #000;
    font-family: Inter;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/* /MENU ITEM */


/* MENU KPI ITEM */

.gl-menu-kpi-item {
    justify-content: flex-start;
    flex-direction: column;
}

.gl-menu-kpi-item .gl-title {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: flex-start;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.gl-menu-kpi-item.has-gl-counter .gl-title {
    height: auto;
}

.gl-menu-kpi-item .gl-counters {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}


/* /MENU KPI ITEM */


/* SUBJECT ITEM */


/* .gl-subject-item-container {
  padding-top: 50%;
} */

.gl-subject-item {
    justify-content: center;
    flex-direction: column;
}

.gl-subject-item .gl-title {
    font-size: 1.2rem;
    font-weight: 1000;
    /*bsharah 13-9-2023 4:20 pm*/
    text-align: center;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}


/* /SUBJECT ITEM */


/* COUNTER */

.gl-counter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-size: 1rem;
}


/* /COUNTER */


/* SIDE NAV */

.gl-layout .mini-navbar .navbar-static-side li:not(.nav-header) a .nav-label {
    display: none !important;
}

.gl-layout .navbar-static-side,
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) *:not(.badge) {
    background: var(--color-sidenav-background) !important;
    color: var(--color-sidenav-foreground) !important;
}

body.fixed-sidebar .gl-layout .navbar-static-side,
body.canvas-menu .gl-layout .navbar-static-side {
    width: 200px !important;
    top: 0px;
    bottom: 0px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

body.fixed-sidebar.mini-navbar .gl-layout .navbar-static-side {
    width: 80px !important;
}

.gl-layout .navbar-static-side .slimScrollDiv {
    height: auto;
    flex: 1;
}

.gl-layout .navbar-static-side .slimScrollDiv .sidebar-collapse {
    padding-top: 15vh;
    width: 100% !important;
}

.gl-layout .navbar-static-side .slimScrollDiv .sidebar-collapse>.nav {
    width: 100% !important;
}

.gl-layout #page-wrapper {
    margin: 0px !important;
    /* -webkit-margin-start: 200px !important; */
    /* margin-inline-start: 200px !important; */
}


/* .mini-navbar .gl-layout #page-wrapper {
  -webkit-margin-start: 80px !important;
  margin-inline-start: 80px !important;
} */

.mini-navbar .gl-layout ng-transclude #page-wrapper {
    margin: 0px !important;
}

.mini-navbar .gl-layout .navProfileHeader img {
    display: block !important;
    margin: 20px auto !important;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) {
    width: 100%;
    height: 80px;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) a .customFaIcon {
    width: 60px !important;
    height: 60px !important;
    -o-object-fit: contain;
    object-fit: contain;
    background: transparent !important;
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
}

.gl-layout nav[class*=navbar-] .slimScrollBar {
    opacity: 0 !important;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):active>a>*:not(.badge),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header).active>a>*:not(.badge),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):active,
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header).active,
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):active *:not(.badge),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header).active *:not(.badge),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):hover,
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):hover *:not(.badge),
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):hover>a>*:not(.badge) {
    background: transparent !important;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header):active a .customFaIcon,
.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header).active a .customFaIcon {
    background: var(--color-primary) !important;
}

.gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) a .nav-label {
    text-align: start;
    padding: 0px !important;
}


/* /SIDE NAV */


/* TOP NAVBAR */

.gl-navbar {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 0px 40px;
    padding-inline-start: 20px;
    /* bsharah 2024-08-11 2px to 1px*/
    border-bottom: 1px solid var(--color-topnavbar-border);
    background: var(--color-topnavbar-background);
    position: static;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 4.2rem;

}

.gl-navbar .gl-navbar-title {
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gl-navbar .gl-navbar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gl-navbar .gl-navbar-nav-actions {
    margin-inline-end: 20px;
}

.gl-navbar .gl-navbar-nav-actions .ng-navbar-nav-action {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-navbar .gl-navbar-nav-actions .ng-navbar-nav-action img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}

.gl-navbar .gl-navbar-action {
    width: auto;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.gl-navbar .gl-navbar-action .gl-navbar-action-icon {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.gl-navbar .gl-navbar-action .dropdown-menu {
    left: unset;
    right: 0px;
    font-size: 1rem;
}

.rtls .gl-navbar .gl-navbar-action .dropdown-menu {
    left: 0px;
    right: unset;
}

.gl-navbar .gl-navbar-action .dropdown-menu>li>a {
    line-height: unset;
}

.gl-navbar .gl-navbar-action.gl-has-indicator::after {
    width: 15px;
    height: 15px;
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 999;
    background: var(--color-badge-background);
    border-radius: 100%;
}

.rtls .gl-navbar .gl-navbar-action.gl-has-indicator::after {
    right: unset;
    left: 5px;
}

.gl-navbar .navbar-minimalize {
    margin: 0px !important;
    padding: 0px !important;
}

.gl-notifications-popup {
    width: 300px;
    max-height: 500px;
    overflow-y: auto;
}

.gl-notifications-popup table {
    margin: 0px;
}


/* /TOP NAVBAR */


/* LAYOUT */

.gl-layout {
    display: grid;
    grid-template-areas: "side header header header" "side content content content" "side footer footer footer";
    /* FIRAS - 2024-07-30 */
    grid-template-columns: var(--gl-menu-size-horizontal) 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 0px;
    width: 100%;
    height: 100%;
    transition: grid-template-columns 0.2s ease;
}

/* FIRAS - 2024-08-08 */
.gl-layout .gl-layout-overlay {
    display: none;
}
.gl-layout.gl-submenu-visible .gl-layout-overlay {
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: var(--gl-menu-size-horizontal);
    right: 0px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 998;
}
.gl-sidebar-expanded.gl-submenu-visible.gl-submenu-visible {
    left: var(--gl-menu-size-vertical-expanded);
}
.rtls .gl-layout.gl-submenu-visible .gl-layout-overlay {
    left: 0px;
    right: var(--gl-menu-size-horizontal);
}
.rtls .gl-sidebar-expanded.gl-submenu-visible.gl-submenu-visible {
    left: 0px;
    right: var(--gl-menu-size-horizontal-expanded);
}

.gl-layout-header {
    grid-area: header;
}

.gl-layout-side-menu {
    grid-area: side;
    background: #000000;
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    transition: all 0.2s ease;
    width: var(--gl-menu-size-horizontal);
    z-index: 999;
}

.gl-layout-main-content {
    grid-area: content;
    background: #F3F3F3;
    color: #333333;
    overflow: hidden;
}

.gl-side-menu-brand {
    display: block;
    width: var(--gl-menu-size-vertical);
    height: calc(var(--gl-menu-size-vertical) / 1.5);
    margin: 20px auto;
    margin-bottom: 0px;
    transition: all 0.2s ease;
    background-image: url('../img/glool/logo.svg');
    background-size: 50% auto;
    background-position: center;
    background-repeat: no-repeat;
}

.gl-side-menu {
    overflow: visible;
}

.gl-side-menu,
.gl-side-sub-menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin: 0px;
    padding: 0px;
    background: #000000;
    z-index: 998;
    overflow-y: auto;
}

.gl-layout-side-menu .gl-side-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gl-menu-size-vertical);
    height: var(--gl-menu-size-vertical);
    mask-size: 50%;
    -webkit-mask-size: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-image: url('../img/glool/icon_menu.svg');
    -webkit-mask-image: url('../img/glool/icon_menu.svg');
    background-color: currentColor;
    cursor: pointer;
    padding: 0.375rem;
}

.gl-side-sub-menu {
    /* display: none; */
    position: absolute;
    top: 0px;
    left: 100%;
    width: 0px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.1s ease;
    visibility: hidden;
    align-items: stretch;
    justify-content: stretch;
    z-index: 999;
    background-color: #222222;
}

.rtls .gl-side-sub-menu {
    left: unset;
    right: 100%;
}

.gl-side-menu .gl-side-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    padding-inline-start: 0px;
    border-inline-start: 0.2rem solid transparent;
    cursor: pointer;
    width: 100%;
    height: var(--gl-menu-size-vertical);
    transition: all 0.2s ease;
    /* position: relative; */
    color: white;
}

.gl-side-menu .gl-side-menu-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* FIRAS - 2024-07-30 */
    /* flex-direction: column; */
}

.gl-side-menu .gl-side-menu-section {
    padding: 5px 10px;
}

.gl-side-menu>.gl-side-menu-item-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: initial;
    overflow: hidden;
}

.gl-side-menu .gl-side-menu-tooltip {
    position: absolute;
    background: black;
    z-index: 9999;
    visibility: hidden;
    white-space: nowrap;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 3px #AAA;
    right: unset;
    left: unset;
}

.gl-side-menu .gl-side-menu-tooltip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    right: unset;
    margin: auto;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
    margin-left: -10px;
    width: 10px;
    height: 10px;
}

.rtls .gl-side-menu .gl-side-menu-tooltip::after {
    left: unset;
    right: 0px;
    border-color: transparent transparent transparent #000;
    margin-right: -10px;
}

.gl-side-sub-menu .gl-side-menu-item {
    justify-content: flex-start;
    justify-content: start;
}

.gl-side-menu .gl-side-menu-item .gl-side-menu-item-label {
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: bold;
    overflow: hidden;
    width: auto;
    flex: 1;
    margin-inline-start: 10px;
    /* FIRAS - 2024-07-30 */
    /* font-size: 0.6rem;
    text-align: center; */
}

.gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-label,
.gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content>.gl-side-menu-item-label {
    display: none;
    opacity: 0;
    width: 0px;
    margin-inline-start: 0px;
    overflow: hidden;
    /* FIRAS - 2024-07-30 */
    /* flex-direction: column;
    display: block;
    opacity: 1;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap; */
}

/* FIRAS - 2024-07-30 */
/* .gl-side-sub-menu .gl-side-menu-item .gl-side-menu-item-label,
.gl-side-sub-menu .gl-side-menu-item .gl-side-menu-item-content {
    flex-direction: row;
    font-size: 1rem;
    text-align: start;
} */

.gl-layout .gl-side-menu .gl-side-menu-item .gl-side-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--gl-menu-size-vertical) - 20px);
    height: calc(var(--gl-menu-size-vertical) - 20px);
    mask-size: 60%;
    -webkit-mask-size: 60%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: currentColor;
    color: inherit;
    /* background-size: 60%;
  background-repeat: no-repeat;
  background-position: center; */
    border-radius: 10px;
}
/* FIRAS - 2024-08-25 */
.gl-layout .gl-side-menu .gl-side-menu-item .gl-side-menu-item-icon.fa-icon {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background-color: transparent;
}
.gl-layout .gl-side-menu .gl-side-menu-item .gl-side-menu-item-icon.fa-icon i {
    font-size: 2rem;
}

.gl-layout .gl-side-menu .gl-side-menu-item .gl-side-menu-item-badge {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 0.5rem;
    left: unset;
    right: 0.5rem;
    background: var(--color-badge-background);
    border-radius: 100%;
}

.rtls .gl-layout .gl-side-menu .gl-side-menu-item .gl-side-menu-item-badge {
    left: 0.5rem;
    right: unset;
}

.gl-layout .gl-side-menu .gl-side-menu-item.active .gl-side-menu-item-icon {
    /* content: "";
  width: calc(var(--gl-menu-size-vertical) - 20px);
  height: calc(var(--gl-menu-size-vertical) - 20px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  right: 0px;
  margin: auto 0px;
  background: red;
  border-radius: 10px; */
    /* background-color: #9A4FDB; */
}

.gl-layout .gl-side-menu .gl-side-menu-item.active {
    border-inline-start-color: var(--color-primary);
}

@supports selector(:has) {
    .gl-layout .gl-side-menu .gl-side-menu-item:has(.gl-side-menu-item.active)>.gl-side-menu-item-icon {
        background-color: #9A4FDB !important;
    }
}


/* .gl-layout .gl-side-menu .gl-side-menu-item.active > .gl-side-menu-item-icon,
.gl-layout .gl-side-menu .gl-side-menu-item:has(.gl-side-menu-item.active) > .gl-side-menu-item-icon {
  background-color: #9A4FDB !important;
} */


.gl-side-menu .gl-side-menu-item:hover,
.gl-side-menu .gl-side-menu-item.focus {
    background: var(--color-primary);
}

.gl-side-sub-menu .gl-side-menu-item:hover {
    background-color: var(--color-primary);
}

.gl-side-menu-item.sub .gl-side-sub-menu {
    pointer-events: none;
}
.gl-side-menu-item.sub.focus.interactive .gl-side-sub-menu {
    pointer-events: all;
}

/* /LAYOUT */


/* BUTTON */

.gl-button {
    display: inline-flex;
    height: 3.375rem;
    padding: 0.9375rem 1.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.625rem;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-button-foreground);
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
}

.gl-button[ladda] {
    gap: 0px;
    padding: 0px;
    position: relative;
}

.gl-button[ladda] .ladda-label {
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
    gap: 0.625rem;
    padding: 0.9375rem 1.625rem;
}

.gl-button[ladda] .ladda-spinner {
    position: absolute;
    margin: auto;
}

.gl-button[ladda][data-loading] .ladda-label {
    visibility: hidden;
}

.gl-button.gl-outline {
    background: transparent;
    color: var(--color-primary);
}

.gl-button.gl-outline:hover {
    background: var(--color-primary);
    color: #FFF;
}

.gl-button.gl-outline-2 {
    background: var(--color-primary-light);
    color: var(--color-primary);
}


/*bsharah 14-9-2023*/

.gl-button.gl-outline-black {
    /* background: var(--color-button-foreground); */
    background: transparent;
    color: var(--color-button-background);
    border-color: var(--color-button-background) !important;
}

/*bsharah 2024-08-11*/
.gl-button.gl-outline-black .gl-button-text{
    font-size: 0.85rem; 
    min-width: fit-content; 
}

.gl-button.gl-outline-black:hover {
    background: black;
    color: white;
    border-color: black !important;
}

.gl-button.gl-button-black {
    /* background: var(--color-button-foreground); */
    background: black;
    color: white;
    border-color: black !important;
}

.gl-button.gl-button-black:hover {
    background: white;
    color: black;
    border-color: black !important;
}

.gl-button.gl-disabled,
.gl-button.disabled {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.gl-button .gl-button-icon,
.gl-grde-subjet-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: currentColor;
}

/* FIRAS - 2024-09-01 */
.gl-button.gl-outline-dark {
    background: transparent;
    color: #000000;
    border-color: var(--material-theme-static-gray-2, #7D7D7D);
}
.gl-button.gl-outline-dark:hover {
    background: var(--color-input-dark-active);
}
.gl-button.gl-dashed {
    background: transparent;
    border: 2px dashed var(--material-theme-static-gray-2, #7D7D7D);
    color: #000000;
}


/*bsharah 20-9-2023*/

.rtls .gl-flip-icon-rtls .gl-button-icon {
    transform: rotateZ(180deg);
}


/*bsharah 20-9-2023*/

.gl-space-between {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    flex-wrap: wrap;
}


/*bsharah 20-9-2023*/

.gl-uib-menu-text {
    color: #000;
    /* font-family: Poppins; */
    font-size: 1rem;
    /* font-style: normal; */
    font-weight: 1000;
    /* line-height: normal; */
}


/*bsharah 20-9-2023*/

.gl-hover-clickable {
    cursor: pointer;
}


/* Blue Button */

.gl-button.gl-button-primary-bs5 {
    border: 1px solid var(--color-primary-bs5);
    background: var(--color-primary-bs5);
    color: var(--color-light-bs5);
}


/* Red Button */

.gl-button.gl-button-danger-bs5 {
    border: 1px solid var(--color-danger-bs5);
    background: var(--color-danger-bs5);
    color: var(--color-light-bs5);
}

.gl-button.gl-button-danger-bs5:hover {
    border: 1px solid var(--color-danger-bs5) !important;
    background: white !important;
    color: var(--color-danger-bs5) !important;
}

/* Green Button */

.gl-button.gl-button-success-bs5 {
    border: 1px solid var(--color-success-bs5);
    background: var(--color-success-bs5);
    color: var(--color-light-bs5);
}


/* Yellow Button */

.gl-button.gl-button-warning-bs5 {
    border: 1px solid var(--color-warning-bs5);
    background: var(--color-warning-bs5);
    color: var(--color-light-bs5);
}


/* Grey Button */

.gl-button.gl-button-secondary-bs5 {
    border: 1px solid var(--color-secondary-bs5);
    background: var(--color-secondary-bs5);
    color: var(--color-light-bs5);
}


/* Size Small*/


/*when use this class, you can  choose either text only or icon only*/

/* FIRAS - 2024-08-04 - Convert px to rem */
.gl-button.gl-button-size-small {
    height: 2.2rem;
    min-width: 4.2rem;
    padding: 0.5rem;
    /* height: 45px; */
}

.gl-button.gl-button-size-wide {
    width: 15rem;
}


/*bsharah 6-9-2023 */

.gl-button.gl-button-danger {
    border: 1px solid var(--color-danger) !important;
    background: transparent !important;
    color: var(--color-danger) !important;
}

.gl-side-panel-bottom-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1rem;
}


/* /BUTTON */


/* COLLAPSE */

.gl-collapse {
    margin: 0px;
}

.gl-collapse.gl-collapse-header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    padding: 0.8rem 0rem;
    cursor: pointer;
    outline: none;
}

.gl-collapse-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.8rem 0rem;
    cursor: pointer;
    outline: none;
}

.gl-collapse.gl-grid-subject-collapse .gl-collapse-header {
    cursor: unset;
}

.gl-collapse .gl-collapse-header .gl-collapse-header-title {
    color: #000;
    font-family: Inter;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.gl-collapse .gl-collapse-header .gl-collapse-header-icon {
    width: 0.5rem;
    height: 0.5rem;
    mask-image: url('../img/glool/icon_collapse.svg');
    -webkit-mask-image: url('../img/glool/icon_collapse.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.gl-collapse.gl-collapsed .gl-collapse-header .gl-collapse-header-icon {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.gl-collapse .gl-collapse-content {
    padding: 0.8rem 0rem;
    overflow: hidden;
    height: auto;
    transition: all 0.2s ease;
}

.gl-collapse.gl-collapsed .gl-collapse-content {
    height: 0px;
    padding: 0px;
    opacity: 0;
}


/* /COLLAPSE */


/* CONVERSATION ITEM */

.gl-conversation-item {
    background: #FFFFFF;
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    position: relative;
}
.gl-conversation-item:active {
    background: #E0E0E0;
}

.gl-conversation-item.gl-active {
    border-color: var(--color-primary);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}

.gl-conversation-item .gl-conversation-item-info {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 0.5rem;
}

.gl-conversation-item .gl-conversation-item-info .gl-title-main {
    font-size: 1.125rem;
    font-weight: 700;
    color: #000000;
    flex: 1;
}

/* FIRAS - 2024-09-03 */
.gl-conversation-item .gl-conversation-item-info .gl-title-main .gl-title-main-user {
    word-break: break-all;
}
.gl-conversation-item .gl-conversation-item-info .gl-title-main .gl-title-main-target {
    font-size: 0.8rem;
    color: var(--color-primary);
    padding-top: 0.5rem;
}

.gl-conversation-item .gl-conversation-item-info .gl-title-sub {
    font-size: 0.875rem;
    font-weight: 300;
    color: #787878;
    min-width: 3rem;
}

.gl-conversation-item .gl-conversation-item-info .gl-pill {
    display: flex;
    padding: 0.25rem 0.5625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.5rem;
    background: var(--color-primary-light);
}

.gl-conversation-item .gl-conversation-item-title {
    font-size: 0.875rem;
    font-weight: 300;
    color: #787878;
    margin-top: 0.5rem;
    max-height: 6rem;
    overflow: hidden;
}

.gl-conversation-item .gl-conversation-item-badge {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-badge-background);
    border-radius: 100%;
}


/* /CONVERSATION ITEM */


/* CONVERSATION THREAD ITEM */

.gl-conversation-thread-item {
    background: #E8E8E8;
    border-radius: 0.625rem;
    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.20);
    margin: 0px 0.5rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    transition: margin var(--animation-duration) ease;
    position: relative;
}

.gl-conversation-thread-item.gl-sent {
    text-align: end;
    align-self: flex-end;
    margin-inline-start: 5rem;
}

.gl-conversation-thread-item.gl-received {
    margin-inline-end: 5rem;
}

.gl-conversation-thread-item .gl-conversation-thread-item-container {
    background: #FFFFFF;
    border-radius: inherit;
    padding: 1rem;
}

.gl-conversation-thread-item.gl-sent .gl-conversation-thread-item-container {
    background: inherit;
    background: var(--color-primary);
    color: white;
}

.gl-conversation-thread-item .gl-conversation-item-overlay {
    border-radius: inherit;
    border-start-end-radius: 0px;
    border-end-end-radius: 0px;
    overflow: hidden;
    width: 0rem;
    opacity: 0;
    transition: all var(--animation-duration) ease;
}

.gl-gesture-reveal .gl-conversation-thread-item .gl-conversation-item-overlay {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(220, 220, 220, 0.9);
    width: 3rem;
    opacity: 1;
}

.gl-conversation-thread-item .gl-conversation-item-overlay .gl-conversation-thread-item-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gl-conversation-thread-item.gl-deleted .gl-conversation-thread-item-container {
    flex-direction: row;
    display: flex;
    gap: 1rem;
    padding: 0rem 1rem;
    background: #c9c9c9;
    font-size: 0.8rem;
    align-items: center;
    justify-content: space-between;
    color: #555;
    font-style: italic;
}

.gl-gesture-reveal .gl-conversation-thread-item .gl-conversation-thread-item-container {
    border-end-start-radius: 0px;
    border-start-start-radius: 0px;
}

.rtls .gl-gesture-reveal .gl-conversation-thread-item .gl-conversation-thread-item-container {
    border-end-start-radius: unset;
    border-start-start-radius: unset;
    border-end-start-radius: 0px;
    border-start-start-radius: 0px;
}

.gl-conversation-thread-item.gl-received .dropdown {
    display: none !important;
}

.gl-conversation-thread-item.gl-sent .dropdown {
    position: absolute;
    top: 0px;
    left: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

.gl-conversation-thread-item.gl-sent:not(.gl-deleted) .gl-conversation-thread-item-container {
    padding-top: 1.5rem;
}

.gl-conversation-thread-item .dropdown-menu {
    left: unset;
    right: 0px;
}

.gl-conversation-thread-item .dropdown-toggle {
    color: white;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    mask-image: url('../img/glool/dots-horizontal.svg');
    -webkit-mask-image: url('../img/glool/dots-horizontal.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: currentColor;
}

.gl-conversation-thread-item-header,
.gl-conversation-thread-item-header .gl-conversation-item-info,
.gl-conversation-thread-item-header .gl-conversation-item-info .gl-conversation-item-info-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.gl-conversation-thread-item-header {
    border-bottom: 0.06rem solid #E0E0E0;
    padding: 1.25rem;
    border-radius: 0.375rem;
    background: #FFFFFF;
}

.gl-conversation-thread-item-header .gl-conversation-item-info {
    flex: 1;
    max-height: 5rem;
}

.gl-conversation-thread-item-header .gl-conversation-item-avatar {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gl-conversation-thread-item-header .gl-conversation-item-info .gl-pill {
    display: flex;
    padding: 0.25rem 0.5625rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    border-radius: 2.5rem;
    background: var(--color-primary-light);
}

.gl-conversation-thread-item-header .gl-conversation-item-info .gl-title-main {
    /* max-width: 50%; */
    white-space: nowrap;
}

.gl-conversation-thread-item .gl-conversation-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gl-conversation-thread-item .gl-conversation-item-info .gl-title-main {
    font-size: 1.125rem;
    font-weight: 700;
    color: #000000;
}

.gl-conversation-thread-item .gl-conversation-item-info .gl-title-sub {
    font-size: 0.875rem;
    font-weight: 300;
    color: #787878;
}

.gl-conversation-thread-item.gl-sent .gl-conversation-item-info .gl-title-sub {
    color: inherit;
}

.gl-conversation-thread-item .gl-conversation-item-info .gl-pill {
    display: flex;
    padding: 0.25rem 0.5625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.5rem;
    background: var(--color-primary-light);
}

.gl-conversation-thread-item .gl-conversation-item-title {
    font-size: 0.875rem;
    font-weight: 300;
    color: #787878;
}

.gl-conversation-thread-item .gl-conversation-thread-item-content {
    margin-top: 0.5rem;
}

.gl-conversation-thread-item.gl-deleted .gl-conversation-thread-item-content {
    margin-top: 0rem;
    padding: 0.5rem 1rem;
}

.gl-conversation-thread-item.gl-deleted .gl-conversation-thread-item-container * {
    font-size: inherit !important;
}


/* .gl-conversation-thread-item .gl-conversation-thread-item-content {
    padding: 1.25rem;
} */


/* /CONVERSATION THREAD ITEM */


/* CONVERSATION THREAD REPLY BLOCK */

.gl-conversation-thread-reply-block {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 1rem;
    gap: 1rem;
    height: 4.25rem !important;
    border-radius: 0.625rem;
    border: 2px solid #FFF;
    background: rgba(255, 255, 255, 0.30);
}

.gl-conversation-thread-reply-block .gl-conversation-thread-reply-input {
    flex: 1;
    outline: none;
    background: transparent !important;
    border: none !important;
}

.gl-conversation-thread-reply-block .gl-conversation-thread-reply-button {
    width: 2.125rem;
    height: 2.125rem;
    background-image: url('../img/glool/icon_send.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 100%;
    cursor: pointer;
}


/* /CONVERSATION THREAD REPLY BLOCK */


/* MODAL VIEWS */

.gl-modal .modal-dialog,
.gl-modal .modal-dialog .modal-content .wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    max-height: 100%;
    max-width: 100%;
}

.gl-modal .modal-dialog .modal-content .wrapper {
    height: 100%;
}


/* /MODAL VIEWS */


/* KENDO OVERRIDES */

.gl-border-grid-cell-given-required {
    min-height: 2rem;
    padding: 0rem 1.25rem;
    gap: 0.625rem;
    border-radius: 0.625rem;
    width: 100%;
    border: 1px solid var(--Gray, #B4B4B4);
    background: var(--material-theme-white, #FFF) !important;
}

.gl-top-actions-bar {
    display: flex;
}

.gl-top-actions-bar-mobile {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gl-top-actions-bar-space-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gl-top-actions-bar-center-mobile {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.gl-edit-button-inline-last {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.gl-magnifier-icon-text-field {
    border-radius: 0.5rem;
    border: 0.0625rem solid #D9D9D9 !important;
    margin-inline: 0.3125rem;
    border-radius: 0.3125rem;
    border-radius: 0.5rem;
    outline: none !important;
    flex-shrink: 0;
    width: 14.625rem;
    height: 2.375rem !important;
    padding-right: 2.5rem;
}

.gl-pill-indepandent {
    display: inline-flex;
    padding: 0.25rem 0.5625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2.5rem;
    /* background: var(--color-primary-light); */
    background-color: white; /* bsharah 2024-08-11 */
    white-space: nowrap;
    color: #293846;
}

/* bsharah 2024-08-11 */
.gl-pill-indepandent .gl-title{
    font-weight: 600 !important;
    color: black !important;
}

.gl-pill-small {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    font-weight: 700;
}

.gl-selectable-pill {
    cursor: pointer;
    user-select: none;
}

.gl-selectable-pill.gl-selected {
    background: var(--color-primary);
    color: white;
}

.gl-selectable-pill .gl-pill-icon {
    width: 1rem;
    height: 1rem;
    mask-image: url('../img/glool/icon_check.svg');
    -webkit-mask-image: url('../img/glool/icon_check.svg');
    mask-size: auto;
    -webkit-mask-size: auto;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: currentColor;
    color: inherit;
}

.gl-border-grid-cell-required-and-date {
    border-radius: 0.625rem;
    background: var(--Gray, #B4B4B4);
    border: 0.0625rem solid transparent !important;
    border: 0px solid transparent !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.gl-header-web-daily-homework {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.gl-header-web-daily-homework-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 0.5rem
}


/* MAGNIFIER ICON */

.gl-magnifier-icon {
    width: 0.95275rem;
    height: 1.3rem;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
    background-color: #FFF;
    background: #FFF;
}

.gl-magnifier-icon-text-field-container {
    position: relative;
}

.gl-magnifier-icon-text-field-container-mobile {
    position: relative;
    height: 2.7rem !important;
}


/* /MAGNIFIER ICON */


/*bsharah 25-9-2023 moved from comunication*/

.gl-grey-background {
    background: #F3F3F3 !important;
}

#is-mobile {
    display: none;
}

/* FIRAS - 2024-07-30 */
/* LAYOUT */
.gl-grid-layout {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.gl-grid-layout-2-1 {
    grid-template-columns: 2fr 1fr;
}

.gl-grid-layout-1 {
    grid-template-columns: 1fr;
}

.gl-grid-pane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    flex: 1;
    gap: 1rem;
    overflow-x: hidden;
    /* background: rgb(230, 163, 163); */
}

.gl-grid-start {
    grid-column-start: 1;
}

.gl-box-container {
    border-radius: 0.75rem;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 2.25rem 1.75rem;
    /* flex: 1; */
}

.gl-input-container {
    height: 2.5rem !important;
    background: #FFFFFF !important;
    border-radius: 0.5rem !important;
    border: 0.0625rem solid #D9D9D9 !important;
    overflow: hidden !important;
}

.gl-input-container input:not(.k-input):not(.k-widget),
.gl-input-container .form-control:not(textarea):not(.k-input):not(.k-widget) {
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gl-input-container .input-group-addon {
    border: none !important;
}

.gl-password-strength {
    position: relative;
}

.gl-password-strength .form-control:not(textarea):not(.k-input):not(.k-widget) {
    padding-bottom: 4px;
}

.gl-password-strength .pwstrength_viewport_progress {
    position: absolute;
    height: 4px;
    bottom: 1px;
    left: 0px;
    right: 0px;
}

.gl-password-strength .password-verdict {
    display: none;
}

.gl-hr {
    display: block;
    width: 100%;
    clear: both;
    height: 1px;
    background: #CACACA;
    margin: 0.5rem auto;
}
.gl-hr.gl-hr-dark {
    background: #808080;
}

/* LAYOUT */

/* FIRAS - 2024-08-21 */
.gl-check {
    width: 2rem;
    height: 2rem;
    background-image: url('../img/glool/icon_check.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.gl-error {
    width: 2rem;
    height: 2rem;
    background-image: url('../img/glool/icon_error.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Mobile */

@media screen and (max-width: 767px) {

    /* FIRAS - 2024-07-30 */
    :root {
        --gl-menu-size-horizontal: var(--gl-menu-size-vertical);
    }

    #is-mobile {
        display: block;
    }

    html,
    body {
        font-size: 16px !important;
    }

    .gl-on-medium {
        display: none !important;
    }

    .gl-on-large {
        display: none !important;
    }

    .gl-side-panel-container {
        bottom: var(--gl-menu-size-horizontal) !important;
    }

    .gl-side-panel-container .gl-side-panel {
        /* width: calc(100vw - 2rem); */
        width: 100vw;
    }

    .gl-grade-item-container,
    .gl-menu-item-container,
    .gl-menu-kpi-container,
    .gl-subject-container {
        width: 100%;
        max-width: 20rem;
        /*bsharah 3-10-2023*/
    }

    .gl-menu-container,
    .gl-menu-kpi-container {
        height: 10rem;
    }

    body.body-small.fixed-sidebar .gl-layout .navbar-static-side {
        width: 80px !important;
        display: block !important;
    }

    body.body-small.fixed-sidebar.mini-navbar .gl-layout .navbar-static-side {
        width: 0px !important;
        top: 0px !important;
    }

    .gl-layout .navbar-static-side ul[side-navigation] li:not(.nav-header) a .nav-label {
        display: none !important;
    }

    /* .gl-layout #page-wrapper {
    -webkit-margin-start: 80px !important;
    margin-inline-start: 80px !important;
  }

  .mini-navbar .gl-layout #page-wrapper {
    -webkit-margin-start: 0px !important;
    margin-inline-start: 0px !important;
  } */
    .gl-navbar {
        padding: 20px !important;
    }

    .gl-navbar .gl-navbar-action {
        width: auto !important;
        height: 1.8rem !important;
    }

    #gl-screen-communication .gl-screen,
    #gl-screen-communication .gl-screen-content {
        padding: 0px;
    }

    /* FIRAS - 2024-08-05 */
    .gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content {
        flex-direction: column;
    }

    .gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content>.gl-side-menu-item-label {
        display: block;
        opacity: 1;
        width: 100%;
        text-align: center;
        font-weight: normal;
        font-size: 0.8rem;
        flex: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* FIRAS - 2024-07-30 */
    :root {
        --gl-menu-size-horizontal: var(--gl-menu-size-vertical);
    }

    html,
    body {
        font-size: 16px !important;
    }

    .gl-on-small {
        display: none !important;
    }

    .gl-on-large:not(.gl-on-medium) {
        display: none !important;
    }

    .gl-side-panel-container .gl-side-panel {
        width: calc(100vw - 2rem);
    }

    .gl-side-panel .gl-side-panel-actions .gl-side-panel-action.action-close {
        display: none;
    }

    /* .gl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  } */

    /* FIRAS - 2024-08-05 */
    .gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content {
        flex-direction: column;
    }

    .gl-layout .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content>.gl-side-menu-item-label {
        display: block;
        opacity: 1;
        width: 100%;
        text-align: center;
        font-weight: normal;
        font-size: 0.8rem;
        flex: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* Mobile -> Tablet */

@media screen and (max-width: 1023px) {

    /* FIRAS - 2024-07-30 */
    :root {
        --gl-menu-size-horizontal: var(--gl-menu-size-vertical);
    }

    .gl-layout {
        grid-template-columns: 0px 1fr 1fr 1fr;
        grid-template-rows: auto 1fr var(--gl-menu-size-horizontal);
    }

    .gl-layout-side-menu {
        grid-area: footer;
        flex-direction: row;
        width: 100%;
    }

    .gl-side-menu-brand {
        display: none !important;
    }

    .gl-side-menu {
        flex-direction: row;
    }

    .gl-layout-side-menu .gl-side-menu-toggle {
        display: none;
    }

    .gl-side-menu>.gl-side-menu-item-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item {
        flex: 1;
        width: var(--gl-menu-size-horizontal);
        height: var(--gl-menu-size-horizontal);
        position: unset;
        border-inline-start: none;
        border-bottom: 0.2rem solid transparent;
        /* FIRAS - 2024-08-06 */
        padding: 0.25rem;
    }

    .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item.active {
        border-bottom-color: var(--color-primary);
    }

    .gl-side-menu .gl-side-menu-item .gl-side-menu-item-icon {
        width: calc(var(--gl-menu-size-horizontal) - 20px) !important;
        /* FIRAS - 2024-08-06 20px->30px */
        height: calc(var(--gl-menu-size-horizontal) - 30px) !important;
    }

    .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-label {
        display: none !important;
    }

    .gl-side-sub-menu {
        display: flex;
        position: absolute;
        top: unset;
        bottom: -100%;
        left: 0px;
        width: 100%;
        overflow: hidden;
        opacity: 0;
        transition: all 0.1s ease;
        visibility: hidden;
    }

    .rtls .gl-side-sub-menu {
        left: 0px !important;
        right: 0px !important;
    }

    /* .gl-side-menu-item:hover .gl-side-sub-menu, */
    .gl-side-menu-item.focus .gl-side-sub-menu {
        width: 100%;
        bottom: 0px;
        height: auto;
        max-height: calc(100vh - var(--gl-menu-size-horizontal));
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        margin-bottom: var(--gl-menu-size-horizontal);
    }

    .gl-side-sub-menu .gl-side-menu-item {
        height: auto;
    }
}


/* Laptop */

@media screen and (min-width: 1024px) {
    .gl-on-small {
        display: none !important;
    }

    .gl-side-panel-container .gl-side-panel {
        width: 70vw;
        min-width: 450px;
        right: calc(-1 * max(70vw, 450px));
    }

    .gl-side-panel-container .gl-side-panel.gl-side-panel-small {
        width: auto;
        min-width: 400px;
        right: -100%;
    }

    .rtls .gl-side-panel-container .gl-side-panel {
        right: unset !important;
        left: -100% !important;
    }

    .rtls .gl-side-panel-container.gl-visible .gl-side-panel {
        right: unset !important;
        left: 0px !important;
    }

    /* .gl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  } */
    /* .gl-side-menu-item:hover .gl-side-sub-menu { */
    .gl-side-menu-item.focus .gl-side-sub-menu {
        display: flex;
        width: var(--gl-menu-size-vertical-expanded);
        height: 100vh;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }

    .gl-layout.gl-sidebar-expanded {
        grid-template-columns: var(--gl-menu-size-vertical-expanded) 1fr 1fr 1fr;
    }
    
    .gl-layout.gl-sidebar-expanded .gl-layout-side-menu {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        width: var(--gl-menu-size-vertical-expanded);
    }
    
    .rtls .gl-layout.gl-sidebar-expanded .gl-layout-side-menu {
        left: unset;
        right: 0px;
    }

    .gl-sidebar-expanded .gl-side-menu-brand {
        background-image: url('../img/glool/logo_full.svg');
        background-size: 100% auto;
    }

    .gl-layout.gl-sidebar-expanded .gl-side-menu-toggle {
        mask-size: 40%;
        -webkit-mask-size: 40%;
        mask-image: url('../img/glool/icon_close.svg');
        -webkit-mask-image: url('../img/glool/icon_close.svg');
    }

    .gl-layout.gl-sidebar-expanded .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item {
        justify-content: flex-start;
        justify-content: start;
    }

    /* FIRAS - 2024-07-30 */
    /* .gl-layout.gl-sidebar-expanded .gl-side-menu .gl-side-menu-item-content {
        flex-direction: row;
    } */

    .gl-layout.gl-sidebar-expanded .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-label,
    .gl-layout.gl-sidebar-expanded .gl-side-menu>.gl-side-menu-item-container>.gl-side-menu-item>.gl-side-menu-item-content>.gl-side-menu-item-label {
        display: initial;
        width: auto;
        opacity: 1;
        transition: all 0.2s ease;
        /* transition-delay: 0.2s; */
        margin-inline-start: 10px;
        /* FIRAS - 2024-07-30 */
        /* flex-direction: row;
        font-size: 1rem;
        text-align: start; */
    }

    /* .gl-layout.gl-sidebar-expanded .gl-side-menu > .gl-side-menu-item > .gl-side-menu-item-icon {
      width: 30px;
      height: 30px;
    } */
}


/* Large Screens */

@media screen and (min-width: 1280px) {

    /* .gl-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
  } */
    .gl-on-small {
        display: none !important;
    }

    .gl-on-medium:not(.gl-on-large) {
        display: none !important;
    }
}


/* High Def */

@media screen and (min-width: 1920px) {

    html,
    body {
        font-size: 16px !important;
    }

    .gl-on-small {
        display: none !important;
    }

    .gl-on-medium:not(.gl-on-large) {
        display: none !important;
    }
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-Regular.ttf');
}

.gl-body {
    font-family: Poppins, Readex !important;
}

body:not(.gl-body) {
    font-size: 14px !important;
}

/* FIRAS - 2024-09-01 */
/* LAYOUT */
.gl-label {
    padding-bottom: 0.5rem;
}
.gl-grid-layout {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
.gl-grid-layout-2-1 {
    grid-template-columns: 2fr 1fr;
}
.gl-grid-layout-1 {
    grid-template-columns: 1fr;
}
.gl-grid-pane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    flex: 1;
    gap: 1rem;
    overflow-x: hidden;
    /* background: rgb(230, 163, 163); */
}
.gl-grid-start {
    grid-column-start: 1;
}
.gl-box-container {
    border-radius: 0.75rem;
    background: var(--White, #FFF);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 2.25rem 1.75rem;
    /* flex: 1; */
}
.gl-input-container {
    height: 2.5rem !important;
    background: #FFFFFF !important;
    border-radius: 0.5rem !important;
    border: 0.0625rem solid #D9D9D9 !important;
    overflow: hidden !important;
}
.gl-input-container input:not(.k-input):not(.k-widget),
.gl-input-container .form-control:not(textarea):not(.k-input):not(.k-widget) {
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.gl-input-container .input-group-addon {
    border: none !important;
}
.gl-password-strength {
    position: relative;
}
.gl-password-strength .form-control:not(textarea):not(.k-input):not(.k-widget) {
    padding-bottom: 4px;
}
.gl-password-strength .pwstrength_viewport_progress {
    position: absolute;
    height: 4px;
    bottom: 1px;
    left: 0px;
    right: 0px;
}
.gl-password-strength .password-verdict {
    display: none;
}

.gl-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0rem;
    width: 100%;
}
.gl-screen-header .gl-screen-header-title {
    font-size: 1.4rem;
    font-weight: 700;
}
/* LAYOUT */

/* FIRAS - 2024-09-01 */
/* LIST */
.gl-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-list-item);
    overflow: hidden;
}
.gl-list-item .gl-list-item-title {
    flex: 1;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* LIST */

/* FIRAS - 2024-09-01 */
/* CHECKBOX */
.gl-checkbox {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    width: 1.6875rem;
    height: 1.6875rem;
    background-image: url('../img/glool/icon_checkbox_unchecked.svg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.gl-checkbox.checked,
.gl-checkbox:checked,
.gl-checkbox[checked] {
    background-image: url('../img/glool/icon_checkbox_checked.svg');
    background-color: var(--color-primary);
}
/* CHECKBOX */

/* bsharah 2024-08-13 add rest of poppins */
@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Black.ttf');
    font-weight: 900;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-ExtraBold.ttf');
    font-weight: 800;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-ExtraLight.ttf');
    font-weight: 200;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-Thin.ttf');
    font-weight: 100;
}

@font-face {
    font-family: Poppins;
    src: url('../../theme/fonts/Poppins/Poppins-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
}


/* bsharah 2024-08-13 rest of Readex */

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-ExtraLight.ttf');
    font-weight: 200;
}

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: Readex;
    src: url('../../theme/fonts/Readex_Pro/static/ReadexPro-SemiBold.ttf');
    font-weight: 600;
}