.progressclubcalendar_overlay, .progressclubcalendar_dialog, #progressclubcalendar_frame { display: none; }

.progressclubcalendar_overlay { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; background: rgba(0,0,0,0.3); text-align: center; }

.cpc_title { text-align: center; }
.cpc_right { float: right; }

.cpc_calendar { width: 100%; border-collapse: collapse; }
.cpc_calendar th { width: 14.29%; text-align: center; }
.cpc_calendar td { height: 100px; position: relative; padding-top: 1em; border: 1px black solid; }
.cpc_calendar td.noborder { border: none; }
.cpc_calendar td .daynumber { position: absolute; top: 0; left: 0; border: 1px black solid; border-left: 0; border-top: 0; font-size: 0.8em; padding: 0 0.5em; margin: 0; }
.cpc_calendar td p { padding: 0 5px; margin: 5px 0; }
.cpc_calendar td p.ev_0 { margin-top: 1rem; }
.cpc_calendar td p a { color: white; }

.calendar_event_manage, .calendar_event_detail {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    background: white;
    border: 3px black solid;
    box-shadow: rgba(0,0,0,0.6) 0 0 10px;
    padding: 1rem;
}

#cpc_calendar_edit_event_button { display: none; }

.calendar_event_manage p { margin-bottom: 0.5rem; }
.calendar_event_manage .half_input { display: inline-block; width: 49%; vertical-align: top; }
.calendar_event_manage .third_input { display: inline-block; width: 32%; vertical-align: top; }
.calendar_event_manage p label { font-size: 0.8rem; font-weight: bold; display: block; }
.calendar_event_manage p input, .calendar_event_manage p select { width: 95%; font-size: 1rem; }
.calendar_event_manage .half_input input, .calendar_event_manage .half_input select { width: 90%; }
.calendar_event_manage input.half_input , .calendar_event_manage select.half_input  { width: 50%; }
.calendar_event_manage p select.calendar_event_time_dd { width: fit-content; }
.calendar_event_button { float: right; }
.calendar_event_button a { box-sizing: border-box; font-size: 1rem; font-weight: normal; padding: 0.5rem 2rem; border-radius: 5px; }
.calendar_event_save { background: #c1272d; color: white !important; border: 2px #c1272d solid; }
.calendar_event_delete { background: #00009c; color: white !important; border: 2px #00009c solid; margin-left: 1rem; }
.calendar_event_cancel { color: #c1272d !important; background: white; border: 2px #c1272d solid; margin-left: 1rem; }

.calendar_event_legend { margin-top: 2rem; border: 1px black solid; padding: 1rem; display: none; }
.calendar_event_legend li { display: inline-block; width: 32%; padding: 5px; }
.calendar_event_legend li .cpc_legend_box { float: left; width: 2rem; margin-right: 1rem; }

.calendar_event_detail .event_desc { padding: 1rem 0 2rem; }

.cssload-container{
    position:relative;
    margin-top: 300px;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgb(250,168,26);
    border-left-color: rgb(54,65,90);
    border-radius: 1748px;
    -o-border-radius: 1748px;
    -ms-border-radius: 1748px;
    -webkit-border-radius: 1748px;
    -moz-border-radius: 1748px;
}

.cssload-whirlpool {
    margin: -44px 0 0 -44px;
    height: 88px;
    width: 88px;
    animation: cssload-rotate 1600ms linear infinite;
    -o-animation: cssload-rotate 1600ms linear infinite;
    -ms-animation: cssload-rotate 1600ms linear infinite;
    -webkit-animation: cssload-rotate 1600ms linear infinite;
    -moz-animation: cssload-rotate 1600ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -40px 0 0 -40px;
    height: 77px;
    width: 77px;
    animation: cssload-rotate 1600ms linear infinite;
    -o-animation: cssload-rotate 1600ms linear infinite;
    -ms-animation: cssload-rotate 1600ms linear infinite;
    -webkit-animation: cssload-rotate 1600ms linear infinite;
    -moz-animation: cssload-rotate 1600ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -51px 0 0 -51px;
    height: 98px;
    width: 98px;
    animation: cssload-rotate 3200ms linear infinite;
    -o-animation: cssload-rotate 3200ms linear infinite;
    -ms-animation: cssload-rotate 3200ms linear infinite;
    -webkit-animation: cssload-rotate 3200ms linear infinite;
    -moz-animation: cssload-rotate 3200ms linear infinite;
}



@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}