<commit_before>@import "ridepilot-ui-helpers";


// basic html

html {
  min-height: 100vh
}

body {
	color: $black;
	@include barlow;
	@include gradient-vert($gray-3, $white, 1, 1, 0%, 90%);
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 25px;
  margin: 0 0 1em;
  line-height: 1.2;
  color: $brand-primary;
}
h1 {
	font-size: 26px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5, h6 {
  font-size: 13px;
}

a, a:link, a:visited {
	color: $brand-primary;
}

label {
  @include form-label;
}

form {
	width: 100%;
  input[type="text"], input[type="password"], textarea, .form-control {
		@include form-field;
	}
	textarea {
		height: auto;
	}
	fieldset {
		width: 100%;
		background-color: $gray-4;
		padding: $object-pad;
	}
}

// overriding bootstrap 

.btn, .action-button, .btn.dropdown-toggle, .btn-primary, .open > .btn-primary.dropdown-toggle, input[type="submit"], button[type="button"] {
	color: $brand-primary;
	border: 1px solid currentColor;
	border-color: currentColor;
	border-radius: $button-radius;
	background-color: $white;
	transition: color .125s ease-in-out, box-shadow .125s ease-in-out;
	@include barlow;
	font-weight: 400;
	padding: .625em 1em;
	&:link, &:visited {
		color: $brand-primary;
	}
	&:hover, &:focus, &:active {
		color: $brand-primary;
		background-color: $white;
		@include box-shadow($blur: 0px, $spread: 1px, $opacity: 1, $color: currentColor, $inset: inset);
	}
	&.btn-danger {
	  color: $red;
	  &:hover {
	  	color: $red;
	  }
	}
}

.input-group {
	.btn {
		border-color: $gray-2;
		background-color: $gray-3;
		border-radius: 0px;
		height: 100%;
	}
	input, .form-control {
		@include form-field;
	}
	&.datepicker-icon {
		.btn {
			@include cal-button;
			display: table;
			height: $input-height;
		}
	}
}
.input-group-btn {
	font-size: inherit;
}

.alert-info, .alert, .alert-danger {
	background: $brand-primary;
	@include gradient-horiz($brand-primary);
	border: none;
	border-radius: 0px;
	color: $white;
	font-size: 1.5em;
	font-weight: 600;
	font-style: italic;
	padding: $object-pad/3 $object-pad;
}

.panel {
	.panel-heading {
	  .panel-title {
	    .header-info {
				font-weight: 600;
				display: inline-block;
				margin-left: 1em;
			}
		}
		.pull-right {
			padding: 0;
			margin: 0 0 0 1em;
			width: auto;
			> * {
				display: inline-block;
			}
		}
	}
}

.panel-primary {
	border-radius: 0;
	padding: $object-pad;
	border: 1px solid $gray-3;
	position: relative;
	margin: .375em 0 $object-pad 0;
	transition: border .25s ease-in-out;
	&::before {
		content: '';
		position: absolute;
		background: $gray-3;
		width: 100%;
		height: 100%;
		top: -.375em;
		left: -.375em;
		z-index: -1000;
		transition: background .25s ease-in-out;
	}
	&.focused {
		border-color: $brand-primary;
		&::before {
      background: $brand-primary;
		}
	}
	.panel-heading, .panel-body {
		padding: 0;
		width: 100%;
	}
	.panel-heading {
		color: $brand-primary;
		background-color: transparent;
		border: none;
		text-transform: uppercase;
		font-weight: 600;
		padding-bottom: $object-pad;
		font-size: 14px;
		h1, h2, h3, h4, h5, h6 {
			font-weight: 600;
		}
		.header-info {
			font-weight: 600;
			display: inline-block;
			margin-left: 1em;
		}
		.pull-right {
			.dropdown {
				display: inline-block;
			}
		}
	}
	.panel-body {
		// overflow: scroll auto;
	}
	.panel-footer {
		border: none;
		background: transparent;
		padding: $object-pad 0 0 0;
	}
	&.expandable {
		padding: 0;
		.panel-heading, .panel-body {
			padding: $object-pad;
		}
		.panel-heading {
		  background-color: $gray-4;
		}
		.panel-body {
			max-width: 100%;
		}
	}
}

.form-horizontal, form {
	// display: table;
	// .form-table {
	// 	display: block;
	// 	width: 100%;
	// }
	.form-group {
		display: table;
		margin: 0;
		width: 100%;
		.form-label, .form-field {
			display: table-cell;
			vertical-align: middle;
			padding: .75em 0;
		}
		.form-label {
			padding: 0;
			text-align: left;
			width: 20%;
		}		
		.form-field {
			font-weight: 600;
			padding-left: .75em;
			.inline-edit {
				display: inline-block;
				padding: 0 .25em;
				color: $brand-primary;
				transform: translateY(0);
				transition: transform .25s ease-in;
				vertical-align: bottom;
				&:hover {
					transform: translateY(-.25em);
				}
			}
			&.city-state-zip {
				>[class*="col-"] {
					padding-right: .5em;
					&:last-child {
						padding-right: 0;
					}
				}
			}
		}

	}
}

.table, table {
	width: 100%;
	background: $white;
	thead, tbody, tfoot {
		tr {
			td, th {
				border: none;
				padding: .5rem 1rem;
				p {
					line-height: 1.4;
					min-height: auto;
					&:first-of-type {
						padding: 0;
					}
				}
				.label {
					display: inline-block;
					border-radius: 0px;
					background-color: $gray-2;
					text-transform: uppercase;
					&.label-danger {
						background-color: $red;
					}
				}
			}
		}
		> tr {
      > td.danger,
			> th.danger, 
			&.danger > td, 
			&.danger > th,
			> td.danger,
			> th.danger,
			> tr.danger > td,
			> tr.danger > th,
			> td.danger,
			> th.danger,
			&.danger > td,
			&.danger > th {
				background: none;
				color: $gray-1;
				a, a:link, a:visited {
					color: $brand-primary-muted;
				}
			}
		}
	}
	thead {
		tr {
      td, th {
				background-color: $gray-2;
				color: $white;
				font-weight: 600;
				font-size: .875em;
				text-transform: uppercase;
				vertical-align: bottom;
			}
		}
	}
	tbody {
		border: 1px solid $gray-2;
		border-collapse: separate;
		tr {
			td {
				font-weight: 600;
				vertical-align: top;
				padding: 1rem;
			}
		}
		.panel & {
			border: none;
		}
	}
	&.basic-table, &.basic-table.dataTable {
		width: 100%;
		border: none;
		border-collapse: collapse;
		thead {
			border: 1px solid $white;
			border-bottom: .75em solid $white;
			th {
				border: none;
				padding: .5rem 1rem;
			}
		}
		tbody {
			tr {
				&:first-of-type {
					td {
						position: relative;
						&::before {
							content: '';
							position: absolute;
							top: 0px;
							left: 0;
							right: 0;
							display: block;
							width: 100%;
							height: 1px;
							background-color: $gray-2
						}
					}
				}
			}
		}
	}
}

.table-striped {
	tbody {
		tr {
			&:nth-of-type(2n+1) {
				background: mix($white, $gray-4, 50)
			}
		}
	}
}

.no-gutters {
  @include no-gutters-parent;
}

.dropdown {
	@include clear-after;
}

.overdue-danger {
	background-color: $red!important;
}

.panel-success {
  border-color: transparent;
  > .panel-heading {
	  color: $white;
	  background-color: $green;
	  border-color: $white;
	  a {
	    color: $white;
	  }
	  .dropdown-menu {
	  	li {
	  		width: 100%;
	  	}
	  	a {
	  		color: $black;
	  	}
	  }
	}
}


// layout

#header {
	background-color: $gray-3;
	@include gradient-horiz($brand-primary, $white, 1, 1, 30%);
	@include box-shadow;
	padding: 0;
	position: relative;
	height: $header-height;
	#brand {
		@include barlow;
		font-weight: 800;
		color: $white;
		transition: color .25s ease-in-out;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;

		.logo, .name {
			display: inline-block;
			padding: 0 $layout-pad;
			float: left
		}
		
		.logo {
			background-color: $white;
			height: $header-height;
			img {
				height: 5rem;
			  width: auto;
			  @include vert-center;
			}
		}

		.name{
			font-size: 32px;
			@include vert-center;

			a {
				color: $white;
				text-decoration: none;
				&:hover {
					color: $gray-3;
				}
			}
		}

	}
}

