﻿
:root 
{
    --logo-width: 252px;
    --logo-height: 206px;
}

.er-ren-bal-grid
{
    display:                grid;
    grid-template-columns:  1fr;
    position:               absolute;
    left:                   50%;
    transform:              translateX(-50%);
    grid-template-columns:  1fr;    
    border:                 1px solid #efefef;
    grid-row-gap:           5px;
    margin-top:             20px;
    padding:                20px;
    border-radius:          4px;
    width:                  clamp(375px, 80%, 800px);
}

.er-ren-bal-logo-grid 
{
    display:                flex;
    justify-content:        center;
}

.er-ren-bal-status 
{
    display:                flex;
    flex-flow:              row;
}

@media (min-width: 375px)
{
    .er-ren-bal-header-1 
    {
        font-size:          18px;
        font-weight:        600;
        margin-top:         5px;
    }

    .er-ren-bal-info 
    {
        margin-top:         10px;
        font-size:          14px;
    }

    .er-ren-bal-status 
    {
        font-size:          14px;
    }

    .er-ren-bal-cc-logo 
    {
        width:              calc( var(--logo-width) * .55 );
        height:             calc( var(--logo-height) * .55 );
    }
}

@media (min-width: 430px) 
{
    .er-ren-bal-header-1 
    {
        font-size:          18px;
        font-weight:        600;
    }

    .er-ren-bal-cc-logo 
    {
        width:              calc( var(--logo-width)  * .65 );
        height:             calc( var(--logo-height) * .65 );
    }
}

@media (min-width: 768px) 
{
    .er-ren-bal-header-1 
    {
        font-size:          20px;
        font-weight:        600;
    }

    .er-ren-bal-cc-logo 
    {
        width:              calc( var(--logo-width) * .75 );
        height:             calc( var(--logo-height) * .75 );
    }
}

@media (min-width: 1200px) 
{
    .er-ren-bal-header-1 
    {
        font-size:          16px;
        font-weight:        600;
    }

    .er-ren-bal-cc-logo 
    {
        width:              calc( var(--logo-width) * .85 );
        height:             calc( var(--logo-height) * .85 );
    }
}