:root {
    --primarygreen: #81c44c;
    --darkaccentgreen: #228848;
    --lightgreen: #e2f0d8;
    --topmenublue: #0881a3;
    --white: #FFFFFF;
    --black: #000000;
    --navigation: #F9F7F7;
    --lightpurple: #E4E1E5;
    --darkgrey: #A9A9A9;

    --z-index-dialog: 200;
    --z-index-header: 110;
    --z-index-sidebar: 100;
    --z-index-collapse: 90;

    --font-family-sans-serif: Arial, Helvetica, sans-serif;
}

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

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

.flex-row {
    display:flex;
    flex-direction: row;
    height:100%;
    width:100%;
}

.site-content {
    overflow-x:auto;
    padding:0 1.5rem 1.5rem 1.5rem;
}

.login-page {
    height: 100% !important;
    width: 100% !important;
}

.full-1 {
    flex: 1;
}

.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--navigation);
    border-radius: 5px;
    z-index: var(--z-index-header);
}

.page-title {
    font-size: 2.2em;
}

.page-login #page-content {
    margin-top: 0;
    margin-left: 0;
    max-width: 100VW;
    padding: 0;
}

#left-side {
    text-align: center;
    padding: 15rem 10rem;
}

#right-side {
    flex-grow:1;
}

.logo {
    height: 25px;
    margin: 4px;
}

.navbar i.fa-solid, .navbar i.fas {
    color: var(--primarygreen);
}

.navbar a {
    font-weight: 700;
}

.sidebar {
    position: static !important;
    overflow: auto !important;
    background-color: var(--navigation);
    /* height: calc(100% - 4.375rem) !important; */
    min-height: calc(100% - 4.375rem) !important;
    z-index: var(--z-index-sidebar);
}

.sidebar.toggled {
    overflow: visible !important;
}

@media (max-width: 768px) {
    .sidebar {
        overflow: visible !important;
    }
}

#Username1 {
    color: var(--topmenublue);
    font-weight: 400;
    font-size: 15px;
}

#login-info input {
    height: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--white) !important;
    background: var(--primarygreen);
    box-shadow: none;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    margin-right: 0.5px;
    opacity: .35;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--white) !important;
    background-color: white;
    background: var(--primarygreen);
    border-radius: 6px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    border: none;
    margin-right: 0.5px;
    opacity: .35;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--white) !important;
    border-radius: 6px;
    background-color: var(--primarygreen);
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    border: none;
    margin-right: 0.5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--darkaccentgreen);
    border: 1px solid var(--darkaccentgreen);
    color: var(--white);
}

.dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
}

table {
    width:100%;
}

table.dataTable.no-footer {
    border: none;
}

th, table.display thead th {
    padding: 8px 18px 8px 10px;
    border-bottom: 1px solid #e4e1e5;
    font-weight: bold;
    font-size: 16px;
    background-color: var(--lightpurple);
    color: var(--black);
    cursor: pointer;
}

.btn-xs {
    padding: 6px;
    font-size: 14px !important;
    margin: 2px
}

.btn-primary {
    background-color: var(--primarygreen);
    border-color: var(--primarygreen);
    color: white;
}

.ui-dialog { 
    border: 1px solid var(--white);
    font-size: 14px;
}

.ui-dialog-titlebar {
    background: var(--primarygreen);
    border: 1px solid var(--primarygreen);
    font-size: 16px;
}

.ui-dialog-content {
    margin: 2%;
}

.ui-dialog-titlebar-close {
    border: none;
    background: none;
}

.ui-dialog-titlebar-close::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    content: "\f00d"; /** Unicode for xmark **/
    position: relative;
    top: -6px;
    color: white;
}

.ui-dialog-titlebar-close:hover::before {
    color: var(--black);
}

.jqueryFileTree {
    font-size: 12px !important;
}

.ui-widget {
    font-family: var(--font-family-sans-serif);
    font-size: 14px !important;
}

.ui-widget-header {
    background: var(--primarygreen);
    border: 1px solid var(--primarygreen);
    font-size: 16px;
}

.ui-widget-header.header-row {
    border: 1px solid var(--lightpurple);
}

.ui-widget-content {
    border: 1px solid var(--lightpurple);
}

.ui-accordion-header {
    background: none !important;
    background-color: var(--primarygreen) !important;
    color: #000 !important;
}

.topbar #sidebarToggleTop {
    background-color: transparent !important;
    margin-left: 0 !important;
}

.topbar #sidebarToggleTop:hover {
    cursor: pointer;
}

.navbar {
    padding: 0.75rem 1rem;
}

#accordionSidebar input[type="text"] {
    border: 2.5px solid var(--lightpurple) !important;
    border-radius: 8px !important;
}

#accordionSidebar .nav-item-search .nav-link:hover {
    background-color: var(--navigation) !important;
    border-left: none !important;
}

.fa-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fa-wrapper i {
    font-size: 16px; 
    color: var(--primarygreen) !important;
}

