input[type="checkbox"]{
    width: var(--ci_ide_checkbox-size);
    height: var(--ci_ide_checkbox-size);
}

.ci_main-layout {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: var(--ci_primary-foreground-color);
    background-color: var(--ci_primary-background-color);
}

.ci_header {
    background-color: var(--ci_header-background-color);
}

.ci_header .ci_button {
    height: 100%;
}

.ci_body {
    display: flex;
    overflow: hidden;
    background-color: var(--ci_body-background-color);
}

.ci_ide_folder-explorer-display {
}

.ci_ide_footer {
    background-color: var(--ci_body-background-color);
}

.ci_ide_section-title {
    display: flex;
    align-items: center;
    padding: var(--ci_ide_section-title-padding);
    background-color: var(--ci_ide_section-title-background-color);
    font-size: var(--ci_ide_section-title-font-size);
    height: var(--ci_ide_section-title-height);
}

.ci_section-body {
    padding: var(--ci_section-body-padding);
    height: 100%;
    overflow: auto;
}

.ci_header {
    display: flex;
}

.ci_ide_input-file-display {
    height: 100%;
    overflow: hidden;
}

.ci_ide_input-file-display-top-nav-bar {
    height: var(--ci_ide_input-file-display-top-nav-bar-height);
    display: flex;
    align-items: center;
    background-color: var(--ci_tertiary-background-color);
    color: var(--ci_tertiary-foreground-color);
}

.ci_ide_input-file-display-top-nav-bar-buttons {
    display: flex;
    align-items: center;
    height: 100%;
    width: var(--ci_ide_input-file-display-top-nav-bar-buttons-width);
}

.ci_ide_input-file-display-top-nav-bar-address {
    display: flex;
    align-items: center;
    height: 100%;
    width: var(--ci_ide_input-file-display-top-nav-bar-address-hierarchy-width);
    overflow-x: auto;
    overflow-y: hidden;
}

.ci_ide_input-file-display-top-nav-bar-address-hierarchy {
    margin: 0 10px;
    display: flex;
    align-items: center;
    height: 100%;
}

.ci_ide_input-file-edit-address {
    display: flex;
}

.ci_ide_input-file-display-top-nav-bar-search {
    margin: 0 10px;
    display: flex;
    align-items: center;
    height: 100%;
    width: var(--ci_ide_input-file-display-top-nav-bar-search-width);
}

.ci_ide_input-file-search-button.ci_button {
    background-color: var(--ci_ide_input-background-color);
    color: var(--ci_ide_input-font-color);
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
    border-image: initial;
    border-right: none;
    height: var(--ci_ide_input-file-search-height);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: var(--ci_ide_input-file-search-margin-bottom);
}

.ci_ide_input-file-search-input {
    border-left: none;
    height: var(--ci_ide_input-file-search-height);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: var(--ci_ide_input-file-search-margin-bottom);
    width: 207px;
}

.ci_ide_input-file-display-body {
    height: var(--ci_ide_input-file-display-body-height);
    display: flex;
    padding: 7px;
}

.ci_ide_input-file-display-body > .ci_tree-view-state {
    width: 100%;
}

.ci_ide_input-file-display-side-bar {
    height: 100%;
    overflow: auto;
    margin-right: var(--ci_ide_input-file-display-side-bar-margin-right);
}

.ci_ide_input-file-display-content {
    height: 100%;
    overflow: auto;
    margin-left: var(--ci_ide_input-file-display-content-margin-left);
}

.ci_ide_input-file-display-bottom-controls {
    height: var(--ci_ide_input-file-display-bottom-controls-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--ci_tertiary-background-color);
    color: var(--ci_tertiary-foreground-color);
}

.ci_ide_input-file-display-bottom-controls-text-input {
    overflow: auto;
    width: var(--ci_ide_input-file-display-bottom-controls-text-input-width);
    padding-left: var(--ci_ide_input-file-display-bottom-controls-text-input-padding-left);
}

.ci_ide_input-file-display-bottom-controls-non-text {
    margin-left: var(--ci_ide_input-file-display-bottom-controls-non-text-margin-left);
    width: var(--ci_ide_input-file-display-bottom-controls-non-text-width);
}

.ci_ide_input-file-display-bottom-controls-non-text .ci_button:not(:first-of-type) {
    margin-left: var(--ci_ide_input-file-display-bottom-controls-non-text-buttons-margin-left);
}

