:root {
    --color-text-primary: rgba(46, 46, 46, 1);
    --color-text-secondary: rgba(128, 128, 128, 1);

    --color-primary: rgba(64, 84, 163, 1);
    --color-secondary: rgba(35, 70, 112, 1);
    --color-primary-lighter: rgba(132, 149, 219, 1);

    --color-alert-primary: rgba(181, 101, 118, 1);
    --color-highlight: rgba(249, 177, 148, 1);
    --color-highlight-light: rgba(237, 213, 204, 1);
    --color-highlight-intensive: rgba(229, 107, 111, 1);

    --color-max-contrast: rgba(255, 255, 255, 1);
    --color-light-gray: rgba(245, 245, 245, 1);
    --color-heavy-gray: rgba(222, 222, 222, 1);
    --color-light-blue: #b8d8fc;
    --color-green: #84e3a5;

    --color-tree: rgb(141, 141, 141);

    --color-ide-active-line: rgba(115, 212, 170, 0.1);
    --color-console: #07091a;

    --color-smoky: #848fbf;
    --color-main-icon: #c5cded;
    --color-lightest-blue: #edf5ff;

    --color-shadow: rgba(0, 0, 0, 0.05);

    --color-blue: #3f60e0;
    --color-transparent-gray: rgba(35, 70, 112, 0.15);

    /* colors different for themes */
    --color-green-faded: #d4fae2;
    --color-switch-theme-symbol: var(--color-primary);
    --color-switch-theme-symbol-hover: var(--color-blue);

    --color-user-first-letter: var(--color-light-gray);
    --color-user-first-letter-hover: var(--color-light-blue);

    --color-header-bg: var(--color-max-contrast);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-blue);

    --color-body: var(--color-light-gray);
    --color-text-body: var(--color-text-primary);
    --color-breadcrumps: var(--color-text-secondary);
    --list-item-bg: var(--color-max-contrast);
    --list-item-border: var(--color-light-gray);

    --color-cm-editor: var(--color-heavy-gray);

    --color-code: var(--color-text-primary);
    --color-code-bg: var(--color-light-gray);
    --color-h1: var(--color-text-secondary);
    --color-btn-gray: var(--color-smoky);
    --color-btn-white: var(--color-primary);
    --color-btn-white-hover: var(--color-blue);
    --color-task-status-label: var(--color-max-contrast);
    --color-progress-bar: var(--color-text-primary);
    --color-chapter-contents-icon: #c7c5c5;

    --color-dropdown-contents: var(--color-lightest-blue);
    --color-dropdown-hover: var(--color-max-contrast);
    --color-sidebar-bg: var(--color-lightest-blue);
    --color-sidebar-close: var(--color-primary);
    --color-sidebar-title: var(--color-text-secondary);
    --color-modal: var(--color-max-contrast);
    --color-modal-overlay: var(--color-transparent-gray);
    --color-title-moda: var(--primary-color);

    --color-placeholder: var(--color-text-secondary);
    --color-blockquote: var(--color-text-secondary);
    --color-chips: var(--color-main-icon);
    --color-text-about: var(--color-text-secondary);
    --color-light-item: var(--color-light-gray);
    --color-input-border: var(--color-heavy-gray);
    --color-info: var(--color-lightest-blue);
    --color-start: var(--color-light-blue);
    --color-text-green: #2fcc65;
    --color-console: white;
    --color-text-console: var(--color-text-primary);

    --color-btn-vivid: #9440f5;
    --color-btn-vivid-hover: #7507f3;
}

