/*==================================================
GENERAL
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#eef3f8;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:#2d3436;

}

.wrapper{

    width:100%;

}

/*==================================================
HEADER
==================================================*/

.top-header{

    background:#17375e;

    color:#fff;

    padding:10px 0px;

    box-shadow:0 4px 15px rgba(0,0,0,.15);
    margin: 0px 15px;

}

.logo-box{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#ffffff20;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.dashboard-title {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 3px;
}

.dashboard-subtitle{

    margin:0;

    opacity:.8;

}

/* .year-box{

    display:inline-block;

    background:#ffffff15;

    border-radius:10px;

    padding:15px 30px;

}

.year-box span{

    font-size:14px;

    display:block;

}

.year-box h3{

    font-size:34px;

    font-weight:bold;

    margin-top:3px;

} */

.year-box{
    display:inline-block;
    background:rgba(255,255,255,0.15);
    padding:10px 10px;
    border-radius:12px;
    min-width:135px;
}

.year-dropdown{
    background:#ffffff;
    border:none;
    border-radius:8px;
    font-weight:600;
    color:#17375e;
    height:45px;
}

.year-dropdown:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 0.2rem rgba(13,110,253,.25);
}

/*==================================================
SECTION
==================================================*/

.section-heading{

    background:#17375e;

    color:#fff;

    padding:15px 20px;

    font-size:24px;

    font-weight:700;

    border-radius:8px;

}

.section-bar{

    background:#17375e;

    color:#fff;

    border-radius:8px;

    padding:12px 18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

}

/*==================================================
KPI CARD
==================================================*/

.kpi-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transition: .35s;
  height: 100%;
  border-left: 2px solid #178d96;
}

.kpi-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 35px rgba(0,0,0,.15);

}

.icon {
  width: 45px;
  height: 45px;
  margin: auto;
    margin-bottom: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin-bottom: 2px;
}

.blue{

    background:#0d6efd;

}

.green{

    background:#198754;

}

.orange{

    background:#fd7e14;

}

.red{

    background:#dc3545;

}

.purple{

    background:#6f42c1;

}

.cyan{

    background:#0dcaf0;

}

.number {
  font-size: 20px;
  font-weight: 600;
  color: #17375e;
}

.label {
  font-size: 14px;
  margin-top: 8px;
  min-height: 25px;
}

.growth{

    margin-top:1px;

    color:#198754;

    font-weight:600;

}

/*==================================================
STATISTICS CARD
==================================================*/

/* .stat-card{

    background:#fff;

    border-radius:15px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

    height:100%;

}

.stat-card:hover{

    transform:translateY(-5px);

}

.stat-card h6{

    color:#6c757d;

    margin-bottom:15px;

    font-weight:600;

}

.stat-card h2{

    color:#17375e;

    font-size:36px;

    font-weight:700;

}

.stat-card p{

    margin-top:10px;

    color:#6c757d;

} */

/*==================================================
CHART CARD
==================================================*/

.chart-card{

    background:#fff;

    border-radius:15px;

    padding:25px;

    height:100%;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.chart-title{

    color:#17375e!important;

    font-weight:700;
    font-size: 1.25rem;

}

.chart-card hr{

    margin:15px 0;

}

/*==================================================
GENDER
==================================================*/

.gender-male{

    font-size:90px;

    color:#0d6efd;

}

.gender-female{

    font-size:90px;

    color:#e83e8c;

}

/*==================================================
AGE PROGRESS
==================================================*/

.age-row{

    margin-bottom:20px;

}

.age-row span{

    display:block;

    margin-bottom:6px;

    font-weight:600;

}

.progress{

    height:12px;

    border-radius:50px;

    background:#e9ecef;

}

.progress-bar{

    border-radius:50px;

}

/*==================================================
PURPOSE CIRCLE
==================================================*/

.purpose-box{

    display:flex;

    justify-content:center;

    margin-top:20px;

    margin-bottom:25px;

}

.circle{

    width:180px;

    height:180px;

    border-radius:50%;

    border:18px solid #0d6efd;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:bold;

    color:#17375e;

}


/*==================================================
PORT GRID
==================================================*/

.port-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:15px;

}

.port{

    color:#fff;

    text-align:center;

    padding:20px;

    border-radius:10px;

    font-weight:700;

    font-size:16px;

    transition:all .3s ease;

    cursor:pointer;

    box-shadow:0 5px 12px rgba(0,0,0,.12);

}

.port:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

.port.blue{
    background:#0d6efd;
}

.port.green{
    background:#198754;
}

.port.orange{
    background:#fd7e14;
}

.port.red{
    background:#dc3545;
}

.port.purple{
    background:#6f42c1;
}

.port.cyan{
    background:#0dcaf0;
}


/*==================================================
BUTTONS
==================================================*/

.btn-dashboard{

    background:#17375e;

    color:#fff;

    border:none;

    border-radius:8px;

    padding:10px 25px;

    transition:.3s;

}

.btn-dashboard:hover{

    background:#0d2f54;

    color:#fff;

}


/*==================================================
TABLES
==================================================*/

