/************************* :ROOT **************************/

:root {

    /* COLORS */

        --color-primary: '';
        --color-secondary: '';
        --color-tertiary: '';
        --color-font: '';
        --color-border: '';
        --color-userInput-focus: hsl(0, 0%, 50%);

    /* BOX MODEL:  Height, Width, Padding, Border, Margin */

        --standard-font-size: 14px;
        --standard-font-family: monospace, sans-serif;
        --standard-gutter: 5px;
        --standard-border: 1px solid var(--color-border);
        --standard-border-radius: 20px;

        --body-margin: 0;

            --navbar-height: 100vh;
            --navbar-width: calc(var(--navbar-button-width) + (var(--navbar-button-margin) * 2));
            --navbar-border-right: 1px;

                --navbar-button-height: var(--navbar-button-width);
                --navbar-button-width: 40px;
                --navbar-button-border: none;
                --navbar-button-border-radius: 5px;
                --navbar-button-margin: 5px;

            --main-container-width: calc(100% - (var(--navbar-button-width) + (var(--navbar-button-margin) * 2)));

                --timebar-height: 50px;
                --timebar-border-bottom: 1px;

                    --clock-container-width: 50%;

                        --clock-container-div-height: 50%;
                        --clock-container-div-width: 100%;

                --views-height: calc(100vh - (var(--timebar-height) + var(--timebar-border-bottom) + var(--inputbar-height) + var(--inputbar-border-top)));
                --views-width: 100%;

                    --matrix-header-height: 35px;

                        --matrix-header-div-width: calc(((100% - var(--matrix-y-axis-width)) / 2) - var(--matrix-header-div-margin-right));
                        --matrix-header-div-margin: auto 0;
                        --matrix-header-div-margin-right: calc(var(--standard-gutter) * 2); 

                    --matrix-container-height: calc(var(--views-height) - var(--matrix-header-height));

                        --matrix-y-axis-width: var(--matrix-header-height);

                            --matrix-y-axis-div-height: var(--quadrant-height);
                            --matrix-y-axis-div-padding-top: var(--quadrant-margin-bottom);

                        --matrix-width: calc(100% - var(--matrix-y-axis-width));

                            --quadrant-height: calc((var(--matrix-container-height) / 2) - (var(--quadrant-margin) + var(--quadrant-margin-bottom)));
                            --quadrant-width: calc(50% - (var(--quadrant-margin) + var(--quadrant-margin-right)));
                            --quadrant-margin: 0px;
                            --quadrant-margin-right: calc(var(--standard-gutter) * 2);
                            --quadrant-margin-bottom: calc(var(--standard-gutter) * 2);

                                --todolist-padding: 0;
                                --todolist-margin: 0;

                    --singlelist-header-height: var(--matrix-header-height);

                        --singlelist-header-container-height: 100%;
                        --singlelist-header-container-width: var(--singlelist-box-width);
                        --singlelist-header-container-margin: 0;
                        --singlelist-header-container-margin-left: var(--singlelist-box-margin-left);
                        --singlelist-header-container-margin-right: var(--singlelist-box-margin-right); 

                    --singlelist-container-height: var(--matrix-container-height);

                        --singlelist-box-height: calc(var(--singlelist-container-height) - (var(--singlelist-box-margin) + var(--singlelist-box-margin-bottom)));
                        --singlelist-box-width: calc(100% - (var(--singlelist-box-margin) + var(--singlelist-box-margin-left) + var(--singlelist-box-margin-right)));
                        --singlelist-box-margin: 0px;
                        --singlelist-box-margin-left: calc(var(--standard-gutter) * 2);
                        --singlelist-box-margin-right: calc(var(--standard-gutter) * 2);
                        --singlelist-box-margin-bottom: calc(var(--standard-gutter) * 2);

                                    --taskli-height: calc(var(--standard-font-size) + 10px + 10px);
                                    --taskli-padding: 0 0;
                                    --taskli-margin: 0 0;

                --inputbar-height: calc(var(--userInput-height) + (4px + ((var(--standard-gutter) * 2) * 2)));
                --inputbar-border-top: 1px;
                        
                    --userInput-width: calc(100% - (4px + ((var(--standard-gutter) * 2) * 2) + var(--userInput-padding-left)));
                    --userInput-height: 36px;
                    --userInput-padding-left: 15px;
                    --userInput-border: none;
                    --userInput-border-radius: var(--standard-border-radius);
                    --userInput-margin: auto 0;

}