#user-nav {
	color: $brand-primary;
	font-weight: 600;
	display: inline-block;
	float: right;
	text-align: right;
	padding: 1em $layout-pad;
	@include vert-center;
	a {
		color: currentColor;
		font-size: 1.25em;
		margin-left: .375em;
	}

	.current-provider {
		display: block;
		width: 100%;
		margin-top: .75em;
	}

}

#primary-nav {
	margin: 0;
	padding: 0;
	li {
		list-style: none;
	  float: left;
	  display: inline-block;
	  margin-right: 2px;
	  @include gradient-vert($white,$gray-3,1);
	  a {
	  	padding: .5em 1em;
	  	font-size: 16px;
	  	font-weight: 600;
	  	display: inline-block;
	  	color: $brand-primary;
	  	background: transparent;
	  	transition: .25s ease-in-out;
	  	line-height: 1.4;
	  	&.active {
	  		background: $white;
	  	}
	  	&:hover {
				background: $gray-4;
				text-decoration: none;
	  	}
	  }
	}
}

.main-wrapper {
	padding: 0 $layout-pad;
}

#crossbar {
	background: transparent;
	padding: 2em $layout-pad 0 $layout-pad;
}

#main {
	background-color: $white;
	padding: $content-pad;
	> div[class*="col-"], >.row > div[class*="col-"] {
	  // overflow: scroll visible;
	}
}

#page-header {
	padding: 0;
	margin: 0;
	color: $brand-primary;
	@include clear-after;
	.page-title, h1 {
		float: left;
		margin-bottom: $content-pad;
		.date-span {
			font-weight: 600;
		}
	}
	.action-buttons {
		margin-bottom: $content-pad;
	}
	+ hr {
		display: none;
	}
	.filter-form {
		float: left;
		display: inline-block;
		max-width: 50%
	}
	.page-subtitle, h2 {
		font-weight: 600;
		display: block;
		width: 100%;
		color: $gray-1;
		@include clear-both;
	}
}

#footer {
	position: fixed;
	z-index: 1000;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	background: $gray-3;
	color: $gray-1;
	font-size: .875em;
	font-weight: 600;
	height: 3em;
	a {
		color: $brand-primary;
	}
	.footer-text, .version-lang {
		padding: 1em;
	}
	.footer-text {
		float: left;
	}
	.version-lang {
		float: right;
		text-transform: uppercase;
		.locale {
			margin-left: 1em;
		}
	}
}

// page elements

.action-buttons {
	float: right;
  .btn {
  	@include grouped-button;
  }
}

