html *
{
   font-size: 0.975em;
   color: rgb(255, 255, 255);
   font-family: 'Roboto', sans-serif;
   overflow: hidden;
   /* caret-color: rgba(0,0,0,0); */
}

:root {
    --default_lightness: 22;
    --darker_lightness: calc(var(--default_lightness) / 2);
    --lighter_lightness: calc(var(--default_lightness) * 5);
    --default_gray: rgb(var(--default_lightness),var(--default_lightness),var(--default_lightness));
    --darker_gray: rgb(var(--darker_lightness),var(--darker_lightness),var(--darker_lightness));
    --lighter_gray: rgb(var(--lighter_lightness),var(--lighter_lightness),var(--lighter_lightness));

    --bar_size : 45px;
    --main_bar_width : 250px;

        /*___keys___*/

        /*primary*/
        --primary-color-hue: 203;  
        --primary-color-sat: 98%;  
        /*secondary*/
        --secondary-color-hue: 203;
        --secondary-color-sat: 48%;
        /*tertiary*/
        --tertiary-color-hue: 61;  
        --tertiary-color-sat: 100%;
        /*neutral*/
        --neutral-color-hue: 30;   
        --neutral-color-sat: 0%;   
        /*neutral variant*/        
        --neutral-variant-color-hue: 30;
        --neutral-variant-color-sat: 0%;
        /*error*/
        --error-color-hue: 0;
        --error-color-sat: 100%;


        /*___tonal palettes___*/

        /*primary*/
            --primary-color-0: var(--primary-color-hue), var(--primary-color-sat), 0%;
            --primary-color-10: var(--primary-color-hue), var(--primary-color-sat), 10%;
            --primary-color-20: var(--primary-color-hue), var(--primary-color-sat), 20%;
            --primary-color-30: var(--primary-color-hue), var(--primary-color-sat), 30%;
            --primary-color-40: var(--primary-color-hue), var(--primary-color-sat), 40%;
            --primary-color-50: var(--primary-color-hue), var(--primary-color-sat), 50%;
            --primary-color-60: var(--primary-color-hue), var(--primary-color-sat), 60%;
            --primary-color-70: var(--primary-color-hue), var(--primary-color-sat), 70%;
            --primary-color-80: var(--primary-color-hue), var(--primary-color-sat), 80%;
            --primary-color-90: var(--primary-color-hue), var(--primary-color-sat), 90%;
            --primary-color-95: var(--primary-color-hue), var(--primary-color-sat), 95%;
            --primary-color-99: var(--primary-color-hue), var(--primary-color-sat), 99%;
            --primary-color-100: var(--primary-color-hue), var(--primary-color-sat), 100%;
        /*secondary*/
            --secondary-color-0: var(--secondary-color-hue), var(--secondary-color-sat), 0%;
            --secondary-color-10: var(--secondary-color-hue), var(--secondary-color-sat), 10%;
            --secondary-color-20: var(--secondary-color-hue), var(--secondary-color-sat), 20%;
            --secondary-color-30: var(--secondary-color-hue), var(--secondary-color-sat), 30%;
            --secondary-color-40: var(--secondary-color-hue), var(--secondary-color-sat), 40%;
            --secondary-color-50: var(--secondary-color-hue), var(--secondary-color-sat), 50%;
            --secondary-color-60: var(--secondary-color-hue), var(--secondary-color-sat), 60%;
            --secondary-color-70: var(--secondary-color-hue), var(--secondary-color-sat), 70%;
            --secondary-color-80: var(--secondary-color-hue), var(--secondary-color-sat), 80%;
            --secondary-color-90: var(--secondary-color-hue), var(--secondary-color-sat), 90%;
            --secondary-color-95: var(--secondary-color-hue), var(--secondary-color-sat), 95%;
            --secondary-color-99: var(--secondary-color-hue), var(--secondary-color-sat), 99%;
            --secondary-color-100: var(--secondary-color-hue), var(--secondary-color-sat), 100%;
        /*tertiary*/
            --tertiary-color-0: var(--tertiary-color-hue), var(--tertiary-color-sat), 0%;
            --tertiary-color-10: var(--tertiary-color-hue), var(--tertiary-color-sat), 10%;
            --tertiary-color-20: var(--tertiary-color-hue), var(--tertiary-color-sat), 20%;
            --tertiary-color-30: var(--tertiary-color-hue), var(--tertiary-color-sat), 30%;
            --tertiary-color-40: var(--tertiary-color-hue), var(--tertiary-color-sat), 40%;
            --tertiary-color-50: var(--tertiary-color-hue), var(--tertiary-color-sat), 50%;
            --tertiary-color-60: var(--tertiary-color-hue), var(--tertiary-color-sat), 60%;
            --tertiary-color-70: var(--tertiary-color-hue), var(--tertiary-color-sat), 70%;
            --tertiary-color-80: var(--tertiary-color-hue), var(--tertiary-color-sat), 80%;
            --tertiary-color-90: var(--tertiary-color-hue), var(--tertiary-color-sat), 90%;
            --tertiary-color-95: var(--tertiary-color-hue), var(--tertiary-color-sat), 95%;
            --tertiary-color-99: var(--tertiary-color-hue), var(--tertiary-color-sat), 99%;
            --tertiary-color-100: var(--tertiary-color-hue), var(--tertiary-color-sat), 100%;
        /*neutral*/
            --neutral-color-0: var(--neutral-color-hue), var(--neutral-color-sat), 0%;
            --neutral-color-10: var(--neutral-color-hue), var(--neutral-color-sat), 10%;
            --neutral-color-20: var(--neutral-color-hue), var(--neutral-color-sat), 20%;
            --neutral-color-30: var(--neutral-color-hue), var(--neutral-color-sat), 30%;
            --neutral-color-40: var(--neutral-color-hue), var(--neutral-color-sat), 40%;
            --neutral-color-50: var(--neutral-color-hue), var(--neutral-color-sat), 50%;
            --neutral-color-60: var(--neutral-color-hue), var(--neutral-color-sat), 60%;
            --neutral-color-70: var(--neutral-color-hue), var(--neutral-color-sat), 70%;
            --neutral-color-80: var(--neutral-color-hue), var(--neutral-color-sat), 80%;
            --neutral-color-90: var(--neutral-color-hue), var(--neutral-color-sat), 90%;
            --neutral-color-95: var(--neutral-color-hue), var(--neutral-color-sat), 95%;
            --neutral-color-99: var(--neutral-color-hue), var(--neutral-color-sat), 99%;
            --neutral-color-100: var(--neutral-color-hue), var(--neutral-color-sat), 100%;
        /*neutral-variant*/
            --neutral-variant-color-0: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 0%;
            --neutral-variant-color-10: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 10%;
            --neutral-variant-color-20: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 20%;
            --neutral-variant-color-30: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 30%;
            --neutral-variant-color-40: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 40%;
            --neutral-variant-color-50: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 50%;
            --neutral-variant-color-60: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 60%;
            --neutral-variant-color-70: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 70%;
            --neutral-variant-color-80: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 80%;
            --neutral-variant-color-90: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 90%;
            --neutral-variant-color-95: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 95%;
            --neutral-variant-color-99: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 99%;
            --neutral-variant-color-100: var(--neutral-variant-color-hue), var(--neutral-variant-color-sat), 100%;
        /*error*/
            --error-color-0: var(--error-color-hue), var(--error-color-sat), 0%;
            --error-color-10: var(--error-color-hue), var(--error-color-sat), 10%;
            --error-color-20: var(--error-color-hue), var(--error-color-sat), 20%;
            --error-color-30: var(--error-color-hue), var(--error-color-sat), 30%;
            --error-color-40: var(--error-color-hue), var(--error-color-sat), 40%;
            --error-color-50: var(--error-color-hue), var(--error-color-sat), 50%;
            --error-color-60: var(--error-color-hue), var(--error-color-sat), 60%;
            --error-color-70: var(--error-color-hue), var(--error-color-sat), 70%;
            --error-color-80: var(--error-color-hue), var(--error-color-sat), 80%;
            --error-color-90: var(--error-color-hue), var(--error-color-sat), 90%;
            --error-color-95: var(--error-color-hue), var(--error-color-sat), 95%;
            --error-color-99: var(--error-color-hue), var(--error-color-sat), 99%;
            --error-color-100: var(--error-color-hue), var(--error-color-sat), 100%;

        /*___typescale___*/

    --typescale-display-large-font: 'Roboto';
    --typescale-display-large-line-height: 64px;
    --typescale-display-large-size: 57px;
    --typescale-display-large-tracking: 0px;
    --typescale-display-large-weight: 400;

    --typescale-display-medium-font: 'Roboto';
    --typescale-display-medium-line-height: 52px;
    --typescale-display-medium-size: 45px;
    --typescale-display-medium-tracking: 0px;
    --typescale-display-medium-weight: 400;

    --typescale-label-large-font: 'Roboto';
    --typescale-label-large-line-height: 20px;
    --typescale-label-large-size: 14px;
    --typescale-label-large-tracking: 0.1px;
    --typescale-label-large-weight: 500;


        /*___light mode___*/

    --color-primary-light: var(--primary-color-40);
    --color-on-primary-light: var(--primary-color-100);
    --color-primary-container-light: var(--primary-color-90);
    --color-on-primary-container-light: var(--primary-color-10);

    --color-secondary-light: var(--secondary-color-40);
    --color-on-secondary-light: var(--secondary-color-100);
    --color-secondary-container-light: var(--secondary-color-90);
    --color-on-secondary-container-light: var(--secondary-color-10);

    --color-tertiary-light: var(--tertiary-color-40);
    --color-on-tertiary-light: var(--tertiary-color-100);
    --color-tertiary-container-light: var(--tertiary-color-90);
    --color-on-tertiary-container-light: var(--tertiary-color-10);

    --color-error-light: var(--error-color-40);
    --color-on-error-light: var(--error-color-100);
    --color-error-container-light: var(--error-color-90);
    --color-on-error-container-light: var(--error-color-10);

    --color-outline-light: var(--neutral-variant-color-50);

    --color-background-light: var(--neutral-color-99);
    --color-on-background-light: var(--neutral-color-10);

    --color-surface-light: var(--neutral-color-99);
    --color-on-surface-light: var(--neutral-color-10);
    --color-surface-variant-light: var(--neutral-variant-color-90);
    --color-on-surface-variant-light: var(--neutral-color-30);

    --color-inverse-surface-light: var(--neutral-color-20);
    --color-inverse-on-surface-light: var(--neutral-color-95);
    --color-inverse-primary: var(--primary-color-80);


        /*___dark mode___*/

    --color-primary-dark: var(--primary-color-80);
    --color-on-primary-dark: var(--primary-color-20);
    --color-primary-container-dark: var(--primary-color-30);
    --color-on-primary-container-dark: var(--primary-color-90);

    --color-secondary-dark: var(--secondary-color-80);
    --color-on-secondary-dark: var(--secondary-color-20);
    --color-secondary-container-dark: var(--secondary-color-30);
    --color-on-secondary-container-dark: var(--secondary-color-90);

    --color-tertiary-dark: var(--tertiary-color-80);
    --color-on-tertiary-dark: var(--tertiary-color-20);
    --color-tertiary-container-dark: var(--tertiary-color-30);
    --color-on-tertiary-container-dark: var(--tertiary-color-90);

    --color-error-dark: var(--error-color-80);
    --color-on-error-dark: var(--error-color-20);
    --color-error-container-dark: var(--error-color-30);
    --color-on-error-container-dark: var(--error-color-80);

    --color-outline-dark: var(--neutral-variant-color-60);

    --color-background-dark: var(--neutral-color-10);
    --color-on-background-dark: var(--neutral-color-90);

    --color-surface-dark: var(--neutral-color-10);
    --color-on-surface-dark: var(--neutral-color-90);
    --color-surface-variant-dark: var(--neutral-variant-color-30);
    --color-on-surface-variant-dark: var(--neutral-color-80);

    --color-inverse-surface-dark: var(--neutral-color-90);
    --color-inverse-on-surface-dark: var(--neutral-color-20);
    --color-inverse-primary: var(--primary-color-40);


        /*___shadow___*/
        --shadow-color: rgba(0,0,0,0.38);

        /*___elevations___*/

    --elevation-level-0: 0px 0px 0px var(--shadow-color);
    --elevation-level-1: 0px 1px 3px var(--shadow-color);
    --elevation-level-2: 0px 2px 4px var(--shadow-color);
    --elevation-level-3: 0px 3px 5px var(--shadow-color);
    --elevation-level-4: 0px 4px 6px var(--shadow-color);


        /*___state layers___*/

    --hover-state-layer-opacity: 16%;
    --pressed-state-layer-opacity: 12%;
    --focus-state-layer-opacity: 12%;
    --dragged-state-layer-opacity: 16%;


        /*___output scheme___*/

    --color-primary: var(--color-primary-light);
    --color-on-primary: var(--color-on-primary-light);
    --color-primary-container: var(--color-primary-container-light);
    --color-on-primary-container: var(--color-on-primary-container-light);
    --color-secondary: var(--color-secondary-light);
    --color-on-secondary: var(--color-on-secondary-light);
    --color-secondary-container: var(--color-secondary-container-light);
    --color-on-secondary-container: var(--color-on-secondary-container-light);
    --color-tertiary: var(--color-tertiary-light);
    --color-on-tertiary: var(--color-on-tertiary-light);
    --color-tertiary-container: var(--color-tertiary-container-light);
    --color-on-tertiary-container: var(--color-on-tertiary-container-light);
    --color-error: var(--color-error-light);
    --color-on-error: var(--color-on-error-light);
    --color-error-container: var(--color-error-container-light);
    --color-on-error-container: var(--color-on-error-container-light);
    --color-outline: var(--color-outline-light);
    --color-background: var(--color-background-light);
    --color-on-background: var(--color-on-background-light);
    --color-surface: var(--color-surface-light);
    --color-on-surface: var(--color-on-surface-light);
    --color-surface-variant: var(--color-surface-variant-light);
    --color-on-surface-variant: var(--color-on-surface-variant-light);
    --color-inverse-surface: var(--color-inverse-surface-light);
    --color-inverse-on-surface: var(--color-inverse-on-surface-light);

}