[data-theme="dark"] {
    --color-switch-theme-symbol: var(--color-light-blue);
    --color-switch-theme-symbol-hover: var(--color-lightest-blue);

    --color-user-first-letter: var(--color-light-blue);
    --color-user-first-letter-hover: var(--color-lightest-blue);

    --color-header-bg: var(--color-secondary);
    --color-link: var(--color-light-blue);
    --color-link-hover: var(--color-lightest-blue);

    --color-body: #263952;
    --color-text-body: var(--color-heavy-gray);
    --color-breadcrumps: var(--color-heavy-gray);
    --list-item-bg: #28303C;
    --list-item-border: var(--color-secondary);

    --color-cm-editor: var(--color-secondary);

    --color-code: var(--color-main-icon);
    --color-code-bg: var(--color-body);
    --color-h1: var(--color-main-icon);
    --color-btn-gray: var(--color-primary-lighter);
    --color-btn-white: var(--color-light-blue);
    --color-btn-white-hover: var(--color-main-icon);
    --color-task-status-label: var(--list-item-bg);
    --color-progress-bar: var(--color-body);
    --color-chapter-contents-icon: var(--color-smoky);
    --color-dropdown-contents: var(--color-primary);
    --color-dropdown-hover: var(--color-primary);
    --color-sidebar-bg: var(--list-item-bg);
    --color-sidebar-close: var(--color-heavy-gray);
    --color-sidebar-title: var(--color-heavy-gray);
    --color-modal: var(--color-secondary);
    --color-modal-overlay: rgba(40, 48, 60, 0.8);
    --color-title-moda: var(--color-main-icon);
    --color-placeholder: var(--color-smoky);
    --color-blockquote: var(--color-smoky);
    --color-chips: var(--color-smoky);
    --color-text-about: var(--color-smoky);
    --color-light-item: var(--color-secondary);
    --color-input-border: var(--list-item-border);
    --color-info: var(--color-secondary);
    --color-start: var(--color-primary-lighter);
    --color-text-green: var(--color-green);
    --color-green-faded: #7db191;
    --color-console: black;
    --color-text-console: var(--color-smoky);
}

html {
    min-height: 100vh;
}

body {
    height: 100%;
    margin: 0px !important;

    font-family: "Roboto",  sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: var(--color-text-body);
    background-color: var(--color-console);
}

.menu-slash {
    color: var(--color-text-body);
    padding-left: 5px;
    padding-right: 5px;
}

.menu-text {
    color: var(--color-text-body);
}

.cm-editor {
    width: 100%;
    max-height: none;
    max-width: none;
    border: none;
    font-size: 1.2em;
}

.cm-focused {
    outline: none !important;
}

.indent-left-small {
    margin-left: 0.8em;
}

.btn-vivid {
    background-color: transparent;
    border: 2px solid var(--color-btn-vivid); 
    font-family: "Roboto",  sans-serif;
    color:  var(--color-btn-vivid) !important;
    padding: 5px 15px;
    font-size: 1em;
    height: 2.1em !important;
    cursor: pointer;
    border-radius: 10px;
}

.btn-vivid:hover {
    border: 2px solid var(--color-btn-vivid-hover);
    color: var(--color-btn-vivid-hover) !important;
}


.flex-cont {
    display: flex;
    align-content: stretch;
    align-items: stretch;
    position: relative;
}

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

.sidebar_parent {
    display: flex; justify-content: flex-end;
}

.closebtn {
    padding-left: 20px;
    font-size: 1.8em;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-smoky);
}

.closebtn:hover {
    color: var(--color-blue);
}

.closebtn-tree {
    font-size: 1.5em;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-smoky);
}


.closebtn-tree:hover {
    color: var(--color-blue);
}


#project_tree {
    padding-left: 10px;
    padding-right: 10px;
    display:inline-block;
    overflow: scroll;
    max-width: 500px;
    min-width: 30px;
    color: var(--color-tree);
    font-size: 0.9em;
    line-height: 1.7;
}

.object-link {
    pointer-events: none;
}

#project_files {
    border-left: 2px solid var(--color-transparent-gray);
    flex: 1;
    max-width: 2000px;
    width: 100%;
    overflow-x: auto;
}

#online_ide_container {
    min-height: 80vh;
}

#output_container {
    height: 20vh;
    color: var(--color-text-console);
    padding: 10px;
    padding-bottom: 40px;
    border-top: 2px solid var(--color-transparent-gray);
    font-family: "Courier New","Courier","Lucida Sans Typewriter";
}

