@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*

TABLE OF CONTENT

	1. UNIVERSAL STYLES
	2. LEFT SIDE MENU
	3. TOP MENU DROPDOWNS
	4. MODULES
    5. MEDIA

*/

/*------------------------------*/
/* 1. UNIVERSAL STYLES */
/*------------------------------*/

#viewToggleContainer {
    display: flex;
    position: relative;
    background-color: #e9ecef; /* A light grey background */
    border-radius: 20px; /* Pill shape */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    width: 250px;
    height: 40px; /* Fixed height for a clean look */
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0; /* Initial position */
    width: 50%;
    height: 100%;
    background-color: #132834; /* The dark theme color */
    border-radius: 20px; /* Fully rounded to match container */
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth slide effect */
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Add some depth */
}

.view-toggle-button {
    flex: 1; /* Make buttons share space equally */
    padding: 8px 16px;
    border: none;
    background-color: transparent; /* Buttons are transparent */
    cursor: pointer;
    font-size: 10pt;
    font-weight: 600;
    color: #555; /* Default text color */
    z-index: 2; /* Ensure text is above the slider */
    transition: color 0.3s ease;
    border-radius: 20px;
}

    .view-toggle-button.active {
        color: white; /* Active text is white to contrast with the slider */
    }

/* #region LOGIN*/

    /* Particles.js container */
    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #53a7db;
        background-image: url("");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        zoom: 1.25 !important;
    }

        #particles-js canvas {
            display: block;
            vertical-align: bottom;
        }

    /* Login card styling */
    .login-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1; /* Ensure login card is above the particles background */
        max-width: 400px;
        width: 90%; /* Adjust width as needed */
        padding: 30px; /* Add padding to the card */
        background-color: rgba(255, 255, 255, 0.8); /* Adjust opacity as needed */
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better contrast */
        text-align: center; /* Center text inside the card */
        font-optical-sizing: auto;
        font-weight: lighter;
        font: normal 16pt Arial, Helvetica, sans-serif;
    }

        .login-card form{
            margin:0px;
        }

        .login-card img{
            width:250px;
        }

        .login-card .card {
            background-color: rgba(255, 255, 255, 0.8); /* Adjust opacity as needed */
            border: none;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better contrast */
        }

        .login-card .card-body {
            padding: 20px; /* Add padding inside the card body */
        }

        .login-card .card-title {
            text-align: center;
            margin-bottom: 30px;
        }

        /* Form control styles */
        .login-card .login-form .form-control {
            margin-bottom: 10px;
            color: black;
            padding-right: 2.5rem;
            height: 50px;
            font-size: 14pt;
        }

        /* Button styles */
        .login-card .btn {
            width: 80%;
            background-color: #53a7db;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;
            margin:10px;
            text-transform:uppercase;
            font-weight:bold;
        }

            .login-card .btn:hover {
                background-color: #226c9a;
            }

        /* Eye icon button */
        .login-card .btn-outline-secondary {
            background-color: transparent;
            border: none;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        /* Eye icon */
        .login-card .fa-eye,
        .login-card .fa-eye-slash {
            color: #555; /* Eye icon color */
        }

        .login-card .position-relative {
            position: relative;
        }

        .login-card .position-absolute {
            position: absolute;
        }

/* #endregion */

/* #region RESETPASSWORD */

#resetPassword {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: 500px;
    padding: 60px 30px;
    margin: 10vw auto;
    height: auto;
    background-color: white;
    border-radius: 20px;
    border: 2px solid #13283424;
    box-shadow: 3px 3px 5px 0px;
}

    #resetPassword h1 {
        font-weight: bold;
        color: #132834;
        text-decoration: underline;
        text-underline-offset: 10px;
        margin-bottom: 50px;
    }

    #resetPassword i {
        color: #132834;
        margin: 40px 0px 80px 0px;
        font-size: 70pt;
    }

    #resetPassword label {
        text-transform: uppercase;
        font-weight: bold;
        margin: 10px 0px;
    }

    #resetPassword input {
        padding: 10px;
        border-radius: 5px;
        border: 3px solid #53a9de;
        background-color: #53a9de1f;
        font-size: 14pt;
        margin-bottom: 30px;
        width: 300px;
        text-align: center;
    }

        #resetPassword input:focus {
            border: 3px solid #53a9de !important;
        }

    #resetPassword button {
        width: 200px;
        height: 50px;
        border-radius: 5px;
        margin: 20px 0px 0px 0px;
        text-transform: uppercase;
        font-weight: bold;
        background-color: #53a9de;
        color: white;
        border: 2px solid #3368
    }

        #resetPassword button:hover {
            background-color: #132834;
            border: 2px solid #132834
        }



/* #endregion */

/* #region COMMON STYLE */

* {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    zoom: 0.8 !important;
    height: 125vh;
}

body, .left-nav {
    background: #132834;
}

.flex-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.col-1 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
}

.required {
    color: red;
    font-size: 12pt;
}

.swal2-container .swal2-popup {
    padding: 20px;
    width: auto;
}

.swal2-container #swal2-title {
    padding: 20px 0px 10px 0px;
    text-transform: uppercase;
}

.swal2-container .swal2-close {
    position: relative;
    top: -20px;
    left: 20px;
}

.swal2-container .swal2-html-container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px;
}

    .swal2-container .swal2-html-container button {
        padding: 5px 10px;
        text-transform: uppercase;
    }

#permissionGridFooter, #permissionGridNurseFooter {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin-top: 20px;
}

#permissionGridFooter button, #permissionGridNurseFooter button {
    width: 100px;
    padding: 5px;
    text-transform: uppercase;
    border-radius: 10px;
    background-color: #838383;
    color: white;
    font-weight: 900;
}

#permissionGridFooter button:hover, #permissionGridNurseFooter button:hover {
    background-color: #595959;
}

#docmModal .modal-dialog {
    min-width: 75% !important;
}


/* #endregion */

/*------------------------------*/
/* 2. LEFT SIDE MENU */
/*------------------------------*/

/*------------------------------*/
/* 3. TOP MENU DROPDOWNS */
/*------------------------------*/

/* #region MENU */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    text-align: left;
    font-size: 12px;
    min-width: 247px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

    .dropdown-content a {
        color: black;
        padding: 25px !important;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.submenu-parent {
    position: relative; /* This creates the positioning context for the submenu */
}

    .submenu-parent:hover > .submenu {
        display: block; /* This shows the submenu when hovering the parent */
    }


.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

    .option:hover + .submenu,
    .submenu:hover {
        display: block;
    }

.dropdown-content .option:hover + .submenu {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* #endregion MENU */

/*------------------------------*/
/* 4. MODULES */
/*------------------------------*/

/* #region PROFILE */

#profile_screen {
    display: flex;
    width: 95%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    margin: 50px;
}

#profile_screen > div:first-child{
    width: 100%;
}

    #profile_screen input, #profile_screen select {
        width: 80% !important;
        border-radius: 5px !important;
        padding: 5px !important;
        border: 1px solid #9a9ea1 !important;
    }

    #profile_screen label{
        text-transform:uppercase;
    }

    #profile_screen #user_title {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        margin-left: 40px;
        font-size: 20pt;
    }

        #profile_screen #user_title h1 {
            margin-left: 20px;
            font-size: 40pt;
        }

    #profile_screen #user {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 8px dotted #53a9de;
        width: 100%;
    }

    #profile_screen #user_details {
        flex: 1;
    }

        #profile_screen #user_details form {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: center;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 30px;
            margin-top: 20px;
        }

        #profile_screen #user_details div {
            width: 100%;
        }
        #profile_screen #user_details div div {
            margin: 20px;
            width: 100%;
        }


    #profile_screen #location {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 450px;
        margin: 30px;
        border-left: 5px solid #53a9de;
    }

        #profile_screen #location h1 {
            margin: 30px auto !important;
        }

        #profile_screen #location div {
            width: 300px;
            margin: 40px auto !important;
        }

        #profile_screen #location span:first-child {
            margin-bottom: 20px !important;
        }

    #profile_screen #doctor form {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 40px 40px 60px 40px;
        border-bottom: 8px dotted #53a9de;
        margin-top: 20px;
    }

        #profile_screen #doctor form > div:first-child {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            font-size: 15pt;
            margin-bottom: 30px;
        }

            #profile_screen #doctor form div:first-child h1 {
                margin-left: 20px;
                font-size: 25pt;

            }

        #profile_screen #doctor form > div:nth-child(2) {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            width: 100%;
        }

            #profile_screen #doctor form > div:nth-child(2) div{
                margin-right:50px;
            }

            #profile_screen #doctor form > div:nth-child(2) input {
                width: 20vw !important;
            }


    #profile_screen #buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-end;
        align-items: center;
        margin: 30px auto;
    }

        #profile_screen #buttons button {
            margin: 10px 20px;
            font-weight: bold;
            border-radius: 5px;
            font-size: 14pt;
            width: 300px;
        }

    .swal2-container{
        zoom:1.5;
    }



/* #endregion */

/* #region MAINTENANCE  */

#maitenance_screen {
    width: 95%;
    margin: 50px auto;
    padding: 30px 30px 10px 30px;
}

    #maitenance_screen h2 {
        font-size: 30pt;
        margin: 0px auto 30px auto;
        text-align: center;
        border-bottom: 6px dotted #132834;
        padding-bottom: 20px;
        width: 95%;
    }

    #maitenance_screen .maintenance_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 30px;
        width: 95%;
        margin: 0px auto 20px auto;
    }

    #maitenance_screen .maintenance_container .maintenance_container_section {
        width: 300px;
    }

        /* Accordion button styling */
        #maitenance_screen .maintenance_container button.accordion {
            background-color: #132834;
            color: white;
            cursor: pointer;
            padding: 20px;
            width: 100%;
            border: none;
            border-radius: 10px;
            text-align: center;
            outline: none;
            font-size: 18px;
            transition: 0.4s;
            font-weight: 600;
            margin-bottom: 30px;
        }

        #maitenance_screen .maintenance_container button.accordion.active,
        #maitenance_screen .maintenance_container button.accordion:hover {
            background-color: #132834;
        }

        /* Panel styling (hidden by default) */
            #maitenance_screen .maintenance_container div.panel {
                background-color: white;
                overflow: hidden;
                transition: max-height 0.6s ease-in-out;
                max-height: 0; /* IMPORTANT: hide by default */
                margin: 0 10px; /* Or adjust as you like */
                opacity: 0; /* to fade it in/out if you want */
                padding: 0; /* You can remove or adjust padding if it collapses oddly */
            }

            /* When JS toggles 'show' class, show the panel */
           #maitenance_screen .maintenance_container div.panel.show {
                max-height: 800px; /* or whatever max you need */
                opacity: 1; /* fade it in */
                /* Adjust margin/padding if you want to animate them as well */
            }

        #maitenance_screen .maintenance_container a {
            display: inline-block;
            max-width: 100%;
            word-break: break-word;
            white-space: normal;
            margin-bottom: 10px;
            color: #686868;
        }


/* #endregion */

/* #region OP. MAINTENANCE */
#op_maintenance {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 50px;
}

    #op_maintenance form {
        width: 95%;
    }

    #op_maintenance label {
        text-transform: uppercase;
    }

    #op_maintenance input, #op_maintenance select {
        border-radius: 5px;
        padding: 5px;
        height: 40px !important
    }

    #op_maintenance #user_credentials {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        padding-bottom: 30px;
        border-bottom: 8px dotted #53a9de;
        padding: 0px 50px 30px 50px;
    }

        #op_maintenance #user_credentials input {
            width:200px;
        }

        #op_maintenance #user_credentials > div:first-child {
            display: flex;
            width: auto;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: stretch;
            margin-right: 30px;
            zoom: 1.2;
        }

            #op_maintenance #user_credentials > div:first-child > div:first-child {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: flex-end;
            }

            #op_maintenance #user_credentials > div:first-child input {
                margin-left:10px;
            }

            #op_maintenance #user_credentials > div:first-child button {
                border-radius: 5px;
                margin: 0px 40px 0px 20px;
                height: 40px;
                padding: 0px 20px;
            }

        #op_maintenance #user_credentials > div:nth-child(2) {
            flex: 1;
            text-align: right;
            display: flex;
            flex-direction: row;
            align-items: baseline;
            justify-content: flex-end;
            flex-wrap: nowrap;
        }

            #op_maintenance #user_credentials > div:nth-child(2) i {
                font-size: 35pt;
                margin-right: 20px;
            }

            #op_maintenance #user_credentials > div:nth-child(2) h1 {
                font-size: 30pt;
            }

    #op_maintenance #user_details {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 30px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance #user_details div{
            margin: 0px 20px;
        }

            #op_maintenance #user_details div input[type=checkbox] {
                scale: 2;
                position: relative;
                left: 7px;
            }

    #op_maintenance #levels {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 30px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance #levels > div {
            margin: 0px 30px;
        }

        #op_maintenance #levels > div input {
            width: 200px;
        }

    #op_maintenance #clinics {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 30px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance #clinics > div:first-child {
            display: flex;
            margin: 0px 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
        }

            #op_maintenance #clinics > div:first-child div {
                margin: 0px 0px 20px 0px;
            }

            #op_maintenance #clinics input[type=checkbox]{
                scale: 2;
                position: relative;
                left: 7px;
            }

        #op_maintenance #clinics > div:nth-child(2) {
            display: flex;
            margin: 0px 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
        }

            #op_maintenance #clinics > div:nth-child(2) div {
                margin: 0px 0px 20px 0px;
            }

            #op_maintenance #clinics > div:nth-child(2) div select, #op_maintenance #clinics > div:nth-child(2) div input {
                width: 150px;
            }

        #op_maintenance #clinics > div:nth-child(3) {
            display: flex;
            margin: 0px 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
            border-right: 3px solid #53a9de;
            padding-right: 40px;
        }

            #op_maintenance #clinics > div:nth-child(3) div {
                margin: 0px 0px 20px 0px;
            }

            #op_maintenance #clinics > div:nth-child(3) div select, #op_maintenance #clinics > div:nth-child(3) div input {
                width:150px;
            }

        #op_maintenance #permissionGrid{
            height: 400px;
            width: 100%;
        }

        #op_maintenance #clinics #grid {
            width: 60vw;
            height: 100%;
            padding: 0px 20px;
        }

            #op_maintenance #clinics #grid input[type=checkbox] {
                scale: 1.5;
                position: relative;
                top: -5px;
            }

        #op_maintenance #clinics #grid #grid_filter {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            margin: 20px 0px;
            zoom: 0.8;
            gap: 20px;
        }

            #op_maintenance #clinics #grid #grid_filter select {
                width: 200px;
            }

            #op_maintenance #clinics #grid #grid_filter button {
                width: 130px;
                height: 40px;
                text-transform: uppercase;
                border-radius: 5px;
                background-color: #53a9de;
                color: white;
                font-weight: 900;
            }

    #op_maintenance #other {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 30px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance #other > div {
            margin: 0px 30px;
        }

        #op_maintenance #other > div div{
            margin: 20px 0px;
        }

            #op_maintenance #other > div div input[type=checkbox] {
                scale: 2;
                position: relative;
                left: 7px;
            }

    #op_maintenance #log {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 30px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance #log > div {
            margin: 0px 30px;
        }

    #op_maintenance #buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 30px;
    }

        #op_maintenance #buttons button {
            margin: 0px 20px !important;
            width: 200px;
            border-radius: 10px;
            height: 60px;
            font-weight: bold;
            font-size: 16pt;
        }