.table-action-buttons {
	margin-bottom: $content-pad/2;
	@include clear-both;
	.btn {
		@include grouped-button;
		color: $gray-1;
	}
	.dropdown:last-child .btn {
		@include last-button
	}
	.dropdown:first-child .btn {
		@include first-button
	}
}

.fa-remove {
	color: $red;
}

.inputfile {
	// adapted from demo at https://tympanus.net/Tutorials/CustomFileInputs/
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  & + label {
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  cursor: pointer;
	  display: inline-block;
	  overflow: hidden;	
	  i {
	  	margin-right: .5em
	  }			
	}
	&:focus + label,
	&.has-focus + label {
	  outline: 1px dotted currentColor;
	  outline: -webkit-focus-ring-color auto 5px;
	}
}

.panel-primary {
	.table {
		margin: 0;
	}
  &.driver-details {
		.form-group.driver-photo {
			position: absolute;
			width: auto;
			top: $object-pad;
			right: $object-pad;
			max-width: 100px;
			.form-field {
				max-width: 100%;
				padding: 0;
			}
			img {
				border: 1px solid $gray-4;
			}
			.inputfile {
				& + label {
					margin-top: 1em;
					width: 100px;
				}
			}
		}
		.form-group.driver-name, .form-group.driver-phone, .form-group.driver-alt-phone {
			.form-field {
				input {
				  width: 670%;
					width: calc(100% - 120px);
				}
			}
		}
	}
	.panel-heading {
		.checkbox {
			float: right;
			font-weight: 400;
			font-size: .875em;
			line-height: 1;
			color: $black;
			b {
				font-weight: inherit;
			}
			label {
				min-height: auto;
			}
			input {
				margin-top: 0;
			}
		}
	}
	.btn {
		@include smaller-button;
	}
}

.table, table {
	.fa-paperclip {
		color: $gray-2;
	}
	.delete-row-btn {
		color: $red;
		&:hover {
			opacity: .75;
		}
	}
}

.filters-panel {
  .panel-heading, .panel-title {
  	font-weight: 600!important;
  }
  .btns {
  	@include clear-both;
  	.btn {
  		@include smaller-button;
      @include grouped-button;
      text-transform: uppercase;
      color: $white;
      border-color: $gray-1;
      background: $gray-2;
      font-weight: 600;
  	}
  }
  label {
  	margin: 1.5em 0 .5em 0;
  }
  div[class*="col-"] {
  	@include no-gutters;
  }
  .filter-checks {
    @include form-label;
  }
}

#weekday_select {
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	>label {
		margin-right: 1em;
	}
	.btn-group {
    label.btn {
    	opacity: .375;
			width: 14.285%;
			padding: .375em 0;
		  margin: 0;
		  background-color: $input-bg;
		  color: $black;
		  @include un-box-shadow;
		  &:not(:last-child) {
			  border-right: 0px
		  }
		  &.active {
		  	opacity: 1;
		  	font-weight: 600;
		  }
		  #page-header & {
				padding-right: 1em;
				padding-left: 1em;
			}
		}
	}
}


.ui-datepicker {
	@include barlow;
	button {
		@include barlow;
	}
	.ui-datepicker-header {
		font-weight: 600;
		background: $brand-primary;
		color: $white;
		.ui-icon {
			&.ui-icon-circle-triangle-e, &.ui-icon-circle-triangle-w {
				background: transparent;
				background-image: none;
				text-indent: 0;
				&:before {
	        @include font-awesome;
					color: $white;
					padding-right: 200%;
				}
			}
			&.ui-icon-circle-triangle-e {
				&:before {
					content: '\f0a9'
				}
			}
			&.ui-icon-circle-triangle-w {
				&:before {
					content: '\f0a8'
				}
			}
		} 
	}
	.ui-widget-content {
		border: none;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		text-align: center;
		font-weight: 800;
		color: $brand-primary;
		border: none;
		background-color: $gray-4;
		background-image: none;
	}
	.ui-datepicker-today {
		a {
			background-color: $gray-3;
		}
	}
	table th {
		font-weight: 600;
	}
}

body.sessions.new {
  form#new_user {
		max-width: 400px;
		label {
			margin: 1em 0 .5em 0;
		}
	}
}

#dispatch_runs_trips {
	padding: 0;
	#unassigned_trips_container {
		padding: 0;
		border-right: 1px solid $brand-primary;
		border-left: 1px solid $brand-primary;
		@include box-shadow($blur: .5rem, $spread: 0px, $opacity: 0.5);
		#unassigned_trips_panel {
			border: none;
			table {
				border: none;
			}
		}
		.panel-heading {
			background-color: $brand-primary;
			padding: 1em $object-pad;
			color: $white;
		}
		
	}
	.hsplitter {
		background-color: $brand-primary;
		height: 2em;
		padding-top: .25em;
		border-radius: 6px 6px 0 0;
		text-align: center;
		border-bottom: 1px solid $white;
		@include box-shadow($blur: .5rem, $spread: 0px, $opacity: .75);
		&::before {
			@include font-awesome;
			content: '\f58d';
			display: inline-block;
			height: 1em;
			color: $white;
		}
	}
}

body.dispatchers.index {
	#main {
		padding-left: 0;
		padding-right: 0;
	}
	#page-header, #dispatch_runs_container {
		padding-left: $content-pad;
		padding-right: $content-pad;
	}
}

