@font-face {
    font-family: "Roboto Mono";
    src: local('Roboto Mono'),
            url(/fonts/RobotoMono-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: "Ubuntu";
    src: local('Ubuntu'),
            url(/fonts/Ubuntu-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Outfit";
    src: url(/fonts/Outfit-VariableFont_wght.ttf) format("truetype");
    
    font-style: bold;
    font-weight: bold;
    font-variant: bold;
}

@font-face {
    font-family: "Outfit";
    src: url(/fonts/Outfit-VariableFont_wght.ttf) format("truetype");
    
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}

@font-face {
    font-family: "Virgil";
    src: url(/fonts/Virgil.woff2) format("woff2");
}

/* Root variables */
/*----------------*/

:root {
    --body-font: "Ubuntu", Arial, Helvetica, sans-serif;
    --title-font: "Outfit", Arial, Helvetica, sans-serif;
    --title-font1: "Outfit", Arial, Helvetica, sans-serif;
    --top-menu-height: 27px;
    --vertical-divider-width: 12px;
}

/* Basic tag styling */
/*-------------------*/

*, ::after, ::before {
    box-sizing: border-box;
}

*[hidden] { display: none !important; }

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

h1, h2, h3, h4, h5, h6 {padding: 0; margin: 0; font-family: var(--title-font1)}

p {margin: 0; padding: 0; line-height: 1.5}
    
textarea {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
    
button {
    padding: 0;
    margin: 0;
    border: none;
    line-height: 1;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
}

::-moz-focus-inner {border: none}

:focus { outline: none }

a {
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

a:hover {color: inherit}

html, body {
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Ubuntu", Arial, Helvetica, sans-serif;
    overflow-y: auto;
}

h2 {
    all: unset;
    font-family: var(--title-font);
    font-size: 2.4rem;
    font-weight: bold;
    color: #616471;
    display: inline-block;
    margin-bottom: .3em;
    line-height: 1.2;
}

button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

button:focus {
    outline: none;
}

.fa {
    font-size: 1.2em;
}

dd_spinner {
    --size: 50px;
}

[class*="input-style1"] {
    --input-padding: .25em .4em;
    --input-border-width: 1px;
    --input-border-color: var(--grey75);
    --input-border-radius: .3em;
    --input-focus-border-color: #000;
}

[class*="input-style1-round"] {
    --input-border-radius: 100vmax;
    --input-padding: .3em .5em;
    --input-font-size: .95rem;
}

/* Utility classes */
/*-----------------*/

.margin-bottom-1em {
    margin-bottom: 1em;
}

.dd_select.dd_select_style1 {
    min-width: 150px;
}

.dd_select.dd_select_style1 .dd_select_button {
    font-size: 0.9rem;
    line-height: 1.2;
    background: #bec7d5;
    color: #2d314a;
    padding: 2px 4px 2px 4px;
    border-radius: 4px;
    cursor: default;
    white-space: nowrap;
}

.dd_select.dd_select_style1 .dd_select_content {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd_select.dd_select_style1 .dd_select_button:hover {
    color: black;
}

.dd_select.dd_select_style1 .dd_select_options {
    font-size: .9rem;
    max-width: 150px;
    display: block;
    padding: 2px 4px 2px 4px;
    line-height: 1;
    
    white-space: normal;
}

.dd_select.dd_select_style1 .dd_select_option {
    display: block;
    padding: 2px 4px 2px 4px;
    line-height: 1;
    white-space: normal;
}

.mobile_menu_container {
    position: absolute;
    width: 65%;
    height: 100%;
    background: black;
    opacity: 0.5;
    z-index: 10;
    padding: 0.4rem;
    margin-top: -4px;
    color: white;
    font-weight: bold;
    cursor: default;
    overflow-y: auto;
}

.mobile_menu_container .menu_item {
    padding-left: .4rem;
}

.mobile_menu_container .menu_item:hover {
    background: #444;
}

.mobile_menu_container > *:last-child {
    margin-bottom: 50px;
}

.mobile_footer_area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(14%);
    font-size: 0.8rem;
    font-weight: bold;
}

.mobile_footer_area .button {
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 4px 1rem;
    cursor: pointer;
}

.mobile_footer_area .button:hover {
    color: #0255ae;
}

.mobile_footer_area i {
    font-size: 1.7rem;
}

#menu-toggle {
    margin-top: 5px;
    margin-left: 5px;
}

.user_avatar {
    position: relative;
}

.avatar_svg {
    position: relative;
    z-index: 1;
}

.avatar_outline {
    position: absolute;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    top: -2px;
    left: -2px;
}

.avatar_outline path {
    fill: #cccccc;
}

/* Begin sidebar: https://github.com/BlackrockDigital/startbootstrap-simple-sidebar */
/* -------------------------------------------------------------------------------- */
body {
    overflow-x: hidden;
}

#wrapper {
    padding-left: 0;
    -webkit-transition: padding-left 0.5s ease;
    -moz-transition: padding-left 0.5s ease;
    -o-transition: padding-left 0.5s ease;
    transition: padding-left 0.5s ease;
    
    /* my edit */
    height: 100%;
    display: flex;
    flex-direction: column;
}

#wrapper.toggled {
    padding-left: 250px;
}

.below_top_menu_area {
    position: relative;
    width: 100%;
    _height: calc(86% - var(--top-menu-height));
    height: calc(100% - var(--top-menu-height) - 4px);
    padding-top: 4px;
    display: flex;
    flex-direction: column;
}

ide_messages {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    bottom: 0;
    right: 0;
    z-index: 1;
}

ide_message {
    position: relative;
    display: inline-block;
    text-align: center;
    background: #bec7d5;
    padding: .6em 2.7em .6em 1em;
    border-radius: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: .9rem;
    line-height: 1.2;
    transform: scale(0);
    transition: transform 150ms ease-in-out;
    max-width: 250px;
    
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

ide_message.show {
    transform: scale(1);
}

ide_message p {
    margin: 0;
}

ide_message close_button {
    position: absolute;
    top: .5em;
    right: .6em;
    display: inline-block;
    cursor: pointer;
}

ide_message close_button > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    aspect-ratio: 1 / 1;
}

ide_message close_button dd_spinner.timer {
    position: absolute;
    --radius: 12px;
    --seconds: 10s;
    --thickness: 3px;
    --color: #999;
}

ide_message close_button i {
    line-height: 0;
    color: #999;
    font-size: 1.2rem !important;
}

#side_menu {
    z-index: 8;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #434d5c;
    color: white;
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -o-transition: width 0.5s ease;
    transition: width 0.5s ease;
}

