﻿html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.container {
    max-width: none;
}

.body-content {
    padding: 0px 6px;
}

#logo-bar {
    background-color: #eaead8;
    min-width: 370px;
    border-bottom: 2px solid #CCCCCC;
}

#logo-container {
    background-color: #eaead8;
    font-size: 22pt;
    font-weight: 600;
}

#logo-bar .float-start {
    padding: 2px 3px 0px 4px;
    
}

#logo-bar #logo {
    height: auto;
    width: 150px;
}

#ctsdmc {
    width: 185px;
    color: #000000;
    font-weight: 600;
    line-height: 18px;
    margin: 6px 0px 0px 0px;
    font-size: 10pt;
}

#profile-icon div:first-child {
    padding: 14px 4px 0px 0px;
}

    #profile-icon div:first-child h4 {
        font-size: 14pt;
    }

#profile-name div:first-child {
    padding: 15px 4px 0px 0px;
    font-weight: 600;
    line-height: 18px;
    font-size: 10pt;
}

.nav {
    padding: 0px;
    font-size: 14px;
    z-index: 25;
    background-color: #e4e4e4 !important;
}

.nav-toggler {
    padding: 0px 0px 0px 3px
}

.nav-toggler-icon {
    font-size: 26px;
}

a.nav-link {
    color: #666666;
    font-weight: 600;
    padding: 5px 14px;
}

    a.nav-link:hover {
        color: #a78f00;
    }

.custom-footer {
    margin: 10px 0px 0px 0px;
    border-top: 1px solid #CCCCCC;
    font-size: 12px;
    color: #666666;
    font-weight: 600;
}

.custom-heading {
    font-size: 14px;
    color: #333333;
    font-weight: 600;
    padding: 3px 0px 3px 0px;
}

.module-heading {
    border-bottom: 2px solid #e4e4e4;
    font-size: 14px;
    color: #333333;
    font-weight: 600;
    margin: 0px 0px 0px 0px;
}

.custom-actions {
    border-top: 1px solid #CCCCCC;
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    margin: 10px 0px 10px 0px;
}

    .custom-actions div {
        float: left;
    }

.default-page-content {
    font-size: 14px;
    color: #000000;
}

#dropdownMenuButton.dropdown-toggle {
    background-color: transparent;
    color: #000000;
    padding: 0px;
    margin: 0px;
    border: none;
}

    #dropdownMenuButton.dropdown-toggle::after {
        border: none;
    }

.dropdown-item {
    padding: 2px 6px;
    margin: 0px;
    font-size: 12px;
}

div.dropdown-menu {
    padding: 6px 0px;
}

.xcol1 {
    background-color: #ffffff;
    border-right: 1px solid #666666;
    font-size: 13px;
    max-width: 400px;
    padding: 0px 15px 0px 0px;
}

.xcol2 {
    background-color: #ffffff;
    font-size: 13px;
    padding: 0px 0px 0px 15px;
}

.datatable-item {
    cursor: pointer;
}

    .datatable-item:hover {
        background-color: #e3e3e3;
    }

#datatables-list {
    overflow: auto;
    height: 0px;
}

#search-term {
    width: 384px;
    margin: 8px 0px 8px 0px;
}

#table-info {
    margin: 0px 0px 10px 0px;
}

.action-header {
    margin: 0px 0px 4px 0px;
    padding: 0px 0px 4px 0px;
    border-bottom: 1px #666666 dotted;
}

.table th {
    background-color: #e3e3e3;
    color: #979797;
}

.table thead tr th {
    background-color: transparent;
    margin: 0px;
    padding: 1px;
    font-size: 12px;
}

.table tbody tr td {
    background-color: transparent;
    margin: 0px;
    padding: 1px;
    font-size: 12px;
}

.table tbody tr:hover {
    background-color: #ededed;
    cursor: pointer;
}

.form-control {
    font-size: 12px;
    margin: 0px 0px 3px 2px;
}

.form-control-sm {
    padding: .1rem .2rem;
}

div.form-group.actions {
    margin: 8px 0px 3px 2px;
}

.control-label {
    color: #666666;
    margin: 0px;
    padding: 0px 0px 0px 4px;
    font-size: 14px
}

.form-control-label-c {
    line-height: 26px;
    border-radius: 0px 0px 0px 0px;
    background-image: linear-gradient(#e3e3e3, #ffffff);
    width: 360px;
}

    .form-control-label-c .float-start {
        line-height: 24px;
        font-weight: 500;
        font-size: 10pt;
        padding: 0px 0px 0px 8px;
        color: #71939b;
    }

.field-help-icon-container {
    padding: 0px 4px 0px 0px;
    font-weight: 700;
    font-size: 12pt;
    margin: 0px;
}

.current-record {
    background-color: #e7fffe;
}

#ApplicationID {
    width: 360px;
    margin-bottom: 10px;
}