body.availability-forecast {

	.forecast-col {
	  padding: $object-pad;
	  @include gradient-horiz($gray-4, $gray-3, 1, 1);
	  table, .table {
			white-space: nowrap !important;
			border-collapse: separate;
			thead, tbody, tfoot {
				tr {
					th {
						background: transparent;
						color: $black;
						@include gradient-vert($white,$gray-3,1,1);
						&.rotate-th {
						  height: 7.5em;
						  white-space: nowrap;
						  .rotate-th-inner {
							  transform: translate(-.5em) rotate(-75deg);
							  width: 1em;
							  .th-text {
								  padding-right: .5em;
								  font-size:  .875em;
								}
							}
						}
						&.top-level {
							text-align: center;
						}
					}

					td {
						background-color: $white;
						padding: .75rem .5rem .75rem .75rem;
					}
					th, td {
						&.new-group {
							border-left: 1px solid $gray-2!important;
						}
						&.date_cell {
							background-color: transparent;
							color: $black;
						}
					}
				}
			}
			tbody {
				border: none;
				tr {
					&.is_disabled td.number_cell {
				    background-color: $gray-3;
				  }
				  &.in_view td{
				    border-top: 2px solid $brand-primary;
				    border-bottom: 2px solid $brand-primary;
				  }
				  &:not(.is_disabled) td {
				    cursor: pointer;
				  }
				  &.in_view td,
				  &:not(.is_disabled):hover td{
				    font-style: italic;
				    border-top: 1px solid $brand-primary;
				    border-bottom: 1px solid $brand-primary;
				  }
					td {
						&.is_live {
					    background-color: $brand-primary;
					    color: $white;
					  }
					  &.out_of_live {
					    background-color: $gray-1;
					    color: $white;
					  }
					  &.disabled {
					    color: $gray-2;
					  }
					}
				}
			}
			thead {
				position: static;
				tr {
					&::after {
						height: 1px;
						background: $gray-2
					}
				}
			}
		}
		tr.lack_driver td.number_cell, div.lack_drivers {
	    background-color: $orange;
	    color: white;
	  }
	  tr.has_unassigned_run td.number_cell, div.has_unassigned_run {
	    background-color: $yellow;
	  }
		.table-responsive {
			max-height: 50em;
		}
	}

  .availability-col {

  	padding-left: $content-pad;

  	.panel-primary {
  		padding: 0;
  		.panel-heading, .panel-body {
  			padding: $object-pad;
  		}
  		.panel-body {
  			max-width: 100%;
  		}
  	}
  	.table, table {
  		tbody {
  			td {
  				vertical-align: middle;
  			}
  		}
  	}
  	.table-responsive {
  		overflow: visible;
  		width: 100%;
  		max-width: 100%;
  	}

	  .th-inner {
    	width: 100%; 
    	white-space:nowrap;
    }

    .hour_tick_label {
	    display: inline-block;
	    padding: 0px;
	    margin: 0px 0px 0px -5px;
	  }

	  .pull-right a[class*="unassign_"] {
	  	padding: 1em;
	  }

		
		.run-availability-table, .driver-availability-table {

			margin-bottom: 0px;
	    border-collapse: separate !important;
	    border-spacing: 0 1em !important;
		
			td {
		    padding: 0px 5px !important;
		  }

		  td.disabled {
		    color: $gray-4;
		  }

		  td.chart_cell {
		  	white-space: nowrap !important; 
			  &.driver_not_available {
			    background-color: $blue;
			  }
		  }

		  a.link_disabled {
		    pointer-events: none;
		    cursor: default;
		    i {
			    color: $gray-4;
			  }
		  }

		}
		.run-availability-table {

		  td.chart_cell {
		  	white-space: nowrap !important; 
		  	color: white;
				&.is_filled {
			    background-color: $purple-3;
			  }

			  &.is_driver_filled {
			    background-color: $purple;
			  }
			}
		}
		.driver-availability-table {

		  td.chart_cell {
		  	white-space: nowrap !important; 
		  	color: white;
			  &.is_filled {
			    background-color: $green-3;
			  }
			  &.is_run_filled {
			    background-color: $green;
			  }
			  &.driver_not_available {
			    background-color: $blue;
			  }
			  &.is_disabled {
			    background-color: $gray-4;
			  }
			}
		}

	  
  }

  .panel-expand-collapse {
    cursor: pointer;
  }
  #main {
    z-index: 11000 !important;
  }
  .modal {
    z-index: 12000 !important;
  }
}

.address_container {
  .address_fields {
  	& + label {
  		margin-top: 1em;
  	}
  }
}

select + .vehicle-capacity-configurations {
	margin-top: 1em;
}

body.providers {
	form {
		width: 100%;
	}
}

.provider_sidebar {
  // overflow-x: hidden;
  // overflow-y: auto;  
  // // Scrollable contents if viewport is shorter than content. 
  position: relative;
  .panel {
  	background: $gray-4;
  }
  .provider-menu {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	li {
  		padding: .25em 0;
  	}
  	.active {
  		font-weight: 600;
  	}
  }
  @media (max-width: 768px) { 
		display: none;
  }
}


.new-trip-badge {
  background-color: $red;
}
.capacity_warning {
  background-color: $yellow;
}

.show .latlng_fields {
	display: none;
}

form.customer-search {
	width: auto;
	input {
		width: auto;
	}
}

.modal {
	.bootbox-body {
		min-height: 4em
	}
	button.close {
		margin: 0;
		font-size: 1.5em;
		padding: .5em .75em;
		opacity: 1;
		background-color: $brand-primary;
		color: $white;
		font-weight: 600;

	}
}<commit_msg>tweak fieldset style<commit_after>@import "ridepilot-ui-helpers";


// basic html

html {
  min-height: 100vh
}