.ci_ide_input {
    background-color: var(--ci_ide_input-background-color);
    color: var(--ci_ide_input-font-color);
    padding: var(--ci_ide_input-padding-height) var(--ci_ide_input-padding-width);
}

    .ci_ide_input:focus {
        outline: solid var(--ci_ide_input-focus-outline-size) var(--ci_primary-emphasis-foreground-color);
        box-shadow: 0 0 var(--ci_ide_input-focus-box-shadow-blur-radius) var(--ci_primary-emphasis-foreground-color);
    }

    .ci_ide_input:read-only {
        cursor: default;
    }

.ci_ide_input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #8c8c8c;
}

.ci_ide_text-editor-display {
    height: var(--ci_ide_text-editor-display-height) !important;
}

.ci_ide_form {
    width: 100%;
    height: 100%;
    padding: 5px 0;
}

.ci_ide_form-group {
    display: flex;
}

.ci_ide_form-group:not(:last-of-type) {
    margin-bottom: 10px;
}

.ci_ide_form-label {
    margin-right: 10px;
}

.ci_ide_terminal-tabs-container {
    display: flex;
    height: var(--ci_tabs-bar-height);
}

.ci_ide_terminal-tab > .ci_button {
    border-radius: 20px;
    width: 4em;
    margin-left: 10px;
    border: 1.5px solid var(--ci_primary-border-color);
}

.ci_ide_terminal-tab > .ci_button:focus {
    border: 1.5px solid var(--ci_primary-emphasis-foreground-color);
}

.ci_ide_terminal-output-display {
    width: 100%; 
    height: calc(100% - var(--ci_tabs-bar-height));
	white-space: nowrap;
    font-family: monospace;
}

.ci_ide_delete-file-form-display {
    background-color: var(--ci_tertiary-background-color);
    padding: 10px;
}

.ci_ide_boolean-prompt-or-cancel {
    background-color: var(--ci_tertiary-background-color);
    padding: 10px;
}

hr.ci_hr {
    color: var(--ci_hr-primary-background-color);
    height: var(--ci_hr-height);
    margin: var(--ci_hr-margin);
    opacity: var(--ci_hr-opacity);
}

.ci_ide_footer-body {
    height: calc(100% - var(--ci_tabs-bar-height));
}

.ci_ide_footer-view-tabs {
    display: flex;
    height: var(--ci_tabs-bar-height);
    margin-bottom: 10px;
    overflow-x: auto;
    font-size: 0.8em;
}

button.ci_ide_input-file-address-hierarchy-entry {
    color: var(--ci_primary-emphasis-foreground-color);
    background-color: var(--ci_tertiary-background-color);
}

.ci_ide_search-match {
    background-color: var(--ci_primary-emphasis-foreground-color);
}

.ci_ide_settings-group {
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 25px;
    border: 2px solid var(--ci_primary-border-color);
}

.ci_panel-tabs {
    position: relative;
    background-color: var(--ci_ide_panel-background-color);
}

.ci_panel-tabs-justify-end {
    display: flex;
    position: absolute;
    right: calc(3ch + 3px);
    top: 0;
}

.ci_ide_panel-tab {
    padding: 1px;
    display: inline-flex !important;
    border: none !important;
    position: relative;
}

.ci_panel-tab-dropzone {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    z-index: 100;
    background-color: var(--ci_primary-hover-background-color);
    opacity: 0.6;
}

    .ci_panel-tab-dropzone:hover {
        background-color: var(--ci_button-hover-background-color);
        box-shadow: 0 0 2px var(--ci_primary-overlay-box-shadow-color);
    }

.ci_panel-tab-dropzone-top {
    top: 0;
}

.ci_panel-tab-dropzone-bottom {
    top: 50%;
}

.ci_ide_panel-tab-drag-display {
    position: fixed;
    min-width: 10ch;
    min-height: 2em;
    background-color: var(--ci_tertiary-background-color);
    color: var(--ci_tertiary-foreground-color);
}

.ci_ide_panel_left .ci_panel-tabs .ci_ide_panel-tab .ci_dynamic-tab-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ci_ide_panel_right {
    flex-direction: row-reverse;
}

.ci_ide_panel_right .ci_panel-tabs .ci_ide_panel-tab .ci_dynamic-tab-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

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

.ci_ide_panel_bottom .ci_ide_panel-tab {
    border-right: 2px solid var(--ci_primary-border-color) !important;
}

