/*
 * Table
 */
table.dataTable {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

    table.dataTable thead th {
        padding: 3px 5px 3px 5px;
        border-bottom: 1px solid black;
        font-weight: bold;
        cursor: pointer;
        *cursor: hand;
    }

    table.dataTable tfoot th {
        padding: 3px 18px 3px 10px;
        border-top: 1px solid black;
        font-weight: bold;
    }

    /*table.dataTable td {
        padding: 3px 10px;
    }*/

    table.dataTable td.center,
    table.dataTable td.dataTables_empty {
        text-align: center;
    }

    table.dataTable tr.odd {
        background-color: #efefef;
    }

    table.dataTable tr.even {
        background-color: white;
    }


/*
 * Table wrapper
 */
.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
}


/*
 * Page length menu
 */
.dataTables_length {
    float: left;
}


/*
 * Filter
 */
.dataTables_filter {
    float: right;
    text-align: right;
}


/*
 * Table information
 */
.dataTables_info {
    clear: both;
    float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
    /*float: right;*/
    text-align: right;
}

/* Two button pagination - previous / next */
.paginate_disabled_previous,
.paginate_enabled_previous,
.paginate_disabled_next,
.paginate_enabled_next {
    height: 19px;
    float: left;
    cursor: pointer;
    *cursor: hand;
    color: #FF3200 !important;
}

    .paginate_disabled_previous:hover,
    .paginate_enabled_previous:hover,
    .paginate_disabled_next:hover,
    .paginate_enabled_next:hover {
        text-decoration: none !important;
    }

    .paginate_disabled_previous:active,
    .paginate_enabled_previous:active,
    .paginate_disabled_next:active,
    .paginate_enabled_next:active {
        outline: none;
    }

.paginate_disabled_previous,
.paginate_disabled_next {
    color: #666 !important;
}

.paginate_disabled_previous,
.paginate_enabled_previous {
    padding-left: 23px;
}

.paginate_disabled_next,
.paginate_enabled_next {
    padding-right: 23px;
    margin-left: 10px;
}

.paginate_enabled_previous {
    background: url('../images/back_enabled.png') no-repeat top left;
}

    .paginate_enabled_previous:hover {
        background: url('../images/back_enabled_hover.png') no-repeat top left;
    }

.paginate_disabled_previous {
    background: url('../images/back_disabled.png') no-repeat top left;
}

.paginate_enabled_next {
    background: url('../images/forward_enabled.png') no-repeat top right;
}

    .paginate_enabled_next:hover {
        background: url('../images/forward_enabled_hover.png') no-repeat top right;
    }

.paginate_disabled_next {
    background: url('../images/forward_disabled.png') no-repeat top right;
}

/* Full number pagination */
.paging_full_numbers {
    height: 22px;
    line-height: 22px;
}

    .paging_full_numbers a:active {
        outline: none;
    }

    .paging_full_numbers a:hover {
        text-decoration: none;
    }

    .paging_full_numbers a.paginate_button,
    .paging_full_numbers a.paginate_active {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 2px 5px;
        margin: 0 3px;
        cursor: pointer;
        *cursor: hand;
        color: #333 !important;
    }

    .paging_full_numbers a.paginate_button {
        background-color: #efefef;
    }

        .paging_full_numbers a.paginate_button:hover {
            background-color: #ccc;
            text-decoration: none !important;
        }

    .paging_full_numbers a.paginate_active {
        background-color: #ff3200;
    }


/*
 * Processing indicator
 */
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white;
}


/*
 * Sorting
 */
.sorting,
.sorting_asc,
.sorting_desc,
.sorting_asc_disabled,
.sorting_desc_disabled {
    background-position: center right;
    background-repeat: no-repeat;
}

    .sorting:hover {
        background-image: url('../images/sort_both.png');
    }

    .sorting_asc:hover {
        background-image: url('../images/sort_asc.png');
    }

    .sorting_desc:hover {
        background-image: url('../images/sort_desc.png');
    }

    .sorting_asc_disabled:hover {
        background-image: url('../images/sort_asc_disabled.png');
    }

    .sorting_desc_disabled:hover {
        background-image: url('../images/sort_desc_disabled.png');
    }