.table-dashboard{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.table-dashboard thead{

    background:#17375e;

    color:#fff;

}

.table-dashboard th{

    padding:14px;

}

.table-dashboard td{

    padding:14px;

}


/*==================================================
CARD ANIMATION
==================================================*/

.kpi-card,
.stat-card,
.chart-card{

    transition:all .35s ease;

}

.kpi-card:hover,
.stat-card:hover,
.chart-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#e8edf4;

}

::-webkit-scrollbar-thumb{

    background:#17375e;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0d2f54;

}


/*==================================================
FOOTER
==================================================*/



/*==================================================
UTILITY CLASSES
==================================================*/

.shadow-light{

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

}

.shadow-heavy{

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.rounded-xl{

    border-radius:18px;

}

.bg-dashboard{

    background:#eef3f8;

}

.text-dashboard{

    color:#17375e;

}

.text-success-custom{

    color:#198754;

}

.text-danger-custom{

    color:#dc3545;

}

.text-warning-custom{

    color:#fd7e14;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1400px){

    .dashboard-title{

        font-size: 16px !important;

    }

    .dashboard-subtitle {

  font-size: 11px !important;
}

    .number{

        font-size:14px;

    }

    .circle{
        width:140px !important;
        height:140px !important;
        font-size: 20px !important;
    }

    .card-text h2 
    {
       font-size: 14px !important;
       font-weight: 600 !important;
    }

     .card-text p {
         margin-top: 8px !important;
          font-size: 9px !important;
    }

    .card-footer-text {
  margin-top: 15px !important;
  font-size: 9px !important;

}

.global-card {

  min-height: 115px !important;

}


.icon {
  width: 30px !important;
  height: 30px !important;

}

.fa-solid, .fas {
  font-size: 18px !important;
}


.section-bar {
  font-size: 12px !important;
}


.label {
  font-size: 9px !important;
  margin-top: 8px !important;
  min-height: 15px !important;
}


.growth {
  margin-top: 1px !important;
  font-size: 9px !important;
}

.chart-title {

  font-weight: 600 !important;
  font-size: 12px !important;
}


.year-box {

 padding: 8px 9px 8px 14px !important;
    min-width: 109px !important;

}

.year-dropdown {

  height: 30px !important;
}
.form-select {
    font-size: 9px;
    font-family: "Segoe UI",Arial,sans-serif;
}


.section-bar {
  padding: 6px 18px !important;
}

p {
  font-size: 11px !important;
}

.age-row span {
  margin-bottom: 2px !important;
  font-size: 10px !important;
}
span {
  font-size: 12px !important;
}
strong {
  font-size: 12px !important;
}

.port {

  font-weight: 600 !important;
  font-size: 10px !important;

}

.text-center.text-muted {
  font-size: 10px !important;
}
.mt-2 {
  font-size: 9px;
}
}


@media (max-width:1200px){

    .year-box{

        margin-top:20px;

    }

    .gender-male,
    .gender-female{

        font-size:70px;

    }




}



@media (max-width:992px){

    .top-header{

        text-align:center;

    }

    .year-box{

        margin-top:20px;

    }

    .dashboard-title{

        font-size:24px;

    }

    .section-heading{

        font-size:20px;

    }

    .section-bar{

        font-size:16px;

        flex-direction:column;

        gap:8px;

    }

    .kpi-card{

        padding:20px;

    }

    .number{

        font-size:26px;

    }





}


@media (max-width:768px){

    .top-header{

        padding:20px;

    }

    .logo-box{

        width:55px;

        height:55px;

        font-size:24px;

    }

    .dashboard-title{

        font-size:22px;

    }

    .dashboard-subtitle{

        font-size:14px;

    }

    .section-heading{

        font-size:18px;

        padding:12px 15px;

    }

    .section-bar{

        padding:10px 15px;

    }

    .circle{

        width:140px;

        height:140px;

        border-width:14px;

        font-size:24px;

    }

    .port-grid{

        grid-template-columns:1fr;

    }


}


@media (max-width:576px){

    .dashboard-title{

        font-size:20px;

    }

    .year-box h3{

        font-size:28px;

    }

    .kpi-card{

        padding:18px;

    }

    .icon{

        width:55px;

        height:55px;

        font-size:22px;

    }

    .number{

        font-size:24px;

    }

    .gender-male,
    .gender-female{

        font-size:60px;

    }

}


/*==================================================
END OF FILE
==================================================*/







/* ===============================
   Global Scenario Card
================================= */

.global-card{

    background:#ffffff;
    border-left:2px solid #178d96;
    border-radius:10px;
    box-shadow:0 6px 15px rgba(0,0,0,.08);
    padding:14px 18px 14px;
    min-height:100px;
    transition:.3s;
}

.global-card:hover{

    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.15);

}

.card-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

}

.card-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1b3557;
}

.card-text p{

    margin-top:8px;
    color:#666;
    font-size:15px;

}

.card-icon{

    color:#178d96;
    font-size:55px;
    line-height:1;

}

.card-footer-text {
  margin-top: 10px!important;
  font-size: 14px;
  font-weight: 600;
  color: #0d9b58;
}

/* Responsive */

@media(max-width:768px){

    .card-text h2{

        font-size:34px;

    }

    .card-icon{

        font-size:45px;

    }

    .card-footer-text{

        margin-top:25px;

    }

}



.fa-solid, .fas {
  font-weight: 600;
  font-size: 25px;
}