.ci_ide_git-file {
    white-space: nowrap;
}

.ci_ide_login-form-hint {
    background-color: var(--ci_te_newline-background-color);
    color: var(--ci_te_newline-foreground-color);
    margin-top: calc(3px + var(--ci_ide_input-focus-outline-size));
}

.ci_ide_dialog-padding-0 .ci_dialog-display-body {
    padding: 0 !important;
}

.ci_config_ctrl-tab-entry.ci_active {
    background-color: var(--ci_active-with-focus-background-color);
}

.ci_main-layout-overlay {
    display: flex;
    z-index: 99;
    position: fixed;
    left: 20vw;
    top: 20vh;
    width: 60vw;
    height: 60vh;
    color: var(--ci_secondary-foreground-color);
    background-color: var(--ci_secondary-background-color);
}

.ci_header-left-content {
    display: flex;
}

    .ci_header-left-content > button {
        margin-left: 15px;
    }

.ci_startup-controls {
    display: flex;
    margin-left: 15px;
}

.ci_startup-controls-entry {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.ci_editor {
    height: 100%;
	overflow: hidden;
}

:root {
    /* Sizes IDE */
    --ci_ide_section-title-font-size: 1.25em;
    --ci_ide_section-title-height: 2rem;
    --ci_ide_section-title-padding: 0 5px;
    --ci_section-body-padding: 5px;
    --ci_ide_input-file-display-top-nav-bar-height: 2.5rem;
    --ci_ide_input-file-display-bottom-controls-height: 5.5rem;
    --ci_ide_input-file-display-body-height: calc(100% - var(--ci_ide_input-file-display-bottom-controls-height));
    --ci_ide_checkbox-size: 1.75rem;
    --ci_header-border-bottom-size: 4px;
    --ci_header-height: 3rem;
    --ci_ide_input-file-display-side-bar-margin-right: 10px;
    --ci_ide_input-file-display-content-margin-left: 10px;
    --ci_ide_input-padding-height: 2px;
    --ci_ide_input-padding-width: 3px;
    --ci_ide_input-focus-outline-size: 2px;
    --ci_ide_input-focus-box-shadow-blur-radius: 21px;
    --ci_ide_input-file-search-height: calc(100% - 4px);
    --ci_ide_input-file-search-margin-bottom: 1px;
    --ci_ide_input-file-display-top-nav-bar-buttons-width: 120px;
    --ci_ide_input-file-display-top-nav-bar-search-width: 220px;
    --ci_ide_input-file-display-top-nav-bar-address-hierarchy-width: calc(100% - var(--ci_ide_input-file-display-top-nav-bar-buttons-width) - var(--ci_ide_input-file-display-top-nav-bar-search-width));
    --ci_ide_text-editor-display-height: calc(100% - var(--ci_tabs-bar-height) - var(--ci_tabs-bar-margin-bottom));
    --ci_ide_input-file-display-bottom-controls-non-text-width: 12rem;
    --ci_ide_input-file-display-bottom-controls-non-text-margin-left: 15px;
    --ci_ide_input-file-display-bottom-controls-non-text-buttons-margin-left: 15px;
    --ci_ide_input-file-display-bottom-controls-text-input-width: calc(100% - var(--ci_ide_input-file-display-bottom-controls-non-text-width) - var(--ci_ide_input-file-display-bottom-controls-non-text-margin-left));
    --ci_ide_input-file-display-bottom-controls-text-input-padding-left: 5px;
    --ci_panel-tabs-font-size: 0.85em;
    --ci_panel-tabs-margin: 4px;
    --ci_panel-tabs-bug-are-not-aligning-need-to-fix-todo: 0.7em;
}

:root {
    /* Dark-Theme is the default */
    --ci_header-background-color: #2a2a2e;
    --ci_body-background-color: #1E1E1E;
    --ci_ide_panel-background-color: #2b2d2d;
    --ci_ide_input-background-color: #232d32;
    --ci_ide_input-font-color: #dcdcdc;
    --ci_ide_section-title-background-color: #033a00;
}

.ci_visual-studio-light-theme-clone {
    --ci_header-background-color: #cad5eb;
    --ci_body-background-color: rgb(253, 253, 253);
    --ci_ide_panel-background-color: #d4d4d4;
    --ci_ide_input-background-color: rgb(250, 250, 250);
    --ci_ide_input-font-color: #000000;
    --ci_ide_section-title-background-color: #c7e9c2;
}