body {
	color: $black;
	@include barlow;
	@include gradient-vert($gray-3, $white, 1, 1, 0%, 90%);
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 25px;
  margin: 0 0 1em;
  line-height: 1.2;
  color: $brand-primary;
}
h1 {
	font-size: 26px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5, h6 {
  font-size: 13px;
}

a, a:link, a:visited {
	color: $brand-primary;
}

label {
  @include form-label;
}

form {
	width: 100%;
  input[type="text"], input[type="password"], textarea, .form-control {
		@include form-field;
	}
	textarea {
		height: auto;
	}
}

fieldset {
	width: 100%;
	background-color: $gray-4;
	padding: $object-pad;
}

// overriding bootstrap 

.btn, .action-button, .btn.dropdown-toggle, .btn-primary, .open > .btn-primary.dropdown-toggle, input[type="submit"], button[type="button"] {
	color: $brand-primary;
	border: 1px solid currentColor;
	border-color: currentColor;
	border-radius: $button-radius;
	background-color: $white;
	transition: color .125s ease-in-out, box-shadow .125s ease-in-out;
	@include barlow;
	font-weight: 400;
	padding: .625em 1em;
	&:link, &:visited {
		color: $brand-primary;
	}
	&:hover, &:focus, &:active {
		color: $brand-primary;
		background-color: $white;
		@include box-shadow($blur: 0px, $spread: 1px, $opacity: 1, $color: currentColor, $inset: inset);
	}
	&.btn-danger {
	  color: $red;
	  &:hover {
	  	color: $red;
	  }
	}
}

.input-group {
	.btn {
		border-color: $gray-2;
		background-color: $gray-3;
		border-radius: 0px;
		height: 100%;
	}
	input, .form-control {
		@include form-field;
	}
	&.datepicker-icon {
		.btn {
			@include cal-button;
			display: table;
			height: $input-height;
		}
	}
}
.input-group-btn {
	font-size: inherit;
}

.alert-info, .alert, .alert-danger {
	background: $brand-primary;
	@include gradient-horiz($brand-primary);
	border: none;
	border-radius: 0px;
	color: $white;
	font-size: 1.5em;
	font-weight: 600;
	font-style: italic;
	padding: $object-pad/3 $object-pad;
}

.panel {
	.panel-heading {
	  .panel-title {
	    .header-info {
				font-weight: 600;
				display: inline-block;
				margin-left: 1em;
			}
		}
		.pull-right {
			padding: 0;
			margin: 0 0 0 1em;
			width: auto;
			> * {
				display: inline-block;
			}
		}
	}
}

.panel-primary {
	border-radius: 0;
	padding: $object-pad;
	border: 1px solid $gray-3;
	position: relative;
	margin: .375em 0 $object-pad 0;
	transition: border .25s ease-in-out;
	&::before {
		content: '';
		position: absolute;
		background: $gray-3;
		width: 100%;
		height: 100%;
		top: -.375em;
		left: -.375em;
		z-index: -1000;
		transition: background .25s ease-in-out;
	}
	&.focused {
		border-color: $brand-primary;
		&::before {
      background: $brand-primary;
		}
	}
	.panel-heading, .panel-body {
		padding: 0;
		width: 100%;
	}
	.panel-heading {
		color: $brand-primary;
		background-color: transparent;
		border: none;
		text-transform: uppercase;
		font-weight: 600;
		padding-bottom: $object-pad;
		font-size: 14px;
		h1, h2, h3, h4, h5, h6 {
			font-weight: 600;
		}
		.header-info {
			font-weight: 600;
			display: inline-block;
			margin-left: 1em;
		}
		.pull-right {
			.dropdown {
				display: inline-block;
			}
		}
	}
	.panel-body {
		// overflow: scroll auto;
	}
	.panel-footer {
		border: none;
		background: transparent;
		padding: $object-pad 0 0 0;
	}
	&.expandable {
		padding: 0;
		.panel-heading, .panel-body {
			padding: $object-pad;
		}
		.panel-heading {
		  background-color: $gray-4;
		}
		.panel-body {
			max-width: 100%;
		}
	}
}

.form-horizontal, form {
	// display: table;
	// .form-table {
	// 	display: block;
	// 	width: 100%;
	// }
	.form-group {
		display: table;
		margin: 0;
		width: 100%;
		.form-label, .form-field {
			display: table-cell;
			vertical-align: middle;
			padding: .75em 0;
		}
		.form-label {
			padding: 0;
			text-align: left;
			width: 20%;
		}		
		.form-field {
			font-weight: 600;
			padding-left: .75em;
			.inline-edit {
				display: inline-block;
				padding: 0 .25em;
				color: $brand-primary;
				transform: translateY(0);
				transition: transform .25s ease-in;
				vertical-align: bottom;
				&:hover {
					transform: translateY(-.25em);
				}
			}
			&.city-state-zip {
				>[class*="col-"] {
					padding-right: .5em;
					&:last-child {
						padding-right: 0;
					}
				}
			}
		}

	}
}

.table, table {
	width: 100%;
	background: $white;
	thead, tbody, tfoot {
		tr {
			td, th {
				border: none;
				padding: .5rem 1rem;
				p {
					line-height: 1.4;
					min-height: auto;
					&:first-of-type {
						padding: 0;
					}
				}
				.label {
					display: inline-block;
					border-radius: 0px;
					background-color: $gray-2;
					text-transform: uppercase;
					&.label-danger {
						background-color: $red;
					}
				}
			}
		}
		> tr {
      > td.danger,
			> th.danger, 
			&.danger > td, 
			&.danger > th,
			> td.danger,
			> th.danger,
			> tr.danger > td,
			> tr.danger > th,
			> td.danger,
			> th.danger,
			&.danger > td,
			&.danger > th {
				background: none;
				color: $gray-1;
				a, a:link, a:visited {
					color: $brand-primary-muted;
				}
			}
		}
	}
	thead {
		tr {
      td, th {
				background-color: $gray-2;
				color: $white;
				font-weight: 600;
				font-size: .875em;
				text-transform: uppercase;
				vertical-align: bottom;
			}
		}
	}
	tbody {
		border: 1px solid $gray-2;
		border-collapse: separate;
		tr {
			td {
				font-weight: 600;
				vertical-align: top;
				padding: 1rem;
			}
		}
		.panel & {
			border: none;
		}
	}
	&.basic-table, &.basic-table.dataTable {
		width: 100%;
		border: none;
		border-collapse: collapse;
		thead {
			border: 1px solid $white;
			border-bottom: .75em solid $white;
			th {
				border: none;
				padding: .5rem 1rem;
			}
		}
		tbody {
			tr {
				&:first-of-type {
					td {
						position: relative;
						&::before {
							content: '';
							position: absolute;
							top: 0px;
							left: 0;
							right: 0;
							display: block;
							width: 100%;
							height: 1px;
							background-color: $gray-2
						}
					}
				}
			}
		}
	}
}

.table-striped {
	tbody {
		tr {
			&:nth-of-type(2n+1) {
				background: mix($white, $gray-4, 50)
			}
		}
	}
}

.no-gutters {
  @include no-gutters-parent;
}

.dropdown {
	@include clear-after;
}

.overdue-danger {
	background-color: $red!important;
}

.panel-success {
  border-color: transparent;
  > .panel-heading {
	  color: $white;
	  background-color: $green;
	  border-color: $white;
	  a {
	    color: $white;
	  }
	  .dropdown-menu {
	  	li {
	  		width: 100%;
	  	}
	  	a {
	  		color: $black;
	  	}
	  }
	}
}


// layout

#header {
	background-color: $gray-3;
	@include gradient-horiz($brand-primary, $white, 1, 1, 30%);
	@include box-shadow;
	padding: 0;
	position: relative;
	height: $header-height;
	#brand {
		@include barlow;
		font-weight: 800;
		color: $white;
		transition: color .25s ease-in-out;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;

		.logo, .name {
			display: inline-block;
			padding: 0 $layout-pad;
			float: left
		}
		
		.logo {
			background-color: $white;
			height: $header-height;
			img {
				height: 5rem;
			  width: auto;
			  @include vert-center;
			}
		}

		.name{
			font-size: 32px;
			@include vert-center;

			a {
				color: $white;
				text-decoration: none;
				&:hover {
					color: $gray-3;
				}
			}
		}

	}
}

