textarea{
    height: 3 em;
}
.socialIcons {
    margin-left: 10px;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
}

.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

#shopPicHere {
    height: 90px;
    width: 90px;
}

#addPicsHere .carousel-item {
    height: 150px;
}

.carouselImage {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.modal-header {
    height: 0px;
    border: none;
}

aside.main-sidebar.sidebar-dark-primary.elevation-4::-webkit-scrollbar {
    display: none;
}

aside.main-sidebar.sidebar-dark-primary.elevation-4 {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.stickyWithSidebar {
    position: sticky;
    max-width: 100vw;
    left: 0px;
}

.sidebar-open:not(.layout-top-nav) .stickyWithSidebar {
    left: 250px;
    max-width: calc(100vw - 250px);
}

@media (min-width: 991.98px) {
    .sidebar-collapse .stickyWithSidebar {
        left: 4.6rem;
        max-width: calc(100vw - 4.6rem);
    }
}
.socialIcons  {
    color: black;
}
.dark-mode .socialIcons {
    color: #3f6791;
}
.content-wrapper{
    height:fit-content;
}
.productHeartBtn{
    color: red;
}
.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}
#durationContainerDiv table, #durationContainerDiv th, #durationContainerDiv td {
    border: 1px solid black;
    border-collapse: collapse;
}
#addProductsHere .card{
    width: 100%;
}
span.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: gray;
    border-radius: 100px;
}
.editor-toolbar.fullscreen {
    z-index: 1035 !important;
}
.content-wrapper{
    padding-bottom: .5rem;
}
.fidelityTitleBtn{
    width: 100%;
}
.photoPreview {
    max-width: 100px; 
    max-height: 100px;
}
.card-header[data-toggle="collapse"] {
    cursor: pointer;
}
.chevron-icon {
    transition: transform 0.3s ease;
}
.collapsed .chevron-icon {
    transform: rotate(0deg);
}
.chevron-icon {
    transform: rotate(180deg);
}
@media (min-width: 600px) {
    .serviceBlock {
        transition: width 0.3s ease, max-width 0.3s ease;
        width: 100%;
    }
    .serviceBlock:has(.serviceHeader.collapsed) {
        transition: width 0.3s ease, max-width 0.3s ease;
        width: fit-content;
    }
    /* Settings sections with width animation */
    .settingsSection {
        width: 100%;
        transition: width .3s ease;
    }
    .settingsSection.collapsed-setting {
        width: auto;
    }
}

/* Auto-save animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.auto-save-indicator {
    font-size: 0.85em;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Time input styling - compact and responsive */
.time-input {
    width: auto;
    max-width: fit-content;
    display: inline-block;
}

/* Ensure time fields look good when side-by-side on larger screens */
@media (min-width: 768px) {
    [data-field] .time-input {
        min-width: 140px;
    }
}

/* Number input styling - compact width based on content */
.number-input {
    width: auto;
    max-width: 150px;
    display: inline-block;
}

@media (min-width: 768px) {
    [data-field] .number-input {
        min-width: 120px;
    }
}

/* Field help toggle styling */
.field-help-toggle {
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease;
}

.field-help-toggle:hover {
    color: #007bff !important;
    text-decoration: none;
}

.field-help-content {
    margin-top: 0.25rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-left: 3px solid #17a2b8;
    border-radius: 0.25rem;
    animation: slideDown 0.3s ease;
}

.dark-mode .field-help-content {
    background-color: #2c3034;
    border-left-color: #17a2b8;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}