﻿/*
    imports
*/

@import url(Shared.css);

/*
    base elements
*/

body {
    background: transparent url(../images/css/ag_background.jpg) no-repeat fixed center bottom;
    background-size: cover;
}

h3 {
    font-size: 18px;
}

input.textbox,
select,
textarea {
    background-color: #0f4f6f;
    border: 1px solid #0f4f6f;
    color: #fff;
    /*font-family: "Myriad Pro", "Segoe UI", sans-serif;*/
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
}
input.textbox::placeholder {
    color: #fff;
    /*font-family: "Myriad Pro", "Segoe UI", sans-serif;*/
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
}

/*
    pods
*/

.pod .pod-header .pod-header-center,
.pod .pod-header .pod-header-left,
.pod .pod-header .pod-header-right {
    background-color: #e84893;
}

.pod .pod-top .pod-top-center,
.pod .pod-top .pod-top-left,
.pod .pod-top .pod-top-right,
.pod .pod-middle .pod-middle-left,
.pod .pod-middle .pod-middle-right,
.pod .pod-bottom .pod-bottom-center,
.pod .pod-bottom .pod-bottom-left,
.pod .pod-bottom .pod-bottom-right {
    background-color: #fff;
}

.pod .pod-header .pod-header-center {
    font-family: "Roboto Slab";
    font-size: 18px;
    font-weight: 700;
}

.pod .pod-header .pod-header-center a {
    border-radius: 50%;
}

#toolTip {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.25);
    font-size: 12px;
}

.item .item-middle {
    background-color: #DDE9F0 !important;
}

/*
    calendar
*/

.myCalendar table tr td {
    background-color: #EEF4F8 !important;
    border: 0 none !important;
    color: #00425C !important;
}
.myCalendar table tr td.event {
    background-color: #DDE9F0 !important;
    color: #00425C !important;
}
.myCalendar table tr td.selected,
.myCalendar table tr.dayHeading td {
    background-color: #00425C !important;
    color: #fff !important;
}

/*
    header
*/

#header {
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, 0.25);
    overflow: visible;
}

    #header .logo {
        background-image: url(../images/logos/logo.png);
        bottom: auto;
        height: 100%;
        margin: -16px 0 0;
        max-height: 65px;
        transform: translateY(-50%);
        top: 50%;
    }

    #header.outerWrap .mainNavigation li {
        margin-top: inherit;
    }

    #mobileNavigation {
        background-color: #004964;
    }

        #mobileNavigation .mainNavigation li a .icon {
            border-radius: 50%;        
        }

        #mobileNavigation .mainNavigation li a .count,
        #mobileNavigation .mainNavigation li a .unreadCount.count {
            background-color: #e84893;
        }

    /*.loggedOut #header {
        background-color: transparent !important;
        box-shadow: none !important;
        height: 95px !important;
        margin-bottom: -95px;
        position: static !important;
    }

    .loggedOut #header .col {
        width: 100%;
    }

    .loggedOut #header .logo {
        background-image: url(../images/logos/logo-white.png);
        background-position: center center;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
    }

        .loggedOut #main {
            padding-top: 0;
        }*/

/*
    quick search
*/

#QuickSearchWrapper {
    bottom: auto;
    left: auto;
    padding: 0 42px 0 0;
    position: absolute;
    right: 16px;
    top: 28px;
}

    #QuickSearch {
        display: inline-block;
    }

    #QuickSearchWrapper input {
        display: none;
    }
    #QuickSearchWrapper input.textbox {
        display: inline-block;
    }
    #QuickSearchWrapper a.iconButton {
        display: inline-block;
        height: 34px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }

/*
    main navigation
*/

.container .mainNavigation {
    background-color: #004964;
    bottom: auto;
    height: auto;
    left: 16px;
    line-height: 1;
    position: absolute;
    right: 16px;
    top: 100%;
    transition: transform 0.25s;
    transform: translate(0, -50%);
}
.shrunk .container .mainNavigation {
    transform: translate(0, 0);
}

