#rolldate-confirm{
	padding: 0.5em;
    display: block;
    margin: auto;
	position: relative;
    z-index: 2;
	border: solid 2px white;
	/* opacity: 0.6; */
}


.rolldate-panel{
    width:95%;
    height:350px;
    z-index:1000;
    background-color: white;
    color: gray;
    object-fit: cover;
    opacity: 0.95;
    border-radius: 10px;
    margin: 50% auto 10%;
    -webkit-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    -webkit-transform:translate3d(0,273px,0);
    transform:translate3d(0,273px,0)
}  
.rolldate-content{
    position:relative;
    top:20px
} 
.rolldate-wrapper{
    position: relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    text-align: center;
} 
.rolldate-wrapper>div{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    height:173px;
    line-height:36px;
    overflow:hidden;
    -webkit-flex-basis:-8e;
    -ms-flex-preferred-size:-8e;
    flex-basis:-8e;width:1%
} 

.rolldate-wrapper ul{
    margin-top:68px;
    padding:0
} 

.rolldate-wrapper li{
    height:36px;
    list-style-type:none
} 

#rolldate-year, #rolldate-month, #rolldate-day{
    color: var(--font-color);
    font-size: var(--font-size-plus);
}
 
#date-search .mask-top{
    border-bottom:1px solid var(--theme-color);
    position: absolute;
    top: 0;
    left: 4%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width:90%;
    height:68px;
/*    background:-o-linear-gradient(bottom,var(--main-background),var(--theme-color));
    background:-webkit-gradient(linear, left bottom, left top, from(var(--main-background)), to(var(--theme-color)));
    background:-o-linear-gradient(bottom, var(--main-background), var(--theme-color));     
    background:linear-gradient(0deg, var(--main-background), var(--main-background));*/
    /*background: linear-gradient(to top, rgba(243, 240, 240, 0.5), rgb(243 240 240));*/
    background: linear-gradient(to top, var(--main-background_rgb_trans), var(--main-background_rgb_solid));
    opacity: 0.8;
    pointer-events:none;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    z-index:1;
    border-radius: 10px;
}

#date-search .mask-bottom{
    bottom:1px;
    border-top:1px solid var(--theme-color);
    position: absolute;
    bottom: 0;
    left: 4%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width:90%;
    height:68px;
/*    background:-o-linear-gradient(bottom,var(--main-background),var(--theme-color));
    background:-webkit-gradient(linear, left bottom, left top, from(var(--main-background)), to(var(--theme-color)));
    background:-o-linear-gradient(bottom, var(--main-background), var(--theme-color));     
    background:linear-gradient(180deg, var(--main-background), var(--theme-color));*/
    background: linear-gradient(to bottom, var(--main-background_rgb_trans), var(--main-background_rgb_solid));
    opacity: 0.8;
    pointer-events:none;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    z-index:1;
    border-radius: 10px;
}

#rolldate-buttons{
    display: flex;
}

#menu-details .mask-top{
    border-bottom:1px solid white;
    position: absolute;
    top: 0;
    left: 4%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width:90%;
    height:68px;
/*    background:-o-linear-gradient(bottom,var(--main-background),var(--theme-color));
    background:-webkit-gradient(linear, left bottom, left top, from(var(--main-background)), to(var(--theme-color)));
    background:-o-linear-gradient(bottom, var(--main-background), var(--theme-color));     
    background:linear-gradient(0deg, var(--main-background), var(--main-background));*/
    /*background: linear-gradient(to top, rgba(243, 240, 240, 0.5), rgb(243 240 240));*/
    background: linear-gradient(to top, var(--theme-color), var(--theme-color));
    opacity: 0.8;
    pointer-events:none;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    z-index:1;
    border-radius: 10px;
}

#menu-details .mask-bottom{
    bottom:1px;
    border-top:1px solid white;
    position: absolute;
    bottom: 0;
    left: 4%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width:90%;
    height:68px;
/*    background:-o-linear-gradient(bottom,var(--main-background),var(--theme-color));
    background:-webkit-gradient(linear, left bottom, left top, from(var(--main-background)), to(var(--theme-color)));
    background:-o-linear-gradient(bottom, var(--main-background), var(--theme-color));     
    background:linear-gradient(180deg, var(--main-background), var(--theme-color));*/
    background: linear-gradient(to bottom, var(--theme-color), var(--theme-color));
    opacity: 0.8;
    pointer-events:none;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    z-index:1;
    border-radius: 10px;
}