@charset "utf-8";
/* CSS Document */
/*
|--------------------------------------------------------------------------
| SpaceWeather CSS
|--------------------------------------------------------------------------
|
| Styling voor alle SpaceWeather componenten
|
| Versie 1.0
|
*/
/*
|--------------------------------------------------------------------------
| Newell Indicator
|--------------------------------------------------------------------------
*/

.newell-bar {

    width: 100%;

    height: 10px;

    background: rgba(255,255,255,0.10);

    border-radius: 6px;

    overflow: hidden;

    margin-top: 10px;

}

.newell-fill {

    width: 0%;

    height: 110%;

    background: linear-gradient(
        90deg,
        #00d26a,
        #ffd500,
        #ff7a00,
        #ff2d55
    );

    transition: width .6s ease;

}

.newell-label {

    margin-top: 8px;

    text-align: center;

    font-size: 0.9rem;

    color: #d8d8d8;

}

/*
|--------------------------------------------------------------------------
| Aurora Forecast
|--------------------------------------------------------------------------
*/

.forecast-box{

    max-width:780px;

    margin:18px 0;

    padding:14px 18px;

    border-radius:10px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.forecast-title{

    color:#bbb;

    font-size:14px;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.forecast-value{

    font-size:28px;

    font-weight:bold;

    margin-bottom:6px;

}

.forecast-text{

    color:#ddd;

    font-size:14px;

    line-height:1.5;

}

/*
|--------------------------------------------------------------------------
| Dashboard
|--------------------------------------------------------------------------
*/

.sw-dashboard{

    max-width:780px;

    margin:20px 0;

    padding:18px;

    border-radius:10px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.sw-title{

    color:#e5e5e5;

    font-size:22px;

    font-weight:600;

    margin-bottom:18px;

}

.sw-grid{

    display:grid;

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

    gap:12px;

}

.sw-card{

    padding:12px;

    border-radius:8px;

    background:rgba(255,255,255,.04);
	
	min-height: 95px;

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.sw-card{

    transition:.2s ease;

}

.sw-card:hover{

    background:rgba(255,255,255,.07);

}

/*
|--------------------------------------------------------------------------
| Dashboard kleuren
|--------------------------------------------------------------------------
*/

.sw-green{
    border-left:4px solid #4caf50;
}

.sw-yellow{
    border-left:4px solid #ffd54f;
}

.sw-orange{
    border-left:4px solid #ff9800;
}

.sw-red{
    border-left:4px solid #f44336;
}

.sw-blue{
    border-left:4px solid #42a5f5;
}

.sw-gray{
    border-left:4px solid #9e9e9e;
}

.sw-label{

    color:#9d9d9d;

    font-size:12px;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:10px;

}

.sw-value{

    color:white;

    font-size:32px;

    font-weight:700;
	
	line-height:1.1;

}

.sw-small{

    color:#ddd;

    font-size:13px;

    margin-top:6px;

    line-height:1.4;

}

/*
|--------------------------------------------------------------------------
| Aurora Alert
|--------------------------------------------------------------------------
*/

.aurora-alert{

    margin:20px 0;

    padding:16px;

    border-radius:10px;

    border-left:6px solid #4caf50;

    background:rgba(255,255,255,.05);

}

.aurora-alert-title{

    font-size:22px;

    font-weight:bold;

    margin-bottom:8px;

}

.aurora-alert-text{

    color:#dddddd;

    line-height:1.5;

}