pre {
    margin: 0 !important;
}

.menu {
    display: flex;
    justify-content:left;
    align-items: center;
    background-color: var(--color-header-bg);
    padding-top: 5px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--color-transparent-gray);
}

.btn {
    background-color: transparent;
    border: 2px solid var(--color-primary); 
    color: var(--color-btn-white);
    padding: 5px 10px;
    font-family: "Roboto",  sans-serif;
    font-size: 1em;
    height: 2.1em !important;
    cursor: pointer;
    border-radius: 10px;
}

.btn:hover {
    background-color: var(--color-blue);
    border: 2px solid var(--color-blue);
    color: var(--color-max-contrast);
}

.btn:disabled {
    background-color: var(--color-text-secondary);
    border: 2px solid var(--color-text-secondary);
    color: white;
}

.course-img {
    width: 1.3em;
    height: 1.3em;
}

.header-img {
    width: 2.8em;
    height: 2.8em;
}

.margin-left-small {
    margin-left: 0.6em;
}

.margin-left-m {
    margin-left: 2em;
}

.margin-left-xsmall {
    margin-left: 5px;
}

a {
    text-decoration: none;
}

a:visited {
    color: var(--color-link);
}

a:link {
    color: var(--color-link);
}
  
a:hover {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-hover);
} 

.square {
    height: 2.1em !important;
    width: 2.1em !important;
    padding: 5px 5px !important;
    text-align: center !important;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }


@media only screen and (max-width: 900px){
    
    .desktop {
        display: none !important;
    }

    body {
        font-size: 0.9em;
    }

    .cm-editor {
        font-size: 1.0em;
    }

    .btn {
        font-size: 0.9em;
    }

    .menu-slash {
        padding-left: 1px;
        padding-right: 1px;
    }


    .margin-left-xsmall {
        margin-left: 1px;
    }

    .margin-left-m {
        margin-left: 1em;
    }
}

.hidden {
    display: none !important;
}

.block {
    display: inline-block;
}

.dropdown {
    float: right;
    overflow: hidden;
    padding: 5px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

.dropdown-content {
    border-radius: 10px;
    display: none;
    position: absolute;
    background-color: var(--color-dropdown-contents);
    min-width: 160px;
    box-shadow: 0px 5px 10px 0px var(--color-shadow);
    z-index: 1;
}

.dropdown-content a {
    border-radius: 10px;
    font-size: 0.9em;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    border-radius: 10px;
    background-color: var(--color-dropdown-hover);
}

.dropdown:hover .dropdown-content {
    border-radius: 10px;
    display: block;
}

@media only screen and (max-width: 1000px){
    .dropdown-content {
        right: 0px;
    }
    .dropdown {
        padding-right: 5px;
    }
}

.user-first-letter {
    border-radius: 50%;
    font-size: 1.0em;
    padding: 10px;
    text-align: center;
    background-color: var(--color-primary); 
    border: none; 
    color: var(--color-user-first-letter);
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    cursor: pointer;
}

.user-first-letter:hover {
    color: var(--color-user-first-letter-hover);
}

.loader {
    border: 8px solid var(--color-green-faded);
    border-radius: 50%;
    border-top: 8px solid var(--color-green);
    width: 5px;
    height: 5px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    padding: 10px;
    float: left;
}

.text-loader {
    margin-left: 1em;
    padding: 10px;
    height: 100%;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.div-spinner {
    display: flex;
    justify-content: left;
    align-items: center; 
}


li {
    cursor: pointer;
    list-style-type: none;
}

.selected_file {
    color: var(--color-link-hover);
}

#tree_ul {
    list-style-type: none;
    padding-inline-start: 0.5em;
  }
  
  #tree_ul {
    margin: 0;
    padding: 0;
  }
  
  .caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
  }
  
  .caret::before {
    content: "🮥";
    display: inline-block;
    margin-right: 6px;
  }
  
  .caret-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);  
  }
  
  .nested {
    display: none;
  }
  
  .active {
    display: block;
  }

  html { scroll-behavior: smooth; }