body {
    font-family: Arial, Helvetica, sans-serif;
}
html{
    scroll-behavior: smooth;
}
@media screen and (max-width: 580px) {
    body {
        padding: 0 0em 6em 0em;
        margin: 0;
    }

    .header {
        margin: 0;
    }

    #backToList {
        width: 100%;
    }

    #page-content {
        padding: 15px 0 3em 0;
    }
    #page-content.withLoginLink{
        padding:35px 0 3em 0 !important;
    }
    #moduleTitleBar{
        margin-top:55px
    }

    #base-body-container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 581px) {
    body {
        padding: 0 0 0 0;
    }

    #page-content {
        padding: 0 3em 3em 3em;
        margin-top: 50px;
    }
    #page-content.withLoginLink{
        padding:0 !important;
    }
    #moduleTitleBar{
        margin-top:55px
    }
    #vehicleDetails,
    #vehicleNotes {
        padding: 1em 0 0 2em;
    }

}

#headerMenu {
    background-color: #163258;
}

.text-responsive {
    font-size: calc(100% + 1vw + 1vh);
}

.navbar-dark i {
    color: rgba(255, 255, 255, .75)
}

.navbar-dark i:focus,
.navbar-dark i:hover {
    color: rgba(255, 255, 255, 1)
}

.navbar-dark i.disabled {
    color: rgba(255, 255, 255, .25)
}

#homepageNavigation div {
    cursor: pointer;
    font-weight: 600;
    color: #FFF;
}

#homepageNavigationButton {
    background-color: #163258;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}

#landNow {
    cursor: pointer;
    /*width: 80%; */
    padding: 1em 0 1em 0;
    margin-top: 0;
    /*margin-bottom: 2em;*/
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 1px solid #163258;
    text-align: center;
    font-family: Arial, Helvetica,
        sans-serif;
    font-weight: 600;
    color: #FFF;
    background-color: #163258;
    box-sizing: border-box;
}

#landWithCustomDate {
    width: 80%;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 5px 0 5px 0;
    border: 1px solid #444444;
    text-align: center;
    font-family: Arial, Helvetica,
        sans-serif;
    font-weight: 400;
    font-size: 80%;
    color: #FFF;
    background-color: #444444;
    box-sizing: border-box;
    cursor: pointer;
}

#landSubmitButton {
    display: none;
}

.dispositionBox {
    border: 2px solid black;
    padding: 0;
    margin-top: 1em;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flexbox;
}

.dispositionBoxHeader {
    padding: 1em;
}

.highlightReservationBody {
    margin: 1em;
}

#backToList {
    cursor: pointer;
    padding: 1em 4em 1em 4em;
    margin-top: 0;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    border: 1px solid #163258;
    text-align: center;
    font-family: Arial, Helvetica,
        sans-serif;
    font-weight: 600;
    color: #FFF;
    background-color: #163258;
    box-sizing: border-box;
}

.clickableTable tr {
    cursor: pointer;
}

#landForm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1em;
}

#landForm fieldset {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#landForm #id_date_arrived {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.detailPageBody {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#vehicleDetails,
#vehicleNotes {
    padding: 0;
    line-height: 110%;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

#vehicleArrivalStatus {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

#vehicleDetailInner,
#vehicleNotesInner {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#vehicleDetailInner value,
#vehicleReservationDetail value,
#vehicleNotesInner value {
    float: right;
    padding-left: 1em;
}

#vehicleDetails p,
#vehicleNotes p{
    margin-top: .5em;
    margin-bottom: 0;
}

#vehicleHistory {
    /*
    display: flex;
    flex-direction: column;
    */
    margin-bottom: 3em;
}

#vehicleHistoryTable .vehicleHistoryEntry {
    border-top: 1px solid #dddddd;
    border-left: 0 solid #dddddd;
    border-right: 0 solid #dddddd;
    border-bottom: 2px solid #dddddd;
    flex: 1 0 100%;
    max-width: initial;
    padding-top: 5px;
    padding-bottom: 10px;
}

#vehicleHistoryTable div {
    /* padding: 5px; */
}

#historyTableHeading {
    text-align: center;
    font-weight: 100;
    margin-top: auto;
    margin-bottom: auto;
}

#historyTableHeadingDiv {
    background-color: #aaaaaa;
    color: #ffffff;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /*max-width: 470px;*/
    /*width: 95%; */
    text-align: center;
    flex-flow: column;
    margin-bottom: 1em;
    cursor: pointer;
    padding: 5px;
    min-height: 4em;
}

