#chartdiv {
    width: 98%;
    height: 900px;
}

.modal-open {
    overflow: scroll !important;
}

.count {
    font-size: 40px;
    font-weight: 700;
}

.top-stat {
    border-left: 1px solid #2A3F54;
    text-align: center;
    margin-bottom: 20px;
}

    .top-stat:first-child {
        border-left: 0;
        text-align: center;
    }

.search {
    box-shadow: inset 0 0 2px 0 #73879C;
    border-radius: 25px;
    padding-left: 20px;
    border-left: 1px solid #73879C;
    border-top: 1px solid #73879C;
    border-bottom: 1px solid #73879C;
}

.search-btn {
    border-radius: 0 25px 25px 0;
    border: 1px solid rgba(221, 226, 232, .49);
    border-left: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #93A2B2;
    margin-bottom: 0 !important;
    border-right: 1px solid #73879C;
    border-top: 1px solid #73879C;
    border-bottom: 1px solid #73879C;
}

.darkenColor {
    background-color: currentColor !important;
}

.zeroPadding {
    padding: 0px !important;
}

.pac-container {
    z-index: 1051 !important;
}

.pac-item:hover {
    background-color: lightblue;
}

.lightboxshadow {
    box-shadow: 1px 1px 1px 1px black;
    padding: 5px;
    margin-bottom: 5px;
}

    .lightboxshadow:hover {
        box-shadow: 1px 1px 25px 1px black;
        padding: 5px;
        margin-bottom: 5px;
    }

.Icon-Margin {
    margin-right: 5px;
}

.pageheader {
    font-size: xx-large;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
    margin-top: 10px;
}

.pageheader-black {
    font-size: xx-large;
    color: black;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    margin-top: 10px;
}

.progress-span {
    color: white;
}

.appbtn-submit {
    color: white;
    background-color: green;
}

    .appbtn-submit:hover {
        box-shadow: 3px 3px 10px black;
        background-color: white;
        color: green !important;
    }

.appbtn-primary {
    color: white;
    background-color: #2A3F54;
}

    .appbtn-primary:hover {
        box-shadow: 3px 3px 10px black;
        background-color: white;
        color: #2A3F54 !important;
    }


.appbtn-cancel {
    color: white;
    background-color: #ffa500;
}

    .appbtn-cancel:hover {
        box-shadow: 3px 3px 10px black;
        background-color: white;
        color: #ffa500 !important;
    }

.appbtn-delete {
    color: white;
    background-color: red;
}

    .appbtn-delete:hover {
        box-shadow: 3px 3px 10px black;
        background-color: white;
        color: red !important;
    }

.ripple {
    position: relative;
    overflow: hidden
}

    .ripple:after {
        content: "";
        background: rgba(255, 255, 255, 0.3);
        display: block;
        position: absolute;
        border-radius: 50%;
        padding-top: 240%;
        padding-left: 240%;
        margin-top: -120%;
        margin-left: -120%;
        opacity: 0;
        transition: all 1s;
    }

    .ripple:active:after {
        padding-top: 0;
        padding-left: 0;
        margin-top: 0;
        margin-left: 0;
        opacity: 1;
        transition: 0s
    }

/* SLIDE THREE */
.slideThree {
    width: 120px;
    height: 26px;
    background: #333;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideThree:after {
        content: 'Inactive';
        font: 12px/26px Arial, sans-serif;
        color: white;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideThree:before {
        content: 'Active';
        font: 12px/26px Arial, sans-serif;
        color: #00bf00;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideThree label {
        display: block;
        width: 56px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .10s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideThree input[type=checkbox] {
        visibility: hidden;
    }

        .slideThree input[type=checkbox]:checked + label {
            left: 60px;
        }

.contact-role {
    font-weight: 700;
    font-size: large;
    font-style: italic;
}

.contact-name {
    font-weight: 500;
}

.cover {
    padding: 0;
    margin: 0;
    width: 100%;
}

.overlay {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 10;
    cursor: pointer;
    color: white;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.container-round {
    display: flex;
    border-radius: 10000px 10000px;
    text-align: center;
    margin: auto;
}

.dropdown-menu-items-right {
    position: absolute;
    top: 100%;
    left: -7rem;
    right: 0;
    float: right;
}

.card:hover {
    cursor: pointer;
}

.card-owner {
    width: auto;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

    .card-owner:hover {
        background-color: #F2F3F4;
    }

.card-followup {
    padding: 0;
    margin: 0.25rem;
}

    .card-followup:hover {
        background-color: #EAFAF1;
    }

.row-contacthistory:hover {
    background-color: #F2F3F4;
    cursor: pointer;
}

.table:hover {
    cursor: pointer;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

.width-25 {
    width: 25%;
}

.width-75 {
    width: 75%;
}

.width-20 {
    width: 20%;
}

.width-80 {
    width: 80%;
}

.width-15 {
    width: 15%;
}

.width-50 {
    width: 50%;
}

.card-brand {
    margin: 0.25rem;
    color: black;
    width: 23%;
}

    .card-brand:hover {
        background-color: #F2F3F4;
        text-decoration: none;
        color: black;
    }

.container-stats {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.25rem;
}

.container-stats-num {
    border: 0.5px solid lightgray;
    padding: 0.25rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-school-stats {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}

.header {
    color: #616A6B;
}

.staff-account-img {
    border: 1px solid;
    border-radius: 500px 500px;
    /* v2 */
    /*border-color: gray;
  max-width: 30%;*/
}

.staff-account-active {
    border-color: green;
    background-color: green;
}

.staff-account-inactive {
    border-color: red;
    background-color: darkred;
}

.staff-account-pending {
    border-color: grey;
    background-color: grey;
}

.breakwords {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .width-25 {
        width: 100%;
    }

    .width-75 {
        width: 100%;
    }

    .card-brand {
        margin: 0.25rem;
        color: black;
        width: 47%;
    }

    .container-brand-stats {
        flex-direction: column;
    }

    .container-stats {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}