/* #endregion */

/* #region OP. MAINTENANCE NURSE */

#op_maintenance_nurse {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 50px;
}

#op_maintenance_nurse form {
    width: 95%;
}

#op_maintenance_nurse label {
    text-transform: uppercase;
}

#op_maintenance_nurse input, #op_maintenance_nurse select {
    border-radius: 5px;
    padding: 5px;
    height: 40px !important;
    width: 150px;
}

#op_maintenance_nurse #user_credentials {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 8px dotted #53a9de;
    padding: 0px 50px 30px 50px;
}

    #op_maintenance_nurse #user_credentials input {
        width: 200px;
    }

    #op_maintenance_nurse #user_credentials h1 {
        text-align: right;
        font-size: 36px;
    }

    #op_maintenance_nurse #user_credentials span {
        font-size: 70pt;
    }

    #op_maintenance_nurse #user_credentials i {
        font-size: 50pt;
        position: relative;
        top: -15px;
        right: 30px;
    }

        #op_maintenance_nurse #user_credentials > div:first-child {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: flex-start;
            margin-right: 30px;
            width: 500px;
            border-right: 3px solid #53a9de;
            zoom: 1.2;
        }

            #op_maintenance_nurse #user_credentials > div:first-child > div:first-child {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: flex-end;
                margin-bottom: 20px;
            }

            #op_maintenance_nurse #user_credentials > div:first-child > div:nth-child(2) input {
                width: 345px;
                margin: 0px 0px 0px 7px;
            }

            #op_maintenance_nurse #user_credentials > div:first-child input {
                margin-left: 10px;
            }

            #op_maintenance_nurse #user_credentials > div:first-child button {
                border-radius: 5px;
                margin: 0px 40px 0px 20px;
                height: 40px;
                padding: 0px 20px;
            }

        #op_maintenance_nurse #user_credentials > div:nth-child(2) {
            width: 175px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            flex-wrap: nowrap;
        }

            #op_maintenance_nurse #user_credentials > div:nth-child(2) input[type=checkbox] {
                scale: 2;
                width: auto;
                height: 20px !important;
                margin: 15px;
            }

        #op_maintenance_nurse #user_credentials > div:nth-child(3) {
            flex: 1;
            position: relative;
            top: -10px;
        }

    #op_maintenance_nurse #user_credentials > div:first-child > div:nth-child(3) {
        margin-top: 20px;
    }

    #op_maintenance_nurse #user_credentials > div:first-child > div:nth-child(3) select {
        width: 345px;
        margin: 0px 0px 0px 7px;
    }

    #op_maintenance_nurse #clinics {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 30px 20px;
        border-bottom: 8px dotted #53a9de;
    }

        #op_maintenance_nurse #clinics > div:first-child {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: auto;
        }

            #op_maintenance_nurse #clinics > div:first-child > div:first-child {
                display: flex;
                flex-direction: row;
                margin: 0px 25px 20px 0px;
                padding-right: 25px;
                border-right: 3px solid #53a9de;
            }

                #op_maintenance_nurse #clinics > div:first-child > div:first-child div{
                    margin:0px 10px
                }

            #op_maintenance_nurse #clinics > div:first-child > div:nth-child(2) {
                display: flex;
                flex-direction: row;
                margin: 0px 0px 20px 0px;
            }

                #op_maintenance_nurse #clinics > div:first-child > div:nth-child(2) div {
                    margin: 0px 10px
                }

                #op_maintenance_nurse #clinics > div:first-child > div:nth-child(2) select {
                    width:100px;
                }

        #op_maintenance_nurse #permissionGridNurse {
            width: 100%;
            height: 500px;
        }

        #op_maintenance_nurse #clinics #grid {
            width: 100%;
            height: 100%;
        }

            #op_maintenance_nurse #clinics #grid .ag-header-cell-text {
                white-space: normal !important;
                text-align: center;
                height: auto !important;
                text-transform: uppercase;
            }

            #op_maintenance_nurse #clinics #grid .ag-cell-value{
                text-align:center;
            }

            #op_maintenance_nurse #clinics #grid input[type=checkbox] {
                scale: 1.5;
                position: relative;
                top: -5px;
                width: auto !important;
                left: -7px;
            }

            #op_maintenance_nurse #clinics #grid #grid_filter {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: flex-end;
                align-items: center;
                margin: 20px 0px;
                zoom: 0.8;
                gap: 20px;
            }

                #op_maintenance_nurse #clinics #grid #grid_filter select {
                    width: 200px;
                }

                #op_maintenance_nurse #clinics #grid #grid_filter button {
                    width: 130px;
                    height: 40px;
                    text-transform: uppercase;
                    border-radius: 5px;
                    background-color: #53a9de;
                    color: white;
                    font-weight: 900;
                }

    #op_maintenance_nurse #buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 30px;
    }

        #op_maintenance_nurse #buttons button {
            margin: 0px 20px !important;
            width: 200px;
            border-radius: 10px;
            height: 60px;
            font-weight: bold;
            font-size: 16pt;
        }

/* #endregion */

/* #region OP. MAINTENANCE RECORDS */

#op_maintenance_records {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 50px;
}

    #op_maintenance_records form {
        width: 95%;
    }

    #op_maintenance_records label {
        text-transform: uppercase;
    }

    #op_maintenance_records input, #op_maintenance_records select {
        border-radius: 5px;
        padding: 5px;
        height: 40px !important;
        width: 150px;
    }

    #op_maintenance_records #user_credentials {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        border-bottom: 8px dotted #53a9de;
        padding: 0px 50px 30px 50px;
    }

        #op_maintenance_records #user_credentials input {
            width: 200px;
        }

        #op_maintenance_records #user_credentials h1 {
            text-align: right;
            font-size: 36px;
        }

        #op_maintenance_records #user_credentials span {
            font-size: 70pt;
        }

        #op_maintenance_records #user_credentials i {
            font-size: 50pt;
            position: relative;
            top: -15px;
            right: 30px;
        }

        #op_maintenance_records #user_credentials > div:first-child {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: flex-start;
            margin-right: 30px;
            width: 500px;
            border-right: 3px solid #53a9de;
            zoom: 1.2;
        }

            #op_maintenance_records #user_credentials > div:first-child > div:first-child {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: flex-end;
                margin-bottom: 20px;
            }

            #op_maintenance_records #user_credentials > div:first-child > div:nth-child(2) input {
                width: 345px;
                margin: 0px 0px 0px 5px;
            }

            #op_maintenance_records #user_credentials > div:first-child input {
                margin-left: 10px;
            }

            #op_maintenance_records #user_credentials > div:first-child button {
                border-radius: 5px;
                margin: 0px 40px 0px 20px;
                height: 40px;
                padding: 0px 20px;
            }

            #op_maintenance_records #user_credentials > div:first-child > div:nth-child(2) {
                margin-bottom: 20px;
            }

        #op_maintenance_records #user_credentials > div:nth-child(2) {
            width: 175px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            flex-wrap: nowrap;
        }

            #op_maintenance_records #user_credentials > div:nth-child(2) input[type=checkbox] {
                scale: 2;
                width: auto;
                height: 20px !important;
                margin: 15px;
            }

        #op_maintenance_records #user_credentials > div:nth-child(3) {
            flex: 1;
            position: relative;
            top: -10px;
        }

    #op_maintenance_records_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 100px;
        width: 90%;
        margin: auto;
    }

        #op_maintenance_records_container #filePermissions {
            width: 300px;
            text-transform: uppercase;
            zoom: 1.3;
        }

            #op_maintenance_records_container #filePermissions h2{
                margin-bottom: 20px;
            }

            #op_maintenance_records_container #hospitalGrid {
                margin-top: 20px;
                width: 600px;
                height: 500px;
            }

    #saveRecordsBtn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 30px;
    }

        #saveRecordsBtn button {
            margin: 0px 20px !important;
            width: 300px;
            border-radius: 10px;
            height: 60px;
            font-weight: bold;
            font-size: 16pt;
            text-transform: uppercase;
        }

/* #endregion */

/* #region PARAMETERS MAINTENANCE */

.parameters-maintenance {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    width: 80%;
    gap: 30px;
}

    .parameters-maintenance h1 {
        text-transform: uppercase;
        font-size: 40pt;
        padding-bottom: 20px;
        border-bottom: 8px dotted #53a9de;
        width: 80%;
        text-align: center;
        margin-bottom: 20px;
    }

    .parameters-maintenance > div:nth-child(2)  {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

        .parameters-maintenance > div:nth-child(2) button {
            width: 150px;
            height: 50px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: bold;
            background: #53a9de;
            color: white;
        }
            .parameters-maintenance > div:nth-child(2) button:hover {
                background: #266b95;
            }

    .parameters-maintenance > form:nth-child(3) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        flex-wrap: nowrap;
        margin-top: 20px;
        text-transform: uppercase;
        font-size: 14pt;
        gap:20px;
    }

/* #endregion */

/* #region DOCUMENT TEMPLATES LOCATIONS */

.document-templates-locations {
    display: flex;
    width: 90%;
    margin: 50px auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .document-templates-locations h1 {
        text-transform: uppercase;
        font-size: 40pt;
        padding-bottom: 20px;
        border-bottom: 8px dotted #53a9de;
        width: 80%;
        text-align: center;
        margin-bottom: 20px;
    }

    .document-templates-locations > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

        .document-templates-locations > div:nth-child(2) button {
            width: 150px;
            height: 50px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: bold;
            background: #53a9de;
            color: white;
        }

            .document-templates-locations > div:nth-child(2) button:hover {
                background: #266b95;
            }

    .document-templates-locations > form:nth-child(3) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        margin-top: 30px;
        text-transform: uppercase;
        font-size: 14pt;
        gap: 40px;
        width: 100%;
    }

        .document-templates-locations > form:nth-child(3) div {
            display: flex;
            margin-bottom: 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            margin-bottom: 20px;
        }

            .document-templates-locations > form:nth-child(3) div input {
                width: 350px;
                padding: 5px 10px;
                border-radius: 5px;
            }

/* #endregion */

/* #region DOCTOR MAINTENANCE */

.doctor-maintenance {
    display: flex;
    width: 90%;
    margin: 50px auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .doctor-maintenance h1 {
        text-transform: uppercase;
        font-size: 40pt;
        padding-bottom: 20px;
        border-bottom: 8px dotted #53a9de;
        width: 80%;
        text-align: center;
        margin-bottom: 20px;
    }

    .doctor-maintenance > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

        .doctor-maintenance > div:nth-child(2) button {
            width: 150px;
            height: 50px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: bold;
            background: #53a9de;
            color: white;
        }

            .doctor-maintenance > div:nth-child(2) button:hover {
                background: #266b95;
            }

    .doctor-maintenance > form:nth-child(3) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        margin-top: 50px;
        text-transform: uppercase;
        font-size: 14pt;
        gap: 40px;
        width: 100%;
    }

        .doctor-maintenance > form:nth-child(3) div {
            display: flex;
            margin-bottom: 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            margin-bottom: 20px;
        }

            .doctor-maintenance > form:nth-child(3) div .admit {
                display: flex;
                flex-direction: row;
                align-items: baseline;
                flex-wrap: nowrap;
                width: 350px;
                justify-content: flex-start;
                margin-bottom: 0;
            }

            .doctor-maintenance > form:nth-child(3) div .admit input {
                width: 30px;
            }

            .doctor-maintenance > form:nth-child(3) div input,
            .doctor-maintenance > form:nth-child(3) div select {
                width: 350px;
                padding: 5px 10px;
                border-radius: 5px;
            }

/* #endregion */

/* #region CLINIC/DEPARTMENT REGISTER */

