/* Desktop Stylesheet for SMDB Driver System */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body {
	font-family: 'Raleway', sans-serif;
	background-color: #F5FDFF;
}

a {
	color: #383838;
}

.actionLink {
	color: #383838;
	text-decoration: underline;
	cursor: pointer;
}

.layout {
	width: 90%;
	display: grid;
	grid:
	"header header header" 160px
	"navSide formOuter formOuter" auto
	"footerNav footer footer" 50px
	/ 275px 1fr 1fr;
	justify-content: center;
	margin: 0 auto;
	padding: 15px;
}

.subLayout {
	width: 95%;
	display: grid;
	grid:
	"formOuter formOuter" auto
	"footer footer" 50px
	/ 1fr 1fr;
	justify-content: center;
	margin: 0 auto;
	padding: 15px;
}

.header { 
	grid-area: header;
	display: grid;
	 grid:
	"logo sub user" 70px
	/ 460px auto 200px;
	align-items: center;
	padding:30px;
}

.headLogo {
	grid-area: logo;	
	padding-left: 35px;
}

.titleSub {
	grid-area: sub;
	align-self:center;
	font-size: 30pt;
	font-style: italic;
	text-align: center;
}

.userIcon {
	padding:6px;
	padding-top: 16px;
	font-size: 20px;
	border-radius: 20px;
	border:1px solid #CCC;
	height: 32px;
	background: #FFFFFF no-repeat right url("../user-icon.png");
	background-size: 32px 30px;
	width:184px;
}

.userName {
	padding-left: 21px;
}

.userDropdown {
	grid-area: user;
	justify-self: end;
	position: relative;
	display: inline-block;
}

.userDropdownContent {
	display:none;
	position: absolute;
	right: 0px;
	background-color: #f1f1f1;
	border-radius: 0 0 20px 20px;
	border:1px solid #CCC;
	border-top: 0;
	min-width: 211px;
	box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	max-height: 0;
	transition: max-height 0.15s ease-out;
}

.userDropdownContent a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.userDropdown:hover .userDropdownContent {
	display: block;
	max-height: 500px;
    transition: max-height 0.25s ease-in;
}

.userDropdown:hover .userIcon{
	/*background-color: #f1f1f1;*/
	border-radius: 20px 20px 0 0;
}

.navSide {
	grid-area: navSide; 
	border:2px solid #3D4856;
	border-radius: 15px 0 0 0;
	
	border-right: 0;
	border-bottom: 0;
	overflow: hidden;
}

.navFixed {
	align-self: start;
	position: -webkit-sticky;
	position: sticky;
    top: 0;
	border-left:0;
	margin-bottom: 50px;
}

.navFolding input {
    display: none;
}

.navFolding label {
    display: block;    
    padding: 8px 22px;
    margin: 0 0 1px 0;
	text-align: left;
    cursor: pointer;
    transition: ease .5s;
	font-size:18pt;
	position: relative;
}

.navFolding label::after {
    content: '+';
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 2px;
}
 
.navFolding input:checked + label::after {
    content: '-';
    right: 22px;
    top: 3px;
}

.navFolding label:hover {
	cursor: pointer;
	transition: background-color 0.3s ease-out;
}

.navFolding input + label + .navPanel {
    display: none;
}

.navFolding input:checked + label + .navPanel {
    display: block;
}

.navTitle {
	background-color: #3D4856;
	margin-top: -20px;
	text-align: center;
	color: #FFF;
}

.navSide ul li{
	list-style-type: none;
	border-bottom: 1px solid #3D4856;
	padding:2px;
	margin-right: 28px;
	padding-left: 5px;
	transition: background-color 0.3s;
	font-size: 14pt;
}

.navSide ul li a{
	text-decoration:none;
	color: #000;
	display: block;
}

