@import "/jss/mid-bootstrap/bootstrap.css";


html {
    width: 100%;
    height: 100%;
    background: #DEDEDE;
}

body {
    height: 100%;
    background: #FFFFFF;
    /*font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    overflow-x: hidden;
    box-shadow: 0px 0px 15px black;
}

.alert {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}


@media all and (min-width: 750px) {

    html.midatlantic body.login-back {
        width: 650px;
    }
    
    html.midatlantic body.login-back {
        padding: 20px 120px;
    }
    
    .hide-desktop {
        display: none !important;
    }
    
    .midatlantic .banner {
        margin-bottom: 50px;
    }
    
}

@media all and (max-width: 749.9px) {
    
    
    html.midatlantic body.login-back {
        width: 85%;
    }
    
    html.midatlantic body.login-back {
        padding: 20px;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .mobile-flex-last-100 {
        order: 999 !important;
        flex-basis: 100%;
    }
    
    .midatlantic .banner {
    }
}

html {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#content {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: block;
}

/* menu */
.nav-top {
    height: 50px;
    line-height: 50px;
    clear: both;
}

.toggle-menu {
    float: left;
    width: 60px;
    
    text-align: center;
    
    cursor: pointer;
}

.nav-logo {
    float: left;
    margin-left: 25px;
    margin-right: 0px;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.menu-items {
    text-align: center;
    float: left;
    font-size: 1.1em;
}

.data-right {
    float: right;
    margin-right: 10px;
}

.nav-left {
    box-sizing: border-box;
    border-right: 1px solid gray;
    height: calc( 100% - 50px );
    position: fixed;
    background: #FAFAFA;
    overflow: auto;
    z-index: 999;
}

.sub-menu .menu-item {
    padding-left: 1.5em;
}

.menu-parent {
    cursor: pointer;
    line-height: 2em;
    padding-left: 1em;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-left > .sub-menu {
    box-sizing: border-box;
    height: 0px;
    overflow: hidden;
    transition: height 0.5s, opacity 0.5s;
    opacity: 0;
}

.sub-menu.show-menu {
    height: auto;
    overflow: visible;
    opacity: 1;
}

#contentHider {
    height: 100%;
    width: 100%;
    position: absolute;
    background: #222;
    background: repeating-linear-gradient(
        -45deg,
        #222,
        #222 10px,
        #333 10px,
        #333 20px
    );
    display: none;
}

.icon-holder {
    display: inline-block;
    width: 20px;
}

/** LOGIN **/

.form-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: auto;
}

.form-logo {
    display: block;
    margin: auto;
    width: 100%;
}

.input-field {
    padding-top: 5px;
    padding-bottom: 5px;
}

.input-field label {
    display: block;
    font-weight: bold;
}

html.midatlantic .login {
    width: 60%;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 1.5em;
}

@media all and (max-width: 350px) {
    .login {
        width: 100%;
    }
}

.login:disabled, .button:disabled {
    cursor: not-allowed;
}

.error-field, .success-fiels {
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
}

.error-field {
    color: red;
    border: 1px solid red;
    background: #FFADAD;
}

.success-fiels {
    color: green;
    border: 1px solid green;
    background: #ADFFAD;
}

body.login-back {
    overflow: auto;
    height: auto;
    min-height: initial;
}

body.full {
    width: 100%;
}

/* midatlantic style */

/* New */

html.midatlantic header {
    /*letter-spacing: 1px;*/
    box-shadow: 0px 0px 10px #cccccc;
    z-index: 1;
}

html.midatlantic header .input-field select {
    border-bottom: none;
    margin: 0;
    height: var(--header-content-height);
    padding: 0;
    background-position: 100% 0px;
}

html.midatlantic .input-field select {
    padding-right: 22px !important;
}

html.midatlantic body {
    width: 100%;
}

html.midatlantic header {
    display: flex;
    flex-wrap: wrap;
    --header-padding: max(1.2vw, 12px);
    --header-content-height: 25px;
    --header-full-height: calc( 2 * var(--header-padding) + var(--header-content-height) );
    line-height: var(--header-content-height);
}

html.midatlantic header .nav-spacing {
    flex-grow: 1;
}

.no-wrap {
    white-space: nowrap;
}

html.midatlantic header {
}

html.midatlantic header > * {
    padding-top: var(--header-padding);
    padding-bottom: var(--header-padding);
    margin-left: var(--header-padding);
    margin-right: var(--header-padding);
}

html.midatlantic header .logo-container {
    padding: 0;
    height: var(--header-full-height);
    display: flex;
    align-items:center;
}

html.midatlantic header .logo-container img {
    max-height: 100%;
    max-width: max(70px, 12vw);
}

@media all and (min-width: 750px) {

    html.midatlantic header > :not(.logo-container):not(.nav-spacing) {
        margin-left: 50px;
    }
    
    html.midatlantic header .prepend-select-arrow {
        padding-right: 28px !important;
        background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><polyline points="20,33 50,66 80,33" fill="none" stroke="black" stroke-width="5" /></svg>') 100% 0px / 25px 25px no-repeat;
    }
    
    .midatlantic .banner {
        height: min(25vh, 350px);
    }

}

@media all and (max-width: 749.9px) {

    html.midatlantic header .dropdown-field {
        position: initial;
    }
    
    html.midatlantic header .production-selector {
        text-align: center;
    }
    
    html.midatlantic header .production-selector .dropdown-button {
        display: inline-block;
    }
    
    html.midatlantic header .dropdown-menu {
        width: 100vw;
        box-sizing: border-box;
        border-radius: 0;
        position: initial;
        box-shadow: none;
    }
    
    html.midatlantic header .dropdown-item {
        text-align: center;
    }
    /*
    html.midatlantic header {
        padding: 30px 0px;
    }*/
    
    html.midatlantic header .dropdown-menu {
        margin-top: 6px;
        margin-bottom: 6px;
    }
    
    html.midatlantic header .logo-container {
        flex-grow: 1;
    }
    /*
    .dropdown-field.mobile-dropdown-transformer:not(.open) ~ .logo-container {
        margin-left: 30px;
    }*/
    
    .dropdown-field.open {
        margin-left: 0;
        margin-right: 0;
    }
    
    .dropdown-field.mobile-dropdown-transformer.open ~ .logo-container {
        text-align: center;
    }

    .dropdown-field.mobile-dropdown-transformer.open ~ .logo-container > img {
        width: 250px;
    }
    
    html.midatlantic header .dropdown-field:not(.open) .dropdown-button .user-name {
        display: none;
    }
    
    html.midatlantic header .dropdown-field.open .prepend-select-arrow.hide-arrow-on-mobile-closed, html.midatlantic header .prepend-select-arrow:not(.hide-arrow-on-mobile-closed) {
        padding-right: 28px !important;
        background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><polyline points="20,33 50,66 80,33" fill="none" stroke="black" stroke-width="5" /></svg>') 100% 0px / 25px 25px no-repeat;
    }
/*
    .midatlantic .button.button-padding {
        padding: 7px 40px;
    }
    */
    .midatlantic .banner {
        height: 35vw;
    }
    
}

.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 5;
}
.order-5 {
    order: 5;
}

