.service-item {
    border: 1px solid $border-color;
    padding: 16px;
    @include rounded(10px);
    position: relative;
    margin-bottom: 16px;
    span {
        color: $gray-600;
        &.service-title {
            color: $gray-900;
        }
    }
    &.active {
        border-color: $primary;
        background: $light-200;
    }
    &.radio-select {
        input {
           display: none;
        }
    }
    input {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
    &.active {
        input {
            opacity: 1;
        }
    }
}
.multistep-form {
    .booking-card {
        background: $light-transparent;
        border-width: 1px;
        border-radius: 20px;
        h4 {
            font-size: $font-size-18;
        }
        .card-header {
            border-radius: 10px 10px 0 0;
        }
        > .card-header {
            background: $light-transparent;
            border-radius: 20px 20px 0 0;
        }
        > .card-footer {
            background: $light-transparent;
            border-radius: 0 0 20px 20px;
        }
    }
}
.form-wizard-steps {
    margin-bottom: 24px;
    li {
        margin-right: 24px;
        position: relative;
        &::after {
            content: "";
            width: 70%;
            height: 1px;
            border: 1px dashed $gray-transparent;
            position: absolute;
            right: -50px;
            top: 12px;
            @include respond-below(sm) {
                display: none;
            }
        }
        @include respond-below(sm) {
            margin-right: 0;
            margin-bottom: 20px;
        }
        &:last-child {
            margin-right: 0;
            &::after {
                display: none;
            }
        }
        &.progress-active {
            .profile-step {
                .multi-steps {
                    background: $primary;
                }
                h6 {
                    color: $gray-900;
                }
            }
        }
        &.progress-activated {
            .profile-step {
                .multi-steps {
                    background: $success;
                }
                h6 {
                    color: $gray-900;
                }
            }
            &::after {
                border-color: $success;
            }
        }
        .profile-step {
            display: flex;
            align-items: center;
            flex-direction: column;
            .multi-steps {
                width: 24px;
                height: 24px;
                background: $gray-transparent;
                color: $white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: $font-size-16;
                margin: 0 auto 8px;
            }
            h6 {
                color: $gray-300;
                font-size: $font-size-14;
            }
        }
    }
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
	background-color: $primary;
	text-shadow: unset;
}
.bootstrap-datetimepicker-widget table {
	th {
		font-size: $font-size-12;
		font-weight: $font-weight-semibold;
		color: $gray-600;
		width: 26px;
		height: 24px;
		line-height: 24px;
		&.prev, &.next {
			padding-bottom: 8px;
			span {
				width: 20px;
				height: 20px;
				font-size: $font-size-12;
				border: 1px solid $light-900;
				@include rounded(50%);
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
				align-items: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				justify-content: center;
				-webkit-justify-content: center;
				-ms-flex-pack: center;
				&:hover {
					background: $dark;
					border-color: $dark;
					color: $white;
				}
			}
		}
	}
	td {
		font-size: $font-size-12;
		color: $gray-900;
		&.day {
			width: 26px;
			height: 39px;
			line-height: 24px;
		}
	}
} 
.bootstrap-datetimepicker-widget {
	z-index: 999 !important;
	.picker-switch {
		padding-bottom: 8px;
	}
}
.bootstrap-datetimepicker-widget table td.today:before {
	border-bottom-color: $primary;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: transparent;
}
.booking-wizard-slots {
    .visits {
        span.visit-rsn {
            min-width: 70px;
            height: 24px;
            background: $gray-transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: $font-size-12;
            &::before {
                display: none;
            }
        }
        input {
            &:checked {
                ~ .visit-rsn {
                    background: $cyan;
                    color: $white;
                }
            }
        }
    }
}
.payment-tabs {
    ul {
        li {
            .nav-link {
                border: 1px solid $gray-transparent;
                background: $white;
                display: flex;
                align-items: center;
                justify-content: center;
                color: $gray-600;
                width: 100%;
                padding: 15px 4px;
                font-size: $font-size-14;
                &.active {
                    background: $light-200;
                    border-color: $primary;
                    color: $gray-600;
                }
            }
        }
    }
    .input-icon {
        span {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        input {
            padding-left: 30px;
        }
    }
    .pass-group {
        input {
            padding-left: 40px;
        }
        .toggle-password {
            right: unset;
            left: 10px;
        }
        .toggle-password-sub {
            right: unset;
            left: 10px;
        }
    } 
}
.booking-more-info {
    margin-bottom: 40px;
    span {
        color: $gray-900;
    }
}
.booking-id-badge {
    background: $success-transparent;
    border: 1px solid $success;
    color: $success;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    font-weight: 500;
}
.booking-modal {
    overflow: hidden;
    .modal-content {
        max-height: calc(100vh - 94px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .modal-dialog {
        max-width: 1020px;
    }
} 