html, body {
    overflow-y: scroll;
}

#MainSpace {
    zoom: 50%;
    -moz-transform: scale(0.5);
}

video::-webkit-media-controls {
    visibility: hidden;
}

video::-webkit-media-controls-enclosure {
    visibility: visible;
}

.VideoText {
    border-radius: 10px 10px 0px 0px;
    font-size: 2em;
    width: 98%;
    position: absolute;
    top: -4.5%;
    left: 0;
    z-index: 1;
    color: white;
    /* mix-blend-mode: overlay; */
    background-color: black;
    opacity: 63%;
    margin-inline: 19%;
    margin: 0% 0.2em;
    pointer-events: none;
}

.login-div {
    background-color: #f5f5f5;
    border-radius: 30px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    min-height: 95.5vh;
}

.login-section {
    background-color: white;
    padding: 60px;
    border-radius: 20px;
    width: 125%;
}

.input-reqd {
    color: red;
} 

.bottomBox > .VideoText {
    border-radius: 10px 10px 0px 0px;
    font-size: 2em;
    width: 97.2%;
    position: absolute;
    top: -0.3%;
    left: 0;
    z-index: 1;
    color: white;
    /* mix-blend-mode: overlay; */
    background-color: black;
    opacity: 63%;
    margin-inline: 19%;
    margin: 0% 1.5%;
    pointer-events: none;
}

.CamSize8 > .VideoText {
    border-radius: 10px 10px 0px 0px;
    font-size: 2em;
    width: 92.3%;
    position: absolute;
    top: -5%;
    left: 0;
    z-index: 1;
    color: white;
    /* mix-blend-mode: overlay; */
    background-color: black;
    opacity: 63%;
    margin-inline: 19%;
    margin: 0% 3.6%;
    pointer-events: none;
}

.CamSize12 > .VideoText {
    border-radius: 10px 10px 0px 0px;
    font-size: 2em;
    width: 99%;
    position: absolute;
    top: -4.6%;
    left: 0;
    z-index: 1;
    color: white;
    /* mix-blend-mode: overlay; */
    background-color: black;
    opacity: 63%;
    margin-inline: 19%;
    margin: 0% 0.1em;
    pointer-events: none;
}

.CamSize10 > .VideoText {
    border-radius: 10px 10px 0px 0px;
    font-size: 2em;
    width: 93%;
    position: absolute;
    top: -4.5%;
    left: 0;
    z-index: 1;
    color: white;
    /* mix-blend-mode: overlay; */
    background-color: black;
    opacity: 63%;
    margin-inline: 19%;
    margin: 0% 0.6em;
    pointer-events: none;
}

.Addbutton {
    width: 12rem;
    margin: 7%;
}

.camera_img {
    max-width: auto;
    max-height: 28rem;
    margin: 1%;
    max-width: -webkit-fill-available;
}

.initial_box_add_button {
    float: right;
    margin: 4%;
}

.box_add_button {
    float: right;
    margin: 0%;
}

.inbetween_signs {
    margin-top: auto;
    margin-bottom: auto;
}

.TitleFont {
    font-family: Segoe UI;
    font-size: 1.5em;
    font: #707070;
    /*margin-top: 1.5rem;*/
    color: #707070;
}

.CardText {
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    height: 100%;
}

.card.CardText {
    background-color: transparent;
    box-shadow: none !important;
}

.sign_box {
    box-shadow: none !important;
}

.card.sign_box {
    background-color: transparent;
    box-shadow: none !important;
    /*width: 8em;*/
    margin-left: 0 -2em;
}

.template_card {
    /*margin: 2%;*/
    /*margin: 2em;*/
    padding: 0.9%;
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 15%) !important;
    width: 35%;
    max-height: 100%;
    font-size: 100%;
    /*height: calc(100% - 2em);*/
}

.CamContainerPadding {
    padding-top: 1%;
    padding-bottom: 2%;
}

.TopCamContainerPadding {
    padding-top: 4%;
    padding-bottom: 1%;
}

.BottomCamContainerPadding {
    padding-top: 5%;
    padding-bottom: 1%;
}

/*
.template_card {
    margin: 2%;
    padding: 1.5%;
    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 15%) !important;
}*/
.RemoveButton {
    float: right;
}

btn-camera-info {
}


[data-tooltip]:before {
    pointer-events: none;
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 0px 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;
}

[data-tooltip]:hover:before {
    color: white;
    opacity: 1;
    background: black;
    margin-top: -2.5em;
    /*margin-left: -5em;*/
    position: fixed;
    width: fit-content;
    height: 1.5em;
    z-index: 98;
    font-size: 2em;
}

[data-tooltip]:not([data-tooltip-persistent1]):before {
    pointer-events: none;
}

.ZoomButton {
    float: left;
}


.btn-camera-zoom-save {
    display: none;
    clear: left;
    padding: 0.5rem 0px;
}


.btn-camera-zoom-reset {
    display: none;
    clear: left;
    padding: 0.5rem 0px;
}

.select_temp_button {
    background: none;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
}

    .select_temp_button span {
        color: #7AC142;
    }



    .select_temp_button:hover span {
        color: #68A737;
    }

.select_temp_add_button {
    background: none;
    border: none;
    cursor: pointer;
}

#MainSpace {
    width: 100%;
    height: 100%;
    padding: 0.5% 0%;
}

    #MainSpace.row {
        flex-wrap: nowrap;
    }

.small_cam {
    /*width: 14rem;
height: 20rem;*/
    height: 90%;
    width: 90%;
    text-align: center;
}

    .small_cam > .CameraButtonContainer {
        width: 95%;
        /*top: 1em;*/
        left: 0;
        bottom: 0;
        right: 0;
    }

