﻿@font-face {
    font-family: Verdana;
}

* {
    box-sizing: border-box;
}

/* img drag n drop verhindern */
img {
    -webkit-user-drag: none !important;
    user-select: none !important;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: white;
    font: 13px/1.231 Verdana;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.hide-desktop {
    display: none;
}

.index-width {
    width: 750px;
}

.planerTable {
    width: 100px !important;
}

/* #region LAYOUT */

body #main {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.nav-menu {
    width: 80%;
    float: left;
}

.nav-mobile {
    display: none;
} 

#userMenu {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    font-size: 14px;
}

    #userMenu .logout {
        cursor: pointer;
    }

        #userMenu .logout:hover {
            color: darkgray;
        }

#keepAlive {
    position: absolute;
    top: 20px;
    right: 5px;
    padding: 5px;
}

/* Listen Icons */
.blank {
    background: url('/Images/tbblank.gif') no-repeat 0;
    height: 22px !important;
    width: 20px !important;
}

.current {
    background: url('/Images/tblink.gif') no-repeat 0;
    height: 22px !important;
    width: 20px !important;
}

.new {
    background: url('/Images/tbnew.gif') no-repeat 0;
    height: 22px !important;
    width: 20px !important;
}

/* #region LOGO */

.logo {
    margin: 0;
    float: left;
    background: url('/Images/flyingbulls_logo.png?x=1') no-repeat center center;
    height: 110px;
    width: 200px;
}

    .logo a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.logo-test {
    margin: 0;
    float: left;
    background: url('/Images/flyingbulls_logo_test.png?x=1') no-repeat center center;
    height: 110px;
    width: 200px;
}

    .logo-test a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

/* #endregion LOGO */

/* #region HEADER */

header {
    flex: 0 1 110px;
    max-height: 110px;
    min-height: 110px;
    background-color: white;
    border-bottom: 1px solid lightgrey;
}

    header ul {
        height: 110px;
        list-style-type: none;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        font-size: 0;
    }

        header ul li {
            height: 110px;
            line-height: 180px;
            display: inline-block;
            font-size: 16px;
        }

            header ul li .dropdown {
                height: 110px;
                user-select: none;
                cursor: pointer;
            }

                header ul li .dropdown .arrow-down {
                    display: none;
                }

                header ul li .dropdown:hover span {
                    background-color: #DA093F;
                    color: #FFF;
                }

                header ul li .dropdown:hover .content {
                    max-height: 500px;
                    transition: max-height 0.25s ease-in;
                    border-top: 2px solid #DA093F;
                    padding: 10px 16px;
                }

                header ul li .dropdown .content {
                    color: #000;
                    position: absolute;
                    max-height: 0;
                    overflow: hidden;
                    background-color: #F9F9F9;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    top: 109px;
                    z-index: 100;
                    width: 350px;
                    transition: max-height 0.15s ease-out;
                }

                    header ul li .dropdown .content:hover {
                        display: block;
                    }

                    header ul li .dropdown .content a {
                        position: relative;
                        padding: 0;
                        margin: 0;
                        background: none;
                        box-shadow: none;
                        border: none;
                        color: #000;
                        display: block;
                        text-align: center;
                        line-height: 15px;
                        padding: 10px;
                    }

                        header ul li .dropdown .content a:hover {
                            background-color: lightgray;
                        }

            header ul li a, header ul li span {
                font-size: 15px;
                color: #2D3E50;
                font-weight: bold;
                text-decoration: none;
                padding: 10px;
                padding-top: 90px;
                text-transform: uppercase;
                text-decoration: none;
                transition: background-color .2s ease-in-out;
            }

                header ul li a:hover {
                    background-color: #DA093F;
                    color: #FFF;
                }

/* #endregion HEADER */

/* #region CONTENT */

.nav-background {
    width: 100%;
    height: 88.2%;
    background-color: grey;
    display: none;
    position: absolute;
    left: 0;
    top: 110px;
    opacity: 0.6;
    z-index: 99;
}

#content {
    flex: 1 1 auto;
}

/* #endregion CONTENT */

/* #endregion LAYOUT */

/* #region VIEWS */

.icon-container {
    display: none
}

.fa-plus, .fa-minus {
    display: none;
}

#resInfoBox {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* #region LOGIN */

