html {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    opacity: 100%;
    font-family: montserrat, sans-serif;
    font-size: 100%;
    color: black;
}

/* ubuntu-mono-regular - latin */
@font-face {
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/ubuntu-mono-v10-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
    url('/fonts/ubuntu-mono-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/ubuntu-mono-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/ubuntu-mono-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/ubuntu-mono-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/ubuntu-mono-v10-latin-regular.svg#UbuntuMono') format('svg'); /* Legacy iOS */
}

body#promo {
    background-image: url("/images/homepage-v2-clouds-2.jpg");
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
}

/* Global Loading Spinner */
#globalLoadingContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0,0,0,0.8);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 256;
}

#globalLoadingContainer.hidden {
    display: none;
}

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*----------- Date Picker ------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    /*
    border: 1px solid #15af0e;
    background: #15af0e;
    */
    border: 1px solid #ccc;
    background: #ccc;
    font-weight: normal;
    color: #fff;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #0c96fe;
    background: #0c96fe;
    font-weight: normal;
    color: #ffffff;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #0091ff;
    background: #0091ff;
    color: #fff;
}

.highlightDay > .ui-state-default {
    border: 1px solid #15af0e;
    background: #15af0e;
}

.blockDay > .ui-state-default {
    border: 1px solid #ccc;
    background: #ccc;
}

.highlightDay .ui-state-active, .blockDay .ui-state-active {
    border: 1px solid #0091ff;
    background: #0091ff;
    color: #fff;
}

h1 {
    font-size: 25px;
    padding: 0px;
    margin: 0px;

}

h1#headerTitle {
    position: fixed;
    z-index: 99;
    color: white;
    top: 58px;
    right: 225px;
    text-align: right;
}

h1#headerTitleSmall {
    position: fixed;
    z-index: 99;
    color: white;
    top: 12px;
    right: 190px;
    font-size: 22px;
    text-align: right;
}

h2 {
    font-size: 20px;
    padding: 10px 0px 0px 3px;
    margin: 0px;

}

table, th, td { table-layout: fixed; margin: 0px; background-color: white; vertical-align: center; font-family: montserrat; font-size: 14px; padding: 7px 7px; border-spacing: 0px;}
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
th { font-weight: bold; color: #FFFFFF; background-color: #000000; text-align: left; }
th.labelColumn { width:185px; }
td.bbrd { border-bottom: 1px #555555 SOLID; }
td.cbbrd { text-align: center; border-bottom: 1px #555555 SOLID; }
td.timeCell { font-family: "Ubuntu Mono"; font-size: 25px; text-align:center; width: 90px; }

table.editForm td { vertical-align: top; text-align: left; }
table.editForm td.nsmid { column-width: 160px; vertical-align: center; text-align: left; }
table.editForm th { vertical-align: top; background-color: white; font-weight: normal; color: black; text-align: right; }

.approve { color: white; padding: 14px; text-align: center; font-weight: bold; }
.toApprove { background-color: #ffffff; }
.willApprove { background-color: #15af0e; color: white; }
.wontApprove { background-color: #c90000; color: white; }
.mayApprove { background-color: #ff8d01; color: white; }
.costDisplay { font-size: 20px; font-weight: bold; background-color: white; color: black; }

textarea {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
}

#mainContent {
    padding: 180px 30px 30px 180px;
}

#mainContent.nomenu {
     padding: 180px 30px 30px 30px;
 }

#mainContent.nomenuSmall {
     padding: 50px 30px 30px 30px;
 }

#wrapper.noDivide {
    background: #82b8ee repeat-x left top;
}

#logobar {
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent ;
}

#loginbox {
    width: 550px;
    height: 330px;
    padding: 0;
    margin: 150px auto;
    font-size: 12px;
    border: 1px solid #4c90f7;
    background: #ffffff;
}

#logintitle {
    font-size: 18px;
    font-weight: bold;
    font-family: montserrat;
    color: #ffffff;
    margin: 22px 16px 22px 28px;
}

#logintitlebar {
    margin: 0 0 25px 0;
    padding: 0;
    background: #0091FF;
    border-bottom: 1px solid #0091FF;
    overflow: hidden;
}

div.loginForm {
    width: 80%;
    margin: 0 auto;
}

#loginbox div.loginFormRow {
    float: left;
    clear: left;
    width: 97%;
    margin: 0 0 0 0;
    padding: 0 1.5%;
}