#wrapper.toggled #side_menu {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 0px;
    
    /* my edit */
    height:100%;
    display: flex;
    flex-flow: column;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}


/* Sidebar Styles */
/* @todo: why can't I change the class .sidebar-nav selector to the id selector? */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    line-height: 30px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: white;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    background: #2c3645;
    cursor: context-menu;
}

.sidebar-nav li a:focus {
    outline: 0;
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav li a i {
    padding: 0 3px 0 3px;
}

#sidebar_top_area {
    display: flex;
    height: 100%;
    flex-flow: column;
}

#sidebar_project_buttons {
    display: flex;
    flex-flow: row;
    font-size: 1rem;
    color: white;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px #999 solid;
}

.sidebar_project_button {
    padding: 6px;
    cursor: pointer;
}

.sidebar_project_button:hover {
    background: #2c3645;
}

#project_name_nav_item {
    width: 100%;
    position: relative;
    vertical-align: middle;
    font-size: 24px;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    color: white;
    -background: #2c3645;
    background: linear-gradient(0deg, #434d5c 0%, #2c3645 20%, #2c3645 100%);
}

#project_name_nav_item:hover {
    text-decoration: none;
    cursor: context-menu;
}

#project_root_ul {
    padding-left: 20px;
    width: max-content;
    min-width: 100%;
}

#project_root_ul li .item {
    display: inline-block;
    line-height: 1;
    font-size: 0.95rem;
    padding: .35em .2em;
    cursor: default;
    white-space: nowrap;
    width: 100%;
}

#project_root_ul li .item:hover {
    background: #2c3645;
}

#project_root_ul li .item i {
    padding: 0 .3em;
}

#project_root_ul li ul {
    transition: height 200ms ease-in-out;
    overflow: hidden;
    padding-left: 15px;
}

#project_root_ul li ul:not(.showing) {
    height: 0px;
}

#wrapper {
    padding-left: 0;
}

#wrapper.toggled {
    padding-left: 250px;
}
#side_menu {
    width: 0;
}
#wrapper.toggled #side_menu {
    width: 250px;
}
#page-content-wrapper {
    padding: 0px;
    position: relative;
}
#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
}

#side_menu .fa {
    color: #bbb;
}

#new_file_button.sidebar_project_button,
#new_folder_button.sidebar_project_button {
    color: #b0e67a;
}
/* ============================================================================== */
/* End sidebar */
/* ============================================================================== */

#workspace_area {
    width: 100%;
    -height: calc(100% - var(--top-menu-height));
    display: flex;
    flex-flow: row;
    margin: 0;
    flex: 1;
    -padding-bottom: 4px;
}

#workspace_left_area {
    width: 50%;
    height: 100%;
    padding-left: 5px;
}

#workspace_right_area {
    width: 50%;
    height: 100%;
    padding-right: 5px;
}

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

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

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

