/*........................................................................................................
* COPYRIGHT OBS LOGISTICS LIMITED 2016
* SOUTHERN GATEWAY
* SPEKE BOULEVARD
* LIVERPOOL
* L24 9HZ
*.........................................................................................................
* System           : EPOD
*.........................................................................................................
* Module           : Browser Screens 
 *.........................................................................................................
* Program          : Site.css
*.........................................................................................................
* Author/          : R Egdell
* Date             : Unknown
*.........................................................................................................
* Used By          : Master Pages and login page
*.........................................................................................................
* Functionality    :
*   Styling for web application
*.........................................................................................................
*                  : History of Amendments :
*
*  Date       Name        Brief description                
*  --------   ----------  --------------------------------------------------------------------------------
*  21/11/2016 RE          338453 - Added styles for copyright, report buttons and validation fields.
*  11/07/2017 RE          343993 - Changed size of popup and colour of small detail fields in main screen.
*  08/01/2018 RE          348069 - Added style for breaks and for blocked bookings.
*  24/04/2018 RE          349461 - Added class to increase size of first column in the main cluster, 
                                   small popup class and background row color.
*  01/08/2018 RE          352206 - Remove rounded boxes. row color.
*  21/09/2018 RE          352072 - Various styling changes.
*  05/10/2018 PH          352076 - Added style for print arrival ticket button
*  10/10/2018 RE          352077 - Removed some unused styles.
*  16/11/2018 RE          354206 - Minor change for buttons.
*  21/11/2018 RE          354206 - added green class for successful messages.
*  07/12/2018 RE          354441 - added detail button and a new timepicker.
*  20/12/2018 RE          353500 - added view ticket button.
*  22/01/2019 RE          352072 - added floating style for unassigned panels.
*  18/07/2019 RE          358296 - added foreground text to status classes.
*  07/08/2019 RE          358296 - removed black border from detail line in main page. Changed background colour on hover to blue.
                                   Added background colour when hovering over main grid. Added booking detail into popup. Increased font size
                                   for text on booking blocks.
*  23/10/2019 RE          360834 - various changes for the maintenance screen.
*  23/10/2019 RE          370221 - added Departed Status.
*  20/02/2020 RE          370221 - changes to add outline for white boxes.
*  08/04/2020 RE          370795 - added arival and depart date.
*  12/05/2020 RE          372100 - added warnings in orange.
*/

.ajax__calendar_container {
    z-index: 990;
}

body {
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:hover 
{
    color: #1d60ff;
    text-decoration: none;
}


p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

.hidden {
    display: none;
}

.datapanel {
    border: 0px;
    position: relative;
    /* bottom: 0px; */
}

.datapanel_fixed {
    border: 0px;
    position: fixed;
    bottom: 2px;
    width: 97%;
    background-color: white;
    z-index: 998;
    border-radius: 2px;
    box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.81);
}

/*
.datapanel2 
{
    width: 800px;
    border-radius : 10px;
    padding: 10px;
	border : 2px solid #314375;
}
*/

.iframe
{
    border : 0px;
    width: 1121px; 
    height: 825px;
}

.red
{
    background-color: Red;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    /*margin: 20px auto 0px auto;*/
    border: none;
}

