.period-selector-value-container {
    cursor: pointer;
    padding: 4px;
}

.period-selector-value-container .fa {
    color: #2f5c7a !important; 
    font-size: 18px;
    margin-right: 4px;
}


.drp-types, 
.drp-periods {
    float: left;
    margin-top: 8px;
    text-align: left;
}

.daterangepicker {
    width: 487px;
}
.daterangepicker .drp-types ul,
.daterangepicker .drp-periods ul {
    list-style: none;
    list-style-position: initial;
    list-style-image: initial;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.daterangepicker .drp-types,
.daterangepicker .drp-periods {
    font-size: 12px;
}

.daterangepicker .drp-periods {
    min-width: 100px;
    max-width: 300px;
}

.drp-types-header,
.drp-periods-header {
    font-size: 12px;
    padding: 8px 12px;
    font-weight: bold;
}

.daterangepicker .drp-periods-list {
    max-height: 190px;
    overflow-y: scroll;
}

.daterangepicker .drp-types li,
.daterangepicker .drp-periods li,
.daterangepicker .drp-ranges li{
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.daterangepicker .drp-periods  li.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}
.daterangepicker .drp-types li:hover,
.daterangepicker .drp-periods li:hover{
    background-color: #eee;
    border-color: transparent;
    color: inherit;
}

.daterangepicker .drp-ranges li:hover {
    background-color: #eee;
}

.daterangepicker .drp-types li.active,
.daterangepicker .drp-ranges li.active,
.daterangepicker .drp-periods li.active {
    background-color: #357ebd;
    color: #fff;
}

.daterangepicker .drp-selected {
    padding-right: 0px;
}

.daterangepicker .drp-selected-label {
    font-size: 12px;
}

.daterangepicker.single .daterangepicker .drp-ranges {
    float: none;
}

.daterangepicker .drp-ranges {
    float: left;
    text-align: left;
    margin: 0;
}

.daterangepicker.show-calendar .drp-ranges {
    margin-top: 8px;
}

.daterangepicker .drp-ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.daterangepicker.extend-selection .calendar-table td{
    cursor: w-resize;
}

.daterangepicker.extend-selection .drp-periods li {
    cursor: n-resize;
}


/*  Larger Screen Styling */
@media (min-width: 487px) {
    .drp-types ul, 
    .drp-periods ul,
    .drp-ranges ul {
        width: 140px;
    }

    .single .drp-types ul, 
    .single .drp-periods ul,
    .single .drp-ranges ul {
        width: 100%;
    }

    .single .drp-types, 
    .single .drp-periods,
    .single .drp-ranges,
    .daterangepicker .drp-ranges,
    .daterangepicker .drp-calendar,
    .daterangepicker .drp-calendars {
        float: left;
    }

    .daterangepicker .drp-selected-label{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .daterangepicker:not(.mobile) .drp-buttons {
        display: flex !important;
    }
}
@media (min-width: 730px){
    .daterangepicker .drp-calendars {
        clear: none !important;
    }
}

@media (min-width: 768px){
    .daterangepicker {
        width: auto;
    }
    .daterangepicker .drp-periods-list {
        max-height: 259px;
    }
}
@media (min-width: 768px) and (max-width: 838px) {
    .drp-types, 
    .drp-periods,
    .drp-ranges {
        width: 100px;
    }

    .rtl .drp-types,
    .rtl .drp-periods,
    .rtl .ranges {
        float: right;
    }
    
    .daterangepicker .drp-calendar.right {
        padding: 4px;
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        padding-right: 0;
    }
    
    .daterangepicker .drp-calendar.left {
        clear: none !important;
        padding: 4px 0 4px 4px;
    }
    
    .daterangepicker .drp-types li, 
    .daterangepicker .drp-periods li, 
    .daterangepicker .drp-ranges li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}
.daterangepicker.mobile {
    position: fixed;
    top: 50px !important;
    bottom: 0;
    left: 0 !important;
    margin: 0;
    border: none;
    border-radius: 0 !important;
    width: 100%;
    overflow: auto;
}
.daterangepicker.mobile.open {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}
.daterangepicker.mobile .drp-types, 
.daterangepicker.mobile .drp-ranges,
.daterangepicker.mobile .drp-periods,
.daterangepicker.mobile .drp-calendar {
    clear: left;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.daterangepicker.mobile .drp-calendars {
    order: -1;
}
.daterangepicker.mobile.landscape .drp-calendars {
    order: 0;
}
.daterangepicker.mobile.show-ranges.ltr .drp-calendar.left {
    border: none;
    border-bottom: 1px solid #ddd;
} 
.daterangepicker.mobile.show-ranges.ltr.landscape .drp-calendar.left {
    border: none;
    border-left: 1px solid #ddd;
}
.daterangepicker.mobile.show-ranges.ltr .drp-calendar.left .calendar-table {
    padding-right: 0;
}
.daterangepicker.mobile .calendar-table th, 
.daterangepicker.mobile .calendar-table td {
    width: 14.2%;
    line-height: 16px;
    font-size: 16px;
}

.daterangepicker.mobile .drp-types-header,
.daterangepicker.mobile .drp-periods-header {
    display: none;
}
.daterangepicker.mobile .drp-types ul, 
.daterangepicker.mobile .drp-ranges ul {
    overflow: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}
.daterangepicker.mobile .drp-types li, 
.daterangepicker.mobile .drp-ranges li,
.daterangepicker.mobile .drp-periods li {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    width: 120px;
}
.daterangepicker.mobile .drp-types li,
.daterangepicker.mobile .drp-periods li,
.daterangepicker.mobile .drp-ranges li{
    font-size: 16px;
    height: 46px;
    vertical-align: middle;
    white-space: normal;
    text-align: center;
}
.daterangepicker.mobile .drp-buttons {
    position: relative;
    bottom: 0px;
    width: 100%;
    order: 5;
    margin-top: auto;
}
.daterangepicker.mobile .drp-buttons > .btn {
    margin: 0;
    width: 49%;
    height: 40px;
    font-size: 16px;
}
.daterangepicker.mobile .drp-buttons > .xtd {
    width: 100%;
    display: inline-block;
}
.daterangepicker.mobile .drp-buttons > .xtd > .input-group > .input-group-btn {
    display: table-cell !important;
}
.daterangepicker.mobile .drp-buttons > .drp-selected-label {
    width: 100%;
    font-size: 14px;
    text-align: right;
    font-weight: bold;
}
.daterangepicker .drp-buttons > .drp-selected-label span {
    white-space: nowrap;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}
.drp-periods-list.horizontal .period-item {
    height: 100%;
}
.drp-periods-list.horizontal > * {
    display: inline-block;
    position: relative;
    top: -100%;
}
.drp-periods-list.horizontal {
    white-space: nowrap;
    overflow-y: auto;
}

.daterangepicker.mobile.open.landscape {
    flex-direction: row;
    flex-wrap: wrap;
}

.daterangepicker.mobile.open.landscape > * {
    flex: 1 1 50%;
}
.daterangepicker .drp-ranges-wrapper {
    float: left;
}
.daterangepicker.mobile.open.landscape .drp-ranges-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 50%;
}
.daterangepicker.mobile.landscape .drp-buttons {
    margin-top: 0;
}
@media (max-height: 320px) {
    .daterangepicker.mobile.landscape .calendar-table th,
    .daterangepicker.mobile.landscape .calendar-table td {
        line-height: 6px;
        height: 17px;
    }
}
@media (min-height: 375px){
    .daterangepicker.mobile.landscape .calendar-table th,
    .daterangepicker.mobile.landscape .calendar-table td {
        line-height: 13px;
    }
}
@media (min-height: 667px) {
    .daterangepicker.mobile .calendar-table th,
    .daterangepicker.mobile .calendar-table td {
        line-height: 27px;
    }
}