#tabs_area {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
}

#workspace_bottom_left_area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
}

#workspace_bottom_left_area .md_controls {
    position: absolute;
    right: 0px;
    display: flex;
    flex-direction: row;
    font-size: .7rem;
    font-weight: bold;
    margin-right: 25px;
    margin-top: 6px;
    cursor: pointer;
    color: #aaa;
    z-index: 2;
}

#workspace_bottom_left_area .md_controls .button {
    padding: 0px 4px;
    background: white;
    border: 2px solid #434d5c;
}

#workspace_bottom_left_area .md_controls .button:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#workspace_bottom_left_area .md_controls .button:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#workspace_bottom_left_area .md_controls .button:hover {
    color: black;
}

#workspace_bottom_left_area .md_controls .button.active {
    color: white;
    background: #434d5c;
}

/* Dark Theme */
#workspace_area.dark-theme .md_controls .button {
    background: #1e212d;
    color: #999bb0;
    border-color: #bec7d5;
}

#workspace_area.dark-theme .md_controls .button:hover {
    color: white;
}

#workspace_area.dark-theme .md_controls .button.active {
    background: #bec7d5;
    color: #021653;
}

#markdown_viewer {
    border: 1px solid black;
    flex: 1;
    position: relative;
}

#workspace_area.dark-theme #markdown_viewer {
    background: #2c3645;
    color: white;
    border-color: #dddddd;
}

#markdown_viewer .content {
    border: none;
    position: absolute;
    padding-top: 25px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: "KaTeX_Main";
    font-size: 1rem;
}

#markdown_viewer .content * {
    max-width: 100%;
}

#markdown_viewer h1, #markdown_viewer h2, #markdown_viewer h3,
#markdown_viewer h4, #markdown_viewer h5, #markdown_viewer h6 {
    font-family: inherit;
    color: inherit;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: .9rem;
}

#markdown_viewer .content h1 {font-size: 3rem;}
#markdown_viewer .content h2 {font-size: 2.5rem;}
#markdown_viewer .content h3 {font-size: 2rem;}
#markdown_viewer .content h4 {font-size: 1.5rem;}
#markdown_viewer .content h5 {font-size: 1.25rem;}
#markdown_viewer .content h6 {font-size: 1.1rem;}

#markdown_viewer .content p {
    margin: 1rem 0;
    line-height: 1.65;
}

#markdown_viewer .content ul,
#markdown_viewer .content ol {
    margin: 1rem 0;
    padding-left: 2.5rem;
    list-style: initial;
    line-height: 1.65;
}

#markdown_viewer .content ol {
    list-style: decimal;
}

#markdown_viewer .content li > ul {
    margin-top: 0;
    margin-bottom: 0;
}

#markdown_viewer .content hr {
    width: 100%;
    max-width: none;
    height: 1px;
    background-color: #d5d5d5;
    margin: 1rem 0;
    border: none;
}

#markdown_viewer .content .LaTeX-block {
    margin-bottom: 16px;
}

#markdown_viewer .content code {
    color: #444;
    background: #ddd;
}

#markdown_viewer .content table {
    margin-bottom: 1rem;
}

#markdown_viewer .content table thead {
    background: #bec7d5;
}

#markdown_viewer .content tbody tr:nth-child(even) {
    background: #e1e5ee;
}

#workspace_area.dark-theme #markdown_viewer .content table thead {
    background: #051631;
}

#workspace_area.dark-theme #markdown_viewer .content tbody tr:nth-child(even) {
    background: #434d5c;
}

#workspace_area.dark-theme #markdown_viewer .content code {
    background: #1e212d;
    color: #999bb0;
}

#markdown_viewer .content pre {
    color: #444;
    background: #ddd;
    padding: 2px 4px;
}

#workspace_area.dark-theme #markdown_viewer .content pre {
    background: #1e212d;
    color: #999bb0;
}

#markdown_viewer .content blockquote {
    color: #585858;
    border-left: 4px solid #ccc;
    padding-left: 4px;
    margin-left: 4px;
}

#workspace_area.dark-theme #markdown_viewer .content blockquote {
    color: #999;
    border-left-color: #999;
}

#markdown_viewer .content table th,
#markdown_viewer .content table td {
    padding: 0px 8px;
}

#markdown_viewer .content a,
#markdown_viewer .content a:hover {
    color: #0255ae;
}

#workspace_area.dark-theme #markdown_viewer .content a,
#workspace_area.dark-theme #markdown_viewer .content a:hover {
    color: #7db6f2;
}

#workspace_area.dark-theme #markdown_viewer .content hr {
    background: #999;
}

#workspace_bottom_right_area {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0;
}