.header1
{
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 5%;
    background-color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.select1
{
    font: arial;
    font-size : large;
    font-weight: bolder;
    color: Black;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 3%;
    font-weight: bold;
    text-align: center;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.detailLabel {
 
    color: Black;
}

.detailLabel2
{
    font-size: 1.0em;
    /* font-weight: bolder;*/
    color: Black;
}

.summary {
    background-color: #CCC;
}

.largeText {
    font-size: 1.2em;
    color: #314375;
    /* color: #68B1ED; */
    padding: 3px;
}

.popupText1
{
    font-size: 1em;
    color: Black;
}

.popupText2
{
    font-size: 1em;
   color: #68B1ED; 
   width: 100%;
}

.popupText3
{
    font-size: 1em;
   color: #68B1ED; 
}

.popupTextBox
{
    font-size: 1em;
    width: 45%;
    color: #68B1ED; 
}

.popupTextBox2 {
    font-size: 1em;
    width: 55%;
    color: #68B1ED;
}
.popupTextBox3 {
    font-size: 1em;
    width: 35%;
    color: #68B1ED;
}


/*
html
{
    background-image:url('../App_Themes/forklift.jpg'); 
    background-image:opacity .50;
}
*/

div.popups
{
   width: 400px; 
   display: none;
   font-size: 1.2em;
   font-weight: bold;
   color: Black;
   border: 0.5px;
   border: solid;
   border-color: #314375;
   padding-left:10px;
   padding-top:10px;
   /*
   background :-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9eaf5), color-stop(1, #6366ab) );
   background :-moz-linear-gradient( center top, #e9eaf5 5%, #6366ab 100% );
   */   
   background-color  :#e9eaf5;
   border-radius: 5px;
}

div.smallPopup {
    font-size: 1.2em;
    font-weight: bold;
    color: Black;
    /* border: none;
    border: solid;
    border-color: #314375; */
    background-color: #FFFFFF;
}

div.hideSkiplink
{
    width:100%;
}

div.header
{
    width: 100%;
}


/* MISC  
----------------------------------------------------------*/

#displayData2
{
    height: 156px;
}

#displayData
{
    height: 280px;
    width: 400px; 
}

.largeFormfield
{
  width : 800px;
}

.largeTextBoxes
{
    width: 95%;
    resize: none;
}

.forms
{
    padding: 10px;
	border : 2px solid #314375;
	position: relative; 
    left: 0; 
    top: 0;
    border-radius: 4px;
}

.formsFull {
    padding: 10px;
    text-align: center;
}

.mapLogo
{
    border-radius : 10px;
    padding: 10px;
	border : 2px solid #314375;
    position: relative; 
    left: 0; 
    top: 0;
}

.mapdiv
{
    position: relative; 
    left: 0; 
    top: 0;
    width: 40%;
    height:90%;
    background-color: #ffffff;
}

.bg
{
    background-color: rgba(54, 54, 54, 0.5);
    height:100%;
    width:100%;
    position:absolute;
    /*
    opacity: 0.4;
    */
}


.loginBoxXXX {
    margin: 10% auto;
    -webkit-box-shadow: 6px 8px 30px rgba(0, 0, 0, 0.81);
    -moz-box-shadow: 6px 8px 30px rgba(0, 0, 0, 0.81);
    box-shadow: 6px 8px 30px rgba(0, 0, 0, 0.81);
    border: 2px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 400px;
    padding: 20px 20px 20px 20px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    background-color: #EEE;
}

.loginBox {
    margin: 5% auto;
    -webkit-box-shadow: 2px 6px 5px rgba(100, 100, 100, 0.81);
    -moz-box-shadow: 2px 6px 5px rgba(100, 100, 100, 0.81);
    box-shadow: 2px 6px 5px rgba(100, 100, 100, 0.81);
    box-shadow: 2px 6px 5px rgba(100, 100, 100, 0.81);
    border: 2px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: fit-content;
    display: table;
    padding: 20px 20px 20px 20px;
}

    .loginBox table {
        margin: 0 auto;
    }


.loginBox span {
    text-align: center;
}

    .loginBox table {
        margin: 0 auto;
        border-collapse: separate;
        border-spacing: 2px;
    }


    .loginBox td {
        padding: 0px;
    }



body.loginBody {
    height: 100%;
    background-color: #EEE;
}

.center {
    text-align: center;
}

.pinLogo {
   position: absolute;
   z-index :2;
   border: 0px;
}

.scrollingtext 
{
    width: 90%;
    position:absolute;
    white-space:nowrap;
    font-family:'Trebuchet MS',Arial;
    font-size:18px;
    font-weight:bold;
    color:#000000;
}
    
.headlabel
{
    font-size : 1.5em;
    padding-bottom: 0px;
    color: White;
    /*
    background-color: White;
    */
}

.headlab
{
    font-size : 1.5em;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    color: White;
    background-color: #314375;
}

.headlab2
{
    font-size : 1.5em;
    padding-left: 5px;
    padding-right: 60px;
    padding-bottom: 2px;
    color: White;
    background-color: #314375;
}

.headlab3 {
    font-size: 1.5em;
    color: White;
    background-color: #314375;
    padding: 0px 0px 0px 0px;
}

.headlab4 {
    font-size: 1.0em;
    font-weight: 100;
    color: black;
    background-color: White;
    padding: 0px 0px 0px 0px;
    border: none;
    margin: 0;
}

.bookingsTable {
    width: 100%;
    border: 2px solid #314375;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 5px;
    /* margin: 5px; */
    background-color: white;
}

.bookingsTableFloat {
    box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.81);
    z-index: 999;
    position: absolute;
    top: 10%;
    left: 15%;
    width: 70%;
    border-radius: 5px;
}

.unPlanBookingsTableFloat {
    box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.81);
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 15%;
    width: 70%;
    border-radius: 5px;
}

