@import url('stratus-bootstrap-extension.css');

[x-cloak] {
    display: none !important;
}

.avatar-wrapper {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 150px; /* adjust as per your need */
    height: 150px; /* adjust as per your need */
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff; /* adjust as per your need */
}

@media (max-width: 768px) {
    .avatar-wrapper {
        width: 100px;
        height: 100px;
    }
}

.profile-pic {
    width: 100%;
    height: auto;
}

.border-bottom {
    border-bottom: 0.5px solid #d3dae3 !important;
}

.card {
    box-shadow: 0 0 2rem 0 rgba(136,152,170,.15) !important;
    border: 0.5px solid var(--primary-dark) !important;
}

.form-label {
    color: var(--primary-dark) !important;
    font-size: .85rem !important;
}

.item-select:hover {
    background-color: var(--primary);
    cursor: pointer;
}

.item:last-child {
    border: none !important;
}


/* Slide in from the right */
.slide-enter-start {
    transform: translateX(100%);  /* Starts off the screen (to the right) */
    opacity: 0;
}

.slide-enter-end {
    transform: translateX(0);     /* Finishes fully on the screen */
    opacity: 1;
}

/* Slide out to the right */
.slide-leave-start {
    transform: translateX(0);     /* Starts fully on the screen */
    opacity: 1;
}

.slide-leave-end {
    transform: translateX(100%);  /* Finishes off the screen (to the right) */
    opacity: 0;
}

/* Transition effects */
.slide-transition {
    transition: transform 0.3s ease, opacity 0.3s ease;
}