/**********************************************************/

body {
    margin: 0;

    display: flex;
    flex-flow: row nowrap;

    font-size: var(--standard-font-size);
    font-family: var(--standard-font-family);
    color: var(--color-font);
}

/************************* NAVBAR *************************/

#navbar {
    height: var(--navbar-height);
    width: var(--navbar-width);
    border-right: var(--standard-border);

    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    position: relative;

    background-color: var(--color-primary);
}

#navbar div {
    display: flex;
    flex-flow: column nowrap;
}

#navbar div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
}

.navbar-button {
    height: var(--navbar-button-height);
    width: var(--navbar-button-width);
    border: var(--navbar-button-border);
    border-radius: var(--navbar-button-border-radius);
    margin: var(--navbar-button-margin) var(--navbar-button-margin) 0;

    font-family: var(--standard-font-family);
    background-color: var(--color-primary);
    color: var(--color-font);
}

.navbar-button:last-child {
    margin-bottom: var(--navbar-button-margin);
}

#navbar div:last-child button:nth-last-child(2) {
    margin-bottom: var(--navbar-button-margin);
}

.navbar-button:hover {
    background-color: var(--color-secondary);
    /* outline: 1px solid var(--color-border); */
}

/********************* MAIN-CONTAINER *********************/

#main-container {
    width: var(--main-container-width);
}

/************************ TIMEBAR *************************/

#timebar {
    height: var(--timebar-height);
    border-bottom: var(--timebar-border-bottom) solid var(--color-border);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;

    background-color: var(--color-primary);
}

#clock-container {
    width: var(--clock-container-width);

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#clock-container div {
    height: var(--clock-container-div-height);
    width: var(--clock-container-div-width);
    border-right: var(--standard-border);
    
    text-align: center;
    align-content: center;
    font-weight: bold;
}

#clock-container div:last-child {
    border-right: none;
}

/************************* VIEWS **************************/

.views {
    height: var(--views-height);
    width: var(--views-width);
}

/************************* MATRIX *************************/

#matrix-header {
    height: var(--matrix-header-height);

    display: flex;
    flex-flow: row nowrap;
    justify-content: end;

    background-color: var(--color-primary);
}

#matrix-header div {
    width: var(--matrix-header-div-width);
    margin: var(--matrix-header-div-margin);
    margin-right: var(--matrix-header-div-margin-right);

    text-align: center;
    font-weight: bold;
}

#matrix-container {
    height: var(--matrix-container-height);

    display: flex;
}

#matrix-y-axis {
    width: var(--matrix-y-axis-width);

    background-color: var(--color-primary);
}

#matrix-y-axis div {
    height: var(--matrix-y-axis-div-height);
    padding-top: var(--matrix-y-axis-div-padding-top);
    
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-align: center;
    margin: auto;
    font-weight: bold;
}

#matrix {
    width: var(--matrix-width);

    display: flex;
    flex-flow: row wrap;
    background-color: var(--color-primary);
}

.quadrant {
    height: var(--quadrant-height);
    width: var(--quadrant-width);
    margin: var(--quadrant-margin);
    margin-right: var(--quadrant-margin-right);
    margin-bottom: var(--quadrant-margin-bottom);

    background-color: var(--color-secondary);
    outline: 1px solid var(--color-border);
    border-radius: 20px;
    overflow-wrap: anywhere;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.quadrant::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/*********************** SINGLELIST ***********************/

#singlelist-header {
    height: var(--singlelist-header-height);

    background-color: var(--color-primary);
}

#singlelist-header-container {
    height: var(--singlelist-header-container-height);
    width: var(--singlelist-header-container-width);
    margin: var(--singlelist-header-container-margin);
    margin-left: var(--singlelist-header-container-margin-left);
    margin-right: var(--singlelist-header-container-margin-right);

    display: flex;
    flex-flow: row nowrap;
}