[onclick^="subFormPopup"]::after , .ext::after{
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

.navSide ul li:hover{
	background-color:#FFF;
	cursor: pointer;
	transition: background-color 0.3s ease-out;
}

.navSide .navDivider{
	font-weight:bold;
	margin-left: 40px;
	margin-top: 7px;
	margin-bottom: 7px;
	border-bottom: 0;
	font-size: 16pt;
}

.formOuter { 
	grid-area: formOuter; 
	border-radius: 0 15px 0 0;
	border: 2px solid #0693E3;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	overflow: hidden;
	
}

.subLayout .formOuter {
	border-radius: 15px 15px 0 0;
	border: 2px solid #0693E3;
}


.listInner {
	padding: 35px;
	width: 90%;
	display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
	font-size:16pt;
}

.subBox {
	border: 2px solid #7093BC;
	padding: 8px;
	border-radius: 0;
	margin-bottom: 10px;
	
}

.subBoxTitle {
	background-color: #7093BC;
	margin: 0;
	padding: 12px;
	border-radius: 15px 15px 0 0;
	padding-left: 30px;
	overflow: hidden;
	font-weight: bold;
	font-size: 20pt;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.subBoxTitle  button{
	justify-self: flex-end;
}

.dataView {
	font-size: 13pt;
	border-collapse: collapse;
}

.dataView th {
	border-bottom: 2px solid #999;
}

.dataView .dataViewAlt {
	background-color: #EEE;
}

.dataView .dataViewCancel {
	background-color: #FF8066;
}

.dataView .dataViewMid {
	text-align: center;
	vertical-align: middle;

}

.dataViewColTime {
	width: 54px;
}

.dataViewColType {
	width: 81px;
}

.dataViewColView {
	width: 60px;
}

.dataView tr {
	height: 44px;
	vertical-align: middle;
}

.dataView td {
	border: 1px solid #DDD;
	margin: 0;
}

.altColour  .subBoxTitle{
	background-color: #f28742;
}

.altColour .subBox  {
	border: 2px solid #f28742;
}

.formTitle {
	background-color: #0693E3;
	margin-top: -20px;
	padding-left: 105px;
}

.formTitle a {
	float: right;
	margin-right: 20px;
	font-size:16pt;
}

.formInner {
	padding: 35px;
	width: 90%;
	display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    align-items: center;
	font-size:16pt;
}

input, select {
	width: 100%;
	padding: 12px 20px;
	margin: 2px 0;
	box-sizing: border-box;
	font-size:16pt;
	font-family: Tahoma, Verdana, sans-serif;
	background-color: #FFF;
}

label {
	margin-bottom: 0;
	margin-right: 20px;
	text-align:right;
}

 input[type=checkbox]{
	width: 50px;
	height: 50px;
	align-self:self-start;
}

input[type=radio]{
	width: 25px;
	justify-self:end;
}

.radioLabel {
	justify-self:self-start;
	text-align: left;
}


input[type=time], input[type=date], input[type=number]{
	width: 50%;
	align-self:self-start;
	font-family: Tahoma, Verdana, sans-serif;
}

:disabled {
	background-color: #FFF;
	color: #000000;
	opacity: 1;
	cursor: no-drop;
}

.formInner .form-control-date {
	width: 50%;
	background: #FFF no-repeat url("../cal-icon.png");
	background-position: right 24px center;
	background-size: 24px 24px;
	align-self:self-start;
}

.formControlMicro{
	width: 120px;
}

.formSmallInput {
	width: 38%;
}

.formIssues  input[type=checkbox]{
	width: 18px;
	height: 18px;
	align-self:self-start;
}

textarea{
	height: 80px;
	font-size:16pt;
	align-self:self-end;
	resize: vertical; 
	font-family: Tahoma, Verdana, sans-serif;
}

.formDetailsInput,  input[type=search], select {
	width: 69%;
}
button {
	padding: 12px 20px;
	margin: 2px 0;
	box-sizing: border-box;
	font-size:16pt;
}

.smallBtn {
	font-size:14pt;
	padding: 0px;
	height: 18pt;
}

.alertBtn {
	border: 2px solid #FF8066;
}

.formDetailsBtn  {
	width: 90px;
	display:none;
}

.loc_details {
	width: 90px;
	display:none;
}

.formDetailsBtnShow{
	display:inline-block;
	width: auto;
}

.ui-multiselect-menu { 
	display:none;
}
 
.formActionBtn {
	width: 32%;
}

.modalBtn {
	width: 49%;
	align-self: stretch;
}

.formInner .formExtra {
	align-self: stretch;
	margin-top: 30px;
	margin-bottom: 40px;
	padding-bottom: 15px;
	border:2px solid #1cb8ec;
	display:none;
}

.formInner .formExtra h4 {
	color: #707070;
	margin-top: 20px;
	margin-bottom: 5px
}

.formInner .formExtra p {
	margin-bottom: 2px;
	margin-left: 10px;
}

.formExtraCbox{
	display: grid;
    grid-template-columns:1fr 3fr 1fr 3fr;
}

.formExtraCbox p{
	margin: 8px 0 8px 0;
	align-self: center;
}

.formExtraCbox input[type=checkbox]{
	height: 22px;
	width: 22px;
	outline:2px solid #A0A0A0;
	align-self: center;
	margin-left: 2px;
}

.formInner .formExtraL {
	border-radius: 15px 0 0 0;
	border-right: 0px;
	overflow: hidden;
	padding-right: 20px;
}

.formInner .formExtraR {
	border-radius: 0 15px 0 0;
	border-left: 0px;
	overflow: hidden;
	padding-right: 20px;
}

.formInner .formExtra h3{
	text-align: right;
	vertical-align: top;
}

.rtnDriver, .doubleTrip, .taillift {
	display:none;
}

.ui-autocomplete-loading {
    background: white url("../ui-anim_basic_16x16.gif") right center no-repeat;
  }
  
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
    height: 100px;
}

.clientType-smiles {
	background: #B4D2E7 url("../smiles.png") 5px center no-repeat;	
	padding-left: 40px;	
}

.clientType-wheels {
	background: #94C5CC url("../wheels.png") 5px center no-repeat;	
	padding-left: 40px;
}


.invalid-feedback {
	color:#e60026;
}
.pagination {
	text-align: center;
}

.pagination li{
	display: inline;
	list-style-type: none;
	margin: 5px;
}

.pagination li a {
	text-decoration: none;
}

.pagination  .pageDisabled  {
	display: none;
}

.todo_alert {
	border: 1px solid #e60026;
	border-radius: 0 0 3px 3px;
	background-color: #FF8066;
	position: absolute;
	top: 0;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;  
	width: 50%;
	height: 26px;
	padding: 5px;
	text-align:center;
	font-size: 14pt;
}

.alert {
	border: 1px solid #e60026;
	border-radius: 3px;
	background-color: #FF8066;
	padding: 20px;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 5px;
	font-size: 16pt;
	align-self: stretch;
	text-align:center;
}

.footerNav { 
	grid-area: footerNav; 
	border:2px solid #3D4856;
	border-width:  2px 0 0 0;
	width: 100%;
	}
	
.footer { 
	grid-area: footer; 
	text-align: center;
	color: #808080;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border:2px solid #0693E3;
	border-width:  2px 0 0 0;
	width: 100%;
}