#loginbox div.loginFormLabel {
    float: left;
    align: right;
    display: inline;
    width: 25%;
    padding: 0;
    margin: 0;
    border: none;
    line-height: 3.2;
}

#loginbox div.loginFormInput {
    float: left;
    display: inline;
    width: 72%;
    padding: 0 0 0 10px;
    margin: 0;
    border: none;
}

#loginbox p {
    margin: 0;
    padding: 0;
}

#loginbox p.toptext {
    margin: 0;
    padding: 10px;
    text-align: center;
}

#loginbox div.loginFormRow input.hang {
    margin: 0 13px 0 -26px;
}

#loginbox p.pindent {
    padding: 0 0 0 26px;
}

#loginbox div.loginFormButtonRow {
    clear: left;
    width: 97%;
    padding: 2px 0 10px 0;
    margin: 0;
    text-align: center;
}

#loginbox div.loginFormButtonRow  input {
    width: 200px; /* IE 7 input button fix */
    overflow: visible; /* IE7 input button fix */
    display: inline-block;
    vertical-align: bottom;
    padding: 15px 25px;
    border: 1px solid #ffffff;
    color: #FFFFFF;
    text-decoration: none;
    background: #0091FF;
    cursor: pointer;
    margin: 0;
    font-size: 12px;
    font-family: montserrat;
}

#loginbox div.loginFormButtonRow  input:hover {
    color: #ffffff;
    background: #0063AF;
}

#loginbox input.textbox {
    border: 1px solid #0091FF;
    padding: 10px 17px;
    margin: 7px 0;
    box-sizing: border-box;
}

#loginbox a {
    color: #0091FF;
    text-decoration: underline;
}

#loginbox a:hover {
    text-decoration: none;
    color: #6394c7;
}

#login {
    width: 450px;
    padding: 0;
    margin: 100px auto;
    border: 1px solid #60b5de;
    background: white;
    font-size: 0.8em;
}

#login form {
    width: 100%;
    margin: 0;
    padding: 20px;
}

#login div.formRow {
    float: left;
    clear: left;
    width: 100%;
    margin: 12px 0 0 0;
}

#login div.formRow label {
    float: left;
    width: 80px;
    padding: 3px 0;
    margin: 0 8px 0 8px;
    text-align: left;
}

#login p {
    margin: 0;
    padding: 0;
}

#login p.toptext {
    margin: 0;
    padding: 0 0 10px 0;
}

#login div.formButtonRow {
    clear: left;
    width: 100%;
    padding: 10px 0 10px 0;
    margin: 0;
    text-align: center;
}

#login div.formButtonRow  input {
    color: #004c81;
    background: #a6d2e3;
    border: 1px solid #60b5de;
    cursor: pointer;
    padding: 2px 5px;
    margin: 0;
}

#login div.formButtonRow  input:hover {
    color: #004c81;
    background: #63a4bd;
    border: 1px solid #60b5de;
    cursor: pointer;
    padding: 2px 5px;
    margin: 0;
}

#login input.textbox {
    border: 1px solid #60b5de;
}

#login a {
    color: black;
}

#login a:hover {
    color: #60b5de;
}

#search {
    float: left;
    display: inline;
    width: 100%;
    padding: 10px 0 0 10px;
    margin: 0;
    border: none;
}

#titleBar {
    position: fixed;
    z-index: 99;
    background-color: #0091ff;
    top: 0px;
    height: 150px;
    left: 0px;
    right: 0px;
}

#titleBarSmall {
    position: fixed;
    z-index: 99;
    background-color: #0091ff;
    top: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
}

#menuBar {
    position: fixed;
    z-index: 99;
    background-color: white;
    top: 150px;
    left: 0px;
	bottom: 0px;
    width: 150px;
    border-right: black solid 1px;
}

#menuBar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
	width: 100%;
	border-top: 2px solid #fff;
}

#menuBar li img {
	width: 50px;
	height: auto;
}

#menuBar li a {
    display:block;
    text-decoration: none;
    color: black;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

#menuBar li a:hover {
    background: #ebeef0;
}

#menuBar li a.selected {
    background:#0091ff;
	color: #fff;
}

/* Create two equal columns that floats next to each other */
.leftcol {
    float: left;
    width: 60%;
    padding: 10px;
}

.rightcol {
    float: left;
    width: 35%;
    padding: 10px;
}

