/* CourseStorm Widget Admin Styles */

/* Calendar icon and date formatting for admin widgets */
.widgets-holder-wrap .coursestorm-calendar-date,
.customize-control-widget_form .coursestorm-calendar-date,
#widgets-right .coursestorm-calendar-date,
.wp-customizer .coursestorm-calendar-date,
#available-widgets .coursestorm-calendar-date,
.widget-inside .coursestorm-calendar-date {
    float: left;
    font-size: 2rem;
    position: relative;
    margin-right: 15px;
    width: 32px;
    height: 32px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Direct styling for the icon-calendar class */
.widgets-holder-wrap .icon-calendar,
.customize-control-widget_form .icon-calendar,
#widgets-right .icon-calendar,
.wp-customizer .icon-calendar,
#available-widgets .icon-calendar,
.widget-inside .icon-calendar {
    font-family: "fontello" !important;
    position: relative;
    display: block !important;
    width: 32px;
    height: 32px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Icon font for calendar */
.widgets-holder-wrap .icon-calendar:before,
.customize-control-widget_form .icon-calendar:before,
#widgets-right .icon-calendar:before,
.wp-customizer .icon-calendar:before,
.widgets-holder-wrap .coursestorm-calendar-date:before,
.customize-control-widget_form .coursestorm-calendar-date:before,
#widgets-right .coursestorm-calendar-date:before,
.wp-customizer .coursestorm-calendar-date:before,
#available-widgets .icon-calendar:before,
#available-widgets .coursestorm-calendar-date:before,
.widget-inside .icon-calendar:before,
.widget-inside .coursestorm-calendar-date:before {
    font-family: "fontello" !important;
    content: '\e804' !important;
    font-size: 2em !important;
    margin: 0 !important;
    display: block !important;
    color: #e04d43 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the icon is visible */
.widgets-holder-wrap .coursestorm-calendar-date.icon-calendar,
.customize-control-widget_form .coursestorm-calendar-date.icon-calendar,
#widgets-right .coursestorm-calendar-date.icon-calendar,
.wp-customizer .coursestorm-calendar-date.icon-calendar,
#available-widgets .coursestorm-calendar-date.icon-calendar,
.widget-inside .coursestorm-calendar-date.icon-calendar,
.widget-inside .icon-calendar,
#widgets-right .icon-calendar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for the calendar icon in the widget class-by-category */
.widget-inside li .icon-calendar,
#widgets-right li .icon-calendar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: left;
    margin-right: 15px;
    width: 32px;
    height: 32px;
}

.widgets-holder-wrap .coursestorm-calendar-date .calendar,
.customize-control-widget_form .coursestorm-calendar-date .calendar,
#widgets-right .coursestorm-calendar-date .calendar,
.wp-customizer .coursestorm-calendar-date .calendar,
#available-widgets .coursestorm-calendar-date .calendar,
.widget-inside .coursestorm-calendar-date .calendar {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    line-height: 1;
}

.widgets-holder-wrap .coursestorm-calendar-date .month,
.customize-control-widget_form .coursestorm-calendar-date .month,
#widgets-right .coursestorm-calendar-date .month,
.wp-customizer .coursestorm-calendar-date .month,
#available-widgets .coursestorm-calendar-date .month,
.widget-inside .coursestorm-calendar-date .month {
    color: white;
    font-size: 0.35em;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    top: 1.4em;
    z-index: 1;
}

.widgets-holder-wrap .coursestorm-calendar-date .day,
.customize-control-widget_form .coursestorm-calendar-date .day,
#widgets-right .coursestorm-calendar-date .day,
.wp-customizer .coursestorm-calendar-date .day,
#available-widgets .coursestorm-calendar-date .day,
.widget-inside .coursestorm-calendar-date .day {
    font-size: 0.8em;
    position: absolute;
    top: 1.1em;
}

/* Widget content formatting */
.widgets-holder-wrap .coursestorm-classes-by-category-widget-content,
.customize-control-widget_form .coursestorm-classes-by-category-widget-content,
#widgets-right .coursestorm-classes-by-category-widget-content,
.wp-customizer .coursestorm-classes-by-category-widget-content {
    box-sizing: border-box;
    float: left;
    max-width: 70%;
    padding-left: 15px;
    width: 100%;
}

.widgets-holder-wrap .coursestorm-classes-by-category-widget-content.no-date,
.customize-control-widget_form .coursestorm-classes-by-category-widget-content.no-date,
#widgets-right .coursestorm-classes-by-category-widget-content.no-date,
.wp-customizer .coursestorm-classes-by-category-widget-content.no-date {
    max-width: 100%;
}

/* Clear floats */
.widgets-holder-wrap .widget-inside li,
.customize-control-widget_form .widget-inside li,
#widgets-right .widget-inside li,
.wp-customizer .widget-inside li {
    overflow: hidden;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.widgets-holder-wrap .widget-inside li:last-child,
.customize-control-widget_form .widget-inside li:last-child,
#widgets-right .widget-inside li:last-child,
.wp-customizer .widget-inside li:last-child {
    border-bottom: none;
}

/* Fix for image display in admin */
.widgets-holder-wrap .coursestorm-classes-by-category-widget-image,
.customize-control-widget_form .coursestorm-classes-by-category-widget-image,
#widgets-right .coursestorm-classes-by-category-widget-image,
.wp-customizer .coursestorm-classes-by-category-widget-image {
    float: right;
    margin: 0 0 1em 1em;
    max-width: 100px;
}

.widgets-holder-wrap .coursestorm-classes-by-category-widget-image img,
.customize-control-widget_form .coursestorm-classes-by-category-widget-image img,
#widgets-right .coursestorm-classes-by-category-widget-image img,
.wp-customizer .coursestorm-classes-by-category-widget-image img {
    max-width: 100%;
    height: auto;
}