@import url('../css/animated.css'); /*Animated */

#unSupportText {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#unSupportText .text{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 50px;
    text-align: center;
    color: white;
    background-color: rgba(0,0,0,.7);
    transform: translateY(-50%);
}

.wasen-panel {
    font-family: 'Kanit', sans-serif;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

#wasen-head {
    position: relative;
    width: 100%;
    height: 12%;
    color: white;
    text-align: center;
    background-color: #ff95d0;
    z-index: 100;
}

#wasen-head .arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 15px;
    margin: 0;
    font-size: 30px;
    cursor: pointer;
    transition-duration: .25s;
}

#wasen-head .arrows.right {
    right: 0;
}

#wasen-head .arrows:hover {
    color: #ffe5f9;
}

#wasenHeadText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    cursor: pointer;
    transition-duration: .25s;
}

#wasenHeadText:hover {
    color: #ffe5f9;
}

#wasen-body {
    display: grid;
    width: 100%;
    height: 88%;
    font-size: 26px;
    color: #9c9c9c;
}

.wasen-week {
    display: flex;
    width: 100%;
    height: 100%;
    border-top: 1px rgba(152, 152, 152, .1) solid;
    border-bottom: 1px rgba(152, 152, 152, .1) solid;
}

.wasen-week .wasen-day {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    transition-duration: .25s;
}

.wasen-week .wasen-day:hover {
    background-color: rgba(0,0,0,.05);
}

.wasen-week .wasen-day:active {
    background-color: #cabdc4;
    color: white;
}

.wasen-week .wasen-day.today{
    background-color: #ff95d0;
    color: white;
}

.wasen-week .wasen-day.selected {
    background-color: #ffc0e2;
    color: white;
}

.wasen-week .wasen-day .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0 auto;
    border-radius: 100%;
}

.wasen-week .wasen-day .circle.active {
    background-color: #ff51b1;
    color: white;
    padding: 15px;
}

.wasen-week .wasen-day .circle a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#wasenday-text {
    background-color: rgba(255,255,255,.7);
    color: #ff75c2;
    border-bottom: 2px #ff95d0 solid;
    z-index: 10;
    box-shadow: 0 0 5px 1px #cccccc;
}

#wasenday-text .wasen-day{
    cursor: context-menu;
}

#wasenday-text .wasen-day:hover {
    background-color: unset;
}

#wasenday-text .wasen-day.selected, #wasenday-text .wasen-day:active {
    background-color: unset !important;
    color: unset;
}

#wasenday-text a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wasen-day.active {
    background-color: rgba(0,0,0,.1);
}