.file_tabs_container, .terminal_tabs_container {
    display: flex;
    align-items: flex-end;
}

.file_tabs, .terminal_tabs {
    list-style: none;
    padding: 0;
    margin-bottom: -1px;
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.file_tabs li, .terminal_tabs li {
    border: 1px solid rgba(0,0,0, .2);
    border-radius: 5px 5px 0 0;
    background: white;
    color: #777;
    z-index: 0;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1;
    padding: .2em .4em;
    cursor: default;
}

.file_tabs li.active, .terminal_tabs li.active {
    border: 1px solid #000;
    color: black;
    border-bottom-color: transparent;
    z-index: 2;
}

#new_file_tab, #new_terminal_tab {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: .8rem;
}

#new_file_tab i, #new_terminal_tab i {
    color: #00bd00;
}

#vertical_divider {
    height: 100%;
    width: var(--vertical-divider-width);
    display: flex;
    cursor: ew-resize;
}

#vertical_divider_line {
    width: 50%;
    height: 100%;
}

#vertical_divider:hover > #vertical_divider_line {
    border-right: 2px dashed #aaa;
}

#sidebar_toggle_button {
    font-size: 1.3rem;
}

.terminal_button {
    width: 26px;
    height: 26px;
    font-size: 14px;
    color: #fff;
    background: #000000;
    padding: 6px;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 3px;
    border: 1px solid #000;
    border-radius: 5px;
}

.terminal_button:hover {
    /*color: #ff0000;*/
    color: #000000;
    background: #555555;
    background: #ffffff;
}

/* The Modal (background) */

#name_rename_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#_name_rename_modal .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* --------------------------*/
/* context menu*/
/* --------------------------*/
#context_menu {
    display:none;
    position: absolute;
    border:1px solid #B2B2B2;
    min-width:150px;
    z-index: 100000001;
    background:#F9F9F9;
    border-radius:4px;
}

#context_menu hr { 
    width: 85%; 
    background-color:#E4E4E4;
    border-color:#E4E4E4;
    color:#E4E4E4;
}

#context_menu ul {
    list-style:none;
    margin:0px;
    margin-top:4px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    font-size: 15px;
    color: #333333;
}

#context_menu ul li {
    padding: .2em .4em;
    display: block;
    border-radius: 4px;
    cursor: pointer;
}

#context_menu ul li.disabled {
    color: #aaa;
}

#context_menu ul li:not(.disabled):hover {
    color: white;
    background:#2c3645;
    border-radius:2px;
}

#context_menu separator {
    width: 100%;
    border-top: 1px solid #c2c2c2;
    display: block;
}

/* --------------------------*/
/* Autofill popup */
/* --------------------------*/
#autofill_popup  {
    display:none;
    position:fixed;
    border:1px solid #B2B2B2;
    min-width:150px;
    z-index: 100000001;
    background:#F9F9F9;
    border-radius:4px;
}

#autofill_popup ul {
    list-style:none;
    margin:0px;
    margin-top:4px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    font-size: 15px;
    color: #333333;
}

#autofill_popup ul li {
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 0px;
    padding-top: 0px;
    display: block;
    border-radius: 4px;
    cursor: context-menu;
}

#autofill_popup ul li.selected {
    color: white;
    background:#2c3645;
    border-radius:2px;
}

/* --------------------------*/
/* Confirmation modal        */
/* --------------------------*/

#confirmation_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 100000000;
}

#fte_textarea:focus {
    outline: 0;
}

.text_selection_disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#user_projects_table {
    cursor: context-menu;
}

#user_projects_table .project_row {
}

#user_projects_table .project_row:hover {
    background: #f0f0f0;
    border-radius: 5px;
}

#user_projects_table .header_row {
    font-weight: bold; 
    margin-top: 10px; 
    background: #434d5c; 
    color: white; 
    border-radius: 5px;
}

#user_projects_table .header_cell:hover {
    background: #5d6879;
}

.modal .header {
    font-weight: bold;
    font-size: 20px;
}

.dd_select_options {
    background: #bcbdce;
    border-radius: .2em;
    padding: 4px;
}

.dd_select_options > .dd_select_option {
    border-radius: 8px;
    padding: 2px;
    padding: .1rem .5rem .1rem .5rem;
}

.dd_select_options > .dd_select_option:hover {
    background: #9e9fbd;
}

.collection_filter .create_button,
.dd_select.add_to_collection .create_button {
    border-radius: 0px;
    border-top: 1px solid #888;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #444;
    font-style: italic;
    padding: 0 4px;
}


.collection_filter .create_button:hover,
.dd_select.add_to_collection .create_button:hover {
    background: #9e9fbd;
    cursor: pointer;
}