.clinicdepartment-maintenance {
    display: flex;
    width: 90%;
    margin: 50px auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .clinicdepartment-maintenance h1 {
        text-transform: uppercase;
        font-size: 40pt;
        padding-bottom: 20px;
        border-bottom: 8px dotted #53a9de;
        width: 80%;
        text-align: center;
        margin-bottom: 20px;
    }

    .clinicdepartment-maintenance > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

        .clinicdepartment-maintenance > div:nth-child(2) button {
            width: 150px;
            height: 50px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: bold;
            background: #53a9de;
            color: white;
        }

            .clinicdepartment-maintenance > div:nth-child(2) button:hover {
                background: #266b95;
            }

    .clinicdepartment-maintenance > form:nth-child(3) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        margin-top: 50px;
        text-transform: uppercase;
        font-size: 14pt;
        gap: 100px;
        width: 100%;
    }

        .clinicdepartment-maintenance > form:nth-child(3) div {
            display: flex;
            margin-bottom: 20px;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            margin-bottom: 20px;
        }

            .clinicdepartment-maintenance > form:nth-child(3) div .admit {
                display: flex;
                flex-direction: row;
                align-items: baseline;
                flex-wrap: nowrap;
                width: 350px;
                justify-content: flex-start;
                margin: 12px 0px;

            }

                .clinicdepartment-maintenance > form:nth-child(3) div .admit input {
                    width: 30px;
                }

            .clinicdepartment-maintenance > form:nth-child(3) div input,
            .clinicdepartment-maintenance > form:nth-child(3) div select,
            .clinicdepartment-maintenance > form:nth-child(3) div textarea {
                width: 350px;
                max-width: 350px;
                max-height: 400px;
                padding: 5px 10px;
                border-radius: 5px;
            }

            .clinicdepartment-maintenance > form:nth-child(3) div textarea {
                height:120px;
            }

/* #endregion */

/* #region PATIENT_DATA */
#PatientData_1_mainscreen {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

    #PatientData_1_mainscreen label {
        text-transform: uppercase;
        margin-right: 10px;
    }

    #PatientData_1_mainscreen input[type="checkbox"] {
        display: inline;
        margin-bottom: 30px;
    }

#PatientData_1_filter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 1000px;
    margin: 0px 0px 30px 0px;
}

    #PatientData_1_filter label {
        text-transform: uppercase;
        font-size: 14pt;
        margin: 0px 10px 0px 10px;
        width: 150px;
    }

    #PatientData_1_filter input {
        text-transform: uppercase;
        font-size: 14pt;
        margin: 0px 50px 0px 0px;
        width: 300px;
        height: 40px;
    }

    #PatientData_1_filter button {
        width: 125px;
        font-weight: 900;
        text-align: center;
        background-color: #53a9de;
        color: white;
        transition: all 0.3s ease;
        padding: 10px;
        border-radius: 10px;
        margin: 0px 10px 0px 0px;
        text-transform: uppercase;
    }

#PatientData_1_fields {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    width: 95%;
    align-items: center;
    border-top: 8px dotted #53a9deb8;
    padding: 40px 0px 40px 0px;
    margin: 0px 0px 30px 0px;
    border-bottom: 8px dotted #53a9deb8;
}

    #PatientData_1_fields #check_patient_deceased {
        color: red;
        font-size: 16pt;
        margin: 30px 0px 0px 0px;
        text-align: center;
    }

    #PatientData_1_fields .icon {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        font-size: 50pt;
        color: #132834;
        margin-bottom: 20px;
    }

#PatientData_1_fields_main {
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 50px;
}

.PatientData_1_fields_column {
    margin: 0px 0px 0px 30px;
    padding: 0px 30px 0px 0px;
    border-right: 3px solid #132834;
}


#PatientData_1_fields_main #lastColumn {
    border-right: 0px !important;
}

#PatientData_1_otherFields {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
}

    #PatientData_1_otherFields .collapsible {
        background-color: #2b5874;
        color: white;
        cursor: pointer;
        padding: 15px;
        width: 95%;
        border: 1px solid #132834;
        text-align: left;
        outline: none;
        font-size: 13pt;
        font-weight: 900;
        margin: 0px 10px 0px 10px;
        border-radius: 10px;
    }

    #PatientData_1_otherFields .collapsible_title {
        margin: 0px 0px 0px 20px;
        vertical-align: -webkit-baseline-middle;
    }


    #PatientData_1_otherFields .collapsible:after {
        content: '\002B'; /* "plus" sign (+) */
        font-size: 18pt;
        color: white;
        float: left;
        margin-left: 5px;
    }

    #PatientData_1_otherFields .active {
        background-color: #132834;
    }

        #PatientData_1_otherFields .active:after {
            content: "\2212"; /* "minus" sign (-) */
        }

    #PatientData_1_otherFields .collapsible:hover {
        background-color: #132834;
    }

#PatientData_1_otherFields_row1, #PatientData_1_otherFields_row2, #PatientData_1_otherFields_row3 {
    width: 100%;
    margin: 10px;
}

    #PatientData_1_otherFields_row1 div {
        display: flex;
        flex-direction: column;
        align-content: center;
        width: 33%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #PatientData_1_otherFields_row1 label {
        width: 80% !important;
    }

    #PatientData_1_otherFields_row1 input, #PatientData_1_otherFields_row1 select, #PatientData_1_otherFields_row1 textarea {
        width: 80% !important;
    }

        #PatientData_1_otherFields_row1 input[type="checkbox"] {
            width: 20px !important;
        }

    #PatientData_1_otherFields_row2 div {
        display: flex;
        flex-direction: column;
        align-content: center;
        width: 33%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #PatientData_1_otherFields_row2 label {
        width: 80% !important;
    }

    #PatientData_1_otherFields_row2 input, #PatientData_1_otherFields_row2 select, #PatientData_1_otherFields_row2 textarea {
        width: 80% !important;
    }

    #PatientData_1_otherFields_row3 div {
        display: flex;
        flex-direction: column;
        align-content: center;
        width: 33%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #PatientData_1_otherFields_row3 label {
        width: 80% !important;
    }

    #PatientData_1_otherFields_row3 input, #PatientData_1_otherFields_row3 select, #PatientData_1_otherFields_row3 textarea {
        width: 80% !important;
    }

#PatientData_1_otherFields .content {
    padding: 0 20px;
    display: none;
    overflow: hidden;
    background-color: #efefef;
    transition: max-height 0.5s ease-out;
    max-height: 0;
    margin-top: 20px;
}

#PatientData_1_otherFields .collapsible.active + .content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    width: 100%;
}

#EpisodeGrid {
    height: 500px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

    #EpisodeGrid .ag-center-cols-container {
        width:100% !important;
    }

#attachModal {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

    #attachModal .modal-dialog {
        width: 1500px;
    }

    #attachModal .modal-body {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    #attachModal #attachmentsEpisode {
        width: auto;
        font-weight: 900;
        text-align: center;
        background-color: #53a9de;
        color: white;
        transition: all 0.3s ease;
        padding: 10px;
        border-radius: 10px;
        margin: 0px 20px 0px 0px;
        text-transform: uppercase;
    }

#AllEpisodeGrid {
    height: 70vh;
    margin: 20px;
    width: 96%;
}

#saveBtn {
    width: 300px;
    font-weight: 900;
    text-align: center;
    background-color: #53a9de;
    color: white;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;
    margin: 30px auto 0px auto;
    text-transform: uppercase;
    height: 50px;
    font-size: 13pt;
}

#fileBtns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin-top: 20px;
}

    #fileBtns button {
        width: auto;
        font-weight: 900;
        text-align: center;
        background-color: #53a9de;
        color: white;
        transition: all 0.3s ease;
        padding: 10px;
        border-radius: 10px;
        margin: 0px 20px 20px 0px;
        text-transform: uppercase;
    }

/* #endregion */

/* #region CQMS */

#simpleClinicView > div:first-child {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

#doctorToolsTop #cqms_container {
    width: 96%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cqms_container_main{
    width: 95% !important;
}

#doctorToolsTop .cqms_container_main_row1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 30px;
}

#doctorToolsTop .panel-title {
    width: 100%;
    background-color: #214459;
    color: white;
    text-align: center;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

    #doctorToolsTop .cqms_container_main_row1 .cqms_container_main_row1_col1 {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }

        #doctorToolsTop #cqms_container_col1 #nextForm {
            display: flex;
            flex-direction: row;
            width: auto;
            gap: 10px;
        }

            #doctorToolsTop #cqms_container_col1 #cqms_nextPatient_btn {
                width: 150px;
                text-align: center;
                background-color: #214358 !important;
                color: white;
                height: 60px;
                font-size: 12pt;
                font-weight: 600;
                border-radius: 10px;
                height: 80px;
            }

                #doctorToolsTop #cqms_container_col1 #cqms_nextPatient_btn:hover {
                    background-color: #10212c !important;
                    color: white;
                }

            #doctorToolsTop #cqms_container_col1 #cqms_skipPatient_btn {
                width: 150px;
                text-align: center;
                background-color: #214358 !important;
                color: white;
                height: 60px;
                font-size: 12pt;
                font-weight: 600;
                border-radius: 10px;
                height: 80px;
            }

                #doctorToolsTop #cqms_container_col1 #cqms_skipPatient_btn:hover {
                    background-color: #10212c !important;
                    color: white;
                }

            #doctorToolsTop #cqms_container_col1 #cqms_endSession_btn {
                width: 150px;
                text-align: center;
                background-color: #214358 !important;
                color: white;
                height: 60px;
                font-size: 12pt;
                font-weight: 600;
                border-radius: 10px;
                height: 80px;
                text-wrap: auto;
            }

                #doctorToolsTop #cqms_container_col1 #cqms_endSession_btn:hover {
                    background-color: #10212c !important;
                    color: white;
                }

            #doctorToolsTop #cqms_container #cqms_nextPatient.content-widget {
                height: auto !important;
                width: 100% !important;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0;
                margin: 30px 0px 0px 0px;
            }

                #doctorToolsTop #cqms_container #cqms_nextPatient.content-widget #cqms_nextPatient_details {
                    margin: 30px 0px;
                }

                    #doctorToolsTop #cqms_container #cqms_nextPatient.content-widget #cqms_nextPatient_details .waiting_details {
                        font-size: 14pt;
                        color: #7f7f7f;
                        margin-bottom: 20px !important;
                        border-bottom: none;
                    }

                #doctorToolsTop #cqms_container #cqms_nextPatient.content-widget #cqms_nextPatient_confirmbtn_container{
                    position: static;
                }

    #doctorToolsTop .cqms_container_main_row1_col2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: nowrap;
        flex: 1;
    }

        #doctorToolsTop .cqms_container_main_row1_col2 #cqms_doctor_tools_title {
            width: 100%;
            margin: 0px 0px 20px 0px;
        }

        #doctorToolsTop .cqms_container_main_row1_col2 .cqms_container_main_row1_col2_buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 100%;
        }

            #doctorToolsTop .cqms_container_main_row1_col2 .cqms_container_main_row1_col2_buttons a {
                width: 100%;
                text-align: center;
                font-weight: 600;
                background-color: #e9ecee !important;
                color: black;
                border: 3px solid #214459;
                border-radius: 10px;
                min-width: 225px;
                padding: 15px 5px;
            }

                #doctorToolsTop .cqms_container_main_row1_col2 .cqms_container_main_row1_col2_buttons a:hover {
                    background-color: #86b8d2 !important;
                    color: white;
                }

        #doctorToolsTop #cqms_timer {
            width: 300px;
        }

        #doctorToolsTop #cqms_timer_title {
            margin: 0;
        }

        #doctorToolsTop #cqms_timer_body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

#doctorToolsTop .cqms_container_main_row2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100% !important;
}

#cqms_confirmPatient.panel {
    background-color: white;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 1;
    margin: auto;
    width: 95%;
}

#doctorToolsTop .cqms_container_main_row2 .additional_info {
    border-bottom: 8px dotted #53a9de;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    margin: 20px;
}

    #doctorToolsTop .cqms_container_main_row2 .panel-body {
        width: 100%;
        margin: auto;
    }

    #doctorToolsTop .cqms_container_main_row2 .tor_notFound {
        margin: 50px auto 40px auto;
        text-align: center;
    }


        #doctorToolsTop .cqms_container_main_row2 .additional_info_fields {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px 30px;
            margin: 30px;
        }

    #doctorToolsTop .cqms_container_main_row2 .tor_header {
        display: flex;
        flex-direction: column;
        margin: 30px 20px;
    }

        #doctorToolsTop .cqms_container_main_row2 .tor_header div:first-child {
            display: flex;
            justify-content: space-between;
            padding-right: 30px;
        }

        #doctorToolsTop .cqms_container_main_row2 .tor_header div:nth-child(2) {
            display: flex;
            flex-direction: row;
            gap: 50px;
            margin-top: 30px;
            margin-left: 20px;
        }

            #doctorToolsTop .cqms_container_main_row2 .tor_header div:nth-child(2) img {
                width: 30px !important;
                top: -3px !important;
            }

    #doctorToolsTop .cqms_container_main_row2 .tor_details {
        display: flex;
        flex-direction: row;
        margin: 30px 20px 30px 40px;
    }

        #doctorToolsTop .cqms_container_main_row2 .tor_details .tor_details_col1 {
            width: 80%;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        #doctorToolsTop .cqms_container_main_row2 .tor_details .tor_details_col2 {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 30px;
            border-left: 3px solid #132834;
            padding-left: 30px;
        }

#cqms_patienthistory_buttons {
    text-align: center;
    vertical-align: top;
    width: 100%;
}

    #cqms_patienthistory_buttons a {
        width: 15%;
        font-size: 13px;
        margin: 30px;
        text-align: center;
        font-weight: 600;
        margin-right: 20px;
        background-color: #e9ecee !important;
        color: black;
        border: 3px solid #214459;
        border-radius: 10px;
    }

        #cqms_patienthistory_buttons a:hover {
            background-color: #86b8d2 !important;
            color: white;
        }

#doctorToolsTop #queueModal{
    width: 100%;
}

    #doctorToolsTop #queueModal .modal-dialog{
        height: 90%;
        display: flex;
        width: 70%;
        justify-content: center;
        align-items: center;
    }

    #doctorToolsTop #queueModal .modal-content {
        width: 80%;
        padding: 50px;
    }

    #doctorToolsTop #queueModal #queuingStatusContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 60px;
    }

        #doctorToolsTop #queueModal #queuingStatusContainer table{
            margin-bottom: 50px;
        }

        #doctorToolsTop #queueModal #queuingStatusContainer table th,
        #doctorToolsTop #queueModal #queuingStatusContainer table tr {
            padding: 20px 30px;
        }

/* --- Improved Queuing Status Card --- */

