/* bootstrap helpers */
.text-xs-left {
    text-align: left;
}
.text-xs-right {
    text-align: right;
}
.text-xs-center {
    text-align: center;
}
.text-xs-justify {
    text-align: justify;
}

/* general style */
.appointmentSchedulingHeader {
    background-color: rgba(108, 117, 125, 1);
    border-bottom: 1px solid rgba(217, 218, 219, 1);
    color: white;
    padding: 10px 0;
}

.appointmentSchedulingShadedHeader h2 {
    margin: 0;
    font-size: 120%;
}

.appointmentSchedulingShadedHeader a:link {
    font-size: 80%;
}

.appointmentSchedulingShadedHeader {
    background-color: #e8e8e8;
    padding: 6px 0;
    margin: 0 0 10px 0;
    border-bottom: solid 1px #7b7b7b;
    border-top: solid 1px #7b7b7b;
}

.appointmentSchedulingShadedFooter {
}

.appointmentSchedulingHeader h1 {
    margin: 0;
}

.orgLogoContainer {
    background-color: white;
    display: inline-block;
    border-radius: 3px;
}

.appointmentSchedulingHeader .orgLogoContainer img {
    max-height: 100px;
    max-width: 100%;
    padding: 4px 6px;
}

.container.appointmentSchedulingHeader .img-responsive.orgLogo {
    max-height: 100px;
}

.container.scheduleContainer {
    max-width: 30em;
    /*max-width: 600px;*/
}

.backButton {
    padding-left: 0;
}

.selectOption {
    background-color: #fff;
    display: inline-block;
    border: solid 2px #ced4da;
    border-radius: 3px;
    margin: 2px 4px;
    opacity: 0.8;
    width: 100%;
    height: 120px;
}

.selectOption:hover {
    border: solid 2px #7b7b7b;
    cursor: pointer;
    opacity: 1;
}

.selectOption.selected {
    border: solid 2px #83befd;
    font-weight: bold;
    opacity: 1;
}

.selectImage {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 80px;
}

.textAreaOutput {
    white-space: pre-wrap;
}

.containerNarrow {
    max-width: 30em;
}

.serviceOptions .list-group-item h5,
.serviceOptions .list-group-item p {
    margin-bottom: 0;
}

.optionsList h5 {
    font-size: 100%;
}

.smallFormLabels label {
    color: gray;
}

.alert ul {
    margin: 0;
}

button.btn {
    cursor: pointer;
    line-height: 1.5;
}

.field-error {
    background-color: #fff9fb;
    border: 1px dashed #ff0000;
    padding: 1em;
}

.field-error.field-warning {
    background-color: #fff3cd;
    border-color: #856404;
}

.fieldMessage {
    font-size: 0.8em;
}

.fieldMessage-error {
    color: #ff0000;
}

.fieldMessage-warning {
    color: #856404;
}

.list-group-item-action:hover .rightArrowCol {
    background-image: url("/images/rightArrowBlack.png");
}

.list-group-item-action:hover .leftArrowCol {
    background-image: url("/images/leftArrowBlack.png");
}

.rightArrowCol,
.leftArrowCol {
    background-image: url("/images/rightArrowBlack.png");
    background-size: 0.6rem;
    background-repeat: no-repeat;
    background-position: center center;
    height: 1.8rem;
    opacity: 0.5;
}
.leftArrowCol {
    background-image: url("/images/leftArrowBlack.png");
}

.selectedVehicle {
    border-radius: 0 0 0.4rem 0.4rem;
    box-shadow: inset 0 4px 6px -4px rgb(0 0 0 / 40%);
    background-color: rgba(94, 102, 109, 1) !important;
}

.editIconLink {
    float: left;
    line-height: inherit !important;
}

.editIconLink:link {
}

.editIconLink:hover {
    background-image: url("/images/black80.png");
}

.logOutIcon {
    height: 1.25rem;
    position: relative;
    top: -1px;
    width: 1.25rem;
}

.customerNameHeader {
    border-bottom: 1px solid #a0a0a0;
    border-top: 1px solid #a0a0a0;
}

.btn-light {
    border: 1px solid #e2e6ea !important;
}

.serviceOptions.loading {
    background-image: url("https://snap21.com/assets/img/loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 200px;
}

.bg-dark {
    background-color: #272828 !important;
}

.card-header h4 {
    font-size: 1.2rem !important;
}

.btn-primary {
    background-image: url("/images/black50.png");
    background-color: #62c7ff !important;
}

.btn-primary:hover {
    background-color: #32a7cf !important;
}

.btn {
    border: transparent;
}

.cardHeading {
    padding-bottom: 0.35rem;
    position: relative;
    text-align: center;
}

.cardHeading .editIconLink {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.cardHeading h4 {
    position: relative;
    top: 3px;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

.btn-outline-secondary {
    border: 1px solid #7f7f7f !important;
    color: #7f7f7f !important;
}

.btn-outline-secondary:hover {
    background-color: #7f7f7f !important;
    color: #ffffff !important;
}

a.btn {
    line-height: 1.5;
}

.containerNarrow img {
    max-width: 100%;
}

.mileageCard {
    background-color: #d4d7da;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    margin: 0rem 1rem 1.5rem 1rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.mileageCard hr {
    background-color: #a2a3a5;
}

.mileageCard .row {
    margin-bottom: 0.75rem;
}

.mileageHeader {
    font-weight: bold;
    text-align: center;
}