#mpdatepicker-modal{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
    font-family: 'VazirCodeX','Vazir Code', sans-serif;
    font-size: 11pt;
    display: none;
    align-content: center;
    justify-content: center;
}
.mpdatepicker {
    background:no-repeat 3px;
    text-align:center;
    padding:7px;
    padding-left:25px;
    border:1px solid  silver;
    background-position-x: 5px;
    background-position-y: 2px;
}
#mpdatepicker-block {
    font-family: 'VazirCodeX';
    direction: rtl;
    text-align:center;
    padding:10px 0;
    border-radius: 4px 4px 0 0;
    background: #fff;
    /*position: fixed;*/
    /*left:0;*/
    /*right:0;*/
    /*bottom:0px;*/
    min-height:200px;
    margin:auto;
    width:400px;
    box-shadow: 0px 0px 30px #444 ;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          not supported by any browser */
    max-width: 100%;
}

#mpdatepicker-block.static {
    position: static;
    margin: inherit;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    direction: rtl;
}

#mpdatepicker-block table{
    width: 95% ;
    margin: auto;
	box-shadow: none;
}


#mpdatepicker-block table th{
    width: 14.285710%;
    text-align: center !important;
    padding: 7px;
    font-weight: 900 ;
}
#mpdatepicker-block table td{
    padding:7px 3px;
    cursor:  pointer ;
    text-align: center !important;
    border:  solid 2px transparent;
}

#mpdatepicker-block table td.mp-other-month{
    color: gray;
}


#mpdatepicker-block table td.selected{
    border:  solid 2px #3399ff;
    border-radius: 3px;
}

#mpdatepicker-block table td.today{
    font-weight: 900;
    text-shadow: 0px 0px 3px #333 ;
}


#mpdatepicker-block table td:hover{
    background:#b1dcfb  ;
}

.rotate {

    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.mpbtn{
    padding:10px;
    cursor:  pointer ;
    font-family: 'arial';
    padding-bottom: 4px;
} 
.mpbtn:hover{
    background:#b1dcfb
} 
.mpfleft{
    float:left;
    font-size:30px;
    padding-top:0;
} 
.mpfright{
    float:right;
    font-size:30px;
    padding-top:0
}

.mpheader{
    /*width:140px;*/
    margin:5px auto;
    /*border:1px solid silver;*/
}

.mp-picked{
    border: 2px solid  #3366ff !important;
    border-radius: 3px;
}

.mp-today-td,.mp-today{
    font-weight: 900;
    color: #3366ff;
    text-shadow: 1px 1px 2px #000;
    /*box-shadow: inset #3366ff 0 0 4px;*/
}

.mpdatepicker {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsWCCkyWrAXowAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAJDSURBVDjLnZU9a1RREIaf2b2ra9gFU6g5uLEwIgoBBRWsRFSiweYq/gIbQSsFDVpIQBSsxMKf4AcIcgoRRFGLIGJnExU/ihQeTSlKkt14x2YOHC53N9Epdnlnzpk795135kKFOa+XndcGfcx53ei8TjmvUo7V+ty5AWynvx0BrgKrTgjQGxBbBjTkUpQD4rx2gPdAqxQrBjxQ4/3E9x0YrwGXSsnG7f8k0K1I9ge4BvwGziT+EeB8DdhQunDY+CmANRUJ68BH4CawtxRrifM6BRyqeCVhsFWdeZQBXyr4+1+by4yrU8B8KjXgW1JB2zq7kKhjkzUiNmgzcDt2cSbk0gG2AVuAzyGX0QRfB04DW823C5gDxgyPWkGaJRIh5LJok6AlvAz0Qi5dww2rbCnkouZbUdj9tDfQJ87rXWACeG0PUOv6MyAzPAb8SnjOgAPAS4sXwDHgTmbEzwMPTHfLpq/7wDrDx4EAvLPzTWAP8DAZxYOA4Lzec16fl7bJhxK+4LxOJrjtvH6NvJnvh/N66184lNX4YpcbzusQsNa2TN15zUx/PXv1lvO63pK0je9hU0QvJs+M0N1GcGxKB5ixuVUb/EXgYjLPI8DTpNvDUYd14E3I5WjCx2zIZX+CzwKzIZdXhgX4FHLZl5wJgMSK6iss3iYwlG4VoFb6BNTij8RJGSDYLrCU4AWgiFOSbh9xXqeBc8ALq7QAJoHHQMPwDuCnLYPI/QTwJBndE8AVcV6btix3JpWWd13V7kt9ArwFpv8Ctt/A5Glz+/0AAAAASUVORK5CYII=") !important;}

#mpmonth{
    display: inline-block;
    padding: 5px;
    font-weight: 700;
    position:relative;
    width: 25%;
    text-align: center;
}

#mpmonth:hover{
    background:  #b1dcfb ;
}


#mpmonth ul{
    display: none;
    position: absolute;
    background:  #fff ;
    list-style:none;
    padding: 5px 0;
    bottom:-200px;
    right:-20px;
    border-radius: 4px;
    box-shadow: 1px 1px 7px #000 ;
}


/*-450px height*/
@media ( max-height :1000px ) {

    #mpmonth ul{
        width: 250px;
    }
    #mpmonth ul li{ 
        width: 47%;
        float: right;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing:border-box;
    }
}

#mpmonth ul li{
    padding: 5px;
    width: 120px;
    font-weight: 100;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
#mpmonth ul li:hover{
    border-bottom: 2px solid #13a7c7;
    background: #b1dcfb  ;
}

#mpmonth span{
    display: block;
    text-align: center;
    cursor: pointer;
}

#mpyear{
    width: 25%;
    text-align: center;
    padding: 5px;
    display: inline-block;
    color:gray;
}

#mpyear input{
    width: 6em;
    text-align: center;
    padding:  5px;
    border:  0;
    outline: none ;
}

#mpyear input:focus{
    outline:  #b1dcfb 3px solid ;
}


.mp-footer{
    display: block;
    padding: 0 5% ;
}

.mp-footer a{
    width: 30%;
    display: inline-block;
    padding: 7px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
    cursor: pointer;
}

.mp-footer a.mp-close:hover{
    background: rgba(255,128,0,0.3) ;
}
.mp-footer a.mp-today:hover{
    background: rgba(0,255,0,0.3) ;
}
.mp-footer a.mp-clear:hover{
    background: rgba(255,0,0,0.3) ;
}

.mp-footer input{
    width: 3.3em;
    text-align: center;
}

.mptimepicker{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    direction: ltr;
}
.mptimepicker *{
    transition: 200ms;
}
.mptimepicker > div{
    height: 85px;
    overflow: hidden;
    cursor: ns-resize;
    position: relative;
}
.mptimepicker .mp-holder{
    position: absolute;
    top: 2em;
    left: 0;
    right: 0;
    line-height: 1.706em;
}
.mp-select-item{
    color: #666666;
}
.mp-select-item.active{
    color: #000000;
    font-size: 19px !important;
    background: #00000033;
}