/* THIS FILE CONTAINS STANDARD STYLES FOR SIMPLESAP */
/* THIS PARTICULAR FILE CONCERNS WITH THE CSS OF THE IDS */
/*
    - sticky footer ids
    - main elements
    - media queries
*/

/* sticky footer ids */
    #container {
        min-height: 100%;
        min-width: 100%;
        background: linear-gradient(-30deg,#ffdc7a,#94E4FF);
    }

    #simplesap-logo {
        color: #94E4FF;
    }

/* main elements */
    #register_container {
        background-color: white;
        border-radius: 25px;
    }

    #register_checker {
        background: black;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        color: white;
    }

    #tasks_container {
        position: relative;
        margin-right: 1.5rem;
        padding: .5rem .8rem;
        overflow: visible;
    }

    #tasks_display {
        position: absolute;
        background-color: white;
        padding: .5rem;
        border-radius: 1rem;
        z-index: 1;
        right: 0;
        box-shadow: 3px 3px 5px 1px #5050505e;
        display: grid;
        grid-auto-flow: row;
        gap: 0.5rem;
        width: max-content;
    }

    #tasks_notification_badge {
        position: absolute;
        top: 0;
        right: 0.5rem;
        background: red;
        padding: 0.2rem 0.5rem;
        border-radius: 50%;
        color: white;
    }

/* planning elements */
    #planning_container {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-rows: max-content;
    }

    #planning_body {
        position: relative;
        display: grid;
        grid-template-rows: max-content;
    }

    #planning_time_marker {
        content: '';
        width: 2px;
        position: absolute;
        left: 30px;
        height: 100%;
        background: red;
        top: 0;
    }

    #planning_fill_section {
        position: relative;
    }

    #planning_float_zone {
        position: fixed;
        left: 0;
        background: white;
        z-index: 2;
    }

    #planning_fixed_zone {
        display: grid;
        grid-template-rows: max-content;
        height: 100%;
    }

/* large elements */
    #content {
        height: calc(100dvh - 70px);
        flex-direction: column-reverse;
    }

    #header {
        height: 70px;
        overflow: visible;
    }

/* RWD */
@media only screen and (min-width: 433px), screen and (hover: hover) and (pointer: fine) {

    #content {
        flex-direction: row;
    }
}