:root {
    
    --text:                         black;
    --textBright:                   white;
    --textLight:                    white;
    --background:                   white;
    --background-transparent:       rgba(255, 255, 255, 0.9);
    
    --primary:                      rgba(0, 129, 153, 1);       /* #008199 */
    --primaryFaded:                 rgba(0, 143, 171, 0.5);
    --primaryDarker:                rgba(0, 113, 138, 1);       /* #00718A */
    --primaryShadow:                rgba(0, 84, 102, 1);        /* #005466 */
        
    --secondary:                    rgba(240, 160, 0, 1);       /* #F0A000 */
    --secondaryFaded:               rgba(240, 160, 0, 0.5);
    --secondaryShadow:              rgba(84, 56, 0, 1);         /* #543800 */
        
    --neutral:                      rgba(240, 240, 240, 1);     /* #F0F0F0 */
    --neutralFaded:                 rgba(240, 240, 240, 0.3); 
    --neutralShadow:                #505050;
    
    --attention:                    rgba(168, 0, 0, 1);         /* #A80000 */
   
}

@media (prefers-color-scheme: dark) {
    :root {
        
        --text:                     #D0D0D0;
        --textLight:                #E0E0E0;
        --background:               rgba(26, 26, 26, 1);
        --background-transparent:   rgba(26, 26, 26, 0.9);
        
        --primary:                  rgba(0, 100, 120, 1);       /* #006478 */
        --primaryFaded:             rgba(0, 100, 120, 0.6);
        --primaryDarker:            rgba(0, 70, 84, 1);         /* #004654 */
        
        --secondary:                rgba(143, 95, 0, 1);        /* #8f5f00 */
        --secondaryFaded:           rgba(143, 95, 0, 0.5);
        
        --neutral:                  rgba(39, 43, 46, 1);        /* #272B2E */
        --neutralFaded:             rgba(39, 43, 46, 0.3);
        --neutralShadow:            black;
        
        --attention:                rgba(148, 0, 0, 1);         /* #940000 */
        
    }
  
}

        body {
            background-color:       var(--background);
            color:                  var(--text);
            font-family:            sans-serif;
            margin:                 0;
            padding:                0;
        }

        a, span.link {
            color:                  var(--primary);
            text-decoration:        underline;
            cursor:                 pointer;
        }

            a:hover, span.link:hover {
                filter:             brightness(1.2);
            }
    
        #cals {
            padding:                5px;
            margin:                 auto;
            max-width:              1200px;
            display:                flex;
            flex-flow:              row wrap;
            justify-content:        center;
        }
   
            #cals h2 {
                font-size:          1.15em;
                padding:            0.2em;
            }

        .calDiv {
            padding:                10px;
            width:                  365px;
            height:                 395px;     
            position:               relative;
        }

        .calTable td {
            height:                 50px;
            width:                  50px;
            box-sizing:             border-box;
            margin:                 0;
            padding:                5px;
            text-align:             center;
            background-color:       var(--neutral);
            cursor:                 pointer;
        }

            .calTable td:hover {
                filter:             brightness(0.93);          
            }

            td.blank {
                cursor:             default !important;
                background-color:   transparent !important;
                border:             1px solid transparent !important;
            }

            td.weekend {
                background-color:   var(--neutralFaded);
            }

            .highlightToday {
                border:             1px solid var(--textLight);
                text-decoration:    underline;
                border-radius:      50%!important;
            }

            .highlightToday.sprintPrimary {
                border:             1px solid var(--primary);
            }

            .highlightToday.sprintSecondary {
                border:             1px solid var(--secondary);
            }

            .sprintPrimary {
                background-color:   var(--primary) !important;
                color:              var(--textLight);
                text-shadow:        0 0 1px var(--primaryShadow);
            }
            
            .sprintPrimary.weekend {
                background-color:   var(--primaryFaded) !important;
            }  
            
            .listPrimary {
                color:              var(--primary) !important; 
            }

            .sprintSecondary {
                background-color:   var(--secondary) !important;
                color:              var(--textLight);
                text-shadow:        0 0 1px var(--secondaryShadow);
            }
            
            .sprintSecondary.weekend {
                background-color:   var(--secondaryFaded) !important;
            }
            
            .listSecondary {
                color:              var(--secondary) !important;
                filter:             brightness(0.9);
            }

            .sprintRelease span {
                color:              var(--textBright);
                display:            inline-block;
                padding:            7px;
                min-width:          20px;
                background-color:   var(--attention);
                border-radius:      50%!important;
                border:             1.5px solid var(--textLight);
            }


        #header {
            width:                  100%;
            margin:                 0;
            padding:                0;
            background-color:       var(--primary);
            color:                  var(--textLight);
        }

            h1#heading {
                display:            inline-block;
                font-size:          20px;
                margin:             0;
                padding:            15px;
                color:              var(--textBright);
            }

            #subheader {
                width:              100%;
                margin:             0;
                text-align:         center;
                padding:            20px 0;
                background-color:   var(--primaryDarker);
                color:              var(--textLight);
            }

                #subMenu {
                    margin:             auto;
                    display:            flex;
                    overflow:           hidden;
                    flex-wrap:          wrap;
                    max-width:          850px;
                    max-height:         0px;
                    font-size:          0.9em;
                    transition:         max-height 0.2s ease-out; 
                }
                    #subMenu.active {
                        max-height:     150px;
                        transition:     max-height 0.3s ease-out;
                    }
        
                    #subMenu > * {
                            width:          calc(100% / 3);
                        }


                #advisorText {
                    font-size:          0.9em;
                }
                
                #advisorText a {
                    color:              var(--textBright);
                    text-decoration:    underline;
                    cursor:             pointer;
                }

                .formExtras {
                    display:            none;
                }
    
                input, button, select, a.modalButton {
                    background-color:   var(--primary);
                    color:              var(--textBright);
                    border-radius:      5px;
                    margin:             5px;
                    border:             0;
                    padding:            10px;
                    cursor:             pointer;
                    text-decoration:    none;
                }
    
                input.settingsText {     
                    margin:             5px;
                    padding:            10px 4px 10px 10px;
                    cursor:             text;
                }
    
                input.settingsText::placeholder {
                    color:              rgba(240, 240, 240, 0.4);
                }
    
                label.settingsLabel {
                    display:            inline-block;
                    width:              80px;
                    height:             40px;
                }
    
                label.longSettingsLabel {
                    display:            inline-block;
                    width:              200px;
                    height:             40px;
                }
    
                select.settingsSelect {
                    width:              170px;
                }
    
                select.smallSettingsSelect {
                    width:             78px;
                }
    
                div#releaseWeekdayOnly {
                    display:            none;
                    margin-top:         -20px!important;
                }
    
                div#releaseOnly, div#releaseWeekdayOnly {
                    padding:            0;
                    margin:             0;
                }
    
                div.menuButtons {
                    margin:             auto;
                    text-align:         center;
                }
    
                button.menuButton {
                    width:              100px;
                }
    
                button.red {
                    background-color:   var(--attention);
                }
    
                input::-webkit-outer-spin-button, /* Chrome/Safari: hiding number input arrows */
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0; 
                }
    
                input[type=number] {  /* Firefox: hiding number input arrows */
                    -moz-appearance:textfield; 
                }


            #navButtons {
                position:           absolute;
                right:              15px;
                top:                15px;
            }


            span.monospace {
                font-family:        monospace;
                font-size:          1.3em;
                opacity:            0.6;
            }

            .calIcon {
                width:              25px;
                height:             28.5px;
                vertical-align:     text-bottom;
            }
            
            #pageIcon {
                width:              25px;
                height:             28.5px;
                position:           relative;
                top:                6px;
                left:               10px;

            }

            .iconDiv:hover, button:hover, select:hover, input:hover, input:active, .iCalButton:hover {
                filter:             brightness(1.1);
            }

            select option:hover {
                color:              var(--textBright);
            }

            select option[disabled] { 
                color:              var(--neutral);
            }

            #sprintProperties {
                display:            inline-block;
            }
 

            #iconContainer {
                position:           absolute;
                right:              0px;
                top:                8px; 
            }

            .iconDiv {
                cursor:             pointer;
                filter:             brightness(0.9);
                float:              right;
                height:             15px;
                color:              var(--textLight);
                margin-right:       20px;
            }

            #languageIcon {
                width:              25px;
            }

            #iconCopyDiv {
                padding:            10px 0;
                visibility:         hidden;
            }

            #iconDownloadDiv {
                padding:            10px 0;
                visibility:         hidden;
            }

                #settingsIcon {
                    transition:         all 0.3s;
                }

                #settingsIcon.active {
                    transform:          rotate(180deg);
                }


            .iconLabel {
                display:            block;
                font-size:          0.9em;
                float:              left;
                margin-left:        8px;
            }

        .modalLink {
            cursor:                 pointer;
            display:                inline-block;
            padding:                10px 0;
        }

        #iconText {
            position:               relative;
            right:                  10px;
            top:                    7px;
            font-size:              0.8em;
            z-index:                99;
            display:                inline-block;
            padding:                5px;
            background-color:       var(--primary);  
            border-radius:          5px;
        }

            #iconText.visible {
                visibility:         visible;
                opacity:            1;
            }

            #iconText.hidden {
                visibility:         hidden;
                opacity:            0;
                transition:         visibility 0s 1s, opacity 1s linear;
            }

        .topRightIcon {
            width:                  18px; 
            fill:                   var(--textLight);  
            float:                  left; 
        }

        #sprintsList li, #releaseList li {
            padding-bottom:         7px;
        }

        .iCalButton {
            display:            inline-block;
            font-size:          0.8em;
            text-decoration:    none;
        }


        /* Modals with transitions and overlays */

        #overlay, #noScriptOverlay {
            position:           fixed;
            top:                0;
            left:               0;
            right:              0;
            bottom:             0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index:            99;
            transition:         0.3s ease-in-out;
            visibility:         hidden;
            opacity:            0;
        }

            #overlay.active {
                visibility:         visible;
                opacity:            1;
                cursor:             pointer;
            }

        #infoModal, #languageModal, #noScriptModal {
            position:           fixed;
            top:                200px;
            left:               0;
            right:              0;
            width:              50%;
            max-width:          700px;
            margin:             auto;
            overflow:           auto;
            background:         var(--background);
            border-radius:      5px;
            padding:            1em 3em;
            box-shadow:         0px 3px 15px var(--neutralShadow);
            transition:         0.2s ease-in-out; 
            z-index:            1000; 
            font-size:          0.9em;
            visibility:         hidden;
            opacity:            0;
        }

            #infoModal.active, #languageModal.active, #noScriptModal, #noScriptOverlay {
                visibility:         visible;
                opacity:            1;
            }

            .modalClose {
                position:           absolute;
                right:              1em;
                top:                1em;
                width:              1.1em;
                height:             1.1em;
                cursor:             pointer;
            }

            .modalClose:after,
            .modalClose:before {
                content:            '';
                position:           absolute;
                width:              2px;
                height:             1.5em;
                background:         #ccc;
                display:            block;
                transform:          rotate(45deg);
                left:               50%;
                margin:             -3px 0 0 -1px;
                top:                0;
            }

            .modalClose:hover:after,
            .modalClose:hover:before {
                background:         #aaa;
            }

            .modalClose:before {
                transform:          rotate(-45deg);
            }

            .modalCenter {
                margin:             auto;
                text-align:         center;
            }

            button.langButton, .modalButton {
                min-width:          90px;
                display:            inline-block;
                font-size:          1em;
                margin:5px;
                padding: 10px;
            }

            .modalButton {
                
            }
     
           
    @media screen and (max-width: 768px) {

        #infoModal, #languageModal, #noScriptModal {
            top:                    15px; 
            width:                  90%;
            max-width:              350px;
            min-width:              200px;
            padding:                0em 1em;
        }

        #subMenu > * {
            width:                  100%;
        }

        #subMenu.active {
            max-height:             500px;
            transition:             max-height 0.4s ease-out;
        }
        
        .no-mobile {
            display:                none!important;
        }

        #iconContainer {
            right:                  10px;
        }

        #iconLanguageDiv, #iconCopyDiv, #iconDownloadDiv, #iconHelpDiv, #iconSettingsDiv {
            min-width:              15px;
            width:                  15px;
            padding:                10px;
            margin-right:            5px;
        }

        
    }    

        
    @media (prefers-color-scheme: dark) {

        p a, .listPrimary, .listSecondary {
            filter:                 brightness(1.6);
        }
        
        .calTable td:hover, .highlightToday {
                filter:             brightness(1.2);          
            }

        .sprintRelease span {
            filter:                 brightness(0.8);
        }
        
        #pageIcon {
            filter:                 none!important;
        }

    }
                

#tooltip {
    text-align:         center;
    color:              #fff;
    background:         #333;
    position:           absolute;
    z-index:            10000;
    padding:            8px;
    border-radius:      5px;
    transition:         100ms ease;
    font-size:          0.8em!important;
    box-shadow:         0px 3px 10px var(--neutralShadow);
}
 
    #tooltip:after /* triangle decoration */
    {
        width:          0;
        height:         0;
        border-left:    10px solid transparent;
        border-right:   10px solid transparent;
        border-top:     10px solid #333;
        content:        '';
        position:       absolute;
        left:           50%;
        bottom:         -10px;
        margin-left:    -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color:   transparent;
            border-bottom:      10px solid #333;
            top:                -20px;

        }
 
        #tooltip.left:after
        {
            left:               10px;
            margin:             0;
        }
 
        #tooltip.right:after
        {
            right:              10px;
            left:               auto;
            margin:             0;
        }


.radiusBottomRight {
    border-bottom-right-radius: 5px;
}

.radiusBottomLeft {
    border-bottom-left-radius: 5px;
}

.radiusTopRight {
    border-top-right-radius: 5px;
}

.radiusTopLeft {
    border-top-left-radius: 5px;
}