/* Main container card style */
#queuingStatusContainer {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    width: 30%;
    max-width: 400px;
    max-height: 290px;
    min-height: 290px;
}

    /* 1. LARGER, CLEARER TITLE */
    #queuingStatusContainer h1 {
        background-color: #3e5f76; /* A dark teal consistent with other headers */
        color: #ffffff;
        font-size: 1.15em; /* Increased font size for better visibility */
        font-weight: 700;
        text-transform: uppercase;
        padding: 16px 20px; /* More padding to give it space */
        margin: 0;
        text-align: left;
        flex-shrink: 0; /* Prevents the header from shrinking */
    }

    /* 2. SCROLLABLE LIST CONTAINER */
    #queuingStatusContainer .queue-list-container {
        flex-grow: 1; /* Allows this area to fill the available space */
        overflow-y: auto; /* Adds a vertical scrollbar ONLY when needed */
        min-height: 0; /* Important for flexbox scrolling */
    }

    /* 3. STICKY TABLE HEADER (for better UX during scroll) */
    #queuingStatusContainer .table thead th {
        position: sticky;
        top: 0; /* Sticks the header to the top of the scrollable container */
        background-color: #ffffff; /* Hides content scrolling underneath */
        z-index: 0;
        text-align: left;
        padding: 12px 20px;
        border-bottom: 2px solid #e8e8e8;
        color: #333;
        font-weight: 600;
    }

    /* Standard table styles */
    #queuingStatusContainer .table-container {
        overflow-y: scroll;
        flex: 1;
    }

    /* Standard table styles */
    #queuingStatusContainer .table {
        width: 100%;
        border-collapse: collapse;
    }

        #queuingStatusContainer .table td {
            text-align: left;
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        #queuingStatusContainer .table tbody tr:last-child td {
            border-bottom: none;
        }

    /* Footer style */
    #queuingStatusContainer .queue-footer {
        color: #3e5f76;
        font-weight: 600;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #queuingStatusContainer .view-img-btn {
        color: #3e5f76;
        font-weight: 600;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #queuingStatusContainer .view-img-btn i {
            margin-right: 8px;
        }

#queuingStatusModalContainer {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

#cqms_queue_div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 95%;
    /* border: 8px dotted #53a9de; */
    padding: 20px;
    margin: 30px 0px;
}

    #cqms_queue_div h1 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        gap: 10px;
        margin: 10px 0px 30px 0px;
        font-size: 20pt;
    }

        #cqms_queue_div h1 span {
            font-size: 25pt;
            font-weight: 900;
        }

    #cqms_queue_div table {
        text-transform: uppercase;
        width: 70vw;
        padding: 30px;
        border-radius: 10px;
    }

/* Table container styling */
#cqms_queue_list {
    width: 100%;
    border-collapse: collapse;
    background-color: #f9f9f9;
}

    /* Table header styling */
    #cqms_queue_list thead {
        background-color: #132834;
        color: white;
        text-align: left;
        width: 100%;
    }

    #cqms_queue_list th {
        padding: 12px 15px;
        font-size: 16px;
        width: 15%;
    }

    /* Table body styling */
    #cqms_queue_list tbody {
        font-size: 14px;
        color: #333;
        width: 100%;
    }

    #cqms_queue_list tr {
        width: 100%;
    }

    #cqms_queue_list td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        width: 15%;
    }

    /* Row hover effect */
    #cqms_queue_list tbody tr:hover {
        background-color: #f1f1f1;
        cursor: pointer;
    }

    /* Zebra striping for rows */
    #cqms_queue_list tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    #cqms_queue_list tbody tr:nth-child(odd) {
        background-color: #fff;
    }

/* Border styling for the table */
#cqms_queue_list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

    /* Styling for table cells with centered content */
    #cqms_queue_list td, #cqms_queue_list th {
        text-align: center;
    }

#docmModal #docmModalLabel {
    text-align: center;
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: 900;
    background-color: #214459;
    padding: 10px 0px 10px 0px;
    border-radius: 20px;
    color: white;
}

#doctorToolsTop > .modal-dialog {
    width: 70vw !important;
}

#docmModal #docmForm #docmForm_main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 30px 0px 30px;
}

    #docmModal #docmForm #docmForm_main div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        margin: 0px 30px 20px 20px;
        width: 100%;
    }

    #docmModal #docmForm #docmForm_main input,
    #docmModal #docmForm #docmForm_main select {
        width: 95%;
        border-radius: 10px;
        padding: 5px;
    }
    #docmModal #docmForm #docmForm_main textarea {
        width: 95%;
        height: 100px;
        border-radius: 10px;
        padding: 5px;
    }

    #docmModal #docmForm #docmForm_main label {
        text-transform: uppercase;
        margin: 30px 0px 5px 0px;
    }

#docmForm_other {
    width: 92%;
    margin: 20px auto 20px auto;
}

    #docmForm_other .collapsible {
        background-color: #214459;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        font-weight: 900;
        border-radius: 10px;
    }

#docmForm_other .active, .collapsible:hover {
    background-color: #122b3a;
}

#docmForm_other .collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

#docmForm_other .active:after {
    content: "\2212";
}

    #docmForm_other .content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #21445933;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 30px;
        border-radius: 10px;
    }

    #docmModal #docmForm #docmForm_other div {
        margin: 0px 0px 30px 0px
    }

    #docmModal #docmForm #docmForm_other input,
    #docmModal #docmForm #docmForm_other select {
        width: 92%;
        border-radius: 10px;
        padding: 5px;
    }

    #docmModal #docmForm #docmForm_other textarea {
        width: 92%;
        height: 100px;
        border-radius: 10px;
        padding: 5px;
    }

    #docmModal #docmForm #docmForm_other label {
        width: 92%;
        text-transform: uppercase;
        margin: 30px 0px 5px 0px;
    }

#docmModal .modal-footer {
    padding: 15px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
}

    #docmModal .modal-footer button {
        display: inline-block;
        padding: 15px;
        font-size: 12pt;
        font-weight: 900;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        border-radius: 10px;
        text-transform: uppercase;
        margin: 10px 30px 10px 0px;
        color: #214459;
        background-color: #f0f0f0;
        border: 3px solid #214459;
    }

/* #endregion */

/* #region TOR */

#tor .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    #tor .input-wrapper input,
    #tor .input-wrapper textarea {
        padding-right: 40px; /* space for mic button */
    }

#tor .mic-btn {
    position: absolute;
    right: 0px;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 24px;
    top: 0px;
    display: none;
}

    #tor .mic-btn.listening {
        color: red; /* change color when recording */
    }

#tor #ID_div {
    border-bottom: 4px solid #214459;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
    text-transform: uppercase;
    margin: 10px 0px 30px 0px;
    padding: 0px 0px 20px 0px;
}
    #tor #ID_div input {
        margin:20px;
        width:300px
    }
    #tor #ID_div button {
        border-radius: 20px;
        font-size:10pt;
        font-weight:bold;
    }

#tor #TOR_divider {
    display: none;
    border-bottom: 8px dotted #53a9de;
    width: 90%;
    margin: 50px auto 50px auto;
}

#tor #TOR_referred {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    width: 400px;
    margin: 0px auto 50px auto;
}
    #tor #TOR_referred div {
        width: 200px;
    }

#tor #TOR_columns {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
}

    #tor #TOR_columns #sameRow {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

#tor #TOR_columns #torLeft, #torCenter, #torRight {
    margin: 0px 30px 0px 30px;
    width: 400px;
}
#tor #TOR_columns #torLeft input, #torCenter input, #torRight input {
    width:100%;
}

#tor #TOR_columns #torLeft select, #torCenter select, #torRight select {
    width: 100%;
}

    #tor #TOR_columns #torLeft textarea, #torCenter textarea, #torRight textarea {
        width: 100%;
        height: 75px;
        max-width: 100%;
        min-width: 100%;
        max-height: 200px;
        min-height: 75px;
    }

#tor #TOR_columns_fill {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
}

    #tor #TOR_columns_fill #torLeft, #torCenter, #torRight {
        margin: 0px 30px 0px 30px;
        width: 400px;
    }

        #tor #TOR_columns_fill #torLeft input, #torCenter input, #torRight input {
            width: 100%;
        }

        #tor #TOR_columns_fill #torLeft select, #torCenter select, #torRight select {
            width: 100%;
        }

        #tor #TOR_columns_fill #torLeft textarea, #torCenter textarea, #torRight textarea {
            width: 100%;
            height: 75px;
            max-width: 100%;
            min-width: 100%;
            max-height: 200px;
            min-height: 75px;
        }

#tor #auth_sms {
    width: auto !important;
    margin: 20px 0px 45px 0px;
}

#tor #tor_checkboxes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
}

    #tor #tor_checkboxes .torcheckboxes {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        margin: 10px;
        font-size: 10pt;
    }

#tor #urgentSection {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding:10px;
    text-transform: uppercase;
}
#tor #urgentSection input {
    width: auto !important;
    margin-left:10px;
}

#tor #tor_extra {
    display: none;
    flex-direction: row;
    /*align-content: center;*/
    justify-content: center;
    border-top: 8px dotted #53a9de;
    border-bottom: 8px dotted #53a9de;
    width: 85%;
    margin: 30px auto 30px auto;
    padding: 30px 0px 30px 0px;
    flex-wrap: wrap;
    align-items: center;
}

    #tor #tor_extra #tor_extra_col1 #canvas {
        zoom: 1.25 !important
    }

    #mesh-name {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-family: Arial, sans-serif;
        font-size: 24px;
        border-radius: 4px;
        display: none; /* Initially hidden */
        z-index: 1000; /* Ensure it's above the canvas */
}

    #tor #tor_extra #tor_extra_col2 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }

        #tor #tor_extra #tor_extra_col2 #neckContainer {
            display: none;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 30px 0px 30px 100px;
        }
            #tor #tor_extra #tor_extra_col2 #neckContainer div{
                margin:10px;
            }

        #tor #tor_extra #tor_extra_col2 #upperLimbContainer {
            display: none;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 30px 100px 30px 100px;
        }

            #tor #tor_extra #tor_extra_col2 #upperLimbContainer div {
                margin: 10px;
            }

        #tor #tor_extra #tor_extra_col2 #backContainer {
            display: none;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 30px 100px 30px 100px;
        }

            #tor #tor_extra #tor_extra_col2 #backContainer div {
                margin: 10px;
            }

        #tor #tor_extra #tor_extra_col2 #lowerLimbContainer {
            display: none;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 30px 100px 30px 100px;
        }

            #tor #tor_extra #tor_extra_col2 #lowerLimbContainer div {
                margin: 10px;
            }

        #tor #tor_extra #tor_extra_col2 #otherOrthoContainer {
            display: none;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 30px 100px 30px 100px;
        }

            #tor #tor_extra #tor_extra_col2 #otherOrthoContainer div {
                margin: 10px;
            }

        #tor #tor_extra #tor_extra_col2 .extra_container {
            opacity: 0;
            transform: translateX(100%); /* Initially move the container to the right (hidden) */
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition both properties */
            display: none; /* Initially hide all containers */
        }

            #tor #tor_extra #tor_extra_col2 .extra_container.show {
                display: flex; /* Or whatever display value you need */
                transform: translateX(0); /* Move to original position */
                opacity: 1;
            }

#tor #torSubmit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin:50px 0px 50px 0px;
}

    #tor #torSubmit button {
        border-radius: 20px;
        margin: 30px 10px 10px 10px;
        font-size: 12pt;
        font-weight: bold;
        padding: 10px;
        width: 250px;
        height: 85px;
        border: 3px solid #1328346b;
    }




/* #endregion */

/* #region CTRACK */

/*--------------------------*/
/* CTRACK CONTAINER FIXED */
/*--------------------------*/

.ctrack_patientList {
    gap: 30px;
}

    .ctrack_patientList .card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 10px 40px !important;
    }

    .ctrack_patientList .card-header {
        width: 50%;
        border-bottom: none !important;
        padding: 15px 5px !important;
        display: flex !important;
        flex-direction: row;
        justify-content: flex-start !important;
        gap: 20px;
    }

        .ctrack_patientList .card-header i:first-child {
            font-size: 35pt;
            margin: 0;
            color: white;
        }

    .ctrack_patientList .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
        padding: 0 !important;
    }

        .ctrack_patientList .card-body span:first-child {
            font-size: 16pt;
        }

    .ctrack_patientList h3 {
        line-height: 1.5
    }

    .ctrack_patientList i {
        font-size: 20pt;
        margin-left: 10px;
        color: red;
    }

    .ctrack_patientList .patientId {
        font-size: 22pt;
        font-weight: 400;
    }

    .ctrack_patientList .patient-count {
        color: #555;
        font-size: 1.2rem;
        font-weight: normal;
    }