#user-nav {
	color: $brand-primary;
	font-weight: 600;
	display: inline-block;
	float: right;
	text-align: right;
	padding: 1em $layout-pad;
	@include vert-center;
	a {
		color: currentColor;
		font-size: 1.25em;
		margin-left: .375em;
	}

	.current-provider {
		display: block;
		width: 100%;
		margin-top: .75em;
	}

}

#primary-nav {
	margin: 0;
	padding: 0;
	li {
		list-style: none;
	  float: left;
	  display: inline-block;
	  margin-right: 2px;
	  @include gradient-vert($white,$gray-3,1);
	  a {
	  	padding: .5em 1em;
	  	font-size: 16px;
	  	font-weight: 600;
	  	display: inline-block;
	  	color: $brand-primary;
	  	background: transparent;
	  	transition: .25s ease-in-out;
	  	line-height: 1.4;
	  	&.active {
	  		background: $white;
	  	}
	  	&:hover {
				background: $gray-4;
				text-decoration: none;
	  	}
	  }
	}
}

.main-wrapper {
	padding: 0 $layout-pad;
}

#crossbar {
	background: transparent;
	padding: 2em $layout-pad 0 $layout-pad;
}

#main {
	background-color: $white;
	padding: $content-pad;
	> div[class*="col-"], >.row > div[class*="col-"] {
	  // overflow: scroll visible;
	}
}

#page-header {
	padding: 0;
	margin: 0;
	color: $brand-primary;
	@include clear-after;
	.page-title, h1 {
		float: left;
		margin-bottom: $content-pad;
		.date-span {
			font-weight: 600;
		}
	}
	.action-buttons {
		margin-bottom: $content-pad;
	}
	+ hr {
		display: none;
	}
	.filter-form {
		float: left;
		display: inline-block;
		max-width: 50%
	}
	.page-subtitle, h2 {
		font-weight: 600;
		display: block;
		width: 100%;
		color: $gray-1;
		@include clear-both;
	}
}

#footer {
	position: fixed;
	z-index: 1000;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	background: $gray-3;
	color: $gray-1;
	font-size: .875em;
	font-weight: 600;
	height: 3em;
	a {
		color: $brand-primary;
	}
	.footer-text, .version-lang {
		padding: 1em;
	}
	.footer-text {
		float: left;
	}
	.version-lang {
		float: right;
		text-transform: uppercase;
		.locale {
			margin-left: 1em;
		}
	}
}

// page elements

.action-buttons {
	float: right;
  .btn {
  	@include grouped-button;
  }
}

.table-action-buttons {
	margin-bottom: $content-pad/2;
	@include clear-both;
	.btn {
		@include grouped-button;
		color: $gray-1;
	}
	.dropdown:last-child .btn {
		@include last-button
	}
	.dropdown:first-child .btn {
		@include first-button
	}
}

