/* start general */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@700&display=swap');

:root {
    /* 0B0D2E */
    --sideMenu: 68px;
    --textSize: 12px;
    --mainColor: #00ffc3;
    --secColor: #191b3b;
    --iconColor: #8396BF;
    --grayColor: #475174;
    --textColor: #ffffff;
    --backColor: #0A0C29;
    --starColor: #FFD700;
    --putColor: #009DFF;
    --frontColor: #895DFF;
    --dangerColor: #dc3545;
    --active-bckg: #003327;
    --fontFamily: 'eudoxus sans', 'Tajawal', sans-serif;
    --backColorOpacity: rgba(10,12,41, 0.5);
}

.dark {
    --secColor: #222222;
    --iconColor: #999999;
    --backColor: #000000;
    --grayColor: #6b6c6e;
    --backColorOpacity: rgba(0,0,0, 0.5);
}

.term {
    --secColor: #222222;
    --iconColor: #999999;
    --backColor: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fontFamily);
}

html,
body {
    font-size: var(--textSize);
    position: relative;
    min-height: 100vh;
    color: var(--textColor);
    overflow-x: hidden;
    background-color: var(--backColor);
    overflow: hidden;
}

a,
a:hover {
    color: inherit;
    text-decoration: none;
}

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

.form-control,
.form-select,
.form-check-input,
.btn:focus,
.btn:active,
.form-control:hover,
.form-control:focus,
.form-control:active,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--secColor);
}

.form-check-input {
    background-color: var(--secColor);
    border-color: var(--iconColor);
    border-radius: 3px;
    cursor: pointer;
}

    .form-check-input:checked {
        background-color: var(--mainColor);
        border-color: var(--mainColor);
    }

    .form-check-input:focus {
        border-color: var(--iconColor);
    }

span.error {
    color: var(--dangerColor) !important;
    padding: 8px;
    width: 100%;
    display: block;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


main {
    display: flex;
    min-height: 100vh;
    background-color: var(--backColor);
}

.pages {
    flex: 1 0 0%;
    height: 100vh;
    overflow: auto;
    display: flex;
    padding: 0 35px;
    flex-direction: column;
}

    .pages .page-content {
        /*flex: 1 0 0%;*/
        height: calc(100vh - 25px) !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

.no-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.pages .content .main_title {
    font-size: 39px;
    margin-bottom: 28px;
}

.layout-footer {
    height: 25px;
    background-color: var(--backColor);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.breadcrumb {
    margin: 0;
    font-size: 15px !important;
    font-weight: bold !important;
    white-space:nowrap;
}

.icon_container ul li .link {
    color: var(--mainColor);
    color: var(--secColor);
}

.notificationMessage {
    font-size: 14px;
}

.notificationIcon {
    font-size: 14px;
}

@media(max-width:767px) {
    .notifications .left_side .notifi_header {
        flex-direction: column;
    }
}

.portal_modal .modal-content {
    min-height: auto !important;
    padding: 10px 30px 10px 30px !important;
}

.card .card-header {
    padding-top: 10px;
}

    .card .card-header h3 {
        display: flex;
        gap: 10px;
    }

.card .card-body a h5 i {
    width: 20px
}

.card .card-body h3 {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 10px;
    white-space: nowrap;
    display: flex;
    gap: 10px;
}

.card .icon-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.disable {
    opacity: 0.5;
}

.main_card.disable {
    opacity: 0.5;
}

    .main_card.disable bt.hover::after {
        color: antiquewhite;
    }

.k-list-scroller::-webkit-scrollbar, .scroll-content::-webkit-scrollbar {
    width: 7px;
}

.k-list-scroller::-webkit-scrollbar-track, .scroll-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.k-list-scroller::-webkit-scrollbar-thumb, .scroll-content::-webkit-scrollbar-thumb {
    background-color: var(--iconColor);
    border-radius: 20px;
}

.k-list-scroller, .k-animation-container {
    width: 100%;
    border-top: 1px solid var(--mainColor);
}

.k-list {
    white-space: nowrap;
}

.k-grid-footer-wrap, .k-grid-header-wrap {
    border-style: none;
    border-width: 0 0 0 0;
}

.tab-content > .tab-pane {
    /*padding:10px 10px;*/
}

.tab-content {
    max-height: calc(100% - 15%) !important;
    margin-bottom: 15px;
}



.monaco-editor .view-line {
    /* word-spacing: 5px; */
    letter-spacing: 1px;
}

.k-pager-numbers .k-state-selected {
    background-color: var(--mainColor) !important;
    color: var(--backColor) !important;
}

.hidden {
    visibility: hidden;
}

.k-grid-pager {
    color: #fff;
}

.k-edit-cell {
    padding: 3px !important 0px 0px;
}

.icon-button {
    border: none;
    color: var(--textColor);
    background: var(--secColor);
    border-radius: 12px;
    width: 35px;
    height: 35px;
}

    .icon-button i {
        color: var(--iconColor);
        padding: 10px 7px 7px 10px;
        font-size: 15px !important;
    }
/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,
.monaco-editor .decorationsOverviewRuler,
.monaco-editor
.monaco-scrollable-element
.scrollbar.vertical
.arrow-background {
    border-radius: 20px;
    background: var(--secColor);
}
/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */
.monaco-editor .monaco-scrollable-element .scrollbar.vertical {
    border-radius: 20px;
    color: var(--iconColor);
}
#boardList {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    width: 100%;
}

    #boardList li {
        padding: 10px; /* Padding for list items */
        cursor: pointer; /* Change cursor to pointer on hover */
        border: 1px solid transparent; /* Make it look clickable */
    }

        #boardList li label {
            gap: 10px;
            display: flex;
            justify-content: flex-start;
        }
.error {
    background-color: transparent;
    color: var(--dangerColor);
    display: block;
}
.k-treeview .k-in {
    border-style: none!important;
    border-width: 0px!important;
}
.k-treeview .k-top {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}