.ctrack_container_fixed {
    top: unset !important;
    width: 95% !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
    margin: 30px 40px !important;
}

    .ctrack_container_fixed > div:first-child,
    .ctrack_container_fixed > div:nth-child(2),
    .ctrack_container_fixed > div:nth-child(3) {
        width: 100% !important;
        padding: 0px !important;
    }

    .ctrack_container_fixed > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .ctrack_container_fixed > div:nth-child(2) #cqms_doctor_tools {
        width: 100% !important
    }

    .ctrack_container_fixed .additional_information div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: auto;
        gap:10px;
    }

    .ctrack_container_fixed .additional_information {
        width: auto;
        border-collapse: collapse;
        padding: 10px 0px 30px 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 80px;
        row-gap: 40px;
        justify-content: flex-start;
        border-bottom: 8px dotted #53a9de;
        margin: 20px 30px;
    }

        .ctrack_container_fixed h1 {
            font-size: 20pt;
            font-weight: 500;
            color: #214358;
            text-align: left;
            padding: 30px 0px 0px 30px;
            padding-left: 30px;
        }

        .ctrack_container_fixed .additional_information span.label {
            font-size: 9pt;
            font-weight: 400;
            color: #94B0C0;
            text-align: left;
            padding: 0px;
        }

        .ctrack_container_fixed .additional_information span.value {
            font-size: 12pt;
            color: #214358;
            text-align: left;
        }

        .ctrack_container_fixed .additional_information span.uppercase {
            text-transform: uppercase;
        }

        .ctrack_container_fixed .additional_information .warning-icon {
            color: #ff2929;
            margin-left: 10px;
        }

    .ctrack_container_fixed .triage_header {
        width: 100%;
        margin: 30px 0px 0px 0px;
        border-collapse: collapse;
        padding-left: 30px;
        table-layout: fixed;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

        .ctrack_container_fixed .triage_header .title {
            padding: 0px;
        }

        .ctrack_container_fixed .triage_header .episode_container {
            border-bottom: 10px solid white;
        }

        .ctrack_container_fixed .triage_header .label {
            font-family: 'Open Sans', sans-serif;
            font-size: 9pt;
            font-weight: 400;
            color: #94B0C0;
            text-align: right;
            padding-left: 20px;
            display: inline-block;
        }

        .ctrack_container_fixed .triage_header .value {
            font-family: 'Open Sans', sans-serif;
            font-size: 12pt;
            color: #214358;
            text-align: right;
            padding-left: 20px;
            padding-right: 90px;
            display: inline-block;
        }

    .ctrack_container_fixed .triage_content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px 30px;
        gap: 30px;
    }

        .ctrack_container_fixed .triage_content .triage_content_col1 {
            width: 75%;
            border-right: 3px solid #132834;
            padding-right: 30px;
        }

        .ctrack_container_fixed .triage_content .triage_content_col1 > div:first-child {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: 50px;
            margin-bottom: 30px;
        }

        .ctrack_container_fixed .triage_content .triage_content_col1 > div:nth-child(2) {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            justify-content: flex-start;
            gap: 20px;
            margin-bottom: 30px;
        }

            .ctrack_container_fixed .triage_content .triage_content_col1 > div:nth-child(3) > div {
                display: flex;
                flex-direction: row;
                align-items: baseline;
                justify-content: flex-start;
                gap: 20px;
                margin-bottom: 30px;
            }

    .ctrack_container_fixed #treatmentGivenDetails {
        margin-bottom: 50px;
    }

    .ctrack_container_fixed #treatmentGivenDetails h1{
        padding: 0px !important
    }

    .ctrack_container_fixed .scan_score {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }

        .ctrack_container_fixed .scan_score .score_item {
            color: #94B0C0;
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            flex-wrap: nowrap;
        }

            .ctrack_container_fixed .scan_score .score_item b {
                font-weight: bold;
            }

    .ctrack_container_fixed .scan_fields {
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0px 20px;
    }


        .ctrack_container_fixed .scan_fields .field_label {
            font-size: 11pt;
            font-weight: 400;
            color: #94B0C0;
        }

            .ctrack_container_fixed .scan_fields .field_label b {
                font-weight: bold;
            }

        .ctrack_container_fixed .scan_fields .field_input {
            font-size: 11pt;
            color: #214358;
            text-align: left;
            width: 20vw;
        }

    .ctrack_container_fixed .triage_content_col2 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 25%;
    }

        .ctrack_container_fixed .triage_content_col2 .triage_field {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
        }

        .ctrack_container_fixed .triage_content_col2 .triage_label {
            font-size: 11pt;
            font-weight: 400;
            color: #94B0C0;
        }

            .ctrack_container_fixed .triage_content_col2 .triage_label b {
                font-weight: bold;
            }

        .ctrack_container_fixed .triage_content_col2 .triage_value, .ctrack_container_fixed .triage_content_col2 .triage_input {
            font-size: 11pt;
            color: #214358;
        }

            .ctrack_container_fixed .triage_content_col2 .triage_input input {
                margin-bottom: 0px !important;
            }

    .ctrack_container_fixed .btns {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        margin: 20px;
        text-transform: uppercase;
        font-size: 12pt;
    }

        .ctrack_container_fixed .btns .btn-group {
            margin: 10px;
        }

            .ctrack_container_fixed .btns .btn-group label,
            .ctrack_container_fixed .btns .btn-group input {
                display: none !important;
            }

            #ecgreq, #ecgreqlabel {
                display: inline-block !important;
            }

    .ctrack_container_fixed #ctrack_doctor_div {
        display: none;
        margin: 20px;
        gap: 20px;
        flex-direction: row;
    }

    .ctrack_container_fixed #edready {
        display: block;
    }

    .ctrack_container_fixed .blue-button {
        font-size: 16pt;
        font-weight: 600;
        width: 250px;
        border-radius: 10px;
        margin: 5px 20px;
    }

    #select_triage_dropdown {
        width: 100% !important;
    }

/*--------------------------*/
/* ALLOCATIONS */
/*--------------------------*/

.ctrack_allocation {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin: 30px;
}

    .ctrack_allocation > h1 {
        text-transform: uppercase;
        font-weight: 500;
        color: #132834;
        border-bottom: 3px solid black;
        padding: 5px;
    }

    .ctrack_allocation #ctrack_patient_noarea {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .ctrack_allocation #ctrack_patient_noarea #PatientNoAreaGrid {
            height: 70vh;
            width: 95vw;
            margin: 30px;
        }

    .ctrack_allocation #alloc_buttons {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .ctrack_allocation #submitAreasBtn {
        margin: 0px auto 40px auto;
        font-weight: 500;
        border-radius: 10px;
        font-size: 16pt;
        width: 20vw;
        border: 2px solid #316686;
    }

    .ctrack_allocation #alloc_buttons > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        width: 40vw;
    }

        .ctrack_allocation #alloc_buttons > div a {
            margin: 0px;
            border-radius: 10px;
            border: 2px solid #316686;
        }

/*--------------------------*/
/* PATIENT MONITOR */
/*--------------------------*/

#ctrack_patientmonitor {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    #ctrack_patientmonitor input{
        margin: 20px;
        border-radius: 10px;
        padding: 10px;
        width: auto;
    }

    #ctrack_patientmonitor #PatientMonitorGrid {
        width: 100%;
        height: 900px;
        padding: 0px 50px;
    }

/*--------------------------*/
/* HANDOVER MODAL */
/*--------------------------*/

#handoverModal {
    padding:0px !important;
}

    #handoverModal > div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        /* width: 50vw; */
        margin: 100px auto;
    }

        #handoverModal > div > div {
            width: 25vw;
        }

            #handoverModal > div > div > .modal-header {
                display: flex;
                flex-direction: row;
                align-content: center;
                justify-content: space-evenly;
                align-items: center;
                flex-wrap: nowrap;
            }

                #handoverModal > div > div > .modal-header h5 {
                    font-size: 15pt;
                    text-transform: uppercase;
                    text-align: center;
                    font-weight: 600;
                    color: #29546f;
                }

                #handoverModal > div > div > .modal-header button {
                    font-size: 30pt;
                    opacity: 0.5;
                    margin: 0px;
                }

            #handoverModal > div > div .modal-body {
                display: flex;
                flex-direction: column;
                align-content: center;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
                padding: 30px;
            }

            #handoverModal > div > div .modal-body input {
                margin: 0px 0px 50px 0px;
                font-size: 13pt;
                width: 90%;
                height: 50px;
            }

            #handoverModal > div > div .modal-body > div {
                width: 80%;
            }

                #handoverModal > div > div .modal-body #doctorList .doctor-card,
                #handoverModal > div > div .modal-body #nurseList .doctor-card {
                    cursor: pointer;
                    border: 2px solid #0000003b;
                    margin-bottom: 30px;
                    width: 100%;
                }

                    #handoverModal > div > div .modal-body #doctorList .doctor-card:hover,
                    #handoverModal > div > div .modal-body #nurseList .doctor-card:hover {
                        background-color: #00000014;
                    }

            #handoverModal > div > div .modal-body > nav {
                display: flex;
                flex-direction: row;
                align-content: center;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                width: 100%;
            }

            #handoverModal > div > div > .modal-footer button {
                font-size:12pt
            }


/*--------------------------*/
/* DOCUMENTATION */
/*--------------------------*/

#attachBtnContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
    #attachBtnContainer button {
        margin: auto;
        background-color: white;
        font-weight: 900;
        width: 200px;
        border-radius: 10px;
        color: #214459;
        border: 5px dotted #214459;
    }

/*--------------------------*/

#ctrack_status_container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 1000px;
    gap: 30px;
    text-transform: uppercase;
    margin: 30px auto;
    padding: 15px;
    border-radius: 10px;
    background-color: #132834;
    color: white;
    border-color: #6d7a81;
    box-shadow: 0px 0px 2px 4px #6d7a814a;
}

    #ctrack_status_container > div:nth-child(3) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

        #ctrack_status_container > div:nth-child(3) button {
            text-transform: uppercase;
            padding: 5px 20px;
            color: black;
            font-weight: bold;
            border-radius: 10px;
        }

#ctrack_patientlist {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    width: 98%;
    margin-top: 30px;
    padding: 0;
}

    #ctrack_patientlist #left, #ctrack_patientlist #right, #ctrack_patientlist #urgent_patients, #ctrack_patientlist #noarea_patients {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        padding: 20px;
        background-color: #132834;
        border-radius: 10px;
        width: auto;
        min-width: 48%;
        overflow-y: auto;
        color: white;
        box-shadow: 0px 0px 2px 4px #6d7a814a;
    }

    #ctrack_patientlist h1 {
        font-size: 18pt;
        text-align: center;
        margin: 0px 0px 20px 0px;
        text-transform: uppercase;
        font-weight: bold;
    }

    #ctrack_patientlist h2 {
        font-size: 15pt;
        text-align: left;
        margin: 0px 0px 0px 0px;
        text-transform: uppercase;
        font-weight: bold;
    }

    #ctrack_patientlist h3 {
        font-size: 14pt;
        color: #ffffff;
        font-weight: bold;
        text-transform: uppercase;
        width: 80%;
    }

    #ctrack_patientlist .area-section {
        padding: 30px 20px;
        background-color: #ffffff61;
        border-radius: 10px;
        user-select: none;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    #ctrack_patientlist .card {
        background-color: #53a9de;
        border-radius: 10px;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
        user-select: none;
        padding: 10px 20px 10px 20px;
        border: 3px solid white;
    }

        #ctrack_patientlist .card:hover {
            cursor: pointer;
        }

    #ctrack_patientlist .card-header {
        padding: 20px 0px;
        border-bottom: 5px dotted rgb(255 255 255);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #ctrack_patientlist .card-body {
        padding: 20px 0px 0px 0px;
    }

    #ctrack_patientlist .handover-button, #ctrack_patientlist .documentation-button, #ctrack_patientlist .ae-ready-button {
        padding: 5px 0px;
        background-color: #ffffff4f;
        color: white;
        border: 1px solid #13283478;
        border-radius: 10px;
        cursor: pointer;
        margin: 0px 5px;
        text-transform: uppercase;
        font-weight: bold;
        width: 70px;
        font-size: 14pt;
    }

        #ctrack_patientlist .handover-button:hover, #ctrack_patientlist .documentation-button:hover, #ctrack_patientlist .ae-ready-button:hover {
            background-color: #37505f;
        }

#handoverModal .doctor-card {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

    #handoverModal .doctor-card img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
        position: relative;
    }

#handoverModal .doctor-info {
    display: flex;
    flex-direction: column;
}

    #handoverModal .doctor-info h4 {
        margin: 0;
        font-size: 16px;
    }

    #handoverModal .doctor-info p {
        margin: 2px 0;
        font-size: 14px;
    }

/*--------------------------*/
/* PEADS*/
/*--------------------------*/

    #triage_scanscore0,
    #triage_scanscore1,
    #triage_scanscore2,
    #triage_scanscore3,
    #triage_scanscore4,
    #triage_vaccinations{
        width: 34px !important;
    }


/* #endregion */

/* #region REPORTS */
.ctrack_reports {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.ctrack_reports_filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin: 0px 10px 30px 10px;
}

    .ctrack_reports_filters div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: baseline;
        margin: 15px;
        width: auto;
    }

        .ctrack_reports_filters div input,
        .ctrack_reports_filters div select {
            height: 40px;
            padding: 5px;
            border-radius: 5px;
        }

.ctrack_reports_searchBtnContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 90%;
    border-bottom: 8px dotted #53a9de;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

    .ctrack_reports_searchBtnContainer button {
        margin: auto;
        width: 200px;
        border-radius: 10px;
        font-size: 14pt;
        font-weight: 600;
    }

.ctrack_reports .reportTableContainer {
    max-width: 95%;
    margin: 10px;
    overflow: auto;
    height: auto;
}

    /* Styling the table */
    .ctrack_reports .reportTable {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        font-size: 14px;
        background-color: #f9f9f9;
        height:100%;
    }

        /* Table headers */
        .ctrack_reports .reportTable th {
            background-color: #132834;
            color: white;
            padding: 30px 30px;
            border-bottom: 2px solid #ddd;
            position: sticky;
            text-transform: uppercase;
            text-wrap: nowrap;
            text-align: center;
        }

        /* Table data */
        .ctrack_reports .reportTable td {
            padding: 10px 30px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

.ctrack_report_graphs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0px 20px;
    width: 90%;
}

    .ctrack_reports h1 {
        font-size: 20pt;
        text-transform: uppercase;
        font-weight: 900;
        margin: 20px;
    }

    .ctrack_report_graphs div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        margin: 30px;
        width: 100%;
    }


/* #endregion */

/* #region BARCODE */

#barcodeContainer {
    display: flex;
    width: 8.5cm;
    min-height: 5.5cm;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    margin: 50px auto 0px auto;
    border: 4px solid #55a7da;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(169, 222, 236, 1) 100%);
    border-radius: 20px;
}

    #barcodeContainer img {
        width: 40%;
        margin: 10px auto;
    }

    #barcodeContainer > div {
        display: flex;
        margin: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        font-size: 8pt;
        text-transform: uppercase;
    }

/* #endregion */

/* #region STREAMLINE */