.login-container {
    padding-left: 17px;
    height: 100%;
    width: 100%;
}

    .login-container h2 {
        font-size: 1.5em;
    }

    .login-container input {
        width: 180px;
    }

div.username {
    width: 250px;
    margin-bottom: 15px;
}

    div.username span {
        font-size: 16px;
        font-weight: bold;
    }

div.password {
    width: 200px;
    margin-bottom: 15px;
}

    div.password span {
        font-size: 16px;
        font-weight: bold;
    }

div.error-text {
    font-size: 16px;
    color: #FF0000;
    margin-bottom: 15px;
}

/* #endregion LOGIN */

/* #region HOME */

div.home {
    padding-left: 17px;
}

/* #endregion HOME */

/* #region FLUGPLAN */

#calendar-bar {
    width: 100%;
    height: 32px;
    margin: 10px 0;
}

    #calendar-bar .wrapper {
        width: 100%;
        height: 32px;
        padding-left: 12px;
    }

        #calendar-bar .wrapper div {
            float: left;
            margin-right: 10px;
        }

            #calendar-bar .wrapper div a {
                display: inline-block;
                height: 100%;
                width: 100%;
            }

    #calendar-bar #prev-week {
        height: 32px;
        width: 32px;
        background: url('/Images/resultset_previous.png') no-repeat center center;
    }

    #calendar-bar #cw-text {
        font-weight: bold;
        font-size: 16px;
        line-height: 30px;
    }

    #calendar-bar #show-calendar {
        height: 32px;
        width: 32px;
        background: url('/Images/calendar32.png') no-repeat center center;
    }

    #calendar-bar #set-week {
        height: 32px;
        width: 32px;
        background: url('/Images/calendar_view_week.png') no-repeat center center;
    }

    #calendar-bar #set-today {
        height: 32px;
        width: 32px;
        background: url('/Images/calendar_view_day.png') no-repeat center center;
    }

    #calendar-bar #next-week {
        height: 32px;
        width: 32px;
        background: url('/Images/resultset_next.png') no-repeat center center;
    }

#flightplanner {
    padding-left: 20px;
}

.scroll {
    overflow: auto;
    max-width: 100vw;    
}

.scrollWP {
    overflow: auto;
    max-width: 100vw;
}

.partialLoad {
    height: inherit;
}

table .sticky {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 98;
}

#tooltip {
    display: none;
    width: auto;
    height: auto;
    position: absolute;
    color: #005F2F;
    background-color: #FFFFE7;
    border: 1px solid #003F1F;
    padding: 3px;
    font-size: 10px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 99;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 590px;
    position: relative;
}

.close {
    color: #FFF;
    float: right;
    font-size: 28px;
    font-weight: bold;
    user-select: none;
    position: absolute;
    top: -6px;
    right: 5px;
}

    .close:hover, .close:focus {
        color: #F0F0F0;
        text-decoration: none;
        cursor: pointer;
    }

.iframeKalender {
    padding: 5px 0 0 5px !important;
    display: none;
    position: absolute;
    border: 1px solid black;
    background-color: white;
    z-index: 99;
}

div#info {
    padding: 5px;
    margin: 5px;
}

    div#info.green {
        background-color: #00FF00;
        border: 2px solid #00D800;
    }

    div#info.red {
        background-color: #FF0000;
        border: 2px solid #D80000;
    }

.eventDiv {
    width: 95px !important;
}

.dienstDiv {
    width: 95px !important;
}

/* #endregion FLUGPLAN */

/* #region BORDBUCH */

#bordbuchTable {
    width: 670px !important;
}

.bordbuch-container {
    padding: 10px;
    height: auto;
    overflow: hidden;
}

#list-container {
    float: left;
    height: 100%;
    border-right: 5px solid #7F7F7F;
}

#tree-container {
    max-width: 0px;
    background-color: #FAFAFA;
    font: 13px/0.80 Verdana;
    float: left;
    height: 100%;
    transition: max-width .3s ease-in-out;
}

    #tree-container.open {
        max-width: 310px;
        border-right: 5px solid #7F7F7F;
        padding-left: 5px;
    }

#view-container {
    width: auto;
    overflow: hidden;
}

#open-tree {
    position: absolute;
    top: 7px;
    border: solid #FFF;
    border-width: 0px 4px 4px 0;
    display: inline-block;
    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transition: transform .2s;
}

    #open-tree.open {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin: 0;
    }

