*{
    font-family: "Google-Sans","Roboto",Arial,Helvetica,sans-serif;
}
body{
    margin-bottom: 10vh;
}

.group-card
{
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    min-height: 17vh;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}
  
/* On mouse-over, add a deeper shadow */
.group-card:hover 
{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.group-card > h4{
    border-bottom: 1px solid #2196f3;
    padding-bottom: 0.8rem;
}

.group-content{
    display: flex;
    justify-content: space-between;
}

.group-content > button{
    font-size: 1.2rem;
    text-transform: capitalize;
    background-color: #4285F4;
}

.subject-card{
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 17vh;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    border-radius: 5px;
}
.subject-card > h4{
    border-bottom: 1px solid #2196f3;
    padding-bottom: 0.8rem;
}
.subject-card > a {
    color:black;
}

/*Subject modal css 00*/
.subject-content{
    display: flex;
    justify-content: space-between;
}
.subject-content > a{
    font-size: 1.2rem;
    text-transform: capitalize;
    background-color: #4285F4;
}
/*Subject modal css 11*/

.group-content > h5{
    flex:9;
}

.content-container{
    display: flex;
    margin:1rem;
    padding: .5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.my-calendar-div{
    margin:0.5rem;
    flex:7;
}
.groups-container{
    /* width: 70%; */
    flex:3;
}


@media all and (max-width:600px){
    .main-body{
        padding-top: 30px;
    }
    .groups-container{
        width: 100%;
    }
    .group-card{
        height: 25vh;
    }
    .group-content{
        flex-direction: column;
    }
    .group-content > button {
        align-self: flex-end;
    }
    .content-container{
        flex-direction: column;
    }
}
@media all and (max-width:1100px){
    .content-container{
        flex-direction: column;
    }
}