.streamlining_patientList{
    gap: 30px;
}

    .streamlining_patientList .card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 10px 40px !important;
    }

    .streamlining_patientList .card-header {
        width: 50%;
        border-bottom: none !important;
        padding: 15px 5px !important;
        display: flex !important;
        flex-direction: row;
        justify-content: flex-start !important;
        gap: 20px;
    }

        .streamlining_patientList .card-header i:first-child {
            font-size: 35pt;
            margin: 0;
            color: white;
        }

    .streamlining_patientList .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 10px;
        padding: 0 !important;
    }

        .streamlining_patientList .card-body span:first-child {
            font-size: 16pt;
        }

    .streamlining_patientList h3{
        line-height: 1.5
    }

    .streamlining_patientList i {
        font-size: 20pt;
        margin-left: 10px;
        color: red;
    }

    .streamlining_patientList .patientId{
        font-size: 22pt;
        font-weight: 400;
    }

.streamline .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .streamline .input-wrapper input,
    .streamline .input-wrapper textarea {
        padding-right: 40px; /* space for mic button */
    }

.streamline .mic-btn {
    position: absolute;
    right: 0px;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 24px;
    top: 0px;
}

    .streamline .mic-btn.listening {
        color: red; /* change color when recording */
    }

.streamline .patient_management {
    display: flex;
    flex-direction: row;
    width: 95%;
    justify-content: space-between;
    margin: auto;
    flex-wrap: nowrap;
    gap: 50px;
    margin-bottom: 10px;
}

    .streamline .patient_management #cqms_nextPatient {
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 30px;
        background: white;
        border-radius: 10px;
        box-shadow: 0px 0px 10px 2px #c3c3c3;
        flex: 1;
        justify-content: space-between;
    }

        .streamline .patient_management #cqms_nextPatient #cqms_nextPatient_details {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 30px;
            padding: 30px;
        }

    .streamline .patient_management #confirmButtonDiv {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

        .streamline .patient_management #confirmButtonDiv a {
            display: flex;
            width: 150px;
            align-items: center;
            justify-content: center;
            border-radius: 0px;
            font-weight: 600;
            font-size: 12pt;
        }

    .streamline .patient_management .next_btn {
        display: flex;
        width: 150px;
        justify-content: center;
    }

        .streamline .patient_management .next_btn form{
            width: 100%;
        }

        .streamline .patient_management .next_btn button {
            width: 100%;
            background: #214459;
            color: white;
            font-size: 14pt;
            font-weight: 500;
        }

        .streamline .patient_management .next_btn button:hover {
            transform: scale(1.03);
            transition: all 0.3s ease;
        }

.streamline .cnurse_timer {
    display: flex;
    flex-direction: row;
    width: 95%;
    justify-content: space-between;
    margin: auto;
    flex-wrap: nowrap;
    gap: 50px;
}

    .streamline .cnurse_timer #cqms_doctor_tools {
        width: 80%;
    }

    .streamline #cqms_doctor_tools #cqms_doctor_tools_title{
        margin: 0;
    }

    .streamline #cqms_doctor_tools .cqms_doctor_tools_btns {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 30px;
        row-gap: 20px;
        margin: 30px;
    }

        .streamline #cqms_doctor_tools .cqms_doctor_tools_btns a {
            width: 20vw;
            display: flex;
            flex-direction: row;
            column-gap: 10px;
            align-items: center;
            justify-content: center;
            padding: 15px;
            background: #ffffff;
            border: 3px solid #214459;
            border-radius: 10px;
            color: #214459;
            font-weight: 700;
        }

            .streamline #cqms_doctor_tools .cqms_doctor_tools_btns a:hover {
                transform: scale(1.03);
                transition: all 0.3s ease;
                background: #214459;
                color: white;
            }

    .streamline .cnurse_timer #cqms_timer {
        flex: 1;
    }

        .streamline .cnurse_timer #cqms_timer_counter {
            text-align:center;
        }

.streamline #cqms_confirmPatient {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin: auto;
    flex-wrap: nowrap;
}

    .streamline #cqms_confirmPatient .panel-body {
        padding: 30px;
    }

    .streamline #cqms_confirmPatient .ctrack_additional_info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px 30px;
        margin: 30px;
    }

    .streamline #cqms_confirmPatient .ctrack_header {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-right: 30px;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 8px dotted #53a9de;
        margin-bottom: 50px;
    }

.streamline .ctrack_details {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 70px;
    margin: 30px;
}

    .streamline .ctrack_details select {
        padding: 10px 5px;
        border-radius: 10px;
        border: 1px solid #ccc;
    }

    .streamline .ctrack_details input {
        padding: 10px;
        border-radius: 10px;
        margin: 0;
        width: auto;
        height: auto;
        min-width: 200px;
    }

    .streamline .ctrack_details textarea {
        width: 100%;
        min-height: 100px;
        height: 150px;
        max-height: 300px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 8px;
        resize: vertical;
        box-sizing: border-box;
        outline: none;
    }

    .streamline .ctrack_details button {
        border: none;
    }

    .streamline .ctrack_details .ctrack_details_col1 {
        width: 80%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
    }

        .streamline .ctrack_details .ctrack_details_col1 > div:first-child {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 100%;
            align-items: flex-start;
            gap: 50px;
        }

            #triage_streamcat{
                width: 100%;
            }

            .streamline .ctrack_details .ctrack_details_col1 > div:first-child .other_cat {
                display: flex;
                flex-direction: row;
                gap: 20px;
                margin-top: 20px;
            }

        .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 100%;
            align-items: flex-start;
            gap: 50px;
        }

            .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(2) > div {
                width: 45%;
            }

        .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(3) {
            display: flex;
            justify-content: space-between;
            width: 100%;
            border-bottom: 1px solid #214459;
            padding-bottom: 15px;
            align-items: center;
            margin-top: 30px;
        }

            .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(3) button {
                margin: 0;
                border-radius: 10px;
                padding: 10px 30px;
                font-weight: 600;
            }

            .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(3) #clinicResult {
                font-weight: 700;
                font-size: 16pt;
            }

        .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(4) {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 100%;
            align-items: center;
            gap: 50px;
        }

            .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(4) > div {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

                .streamline .ctrack_details .ctrack_details_col1 > div:nth-child(4) > div select{
                    width: 70px;
                }

            .streamline .ctrack_details .ctrack_details_col1 #treatmentGivenDetails {
                max-width: 100%;
                width: 100%;
                margin-top: 70px;
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .streamline .ctrack_details .ctrack_details_col1 #treatmentGivenDetails > span {
                width: 100%;
                display: flex;
                border-bottom: 1px solid #214459;
                font-size: 16px;
                padding-bottom: 20px;
                font-weight: 700;
            }

    .streamline .ctrack_details .ctrack_details_col1 #clinicAssignmentHistoryDetails {
        max-width: 100%;
        width: 100%;
        margin-top: 70px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

        .streamline .ctrack_details .ctrack_details_col1 #clinicAssignmentHistoryDetails > span {
            width: 100%;
            display: flex;
            border-bottom: 1px solid #214459;
            font-size: 16px;
            padding-bottom: 20px;
            font-weight: 700;
        }

.streamline .ctrack_details .ctrack_details_col1 #eventDetails {
    max-width: 100%;
    width: 100%;
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .streamline .ctrack_details .ctrack_details_col1 #eventDetails > span {
        width: 100%;
        display: flex;
        border-bottom: 1px solid #214459;
        font-size: 16px;
        padding-bottom: 20px;
        font-weight: 700;
    }

.streamline .ctrack_details .ctrack_details_col2 {
    flex: 1;
    border-left: 3px solid #214459;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

        .streamline .ctrack_details .ctrack_details_col2 input,
        .streamline .ctrack_details .ctrack_details_col2 select {
            width: 200px;
        }

.streamline .ctrack_btns {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

    .streamline .ctrack_btns label {
        font-size: 14pt;
    }

    .streamline .ctrack_btns input {
        zoom: 2;
        margin-left: 10px;
        position: relative;
        top: 3px;
    }

    .streamline .ctrack_btns button {
        width: 300px;
        height: 60px;
        margin: 0px 20px;
        border: none;
        background: #53a9de;
        color: white;
        font-size: 16pt;
        border-radius: 10px;
    }

        .streamline .ctrack_btns button:hover {
            transform: scale(1.03);
            transition: all 0.3s ease;
            background: #29709b;
        }


/* #endregion */

/*------------------------------*/
/* 5. MEDIA
/*------------------------------*/

@media (max-width: 999px) {
    body {
                    height: auto;
                    font-size: 20px;
                    zoom: 50%;
                }
            }

            @media (max-width: 20000px) {
                body {
                    font-size: 13px;
                    zoom: 0.8 !important;
                }

                .col1-form,
                .col2-form {
                    width: calc(50% - 10px);
                }

                .form-field {
                    width: 100%;
                }
            }
            /*Group 1: Large Screens (992px to 1199px) */
            @media screen (min-width: 992px) {
                /*Styles for screens with a width between 992px and 1199px*/

                .content {
                    /*height: 120vh;*/
                }

                .site-header {
                    margin: 25px;
                }

                .sidebar {
                    width: 250vh;
                }

                .search-form {
                    margin: 20px;
                }

                nav li {
                    font-size: 1em;
                }

                .left-nav a {
                    padding: 15px;
                }

                .top-nav a {
                    padding: 0 30px;
                }

                .mobile-menu-icon {
                    cursor: pointer;
                    display: block;
                    /*position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;*/
                }

                    .mobile-menu-icon:hover .fa {
                        background-color: rgba(84 168 221);
                    }

                    .mobile-menu-icon .fa {
                        color: #fff;
                        background-color: rgba(84 168 221);
                        font-size: 1.5em;
                        width: 40px;
                        height: 40px;
                        padding: 9px;
                        /*padding-left: 11px;*/
                    }
            }

            @media screen and (max-width: 1199px) {
                /* Styles for screens with a maximum width of 1199px */

                .content {
                    /*height: 200vh;*/
                }


                .flex-row.flex-content-row {
                    display: block;
                }

                .mobile-menu-icon {
                    cursor: pointer;
                    display: block;
                    /*position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;*/
                }

                    .mobile-menu-icon:hover .fa {
                        background-color: rgba(84 168 221);
                    }

                    .mobile-menu-icon .fa {
                        color: #fff;
                        background-color: rgba(84 168 221);
                        font-size: 1.5em;
                        /*width: 40px;
                height: 40px;*/
                        padding: 9px;
                        /*padding-left: 11px;*/
                    }
            }
            /*Group 2: Medium Screens (768px to 991px)*/

            @media screen and (max-width: 992px) and (min-width: 768px) {
                /* Styles for screens with a width between 768px and 992px */

                .content {
                    /*height: 190vh;*/
                }

                .site-header, .search-form {
                    margin: 15px;
                }


                .sidebar {
                    /*height: 125vh;*/
                    /*flex-grow: 1;
        text-align: center;
         width: 100%; */
                }


                .site-header h1 {
                    font-size: 1.6em;
                }

                .square {
                    width: 20px;
                    height: 20px;
                }

                .left-nav a.active,
                .left-nav a:hover {
                    border-left: 6px solid #13895F;
                }

                .top-nav-container {
                    padding: 17px 30px;
                }

                .top-nav a {
                    padding: 0 15px;
                }

                nav li {
                    font-size: 1em;
                }

                .left-nav a {
                    padding: 15px 10px;
                }

                .content-container {
                    padding: 10px;
                }


                .top-nav a {
                    color: #000000;
                    display: block;
                    padding: 0 50px;
                    border-right: none;
                }

                .top-nav li:last-child a {
                    border-right: none;
                }

                .mobile-menu-icon {
                    cursor: pointer;
                    display: block;
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    z-index: 1000;
                }

                    .mobile-menu-icon:hover .fa {
                        background-color: rgba(84 168 221);
                    }

                    .mobile-menu-icon .fa {
                        color: #fff;
                        background-color: rgba(84 168 221);
                        font-size: 1.5em;
                        width: 40px;
                        height: 40px;
                        padding: 9px;
                        /*padding-left: 11px;*/
                    }

                footer {
                    height: 30px;
                }
            }

            @media only screen and (min-width: 768px) {
                /* Styles for screens with a minimum width of 768px */

                .top-nav a {
                    color: #000000;
                    display: block;
                    padding: 0 50px;
                }

                .sidebar {
                    /*height: 125vh;*/
                    /*flex-grow: 1;
            text-align: center;
            width: 15%;*/
                }


                .left-nav {
                    display: block !important;
                }

                .mobile-menu-icon {
                    cursor: pointer;
                    display: block;
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    z-index: 1000;
                }

                    .mobile-menu-icon:hover .fa {
                        background-color: rgba(84 168 221);
                    }

                    .mobile-menu-icon .fa {
                        color: #fff;
                        background-color: rgba(84 168 221);
                        font-size: 1.5em;
                        width: 40px;
                        height: 40px;
                        padding: 9px;
                        /*padding-left: 11px;*/
                    }

                footer {
                    height: 30px;
                }
            }
            /*landcape code*/
            @media screen and (orientation: landscape) and (max-width: 767px) {

                .content {
                    /*height: 200vh;*/
                    display: none;
                }

                .top-nav a {
                    color: #000000;
                    display: block;
                    border: none;
                }

                .top-nav li:last-child a {
                    border-right: none;
                }

                .dropdown-content {
                    display: none;
                    position: absolute;
                    background-color: white;
                    text-align: left;
                    font-size: 17px;
                    padding: 20px;
                    min-width: 247px;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    z-index: 1;
                }

                .mobile-menu-icon .fa {
                    color: #fff;
                    background-color: rgba(84 168 221);
                    font-size: 1.5em;
                    padding: 9px
                }

                .sidebar {
                    /*width: 15%;*/
                    /*height: 125vh;*/
                    flex-grow: 1;
                    text-align: center;
                }

                #openModalBtn .select_location_div {
                    color: white !important;
                    text-align: center !important;
                    position: absolute !important;
                    top: 90% !important;
                    left: 38.1% !important;
                    width: 25% !important;
                    padding: 20px !important;
                    border: 3px solid #53a9de !important;
                    border-radius: 20px !important;
                }

                #home_page.content-widget {
                    display: none;
                }

                .weather-widget {
                    display: none;
                    width: 75vw;
                    height: auto !important;
                    position: fixed;
                    top: 68%;
                    opacity: 0.5;
                    margin-left: -5vw;
                }

                .weatherwidget-io {
                    max-width: 445px;
                    width: 100%;
                    top: -20px;
                    left: 120px;
                }
            }
            /*Group 3: Small Screens (Up to 767px)*/
            @media (orientation: portrait) and (max-width: 767px) {
                /* Styles for screens with a maximum width of 767px */

                .modal-content {
                    width: 80% !important;
                }

                .mobile-menu-icon {
                    display: none !important;
                    width: 20px;
                    font-size: 20pt;
                    margin-right: 30px;
                    margin-left: auto;
                }

                .col1-form, .col2-form {
                    float: none;
                    width: 100%;
                    font-size: 18px;
                }

                .blue-button {
                    font-size: 18px;
                    background-color: #53a9de;
                    border: none;
                    color: white;
                    border-radius: 5px;
                    text-align: center;
                    /* margin-left: 21%;
            width: 50%;*/
                    padding: 5px;
                }

                UrgentNotes

                #get-btn {
                    font-size: 30px;
                    background-color: #53a9de;
                    border: none;
                    color: white;
                    border-radius: 5px;
                    text-align: center;
                    /* margin-left: 21%; */
                    width: 100%;
                    padding: 20px;
                }

                .form-group {
                    margin-left: 10%;
                    margin-right: 10%;
                    font-size: 20px;
                }

                .form-field {
                    width: 100%;
                }

                #test {
                    display: block;
                }



                .l_bold {
                    font-size: 22px;
                }

                #urgent {
                    text-align: center;
                }

                    #urgent label {
                        display: block;
                        margin-bottom: 5px; /* adjust as needed */
                    }

                    #urgent input[type="checkbox"] {
                        display: inline-block;
                        vertical-align: baseline;
                    }



                /*.content {
            height: 100%;
        }*/

                .top-nav a {
                    color: #000000;
                    display: block;
                    border: none;
                    font-size: 20px;
                }

                .top-nav li:last-child a {
                    border-right: none;
                }

                .sidebar {
                    display: none;
                    width: 0vw;
                    height: 125vh;
                    flex-grow: 1;
                    text-align: center;
                }

                .flex-row {
                    font-size: 18px;
		    height: 125vh !important;
                }

                #weatherWidget {
                    display: none;
                }
                /*.weather-widget {
            width: 120vw;
            height: auto !important;
            position: fixed;
            top: 33%;
            opacity: 0.5;
            margin-left: -50vw;
        }

        .weatherwidget-io {
            max-width: 445px;
            width: 100%;
            top: -20px;
            left: 120px;
            height:260px !important;
        }
        */

                #home_page.content-widget {
                    display: none;
                    /*width: auto;
            height: 40%;
            background-image: url("/images/background_logo2.png");
            background-size: 100% 100%;
            background-position: center;
            background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("/images/background.png") !important;*/
                }

                .site-header {
                    margin: 20px 15px;
                }

                .profile-photo-container {
                    display: none; /* Hide profile photo on mobile view */
                }

                .search-form {
                    margin: 10px;
                }

                .top-nav-container {
                    padding: 10px !important;
                    height: auto !important;
                }

                .top-nav a {
                    border: none !important;
                    padding: 20px !important;
                }

                .top-nav li:last-child a {
                    border-right: none !important;
                }

                .content-widget {
                    padding: 15px;
                }

                /* Left column */
                .left-nav {
                    position: static;
                    top: 10px;
                    right: 50px;
                    height: 70vh;
                    overflow: auto;
                    z-index: 999;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                }
            }