.container .mainNavigation li {
    background-color: #004964;
    margin: 0 0 0 -3px;
    padding: 0;
    position: relative;
    width: auto;
}
    .container .mainNavigation li:after {
        background-color: rgba(0, 0, 0, 0.25);
        bottom: 15px;
        content: "";
        left: auto;
        position: absolute;
        right: 0;
        top: 15px;
        width: 1px;
    }

    .container  .mainNavigation li a {
        height: 64px;
        width: 96px;
    }

.noTouchEvents .container .mainNavigation li a:hover {
    background-color: #11738E;
}

.container .mainNavigation li a .icon {
    background-color: transparent !important;
    border: 0 none;
    margin-top: 10px;
}

.container .mainNavigation li a .count {
    background-color: #e84893;
    border-radius: 50%;
    bottom: 4px;
    color: #fff;
    font-size: 12px;
    right: 16px;
}

    .container .mainNavigation li a .count.primary {
        background-color: #e84893;
        color: #fff;
    }
    .container .mainNavigation li a .count.secondary {
        background-color: #212121;
        color: #fff;
    }

    .container .mainNavigation li a .count.unreadCount {
        left: 16px;
        bottom: 4px;
    }
    .container .mainNavigation li a .count.pendingCount {
        right: 16px;
        bottom: 4px;
    }
    .container .mainNavigation li a .count.proxyUnreadCount {
        left: 16px;
        top: 4px;
    }
    .container .mainNavigation li a .count.proxyPendingCount {
        right: 16px;
        top: 4px;
    }


/*
    main
*/

#main {
    background: transparent none;
    padding-top: 64px;
}

/*
    footer
*/

#footer {
    background-color: #004964;
    color: #fff;
    font-size: 14px;
}
    #footer .container .colRow {
        border: 0 none;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    #footer h3 {
        margin: 0 0 24px;
        padding: 0;
    }

    #footer p {
        margin: 16px 0 0;
    }

    #footer img {
        margin-top: 10px;
    }

    #footer a,
    #footer h3 {
        color: #fff;
    }

    #footer .col12:first-child {
        border-top: 1px solid rgba(153,153,153,0.15);
        margin-top: 16px;
        padding-top: 16px;
    }

    .desktopLink {
        display: inline-block;
        margin: 16px 0 0;
        padding: 0;
        text-align: left;
    }

/*
    administration panel
*/

.administratorPanel {
    background-color: #333;
    border: 0 none;
}

.administratorPanel .content {
    background-color: #333;
    border: 0 none;
    color: #fff;
    right: 0;
}

    .administratorPanel .content a {
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.administratorPanel a.iconButton {
    background-color: #333;
    background-position: 1px 1px !important;
    border: 0 none;
    border-radius: 0;
}
.noTouchEvents .administratorPanel a.iconButton:hover {
    background-color: #e84893;
    background-position: 1px 1px !important;
}

/*
    custom responsive
*/

@media (max-width: 1023px) {

    #header {
        background-color: transparent !important;
        box-shadow: none !important;
        height: 95px !important;
        margin-bottom: -95px;
        overflow: hidden !important;
        position: static !important;
    }

    #header.shrunk {
        background-color: #fff !important;
        height: 75px !important;
        position: fixed !important;
    }

    #mobileNavigation {
        top: 95px !important;
    }

    .shrunk #mobileNavigation {
        top: 75px !important;
    }

    #header .logo {
        background-image: url(../images/logos/logo-white.png);
        background-position: left center;
        margin: 0;
    }

    #header.shrunk .logo {
        background-image: url(../images/logos/logo.png);
        max-height: 60px;
    }

    .container .mainNavigation {
        display: none;
    }

    #header.shrunk .mobileNavigationToggle i.navIcon {
        color: #e84893 !important;
    }

    #main {
        margin-top: 95px !important;
        padding-top: 0;
    }
}

@media (max-width: 767px) {

    #footer .col {
        border-top: 1px solid rgba(153,153,153,0.15);
        margin-top: 16px;
        padding-top: 16px;
    }
    #footer .col:not(.col12):first-child {
        border-top: 0 none;
        margin-top: 0;
        padding-top: 0;
    }
}

/* #region Navigation Bar */

.navigationBar {
    border-top: 4px solid #e84893;
    background-color: #004964;
}

    .navigationBar a:hover {
        background-color: #11738E !important;
    }

/* #endregion */

.timetable table td.tt_day a.lunch {
    background-color: #f24892 !important;
}