.small_spinner {
    border: 7px solid #f3f3f3;
    border-top: 7px solid #555555;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#new_project_modal .file_drop_area {
    border: 1px solid #aaa;
    height: 200px;
    overflow: auto;
}

#new_project_modal .file_drop_area .row {
    border-bottom: 1px solid #bbb;
}

#signup_success_alert {
    color: #216213;
}

#update_pwd_feedback {
    visibility: hidden;
    height: 50px;
    color: #216213;
    margin-left: 5px;
}

#side_menu .people_list {
    padding-left: 10px;
    cursor: default;
    overflow: auto;
    overflow-y: hidden;
}

#side_menu .people_list > * {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    padding: .15em .1em;
}

#side_menu .people_list .button_remove_user {
    margin-left: 10px;
    visibility: hidden;
}

#side_menu .people_list:hover .button_remove_user {
    visibility: initial;
}

#side_menu .people_list .button_remove_user:hover i {
    color: white;
}

#side_menu .people_list .online {
    color: white;
}

#side_menu .people_list .offline {
    color: #aaa;
}

#modal_shortcut_select #pressed_keys_feedback {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

/* Top menu */
/* ________ */
#top_menu_area {
    display: flex;
    flex-direction: row;
    height: var(--top-menu-height); 
    width: 100%;
    background: #2c3645;
    font-size: 1rem;
}

#top_menu_area .fa {
    font-size: 1.1em;
}

#top_menu_left_area, #top_menu_right_area {
    display: flex;
    flex-direction: row;
    height: 100%; 
    width: 40%;
    white-space: nowrap;
}

#top_menu_right_area {
    width: 60%;
    margin-left: var(--vertical-divider-width);
    justify-content: space-between;
}

#top_menu_left_area .contents {
    display: flex;
}

.top_menu_item {
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 .6em;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.top_menu_item:hover {
    background: #5d6879;
}

.top_menu_popup {
    font-size:  15px;
    display:    none;
    position:   fixed;
    border:     1px solid #aaa;
    z-index:    100000001;
    background: #2c3645;
    color:      #fff;
}

.top_menu_popup ul {
    list-style:none;
    margin:0px;
    margin-top:4px;
    padding-left:4px;
    padding-right:4px;
    padding-bottom:3px;
    min-width: 150px;
}

.top_menu_popup ul li {
    padding: .2em .6em;
    display: block;
    cursor: pointer;
}

.top_menu_popup ul li.disabled {
    color: #aaa;
}

.top_menu_popup ul li:not(.disabled):hover {
    background: #5d6879;
    border-radius:2px;
}

#top_menu_area .dd_select.opt_server {
    min-width: 150px;
}

#top_menu_area .dd_select.opt_server .dd_select_button {
    font-size: .8rem;
    line-height: 1.2;
    background: #bec7d5;
    color: #2d314a;
    padding: 2px 4px 2px 4px;
    border-radius: 4px;
    cursor: default;
    white-space: nowrap;
}

#top_menu_area .dd_select.opt_server .dd_select_content {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#top_menu_area .dd_select.opt_server .dd_select_button:hover {
    color: black;
}

#top_menu_area .dd_select.opt_server .dd_select_options {
    font-size: .82rem;
    max-width: 150px;
}

#top_menu_area .dd_select.opt_server .dd_select_option {
    display: block;
    padding: 2px 4px 2px 4px;
    line-height: 1;
    
    white-space: normal;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}

@keyframes fadeInOpacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.fade-out {
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}

@keyframes fadeOutOpacity {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.horizontal_centralizer {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.vertical_centralizer {
    display: flex;
    height: 100%;
    align-items: center;
    flex-direction: row;
}

#userspace_content {
    position: relative;
    max-width: 1170px;
    width: 100%;
    min-height: 100%;
    background: #eee;
    padding-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Dark Theme*/

#vertical_divider_line.dark-theme {
    border-right: 2px dashed #434d5c;
}

.file_tabs.dark-theme li, .terminal_tabs.dark-theme li {
    border: 1px solid #999;
    background: #2c3645;
    color: #bbb;
}

.file_tabs.dark-theme li.active, .terminal_tabs.dark-theme li.active {
    border: 1px solid #ddd;
    color: white;
    border-bottom-color: transparent;
    z-index: 2;
}

.userspace_top_menu_item {
    display: grid;
    align-items: center;
    padding: 0 .5em;
}

.userspace_active_tab {
    color: white;
}

#userspace_opt_servers_area .dd_select {
    display: inline-block;
}

#userspace_opt_servers_area .dd_select .dd_select_button {
    font-size: .95rem;
    line-height: 1.2;
    background: #bec7d5;
    color: #2d314a;
    padding: 2px 4px 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 150px;
}

