.titleBar
{
	height:80px;
    /*background: rgba(255, 255, 255, 0.1);*/
    padding: 2px;
    border-radius: 10px;
    margin-bottom: 5px;
    text-align:center;
    vertical-align:middle;
    display:block;
}


.digit-picker
{
    display: inline-block; //flex;
    gap: 3px;
    //border:1px solid red;
    font-size: 24px;
    margin-top:auto;
    margin-left:auto;
}
.digit-container
{
    display: inline-block;
    flex-direction: column;
    align-items: center;
}

.digit
{
    width: 40px;
    height: 40px;
    color:#404040;
    text-align: center;
    font-size: 24px;
    background: white;
    border: 2px solid #3a6073;
    margin: 1px 0;
    line-height: 40px;
    font-weight: bold;
    border-radius: 5px;
}

.level
{
    width: 80px;
    height: 40px;
    color:#404040;
    text-align: center;
    font-size: 24px;
    background: white;
    border: 2px solid #3a6073;
    margin: 1px 0;
    line-height: 40px;
    font-weight: bold;
    border-radius: 5px;    
}


.custom-button
{
    width:160px;
    height:75px;
    
    background: #3a6073;
    color: white;
    font-size: 20px;
    padding: 12px 24px;
    border: 2px solid #0a4053;
    border-radius: 8px;
    cursor: pointer;
    display:inline-block;
    vertical-align:top;
    margin:2px;
    transition: background 0.3s ease, transform 0.2s ease;
}


.cntrl-button
{
    font-size: 20px;
    cursor: pointer;
    width: 40px;
    background: #3a6073;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 5px;
    transition: background 0.3s;
}

/*
.custom-button:hover
{
    background: #2c4b5c;
    transform: scale(1.05);
}
*/

.custom-button:active
{
    transform: scale(0.98);
}


.custom-button.on-state
{
    background: #1e90ff;
    border-color: #0a62a3;
    
}