table.dataTable thead th:active,
table.dataTable thead td:active {
    outline: none;
}


/*
 * Scrolling
 */
.dataTables_scroll {
    clear: both;
}

.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch;
}

#gridEvents {
    width: 1200px;
    font-size: 10pt;
    background-color: White;
    font-family: sans-serif;
}

    /* Center-align images in the first (Type) column of the table with id "wrapperGrid" */
    #gridEvents td:nth-child(1) img {
        display: block !important;
        margin: 0 auto !important;
    }

    /* Column Type */

    #gridEvents .LogEventsTable th:nth-child(1), #gridEvents .LogEventsTable td:nth-child(1) {
        font-size: 90%;
        width: 3%;
        min-width: 3%;
        max-width: 3%;
    }
    /* Column EventId */
    #gridEvents .LogEventsTable th:nth-child(2), #gridEvents .LogEventsTable td:nth-child(2) {
        font-size: 90%;
        width: 6%;
        min-width: 6%;
        max-width: 6%;
    }
    /* Column Candidate */
    #gridEvents .LogEventsTable th:nth-child(3), #gridEvents .LogEventsTable td:nth-child(3) {
        font-size: 90%;
        width: 8%;
        min-width: 8%;
        max-width: 8%;
    }
    /* Column Progress */
    #gridEvents .LogEventsTable th:nth-child(4), #gridEvents .LogEventsTable td:nth-child(4) {
        font-size: 90%;
        width: 33%;
        min-width: 33%;
        max-width: 33%;
    }

    /* Column eventID */
    #gridEvents .LogEventsTable th:nth-child(5), #gridEvents .LogEventsTable td:nth-child(5) {
        font-size: 90%;
        width: 4%;
        min-width: 4%;
        max-width: 4%;
    }
    /* Column category */
    #gridEvents .LogEventsTable th:nth-child(6), #gridEvents .LogEventsTable td:nth-child(6) {
        font-size: 90%;
        width: 4%;
        min-width: 4%;
        max-width: 4%;
    }
    /* Column Date */
    #gridEvents .LogEventsTable th:nth-child(7), #gridEvents .LogEventsTable td:nth-child(7) {
        font-size: 90%;
        width: 7%;
        min-width: 7%;
        max-width: 7%;
    }
    /* Column Time */
    #gridEvents .LogEventsTable th:nth-child(8), #gridEvents .LogEventsTable td:nth-child(8) {
        font-size: 90%;
        width: 4%;
        min-width: 4%;
        max-width: 4%;
    }
    /* Column Browser */
    #gridEvents .LogEventsTable th:nth-child(9), #gridEvents .LogEventsTable td:nth-child(9) {
        /* Adjust the width as needed */
        font-size: 90%;
        width: 10%;
        min-width: 10%;
        max-width: 10%;
    }
    /* Column Resolution */
    #gridEvents .LogEventsTable th:nth-child(10), #gridEvents .LogEventsTable td:nth-child(10) {
        font-size: 90%;
        width: 12%;
        min-width: 12%;
        max-width: 12%;
    }
    /* Column IP */
    #gridEvents .LogEventsTable th:nth-child(11), #gridEvents .LogEventsTable td:nth-child(11) {
        font-size: 90%;
        width: 12%;
        min-width: 12%;
        max-width: 12%;
    }

#wrapperGrid_info {
    margin-right: 20%;
}

#headerGridEvents {
    margin-top: 70px;
    margin-bottom: -22px;
    margin-left: -2.25%;
    background: linear-gradient(to right, #7e7e7e 0%, #7e7e7e 50%, transparent 100%);
    color: white; /* Text color */
    height: 25px;
    line-height: 25px; /* Ensure vertical centering */
}