#module-options {
    padding: 0px;
    margin: 0px 0px 2px 0px;
    background-color: #ffffff;
    color: #000000;
}

    #module-options:hover {
        padding: 0px;
        margin: 0px 0px 2px 0px;
        background-color: #e3e3e3;
        color: #000000;
    }

#object-options {
    padding: 0px;
    margin: 0px 0px 2px 0px;
    background-color: #ffffff;
    color: #000000;
}

    #object-options:hover {
        padding: 0px;
        margin: 0px 0px 2px 0px;
        background-color: #e3e3e3;
        color: #000000;
    }

.view-ids {
    color: #333333;
    font-weight: 400;
}

.form-group-ro {
}

    .form-group-ro div:first-child {
        float: left;
    }

    .form-group-ro div:last-child {
        float: left;
    }

.update-error {
    margin: 0px 0px 5px 0px;
    padding: 0px 2px 0px 2px;
    background-color: #ffc4c4;
    font-size: 12px;
    line-height: 20px;
}

.listview {
    width: 100%;
}

.module-nav div {
    float: left;
}

.module-heading .module-nav div:first-child {
    margin-right: 0px;
}

.module-heading .module-nav div:last-child {
    margin-left: 0px !important;
    padding-left: 3px;
}

.module-heading .float-start {
    padding-top: 1px;
}

.module-heading .module-nav {
    background-color: #e4e4e4;
    color: #000000;
}

.module-nav {
    padding-right: 3px;
    font-size: 16px;
}

    .module-nav div:first-child {
        margin-right: 8px;
    }

    .module-nav div:last-child {
        margin-left: 8px;
    }

ul.dropdown-menu {
    padding: 3px 0px 3px 0px;
}

.dropdown:hover > .dropdown-menu {
    display: block !important;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    left: 100%;
    margin-top: -37px;
}

.dropdown-item {
    font-size: small; /* 13px */
}

.dropdown-toggle::after {
    font-size: var(--font-md);
    margin-bottom: -2px;
}

/*.dropdown-menu li a.active {
    color: #fff;
}*/

.custom-toggle-arrow {
    font-size: 18px;
    margin-top: 1px;
    line-height: 12px;
}

/*.record-view div:first-child {
    margin: 3px 0px 0px 0px;
}*/
.record-view .rvc {
    margin: 3px 0px 5px 10px;
    font-size: 12px;
    float: left;
    min-width: 300px;
}

.record-view .rvl {
    color: #666666;
    line-height: 14px;
}

.record-view .rvv {
    color: #000000;
}

.subnav-heading {
    border-bottom: 1px solid #e4e4e4;
}

    .subnav-heading div {
        float: left;
    }

        .subnav-heading div:first-child {
            background-color: #e4e4e4;
            padding: 0px 2px 0px 4px;
        }

    .subnav-heading > div:last-child {
        float: right;
        color: #666666;
        font-size: 9pt;
        line-height: 21px;
    }

.subnav div {
    margin: 0px 0px 0px 0px !important;
    padding: 0px 3px 0px 3px !important;
    background-color: #e4e4e4;
    float: left;
}

.subnav-label {
    color: #000000;
    padding: 1px 3px 0px 3px !important;
    font-size: 13px;
    font-weight: bold;
    background-color: #ffffff !important;
}

.view-tools {
    border-top: 1px solid #e4e4e4;
    font-size: 13px;
    color: #666666;
}

    .view-tools div:first-child {
        float: left;
    }

    .view-tools div:last-child {
        float: right;
    }

.view-info {
    padding: 1px 0px 0px 3px;
}

#Delete-Form {
    margin: 5px 0px 0px 0px;
}

    #Delete-Form #delete-text {
        width: 350px;
    }

    #Delete-Form .controls {
        margin: 5px 0px 0px 2px;
    }

        #Delete-Form .controls input {
            width: 60px;
        }

.record-view {
    background-color: #f6f6f6;
    padding: 1px 0px 1px 5px;
}

.back-to-list {
    background-color: #e4e4e4;
    color: #333333;
}

.undefined {
    color: #979797;
}

div.dtc-1.dt-5 {
    padding: 4px 0px 0px 4px;
    color: #666666;
    font-size: 14px;
}

input.form-date {
    width: 120px !important;
}




/*Azadeh to add to final site css*/

.fixed-width-100 {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    display: inline-block;
}

@media (max-width: 767px) {
    .table-custom .dropdown-menu {
        position: relative; /* Sometimes needs !important */
    }
}

.table-custom, .dataTables_scrollBody {
    overflow: visible !important;
}


.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;
}


.table-custom tbody tr.odd,
.dataTable.display tbody tr.odd {
    background: #B0DAD7;
}

.table-custom thead tr th {
    background-color: lightgray;
    color: black;
    /*height: 100px;*/
}


/*.blue {
    color: blue;
    text-decoration: underline;
}
*/