.locationsTableFloat {
    box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.81);
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 15%;
    width: 70%;
    border-radius: 5px;
}

td.buffer
{
    width: 20%;
}

td.smallBuffer
{
    width: 0px;
}

td.largeBuffer
{
    width: 200px;
}

.failureNotification
{
    color : Red;
    font-size : 1em;
    font : Arial;
}

.failureNotificationSmall
{
    color : Red;
    font-size : 0.8em;
    font-weight: lighter;
    font : Arial;
}

.successNotificationSmall {
    color: green;
    font-size: 0.8em;
    font-weight: lighter;
    font: Arial;
}

.warnNotificationSmall {
    color: orange;
    font-size: 0.8em;
    font-weight: lighter;
    font: Arial;
}

.smallTextLabels
{
    font-size : 8.5pt;
    font-weight: bold;
    color: Black;
}

.smallTextFields
{
    font-size : 8.5pt;
    font-weight: bold;
    color: #68B1ED;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.button
{
    width:10%;
}

.buttonClass 
{  
	-moz-box-shadow:inset 0px 1px 0px 0px #010005;
	-webkit-box-shadow:inset 0px 1px 0px 0px #010005;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #FFFFFF) );
	background:-moz-linear-gradient( center top, #FFFFFF 5%, #FFFFFF 100% );
	background-color:#FFFFFF;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #314375;
	display:inline-block;
	color:#0057a3;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #000003;
	width:100%;
}

.buttonClass:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9eaf5), color-stop(1, #6366ab) );
	background:-moz-linear-gradient( center top, #e9eaf5 5%, #6366ab 100% );
	background-color:#e9eaf5;
}

.buttonClass:active {
	position:relative;
	top:1px;
}

.diaryTable
{
    width: 100%;
    border-collapse:collapse;
    border-top:solid 1px;
    border-bottom:solid 1px;
    border-color:Black;
}

.theader1 {
    margin: 0px;
    height: 30px;
    width: 3%;
    background: #e9eaf5;
    text-align: center;
    font-weight: bold;
    font-size: 11pt;
    font-family: Tahoma;
    color: #010101;
    border-left: solid 1px;
    border-right: solid 1px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: #314375;
}

.theader
{
    margin: 0px;
    height: 30px;
    width: 2%;
    background: #e9eaf5;  
    text-align: center;
    font-weight: bold;
    font-size:8.5pt;   
    font-family:Tahoma;
    color:#010101;
    border-left:solid 1px;
    border-right:solid 1px;
    border-top:solid 1px;
    border-bottom:solid 1px;
    border-color:#314375;
}

.gridRow {
    margin: 0px;
    width: 2%;
    height: 100%;
    border-left: solid 1px;
    border-right: solid 1px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: #EBEBEB;
    border-collapse: collapse;
}

.gridRow > a {
    height: 26px;
}

.gridRow2
{
    margin: 0px;
    padding: 0px;
    background: white;
    width: 2%;
    height: 100%;    
    border-left:solid 1px;
    border-right:solid 1px;
    border-top:solid 1px;
    border-bottom:solid 1px;
    border-color:#EBEBEB;
    border-collapse:collapse;
    height: 24px;
}

.gridRow3
{
    margin: 0px;
    padding: 0px;
    background: white;
    width: 2%;
    height: 100%;    
    border-left:solid 1px;
    border-right:solid 1px;
    border-top:solid 1px;
    border-bottom:solid 1px;
    border-color:#EBEBEB;
    border-collapse:collapse;
    height: 24px;
}

.gridHeader {
    margin: 0px;
    padding: 15px 5px 15px 5px;
    background: #e9ecef;
    text-align: left;
    font-weight: bold;
    font-size: 1em;
    font-family: Tahoma;
    color: #010101;
    border-left: solid 1px;
    border-right: solid 1px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: #ddd;
}
    
.tbody
{
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-weight: bold;
    font-size:10pt;   
    font-family:Tahoma;
    color:#010101;
    height:100%;
}

.detailColumns {
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 8pt;
    font-family: Tahoma;
    color: #010101;
    height: 100%;
}

.disabled
{
    width:25%;
    background: #BBBBBB;
}

.disabledBreak
{
    width:25%;
    background: #BBBBBB;
}

.zero {
    width: 0%;
}
.twentyfive
{
    width:22%;
}
.fifty
{
    width:47%;
}
.seventyfive
{
    width :72%;
}
.hundred {
    width: 97%;
}

.statusDeparted, .white {
    height: 100%;
    background: #FFFFFF;
    color: black;
    border: 1px solid black;
}
.statusExpected1, .amber {
    height: 100%;
    background: #ffbe00;
    color: blue;
    border: 1px solid #ffbe00;
}
.statusExpected, .green {
    height: 100%;
    background: #66ff66;
    color: black;
    border: 1px solid #66ff66;
}
.statusLate, .red {
    /*background : linear-gradient(to right, red 60%, yellow 40%); */
    background: Red;
    height: 100%;
    color: black;
    border: 1px solid Red;
}
.statusProcessed, .black {
    background: black;
    height: 100%;
    color: white;
    border: 1px solid black;
}
.statusBlocked, .grey {
    background: #BBBBBB;
    height: 100%;
    color: black;
    border: 1px solid #BBBBBB;
}
.statusArrived, .blue {
    background: #0000FF;
    height: 100%;
    color: white;
    border: 1px solid #0000FF;
}

.nogaps
{
    border: none;
}

#textbox1 {
    position: absolute;
    left: -9999px;
    width: 0;
}

.hidden 
{
    visibility: hidden;
}

.visible 
{
    visibility: visible;
}

.displaynone
{
    display: none;
}

.CustomValidatorCalloutStyle div, .CustomValidatorCalloutStyle td
{
    border: solid 1px #F5B800;
    background-color: #FFCC33;
    color: Red;
}

.copyright
{
list-style-type: none;
}

input[type="button"][value="Run Report"], input[type="submit"][value="Run Report"],input[type="button"][value="Landing Report"], input[type="submit"][value="Landing Report"] { 
    background-image: url(../App_Themes/report.png); background-repeat: no-repeat; background-position: left;padding-left: 25px; height: 30px; background-size: 20px; border: none; background-color: Transparent; cursor:pointer; overflow: hidden; 
}

input[type="button"][value="View Unassigned"], input[type="submit"][value="View Unassigned"], input[type="button"][value="..."], input[type="submit"][value="..."], input[type="button"][value="Find"], input[type="button"][value="Search"], input[type="submit"][value="Find"], input[type="submit"][value="Search"] {
    background-image: url(../App_Themes/find.png);
}

input[type="button"][class*="loginBtn"], input[type="submit"][class*="loginBtn"] {
    background-image: url(../App_Themes/login.png);
}

input.edit {
    background-image: url(../App_Themes/edit.png);
    color: transparent;
}

input[type="checkbox"] {
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
}

.colorRowBackground {
    height: 100%;
    background: rgba(232, 240, 254, 1.0);
    background-color: rgba(232, 240, 254, 1.0);
    width: 100%;
}

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

.Left {
    float: left;
    margin-left: 10px;
}

.left {
    float: left;
}

.alignRight {
    text-align: right;
}



a.helpicon {
    background-image: url(../App_Themes/help.png);
    background-repeat: no-repeat;
    background-position: left;
    padding: 5px 2em 5px 5px !important;
    height: 35px;
    background-size: 20px;
    border: none;
    background-color: Transparent;
    cursor: pointer;
    overflow: hidden;
    /* 17/11/2017 RE         346835 - START */
    text-decoration: none;
    /* 17/11/2017 RE         346835 - END */
}

.copyright {
    list-style-type: none;
}

.buttonbar {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    text-align: center;
}

input[type="button"], input[type="submit"] {
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 25px;
    height: 30px;
    background-size: 20px;
    border: none;
    background-color: Transparent;
    cursor: pointer;
    overflow: hidden;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

input[type="button"]:hover, input[type="submit"]:hover {
    text-decoration: underline;
}

input[type="button"][value="Add"], input[type="button"][value=" Add "], input[type="submit"][value="Add"] {
    background-image: url(../App_Themes/new.png);
}

input[type="button"][value="Select"], input[type="submit"][value="Select"] {
    background-image: url(../App_Themes/select.png);
}

input[type="button"][value="Cancel"], input[type="submit"][value="Cancel"], input[type="button"][value="Remove"], input[type="submit"][value="Remove"], input[type="button"][value="Close"], input[type="submit"][value="Close"] {
    background-image: url(../App_Themes/close.png);
}

input[type="button"][value^="Save"], input[type="submit"][value^="Save"], input[type="button"][value="Confirm"], input[type="submit"][value="Confirm"] {
    background-image: url(../App_Themes/save.png);
}

input[type="button"][value="Exit"], input[type="submit"][value="Exit"] {
    background-image: url(../App_Themes/back.png);
}

input[type="button"][value="Log Out"], input[type="submit"][value="Log Out"] {
    background-image: url(../App_Themes/logoutW.png);
    color: white;
}

input[type="button"][value="Delete"], input[type="submit"][value="Delete"] {
    background-image: url(../App_Themes/delete.png);
}

input[type="button"][value="Send Email"], input[type="submit"][value="Send Email"] {
    background-image: url(../App_Themes/mail.png);
}

input[type="button"][value="Move"], input[type="submit"][value="Move"] {
    background-image: url(../App_Themes/import.png);
}

input[type="button"][value="Clear"], input[type="submit"][value="Clear"], input[type="submit"][value="Reset"] {
    background-image: url(../App_Themes/clear.png);
}

input[type="button"][value="Refresh"], input[type="submit"][value="Refresh"], input[type="button"][value="Repeat"], input[type="submit"][value="Repeat"] {
    background-image: url(../App_Themes/reprocess.png);
}

input[type="button"][value="View Details"], input[type="submit"][value="View Details"] {
    background-image: url(../App_Themes/details.png);
}

input[type="text"], input[type="password"], textarea {
  
    padding: 0 0 0 8px;
    border: 1px solid #aaa;
    border-radius: 2px;
    background-color: #fff;
    color: #444;
    text-decoration: none;
    line-height: 24px;
}

input[type="text"]:disabled, input[type="password"]:disabled, textarea:disabled {
        background: #CCC;
        background-clip: padding-box;
        box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0,0,0,.1);
        color: #444;
}

input[type="text"], input[type="password"] {
    height: 25px;
    white-space: nowrap;
}

.drag {
    cursor: move;
}

.ht {
    height: 20px;
}

div.UpdateProgressStyle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    margin: 0;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 99999999999;
    visibility: hidden;
}

