.bg-dark {
    background-color: #002439!important;
}

body {
    /* color: #002439;
     font-family: Roboto, sans-serif;
     background: rgb(112,189,149);
 background: linear-gradient(90deg, rgba(112,189,149,0.3) 0%, rgba(112,189,149,0.053658963585434205) 68%, rgba(0,212,255,0.3) 100%);*/

}

.bgImage {
    background-image: url("https://afass.projects.itcdigitalservice.co.uk/img/Wharrier Street Newcastle upon Tyne_47059.jpg");
    /* Add the blur effect */


    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.RSI-Content{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 70%); /* Black w/opacity/see-through */
    z-index: 2;
    color: white;
}

.RSI-Content-Admin{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 70%); /* Black w/opacity/see-through */
    z-index: 2;
    color: white;
}
body.admin {
    color: #002439;
    font-family: Roboto, sans-serif;
    background: #FFF2F2;

}

table{
    background-color: white;
}


.btn-secondary {
    color: #fff;
    background-color: #70BD95;
    border-color: #70BD95;
}
.modal-content-other{
    height: calc((85vw/16)*9);
    width: 85vw;
    transform: translateX(-50%); left: 50%;
}

.videocam #video {
    width: 400px;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
}

#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}

.videocam #video-container {
    margin: 0 auto;
    margin-top: 50px;
    width: 400px;position: relative;
}

.admin .page-item.active .page-link {
    background-color: #70BD95;
    border-color: #70BD95;
}

.page-link:hover, .page-link {
    color: #70BD95;
}

.modal-body-home {
    max-height: calc(100vh - 143px);
    overflow-y: auto; }

.nav-link{
    color: #002439 !important;
}

.nav-link:hover{
    color: #42b38e !important;
    text-decoration: underline;
    background-color: #002439;
}


.nav-link-footer{
    color: #42b38e !important;
}

.nav-link-footer:hover{
    color: rgba(66, 179, 142, 0.86) !important;
    text-decoration: underline;
}




/* general */
@media (min-width: 0px) {
    #safetyGovernance{
        margin-left: 0px;
    }
    .navbar-toggler{
        background-color: black
    }
    .navbar-toggler-icon {
        background-color: black;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    #player-overlay {
        display: block;
        position: absolute;
        width: 69.1%;
        height: 27.9%;
        bottom: 0;
        z-index: 4;
        opacity: .5;
        padding-bottom: 95px;
    }

    #video {
        display: block;
        z-index: 1;
        width: 75%;
        max-height: 100%;
        height: auto;
    }

    #photo {
        z-index: 1;
        width: 75%;
        max-height: 100%;
        height: auto;
    }



}
@media (min-width: 576px) {

    #safetyGovernance{
        margin-left: 140px;
    }

    #player-overlay {
        display: block;
        position: absolute;
        width: 25.1%;
        height: 44.5%;
        bottom: 0;
        z-index: 4;
        opacity: .5;
        padding-bottom: 55px;
    }

    #video {
        display: block;
        z-index: 1;
        width: 75%;
        max-height: 100%;
        height: auto;
    }

    #photo {
        z-index: 1;
        width: 75%;
        max-height: 100%;
        height: auto;
    }


}