#collapseSearch {
    width: 200%;
    top: 50%;
    transform: translateY(-50%);
    animation: none !important;
    background-color: #fff;
}

form {
    margin: 2%;
}

form table td {
    border: none;
}

form input[type="text"]{
    position: relative;
    display: block;
    height: 25px;
}

select {
    margin: 0;
    background: rgba(228, 225, 229, 0.2);
    border: 2.5px solid var(--lightpurple);
    border-radius: 8px;
}

.algo-field-lhs {
    background-color: var(--lightpurple);
}

.label-error {
    color: red;
}

#accordionSidebar .collapse-item {
    white-space: normal;
}

.collapse-item.current-page, .nav-link.current-page {
    background-color: var(--lightgreen);
}

.list-algorithm-group-header {
    cursor: pointer;
}

/* .collapse-inner {
    max-width: 11rem;
    overflow: auto;
} */

.inner-collapse {
    position: static !important;
}

.sidebar.toggled .inner-collapse-parent {
    max-height: 500px;
    overflow: auto;
    z-index: var(--z-index-collapse);
}

@media (max-width: 768px) {
    .sidebar .inner-collapse-parent {
        max-height: 500px;
        overflow: auto;
        z-index: var(--z-index-collapse);
    }
}

.ui-dialog {
    z-index: var(--z-index-dialog);
}

#list_job {
    overflow-x: auto;
    overflow-y: auto;
}

.search-div {
    width:100%;
    border:2.5px solid var(--lightpurple);
    border-radius:8px;
    height:45px;
}

#siteSearchModal .modal-body {
    width:100%;
    height:100%;
    padding:1rem !important;
    background-color:#f5f6f7;
}

#siteSearchInput {
    padding-left:calc(26px + 0.25rem);
    background-color:white;
}

.no-search-result {
    display:flex;
    justify-content:center;
    padding:36px 0;
}

.search-result-section {
    margin-top:1rem;
}

.search-result-section>ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.search-result-section>ul>li {
    border-radius:4px;
    background-color:white;
    box-shadow: 0 1px 3px 0 #d4d9e1;
    height: 56px;
    margin-bottom: 4px;
}

.search-result-section>ul>li>a {
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
}

.search-result-section>ul>li>a>div {
    display: flex;
    width:100%;
    padding:10px;
}

.search-result-item-icon {
    color: var(--primarygreen) !important;
    margin-right: 0.25rem;
    display: flex;
    align-items: center;
}

.search-result-item-content {
    display: flex;
    flex-direction: column;
}

.search-result-item-content-subtext {
    font-size: 0.75rem;
    color: var(--darkgrey);
}

footer {
    text-align: center;
    padding: 10px;
    font-size: 14px;
}

.bold {
    font-weight: bold;
}

.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 1140px;  */
}

#file-manager-modal {
    max-width: 500px !important;
}

.algo-form {
    padding-top: 25px;
    margin-bottom: 3px;
}

.form-field {
    width: 700px;
    margin: 0 auto;
    position: relative;
}

.navbar .nav-item {
    padding-left: 1rem;
}

.nav li {
    position: relative;
}

.nav.justify-content-end li {
    margin-left: 0;
}

.dropdown-menu.show {
    min-width: auto;
}

.dropdown-item {
    width: auto;
    margin: auto;
}

.spinner {
    position: fixed !important;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:99999 !important;
    overflow: auto;
    width: auto; /* width of the spinner gif */
    height: auto; /*hight of the spinner gif +2px to fix IE8 issue */
    background-color: transparent;
    border-radius: 50%;
    padding: 3%;
    border-color: black;
}

.chonky-toolbarLeft .MuiInputBase-input {
    background: none;
    border: none;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primarygreen) !important;
}

.ui-tabs {
    border: 1px solid #bedac8;
    margin-top: 20px;
}

.ui-tabs .ui-tabs-nav { 
    border: 1px solid #e6e7f0;
}

.ui-tabs .ui-tabs-nav li a {
    background: var(--primarygreen);
    color: #fcfdfd;
    font-size: 15px;
}

.ui-tabs .ui-tabs-nav .ui-state-default {
    border: none;
}

.ui-tabs .ui-tabs-nav a:hover{
    color: var(--black);
}

.ui-tabs .ui-tabs-nav .ui-state-active a, 
.ui-tabs .ui-tabs-nav .ui-state-active a:link{
    background: #fcfdfd;
    color: var(--black);
    border-radius: 8px;
}

.card {
    border: 1px solid #bedac8;
}

#accordionSidebar .collapse-header {
    color: var(--darkaccentgreen);
}

#algorithm_form input[type="text"], textarea{
    width:100%;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primarygreen);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height:26px !important;
}

.select2-dropdown {
    /* Make sure the dropdown's zindex is greater than that of modal */
    z-index: 9999 !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #aaa;
}

textarea, input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] {
    margin: 0;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em;
  }