div.UpdateProgressStyle > img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px;
        width: 80px;
}


/* Modal Popup generic classes */
div.modalBack {
    display: block;
    background-color: rgba(200,200,200,0.5);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

div.modalPopup {
    background-color: white;
    position: fixed;
    z-index: 100001;
    padding-bottom: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    top: 30%;
    left: 30%;
    border: solid #314375 1px;
    box-shadow: 2px 2px 2px rgb(0,0,0,0.8);
}

div.modalPopupBar {
    background-color: #314375;
    color: #ffffff;
    cursor: move;
    font-weight: bold;
    font-size: 12px;
    padding: 2px 1em 2px 1em;
    text-align: center;
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

div.modalPopupContent {
    padding: 20px;
    padding-top: 10px;
    min-width: 400px;
}

input[type="button"][value="Print Ticket"], input[type="submit"][value="Print Ticket"], input[type="button"][value="View Ticket"], input[type="submit"][value="View Ticket"] {
    background-image: url(../App_Themes/report.png);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 25px;
    height: 30px;
    background-size: 20px;
    border: none;
    background-color: Transparent;
    cursor: pointer;
    overflow: hidden;
}


/* My additions */

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.bg-primary {
    background-color: #2780E3 !important;
}

.navbar-expand-md {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.navbar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.navbar-dark .navbar-brand {
    color: #fff;
}

.navbar-brand {
    display: inline-block;
    padding-top: 0.32421875rem;
    padding-bottom: 0.32421875rem;
    margin-right: 1rem;
    font-size: 1.171875rem;
    line-height: inherit;
    white-space: nowrap;
}

.navbar-expand-md .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

a {
    color: #2780E3;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.d-inline-block {
    display: inline-block !important;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.menu-icon-container {
    width: 30px;
    height: 26px;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.position-relative {
    position: relative !important;
}

.d-inline-block {
    display: inline-block !important;
}

/**, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/

.menu-icon {
    width: 30px;
    height: 25px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer {
    text-align: center;
    width: 100%;
    z-index: 9;
}

.loginFooter {
    position: fixed;
    bottom: 0;
}


.bg-light {
    background-color: #f8f9fa !important;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

.footer-table {
    width: 100%;
}

.footer-copyright {
    width: 75%;
    text-align: left;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.footer-version {
    width: 25%;
    text-align: right;
}

@keyframes spinRight {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-45deg);
    }

    100% {
        transform: rotate(1080deg);
    }
}

.spinRight {
    animation: spinRight 2s ease-in-out;
}

.chosen-results .no-results span {
    color: #222;
    font-weight: bold;
}

.chosen-select {
    min-width: 150px;
}

.logonImage {
    width: 80%;
    vertical-align: middle;
}

.ajax__calendar {
    background-color: white;
    z-index: 2;
}


.datapanel_float {
    position: absolute;
    top: 15%;
    background-color: white;
    left: 15%;
    z-index: 10000;
    width: 70%;
    box-shadow: rgba(0, 0, 0, 0.81) 6px 8px 10px;
}

.bkwhite {
    background-color: white;
}

.datapanel .panelClose {
    float: right;
    z-index: 9999999;
}

.datapanel .panelClose input {
    width: 20px;
}

.draggable h2.headlab {
    cursor: move;
    margin: 0;
    text-align: center;
    height: 30px;
    vertical-align: middle;
}

.ui-timepicker-input {
    z-index: 100001 !important;
}

.ui-timepicker-wrapper {
    z-index: 100001 !important;
}

.alternate {
    background-color: #e1e1e1;
}

.tabpanel {
    border-top-left-radius: 0px;
    border: 1px solid #DDD;
}

.ajax__tab_obs .ajax__tab_header {
    font-family: Calibri, "Helvetica Neue", Arial, Sans-Serif;
    font-size: 16px;
    font-weight: normal;
    display: block;
}

.ajax__tab_obs .ajax__tab_header .ajax__tab_outer {
        border-color: #222;
        color: #222;
        padding-left: 10px;
        margin-right: 3px;
        border: solid 1px #d7d7d7;
        background-color: lightgray;
}

.ajax__tab_obs .ajax__tab_header .ajax__tab_inner {
        border-color: #666;
        color: #666;
        padding: 3px 10px 2px 0px;
}

.ajax__tab_obs .ajax__tab_hover .ajax__tab_outer {
    background-color: #f0f0f0;
}

.ajax__tab_obs .ajax__tab_hover .ajax__tab_inner {
    color: #fff;
}

.ajax__tab_obs .ajax__tab_active .ajax__tab_outer {
    border-bottom-color: #ffffff;
    background-color: white;
    border-top: solid #42fe04 3px;
    border-radius: 3px;
}

.ajax__tab_obs .ajax__tab_active .ajax__tab_inner {
    color: #000;
    border-color: #333;
}

.ajax__tab_obs .ajax__tab_body {
    font-family: verdana,tahoma,helvetica;
    font-size: 10pt;
    background-color: #fff;
    border: solid 1px #d7d7d7;
    padding: 8px;
}

.ajax__subtab_obs .ajax__tab_body {
    border-top: solid 1px #d7d7d7;
}

.ajax__tab_obs .ajax__tab_tab {
    outline: none;
}

.ajax__tab_obs .ajax__tab_disabled {
    color: grey;
    font-style: italic;
    cursor: default;
}

.LayoutAndData, .Layout {
    margin: 0 auto;
}

.Layout {
    margin: 0 auto;
}

.LayoutAndData tbody tr:nth-of-type(odd) td {
    background-color: rgba(0,0,0,0.05);
}

.LayoutAndData tbody tr td {
    padding: 5px;
    text-align: left;
    font-weight: normal;
}

.Layout tbody tr td {
    text-align: left;
}

.LayoutAndData tbody tr td:last-child {
    border: 0;
    background-color: #fff
}