body {
	background-color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
    overflow-y:auto;
}

/* variable settings */

@media (max-width: 480px) {
    body {
        font-size:8px !important;
    }

    .btn {
        font-size:8px !important;
    }

    h1 {
        font-size:12px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    body {
        font-size:10px !important;
    }

    .btn {
        font-size:10px !important;
    }

    h1 {
        font-size:20px !important;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    body {
        font-size:12px !important;
    }

    .btn {
        font-size:12px !important;
    }

    h1 {
        font-size:28px !important;
    }
}

@media (min-width: 980px) {
    body {
        font-size:14px !important;
    }

    .btn {
        font-size:14px !important;
    }

    h1 {
        font-size:36px !important;
    }
}


/*
#backDiv {
    margin-top:5px;
}
*/
.redText {
    color:red !important;
}

.add {
	background-color:#9bd683 !important;
    color:#FFFFFF !important;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.addExtra {
    background-color: #5da55c !important;
    color: #FFFFFF !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.undelete {
    background-color: #91cc78 !important;
    color: #FFFFFF !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

span.add {
    max-width:25px;
    padding:3px;
}

span.add a {
    text-decoration:none;
    color:#ffffff;
}

span.add a:hover {
    text-decoration:none;
    color:#ffffff;
}

.table-hover tbody tr:hover th.add {
    background-color: #62bd3c;
}

/* next line allows the span to be coloured too */
.table-hover tbody tr:hover th .add {
    background-color: #62bd3c;
}

.psswrd {
	background-color:#98c6ff;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.exButton1 {
	background-color:#b799cd;
    color:white;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.exButton1A {
    background-color: #84669a;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.perms,
.exButton2 {
    background-color: #f1c066;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.edit {
	background-color:#98c6dd;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.view {
	background-color:#ff9933 !important;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.custedit {
	background-color:#98c6dd;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

/*ensures header not filled in to match*/
td.subbutton {
	background-color:#ff9933;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
}

.table-hover tbody tr:hover td.edit {
    background-color: #4f9dc4;
}

/* next line allows the span to be coloured too */
.table-hover tbody tr:hover td .edit {
    background-color: #4f9dc4;
}

.delete {
    background-color: #d98989 !important;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.delete_inactive {
	background-color:#dddddd;
    color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid white;
}

.table-hover tbody tr:hover td.delete {
    background-color: #bf4141;
}

/* next line allows the span to be coloured too */
.table-hover tbody tr:hover td .delete {
    background-color: #bf4141;
}

#pageTitle,
.secondaryTitle {
    margin: -20px -20px 10px -20px;
    padding: 10px;
}

#pageTitle {
    background-color: #f9f9f9;
}

.secondaryTitle {
    margin-top: 15px !important;
    background-color: #f9f9f9 !important;
}

#pageTitle h4,
.secondaryTitle h4 {
    font-weight: bold;
    display: inline-block;
}

/* The container <div> - needed to position the dropdown content */
.userDetails {
    float: right;
    position: relative;
    display: inline-block;
    min-width:200px;
}

    /* Dropdown Button */
.userDetailsButton {
    background-color: transparent;
    border: none;
    color: #434343;
    font-size: large;
    cursor: pointer;
    min-width: 200px;
}

    .userDetailsButton .fa-user-circle:before {
        color: #434343;
        font-size: xx-large;
        background-image: linear-gradient(#fff,#fff);
        background-repeat: no-repeat;
        background-size: 50% 75%;
        background-position: center;
    }

    /* Dropdown Content (Hidden by Default) */
    .userDetailsDropdown {
        display: none;
        position: absolute;
        background-color: #e3e3e3;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    /* Links inside the dropdown */
    .userDetailsDropdown a {
        color: #434343;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color of dropdown links on hover */
        .userDetailsDropdown a:hover {
            background-color: #b3b3b3;
            color:white;
            font-weight:bold;
        }

    /* Show the dropdown menu on hover */
    .userDetails:hover .userDetailsDropdown {
        display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .userDetails:hover .userDetailsButton {
        background-color: #868686;
        color: white;
    }


.prePage {
    padding:10px;
    background:#ffffff;

    border-top-style:solid;
    border-top-width:5px;
    border-top-color: #CCCCCC;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    
    border-bottom-style:solid;
    border-bottom-width:0px;
    border-bottom-color: #CCCCCC;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;

    margin-bottom:5px;
    overflow: auto;
}

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.color-ok {
    color:#009900;
}

.color-notok {
    color:#990000;
}

.blockHead {
	border-radius: 13px 13px 0px 0px;
	padding-left:0px;
	text-align:center;
	font-weight:bold;
	background:rgba(125,125,125,1);
	color:rgba(255,255,255,1);
}
/*
.statusKey {
    padding:10px;
    background:#ffffff;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    border-top-style:solid;
    border-top-width:5px;
    border-top-color: #CCCCCC;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    
    border-bottom-style:solid;
    border-bottom-width:0px;
    border-bottom-color: #CCCCCC;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;

    margin-bottom:5px;
}

.statusKey .status {
    padding-right:10px;
    white-space:nowrap;
}
*/

/*if no border you need this next bit*/
#aedDataTable thead th,
#aedDataTable2 thead th {
    border-top: 0px !important;
}

#aedDataTable th,
#aedDataTable2 th {
    background-color: #b7b7b7;
}


.dataTables_length {
    float: right !important;
}
.dataTables_filter {
    float: left !important;
}

.dataTables_filter input {
    width: 400px;
}

#aedDataTable thead th.view,
#aedDataTable tfoot th.view {
    cursor: default;
    background-color: transparent;
}

#aedDataTable thead th.delete,
#aedDataTable tfoot th.delete,
#aedDataTable2 thead th.delete,
#aedDataTable2 tfoot th.delete {
    cursor: default;
    background-color: transparent;
}

#aedDataTable input,
#aedDataTable2 input {
    width: 100%;
}

#aedDataTable tbody tr.warning
 {
    background-color: #f7d2d2 !important;
}

#aedDataTable tbody tr.warning .sorting_1 {
    background-color: #edc5c5 !important;
}

div.dataTables_showAct {
    float: right;
    margin-right: 25px;
}

.override.even {
    background-color: #ffeeee !important;
}

.override.odd {
    background-color: #f9e8e8 !important;
}

.paginate_button {
    border: 1px solid #006699;
    color: #006699;
    background-color: #f2f2f2;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    text-decoration:none;
    cursor:pointer;
}
.paginate_button:hover,
.paginate_button.current {
    border: 1px solid #006699;
    color: #fff;
    background-color: #006699;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    text-decoration: none;
}

.paginate_button.current {
    cursor:default;
}

th.edit {
    background-color: #9bd683 !important;
}

.caps {
	text-transform:uppercase;
}/* prevent this affecting placeholders */
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

.moreInfo {
    color: #0000DD;
    cursor:pointer;
}

#driverName {
    width: 250px;
}

#transportReg {
    width: 250px;
}

.inputPage .row,
.inputPopup .row {
    padding-bottom: 5px;
}

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

.inputPage .rec {
    font-style: italic;
}

.inputPage input[type="text"],
.inputPage input[type="email"],
.inputPage textarea,
.inputPage select {
    width: 300px;
}

.reqd {
    font-weight: bold;
}

#ajax_page {
    float:right;
}