#currentCodeHistoryTableHeadingDiv {
    background-color: #163258;
    color: #ffffff;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 470px; */
    width: 100%;
    text-align: center;
    flex-flow: column;
    margin-bottom: 1em;
    cursor: pointer;
    padding: 5px;
    min-height: 4em;
}

#priorCodeHistoryTableHeadingDiv {
    background-color: #aaaaaa;
    color: #ffffff;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 470px; */
    width: 100%;
    text-align: center;
    flex-flow: column;
    margin-bottom: 1em;
    cursor: pointer;
    padding: 5px;
    min-height: 4em;
}

#serviceCodesVehicleHistoryTableHeadingDiv {
    background-color: #aaaaaa;
    color: #ffffff;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 470px; */
    width: 100%;
    text-align: center;
    flex-flow: column;
    margin-bottom: 1em;
    cursor: pointer;
    padding: 5px;
    min-height: 4em;
}

#vehicleEditForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#vehicleEditForm .helptext{
    font-size:75%;
    top: -20px;
    position: relative;
}
#vehicleEditForm #id_disposition{
    
}

.bold {
    font-weight: 700;
}

.errorMessage {
    background-color: #ffff00;
    width: 100%;
    margin: 1em 0 1em 0;
    padding: 1em;
    text-align: center;
}

.table_form {
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 1em;
}

.btn-group {
    width: 100%;
}

.btn-group [name=arrived] {
    display: none;
}

.table_form tr {
    margin-bottom: 5px;
}

#editSaveButton {
    width: 40%;
    float: left;
}

#createSaveButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    background-color: rgba(53, 71, 154, 1);
    color: #ffffff;
    transition: background-color 0.5s ease;
}

#createSaveButton:hover {
    background-color: rgba(53, 71, 154, .8);
    color: #ffffff;
    transition: background-color 0.5s ease;
}

#reserveThisVehicleToggle {
    width: 40%;
    float: left;
}

#editCancelButton {
    width: 40%;
    float: right;
}

#createCancelButton {
    width: 40%;
    float: right;
}

#quickSearchResultBox {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    margin-top: 1em;
    border-top: 1px solid #000000;
}

#quickSearchResultItem {
    margin: 0;
    border: 1px solid #aaaaaa !important;
    padding: 1em;
    cursor: pointer;
    transition-duration: .5s;
}

#quickSearchResultItem a {
    color: #000000;
    padding-left: 1em;
    transition-duration: 1s;
    text-decoration: none;
}

#quickSearchResultItem:hover {
    border-left: 2em solid #163258 !important;
}

#bottomCornerButtonBlock {
    position: fixed;
    right: 2em;
    bottom: 2em;
    height: 50px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    z-index: 999;
}

.bottomButtonBoxBootstrap {
    margin-bottom: 1em;
}

.bottomCornerButton {
    color: #ffffff;
    background-color: #163258;
    border-radius: 100%;
    height: 50px !important;
    width: 50px !important;
    padding: 50%;
    cursor: pointer;
    border: 2px solid #ffffff;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1em;
}

#vehicleAddButton {
    font-size: 40px;
}

td .errorList {
    margin-top: 1rem;
    margin-bottom: 0;
    background-color: #ffff00;
}

.createFormSection {
    /* border:1px solid #aaaaaa; */
    box-shadow: 0 0 0 1px #aaaaaa;
    border-radius: 10px;
}

.formSectionTitle {
    color: #FFFFFF;
    margin-top: 1em;
    margin-bottom: .5em;
    padding: .5em;
    text-align: center;
    font-weight: 200;
    background-color: rgba(53, 71, 154, .7);
    border-radius: 10px 10px 0 0;
}

.createFormSection td {
    padding-right: 10px;
}

.createFormSection label {
    font-weight: 400;
    padding-left: 10px;
}

.clickableTable thead th.orderable{
    white-space: nowrap;
}


.spacer10 {
    height: 10px
}

table.table thead th.orderable:after {
    content:'\f0dc';
    font-family: FontAwesome;
    color:#ffffff;
    padding-left: 5px;
}
table.table thead th.asc.orderable:after {
    content:'\f0de';
    font-family: FontAwesome;
    color:#ffffff;
    padding-left: 5px;
}
table.table thead th.desc.orderable:after {
    content:'\f0dd';
    font-family: FontAwesome;
    color:#ffffff;
    padding-left: 5px;
}

