.chooserPersons, .chooserButtons, .chooserDateCalendarCanvas
    {
    padding:20px; 
    }

.chooserDateCalendarCanvas
{
    padding-bottom:0px;
}


.chooserButtons 
    {
    background:rgba(0,0,0,.1);
    padding:20px; 
    position:fixed;
    bottom:0px;
    left:0px;
    box-sizing: border-box;
    width:100%;
    }
    
    
.chooserDateCalendarCanvas .chooserCalendarNavNext, .chooserDateCalendarCanvas .chooserCalendarNavPrev
{
    border-radius:100%;
}

.chooserButtons .button
{
    border-radius: 40px;
    height: 55px;
    line-height: 55px;
    padding: 0px 30px;
}

.chooserButtons .button.line
{
    background:#ffffffaa;
    border:none;
}

.chooserButtons .button.line:hover
{
    background:#fff;
}


.chooserDateCalendarCanvas .chooserCalendarNavNext {right:30px;}
.chooserDateCalendarCanvas .chooserCalendarNavPrev {left:30px;}


.chooserDateCalendarWrap
{
    box-shadow:var(--shadow);
    background:var(--white);
    border-radius:var(--radius);
}

.chooserPersons
    {
        display:flex;
        justify-content:center;
        flex-wrap: wrap;      
        gap:8px;
    }
 

.chooserPersons label
{
    font-size:13px;
    padding:0px;
    margin:0px;
    margin-top:10px;
}

.chooserPersons .chooser
{
    flex-grow:1;
    position:relative;    
    text-align:center;
    padding:15px;
    box-shadow:var(--shadow);
    background:var(--white);
    border-radius:var(--radius);
}

.chooserPersons .chooser .chooserAction
{
    display:flex;  
    justify-content:center;
    align-items:center; 
    align-content:center;
    flex-wrap:nowrap;
}


.chooserPersons .chooser .plus,.chooserPersons .chooser .minus
{     
    box-sizing: border-box;
    border-radius:100%;
    width:35px;
    height:35px;
    display:flex;
    
    justify-content:center;
    align-items:center; 
    align-content:center;

    font-size:24px;    
    text-align:center;   
    border:2px solid var(--major);
    color:var(--major);
    cursor:pointer; 
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}



.chooserPersons .chooser .plus:hover,.chooserPersons .chooser .minus:hover
{
    color:#fff;
    background:var(--major);
}

 

.chooserPersons .chooser input
{  
    color:var(--major);
    font-weight:bold;
    width:45px; 
    text-align:center;
    font-size:20px;
    border:none;
    background:none;
    padding:0px;margin:0px;
    box-shadow:none;
}


@media only screen and (max-width:700px) 
{     
    .chooserDateCalendarCanvas {padding:0px;border-radius:0px;}
    
    .chooserDateCalendarNav {display:none;}
    .chooserDateCalendarWrap {overflow-y:auto;height:65dvh;}

    .chooserButtons {height:15dvh;}

    .chooserPersons
        {
            box-sizing: border-box;
            justify-content:flex-start;
            flex-direction:row;
            gap:5px;
            flex-wrap:nowrap;
            overflow-x:auto;
            height:20dvh;
        } 

     .chooserPersons .chooser {padding:10px;}
    
    .chooserPersons label
    {     
     font-size:12px; 
     margin:0px;
    }
     
}