/* Style for event Calendar ***************************************************/

.gCalFlow {
    width: 100%;
    height: 500px;
    font-size: 1rem;
    overflow: hidden;
    text-decoration: none;
    border-radius: 20px;
    background: linear-gradient(to bottom, #fff, #eee);
    color: var(--general-text-color);
    margin-bottom: 2rem;
}

.gcf-header-block {
    background: var(--red-gradient);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.gcf-title-block {
    font-size: 1.75rem;
    font-weight: 100;
    font-style: normal;
    line-height: 1.4;
    padding: 1.2rem 0;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: white;
}

.gcf-item-container-block {
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    height: 80%;
    padding: 1rem 0px;
}

.gcf-item-block {
    position: relative;
    overflow: hidden;
    padding: 1rem 2rem;
}

.gcf-item-block:first-child {
    border-top: none;
    padding-top: 0px;
}

.gcf-item-block:nth-child(even) { background-color: rgba(0, 0, 255, 0.1); }
.gcf-item-body-block { padding: 0px 1rem; }

.gcf-item-date-block {
    font-size: 1rem;
    font-weight: 100;
    color: var(--element-color-blue);
    text-align: right;
}

.gcf-item-title-block { margin: 5px 0px; }
.gcf-item-title { font-size: 1.12rem; }

.gcf-item-description {
    color: #333;
    font-size: 80%;
    line-height: 1.3;
    margin-top: 10px;
}

.gcf-item-description a { font-weight: bold; }
.gcf-item-location {
    margin-top: 10px;
    font-size: 80%;
}

/*********** For Button Style *************************************************/

.eventCalAsButton .gcf-header-block:hover { background: var(--red-gradientR); }
.gcfButton { height: auto; }

.gcfButton .gcf-item-container-block {
    max-height: 0px;
    padding: 0px;
}

/*********** For Mobile *******************************************************/

@media only screen and (max-width: 700px) {
    
    .gCalFlow { height: 70vH; }
    .gcf-title-block { font-size: 1.38rem; }
    .gcf-item-container-block { padding: 1rem 0px; }
    .gcf-item-block { padding: 1rem 1rem; }
}