:root {
    --background-color:#203163;
    --background-color-with-Transparency:#203163c9;
    --selected-color: #B69D6E;
    --title-color: #E6E1DA;
}

iframe { 
    width: 100%;
    aspect-ratio: 16 / 9;
  }

/* Screen size dependent changes */

@media screen and (min-width: 1670px) {
    #highlights.navPanel-visible > .container {
        
        margin-left: auto !important;
        
    }
}


@media screen and (min-width: 1281px) {

    .footer-left {
        padding-left: calc((100% / 4) - 50px) !important;
    }
    .footer-right {
        padding-left: calc(100px) !important;
    }
}

@media screen and (max-width: 1280px) {

    .footer-left {
        padding-top: 10px !important;
        padding-left: calc((100% / 4) - 120px) !important;
    }

    .footer-right {
        padding-top: 10px !important;
        padding-left: calc(100px) !important;
    }

}

@media screen and (max-width: 980px) {

    .footer-left {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }


    .footer-right {
        padding-top: 10px !important;
        padding-left: calc(100px) !important;
    }

}

@media screen and (min-width: 736px) {
    #highlights.navPanel-visible > .container {
        width: calc(100% - 275px) !important;
        margin-left: 275px;
    }
}

@media screen and (max-width: 736px) {

    .footer-left-separator {
        flex: none !important;
        padding-left: 10px !important;
        padding-right: 0px !important;
        width: 0px !important;
    }

    .footer-right-separator {
        flex: none !important;
        padding-left: 0px !important;
        padding-right: 10px !important;
        width: 0px !important;
    }

    .footer-left {
        padding-left: calc((100% / 4) - 100px) !important;
        padding-right: 0px !important;
        font-size: 0.60rem;
    }

    .footer-right {
        padding-top: 10px !important;
        padding-right: 0px !important;
        padding-left: 60px !important;
        font-size: 0.60rem;
    }

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    .button {
        font-size: 0.7em !important;
        width: 50% !important;
        max-width: 30em;
    }

}

/* ALN styles */
@media screen and (min-width: 1px) { 

    /* Nav */

        /* #page-wrapper {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            padding-bottom: 1px;
        } */

        #ALNtitleBar {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            display: block;
            height: 44px;
            left: 0;
            position: absolute;
            top: 0;
            /* width: calc(100% - 275px); */
            width: auto;
            z-index: 10001;
            background: none;
        }

            #ALNtitleBar .title {
                display: none;
            }

            #ALNtitleBar .toggle {
                text-decoration: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 60px;
                height: 44px;
            }

                #ALNtitleBar .toggle:before {
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    text-transform: none !important;
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                }

                #ALNtitleBar .toggle:before {
                    -moz-transition: all .15s ease-in-out;
                    -webkit-transition: all .15s ease-in-out;
                    -ms-transition: all .15s ease-in-out;
                    transition: all .15s ease-in-out;
                    text-decoration: none;
                    content: '\f0c9';
                    font-size: 14px;
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    display: block;
                    width: 54px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    color: rgba(255, 255, 255, 0.75);
                    background-color: rgba(92, 95, 103, 1.0);
                    border-radius: 0.25em;
                }

                #ALNtitleBar .toggle:active:before {
                    background-color: rgba(92, 95, 103, 0.75);
                }

        #ALNnavPanel {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform: translateX(-275px);
            -webkit-transform: translateX(-275px);
            -ms-transform: translateX(-275px);
            transform: translateX(-275px);
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            display: block;
            height: 100%;
            left: 0;
            overflow-y: auto;
            position: absolute;
            top: 0;
            width: 275px;
            z-index: 10002;
            background: #242730 url("images/overlay.png");
            box-shadow: inset -3px 0px 4px 0px rgba(0, 0, 0, 0.1);
        }

            #ALNnavPanel .link {
                display: block;
                color: rgba(255, 255, 255, 0.5);
                text-transform: uppercase;
                text-decoration: none;
                font-size: 0.85em;
                letter-spacing: 0.15em;
                text-decoration: none;
                height: 44px;
                line-height: 44px;
                border-top: solid 1px rgba(255, 255, 255, 0.05);
                margin: 0 15px 0 15px;
            }

                #ALNnavPanel .link:first-child {
                    border-top: 0;
                }

            #ALNnavPanel .indent-1 {
                display: inline-block;
                width: 100%;
            }

            #ALNnavPanel .indent-2 {
                display: inline-block;
                width: 2em;
            }

            #ALNnavPanel .indent-3 {
                display: inline-block;
                width: 3em;
            }

            #ALNnavPanel .indent-4 {
                display: inline-block;
                width: 4em;
            }

            #ALNnavPanel .indent-5 {
                display: inline-block;
                width: 5em;
            }

            #ALNnavPanel .depth-0 {
                color: #fff;
            }

         /* body.navPanel-visible #page-wrapper {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }  */

        #highlights.navPanel-visible > .container {
            /* -moz-transform: translateX(275px); 
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);*/
            /* position: relative; */
            /* flex-grow: 1; */
 /*           margin-left: calc(50% - 570px + 137.5px);
            margin-right: calc(50% - 570px - 137.5px);
            width: calc(100% - 275px);
   */         /* margin-left: calc(100vw ); */
            /* margin-left: calc((275px / 2) + (275px / 2)); */
            /* margin-right: calc(275px / 2) * -1; */
            /*width: calc(100% - 275px) !important;
            margin-left: 275px;*/
            /*max-width: calc(1140px - 275px) !important;*/
        }

        #highlights.navPanel-visible #ALNtitleBar {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        #highlights.navPanel-visible #ALNnavPanel {
            -moz-transform: translateX(0);
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

}


