.cipient__card .card--rapid-calendar{font-size: 18px;position: absolute !important; width: 100%; height: auto; top: 100% !important; margin-top: 10px !important; border-radius: 8px}
.cipient__card .calendar--rapid{height: 100%;}

.calendar--rapid{display: flex;}

.calendar--rapid > .scroll-container{overflow: hidden; align-items: center; justify-content: center; width: 20%; float: left; height: 100%; position: relative;}
.scroll-container > .scroll-item{display: block; text-align: center; position: relative; z-index: 1; line-height: 13px}
.scroll-container > .scroll-item > span{display: inline-block; padding: 4px; width: 60px;}
.scroll-container > .scroll-item.prev,
.scroll-container > .scroll-item.next{opacity: 0.8;  color: #bbb}
.scroll-container > .scroll-item.current{ transform: scale(1.2); z-index: 2; position: relative;}
.scroll-container > .scroll-item.current::before{position: absolute; content: "";left: 0;width: 100%; height: 100%; opacity: 0.2}

.calendar--rapid > .scroll-container[data-type="month"]{min-width: 120px}
.calendar--rapid > .scroll-container[data-type="year"]{min-width: 80px}
.calendar--rapid > .scroll-container[data-type="hours"],
.calendar--rapid > .scroll-container[data-type="minutes"]{min-width: 45px}



/*hover*/
.calendar--rapid > .scroll-container:hover span{}


.calendar__header{background: #fff; border-bottom: solid 1px #ddd;}
.calendar__header h3 {display: inline-block; margin: 10px 0; text-align: center; width: 100%; color: #313131; font-weight: 300; font-size: 1.05em; }



.scroll-container.scrolling {
    transform: rotateX(0deg);
    transition: transform 0.5s ease-in-out;
}


/*calendar*/
/*general*/
.day{border-radius: 50%;}
.day.select-day::before{width: 110%;height: 108%; left: -5%;top: -4%;border-radius: 50%;position: absolute;content: ""; border: dotted 2px #038ab1;}
.day:hover{background:rgba(0,0,0,0.1)}
.day.today:hover{background:#9f4e22 }
.day{cursor: pointer;}
.today{background: #d3672d; color: #fff}


/*tooltip date*/
.tooltip--date td.select-day.today{color: #fff}

.tooltip--date{border-radius: 8px; overflow: hidden;}
.tooltip--date .container--calendar,.tooltip--status .container--calendar{border: none;border-radius: 0}

.tooltip--date .container--calendar .header-calendar a,
.tooltip--status .container--calendar .header-calendar a{color: #333}
.tooltip--date .container--calendar .header-calendar strong,
.tooltip--status .container--calendar .header-calendar strong{color: #000}
.tooltip--date .container--calendar,.tooltip--status .container--calendar{background: none}
.tooltip--date,
  .tooltip--status{border-radius: 8px; background: #fff;}
  .tooltip--status{left: 70px; }
.tooltip--date > i{top: 0; left:39% }
  .tooltip--status > i{top: 0; left:50% }
.tooltip--date > span,
  .tooltip--status > span:first-of-type{border-radius: 8px 8px 0 0;color: #fff; text-align: center;padding: 10px; position: absolute; left: 0; top: 0}
.tooltip--date > span a{border: 0;}
.tooltip--date > span strong{padding: 0 10px;}
.tooltip--date table,
  .tooltip--status table {width: 100%; height: 100%}

.tooltip--date td:hover,
  .tooltip--status td:hover{color: #000}
.tooltip--date td,
  .tooltip--status td{color: #888; font-weight: 400; font-size: 14px;cursor: pointer;}
.tooltip--date td,
  .tooltip--status td,
.tooltip--date th,
  .tooltip--status th{ text-align: center; }
.tooltip--date th,
  .tooltip--status th{text-transform: uppercase; font-size: 12px}
.tooltip--date td.today,
  .tooltip--status td.today{color: #fff; font-weight: bolder;}
.tooltip--date td.select-day,
  .tooltip--status td.select-day{color: #000; font-weight: bolder}

.tooltip--date--expire .select-expire-date{background: #696969; color: #eee}
.tooltip--status{padding-bottom: 0; text-align: center;}
.tooltip--status > span > a {border: 0;}
.tooltip--status #clear-tooltip-status{color: #000; text-align: center;}

/*.tooltip--date--expire{background: #fff; border-radius: 8px;width: 350px;padding-left:0;padding-right: 0;left: -100%!important;height: auto;margin-left: -41px; opacity: 1 !important; visibility: visible !important;}*/
/*.tooltip--date--expire i{left: 50%;margin-left: -4px}*/
.tooltip--date--expire ul{width: 100%;list-style-type: none;margin: 0;}
.tooltip--date--expire ul li{position: relative;text-align: center; width: 20%; display: inline-block;float: left;}
.tooltip--date--expire ul li:last-of-type{ border-radius: 0 0 8px 0}
.tooltip--date--expire ul li:first-of-type{border-radius: 0 0 0 8px}
.tooltip--date--expire ul li a{color: #000;font-size: 12px;}
.tooltip--date--expire ul li a i{font-weight: lighter;text-transform: none;}
.tooltip--date--expire ul li:last-of-type i{color: #000}

.expire-range{margin-top: 20px;padding: 0;/*border-top: 1px solid #ddd;padding: 0; position: absolute;bottom: 0; left: 0*/}
.expire-range li{overflow: hidden;}
.expire-range li a{padding: 14px 0 16px 0; display: block;}
.expire-range li:last-of-type a{padding: 15px}
.expire-range li a span{display: inline-block; width: 100%; padding: 0;}
.expire-range li a span:first-of-type{font-size: 14px;}
.expire-range li a span:last-of-type{font-weight: lighter;font-size: 10px;font-style: italic;text-transform: none;margin-top: -5px}
.expire-range li a i{font-size: 14px;padding: 5px}
.expire-range h4{margin-left: 20px;margin-top: -20px; font-size: 12px; height: 0}

.calendar--rapid[data-col="3"] > div{width: 33%; border: 0}
.calendar--rapid[data-col="3"] > div::before{border: 0}
.calendar--rapid[data-col="3"] > .scroll-container[data-type="year"]::before{border: 0}
/*icon*/
#other-expire-button{text-align: left; padding: 19px 20px;}
#other-expire-button span {margin: 1px;border-radius: 1px;float: left;width: 6px; height: 6px; background: #696969;display: inline-block;}