.school-classroom-container {
    border-style: solid;
    border-width: thin;
    border-color: black;
    margin-bottom: 10px;
    padding: 5px;
}

.school-teacher-container, .school-parent-container {
    border-bottom: solid;
    border-bottom-width: thin;
    padding: 5px;
}

.school-name {
    font-size: 2rem;
    font-weight: 900;
}

/*Overview CSS*/
.overview-classroom-header {
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 20px;
}

.overview-classroom-container {
    flex: 0 0 calc(33% - 20px);
    border-radius: 20px;
    overflow: hidden;
    background: white;
    height: fit-content;
    min-height: 250px;
    margin-bottom: 40px;
}

.overview-classroom-cover {
    height: 175px;
    background: pink;
    padding: 10px;
    position: relative;
}

.overview-classroom-name {
    font-size: 1.5rem;
    font-weight: 900;
    position: absolute;
    left: 10px;
    width: 80%;
}

.overview-classroom-age {
    font-weight: 700;
    font-size: 1.5rem;
    right: 10px;
    position: absolute;
    bottom:0;
}

.overview-view-classboard {
    position: absolute;
    left: calc(50% - 100px);
    width: 200px;
    text-align: center;
    top: 90px;
    border-style: solid;
    border-radius: 25px;
    padding: 10px;
    cursor: pointer;

}

.overview-view-classboard:hover {
    background: rgba(0, 0, 0, 0.3);
}

.overview-classroom-teacher, .overview-classroom-monitor {
    padding: 10px;
}
.overview-classroom-monitor{
    border-bottom:var(--main-grey);
    border-bottom-style:solid;
    border-bottom-width:thin;
}

.overview-classroom-teacher-name {
    font-weight: 700;
}

.overview-classroom-children-container {
    /*padding: 10px;
    overflow:hidden;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;*/

}

.overview-classroom-children-container .card {
    border: unset;
}

.overview-classroom-children-container .card-body {
    padding: 10px;
}

.overview-classroom-children-header {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.overview-classroom-child-name-container {
    flex: 0 0 35%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.overview-classroom-child-edit{
    color:darkslategrey;
}

.overview-classroom-child-name, .overview-classroom-child-edit {
    cursor: pointer;
}

.overview-classroom-child {
    margin-top: 10px;
    margin-bottom: 10px;
}

.overview-classroom-collapse {
    text-align: center;
    font-size: .8rem;
    height: 35px;
    padding-top: 5px;
    cursor: pointer;
}

.overview-classroom-collapse:hover {
    background: lightgrey;
}

.overview-classroom-delete-class {
    text-align: center;
    font-weight: 700;
    color: white;
    background: red;
    height: 50px;
    padding-top: 12px;

    cursor:pointer;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.overview-classroom-delete-class:hover{
    background: #8f0000;
}

.overview-classroom-button {
    background: orange;
    border-radius: 20px;
    padding: 2px 10px;
    margin-right: 10px;
    font-size: .8rem;
    overflow: hidden;
    white-space: nowrap;
    max-width: 30%;
    text-align: center;
    text-overflow: ellipsis;
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.no-flex {
    flex: none;
}

.overview-classroom-parent-container {
    flex: 0 0 100%;
}

.overview-classroom-button-grey {
    background: lightgrey;
}

.overview-classroom-button-grey:hover {
    background: darkgrey;
}

.overview-classroom-button-blue {
    background: var(--main-blue);
    color: white;
    font-weight: 600;
}

.overview-classroom-button-blue:hover {
    background: #4ba1cc;
}

.overview-classroom-age-prefix {
    font-size: .8rem;
}

.overview-classroom-child-container {
    min-height: 50px;
}

.overview-classroom-child-edit, .overview-classroom-child-warning, .overview-classroom-teacher-warning {
    width: 20px;
    margin-right: 5px;
    border-radius: 5px;
}

.overview-classroom-child-warning {
    cursor: help;
}

.overview-classroom-child-name-container:hover .overview-classroom-child-edit {
    background: #f3f3f3;
}

.overview-classroom-add-child {
    background: var(--main-blue);
    width: 154px;
    padding: 5px 10px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 700;
    color: white;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.overview-classroom-add-child:hover {
    background: var(--main-blue-shadow);
}

.btn-unlink-teacher-classroom, .btn-unlink-monitor-classroom {
    /*background: red;*/
    /*width: 24px;*/
    /*height: 24px;*/
    /*text-align: center;*/
    /*border-radius: 15px;*/
    /*color: white;*/
    /*font-weight: 700;*/
    /*cursor: pointer;*/
    cursor: pointer;
    color: red;
}

.btn-add-teacher-classroom {
    /*padding: 10px;*/
    font-weight: 700;
    cursor: pointer;
}

.popover-plus-parent {
    background: lightgrey;
    border-radius: 25px;
    padding: 1px 10px;
}

@media screen and (max-width: 1500px) {
    .overview-classroom-container {
        flex: 0 0 calc(50% - 20px);
    }
}

@media screen and (max-width: 750px) {
    .overview-classroom-container {
        flex: 0 0 calc(100%);
    }
}

.overview-action-container{
    margin-bottom:10px;
}

.overview-action-button {
    cursor: pointer;
}

.overview-action-button-icon {
    width: 80px;
    height: 80px;
    background: blue;
    border-radius: 15px;
    margin:5px 30px;
}

.overview-action-button-text {
    font-size: .8rem;
    font-weight: 700;
}

@media screen and (max-width: 750px) {
    .overview-action-button-icon{
        width:50px;
        height:50px;
        margin:5px 10px;
    }
    .overview-action-button-text{
        font-size:.5rem;
    }
}

.overview-teacher{
    background:white;
    padding: 10px 20px;
    min-width:200px;
    margin:10px;
    border-radius:5px;
    position:relative;
}
.overview-teacher-delete{
    content:'cancel';
    position:absolute;
    top:-10px;
    right:-10px;
    color: red;
    cursor:pointer;
}

.overview-school-calendar{
    background:white;
    padding: 10px 20px;
    min-width:200px;
    margin:10px;
    border-radius:5px;
    position:relative;
    cursor:pointer;
    text-align:center;
}
.overview-school-calendar:hover{
    background:var(--main-grey);
}
.overview-school-calendar-delete{
    content:'cancel';
    position:absolute;
    top:-10px;
    right:-10px;
    color: red;
    cursor:pointer;
}
.overview-school-calendar-new{
    background:var(--main-grey);
    padding: 10px 20px;
    min-width:200px;
    margin:10px;
    border-radius:5px;
    position:relative;
    cursor:pointer;
    text-align:center;
    font-weight:700;
}
.overview-school-calendar-new:hover{
    background:var(--main-grey-shadow);
}
.swal2-ontop-all{
    z-index:99999999;
}
.overview-classroom-calendar{
    position:absolute;left:0;bottom:5px;cursor:pointer;
}
.overview-classroom-calendar:hover .edit-start-date-icon{
    background:lightgrey;
    border-radius:5px;
}
.overview-container{
    min-height:100vh;
}