#userspace_opt_servers_area .dd_select .dd_select_content {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#userspace_opt_servers_area .dd_select .dd_select_button:hover {
    color: black;
}

#userspace_opt_servers_area .dd_select .dd_select_options {
    font-size: .95rem;
}

#opt_servers_table .tabulator-header .tabulator-col-content {
    padding: 6px 12px;
}

#selected_opt_server_area .subarea_title {
    color: #434d5c;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#selected_opt_server_area .user_group_area .users_area {
    border: 1px solid #ddd;
    padding: 3px;
    margin-top: 4px;
}

#opt_servers_table .tabulator-selected {
    background: #bec7d5;
}

#opt_servers_table .tabulator-cell {
    padding: 4px 12px;
}


#selected_opt_server_area .right_area {
    padding-left: 5px;
}

#selected_opt_server_area .left_area {
    padding-right: 5px;
}

#selected_opt_server_area {
    background: white;
    border: 1px solid #ddd;
    padding-bottom: 10px;
    padding-top: 6px;
    font-size: 0.9rem;
}

#selected_opt_server_area .jobs_table .tabulator-header {
    border: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    line-height: 1.6;
}

#selected_opt_server_area .jobs_table .tabulator-headers .tabulator-col-content,
#selected_opt_server_area .jobs_table .tabulator-cell {
    padding: 4px;
    font-size: 0.9rem;
}

#selected_opt_server_area .jobs_table .tabulator-headers .tabulator-col-content {
    background: #bec7d5;
}

#selected_opt_server_area .jobs_table .tabulator-cell {
    cursor: default;
}

#selected_opt_server_area .jobs_table .tabulator-row {
    background: #eaedf0;
}

#selected_opt_server_area .jobs_table input:focus {
    outline: none;
}

#userspace_account_area .avatar {
    display: grid;
    margin-bottom: 1em;
    justify-content: center;
}

#userspace_account_area .avatar_displayer {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#userspace_account_area .user_avatar {
    width: 100%;
    height: 100%;
}

#userspace_account_area .avatar_refresh_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-size: .9rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #465179;
    opacity: .5;
}

#userspace_account_area .avatar_refresh_button .fa {
    font-size: 1.2em;
}

#userspace_account_area .avatar:hover .avatar_refresh_button {
    opacity: 1;
}

/* LaModAl File Selector LFS */
/* ------------------------- */
.button-style.LFS_button_select_file {
    --button-bg: #fff;
    --button-border-width: 1px;
    --button-border-color: #ddd;
    --button-border-radius: 5px 0 0 5px;
    --button-padding: .15em .6em;
    --button-white-space: nowrap;
    --button-color: #999;
    --button-hover-border-color: var(--grey60);
    --button-font-size: .9rem;
    --button-justify-content: flex-start;

    flex-grow: 1;
    max-width: 200px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    font-style: italic;
    border-right: none;
}

.LFS_button_select_file.selected {
    font-style: normal;
    color: #000;
}

.LFS_project_browser {
    display: none;
    justify-content: stretch;
    list-style: none;
    padding-left: 0px;
    position: fixed;
    border: 1px solid #B2B2B2;
    width: 150px;
    max-height: 250px;
    overflow: auto;
    z-index: 100000001;
    background: var(--grey95);
    border-radius: 4px;
    font-size: .9rem;
}

.LFS_project_browser.show { 
    display: grid;
}

.LFS_project_browser ul {
    list-style: none;
    padding-left: 1em;
    transition: height 200ms ease-in-out;
    overflow: hidden;
    width: max-content;
    min-width: 100%;
}

.LFS_project_browser .item {
    display: flex;
    gap: .35em;
    align-items: center;
    cursor: pointer;
    padding: .08em .4em;
    white-space: nowrap;
    width: 100%;
}

.LFS_project_browser .item:hover {
    background: var(--grey90);
}

.button-style.LFS_button_clear {
    --button-font-size: .9rem;
    --button-color: var(--grey20);
    --button-hover-color: var(--grey10);
    --button-bg: var(--grey95);
    --button-border-width: 1px;
    --button-border-color: #aaa;
    --button-border-radius: 0 5px 5px 0;
    --button-padding: 0 6px;
}

.LFS_ButtonContainer {
    --dd-tooltip-white-space: pre;
    --dd-tooltip-max-width: ;
    --dd-tooltip-padding: .2em;
    --dd-tooltip-font-size: .8rem;
    --dd-tooltip-translate-x: var(--dd-tooltip-align-left-translate-x);
    --dd-tooltip-left: var(--dd-tooltip-align-left-left);
    
    display: flex;
    align-items: stretch;
}