#singlelist-header-container div {
    min-width: 100px;

    overflow: hidden;
    text-align: center;
    align-content: center;
    font-weight: bold;
}

/*
#singlelist-header-container div:first-child {
    min-width: 25px;
}
*/

#singlelist-header-container div:last-child {
    min-width: calc(600px - (var(--navbar-width) + var(--navbar-border-right) + var(--singlelist-header-container-margin-left) + var(--singlelist-header-container-margin-right)));
}

#singlelist-container {
    height: var(--singlelist-container-height);

    background-color: var(--color-primary);
}

#singlelist-box {
    height: var(--singlelist-box-height);
    width: var(--singlelist-box-width);
    margin: var(--singlelist-box-margin);
    margin-left: var(--singlelist-box-margin-left);
    margin-right: var(--singlelist-box-margin-right);
    margin-bottom: var(--singlelist-box-bottom);

    background-color: var(--color-secondary);
    outline: var(--standard-border);
    border-radius: 20px;
    overflow-wrap: anywhere;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

#singlelist-box::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/*************************** LI ***************************/

.todolist {
    padding: var(--todolist-padding);
    margin: var(--todolist-margin);

    list-style-type: none;
}

.taskli {
    height: var(--taskli-height);
    padding: var(--taskli-padding);
    border-bottom: var(--standard-border);
    margin: var(--taskli-margin);

    display: flex;
    flex-flow: row nowrap;

    position: relative;
}

.taskli:hover {
    background-color: var(--color-tertiary);
}

.col-info {
    height: 16px;
    min-width: 70px;
    max-width: 45px;
    margin: 9px 0;
    padding: 0px 15px;

    overflow: hidden;
    text-align: center;
    align-content: center;
}

.highlightImpactfulTask {
    min-width: 25px;
    max-width: 25px;

    text-align: right;
}

.col-task {
    height: 16px;
    width: 100%;
    margin: 9px 0;
    padding: 0px 30px;

    overflow: hidden;
}

.col-update {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    height: calc(14px + 10px + 10px);

    visibility: hidden;
    background-color: var(--color-tertiary);
    box-shadow: -20px 0px 10px -5px var(--color-tertiary);
}

li:hover > .col-update {
    visibility: visible;
}

.col-update-buttons {
    z-index: 10;
    width: 22px;
    height: 23px;
    margin-right: 10px;

    border: none;
    outline: var(--standard-border);
    /* outline: 1px solid var(--color-border); */
    border-radius: 50%;
    background-color: var(--color-tertiary);
    color: var(--color-border);
    /* color: var(--color-font); */
    font-weight: 900;
}

.col-update-buttons:first-child {
    margin-left: 20px;
}

.col-update-buttons:last-child {
    margin-right: 20px;
}

.col-update-buttons:hover {
    background-color: var(--color-border);
    color: var(--color-secondary);
}

/**************** HIGHLIGHTIMPACTFULTASK2 *****************

.highlightImpactfulTask2 {
    background-color: var(--color-secondary-highlight);
}

.highlightImpactfulTask2 .col-update{
    background-color: var(--color-secondary-highlight);
    box-shadow: -20px 0px 10px -5px var(--color-secondary-highlight);
}

.highlightImpactfulTask2 .col-update-buttons {
    background-color: var(--color-secondary-highlight);
}

/************************ INPUTBAR ************************/

#inputbar {
    height: var(--inputbar-height);
    border-top: var(--inputbar-border-top) solid var(--color-border);

    display: flex;
    justify-content: center;

    background-color: var(--color-primary);
}

#userInput {
    height: var(--userInput-height);
    min-height: var(--userInput-height);
    max-height: 100px;
    width: var(--userInput-width);
    padding-left: var(--userInput-padding-left);
    border: var(--userInput-border);
    border-radius: var(--userInput-border-radius);
    margin: var(--userInput-margin);

    outline: var(--standard-border);
    background-color: var(--color-secondary);
    color: var(--color-font);
}

#userInput:hover {
    box-shadow: 0px 0px 5px var(--color-userInput-focus);
    cursor: default;
}

#userInput:focus {
    outline: 2px solid var(--color-userInput-focus);
}

/************************ DRAGGING ************************/