html.midatlantic header .append-profile-logo {
    padding-left: 40px !important;
    background: url('/new_style/profile_face.svg') 0px 0px / var(--header-content-height) var(--header-content-height) no-repeat;
    display: inline-block;
}

html.midatlantic .section-title {
    font-size: 24pt;
}

html.midatlantic header .input-field {
    padding: 0;
}

html.midatlantic header .dropdown-button .language-button {
    height: 20px;
    width: 20px;
}

html.midatlantic header .language-button {
    border-radius: 50%;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
}

html.midatlantic .dropdown-field {
	float:left;
	position:relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

html.midatlantic .dropdown-item {
	position:relative;
    white-space:nowrap;
    display: block;
    text-decoration: none;
    color: #3c3c3c;
}

html.midatlantic .dropdown-item:hover {
    text-decoration: none;
}

html.midatlantic .dropdown-menu {
	position:absolute;
    right: 0;
    z-index: 10;
}

html.midatlantic header .dropdown-menu {
	top: var(--header-full-height);
}

html.midatlantic header .dropdown-item {
	text-align: right;
}

html.midatlantic .dropdown-menu {
    background: #f6ba25;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
    padding-left: 14px;
    padding-right: 14px;
}

html.midatlantic .dropdown-menu .dropdown-item {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 26px;
    padding-right: 14px;
    border-bottom: 1px solid #3c3c3c;
    cursor: pointer;
    font-size: 12pt;
}

html.midatlantic .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}