.TemplateHeader {
    /*width: 18rem;*/
    height: 14rem !important;
    width: 60% !important;
    /*height: 100%;*/
    text-align: center;
    /*margin-bottom: 1rem;*/
}



.TemplateCamera {
    /*width: 30rem;
height: 18rem;*/
    margin: 0 4px;
    width: 100%;
    height: 110%;
    text-align: center;
    aspect-ratio: 16 / 9; /* 16:9 Aspect Ratio */
}

    .TemplateCamera > .CameraButtonContainer {
        width: 99%;
        top: -1.1em;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 0 0.3em;
    }

.CamSize6 > .CameraButtonContainer {
    width: 99%;
    top: -1.1em;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 0.3em;
}

.CamSize8 > .CameraButtonContainer {
    width: 95%;
    top: -1.1em;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 1.1em;
}

.CamSize10 > .CameraButtonContainer {
    width: 93%;
    top: -1em;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 1.1em;
}

.CamSize12 > .CameraButtonContainer {
    width: 99%;
    top: -1.5em;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 0.4em;
}

.TemplateReport {
    /*width: 30rem;*/
    height: 93% !important;
    height: 100%;
    width: 95%;
    text-align: center;
    /*margin-top: 1rem;*/
    margin: auto;
    /*padding-top: 56.25%;*/ /* 16:9 Aspect Ratio */
}

    .TemplateReport > .CameraButtonContainer {
        width: 95%;
        height: 79%;
        top: 3em;
        left: 0.5em;
        bottom: 0;
        right: 0;
    }

.WideTemplateReport {
    /*width: 48rem;
height: 17rem;*/
    width: 100%;
    height: 100%;
    text-align: center;
    /*margin: 1rem 5rem;*/
}

.TemplateObjects {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%) !important;
    border: 1px solid #7AC142;
    border-radius: 10px;
    overflow: hidden;
    /*width: 95%;
    height: 100%;*/
}

.camera-img {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    margin-left: 0.1%;
}

.CameraButtonContainer {
    /*display: none;*/
    border-radius: 10px;
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    width: -webkit-fill-available;
    height: inherit;
    padding: 1em;
    background: transparent linear-gradient( 180deg, #000000c4 0%, #00000000 100%) 0% 0% no-repeat padding-box;
}
/*top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;*/
}
/*.ZoomButton {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    left: 2px;*/

/*top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;*/
/*}*/

.EditButton {
    background-color: #000000;
}

.TemplateObjects:hover .camera-img {
    opacity: 0.6;
}

.TemplateObjects:hover .CameraButtonContainer {
    opacity: 1;
}

.TemplateObjects:hover .VideoText {
    opacity: 0;
}

.TemplateObjects:hover .ZoomButton {
    opacity: 1;
}


.InitialButton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.AlignColumns {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
}

.dashboard-content {
    display: flex;
    flex-direction: row;
    height: 100%;
}



.left-bar-container {
    width: 3%;
    height: 100%;
    /*background-color: aquamarine;*/
    display: flex;
    /*margin-left: 1%;*/
}



.title-bar {
    background-color: #7AC143;
    color: white;
    width: 90%;
    height: 95%;
    margin: auto;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}



.vertical-text {
    writing-mode: vertical-rl;
    /*text-orientation: sideways;*/
    transform: scale(-1);
    text-align: center;
    font-weight: 700;
    font-size: 2.5vh;
    letter-spacing: 1.6px;
}

#section-cameras {
    display: flex;
    flex-direction: row;
    background-color: white;
}



.section-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#MainSpace.row {
    margin-left: 0;
    margin-right: 0;
}



#MainSpace2.row {
    margin-left: 0;
    margin-right: 0;
}

.FrameContainer {
    width: 100%;
    height: 100%;
    pointer-events: none;
}


#MainSpace2 {
    width: 100%;
    height: 50%;
    padding: 1%;
}


.bottomBox {
    width: 100%;
    /*width: 18rem;*/
    /*height: 12rem;*/
    text-align: center;
}

    .bottomBox > .CameraButtonContainer {
        width: 98%;
        border-radius: 10px;
        top: 0em;
    }

/*#lastRow {
    padding: 0 1.7% 
    font-size: 50% ;
    margin-bottom: 0.5% ;
}
*/
.CustomPadding {
    padding: 0% 5px !important;
}

.lastRow3 {
    padding: 0 0.4%;
    font-size: 50%;
    margin-bottom: 0.5%;
}

.CustomPadding3 {
    padding: 0% 20px !important;
    margin: 0% 0px;
}

.LastPlusButton {
    display: none;
}

.template_card .col-md-6, .template_card .col-md-1, .template_card .col-md-12, .template_card .col {
    padding-left: 0%;
    padding-right: 0%;
}

.Addbutton {
    width: 12rem;
    margin: 7%;
}

#green-line {
    background-color: #7AC142;
    width: 98%;
    margin-top: 0% !important;
    margin-bottom: 0.5% !important;
}

.row-divider {
    background-color: #7AC148;
    margin-left: -3% !important;
    /* margin-right: -8% !important; */
    width: 106%;
}

.ar-16-9 {
    aspect-ratio: 16 / 9;
}

.template-title {
    text-align: center;
    font-weight: bold;
    color: #7ac142;
}

span.template-title {
    width: 100%;
}


span.report-title-01 {
    width: 100%;
}
span.report-title-02 {
    width: 100%;
}

.EditablePen {
    font-size: inherit;
    color: red;
    display: inline;
    margin-left: 5px;
}

.h-40{
    height: 40%;
}

.pb-10{
    padding-bottom:10%;
}