/*
------------------------------------------------------------
Hope Charity Management System
Global Stylesheet
PHP 7.4.7
------------------------------------------------------------
*/

html{
    direction:rtl;
    scroll-behavior:smooth;
}

body{
    direction:rtl;
    background:#f4f7fa;
    color:#343a40;
    font-family:"Tahoma","Segoe UI",sans-serif;
    font-size:15px;
}

/* ==========================================================
   Navbar
========================================================== */

.navbar-brand{
    font-weight:bold;
}

.navbar-brand img{
    margin-left:8px;
}

/* ==========================================================
   Cards
========================================================== */

.card{
    border:none;
    border-radius:14px;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
    transition:.25s;
}

.card:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* ==========================================================
   Dashboard Cards
========================================================== */

.dashboard-card{
    border-right:5px solid #0d6efd;
}

.dashboard-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
}

.bg-balance{
    background:#0d6efd;
}

.bg-services{
    background:#198754;
}

.bg-subscriptions{
    background:#fd7e14;
}

.bg-revenues{
    background:#20c997;
}

.bg-expenses{
    background:#dc3545;
}

/* ==========================================================
   Tables
========================================================== */

.table{
    vertical-align:middle;
}

.table thead{
    background:#0d6efd;
    color:#fff;
}

.table-hover tbody tr:hover{
    background:#f3f7ff;
}

/* ==========================================================
   Buttons
========================================================== */

.btn{
    border-radius:8px;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info{

    box-shadow:0 2px 6px rgba(0,0,0,.08);

}

/* ==========================================================
   Forms
========================================================== */

.form-control,
.form-select{

    border-radius:8px;

}

.form-control:focus,
.form-select:focus{

    box-shadow:none;

    border-color:#0d6efd;

}

.required{

    color:#dc3545;

}

/* ==========================================================
   Search Area
========================================================== */

.search-box{

    background:#fff;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

/* ==========================================================
   Statistics
========================================================== */

.stat-number{

    font-size:34px;

    font-weight:bold;

}

.stat-title{

    color:#6c757d;

}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

    background:#fff;

}

.sidebar .nav-link{

    color:#495057;

}

.sidebar .nav-link:hover{

    background:#0d6efd;

    color:#fff;

}

.sidebar .nav-link.active{

    background:#0d6efd;

    color:#fff;

}

/* ==========================================================
   Login
========================================================== */

.login-card{

    border-radius:20px;

}

/* ==========================================================
   Footer
========================================================== */

footer{

    font-size:15px;

}

footer .developer{

    font-size:20px;

    font-weight:bold;

}

/* ==========================================================
   Badges
========================================================== */

.badge{

    font-size:13px;

}

/* ==========================================================
   Pagination
========================================================== */

.pagination .page-link{

    color:#0d6efd;

}

.pagination .active .page-link{

    background:#0d6efd;

    border-color:#0d6efd;

}

/* ==========================================================
   Images
========================================================== */

.logo{

    max-width:90px;

}

.table-image{

    width:70px;

    border-radius:8px;

}

/* ==========================================================
   Upload Preview
========================================================== */

.preview-image{

    max-height:180px;

    border-radius:8px;

    margin-top:10px;

}

/* ==========================================================
   Animations
========================================================== */

.fade-in{

    animation:fade .4s;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    .dashboard-icon{

        width:55px;

        height:55px;

        font-size:22px;

    }

    .stat-number{

        font-size:26px;

    }

}

@media (max-width:768px){

    body{

        font-size:14px;

    }

    .table{

        font-size:13px;

    }

    footer{

        text-align:center;

    }

}