div.header {
    width: 100%;
    background-color: #DA093F;
    color: #FFF;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
}

    div.header span {
        padding-left: 25px;
    }

/* TREE STYLE */
#st {
    overflow: auto;
    height: 100%;
}

#iFrameBordbuch, #iFrameTechnikProtokoll {
    width: 100%;
    border: none;
}

/* #endregion BORDBUCH */

/* #region KALENDER */

td.mue {
    font-family: Geneva, Helvetica, Arial, sans-serif;
    font-size: 8pt;
    border: 1px solid black;
}

td.dienst {
    font-family: Geneva, Helvetica, Arial, sans-serif;
    font-size: 10pt;
    border: 1px solid black;
    min-width: 25px;
}

td.dhead {
    background-color: #ffcc88 !important;
    font-family: Geneva, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    border: 1px solid black;
}

#kalenderTable {
    border: 1px groove black;
    width: 1100px;
}

    #kalenderTable a:link {
        color: black;
        text-decoration: none;
    }

    #kalenderTable tr.calendar-row td:first-child {
        position: sticky;
        left: 0;
        background-color: #FFF;
    }

#calendar-legend-container {
    display: none;
}


/* #endregion KALENDER*/

/* #endregion VIEWS */

/* #region GLOBAL STYLES */

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

    #sidebar ul li {
        display: inline-block;
        font-size: 13px;
    }

.tabBtn {
    cursor: pointer;
    padding: 5px;
}

    .tabBtn.active {
        font-weight: bold;
        border-bottom: 3px solid #DA093F;
    }

    .tabBtn:hover {
        border-bottom: 3px solid #DA093F;
    }

.frame {
    left: 90px;
    border: 1px solid black;
}

.flugPlanCol {
    width: 144px;
}

.tagCol {
    width: 174px;
}

#iFrameReservierung {
    height: 880px !important;
}

#iFrameEvent {
    height: 850px !important;
}

#iFrameReservierung, #frameRes, #iFrameEvent {
    width: 580px !important;
    height: 750px
}

iframe {
    border: none !important;
}

#frameRes {
    border: 1px solid black;
}

#calendarBar {
    width: 1415px;
    margin-top: 25px;
    margin-bottom: 10px;
}

#scrollDivRegInfo {
    width: 555px;
}

.belegeven {
    background-color: #EFEFEF;
}

/* #endregion GLOBAL STYLES */

/* #region ICONS */

/*
    Icons PC Version
    SMALL => 16px
    MEDIUM => 32px
    LARGE => 64px
*/

.icon {
    display: inline-block;
}

    .icon.small {
        height: 16px !important;
        width: 16px !important;
    }

    .icon.medium {
        height: 32px !important;
        width: 32px !important;
    }

    .icon.large {
        height: 64px !important;
        width: 64px !important;
    }

.icon.small.cancel {
    background: url('../../Images/cancel.png') no-repeat;
}

.icon.medium.cancel {
    background: url('../../Images/cancel32.png') no-repeat;
}

.icon.small.printer {
    background: url('../../Images/printer.png') no-repeat;
}

.icon.medium.printer {
    background: url('../../Images/printer32.png') no-repeat;
}

.icon.small.email {
    background: url('../../Images/mail.png') no-repeat;
}

.icon.medium.email {
    background: url('../../Images/email32.png') no-repeat;
}

.icon.small.calendar {
    background: url('../../Images/calendar.png') no-repeat;
}

.icon.medium.calendar {
    background: url('../../Images/calendar32.png') no-repeat;
}

.icon.small.book {
    background: url('../../Images/book.png') no-repeat;
}

.icon.medium.book {
    background: url('../../Images/book32.png') no-repeat;
}

.icon.small.delete {
    background: url('../../Images/delete.png') no-repeat;
}

.icon.medium.delete {
    background: url('../../Images/delete32.png') no-repeat;
}

.icon.small.telefon {
    background: url('../../Images/telephone.png') no-repeat;
}

.icon.medium.telefon {
    background: url('../../Images/telephone32.png') no-repeat;
}

.icon.small.clip {
    background: url('../../Images/attach.png') no-repeat;
}

.icon.medium.clip {
    background: url('../../Images/clip32.png') no-repeat;
}
/* #endregion ICONS */