.fa-remove {
	color: $red;
}

.inputfile {
	// adapted from demo at https://tympanus.net/Tutorials/CustomFileInputs/
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  & + label {
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  cursor: pointer;
	  display: inline-block;
	  overflow: hidden;	
	  i {
	  	margin-right: .5em
	  }			
	}
	&:focus + label,
	&.has-focus + label {
	  outline: 1px dotted currentColor;
	  outline: -webkit-focus-ring-color auto 5px;
	}
}

.panel-primary {
	.table {
		margin: 0;
	}
  &.driver-details {
		.form-group.driver-photo {
			position: absolute;
			width: auto;
			top: $object-pad;
			right: $object-pad;
			max-width: 100px;
			.form-field {
				max-width: 100%;
				padding: 0;
			}
			img {
				border: 1px solid $gray-4;
			}
			.inputfile {
				& + label {
					margin-top: 1em;
					width: 100px;
				}
			}
		}
		.form-group.driver-name, .form-group.driver-phone, .form-group.driver-alt-phone {
			.form-field {
				input {
				  width: 670%;
					width: calc(100% - 120px);
				}
			}
		}
	}
	.panel-heading {
		.checkbox {
			float: right;
			font-weight: 400;
			font-size: .875em;
			line-height: 1;
			color: $black;
			b {
				font-weight: inherit;
			}
			label {
				min-height: auto;
			}
			input {
				margin-top: 0;
			}
		}
	}
	.btn {
		@include smaller-button;
	}
}

.table, table {
	.fa-paperclip {
		color: $gray-2;
	}
	.delete-row-btn {
		color: $red;
		&:hover {
			opacity: .75;
		}
	}
}

.filters-panel {
  .panel-heading, .panel-title {
  	font-weight: 600!important;
  }
  .btns {
  	@include clear-both;
  	.btn {
  		@include smaller-button;
      @include grouped-button;
      text-transform: uppercase;
      color: $white;
      border-color: $gray-1;
      background: $gray-2;
      font-weight: 600;
  	}
  }
  label {
  	margin: 1.5em 0 .5em 0;
  }
  div[class*="col-"] {
  	@include no-gutters;
  }
  .filter-checks {
    @include form-label;
  }
}

#weekday_select {
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	>label {
		margin-right: 1em;
	}
	.btn-group {
    label.btn {
    	opacity: .375;
			width: 14.285%;
			padding: .375em 0;
		  margin: 0;
		  background-color: $input-bg;
		  color: $black;
		  @include un-box-shadow;
		  &:not(:last-child) {
			  border-right: 0px
		  }
		  &.active {
		  	opacity: 1;
		  	font-weight: 600;
		  }
		  #page-header & {
				padding-right: 1em;
				padding-left: 1em;
			}
		}
	}
}


.ui-datepicker {
	@include barlow;
	button {
		@include barlow;
	}
	.ui-datepicker-header {
		font-weight: 600;
		background: $brand-primary;
		color: $white;
		.ui-icon {
			&.ui-icon-circle-triangle-e, &.ui-icon-circle-triangle-w {
				background: transparent;
				background-image: none;
				text-indent: 0;
				&:before {
	        @include font-awesome;
					color: $white;
					padding-right: 200%;
				}
			}
			&.ui-icon-circle-triangle-e {
				&:before {
					content: '\f0a9'
				}
			}
			&.ui-icon-circle-triangle-w {
				&:before {
					content: '\f0a8'
				}
			}
		} 
	}
	.ui-widget-content {
		border: none;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		text-align: center;
		font-weight: 800;
		color: $brand-primary;
		border: none;
		background-color: $gray-4;
		background-image: none;
	}
	.ui-datepicker-today {
		a {
			background-color: $gray-3;
		}
	}
	table th {
		font-weight: 600;
	}
}

body.sessions.new {
  form#new_user {
		max-width: 400px;
		label {
			margin: 1em 0 .5em 0;
		}
	}
}

#dispatch_runs_trips {
	padding: 0;
	#unassigned_trips_container {
		padding: 0;
		border-right: 1px solid $brand-primary;
		border-left: 1px solid $brand-primary;
		@include box-shadow($blur: .5rem, $spread: 0px, $opacity: 0.5);
		#unassigned_trips_panel {
			border: none;
			table {
				border: none;
			}
		}
		.panel-heading {
			background-color: $brand-primary;
			padding: 1em $object-pad;
			color: $white;
		}
		
	}
	.hsplitter {
		background-color: $brand-primary;
		height: 2em;
		padding-top: .25em;
		border-radius: 6px 6px 0 0;
		text-align: center;
		border-bottom: 1px solid $white;
		@include box-shadow($blur: .5rem, $spread: 0px, $opacity: .75);
		&::before {
			@include font-awesome;
			content: '\f58d';
			display: inline-block;
			height: 1em;
			color: $white;
		}
	}
}

body.dispatchers.index {
	#main {
		padding-left: 0;
		padding-right: 0;
	}
	#page-header, #dispatch_runs_container {
		padding-left: $content-pad;
		padding-right: $content-pad;
	}
}

