.l-calendar {
    height: 100%;
    position: relative;
}
.l-input-group {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    background: #3e506b;
    color: #fff;
    width: 427px;
}
.l-input-group input {
    font-size: 12px;
    width: 180px;
    font-weight: 600;
    text-align: center;
    outline: 0;
}

.l-input-wrap {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 0;
    justify-content: center;
    height: 100%;
    border-left:1px solid #4c5c75;
    box-shadow: -1px 0px 0px #303f59;
    align-items: center;
}
.l-input-wrap .l-sy {
    display: inline-block;
    margin: 0 6px;
}
.l-input-group .fa-search {
    width: 35px;
    height: 100%;
    border-left: 1px solid #4c5c75;
    box-shadow: -1px 0px 0px #303f59;
}

.l-inner-calendar {
    height: 260px;
    border-bottom: 1px solid #DBDEE6;
}

.l-calendar-group {
    bottom: -439px;
    position: absolute;
    left: -36px;
    background:#fff;
    border: 1px solid var(--dark-primary-color);
    width: calc(100% + 37px);
    z-index: 701;
}
.l-calendar-group .l-calendar-wrap {
    display: flex;
    flex-flow: row wrap;
}
.l-calendar-section {
    flex:1;
}
.l-calendar-section:nth-last-child(2) {
    border-right: 1px solid #dbdee6;
}
.l-calendar-section .l-set-group {
    background: #f8f9fb;
    color: #777879;
    font-size: 12px;
    padding: 15px 13px;
}
.l-calendar-section .l-set-group li {
    margin: 6px 0 0 0;
    padding: 0 0 0 10px;
    background:url(../../../../assets/img/icon-calendar-arrow.png) no-repeat 0 center;
    border-left: none;
}
.l-calendar-section .l-set-group li:first-child {
    margin-top:0;
}
.l-calendar-section .l-set-group li span {
    display: inline-block; 
    width: 52px;
    border-right: 1px solid #e6e8ec;
    margin: 0 10px 0 0;
}
.l-calendar-section .l-set-group li select {
    border: 1px solid #d7dde4;
    background:#fff;
}
.l-btn-group {
    border: none;
    height: 32px;
}
.l-btn-group .l-time-set {
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    justify-content: space-between;
}
.l-btn-group .l-time-set li {
    color:#777879;
    font-size: 13px;
    flex: 1;
    text-align: center;
    border-left:none;
}
.l-btn-group .l-time-set li.active button, .l-btn-group .l-time-set li button:hover, .l-btn-group .l-time-set li button:focus {
    border: none;
    background: var(--primary-color);
    color:#fff;
}
.l-btn-group .l-time-set button {
    background:none;
    color:#777879;
    border-left:none;
    height: 34px;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 0px;
    border-bottom: 1px solid #dbdee6;
    border-top: 1px solid #dbdee6;
    width: 100%;
}

.l-calendar-group .l-text {
    padding: 15px 13px;
    font-size: 13px;
    color: #38c2a2;
}

.ngui-datetime-picker {
    font: normal 12px sans-serif !important;
    border: none !important;
}
.ngui-datetime-picker > .days {
    margin: 4px !important;
    padding: 0 4px;
} 
.ngui-datetime-picker > .days .day.selected { 
    background: var(--primary-color) !important;
    color: #FFF !important;
}