.dsbbase {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px 0 5px 5px;
    margin: 10px 0px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dsbAircraft {
    !important;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.dsbAircraftReg {
    padding: 0 1rem;
}

.dsbinner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.strip {
    outline: 1px solid black;
}

.inboundHeader {
    border-top: orange solid 10px;
    border-bottom: orange solid 10px;
}

.outboundHeader {
    border-top: blue solid 10px;
    border-bottom: blue solid 10px;
}

.local {
    border-top: #ea7ac7 solid 10px;
    border-bottom: #ea7ae1 solid 10px;
}

.transit {
    border-top: #4CAF50 solid 10px;
    border-bottom: #4CAF50 solid 10px;
}

.runway {
    border-top: black solid 10px;
    border-bottom: black solid 10px;
    color: red;
}

.movement {
    border-top: #dddddd solid 10px;
    border-bottom: #dddddd solid 10px;
}

.dsbAircraft img.arrow {
    visibility: hidden;
    width: 80px;
    height: 20px;
}

.dsbAircraft img.arrow.down {
    padding-right: 4px;
}

.dsbActiveAircraft {
    height: 16px;
    width: 16px;
    vertical-align: text-top;
    visibility: hidden;
    background-color: #090;
    border-radius: 50%;
    display: inline-block;
}

.dsbSelectAircraft {
    display: none;
    color: red;
    font-weight: bolder;
}

.jconfirm-box  {
    width: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

a.highlight {
    background-color: #0091FF;
}

#menuBar li .menu-icon {
	display: block;
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0 auto 6px auto;
}

#menuBar li .menu-icon img {
	width: 100px;
	height: 50px;
	margin: 0 0 0 0;
}

#menuBar li .selected .menu-icon img {
	margin: 0 0 0 -100%;
}

#content {
    position: absolute;
    background-color: white;
    top: 130px;
    left: 100px;
    right: 0px;
    bottom: 0px;
}

#logo {
    left: 40px;
    top: 25px;
    width: 157px;
    height: 93px;
    position: relative;
}

#logoSmall {
    left: 20px;
    top: 0px;
    height: 50px;
    position: relative;
}

#popup {
    position: fixed;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%, 0);

    width: auto;
    height: auto;

    border: 5px solid #4c90f7;

    display: none;
    white-space: nowrap;
    padding: 10px;

    z-index: 128;
    box-shadow: 0 0 4px 2px rgba(0,0,0, 0.5);
}

#statusPopup {
    position: fixed;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%, 0);

    width: auto;
    height: auto;

    border: 5px solid #4c90f7;

    display: none;
    white-space: nowrap;
    padding: 10px;

    z-index: 129;
    box-shadow: 0 0 4px 2px rgba(0,0,0, 0.5);
}

.logoutButton {
    position: fixed;
    top: 50px;
    right: 50px;
    background-color: #FFFFFF; /* Green */
    border: none;
    color: #0091FF;
    padding: 15px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-family: montserrat;
    margin: 0px 20px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.logoutButtonSmall {
    position: fixed;
    top: 8px;
    right: 50px;
    background-color: #FFFFFF; /* Green */
    border: none;
    color: #0091FF;
    padding: 7px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    font-family: montserrat;
    margin: 0px 5px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.manageButton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0px 2px;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}

.formButton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 0px 2px;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}

.verifyButton {
    padding: 5px 20px;
}

.greyButton {
    background-color: #acacac;
}

.redButton {
    background-color: #bd0000;
}

.noHover {
    pointer-events: none;
}

.redButton:hover {
    background-color: #ee0000;
}

.greenButton {
    background-color: #15af0e;
}

.greenButton:hover {
    background-color: #0e7f0d;
}

.blueButton {
    background-color: #0091FF;
}

.blueButton:hover {
    background-color: #0063AF;
}

.orangeButton {
    background-color: #ff9b2d;
}

.orangeButton:hover {
    background-color: #ca7201;
}

.overlay-image {
	width: 100%;
	max-width: 1280px;
	height: auto;
	padding: 0;
	margin: 10px auto;
	position: relative;
	z-index: 0;
}

.camera-image {
	width: 100%;
	max-width: 1280px;
	height: auto;
	z-index: 1;
}

.height-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2;
}

.switch {
    position: absolute;
    display: block;
    width: 38px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0px;
    right: 0px;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Loading animation */
#loadingSpinner {
    z-index: 99999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.4);
    display: none;
}
#loadingSpinner table, #loadingSpinner th, #loadingSpinner td {
    table-layout: autp;
    margin: 0px;
    background: none;
    vertical-align: center;
    padding: 0;
}