body.availability-forecast {

	.forecast-col {
	  padding: $object-pad;
	  @include gradient-horiz($gray-4, $gray-3, 1, 1);
	  table, .table {
			white-space: nowrap !important;
			border-collapse: separate;
			thead, tbody, tfoot {
				tr {
					th {
						background: transparent;
						color: $black;
						@include gradient-vert($white,$gray-3,1,1);
						&.rotate-th {
						  height: 7.5em;
						  white-space: nowrap;
						  .rotate-th-inner {
							  transform: translate(-.5em) rotate(-75deg);
							  width: 1em;
							  .th-text {
								  padding-right: .5em;
								  font-size:  .875em;
								}
							}
						}
						&.top-level {
							text-align: center;
						}
					}

					td {
						background-color: $white;
						padding: .75rem .5rem .75rem .75rem;
					}
					th, td {
						&.new-group {
							border-left: 1px solid $gray-2!important;
						}
						&.date_cell {
							background-color: transparent;
							color: $black;
						}
					}
				}
			}
			tbody {
				border: none;
				tr {
					&.is_disabled td.number_cell {
				    background-color: $gray-3;
				  }
				  &.in_view td{
				    border-top: 2px solid $brand-primary;
				    border-bottom: 2px solid $brand-primary;
				  }
				  &:not(.is_disabled) td {
				    cursor: pointer;
				  }
				  &.in_view td,
				  &:not(.is_disabled):hover td{
				    font-style: italic;
				    border-top: 1px solid $brand-primary;
				    border-bottom: 1px solid $brand-primary;
				  }
					td {
						&.is_live {
					    background-color: $brand-primary;
					    color: $white;
					  }
					  &.out_of_live {
					    background-color: $gray-1;
					    color: $white;
					  }
					  &.disabled {
					    color: $gray-2;
					  }
					}
				}
			}
			thead {
				position: static;
				tr {
					&::after {
						height: 1px;
						background: $gray-2
					}
				}
			}
		}
		tr.lack_driver td.number_cell, div.lack_drivers {
	    background-color: $orange;
	    color: white;
	  }
	  tr.has_unassigned_run td.number_cell, div.has_unassigned_run {
	    background-color: $yellow;
	  }
		.table-responsive {
			max-height: 50em;
		}
	}

  .availability-col {

  	padding-left: $content-pad;

  	.panel-primary {
  		padding: 0;
  		.panel-heading, .panel-body {
  			padding: $object-pad;
  		}
  		.panel-body {
  			max-width: 100%;
  		}
  	}
  	.table, table {
  		tbody {
  			td {
  				vertical-align: middle;
  			}
  		}
  	}
  	.table-responsive {
  		overflow: visible;
  		width: 100%;
  		max-width: 100%;
  	}

	  .th-inner {
    	width: 100%; 
    	white-space:nowrap;
    }

    .hour_tick_label {
	    display: inline-block;
	    padding: 0px;
	    margin: 0px 0px 0px -5px;
	  }

	  .pull-right a[class*="unassign_"] {
	  	padding: 1em;
	  }

		
		.run-availability-table, .driver-availability-table {

			margin-bottom: 0px;
	    border-collapse: separate !important;
	    border-spacing: 0 1em !important;
		
			td {
		    padding: 0px 5px !important;
		  }

		  td.disabled {
		    color: $gray-4;
		  }

		  td.chart_cell {
		  	white-space: nowrap !important; 
			  &.driver_not_available {
			    background-color: $blue;
			  }
		  }

		  a.link_disabled {
		    pointer-events: none;
		    cursor: default;
		    i {
			    color: $gray-4;
			  }
		  }

		}
		.run-availability-table {

		  td.chart_cell {
		  	white-space: nowrap !important; 
		  	color: white;
				&.is_filled {
			    background-color: $purple-3;
			  }

			  &.is_driver_filled {
			    background-color: $purple;
			  }
			}
		}
		.driver-availability-table {

		  td.chart_cell {
		  	white-space: nowrap !important; 
		  	color: white;
			  &.is_filled {
			    background-color: $green-3;
			  }
			  &.is_run_filled {
			    background-color: $green;
			  }
			  &.driver_not_available {
			    background-color: $blue;
			  }
			  &.is_disabled {
			    background-color: $gray-4;
			  }
			}
		}

	  
  }

  .panel-expand-collapse {
    cursor: pointer;
  }
  #main {
    z-index: 11000 !important;
  }
  .modal {
    z-index: 12000 !important;
  }
}

.address_container {
  .address_fields {
  	& + label {
  		margin-top: 1em;
  	}
  }
}

select + .vehicle-capacity-configurations {
	margin-top: 1em;
}

body.providers {
	form {
		width: 100%;
	}
}

.provider_sidebar {
  // overflow-x: hidden;
  // overflow-y: auto;  
  // // Scrollable contents if viewport is shorter than content. 
  position: relative;
  .panel {
  	background: $gray-4;
  }
  .provider-menu {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	li {
  		padding: .25em 0;
  	}
  	.active {
  		font-weight: 600;
  	}
  }
  @media (max-width: 768px) { 
		display: none;
  }
}


.new-trip-badge {
  background-color: $red;
}
.capacity_warning {
  background-color: $yellow;
}

.show .latlng_fields {
	display: none;
}

form.customer-search {
	width: auto;
	input {
		width: auto;
	}
}

.modal {
	.bootbox-body {
		min-height: 4em
	}
	button.close {
		margin: 0;
		font-size: 1.5em;
		padding: .5em .75em;
		opacity: 1;
		background-color: $brand-primary;
		color: $white;
		font-weight: 600;

	}
}
{'fraction_non_alphanumeric': 0.15597013010341554, 'fraction_numerical': 0.02848417973260797, 'mean_word_length': 2.198194501436192, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5817877', 'n_tokens_mistral': 19453, 'n_tokens_neox': 15514, 'n_words': 3120}