/* Mobile first @media examples for reference :) */
/*// Small devices (landscape phones, 576px and up)*/
/*@media (min-width: 576px) { ... }*/

/*// Medium devices (tablets, 768px and up)*/
/*@media (min-width: 768px) { ... }*/

/*// Large devices (desktops, 992px and up)*/
/*@media (min-width: 992px) { ... }*/

/*// Extra large devices (large desktops, 1200px and up)*/
/*@media (min-width: 1200px) { ... }*/



/* Padding to align with navbar */

.pt-nav {
    padding-top: 5rem;
}


/* Global transition */

.trans-std{
    transition: all .2s ease;
}


/* Custom CSS for Bookedin.nl */
/* Copyright Robin and Jord */

#createNewCalendarModal .modal-body img {
    object-fit: cover;
}

/* Authentication form setup */

.stepper-nav {
    flex-direction: column;
    align-items: start;
    display: flex;
}

.padding-nav {
    width: 26.563rem;
    padding: 170px 3.5rem;
}

.stepper-item {
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    padding: 0;
    margin: 0;
    display: flex;
}

.current {
    transition: color 0.2s ease;
}

.completed .stepper-icon {
    transition: color 0.2s ease;
    background-color: #EEF6FF;
    border: 0;
}

.completed .stepper-title {
    opacity: 1;
    color: #B5B5C3;
}

.completed .stepper-desc {
    opacity: 1;
    color: #B5B5C3;
}

.stepper-wrapper {
    display: flex;
    align-items: center;
}

.stepper-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background-color: #EEF6FF;
    border: 0;
    margin-right: 1.5rem;
}

.current .stepper-icon {
    transition: color 0.2s ease;
    background-color: #2c5cfe;
    border: 0;
}

.stepper-check {
    display: none;
    font-size: var(--bs-stepper-icon-check-size);
}

.current .stepper-check {
    display: none;
}

.stepper-number {
    font-weight: 600;
    color: #3E97FF;
    font-size: 1.25rem;
}

.current .stepper-number {
    color: white;
}

.stepper-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stepper-title {
    color: #3F4254;;
    opacity: 1;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.current .stepper-title {
    opacity: 1;
    color: #B5B5C3;
}

.stepper-desc {
    opacity: 1;
    color: #A1A5B7;
}

.current .stepper-desc {
    opacity: 1;
    color: #B5B5C3;
}

.stepper-line {
    display: block;
    flex-grow: 1;
    margin-left: calc(40px / 2);
    border-left: 1px dashed #E1E3EA;
    margin-top: 2px;
    margin-bottom: 2px;
}

.h-40px {
    height: 40px !important;

}

.py-10 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.flex-column {
    flex-direction: column !important;
}

.d-flex {
    display: flex !important;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-column-fluid {
    flex: 1 0 auto;
}

.card {
    border: 1px solid #F4F4F4;;
}

.form-body {
    margin-left: 25.563rem;
    z-index: 0;
    transition: all .2s ease;
    padding-top: 7.5rem;
}

.pb-10 {
    padding-bottom: 2.5rem !important;
}

.current [data-kt-stepper-element=info], .current [data-kt-stepper-element=content] {
    display: flex;
}

.form-body .text-dark {
    color: #181C32 !important;
}

.text-dark {
    --bs-text-opacity: 1;
}

.fw-bold {
    font-weight: 600 !important;
}

.form-body h2 {
    font-size: 1.5rem;
}

.text-muted {
    color: #A1A5B7 !important
}

.fw-semibold {
    font-weight: 500 !important;
}

.fs-6 {
    font-size: 1.075rem !important;
}

.link-primary {
    color: #2c5cfe !important;
}

.fv-plugins-icon-container {
    position: relative;
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs) {
    box-shadow: none;
}

.btn-check:checked + .btn.btn-outline.btn-outline-dashed, .btn-check:active + .btn.btn-outline.btn-outline-dashed, .btn.btn-outline.btn-outline-dashed:focus:not(.btn-active), .btn.btn-outline.btn-outline-dashed:hover:not(.btn-active), .btn.btn-outline.btn-outline-dashed:active:not(.btn-active), .btn.btn-outline.btn-outline-dashed.active, .btn.btn-outline.btn-outline-dashed.show, .show > .btn.btn-outline.btn-outline-dashed {
    border-color: #2c5cfe;
}

.btn-check:checked + .btn.btn-active-light-primary, .btn-check:active + .btn.btn-active-light-primary, .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-light-primary:hover:not(.btn-active), .btn.btn-active-light-primary:active:not(.btn-active), .btn.btn-active-light-primary.active, .btn.btn-active-light-primary.show, .show > .btn.btn-active-light-primary {
    color: #2c5cfe;
    border-color: #EEF6FF;
    background-color: #EEF6FF !important;
}

.btn-check:checked .btn.btn-outline.btn-outline-dashed.active {
    border-color: #2c5cfe;

}

.btn.btn-outline.btn-outline-dashed {
    border-width: 1px;
    border-style: dashed;
}

.btn.btn-outline-dashed {
    border: 1px dashed #E1E3EA;;
}

.btn {
    --bs-btn-color: #181C32;
    outline: none !important;
}

.actions {
    padding: 30px 205px;
}

.actions-next {
    padding: 30px 150px;
}

.min-margin {
    margin-top: -5px;
}

@media (min-width: 992px) {
    .p-lg-15 {
        padding: 3.75rem !important;
    }

    .w-lg-700px {
        width: 700px !important;
    }

    .flex-lg-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .pb-lg-15 {
        padding-bottom: 3.75rem !important;
    }
}

/* End authentication form setup */