#google_drive_button {
    display: flex;
    gap: .5em;
    align-items: center;
    border: 1px solid #bbb;
    background: white;
    border-radius: 1em;
    padding: .5em;
    text-align: left;
    font-size: .9rem;
    cursor: default;
}

#google_drive_button img {
    max-width: 50px;
}

#google_drive_button span.email {
    color: #444;
}

#google_drive_button span.revoke {
    font-size: 2rem;
    margin-left: .5em;
    color: #999;
    height: 40px;
    width: 40px;
    cursor: pointer;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#google_drive_button span.revoke:hover {
    color: #444;
    background: #ddd;
}

#google_drive_button:not(.has_access):hover {
    background: #f8f8f8;
    cursor: pointer;
}

#google_drive_button:not(.has_access) span.email {
    display: none;
}

#google_drive_button:not(.has_access) span.revoke {
    display: none;
}

/* Pop ups */
/*-------- */

dd_popup h3 {
    font-family: var(--title-font);
    font-size: 1.5rem;
    font-weight: bold;
    color: #222c42;
    display: block;
    margin-bottom: .3em;
    text-transform: none;
}

dd_popup feedback {
    color: #F00000;
    font-size: .9rem;
    line-height: 1.3;
    display: block;
}

/* Loading pop up */
/*----------------*/

dd_popup loading {
    text-align: center;
}

dd_popup loading p {
    margin: 0;
    margin-bottom: .8em;
}

/* Notification pop up */
/*---------------------*/

dd_popup notification {
    text-align: center;
}

/* Confirmation pop up */
/*---------------------*/

dd_popup confirmation content {
    display: block;
    margin-bottom: .8em;
}

/* String input pop up */
/*---------------------*/

dd_popup string_input input {
    width: 100%;
}

/* New password pop up */
/*-------------------- */

dd_popup new_password {
    max-width: 300px;
}

dd_popup new_password user_email {
    color: #777;
}

dd_popup new_password label {
    margin: 0;
}

dd_popup new_password input {
    width: 100%;
}

/* New project */
/*-------------*/

dd_popup new_project label {
    margin: 0;
}

dd_popup new_project .file_drop_area {
    border: 1px solid #ccc;
    height: 150px;
    overflow: auto;
    margin-bottom: 1em;
}

dd_popup new_project upload_methods_area {
    display: block;
    margin-bottom: 1em;
}

dd_popup new_project upload_methods_area button.tab {
    border-radius: 4px;
    padding: 0 4px 0 4px;
    font-size: .8rem;
    line-height: 1rem;
    cursor: pointer;
    font-weight: bold;
    color: #444;
    background: transparent;
}

dd_popup new_project upload_methods_area button.tab:not(.active):hover {
    background: #ddd;
}

dd_popup new_project upload_methods_area button.tab.active {
    background: #434d5c;
    color: #ddd;
}

dd_popup new_project upload_files_area,
dd_popup new_project upload_zip_area {
    display: block;
    height: 150px;
    border: 1px solid #bbb;
}

dd_popup new_project upload_button_area {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

dd_popup new_project upload_files_area file_list_area {
    display: block;
    height: 100%;
    overflow: auto;
}

dd_popup new_project upload_files_area dd_table {
    --c2: max-content;
    --c3: max-content;
    
    --cell-padding: .1em .3em;
    
    --header-size: .9rem;
    --header-weight: bold;
    --header-background: #ddd;
    --header-transform: uppercase;
    
    font-size: .9rem;
}

dd_popup new_project upload_files_area dd_table cell:nth-child(3n+3) {
    cursor: pointer;
    color: #777;
}

dd_popup new_project upload_files_area dd_table cell:nth-child(3n+3):hover {
    color: #222;
}

dd_popup new_project *.dropping {
    outline: 3px solid #008000;
    background: #dce8dc;
}

/* Delete account */
/*----------------*/

dd_popup delete_account input {
    max-width: 100%;
}

/* Share project */
/*---------------*/

dd_popup share_project {
    width: 450px;
}

.TALS_TextAreaLineSplitter {
    background: #fff;
}

/* Pop ups */
/*-------- */

dd_popup user_feedback {
    min-height: 250px;
}

dd_popup user_feedback iframe {
    min-height: 250px;
    border: none;
    transition: opacity 200ms ease-in-out;
}

dd_popup iframe {
    border: none;
    transition: opacity 200ms ease-in-out;
}

#share_project_view_link_input, 
#share_project_edit_link_input {
    flex-grow: 1;
    border: 1px solid #aaa;
    border-right: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    
}

.copy_link_button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    height: 100%;
    font-size: 0.9rem;
    color: #000000;
    background: #dddddd;
    border: 1px solid #000000;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
}

.copy_link_button i {
    font-size: 1.2rem;
}

.share_by_email_item {
    display: flex;
    width: 100%;
}