.section{
    background-color:#FFFFFF;
    min-height:100%; 

    border-top-style:solid;
    border-top-width:5px;
    border-top-color: #CCCCCC;
    border-top-left-radius:15px;
    border-top-right-radius:15px;

    border-bottom-style:solid;
    border-bottom-width:5px;
    border-bottom-color: #CCCCCC;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}

.section-title {
    padding:10px;
    font-weight:bold;
	font-size:large;
	height:30px;
	vertical-align: middle;
}

.section-body {
    padding:10px 10px 10px 20px;
}

.popupBack,
.loginOuter {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 50;
    background-color: rgba(80,80,80,.85);
}

.fupopupBack {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 150;
    background-color: rgba(80,80,80,.85);
}

.loginMiddle {
    display: table-cell;
    vertical-align: middle;
}

.loginInner {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    border:1px solid black;
}

.loginbox-title {
    background-color: #868686;
    color: white;
    text-align: center;
    padding: 10px 5px 0px 5px;
    max-width:398px;
}

.loginbox-title img {
    max-width:100% !important;
}


.engageSpace {
    margin: 3px 5px 0px 5px;
    text-align: justify;
}

.engageSpace:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.loginbox-body {
    padding-top: 25px;
    padding: 10px;
    background-color: #e0e0e0;
}

.loginbox-body input {
    background-color: #e3e3e3;
}

.loginbox-body .input-group {
    margin-bottom: 25px;
}

.loginbox-body .input-group .input-group-prepend {
    background-color: #868686;
    padding: 8px 8px 5px 8px;
    color: white;
    font-size: large;
}

.loginbox-body  .show-hide-password a {
    left: 310px;
    position: absolute;
    top: 8px;
    z-index: 5;
    cursor: pointer;
    color: darkgray;
}

.loginbox-body #btn-login {
    width:100%;
}

.activeChevron {
    color:blue;
    cursor:pointer;
    font-weight:bold;
}

.greenFont {
    color: green;
}

.redFont {
    color:red;
}

.normalLink {
    color: #007bff !important;
    text-decoration:underline !important;
}

.highlight {
    background-color: #cfd4e9;
}

.inlinePlusButton {
    background-color: #28a745;
    padding: 8px 8px 5px 8px;
    color: white;
    /*font-size: large;*/
    cursor:pointer;
}

@keyframes add-shadow-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(24, 100, 41, 0.2);
    }

    100% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
}

.add-animate-me {
    animation: add-shadow-pulse 1s infinite;
}

.matchPadding {
    padding-top: 20px;
    padding-left: 12px;
}

.matchPaddingTopOnly .fas {
    padding-top: 20px;
}

.xhair {
    cursor: grab;
}

.ui-datepicker-trigger {
    margin-left:5px;
}

.disabled:hover {
    cursor:not-allowed;
}

.nav-tabs {
    margin:0px -20px 10px -20px;
}

.nav-tabs .nav-item:first-child {
    margin-left:20px;
}

.nav-tabs .active {
    font-weight:bold;
}

.nav-tabs .nav-link {
    color:inherit;
}

#purpleMonsterDiv {
    background-color:red;
    color:white;
    z-index:999;
    max-height:30px;
    width:100%;
    position:fixed;
    bottom:0;
    padding: 7px 10px 20px 10px;
    font-size:smaller;
}

#purpleMonsterDiv div {
    float:left;
}

#purpleMonsterDiv div:last-of-type {
    margin-left: 5px;
    margin-top: -4px;
}