h1, h2, h3 {
    margin: 0;
}

h2 {
    font-size: 1.6em;
}

h3 {
    color: #7f7f7f;
    font-size: 1.2em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a:hover {
    text-decoration: none;
}

nav li {
    font-size: 1.1em;
    list-style: none;
    text-transform: uppercase;
}

.inline-block {
    display: inline-block;
    vertical-align: middle;
}

.block {
    display: block;
}

.position-relative {
    position: relative;
}

.blue-text {
    color: #53a9de;
}

.white-text {
    color: white;
}

.green-bg {
    background-color: #39ADB4;
}

.yellow-bg {
    background-color: #D8D138;
}

.white-bg {
    background-color: white;
}

    .white-bg .fa-times {
        background-color: #d7d7d7;
    }

        .white-bg .fa-times:hover {
            background: #83ccd1;
        }

.orange-bg {
    background-color: #F17A54;
    color: white;
}

    .orange-bg .fa-times {
        background-color: #F0A790;
    }

        .orange-bg .fa-times:hover {
            background-color: #E14311;
        }

.pink-bg {
    background-color: #D7425C;
    color: white;
}

    .pink-bg .fa-times {
        background-color: #E57C8F;
    }

        .pink-bg .fa-times:hover {
            background-color: #BD1F3B;
        }

.blue-bg {
    background-color: #3275BB;
    color: white;
}

    .blue-bg .fa-times {
        background-color: #6792C0;
    }

        .blue-bg .fa-times:hover {
            background-color: #2C639C;
        }

.light-gray-bg {
    background-color: #efefef;
}

.padding-right-25 {
    padding-right: 25px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-10 {
    margin: 10px;
}

.margin-30 {
    margin: 30px;
}

.width-100 {
    width: 100%;
}

.no-border {
    border: none;
}

.border-radius-10 {
    border-radius: 10px;
}

footer {
    height: 25px;
}

        /* 2. Left Column
-----------------------------*/
.sidebar {
    width: 15vw;
    height: 100%;
}

        #openModalBtn .select_location_div {
            color: white;
            text-align: center;
            width: 80%;
            padding: 20px;
            border: 3px solid #53a9de;
            border-radius: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }

        .square {
            width: 1.5vw;
            height: 1.5vw;
            border: 0.2vw solid #53a9de;
            display: inline-block;
            vertical-align: middle;
        }

        .circle {
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }

    .site-header {
        margin: 30px auto;
        width: 100% !important;
        text-align: center;
    }

            .site-header h1 {
                color: white;
                display: inline-block;
                font-size: 1.5vw;
                font-weight: 500;
                letter-spacing: 3.6px;
                margin: 0 5px;
                text-transform: uppercase;
                vertical-align: middle;
            }

        .site-header-name {
            margin: 10px 40px 50px;
        }

            .site-header-name h1 {
                color: white;
                display: inline-block;
                font-size: 1.2em;
                font-weight: 300;
                letter-spacing: 1.5px;
                margin: 0 5px;
                text-transform: uppercase;
                vertical-align: middle;
            }

        .profile-photo-container {
            position: relative;
            height: 185px;
            width: 300px;
        }

        .profile-photo-overlay {
            background-color: rgba(136, 219, 255, 0.25);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.3s ease;
        }

            .profile-photo-overlay:hover {
                background-color: rgba(4, 152, 114, 0);
            }

        /* Search form */
        .search-form {
            font-size: 1.1em;
            margin: 50px 20px;
        }

            .search-form .input-group {
                width: 100%;
            }

                .search-form .input-group .form-control {
                    background-color: #18191b;
                    border: none;
                    border-radius: 10px;
                    color: #DDD;
                    padding-left: 30px;
                }

        .form-control:focus {
            border-color: #13895F;
            outline: 0;
            box-shadow: 0 0 8px rgba(83, 169, 222, 1);
        }

        .form-control.highlight {
            background-color: #39ADB4;
            color: white;
        }

            .form-control.highlight::-webkit-input-placeholder { /* WebKit browsers */
                color: #ccc;
            }

            .form-control.highlight:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #ccc;
                opacity: 1;
            }

            .form-control.highlight::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #ccc;
                opacity: 1;
            }

            .form-control.highlight:-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #ccc;
            }

        .search-form .input-group {
            position: relative;
        }

        .fa-search {
            height: 32px;
            width: 32px;
            border: none;
            cursor: pointer;
            color: white;
            background: transparent;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }

        .mobile-menu-icon {
            cursor: pointer;
        }

        .left-nav li {
            font-weight: 300;
        }

        .left-nav a.active,
        .left-nav a:hover {
            background: #18191b;
            border-left: 8px solid #53a9de;
        }

        .left-nav a {
            color: #e9e9ea;
            display: block;
            padding: 30px 20px;
            transition: all 0.3s ease;
            font-size: 12pt;
            font-weight: 500;
        }

        .left-nav .fa {
            margin-right: 15px;
        }

        /*-----------------------------------*/

        /*-----------------------------------*/

        /* 3. Right Column
------------------------------*/
        .top-nav-container {
            background-color: white;
            height: 75px;
            padding: 28px 50px;
            box-shadow: 0px 0px 2px 2px rgba(161, 159, 159, 0.18);
            font-size: 12pt;
        }

        .top-nav li {
            float: left;
            list-style: none;
        }

        .top-nav a {
            color: #7f7f7f;
            display: block;
            padding: 0 25px;
            border-left: 2px solid #c5c5c5;
        }

        .top-nav li:last-child a {
            border-right: 2px solid #c5c5c5;
        }

        .top-nav a:hover,
        .top-nav a.active {
            color: #54a9df;
        }

        /* Main Content Area */
        .content {
            margin-top: 0px;
            padding: 0;
            overflow-x: hidden;
        }

        .content-container {
            padding: 40px 50px;
            margin-left: auto;
            margin-right: auto;
        }



        .col-2 {
            -webkit-flex: 2;
            -ms-flex: 2;
            flex: 2;
        }




        button.accordion {
            background-color: #53a9de;
            color: white;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            border-radius: 10px;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

            button.accordion.active, button.accordion:hover {
                background-color: #132834;
            }

        div.panel {
            background-color: white;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 30px;
        }

            div.panel.show {
                opacity: 1;
                max-height: 500px;
                padding: 0 18px;
                background-color: white;
            }

        #cpas_reporting.panel {
            background-color: white;
            max-height: 9999px !important;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 30px;
        }

        #room_clinics.panel {
            background-color: white;
            max-height: 600px !important;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 0px;
        }

        #room_clinics_grid div.panel {
            background-color: white;
            max-height: 500px !important;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 0px;
        }

        #room_allocation.panel {
            background-color: white;
            max-height: 600px !important;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 0px;
        }

        #room_allocation_grid div.panel {
            background-color: white;
            max-height: 500px !important;
            overflow-y: scroll;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 0px;
        }

        #DAST_report1_div {
            background-color: white;
            max-height: 9999px !important;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 1;
            margin: 30px;
            margin-left: 30px;
            width: 97%;
            margin-bottom: 30px;
            padding-bottom: 15px;
        }

        #DAST_report1_div2 {
            padding: 0px !important;
            padding-top: 20px !important;
        }

        .episodes_collapsible {
            background-color: #214458;
            color: white;
            cursor: pointer;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }

            .episodes_active, .episodes_collapsible:hover {
                background-color: #375769;
            }

        .episodes_content {
            padding: 5px;
            display: none;
            overflow: hidden;
            background-color: #bcc7cd;
            border-radius: 10px;
        }

        #episodes_buttons {
            margin-top: 30px !important;
            padding: 5px !important;
            height: auto !important;
            border-radius: 10px;
        }

        #DAST_report1_div {
            background-color: white !important;
            max-height: 9999px !important;
            overflow: hidden !important;
            transition: 0.6s ease-in-out !important;
            opacity: 1 !important;
            margin: 30px !important;
            margin-left: 30px !important;
            width: 97% !important;
            margin-bottom: 30px !important;
            padding-bottom: 15px !important;
        }

        #DAST_report1_div2 {
            padding: 20px !important;
            padding-top: 20px !important;
        }

        #DAST_report1 {
            border: 1px solid black;
            border-radius: 10px;
            margin-top: 30px;
            width: 100%;
        }

            #DAST_report1 h2 {
                font-weight: bold;
            }

            #DAST_report1 th {
                border: 1px solid black;
                border-collapse: collapse;
                background-color: #798e9b;
                color: white;
                padding: 10px;
                text-align: center;
            }

            #DAST_report1 td {
                border: 1px solid black;
                border-collapse: collapse;
                background-color: white;
                color: black;
                padding: 10px;
                text-align: center;
            }

        #tor_patient_history {
            padding: 40px !important
        }

            #tor_patient_history #patientID {
                border-radius: 5px !important;
                margin-left: 5px !important;
                margin-right: 5px !important;
            }

            #tor_patient_history #getPatHist {
                position: relative;
                top: -5px;
            }

            #tor_patient_history .episodes_content table {
                margin-left: 5% !important;
                width: 100% !important;
            }

            #tor_patient_history #cqms_patienthistory_buttons { /* REMOVE THIS TO ENABLE THE BUTTONS AGAIN */
                background-color: #ccc !important;
                color: #666 !important;
                cursor: not-allowed !important;
                opacity: 0.6 !important;
            }

        #tor_patient_referral_history {
            padding: 40px !important
        }

            #tor_patient_referral_history #patientID {
                border-radius: 5px !important;
                margin-left: 5px !important;
                margin-right: 5px !important;
            }

            #tor_patient_referral_history #getRefHist {
                position: relative;
                top: -5px;
            }

            #tor_patient_referral_history #DASTRefHistory {
                margin-top: 40px;
                border: 3px solid #214459;
            }

                #tor_patient_referral_history #DASTRefHistory thead {
                    background-color: #214459;
                    color: white;
                }

                #tor_patient_referral_history #DASTRefHistory th {
                    padding: 10px;
                    font-size: 11pt;
                }

            #tor_patient_referral_history #DASTRefHistoryBody td {
                padding: 20px !important;
                font-size: 10pt !important;
            }

        #tor_outstanding {
            padding: 40px !important
        }

            #tor_outstanding #DASTOutstandingTOR {
                margin-top: 40px;
                border: 3px solid #214459;
            }

                #tor_outstanding #DASTOutstandingTOR thead {
                    background-color: #214459;
                    color: white;
                }

                #tor_outstanding #DASTOutstandingTOR th {
                    padding: 10px;
                    font-size: 11pt;
                }

                #tor_outstanding #DASTOutstandingTOR td {
                    padding: 20px !important;
                    font-size: 10pt !important;
                }


        /*PICKER LOCATION*/
        /*--------------------------*/
        .tag_select_location {
            font-size: 14px;
            color: white;
            text-align: center;
            margin-bottom: 5px !important;
        }

        .select_location {
            text-align: center;
            vertical-align: bottom;
            margin-bottom: 10px;
        }

            .select_location input, datalist {
                font-family: Open Sans, sans-serif;
                background-color: white;
                color: black;
                padding: 5px;
                width: 80%;
                border: 3px solid #3a769b;
                border-radius: 5px;
                font-size: 15px;
                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
                outline: none;
                text-align: center;
                font-weight: bold;
                margin-bottom: 20px;
                border-radius: 10px;
            }

            .select_location option {
                text-align: left;
                font-weight: bold;
            }

        .select2.notChosenDropdown {
            border: 4px solid red;
        }

        .select2 {
            width: 90% !important;
        }

        /*-----------------------------------*/

        /*--------------------------*/
        /*PROFILE PICTURE*/
        /*--------------------------*/

        .profile-pic {
            color: transparent;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            transition: all 0.3s ease;
        }

            .profile-pic input {
                display: none;
            }

            .profile-pic img {
                position: absolute;
                object-fit: cover;
                width: 150px;
                height: 150px;
                box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
                border-radius: 100px;
                z-index: 0;
            }

            .profile-pic .-label {
                cursor: pointer;
                height: 150px;
                width: 150px;
            }

            .profile-pic:hover .-label {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 10000;
                color: #fafafa;
                transition: background-color 0.2s ease-in-out;
                border-radius: 100px;
                margin-bottom: 0;
            }

            .profile-pic span {
                display: inline-flex;
                padding: 0.2em;
                height: 2em;
            }

        /*-----------------------------------*/

        /*--------------------------*/
        /*CAROUSEL*/
        /*--------------------------*/

        .carousel {
            position: relative;
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
            margin-top: 26px;
        }

        .carousel-inner {
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .carousel-open:checked + .carousel-item {
            position: static;
            opacity: 100;
        }

        .carousel-item {
            position: absolute;
            opacity: 0;
            -webkit-transition: opacity 0.6s ease-out;
            transition: opacity 0.6s ease-out;
        }

            .carousel-item img {
                display: block;
                height: auto;
                max-width: 100%;
            }

        .carousel-control {
            background: rgba(0, 0, 0, 0.28);
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: none;
            font-size: 40px;
            height: 40px;
            line-height: 35px;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(0, -50%);
            cursor: pointer;
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            text-align: center;
            width: 40px;
            z-index: 10;
        }

            .carousel-control.prev {
                left: 2%;
            }

            .carousel-control.next {
                right: 2%;
            }

            .carousel-control:hover {
                background: rgba(0, 0, 0, 0.8);
                color: #aaaaaa;
            }

        #carousel-1:checked ~ .control-1,
        #carousel-2:checked ~ .control-2,
        #carousel-3:checked ~ .control-3 {
            display: block;
        }

        .carousel-indicators {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: 2%;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 10;
        }

            .carousel-indicators li {
                display: inline-block;
                margin: 0 5px;
            }

        .carousel-bullet {
            color: #fff;
            cursor: pointer;
            display: block;
            font-size: 35px;
        }

            .carousel-bullet:hover {
                color: #aaaaaa;
            }

        #title {
            width: 100%;
            position: absolute;
            padding: 0px;
            margin: 0px auto;
            text-align: center;
            font-size: 27px;
            color: rgba(255, 255, 255, 1);
            font-family: 'Open Sans', sans-serif;
            z-index: 9999;
            text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
        }

        /*-----------------------------------*/

        .weather-widget {
            width: 40vw;
            height: auto !important;
            position: fixed;
            top: 65%;
            opacity: 0.5;
            margin-left: 2vw;
        }


        .content-widget {
            border-radius: 10px;
            padding: 30px;
            position: relative;
            margin: 30px;
            box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 10%);
        }

            .content-widget h2 {
                font-size: 20pt;
                margin-bottom: 20px;
                text-align: center;
            }

        #home_page.content-widget {
            margin: 40px !important;
            width: 94%;
            height: 80%;
            background-image: url("/images/background_logo2.png");
            background-size: 100% 100%;
            background-position: center;
            /*background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("/images/background.png") !important;*/
        }

        #rooms_clinic_container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        #room_clinics, #room_clinics_grid {
            display: inline-block;
        }

        #room_clinics_grid {
            margin: 0px !important;
            margin-Left: 30px !important;
            box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 10%) !important;
        }

        #rooms_allocation_container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        #room_allocation, #room_allocation_grid {
            display: inline-block;
        }

        #room_allocation_grid {
            margin: 0px !important;
            margin-Left: 30px !important;
            box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 10%) !important;
        }

        #cqms_roomclinic select {
            width: 150px !important;
        }

        #confirm_btn button {
            width: 150px;
        }

        #confirm_btn .form-group {
            text-align: center;
        }

        #confirm_btn h1 {
            line-height: 1.5;
        }


        .content-widget.no-padding {
            padding: 0;
        }

        .fa-times {
            border-radius: 15px;
            color: white;
            cursor: pointer;
            padding: 4px 5px;
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 100;
            transition: all 0.3s ease;
        }

        .fa-heart {
            color: white;
            cursor: pointer;
            font-size: 1.4em;
            position: absolute;
            top: 30px;
            right: 30px;
            z-index: 100;
            transition: all 0.3s ease;
        }

            .fa-heart:hover {
                color: #39ADB4;
            }

        .progress {
            display: block;
        }

        .panel-default > .panel-heading {
            background-color: #214459;
            color: white;
            text-align: center;
            height: 75px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }

        .panel-default .fa-times {
            top: 12px;
            background-color: #67B5B9;
        }

            .panel-default .fa-times:hover {
                background-color: #297B7F;
            }

        .panel {
            border-radius: 10px;
            margin: auto;
            margin-top: 25px;
            margin-left: 25px;
            width: auto;
            height: auto;
        }

        .pagination-wrap {
            margin-right: 10px;
            text-align: right;
        }

        .pagination > li > a {
            border-color: #E9E8E8;
            color: #a6a6a6;
            margin: 2px;
            padding: 10px;
        }

        .pagination > li > a,
        .pagination > li:first-child > a,
        .pagination > li:last-child > a {
            border-radius: 10px;
        }

        .pagination > .active > a,
        .pagination > .active > a:focus,
        .pagination > .active > a:hover {
            background-color: #39ADB4;
            border-color: #E9E8E8;
        }

        .table {
            margin-bottom: 0;
        }

            .table > tbody > tr > td {
                padding: 20px 30px;
            }

            .table > thead > tr > td {
                padding: 15px;
            }

        .media {
            margin-top: 0;
        }

        .media-body {
            vertical-align: middle;
        }

        .badge {
            background-color: #d6973d;
            border-radius: 5px;
            margin-left: 5px;
            padding: 5px 10px;
            vertical-align: top;
        }

        .img-bordered {
            border: 1px solid #ccc;
            padding: 3px;
        }

        /* 4. Charts & Maps - http://codepen.io/shoogledesigns/pen/BfLkA ------------------*/
        .chart {
            width: 100%;
            height: 300px;
        }

        #timeline_div {
            height: auto;
        }

        /* JQVMap */
        .jqvmap-zoomin, .jqvmap-zoomout {
            width: 15px;
            height: 15px;
        }

        .vmap {
            height: 300px;
        }

        /* 5. Login
------------------------------*/
        .login-widget {
            max-width: 450px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 200px;
            padding: 50px;
        }

            .login-widget .square {
                width: 18px;
                height: 18px;
            }

            .login-widget header {
                margin-bottom: 40px;
            }

            .login-widget h1 {
                display: inline-block;
                font-size: 1.8em;
                text-align: center;
                text-transform: uppercase;
                vertical-align: middle;
            }

        .login-form .form-group {
            margin-bottom: 20px;
        }

            .login-form .form-group:last-child {
                margin-bottom: 0;
            }

        .input-group-addon {
            background: none;
        }

        .btn-primary {
            border-radius: 2px;
            background-color: #132834;
            border: none;
            color: white;
            border-radius: 10px;
            margin-top: 10px;
        }

            .btn-primary:hover {
                background-color: #0f2029;
            }

        .blue-button, .white-button {
            border-radius: 2px;
            padding: 10px 30px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            margin-right: auto;
        }

        .blue-button {
            background-color: #53a9de;
            color: white;
        }

            .blue-button:hover {
                background-color: #3a769b;
            }

        .white-button {
            background-color: white;
            border: 1px solid #53a9de;
            color: #53a9de;
        }

            .white-button:hover {
                background-color: #eff2f3;
            }

        .register-widget {
            max-width: 450px;
            padding: 15px;
            text-align: center;
        }

            .register-widget p {
                margin-bottom: 0;
            }

        .checkbox label {
            padding-left: 0;
        }

        .font-weight-400 {
            font-weight: 400;
        }

        /* Style checkboxes and radio buttons
    http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953 */