.share_by_email_item .share_by_email_input {
    width: 100%;
    height: 32px;
    border: 1px solid #aaa;
    border-right: 0;
}

.share_by_email_item .share_by_email_action_button {
    flex: 1;
    height: 32px;
    font-weight: bold;
    font-size: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #ddd;
    border: 1px solid #000000;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.share_by_email_item .share_by_email_action_button div {
    text-align: center;
}

dd_popup share_project .footer {
    display: flex;
    margin-top: 5px;
}

#share_by_email_button {
    margin-right: 5px;
}

dd_popup share_project .edit_welcome_button {
    padding: 2px 3px 2px 3px;
    color: #72798a;
    background: #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}

dd_popup share_project .edit_welcome_button:hover {
    color: white;
    background: navy;
}

/* Welcome message editor */
/*------------------------*/
dd_popup welcome_message_editor {
    width: 550px;
}

dd_popup welcome_message_editor textarea {
    min-height: 330px;
    width: 100%;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9rem;
    white-space: pre;
}

/* CLI Helper */
/*------------*/

dd_popup > cli_helper #ul_commands {
    padding: 0;
    margin: 0;
    list-style: none;
}

dd_popup > cli_helper #ul_commands li {
    padding-left: 5px;
    cursor: context-menu;
}

dd_popup > cli_helper #ul_commands li.active {
    background-color: #dde3f0;
}

dd_popup > cli_helper #ul_commands li:hover {
    background-color: #eee;
}

dd_popup > cli_helper #new_command_button {
    font-style: italic;
    cursor: context-menu;
    background: #dfd;
    padding-right: 8px;
}

dd_popup > cli_helper #new_command_button:hover {
    background-color: #baf0ba;
}

dd_popup > cli_helper #new_command_button i {
    padding-right: 5px; 
    padding-left: 5px; 
    color: #2aa324;
}

dd_popup > cli_helper .button_select_file, 
dd_popup > cli_helper .button_select_shortcut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: left;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding-left: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: italic;
    color: #999;
    cursor: context-menu;
    min-width: 200px;
}

dd_popup > cli_helper .button_select_file:hover, 
dd_popup > cli_helper .button_select_shortcut:hover {
    background-color: #eee;
}

dd_popup > cli_helper .button_select_file.selected,
dd_popup > cli_helper .button_select_shortcut.selected {
    font-style: normal;
    color: #000;
}

#quick_run_command_edit_form .col-sm:nth-child(2) {
    max-width: 200px;
}

dd_popup > cli_helper .clear_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    position: relative;
    font-size: 14px;
    color: black;
    background: #eeeeee;
    border: 1px solid #aaa;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
    vertical-align: middle;
    
    cursor: context-menu;
}

dd_popup > cli_helper input.generated_command_line {
    -webkit-appearance: none;
    border: 1px solid #7f86a9;
    border-radius: 4px;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0.9rem;
    padding-left: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none;
    background: #e1e8ea;
    flex-grow: 1; 
    font-family: "Roboto Mono";
}

#run_wizard_form {
    padding: 20px 0px;
}

#run_wizard_form .form_row {
    min-height: 25px;
    margin-bottom: 5px;
}

#run_wizard_form .form_row > div:nth-child(1) {
    width: 100px;
}

#run_wizard_form .form_row > div:nth-child(2) {
    height: 100%;
    display: flex;
    align-items: center;
}

#run_wizard_form .dd_select_options {
    max-height: 200px;
    overflow-y: auto;
}

#run_wizard_form .dd_select_options .section {
    padding: 2px 4px 2px 4px;
}

dd_popup > cli_helper .run_button {
    font-size: 0.9rem;
    border: 1px solid #1c730a;
    color: #084203;
    vertical-align: middle;
    padding: 0 5px 0 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #37c637;
    font-weight: bold;
    cursor: pointer;
}

/* User group editor */
/*-------------------*/

dd_popup > user_group_editor .help_icon {
    --button-color: #999;
    --button-hover-color: #000;
    font-size: 1em;
    margin-left: .3em;
}

/* Tablet View */
@media(max-width: 1170px) {
    #userspace_content {
        max-width: 1170px;
        width: 100%;
    }
    
    #userspace_projects_area .collection_filter_row {
        width: 100%;
    }
    
    .top-menu1 .need_help, .top-menu1 .main_tabs {
        display: none;
    }
}

/* Phone View */
@media(max-width: 500px) {
    #userspace_projects_area .search_bar_container {
        display: none;
    }
    
    #userspace_projects_area .dd_select.add_to_collection .text,
    #userspace_projects_area #leave_projects_button .text,
    #userspace_projects_area #delete_projects_button .text {
        display: none;
    }
}