html.midatlantic body.index {
    display: flex;
    flex-direction: column;
}

html.midatlantic body.index main {
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.dropdown-field:not(.open) .dropdown-menu {
    display: none;
}

.midatlantic .banner {
    background-image: url('/background');
    background-size: cover;
    background-position: 50% 50%;
}

/* Old updated */

html.midatlantic {
    background: #EFEFEF url('./login_background.jpg') center / cover no-repeat;
}

html.midatlantic.index {
    background: #FFFFFF;
}

.midatlantic body {
    box-shadow: none;
}

.midatlantic body.login-back {
    box-shadow: 0px 0px 20px #cccccc;
}

.midatlantic .nav-top {
    background-color: rgb(0, 64, 136);
    color: white;
}

.midatlantic .nav-top .menu-item {
    color: white;
}

@media all and (min-width: 531px) {
    .midatlantic .nav-top .menu-item {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
    }
}

.midatlantic .nav-left > .menu-parent {
    background: #cee4fe;
    background: linear-gradient(to bottom, #ffffff 0%,#cee4fe 100%);
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 3em;
    border-bottom: 1px solid #a4bed4;
    font-size: 0.9em;
}

.midatlantic .nav-left > .menu-parent:hover {
    background: #a1cbfc;
    background: linear-gradient(to bottom, #cee4fe 0%,#a1cbfc 100%);
}

.midatlantic .sub-menu > .menu-parent {
    margin: 0;
    font-weight: bold;
    cursor: pointer;
}

.midatlantic .sub-menu > .menu-parent {
    /*text-decoration: underline;*/
}

.midatlantic .nav-left > .sub-menu.show-menu {
    padding-top: 1em;
    padding-bottom: 1em;
}

.midatlantic .nav-left .menu-item {
    line-height: 1em;
    background-color: transparent;
    transition: background-color 0.5s, box-shadow 0.5s;
    padding-top: 2px;
    padding-bottom: 2px;
}

.midatlantic .nav-left .menu-item:hover {
    background-color: white;
    box-shadow: 0px 0px 5px gray;
}

.midatlantic body {
    background: transparent;
}

.midatlantic body.login-back {
    background: white;
    border-radius: 10px;
}

.midatlantic #container {
    background: rgba(255, 255, 255, 0.8);
}

.midatlantic .nav-left {
    background: rgba(255,255,255,0.7);
}

.midatlantic .nav-left .sub-menu {
    background: rgba(255,255,255,0.7);
}

@media all and (max-width: 1000px) {
    .midatlantic .nav-left {
        background: white;
    }
}

@media all and (max-width: 400px) {
    .midatlantic .nav-logo .short-text {
        display: inline;
    }
    .midatlantic .nav-logo .long-text {
        display: none;
    }
}

@media all and (min-width: 401px) {
    .midatlantic .nav-logo .short-text {
        display: none;
    }
}

.midatlantic .nav-left a.active {
    font-weight: bold;
}

.midatlantic .nav-left a {
    
}

.midatlantic .nav-left a:hover, .midatlantic .nav-left a:focus {
    text-decoration: none;
}

.midatlantic #pageTitle {
    color: #055A78;
    background: #cee4fe;
    background: linear-gradient(to bottom, #ffffff 0%,#cee4fe 100%);
    font-weight: bold;
    border-bottom: 1px solid gray;
}
.midatlantic .toggle-menu:hover {
    background-color: #11283c;
    box-shadow: 0rem 0rem 1rem rgba(255,255,255,0.25) inset;
}

.midatlantic .login-langselector-container {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

.midatlantic .login-langselector-container .language-button {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 50%;
    transition: opacity 0.5s;
    text-decoration: none !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0px 8px;
}

.midatlantic .login-langselector-container .language-button.active, .midatlantic .login-langselector-container .language-button:hover {
    opacity: 100%;
}