body {
    height : '100%';
    width: '100%';
    overflow: 'hidden';
    background-color: var(--default_gray);
}

.main_bar {
    position: absolute;
    top: var(--bar_size);
    left: calc(var(--bar_size) * 1.25);
    width: var(--main_bar_width);
    height: calc(100% - var(--bar_size));
    z-index: 5;
}

.bar {
    background-color:  var(--default_gray);
    border-style: solid;
    border-width: 1px;
    border-color: hsl(0, 0%, 8%);
    box-sizing: border-box;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.main_view {
    position: absolute;
    width : 100%;
    height : 100%;
    background-color: var(--darker_gray);
}

button.default_button {
    border-radius: 0;
    border-width: 1px;
    border-color: var(--lighter_gray);
    border-style: solid;
    user-select: none;
    padding: 5px;
    margin:1px;
    background-color : var(--default_gray);
    color:white;
}

button.default_button.toggle {
    background-color: rgb(0, 0, 0);
    font-size: 1.1em;
    text-align: left;
}

button.default_button:hover {
    background-color: rgb(66, 66, 66);
    user-select: none;
}

button.default_button:active {
    background-color: rgb(44, 44, 44);
}

button.login_button {
    border-radius: 0;
    border-width: 1px;
    border-color: var(--lighter_gray);
    border-style: solid;
    user-select: none;
    padding: 5px;
    margin:1px;
    background-color : hsl(100,0%,50%,0.15);
    color:white;
}

button.login_button.toggle {
    background-color: rgb(0, 0, 0);
    font-size: 1.1em;
    text-align: left;
}

button.login_button:hover {
    background-color: hsl(100,0%,50%,0.25);
    user-select: none;
}

button.login_button:active {
    background-color: hsl(100,0%,50%,0.175);
}

hr.current {
    position: absolute;
    padding: 0px;
    margin: 0px;
    border: none;
    color: white;
    background-color: rgb(61, 61, 61);
    z-index: 10;
}

div.list_div {
    position:absolute;
    width:100%;
}

div.emailpassword {
    position: absolute;
    z-index: 11;
}

.add_tag {
    background-color:  var(--default_gray);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    width: 20px;
    aspect-ratio: 1/1;
    border-width: 2px;
    border-color: rgba(255,255,255,0.1);
    border-style: solid;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.add_tag:hover {
    background-color: rgb(255, 255, 255, 0.25);
}

.add_tag:active {
    background-color: rgb(255, 255, 255, 0.5);
}

input {
    color: black;
    /* caret-color: rgba(255,255,255,1); */
}

input.default_input {
    border-radius: 0;
    border-width: 1px;
    border-color: white;
    border-style: solid;
    user-select: none;
    border-radius: 2px;
    padding: 5px;
    margin:2px;
    background-color : var(--default_gray);
    color:white;
    box-sizing: border-box;
}

.login_input {
    border-radius: 4px;
    border-style: none;
    padding: 4px;
}

.login_input:focus {
    border-radius: 4px;
    
    outline: none;
}

.chip {
    border-radius: 20px;
    font-size: 12px;
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin: 5px;
    width: 100px;
    height: 20px;
    box-sizing: content-box;
}

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

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

.stretch-column {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex: none;
    gap: 2px;
}

.field-label {
    color : var(--lighter_gray);
    font-size: 14px;
    margin: 10px;
}

.left-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2px;
}

.left-column {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.center-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
}

.Modal {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 30;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color :  var(--default_gray);
}

.Panel {
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
    background-color : var(--default_gray);
    border-radius: 5px;
}

.Toolbar {
    left: 50%;
    bottom: 0%;
    position: absolute;
    width: 300px;
    transform: translate(-50%,-20px);
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--darker_gray);
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

.color-line {
    width: 8px;
    margin: 2px;
    border-radius: 1.5px;
    background-color: white;
}

textarea {
    width: 300px;
    height: 256px;
    box-sizing: border-box;
    border: 2px none var(--default_gray);
    background-color: var(--darker_gray);
    color: white;
    font-size: 16px;
    resize: none;
    border-radius: 4px;
    padding: 10px;
    overflow-y: scroll;
    /* caret-color: rgba(255,255,255,1); */
  }

  textarea:hover {
    overflow-y: scroll;
  }

textarea:focus {
    width: 300px;
    outline: none;
    border-style: solid;
    border-width: '1px';
    box-sizing: border-box;
    border: 2px none var(--darker_gray);
    background-color: var(--darker_gray);
    color: white;
    font-size: 16px;
    resize: none;
    overflow-y: scroll;
  }

select {
    background-color: var(--darker_gray);
}

select:focus {
    outline:none;
}

.tool-icon {
    color:inherit;
}

.tool-button {
    background-color: var(--default_gray);
    padding: 4px;
    width: 40px;
    flex-grow: 1;
    height: 40px;
    user-select: none;
    font-size: 12px;
    color:var(--lighter_gray);
}

.tool-button:hover {
    background-color: var(--darker_gray);
}

.tool-button:active {
    color: white;
}


div,span::selection {
    color: none;
    background: none;
}
div,span::-moz-selection {
    color: none;
    background: none;
}

.default-interactive {
    background-color: var(--default_gray);
}

.default-interactive:hover {
    background-color: var(--lighter_gray);
}


.text_input{  
    display: block;
    padding: 4px;
    font-size: 14px;
    box-shadow: 2px 2px 8px rgba(black, .3);
    background-color: var(--darker_gray);
    border-radius: 4px;
    resize: none;
    border-style: none;
    border-color: black;
    color: white;
}

.text_input:focus{
  outline: none;
  border-color: var(--lighter_gray);
}


.hue {
    background: linear-gradient(
      to right,
      #f00 0%,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      #f00 100%
    );
  }

.picker {
    background: linear-gradient(
        to right,
        #f00 0%,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        #f00 100%
      );
    position: relative;
    width : 256px;
    height : 32px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
    border-radius: 4px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
  }