:root {
    --bs-primary: #0d6efd;
    --bs-body-color: #212529;
}

body {
    font-family: 'Cairo', sans-serif;
}

.hero-section img {
    max-height: 560px;
    object-fit: cover;
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    border-radius: 0.375rem;
}
.hero-section {
    position: sticky;
    align-self: flex-start;
}
.accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--bs-primary);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ÊäÓíÞ ÇáÊæÌá ÇáÏÇÎáí */
.accordion .accordion-body .accordion-item {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.375rem;
}

.accordion .accordion-body .accordion-button {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
}

    .accordion .accordion-body .accordion-button:not(.collapsed) {
        background-color: rgba(13, 110, 253, 0.05);
    }

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section .lead {
        font-size: 1rem;
    }
}








.large-header {
    position: relative;
    width: 100%;
    background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

#large-header {
    background-image: url('https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/img/demo-1-bg.jpg');
}

.main-title {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title {
    text-transform: uppercase;
    font-size: 4.2em;
    letter-spacing: 0.1em;
}

.main-title .thin {
    font-weight: 200;
}

@media only screen and (max-width : 768px) {
    .demo-1 .main-title {
        font-size: 3em;
    }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");

.hero-section img {
    box-shadow: none !important;
}

a.navbar-brand img {
    height: 75px;
}

nav.navbar a[href="/account/Login"] {
    background-color: #a36a29;
    border-color: transparent;
}

    nav.navbar a[href="/account/Login"]:hover {
        color: #000000;
        font-weight: 600;
        box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 5px #ac221e, 0 0 0 10px #ffffff, 0 0 0 10.5px #ac221e;
        background: #ffffff;
        transform: scale(.9)
    }

.hero-section h1 {
    color: #a36a29;
    margin-top: 0.5rem;
    order: 1;
}

.hero-section {
    display: flex;
    flex-direction: column-reverse;
}

.page-wrapper .page-body-wrapper .page-sidebar {
    background-color: #ab201b;
}

    .page-wrapper .page-body-wrapper .page-sidebar .main-header-left {
        padding: 0px !important;
        height: fit-content !important;
        box-shadow: none;
    }

        .page-wrapper .page-body-wrapper .page-sidebar .main-header-left .logo-wrapper {
            padding-left: 0px;
        }

a.navbar-brand.d-inline-block {
    padding: 0px;
    margin-right: 0px;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-user {
    padding: 0px 10px 10px;
}

.accordion-item * {
    color: #a36a29 !important;
}

.hero-section > div {
    height: 100%;
}

.page-main-header .main-header-right svg, .page-main-header .main-header-right svg line, .page-main-header .main-header-right svg polyline {
    color: #a7292b !important;
}

a.nav-link.logout-button {
    background-color: #ab201b !important;
    border-color: transparent !important;
}

    a.nav-link.logout-button:hover {
        box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 5px #ac221e, 0 0 0 10px #ffffff, 0 0 0 10.5px #ac221e;
        transform: scale(.9)
    }

.page-sidebar a.navbar-brand img {
    filter: drop-shadow(2px 4px 6px black);
}

.page-wrapper .page-body-wrapper .sidebar *, .page-wrapper .page-body-wrapper .page-sidebar .sidebar-user h6 {
    color: #fff;
}

a.btn.btn-success {
    background-color: transparent !important;
    border-color: #597c09 !important;
    color: #597c09;
}

    a.btn.btn-success:hover, a.btn.btn-info:hover, a.btn[onclick*="downloadAndPrint"]:hover, a.btn[href*="/users/edit"]:hover, a.card:hover, a.btn[href="/Makhdoum/Create"]:hover {
        transform: scale(.9)
    }

a.btn.btn-info, a.btn[href="/Makhdoum/Create"] {
    background-color: #597c09 !important;
    border-color: transparent !important;
}

a.btn[onclick*="downloadAndPrint"] {
    background-color: transparent !important;
    border-color: #287be9 !important;
    color: #287be9 !important;
}

a.btn[onclick*="confirmDelete"] {
    color: #fff !important;
    background-color: #d30d06 !important;
    border-color: #d30d06 !important;
}

    a.btn[onclick*="confirmDelete"]:hover {
        background-color: transparent !important;
        color: #d30d06 !important;
    }

table:not(#all-activities-table) th {
    width: 29% !important;
}

td, th, .page-wrapper .page-body-wrapper .page-header h1, .page-wrapper .page-body-wrapper .page-header p, .card .card-body h5.card-title {
    text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background-color: #f8f9fd;
    color: #000 !important;
    border-color: #000;
}

a.btn[href*="/users/edit"] {
    background-color: transparent !important;
    color: #0095ff;
    border-color: #0095ff !important;
}

form[action="/Account/Login"] button {
    background-color: #ab211b;
    border-color: transparent !important;
}

    form[action="/Account/Login"] button:hover {
        background-color: #9d1b16;
    }

a.card {
    background-color: #efc1c126 !important;
}

i.bi-lightbulb::after {
    content: "\f1ab";
}

i.bi-music-note-beamed::after {
    content: "\f8d9";
}

i.bi-music-note-list::after {
    content: "\f001";
}

i.bi-person-fill::after {
    content: "\f3c9";
}

i.bi-journal-bookmark-fill::after {
    content: "\f647";
}

i.bi-book::after {
    content: "\f5da";
}

a[href*="activityId=4"] i.bi-brush-fill::after {
    content: "\f630";
}

a[href*="activityId=6"] i.bi-brush-fill::after {
    content: "\f53f";
}

a.card i {
    color: #ab201b !important;
    font-style: unset;
}

    a.card i::after {
        font-family: FontAwesome;
    }

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu > li > a > .fa-circle {
    display: none;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu li {
    border-bottom: 1px solid #ffffff1f;
}

button#export-btn {
    background-color: transparent !important;
    color: #81ba00;
    border-color: #81ba00 !important;
}

@media(min-width:600px) {
    .hero-section img {
        max-height: 100%;
        height: 100%;
    }

    main.container {
        display: flex;
        max-width: 100%;
        padding: 5rem 2rem 0px !important;
        gap: 2rem;
        justify-content: center;
    }

    .hero-section {
        margin-bottom: 0px !important;
        flex: 0 0 63%;
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
    }
}

@media(max-width:1440px) {
    .hero-section img {
        max-height: 730px;
    }
}

@media(max-width:1024px) {
    .hero-section img {
        max-height: 490px;
    }
}

@media(max-width:992px) {
    .hero-section img {
        max-height: 275px;
    }

    main.container {
        padding: 5rem 1rem 0px !important;
        gap: 1rem;
    }

    .hero-section {
        flex: 0 0 50%;
        padding: 10px;
    }
}

@media(max-width:600px) {
    .container-fluid:has(a.btn.btn-success) > div.row > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1rem;
    }
}

@media(max-width:400px) {
    a.btn.btn-success {
        margin-right: 0px !important;
    }
}
li.list-group-item a {
    color: blue !important;
}

i.bi-book::after {
    content: "" !important;
}
.btn.btn-warning:hover {
    color: #000000;
    font-weight: 600;
    box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 5px #ffc107, /* لون الـ btn-warning */
    0 0 0 10px #ffffff, 0 0 0 10.5px #ffc107;
    background: #ffffff;
    transform: scale(0.95);
    transition: all 0.3s ease-in-out;
}
.btn.btn-primary {
    color: white !important;
}
.btn.btn-primary:hover {
    color: black !important;
    font-weight: 600;
    box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 5px #0d6efd, 0 0 0 10px #ffffff, 0 0 0 10.5px #0d6efd;
    background: #ffffff;
    transform: scale(0.95);
    transition: all 0.3s ease-in-out;
}



@keyframes tickerScroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}