/*.main {
    position: absolute;
    width: 420px;
    height: 428px;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    transition: all 0.195s ease;
    transform-style: preserve-3d;
}*/

    .main.is-rotated-left {
        transform: translate(-50%, -50%) rotateY(-4deg);
    }

    .main.is-rotated-right {
        transform: translate(-50%, -50%) rotateY(4deg);
    }

.main .sideb,
.main .right-wrapper {
    background-color: transparent;
    width: 100%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

    .main .header {
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-between;
        width: 95%;
    }

        .main .header i {
            padding: 0 40px;
            cursor: pointer;
            color: #fff;
        }

        .main .header span {
            display: inline-block;
            margin: 0 3px;
            font-weight: normal;
            color: #fff;
            font-size: 17px;
        }

    .main .right-wrapper {
        background-color: #fff;
        color: white;
        transform-origin: left center;
        transform: rotateY(110deg);
        transition: all 0.5s;
       
    }

        .main .right-wrapper.is-active {
            transform: rotateY(0deg);
        }

        .main .right-wrapper .header {
            text-align: left;
            justify-content: center;
        }

        .main .right-wrapper .day {
            font-size: 12em;
            text-indent: -12px;
            display: block;
        }

        .main .right-wrapper .month {
            font-size: 2.5em;
        }

    .main .sideb .showDate {
        color: white;
        text-align: right;
        width: 100%;
    }

        .main .sideb .showDate i {
            cursor: pointer;
            background: #f05855;
            border-radius: 4px;
            padding: 8px 12px;
            transform: scale(1);
            transition: all 0.3s;
        }

            .main .sideb .showDate i.is-active {
                transform: scale(-1);
            }

    .main .sideb table {
        text-align: center;
        width: 90%!important;
        margin: 0 auto 0;
        table-layout: auto;
        border-collapse: collapse;
    }

        .main .sideb table tbody:before {
            content: "-";
            display: block;
            line-height: 0.75em;
            color: transparent;
        }

        .main .sideb table th {
            color: #fff;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 10px;
            font-family: robotoregular;
            font-weight: normal;
            text-align: center;
        }

        .main .sideb table td {
            padding: 13px 18px;
            color: #ced0ce;
            font-size: 13px;
            /*transition: all 0.3s;*/
            position: relative;
        }

            .main .sideb table td::before {
                content: "";
                display: none;
                width: 50%!important;
                height: 2px;
                position: absolute;
                left: 50%!important;
                top: 100%!important;
                /*transform: translate(-50%, -8px);
                background-color: #f88a01;*/
            }

            .main .sideb table td.currentDay::before {
                display: block;
            }

            .main .sideb table td.selectable {
                color: #fff;
                cursor: pointer;
                border-radius: 50%;
                height: 35px;
                width: 35px;
                background-color: transparent;
            }

                .main .sideb table td.selectable:hover {
                    background-color: #fff;
                    color: #f88a01;
                    border-radius: 50%;
                    height: 35px;
                    width: 35px;
                  
                }
            /*.main .sideb table td.between {
                background-color: #333;
                color: white;
            }*/
            .main .sideb table td.active, .main .sideb table td.hover {
                background-color: #fff;
                color: #f88a01;
                border-radius: 50%;
                height: 35px;
                width: 35px;
              
            }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .main .sideb table {
        text-align: center;
        width: 90% !important;
        margin: 0 auto 0;
        table-layout: auto;
        border-collapse: collapse;
    }
        .main .sideb table td.active, .main .sideb table td.hover {
            background-color: #fff;
            color: #f88a01;
            border-radius: 50%;
            height: 35px;
            width: 50px;
        }
        .main .sideb table td.selectable:hover {
            background-color: #fff;
            color: #f88a01;
            border-radius: 50%;
            height: 35px;
            width: 50px;
        }
        .main .sideb table td {
            padding: 13px 16px;
        }
}
@media screen and (max-width:768px){
    .main .header {
        width: 100%;
    }
    .main .sideb table td {
        padding: 13px 16px;
    }
    .main .header i {
        padding: 0 30px;
    }
}
@media screen and (max-width:320px) {
    .main .header i{
        padding:0 25px;
    }
    .main .sideb table {
        table-layout: fixed;
    }
}