input[type="checkbox"] {
    /*display: none;*/
}

            input[type="checkbox"] + label span {
                display: inline-block;
                width: 26px;
                height: 25px;
                margin: -1px 4px 0 0;
                vertical-align: middle;
                background: url(../images/checkbox-radio-sheet.png) left top no-repeat;
                cursor: pointer;
            }

            input[type="checkbox"]:checked + label span {
                background: url(../images/checkbox-radio-sheet.png) -26px top no-repeat;
            }

input[type="radio"] {
    /*display: none;*/
}

            input[type="radio"] + label span {
                display: inline-block;
                width: 26px;
                height: 25px;
                margin: -1px 4px 0 0;
                vertical-align: middle;
                background: url(../images/checkbox-radio-sheet.png) -52px top no-repeat;
                cursor: pointer;
            }

            input[type="radio"]:checked + label span {
                background: url(../images/checkbox-radio-sheet.png) -78px top no-repeat;
            }

        /* 6. Manage Users
------------------------------*/
        .sort-by:hover {
            color: #ded9d9;
        }

        .edit-btn {
            border: 1px solid #ddd;
            border-radius: 3px;
            color: black;
            padding: 5px 15px;
            transition: all 0.3s ease;
            margin: 5px;
        }

            .edit-btn:hover {
                background-color: #53a9de;
                border: 1px solid #53a9de;
                color: white;
            }

        .link {
            color: black;
        }

            .link:hover {
                color: #39ADB4;
            }

        .overflow-hidden {
            overflow: hidden;
        }

        .user-table thead {
            background-color: #214459;
            color: white;
            text-align: center;
        }

        .panel > .table-responsive:last-child > .table:last-child, .panel > .table:last-child {
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .panel > .table:first-child {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .social-icons-container {
            background-color: #f4f3f3;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top: 1px solid #dedede;
        }

        .social-icon-wrap {
            width: 100%;
            height: 100%;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

            .social-icon-wrap:nth-child(2) {
                border-left: 1px solid #dedede;
                border-right: 1px solid #dedede;
            }

        .social-icon {
            background-color: #a6a6a6;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            font-size: 1.5em;
            padding-top: 8px;
            width: 35px;
            height: 35px;
            transition: all 0.3s ease;
        }

            .social-icon:hover {
                background-color: #39ADB4;
            }

        .content-img-bg {
            background-position: center;
            background-attachment: stretch;
            min-height: 300px;
        }

        .content-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }

        .view-img-btn-wrap {
            position: absolute;
            bottom: 50px;
            left: 0;
            width: 100%;
            text-align: center;
        }

        .view-img-btn {
            background-color: #f4f3f3;
            border: none;
            border-radius: 5px;
            color: #a6a6a6;
            width: 100%;
            text-transform: uppercase;
            transition: all 0.3s ease;
            text-align: center;
            height: 100%;
            padding: 13px;
            vertical-align: middle;
        }

        .view-img-btn:hover {
            background-color: #53a9de;
            color: white;
        }

        /* 7. Preferences
-------------------------------*/
        .has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block,
        .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label,
        .has-success.radio label, .has-success.radio-inline label {
            color: #13895F;
        }

        .has-success .form-control {
            border-color: #13895F;
        }

        .has-warning .checkbox, .has-warning .checkbox-inline, .has-warning .control-label, .has-warning .help-block,
        .has-warning .radio, .has-warning .radio-inline, .has-warning.checkbox label, .has-warning.checkbox-inline label,
        .has-warning.radio label, .has-warning.radio-inline label {
            color: #CF922C;
        }

        .has-warning .form-control {
            border-color: #CF922C;
        }

        .has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block,
        .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label,
        .has-error.radio label, .has-error.radio-inline label {
            color: #D7425C;
        }

        .has-error .form-control {
            border-color: #D7425C;
        }

        .multi-select {
            min-width: 200px;
            height: 100px;
            overflow-y: scroll;
        }

        .left-nav a.active,
        .left-nav a:hover {
            border-left: 4px solid #53a9de;
        }

        .mobile-menu-icon {
            cursor: pointer;
            display: block;
            margin-left: auto;
            /* position: fixed;
        top: 20px;
        right: 100px;
        z-index: 1000; */
        }

            .mobile-menu-icon > .fa {
                margin-left: 15px;
            }

            .mobile-menu-icon:hover .fa {
                background-color: rgba(84 168 221);
            }



        mobile-menu-icon .fa {
            color: #fff;
            background-color: rgba(84 168 221);
            font-size: 1.5em;
            padding: 9px
        }

        footer {
            height: 25px;
        }
    }