#all_vehicles_table thead,
#all_preorders_table thead {
    padding-left: 1em;
    padding-right: 1em;
}

#all_vehicles_table th,
#all_preorders_table th {
    background-color: #163258 !important;
    /*padding-left: 20px;*/
}

#all_vehicles_table th a,
#all_preorders_table th a {
    color: #ffffff !important;
    font-weight: initial;
}

.flexJustifyCenter {
    margin-left: auto;
    margin-right: auto;
}

#ConfirmRemoveReservationForm .btn-group {
    justify-content: center;
}

#removeReservationWarning {
    font-weight: 600;
    background-color: #163258;
    color: #ffffff;
    justify-content: center;
    padding: 1em;
    margin: 1em;
}

#removeReservationBtnGrp label {
    font-weight: 600;
    font-size: 125%;
    text-align: center;
}

.btn-circle {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    z-index: 999;
    pointer-events: initial;
    margin: 5px;
}

.btn-circle i {
    position: relative;
    top: -1px;
}

.btn-circle-sm {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 0.9rem;
}

.btn-circle-lg {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 1.5rem;
}

.btn-circle-xl {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 2rem;
}

#bottomCornerButtonBlockNew {
    pointer-events: none;
    max-width: initial;
}

#reservationDetailsButton {
    padding: 5px 0 5px 0;
    background-color: #163258;
    color: #ffffff;
}

.alert {
    /*z-index:99999;*/
    top: 55px
}

.fadeIn {
    opacity: 0;

    animation: fadeIn 1s ease-in-out forwards;
    animation-delay: 0s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slideDownAndFadeIn {
    animation: slideDownAndFadeIn 1s cubic-bezier(.74, .06, .4, .92) forwards;
}

@keyframes slideDownAndFadeIn {
    0% {
        opacity: 0;
        top: -50px;
    }

    100% {
        opacity: 1;
    }
}

.slideDownAndFadeInFast {
    animation: slideDownAndFadeInFast .5s cubic-bezier(.74, .06, .4, .92) forwards;
}

@keyframes slideDownAndFadeInFast {
    0% {
        opacity: 0;
        top: -50px;
    }

    100% {
        opacity: 1;
    }
}

.slideLeftAndFadeInFast {
    animation: slideLeftAndFadeInFast .5s cubic-bezier(.42, 0, .28, .97) forwards;
}

@keyframes slideLeftAndFadeInFast {
    0% {
        opacity: 0;
        margin-left: 100;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        margin-left: 0;
    }
}
.alert {
    animation: slideDownAndFadeInFast .5s cubic-bezier(.74, .06, .4, .92) forwards !important;
}
#customDateButton{
    background-color: #aaaaaa;
    color: #ffffff;
    text-align: center;
}
.rounded-top-1 {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.rounded-bottom-1 {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.formSaveButton {
    width: 100%;
    background-color: rgba(53, 71, 154, 1);
    color: #ffffff;
    transition: background-color 0.5s ease;
}

.formSaveButton:hover {
    background-color: rgba(53, 71, 154, .8);
    color: #ffffff;
    transition:  0.5s ease;
}
.formCancelButton {
}
.middleText{
    vertical-align: center !important;
}
/* REMOVE UP/DOWN ARROWS FROM NUMBER INPUTS ON FORMS */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none ;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#auto_platypus_topmenu ul li{
    list-style-type:none;
}
#header,
.breadcrumbs{
    background-color:#163258 !important;
}
.module h2, 
.module caption, 
.inline-group h2{
    background-color:#163258 !important;
    color:#ffffff !important;
}
#recent-actions-module h2{
    color:#ffffff !important;
}
#recent-actions-module a{
    color:#163258 !important;
}
#platypusAdminBody .module tbody a{
    color:#163258;
}
#platypusAdminBody caption{
    caption-side: top !important;
}
#platypusAdminBody .submit-row a.deletelink {
    height: unset;
}
#platypusAdminBody .navbar a{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}
#platypusAdminBody .navbar{
    padding: .5rem 1rem !important;
}
.ui-state-hover{
    background: #163258 !important;
    border: 1px solid #0d1e35 !important;
    color: #ffffff !important;
}
form#filter_form input{
    max-width: 14em;
}
form#filter_form #id_model_year{
    max-width: 8em;
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #163258 !important;
    box-shadow: 0 0 0 .2rem rgba(13, 30, 53, .25) !important;
}
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #0d1e35 !important;
    padding-right: calc(1.5em + .75rem);
    background-image: none !important;
    background-repeat: inherit;
    background-position: inherit;
    background-size: inherit;
}