/*------------- Menus ------------------*/

.topnav .navicon {
  display: none;
}

.topnav .naviconbar {
	display: none;
}

@media screen and (max-width: 1000px) {
    body {
        padding: 0;
        padding-top: 0;
    }

    body.menu {
        padding-left: 0;
    }
    
	.topnav .naviconbar {
		display: block;
		background: #0091ff;
		margin: 0;
		padding: 0 20px 10px 0;
		text-align: right;
	}

	.topnav .navicon {
	  display: inline-block;
	  cursor: pointer;
	  padding-left: 20px;
	}

	.bar1, .bar2, .bar3 {
	  width: 35px;
	  height: 5px;
	  background-color: #fff;
	  margin: 6px 0;
	  transition: 0.4s;
	}

	.topnav ul {display: none;}


	.topnav.visiblenav .navicon {
	  display: inline-block;
	  cursor: pointer;
	}

	.topnav.visiblenav .bar1 {
	  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
	  transform: rotate(-45deg) translate(-9px, 6px);
	}

	.topnav.visiblenav .bar2 {opacity: 0;}

	.topnav.visiblenav .bar3 {
	  -webkit-transform: rotate(45deg) translate(-8px, -8px);
	  transform: rotate(45deg) translate(-8px, -8px);
	}

    .topnav.visiblenav ul {display: block; position: relative;}

    #titleBar {
        position: relative;
        height: auto;
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        z-index:0;
    }

    #logo {
        left: 0;
        top: 0;
        width: auto;
        height: 60px;
        position: relative;
    }

    .logoutButton {
        position: relative;
        top: 0;
        right: 0;
        display: block;
        font-size: 14px;
        font-family: montserrat;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }

    h1#headerTitle {
        position: relative;
        z-index: 99;
        color: white;
        top: 0;
        padding: 16px 18px;
        right: 16px;
        text-align: right;
        color: black;
        font-size: 19px;
    }

    #menuBar {
        position: static;
        z-index: 99;
        background-color: white;
        width: 100%;
        border-right: none;
    }

    #menuBar ul {
        border-top: 2px solid #fff;
    }

    #menuBar li {
        display:block;
        margin: 0 0px;
        padding:0;
        text-align: left;
        border-bottom: 2px solid #c8cacc;
    }

    #menuBar li img {
        width: 36px;
    }

    #menuBar li a {
        display:block;
        text-decoration: none;
        color: black;
        width: 100%;
        text-align: left;
        vertical-align: middle;
    }

    #menuBar li .menu-icon {
        display: inline-block;
        width: 36px;
        height: 36px;
        overflow: hidden;
        margin: 0 15px 0 35%;
        vertical-align: middle;
    }

    #menuBar li .menu-icon img {
        width: 72px;
        height: 36px;
        margin: 0 0 0 0;
    }

    #mainContent {
        padding: 20px 30px 30px 30px;
    }

    #mainContent.nomenu {
        padding: 20px 30px 30px 30px;
    }

    #content {
        position: relative;
        top: 0;
        left: 0;
        right: 0px;
        bottom: 0px;
    }
}

@media screen and (max-width: 700px) {
	/* General Layout */
    body, td, th { font-size: 0.8em; }
    table, th, td { padding: 5px; }
    h1#headerTitle, h2 { padding:0; }
    #titleBar { padding: 10px; }
    .logoutButton { margin: 0 5px 0 0; }
    #mainContent.nomenu { padding: 10px; }
    
	/* General Forms */
    .manageButton { padding: 2px 10px; }
    td.spannedNote { text-align: left !important; }
    
	/* Request Form */
    .requestForm th { width: 120px; }
    .requestForm #mtow { max-width: 120px; }
    .requestForm #departfromicaoDiv, .requestForm #returntoicaoDiv { display: block !important; margin-top: 2px; }
    .requestForm input.textual, .requestForm textarea.textual { width: 172px; }
    .requestForm .formButton, .requestForm #SMSVerified { margin-top: 5px; }
    
	/* Edit Request / Status Form */
    .editForm th:first-child { white-space: nowrap; }
    .editForm td.approve {
        padding: 2px;
        vertical-align: middle !important;
    }
    .editForm td.limitedWidth {
        max-width: 160px;
        white-space: normal;
    }
    .editForm td.limitedWidth select {
        margin-bottom: 5px;
        width: 100%;
    }
}