.image-cropper {
    width: 100px !important;
    height: 100px !important;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.box.bg-img,
.box .bg-img {
    border-radius: 10px;
}

.bg-img {
    position: relative;
    border-bottom: none;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.light-skin .g-forms {
    background-color: #e9edf2 !important;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem #00000013 !important;
}

.box {
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
    background-color: #fff;
    padding: 0;
    transition: .5s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px #523f690d;
}

.dark-background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/new/books.jpg');

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

img {
    max-width: 100%;
}

img,
svg {
    vertical-align: middle;
}

.bg-secondary-light {
    background-color: #e9edf2 !important;
    color: #172b4c;
}

.fs-100 {
    font-size: 100px;
}

.lg-icon {
    font-size: 50px;
}

.navbar-scroll a {
    color: var(--tb-nav-link-color);
}

.navbar-scroll a.active {
    color: rgba(var(--tb-link-color-rgb), var(--tb-link-opacity, 1));
}

.bottom-menu li {
    border-top: 3px solid rgb(233 237 242) !important;
}

.bottom-menu li.active {
    border-color: #43ab49 !important;
}

.table-responsive {
    margin: .25rem;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>thead>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th {
    padding: .7rem .3rem;
    vertical-align: middle;
}

.fs-large {
    font-size: large;
}

#back-to-top {
    bottom: 60px;
}

.text-overlay {
    color: white;
    text-shadow: 2px 2px 4px white;
}


@media (max-width: 767px) {
    .navbar-header {
        height: 50px;
    }

    .fs-small-on-sm {
        font-size: larger;
    }

    .sm-font {
        font-size: 12px;
    }

    .table-responsive .table {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .sm-font-on-mobile p {
        font-size: 12px;
    }

    .sm-font-on-mobile h1,
    .sm-font-on-mobile h2,
    .sm-font-on-mobile h3,
    .sm-font-on-mobile h4,
    .sm-font-on-mobile h5,
    .sm-font-on-mobile h6 {
        margin-top: 0;
        margin-bottom: 3px;
    }

    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }


    .card-body .table-responsive {
        margin-left: -13px !important;
        margin-right: -13px !important;
    }

    .table>tbody>tr>td,
    .table>tbody>tr>th,
    .table>thead>tr>th,
    .table>tfoot>tr>td,
    .table>tfoot>tr>th {
        padding: .1rem .1rem;
    }

    .form-control-xs-no-padding .form-control {
        padding: .2rem .2rem;
    }
}

@media (min-width: 577px) {
    .ms-sm-30 {
        margin-left: 30px !important;
    }

    .mt-sm-10 {
        margin-top: 10px !important;
    }
}

/* ── PWA install banner ─────────────────────────────────── */
.pwa-install-banner {
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
    border-radius: 14px;
    margin-bottom: 1rem;
    overflow: hidden;
    animation: pwaSlideIn .35s ease-out;
}

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

.pwa-banner-inner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
}

.pwa-banner-icon img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .15);
}

.pwa-banner-text {
    flex-grow: 1;
    min-width: 0;
}

.pwa-banner-title {
    font-weight: 700;
    font-size: .92rem;
    color: #0f766e;
    line-height: 1.2;
}

.pwa-banner-sub {
    font-size: .78rem;
    color: #0d9488;
    margin-top: 2px;
    line-height: 1.35;
}

.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.pwa-btn-install {
    background: linear-gradient(135deg, #0d9488, #0891b2);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: .4rem .9rem;
    font-weight: 600;
    font-size: .78rem;
    white-space: nowrap;
    transition: transform .12s;
}

.pwa-btn-install:hover {
    color: #fff;
    transform: translateY(-1px);
}

.pwa-btn-dismiss {
    background: transparent;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .12s;
}

.pwa-btn-dismiss:hover {
    background: #f1f5f9;
    color: #0f172a;
}

@media (max-width: 480px) {
    .pwa-banner-inner {
        padding: .65rem .8rem;
        gap: .6rem;
    }
    .pwa-banner-icon img {
        width: 40px;
        height: 40px;
    }
    .pwa-banner-title { font-size: .85rem; }
    .pwa-banner-sub { font-size: .72rem; }
    .pwa-btn-install {
        padding: .35rem .7rem;
        font-size: .72rem;
    }
}