.table-custom .dropdownset {
    height: 1.5em;
    margin: 0;
    padding: 0;
}


.rightalign {
    text-align: right;
    padding: 0px 20px 0px 0px;
}


.buttonsetting {
    width: 30px;
    text-align: center;
    padding: 0px 20px 0px 0px;
}


.warningmessage {
    color: red;
    /*font-style: italic;*/
    /*word-wrap: break-word;*/
}


table.truncate th:hover {
    text-overflow: clip;
}


table.truncate th {
    word-spacing: 100vw;
    white-space: pre-line;
    overflow-x: visible;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
}

table.truncate td {
    white-space: pre-line;
    overflow-x: visible;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
}


/*table.truncate {
    font-size: 0.8vw;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}*/


.isDisabled2 {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.4;
    text-decoration: none;
    pointer-events: none;
}


.standard-red {
    color: red;
}


.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: #eaead8;
}


.indent-1 {
    margin-left: 1.5rem !important;
}


.indent-left-top-1 {
    margin-left: 1.5rem !important;
    margin-top: 1.5rem !important;
}


.spacing-2 {
    margin-left: 3rem !important;
}

.indent-left-top-2 {
    margin-left: 3rem !important;
    margin-top: 3rem !important;
}

.required-field {
    color: red;
}


.temp-content{
    margin: 8px 0px 0px 8px;
}




.checkbox-list {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    margin-left: 10px;
}

.checkbox-list label {
    display: flex;
    align-items: start;
    margin-bottom: 2px;
}

.radio-list {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    margin-left: 10px;
}

    .radio-list label {
        display: flex;
        align-items: start;
        margin-bottom: 2px;
    }

#FormModal .modal-body {
    padding: 0px !important;
    margin: 2px !important;
}

#ProxyModal .modal-body {
    padding: 3px !important;
}

#ProxyModal .modal-header {
    padding: 5px !important;
}

#ProxyModal h5.modal-title {
    font-size: 1em;
}

#ProxyModalWindow {
    display: inline-block;
}

.head-border {
    border-bottom: 1px solid #CCCCCC;
}

.participant-search{
    margin: 8px 0px 0px 0px;
}

.col {
    flex: .4 0 0%;
}

/* timer */

.env-dev #env {
    text-shadow: 0 0 10px #ebebeb, 0 0 20px #ebebeb, 0 0 30px #ebebeb;
}

.env-test #env {
    text-shadow: 0 0 10px #ffef00, 0 0 20px #ffef00, 0 0 30px #ffef00;
}

.env-prod #env {
    color:#666666;
}

#timer-bar {
    background: #333333;
    color: #e3e3e3;
    font-size: 8pt;
    height: 20px;
}

#timer-bar.proxyon {
    background: #fc5c65;
    color: #FFF;
    position: sticky;
    top: 0;
}

.header-timer {
    padding: 2px 10px;
}

.timer-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.timer-modal-overlay.show {
    display: flex;
}

.timer-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

.timer-modal-btn {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.float-right {
    float: right;
}

/*DataGrid Customizations*/

.dx-datagrid .dx-row > td {
    padding: 5px !important; /* Adjust the padding as needed */
    font-size: 12px !important;
    border: 1px solid #ccc; /* Borders between cells */
}

.dx-datagrid {
    border: 2px solid #ccc; /* Outer border of the DataGrid */
    position: relative;
    z-index: 1;
}

    .dx-datagrid .dx-header-row {
        background-color: #f5f5f5; /* Header background color */
        font-weight: bold; /* Header font weight */
    }

    .dx-datagrid .dx-footer-row {
        background-color: #f5f5f5; /* Footer background color */
        font-weight: bold; /* Footer font weight */
    }

.dx-datagrid-headers {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    background-color: #fff;
}

/* Subheader wrapper */
.subhead {
    background: #ffffff;
    border-top: 1px solid #d7d7d7;
}

/* Width + padding to match common layouts */
    .subhead div#navigate-back {
        display: none;
        padding: 4px 4px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }

/* The back button */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background: #ececd5; /* soft cream to match your header bar */
    color: #2f2f2f;
    border: 1px solid #d7d7d7;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

    .btn-back:hover {
        background: #e2e2c3;
    }

    .btn-back:active {
        transform: translateY(1px);
    }

.btn-back__icon {
    font-size: 18px;
    line-height: 1;
}

/* Title */
.title {
    margin: 0;
    font-size: 1em;
    color: #2f2f2f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 4px;
    background: #d2e3e3
}

.dx-button.dx-closebutton .dx-icon::before {
    font-family: DXIcons, sans-serif;
    content: "\f00d"; /* DXIcons close icon */
}

@supports not (font-technology: opentype) {
    .dx-button.dx-closebutton .dx-icon::before {
        content: "✕"; /* fallback only on older devices */
        font-family: inherit;
    }
}