#headerGridCandidate {
    position: fixed;
    margin-top: 220px;
    margin-bottom: -22px;
    margin-left: -2.25%;
    background: linear-gradient(to right, #7e7e7e 0%, #7e7e7e 50%, transparent 100%);
    color: white; /* Text color */
    height: 25px;
    line-height: 25px; /* Ensure vertical centering */
}

.tooltip-content {
    display: none; /* Hide the tooltip content by default */
    background-color: bisque;
    color: brown;
    text-align: left;
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Position above the trigger element */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
}

.tooltip-trigger:hover + .tooltip-content {
    display: block; /* Show the tooltip content when hovering over the image */
}


#gridCandidates {
    width: 1200px;
    font-size: 10pt;
    background-color: White;
    font-family: sans-serif;
}
    /* Column username */
    #gridCandidates .LogEventsTable th:nth-child(1),
    #gridCandidates .LogEventsTable td:nth-child(1) {
        font-size: 90%;
        width: 10%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column candidate */
    #gridCandidates .LogEventsTable th:nth-child(2),
    #gridCandidates .LogEventsTable td:nth-child(2) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Exam Id */
    #gridCandidates .LogEventsTable th:nth-child(3),
    #gridCandidates .LogEventsTable td:nth-child(3) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Name */
    #gridCandidates .LogEventsTable th:nth-child(4),
    #gridCandidates .LogEventsTable td:nth-child(4) {
        font-size: 90%;
        width: 6%;
        min-width: 6%;
        max-width: 6%;
    }

    /* Column Country */
    #gridCandidates .LogEventsTable th:nth-child(5),
    #gridCandidates .LogEventsTable td:nth-child(5) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Module */
    #gridCandidates .LogEventsTable th:nth-child(6),
    #gridCandidates .LogEventsTable td:nth-child(6) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Speedchart */
    #gridCandidates .LogEventsTable th:nth-child(7),
    #gridCandidates .LogEventsTable td:nth-child(7) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Visited */
    #gridCandidates .LogEventsTable th:nth-child(8),
    #gridCandidates .LogEventsTable td:nth-child(8) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column First Login */
    #gridCandidates .LogEventsTable th:nth-child(9),
    #gridCandidates .LogEventsTable td:nth-child(9) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Last Login */
    #gridCandidates .LogEventsTable th:nth-child(10),
    #gridCandidates .LogEventsTable td:nth-child(10) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Activity */
    #gridCandidates .LogEventsTable th:nth-child(11),
    #gridCandidates .LogEventsTable td:nth-child(11) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Web Proctor */
    #gridCandidates .LogEventsTable th:nth-child(12),
    #gridCandidates .LogEventsTable td:nth-child(12) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Lock */
    #gridCandidates .LogEventsTable th:nth-child(13),
    #gridCandidates .LogEventsTable td:nth-child(13) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Time left */
    #gridCandidates .LogEventsTable th:nth-child(14),
    #gridCandidates .LogEventsTable td:nth-child(14) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column Add/sub time */
    #gridCandidates .LogEventsTable th:nth-child(15),
    #gridCandidates .LogEventsTable td:nth-child(15) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column add time(additional time) */
    #gridCandidates .LogEventsTable th:nth-child(16),
    #gridCandidates .LogEventsTable td:nth-child(16) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }

    /* Column add time(additional time) */
    #gridCandidates .LogEventsTable th:nth-child(17),
    #gridCandidates .LogEventsTable td:nth-child(17) {
        font-size: 90%;
        width: 2%;
        min-width: 2%;
        max-width: 2%;
    }



    /* Center-align images in the first (Type) column of the table with id "wrapperGrid" */
    #gridCandidates td:nth-child(1) img {
        display: block !important;
        margin: 0 auto !important;
    }

/* Add styles for the new ID wrapperGridCandidate */
#wrapperGridCandidate_info {
    margin-right: 20%;
}

