/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 20px;
    padding-bottom: 0px;
    background-color: #272727;
    scrollbar-base-color: black;
    scrollbar-face-color: gainsboro;
    scrollbar-shadow-color: dimgray;
    font-family:'Arial';
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left:10px;
    padding-right: 0px;
    overflow-y: auto;
}


.main-content {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: whitesmoke;
    overflow-y: auto;
    scrollbar-base-color: black;
    scrollbar-face-color: gainsboro;
    scrollbar-shadow-color: dimgray;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 800px;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

.tester {
    background-color: black;
}


@media only screen and (max-height: 600px) {
    body {
        background-color: black;
    }

    .tester {
        background-color: black;
    }

    .a_lft_menu {
        font-size: 8pt;
    }
}

@media only screen and (min-height: 700px) {
    body {
        background-color: black;
    }

    .tester {
        background-color: black;
    }

    a_lft_menu {
        font-size: 9pt;
    }


    
}


/*
    This is used on the default page for styles

    5CBF30

*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column_ot {
    float: left;
    padding: 10px;
    width: 25%;
    box-sizing: border-box;
 
  
   
}
.column_ot_full {
    float: left;
    padding: 10px;
    width: 25%;
    box-sizing: border-box;
}


.column_ott {
    float: left;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
}
.column_ot_3 {
    float: left;
    width: calc(100% / 3);
    padding: 20px;
}
.column_ot_2 {
    flex: 0 0 50%;
    padding: 10px;
}

@media (max-width: 768px) {
    .column_ot_2 {
        flex: 0 0 100%;
    }
}
.column_ot_5 {
    float: left;
    padding: 10px;
    width: 20%;
    box-sizing: border-box;
}

.column_ot_2_font {
    font-size :11pt;
    color:black;
}
.column_ot_6 {
    float: left;
    width: calc(100% / 8);
    padding: 0px;
}

.row_ot {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}
/* Clear floats after image containers */
.row_ot::after {
    content: "";
    clear: both;
    display: table;
}

.img_ot_no_border {
    border-radius: 25px;
    border: none;
}

.img_ot {
    border-radius: 25px;
    border:solid;
}

.img_bb_ot {
    border-radius: 25px;
    border: solid;
    border-color: grey;
    display: block;
    width: 100%;
    height: auto;
   
    
    ;
}
    .img_bb_ot:hover {
        border-radius: 25px;
        border: solid;
        border-color: #555;
      
    }

.img_bb_ot_lg {
    border-radius: 25px;
    border: solid;
    border-color: lightgrey;
    width:75%;
}

.img_round_ot {
    border-radius: 100px;
    border: solid;
}


.img_btn_ot {
    border-radius: 25px;
    background-color:#5cbf30;
    color:black;
    font-size:12pt;
    padding:15px;
    border:none;
}

.img_btn_ot_darkg {
    border-radius: 25px;
    background-color: black;
    opacity: 0.7;
    color: white;
    font-size: 12pt;
    padding: 10px;
    border: none;
}


    .img_btn_ot_darkg:hover {
        border-radius: 25px;
        background-color:#2c2c2c;
        opacity: 0.7;
        color: white;
        font-size: 12pt;
        padding: 10px;
        border: none;
    }



.container {
    position: relative;
    text-align: left;
    color: white;
}


/* Container holding the image and the text */
.container_ot {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left_ot {
    position: absolute;
    bottom: 8px;
    left: 16px;
}
img {
    max-width: 100%;
    height: auto;
}
/* Top left text */
.top-left_ot {
    position: absolute;
    top: 5%;
    left: 8%;
    background-color: black;
    opacity: 0.7;
    font-size: clamp(14px, 2vw, 16px);
    padding: 3%;
    border-radius: 15%;
  
}

.top-left_ot_6 {
    position:center;
    top: 10px;
    left: 7px;
    background-color: black;
    opacity: 0.7;
    font-size: 8pt;
    padding: 8px;
    border-radius: 25px;
    margin-block:auto;
}
/* Top right text */
.top-right_ot {
    position: absolute;
    top: 5%;
    right: 8%;
    background-color: black;
    opacity: 0.7;
    font-size: 9pt;
    padding: 5%;
    border-radius:10%;
}

.top-right_ot_a  {
    color:white;
}
    /* Bottom right text */
    .bottom-right_ot {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered_ot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}





.div_bb_ot_lg {
    border-radius: 25px;
    border: solid thin;
    border-color: lightgrey;
    width: 100%;
    background-color: white;
    color: black;
    padding-bottom:15px;
       
}


/* white href on image */
.href_img_white {
    color:white;
}
    .href_img_white:hover {
        color: black;
        
    }

.href_img_white_6 {
    color: #555;
}

    .href_img_white_6:hover {
        color: darkgray;
    }


/* white href on image */
.href_white {
    color: white;
}

    .href_white:hover {
        color: white;
    }

.sidenavmenu_open {
    height: 100%;
    width: 11%;
    position: fixed;
    top: 50px;
    left: 0;
    background-color: #272727;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
    padding-bottom: 10px;
    overflow-y: auto;
}

.sidenavmenu_closed {
    height: 100%;
    width: 4%;
    position: fixed;
    z-index: 2;
    top: 50px;
    left: 0;
    background-color: #272727;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
    padding-bottom: 100px;
    overflow-y: auto;
}



.sidenavmenu .closebtn {
    text-align: right;
    top: 50px;
    right: 25px;
    font-size: 30px;
    color: #546b49;
    padding-right: 10px;
}





.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: #272727;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
    padding-bottom: 100px;
    
    overflow-y:auto;
   
}

    .sidenav a, .dropdown-btn {
        padding: 6px 8px 6px 10px;
        text-decoration: none;
        font-size: 20px;
        color: #818181;
        display: block;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        outline: none;
      
    }

        .sidenav a:hover, .dropdown-btn:hover {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        text-align: right;
        top: 50px;
        right: 25px;
        font-size: 40px;
        color: #546b49;
        padding-right: 10px;
    }
.active {
    background-color: #546b4a;
    color: white;
}
#main {
   
    transition: 0.5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}
