/* ARCHIVE RESPONSE*/
.archive__error{
    animation: fade .5s both;
    color: #000000;
}
@keyframes fade{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/*  mobile icon */
.datePicker__icon{
    display: none;
}

/* DATEPICKER */
.datePicker{
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #DBDBDB;
    background: var(--color);
    width: 80%;
    margin: 0 0 0 20%;
    flex-wrap: wrap;
    padding: 1.5rem 0 1.5rem;
}
.datePicker__header,
.datePicker__body,
.datePicker__week{
    width: 100%;
    text-align: center;
    justify-content: center;
}

.datePicker__header{
    padding: 0 1.1rem 1rem;
}
.datePicker__nav{
    width: 15rem;
    height: 1.5rem;
    margin: 0 auto;
    justify-content: center
}
.datePicker__curYear{
    width: 50%;
}
.datePicker__selectedDate{
    width: 50%;
}
.datePicker__arrow{
    height: 100%;
    box-sizing: border-box;
    padding: .1rem
}
.datePicker__arrow:active{
    opacity: .4;
}
.datePicker__arrow:hover{
    opacity: .6;
}
.datePicker__arrow.prev{
    transform: rotate(180deg)
}
.datePicker__arrow svg{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    height: 100%;
    fill: #ffffff;
}

.datePicker__body,
.datePicker__week{
    text-align: left;
    justify-content: space-between;
}
.datePicker__body{
    opacity: 1;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    flex-wrap: wrap;
}
.datePicker__body-fadeOut{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    opacity: 0;
}
.datePicker__dayName,
.datePicker__day{
    font-size: .9rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: calc(100% / 7);
    color: #ffffff;
    padding: .6rem .4rem;
    border: 1px solid #DBDBDB;
    border: 1px solid var(--color);
    box-sizing: border-box;
}

.datePicker__day:hover{
    background: #DBDBDB;
    background: var(--color);
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
.datePicker__day.prevMonth,
.datePicker__day.nextMonth{
    opacity: .3;
}
.datePicker__day.prevMonth:hover,
.datePicker__day.nextMonth:hover{
    opacity: 1;
}
.datePicker__day.curDay{
    background: #ffffff;
    color: #DBDBDB;
    color: var(--color);
    
}
.datePicker__day.curDay:hover{
    background: #ffffff;
    color: #DBDBDB;
    color: var(--color);
    border: 1px solid transparent;
}
.loader-wrap{
    background: #ffffff;
    z-index: 12;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loader-picker{
    display: block;
    top: calc(50% - 1.5rem);
    left: calc(50% - 1.5rem);    
}

@media screen and (max-width: 1025px){
    .datePicker{
        margin: 0 auto 2rem;
    }
    .datePicker-isOpen{
        
    }
    .datePicker__icon{
        opacity: .7;
        z-index: 10;
        position: fixed;
        top: 10%;
        right: 0;
        display: block;
        background: var(--color);
    }
    
    .datePicker__icon svg{
        height: 2.5rem;
        padding: .5rem;
        width: auto;
        fill: #ffffff;
        
    }
    .datePicker__icon-isOpen{
        opacity: 1;
    }
    .datePicker__icon-isHide{
        right: -100%;
    }
    .content__box-datePicker{
        order: -1;
        position: static;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
        z-index: 9;
    }
    .content__box-isHide{
        position: fixed;
        top: 10%;
        left: 100%;
    }
    .content__box-isOpen{
        left: 0;
    }
}
@media screen and (max-width: 600px){
    .datePicker{
        width: 100%;
    }
}