#wrapperGridCandidate {
    position: relative;
    max-width: 100%;
}

#headerGridCandidate2 {
    margin-top: 50px;
    margin-bottom: -21px;
}

.tooltip-container {
    position: relative;
    display: inline-block; /* Make sure the container only takes as much space as the image */
}

.tooltip-content {
    display: none; /* Hide the tooltip content by default */
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1;
}

.tooltip-trigger:hover + .tooltip-content {
    display: block; /* Show the tooltip content when hovering over the image */
}


#wrapperGridCandidate span {
    display: none;
}

.expand-image.inline-img-text {
    display: inline-block !important;
    vertical-align: middle !important;
}

.image-button:active {
    opacity: 0.8; /* or any other visual effect */
}


.transparent {
    opacity: 0.6; /* Reduce opacity to make the grid semi-transparent */
    pointer-events: none; /* Disable interaction with the grid while the loader is visible */
}


.loader {
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    position: fixed; /* Ensure it overlays other content */
    /*top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Optional: semi-transparent background */
    z-index: 9999; /* Ensure it is on top of other content */

    
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    

}

    .loader > span {
        display: inline-block;
        background-color: #FFD700;
        width: 8px; /* Initially set to a small size */
        height: 8px;
        border-radius: 50%;
        margin: 0 8px;
        transform: translate3d(0, 0, 0);
        animation: bounce 0.6s infinite alternate;
    }

        .loader > span:nth-child(2) {
            background-color: #FFA500;
            animation-delay: 0.2s;
        }

        .loader > span:nth-child(3) {
            background-color: #FF4500;
            animation-delay: 0.4s;
        }

@keyframes bounce {
    to {
        width: 16px; /* Make sure the bounce grows the size */
        height: 16px;
        transform: translate3d(0, -16px, 0); /* Move upwards */
    }
}

#headerGridCandidate {
    cursor: pointer;
    transition: box-shadow 0.3s ease; /* Smooth transition */
    z-index: 200;
}

    #headerGridCandidate:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
    }

    #headerGridCandidate #refreshSpan {
        font-weight: bold;
    }
/* Common Styles */
.refresh-header {
    display: flex;
    justify-content: flex-start; /* Align text and icon to the left */
    align-items: center; /* Vertically align them */
    padding-left: 5px; /* Optional for spacing */
    position: relative;
}

.refresh-text {
    display: flex;
    align-items: center; /* Align text and image vertically */
    position: relative;
}

    .refresh-text::before {
        content: "";
        display: inline-block;
        width: 25px; /* Width of the image */
        height: 25px; /* Height of the image */
        background-image: url('../../../images/refresh-button.png');
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 10px; /* Space between image and text */
        transition: transform 0.5s ease;
    }

    .refresh-text:hover::before {
        transform: rotate(180deg); /* Rotate the image 180 degrees on hover */
    }

/* Unique Styles */
#headerGridEvents {
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    z-index: 200;
}

    #headerGridEvents:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

    #headerGridEvents #refreshSpanEvents {
        font-weight: bold;
    }

#Grid3Label {
    white-space: nowrap;
    display: inline-block;
}

#map3d {
    position: relative; /* This anchors #map3dCaption to the #map3d element */
}

#map3dCaption {
    position: absolute; /* Absolute positioning relative to #map3d */
    margin-left: 1060px; /* Add some space between #map3d and #map3dCaption */
}

/* Applying common styles */
#headerGridEvents, #headerGridCandidate {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5px;
    position: relative;
}

#refreshTextEvents, #refreshTextCandidate {
    display: flex;
    align-items: center;
    position: relative;
}

    #refreshTextEvents::before, #refreshTextCandidate::before {
        content: "";
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url('../../../images/refresh-button.png');
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 10px;
        transition: transform 0.5s ease;
    }

    #refreshTextEvents:hover::before, #refreshTextCandidate:hover::before {
        transform: rotate(180deg);
    }