@media (max-width: 991px) {
    .column_ot {
        width: 50%;
    }
}
@media (max-width: 600px) {
    .column_ot {
        width: 50%;
    }
}
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}
.show-mobile-only {
    display: none;
}

@media (max-width: 1175px) {
    .show-mobile-only {
        display: block;
    }
}

        @media (max-width: 1175px) {
            li.hide-mobile-login {
                display: none !important;
                visibility: hidden !important;
            }
        }

        @media (max-width: 1175px) {
            div.hide-mobile-login {
                display: none !important;
                visibility: hidden !important;
            }
        }

        @media (max-width: 1175px) {
            a.hide-mobile-login {
                display: none !important;
                visibility: hidden !important;
            }
        }

        .dropdown-container {
            display: none;
            background-color: #262626;
            padding-left: 30px;
        }


        /* Optional: Style the caret down icon */
        .fa-caret-down {
            float: right;
            padding-right: 8px;
        }

        * {
            box-sizing: border-box;
        }

        /* Style the search box */
        #mySearch {
            width: 90%;
            font-size: 14px;
            padding: 5px;
            background-color: lightgray;
            align-content: center;
        }

        #mysidenav li a {
            padding: 8px;
            text-decoration: none;
            color: black;
            display: block;
        }



        ul.no-bullets {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        /* Create three columns of equal width */
        .columns {
            float: left;
            width: 16.6%;
            padding: 9px;
            padding-bottom: 0px;
        }

        /* Style the list */
        .price {
            background-color: white;
            list-style-type: none;
            border: 1px solid black;
            border-top-left-radius: 27px;
            border-top-right-radius: 27px;
            border-bottom: none;
            margin: 0;
            padding: 0;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            box-shadow: 0 15px 20px 0 rgba(0,0,0,0.3)
        }

            /* Add shadows on hover */
            .price:hover {
                box-shadow: 0 10px 14px 0 rgba(0,0,0,0.2)
            }

            /* Pricing header */
            .price .header {
                background-color: black;
                color: white;
                font-size: 25px;
                border-top-right-radius: 25px;
                border-top-left-radius: 25px;
            }

            /* List items */
            .price li {
                border-bottom: 0px;
                padding: 20px;
                text-align: center;
            }

            /* Grey list item */
            .price .grey {
                background-color: lightgray;
                font-size: 20px;
            }



        at {
            text-decoration: none;
            display: inline-block;
            padding: 8px 8px;
        }

            at:hover {
                background-color: lightgreen;
                color: black;
            }


        .previous {
            color: white;
            font-size: 30pt;
            text-decoration: none;
            position: fixed;
            top: 300px;
            left: 30px;
        }

        .next {
            color: white;
            font-size: 30px;
            text-decoration: none;
            position: fixed;
            top: 300px;
            right: 30px;
        }

            .next:hover {
                text-decoration: none;
                color: black
            }

        .previous:hover {
            text-decoration: none;
            color: black
        }


        .round {
            border-radius: 50%;
        }

        /* The container */
        .containerz {
            display: block;
            position: relative;
            padding-left: 50px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 18px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            /* Hide the browser's default checkbox */
            .containerz input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 40px;
            border: solid 1px #5cbf30;
        }

        /* On mouse-over, add a grey background color */
        .container1z:hover input ~ .checkmark {
            background-color: white;
        }

        /* When the checkbox is checked, add a blue background */
        .containerz input:checked ~ .checkmark {
            background-color: #5cbf30;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .checkmark:hover {
            background-color: whitesmoke;
        }

        /* Show the checkmark when checked */
        .containerz input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .containerz .checkmark:after {
            left: 15px;
            top: 5px;
            width: 10px;
            height: 20px;
            border: solid black;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

            /* Hide default HTML checkbox */
            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

        input:checked + .slider {
            background-color: #5cbf30;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }

        .btns {
            border: 2px solid black;
            background-color: white;
            color: black;
            padding: 14px 28px;
            font-size: 20px;
            cursor: pointer;
        }

        .module_g {
            color: black;
        }

            .module_g:hover {
                color: white;
            }

        /* Green */
        .register {
            border-color: #5cbf30;
            color: green;
        }

            .register:hover {
                background-color: #5cbf30;
                color: white;
            }

        h1 {
            text-shadow: 2px 2px 5px #5cbf30;
        }

        /* Center the loader */
        #loader {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            width: 120px;
            height: 120px;
            margin: -76px 0 0 -76px;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #5CBF30;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }




        @keyframes animatebottom {
            from {
                bottom: -100px;
                opacity: 0
            }

            to {
                bottom: 0;
                opacity: 1
            }
        }

        .bg-image {
            /* The image used */
            background-image: url("images/footer.png");
            /* Add the blur effect */
            filter: blur(8px);
            -webkit-filter: blur(8px);
            /* Full height */
            height: 100%;
        }


        .header {
            padding: 10px 16px;
            background: #555;
            color: #f1f1f1;
        }

        .content {
            padding: 16px;
        }

        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }

            .sticky + .content {
                padding-top: 102px;
            }

        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }

        .con {
            display: inline-block;
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
        }




        /* styles used  on the reports main landing page */
        .pinkdiv_left {
            text-align: left;
            background-color: #d5d5d5;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
            padding: 20px 20px 20px 20px;
        }

        .pinkdiv_right {
            text-align: left;
            background-color: #d5d5d5;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            padding: 20px 20px 20px 20px;
        }


        #menu_ontouch {
            font-size: 12pt;
            padding: 5px;
            padding-left: 0px;
            padding-right: 2px;
            padding-bottom: 80px;
            text-decoration: none;
            color: gainsboro;
            background-color: #272727;
            list-style-type: none;
            transition: 0.5s;
        }


        .menu_ontouch_sidenav li {
            list-style-type: none;
            padding-bottom: 2px;
            padding-left: 0px;
            text-align: left;
            text-decoration-line: none;
        }

        .menu_ontouch_sidenav ul {
            list-style-type: none;
            padding: 2px;
            padding-left: 7px;
            text-align: center;
        }

        .menu_ontouch_sidenav {
            height: 100%;
            width: 100%;
            background-color: #272727;
            padding-top: 0px;
            padding-bottom: 10px;
            overflow: auto;
            color: gainsboro;
            text-decoration-line: none;
        }

            /* Mouse over  */
            .menu_ontouch_sidenav a:hover {
                color: white;
                text-decoration: none;
            }


            .menu_ontouch_sidenav ul > li > a {
                background-color: #272727;
                padding: 2px 2px 2px 2px;
                font-size: 10pt;
                color: gainsboro;
                width: 100%;
                text-align: center;
                cursor: pointer;
                outline: none;
                text-decoration-line: none;
            }

        /* dashboard day/week/month buttons  */
        .dashboard-btns {
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            border: none;
            font-family: 'Arial Rounded MT';
            background-color: gainsboro;
            border-bottom: solid;
            border-color: dimgray;
            padding: 10px;
            padding-top: 5px;
        }

        textarea {
            background: ghostwhite;
            background-color: lightgrey;
            border: none;
        }

            textarea:read-only {
                background-color: whitesmoke;
                border: none;
            }

        input[type="text"] {
            background-color: lightgrey;
            border: none;
        }

            input[type="text"]:read-only {
                background-color: whitesmoke;
                border: none;
            }

        input[type="date"] {
            background-color: lightgrey;
            border: none;
        }

            input[type="date"]:read-only {
                background-color: whitesmoke;
                border: none;
            }

        input[type="number"] {
            background-color: lightgrey;
        }

            input[type="number"]:read-only {
                background-color: whitesmoke;
            }

        input[type="email"] {
            background-color: lightgrey;
        }

            input[type="email"]:read-only {
                background-color: whitesmoke;
            }

        input[type="checkbox"] {
            background-color: transparent;
            margin: 0;
            font: inherit;
            color: #546b49;
            width: 1.15em;
            height: 1.15em;
            border: 0.15em solid black;
            border-radius: 0.15em;
            accent-color: #5cbf30;
        }

            input[type="checkbox"]:checked {
                background-color: transparent;
                margin: 0;
                font: inherit;
                color: #546b49;
                width: 1.20em;
                height: 1.20em;
                border: 0.15em solid black;
                border-radius: 0.15em;
                accent-color: #5cbf30;
            }


        select:enabled {
            border-radius: 2px;
            background-color: lightgrey;
            border: none;
        }

        select:disabled {
            border-radius: 2px;
            background-color: whitesmoke;
            color: black;
            border: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            text-indent: 1px;
            text-overflow: '';
        }


        #table, tr, td {
            background-color: transparent;
        }



        resultdiv {
            background-color: peachpuff;
        }

        /* makes our buttons sticcky sort of */
        .btn-sticky-submit {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            position: -webkit-sticky;
            position: fixed;
            top: 100px;
            right: 200px;
            background-color: #5cb85c;
            z-index: 999 !important;
        }

        /* makes our buttons sticcky sort of */
        .btn-sticky-cancel {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            position: -webkit-sticky;
            position: fixed;
            top: 100px;
            right: 120px;
            background-color: #d9534f;
            z-index: 999 !important;
        }

        .btn-sticky-saveandsubmit {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            position: -webkit-sticky;
            position: fixed;
            top: 150px;
            right: 120px;
            background-color: forestgreen;
            z-index: 999 !important;
            width: 140px;
        }

        /* makes our buttons sticcky sort of */
        .btn-sticky-submit_nf {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            position: -webkit-sticky;
            position: relative;
            top: 100px;
            right: 200px;
            background-color: #5cb85c;
            z-index: 10;
        }

        /* makes our buttons sticcky sort of */
        .btn-sticky-cancel_nf {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            position: -webkit-sticky;
            position: relative;
            top: 100px;
            right: 120px;
            background-color: #d9534f;
            z-index: 10;
        }

        .btn-sticky-cancel-done {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            top: 300px;
            left: 50%;
            background-color: #d9534f;
            z-index: 999 !important;
        }

        .btn-sticky-cancel-forgot {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: #d9534f;
            z-index: 999 !important;
        }

        .btn-sticky-submit-forgot {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: #5cb85c;
            z-index: 999 !important;
        }

        .btn-sticky-cancel-basic {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: #d9534f;
            z-index: 999 !important;
        }

        .btn-sticky-submit-basic {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: #5cb85c;
            z-index: 999 !important;
        }

        /* THIS SECTION IS FOR THE PAGES Fieldsets etc START ******************************************************************* */
        .data_div {
            background-color: #272727;
            width: 100%;
            padding: 10px 10px 0px 0px;
            text-align: center;
        }

        .data_fieldset {
            background-color: whitesmoke;
            padding: 0px 0px 100px 40px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            width: 100%;
            height: contain;
        }



        .data_label {
            background-color: lightgray;
            padding: 10px 15px 10px 15px;
            border-radius: 5px;
        }

        .data_legend {
            border: none;
            text-align: left;
        }

        .data_table {
            text-align: Left;
            font-family: Arial;
            background-color: whitesmoke;
        }

        /* THIS SECTION IS FOR THE PAGES Fieldsets etc END ******************************************************************* */
        .addsite {
            background-image: url("./images/addsite.png");
            height: 35px;
        }

            .addsite:hover {
                background-image: url("./images/addsite-white.png");
                height: 40px;
            }

        addasset {
            background-image: url("images/adduser.png");
            height: 35px;
        }

        .addasset:hover {
            background-image: url("images/adduser-white.png");
            height: 35px;
        }



        .menuacitive {
            background-color: aqua;
            color: orange;
        }

        .menunotacitive {
            background-color: transparent;
            color: yellow;
        }


        ttt {
            font-family: arial
        }

        .modaly {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 50px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        /* Modal Content */
        .modaly-content {
            background-color: #fefefe;
            margin: auto;
            padding: 15px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .closey {
            color: #5cbf30;
            float: right;
            font-size: 30px;
            font-weight: bold;
        }

            .closey:hover,
            .closey:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }



        /* Modal Content */
        .nav-linkbutton-link {
            width: 50px;
            text-decoration: none;
            color: gainsboro !important;
            padding-top: 8px;
        }

        .nav-linkbutton-link-100 {
            width: 100px;
            text-decoration: none;
            color: gainsboro !important;
            padding-top: 8px;
        }

        .nav-linkbutton-link-150 {
            width: 150px;
            text-decoration: none;
            color: gainsboro !important;
            padding-top: 8px;
        }

        .nav-linkbutton-link-200 {
            width: 200px;
            text-decoration: none;
            color: gainsboro !important;
            padding-top: 8px;
        }

        .info-box {
            padding: 15px;
            text-align: center;
            font-size: 17px;
            border: solid;
            border-width: 1px;
            color: #82b96a;
            border-radius: 10px;
            border-color: #82b96a;
            margin-right: 50px;
            margin-bottom: unset;
            margin-top: unset;
        }

        #div1, #div2 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }



        #myModal_login_info {
            position: relative;
        }

        .modal-dialog-info {
            background-color: ghostwhite;
            position: fixed;
            width: 25%;
            margin: 0;
            padding: 10px;
            height: 90vh;
            right: 10px;
            z-index: 100;
            overflow-y: auto;
        }

        .info-button {
            padding: 15px;
            text-align: left;
            font-size: 12px;
            border-left: solid;
            border-width: 2px;
            color: black;
            border-top-left-radius: 15px;
            border-top-left-radius: 15px;
            border-color: #272727;
            overflow: auto;
            display: none;
        }

        * {
            box-sizing: border-box
        }

        .firstslide {
            display: block;
            height: 450px;
        }

        .mySlides {
            display: none;
        }

        .mySlides_other {
            display: block;
            height: 450px;
        }

        img {
            vertical-align: middle;
        }

        /* Slideshow container */
        .slideshow-container {
            position: relative;
            margin: auto;
        }

        .slideshow-container_other {
            height: 450px;
            position: relative;
            margin: auto;
        }



        /* Next & previous buttons */
        .previ, .nexti {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 10px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 3px;
            user-select: none;
            background-color: #5cbf30;
            text-decoration: none
        }

        /* Position the "next button" to the right */
        .previ {
            left: 0;
            border-radius: 3px 0 0 3px;
        }

        .nexti {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

            /* On hover, add a black background color with a little bit see-through */
            .previ:hover, .nexti:hover {
                background-color: rgba(0,0,0,0.8);
            }

        /* Caption text   #5cbf30; */
        .texti {
            color: black;
            font-size: 20px;
            font-weight: bold;
            background: rgba(51, 170, 51, .6);
            padding: 12px;
            position: absolute;
            bottom: 0px;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
            visibility: hidden;
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #546b49;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

            .active, .dot:hover {
                background-color: #82b96a;
            }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
            .previ, .nexti, .texti {
                font-size: 11px
            }

            .marquee {
                width: 300px; /* the plugin works for responsive layouts so width is not necessary */
                overflow: hidden;
                border: 1px solid #ccc;
            }
        }

        .footer_ot {
            background: #4f4f4f;
            color: #dcdcdc;
            padding: 10px 20px 35px 20px;
        }

        .footer_row_ot {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .footer_block_ot {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer_title_ot {
            font-family: "Arial Rounded MT", Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            margin-top: 0;
            margin-bottom: 18px;
        }

        .footer_text_ot {
            font-family: "Arial Rounded MT", Arial, sans-serif;
            font-size: 15px;
            line-height: 1.7;
            margin: 0 0 8px 0;
            color: #dcdcdc;
        }

        .footer_link_ot {
            color: #dcdcdc;
            text-decoration: none;
            transition: color 0.2s ease, opacity 0.2s ease;
            display: inline-block;
            margin-right: 15px;
        }

            .footer_link_ot:hover {
                color: #ffffff;
                opacity: 0.9;
                text-decoration: underline;
            }

        .footer_store_ot {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .store_badge_ot img {
            height: 65px;
            max-width: 180px;
            width: auto;
            display: block;
            border-radius: 10px;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

            .store_badge_ot img:hover {
                transform: translateY(-2px);
                opacity: 0.95;
            }

        .footer_logo_ot {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100%;
        }

        .footer_logo_img_ot {
            max-height: 110px;
            width: auto;
            max-width: 100%;
            display: block;
        }

        .defcenter {
            justify-content: center;
        }

        .active-link {
            background-color: rgba(0,0,0,0.4);
        }

.small-screen {
    padding: 100px;
}
@media (max-width: 767px) {
    .small-screen {
        padding: 5px !important;
        font-size: 10pt !important;
    }
}


.small-screen-width {
   width: 80%;
}

@media (max-width: 767px) {
    .small-screen-width {
        width: 99% !important;
        padding: 2% !important;
    }



    @media (max-width: 991px) {
        .defcenter {
            justify-content: center;
        }
    }

    @media (max-width: 767px) {
        .defcenter {
            justify-content: center;
        }

        @media (max-width: 480px) {
            .defcenter {
                justify-content: center;
            }





            @media (max-width: 991px) {
                .footer_ot {
                    padding: 0 35px 25px 35px;
                }

                .footer_block_ot {
                    padding: 18px 15px;
                    text-align: center;
                }

                .footer_store_ot {
                    align-items: center;
                }

                .footer_logo_ot {
                    justify-content: center;
                }
            }

            @media (max-width: 767px) {
                .footer_title_ot {
                    font-size: 18px;
                    margin-bottom: 12px;
                }

                .footer_text_ot {
                    font-size: 14px;
                    line-height: 1.6;
                }

                .store_badge_ot img {
                    height: 60px;
                    max-width: 170px;
                }

                .footer_logo_img_ot {
                    max-height: 90px;
                }
            }

            .page-box {
                width: 90%;
                max-width: 1000px;
                margin: 20px;
                background-color: #4d4d4d;
                padding: 0;
                box-shadow: 0 15px 30px 30px rgba(0,0,0,0.3);
                box-sizing: border-box;
                position: relative;
            }

            @media (max-width: 768px) {
                .page-box {
                    width: 95%;
                    margin: 10px auto 25px auto;
                    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
                }
            }

            @media (max-width: 480px) {
                .page-box {
                    width: 100%;
                    margin: 0 0 20px 0;
                    box-shadow: none;
                }
            }

            .row-flex {
                display: flex;
                align-items: center;
            }

            @media (max-width: 768px) {
                .row-flex {
                    flex-direction: column;
                }

                    .row-flex .col {
                        width: 100%;
                        text-align: center !important;
                    }

                    .row-flex img {
                        padding-right: 0 !important;
                        height: 40px !important;
                    }
            }

            .headers {
                display: flex;
                align-items: center;
                background-color: #22bbf4;
                color: white;
                width: 100%;
            }

                .headers .col {
                    flex: 1;
                    padding: 20px;
                    box-sizing: border-box;
                }

            .header-title {
                text-align: center;
            }

            .header-icon {
                text-align: right;
            }

            .title-text {
                font-size: 18pt;
                font-weight: bolder;
                color: black;
            }

            .cleaning-icon {
                height: 50px;
                padding-right: 60px;
            }

            @media (max-width: 768px) {
                .cleaning-header {
                    flex-direction: column;
                    text-align: center;
                }

                    .cleaning-header .col {
                        width: 100%;
                        padding: 12px 15px;
                    }

                .header-icon {
                    text-align: center;
                }

                .cleaning-icon {
                    height: 40px;
                    padding-right: 0;
                }

                .title-text {
                    font-size: 14pt;
                }

                .header-spacer {
                    display: none;
                }
            }