/* Login */

.wrapper.style2 {
    background: var(--title-color);
}

.wrapper.style2 .title{
    background: var(--title-color);
}

.firebaseui-container {
    background-color: var(--title-color) !important;
}

/* Footer */
#footer {
    background: var(--background-color) url("images/overlay.png");
    padding-top: 4em;
    padding-bottom: 0px;
}

#copyright {
    margin-top: 0em;
    padding-top: 2em;
}

#footer .title {
    background: var(--background-color) url("images/overlay.png");
}

section,
	article {
		margin: 0 0 1em 0;
	}

.feature-list section {
        padding-top: 1em;
    }

#footer .feature-list {
    border-top: none;
    padding-top: 0em;
}

#footer .feature-list section {
    border-top: none;
    padding-top: 0em;
}

/* Breadcrumb */

.ALNbreadcrumb {
    display: -ms-flexbox;
    /*display: flex;*/
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    padding-bottom: 0rem;
    padding-left: 4.5rem;
    padding-right: 4.5rem;
    margin-bottom: 1rem;
    list-style: none;
    border-radius: .25rem;
    color: var(--selected-color);
    font-weight: bold;
    z-index: -1;
}

/* Header */
#header:before {
    background: var(--background-color) url("images/overlay.png");
}

#logo h1 {
    color: var(--selected-color);
}

.dropdown-item {
    cursor: pointer;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--selected-color) !important;
}

.userIcon {
    color: var(--title-color) !important;
}

.btn-secondary {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--title-color) !important;
}

a.siteTitle {
    color: var(--selected-color) !important;
}

a.siteTitle:hover {
    color: var(--selected-color) !important;
}

/* Login div */
.mdl-button--raised.mdl-button--colored {
    background: var(--background-color) !important;
}

.mdl-textfield--floating-label.is-focused{
    color: var(--background-color) !important;
}

/*.firebaseui-link {
    color: var(--background-color) !important;
}*/

/* Selected / Important text elements */

.feature-list h3 {
    color: var(--selected-color) !important;
}

/* Side Panel */

#ALNnavPanel .link {
    color: var(--title-color);
  }

#ALNnavPanel .link[status="disabled"] .lowercase {
    text-transform: none;
}

#ALNnavPanel {
    background: var(--background-color) url("images/overlay.png");
}

#ALNtitleBar .toggle:before {
    background-color: var(--background-color-with-Transparency);
}

#ALNnavPanel .depth-0 {
    color: var(--selected-color);
    font-weight: bold;
}

.depth-1:hover {
    text-decoration: underline !important;
    color: var(--selected-color) !important;
  }

  .activeDepth1 {
    text-decoration: underline !important;
    color: var(--selected-color) !important;
  }

span[status="disabled"] {
    pointer-events: none;
    text-decoration: none;
}

/* Main div */

.wrapper.style3 {
    background: var(--title-color);
}

.wrapper.style3 .title {
    background: var(--title-color);
}

#highlights .highlight h3 {
    color: var(--selected-color);
}

.button.style1 {
    background: var(--selected-color) url(images/overlay.png);
}

.button.style1:hover {
    background-color: var(--selected-color);
}

.button.style1:active {
    background-color: var(--selected-color);
}