/* Expand nav dropdown menus on hover */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block;
        transition: displaycolor 0.5s ease;
 }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    
}

/* Add slide animation to dropdown menus on hover */
@media only screen {
    .animate {
      animation-duration: 0.1s;
      -webkit-animation-duration: 0.1s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
    }
  }
  
  @keyframes slideIn {
    0% {
      transform: translateY(-1rem);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0rem);
      opacity: 1;
    }
  
    0% {
      transform: translateY(-1rem);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
    }
  
    100% {
      -webkit-transform: translateY(1);
      -webkit-opacity: 1;
    }
  
    0% {
      -webkit-transform: translateY(0rem);
      -webkit-opacity: 0;
    }
  }
  
  .slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
  }

.results_on_deck{
    position: absolute;
    top: 0;
    padding-top: 0 !important;
}
.handoff_age_15{
    background-color: #40e0d0 !important
}
.handoff_age_30{
    background-color: #F0E68C !important
}
.handoff_age_60{
    background-color: #F08080 !important
}
#quick-reference-page-content ol li{
    padding-bottom: 2px;
}
.quick-reference-body-section .container{
    scroll-margin-top:80px !important;
}
.quick-reference-body-section{
    scroll-snap-type: y proximity;
}

.btn-medium-custom {
    color: #212529;
    background-color: #e2e3e5 !important;
    border-color: #e2e3e5!important
}

.btn-medium-custom:hover {
    color: #212529;
    background-color: #cccccc !important;
    border-color: #cccccc
}

.btn-medium-custom.focus,
.btn-medium-custom:focus {
    color: #212529;
    background-color: #e2e3e5;
    border-color: #e2e3e5;
    box-shadow: 0 0 0 .2rem rgba(98, 98, 99, 0.5) !important
}

.btn-medium-custom.disabled,
.btn-medium-custom:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-medium-custom:not(:disabled):not(.disabled).active,
.btn-medium-custom:not(:disabled):not(.disabled):active,
.show>.btn-medium-custom.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.btn-medium-custom:not(:disabled):not(.disabled).active:focus,
.btn-medium-custom:not(:disabled):not(.disabled):active:focus,
.show>.btn-medium-custom.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(98, 98, 99, 0.5) !important
}
/*Fix for bootstrap modal dialog for quick reference*/
.modal-backdrop {
    display: none;
}

.modal {
    margin-top:50px;
    background: rgba(0, 0, 0, 0.5);
}
.table td.fit, 
.table th.fit {
    white-space: nowrap !important;
    width: 1% !important;
}
.topAppIcon{
    float:left; 
    max-height:40px
}
.platypusMuiMenuItem:hover{
    color:#163258;
    text-decoration: none;
}


.loading-overlay-container {
    /*display: none; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
  }

  .loading-overlay{
    display: none;
  }
  .loading-overlay-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    opacity: 0.6;
    z-index: 999;
  }

  .spin-loader {
    height: 100px;
    background: url("../static/images/autoplatypus_head_icon.png") no-repeat center center transparent;
    position: relative;
    top: 40%;
    background-size: contain;
    z-index: 99999;
    animation: myAnim 1s linear infinite normal forwards;
  }
  @keyframes myAnim {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}


.btn-outline-platy-danger {
    color: #721c24 !important;
    border-color: #721c24 !important
}

.btn-outline-platy-danger:hover {
    color: #fff !important;
    background-color: #721c24 !important;
    border-color: #721c24 !important
}

.btn-outline-platy-danger.focus,
.btn-outline-platy-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) !important
}

.btn-outline-platy-danger.disabled,
.btn-outline-platy-danger:disabled {
    color: #343a40 !important;
    background-color: transparent !important
}

.btn-outline-platy-danger:not(:disabled):not(.disabled).active,
.btn-outline-platy-danger:not(:disabled):not(.disabled):active,
.show>.btn-outline-platy-danger.dropdown-toggle {
    color: #fff !important;
    background-color: #343a40 !important;
    border-color: #343a40 !important
}

.btn-outline-platy-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-platy-danger:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-platy-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) !important
}