/* for practitioner file previews and notes */

.fixbutton{
    width:36px;
    height:20px;
    border: 1px solid #ddd;
    border-radius: 4px
}
p.cc_portal_intro_body {

    color: black;

    text-align: center;

}
.app-intro-statement {
    font-weight: bold;
}

a.button_link{
    text-decoration: none;
    color: #444;
    background: #999;
    border: 1px solid #555;
    padding: 4px;
    margin:15px 0;
}
a.button_link:hover{
    background: #eee;
}

.appt_flex_top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.assoc_file_manage{
    width:50%;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    align-self:flex-end;
    max-width: 70px;
}

#the_assoc_list_of_files{
    display:flex;
    flex-wrap: wrap;
}

.file_spacer{
    width:30px;
    height:30px;
    transform:scale(0.9);
    display:inline-block;
}

.single_app_table td input{
    margin-left:0;
}

.file_for_preview{
    cursor:pointer;
    display:inline-block;
    padding: 3px 6px;
    border-radius: 3px;
    height:30px;
}
.file_for_preview:hover, .selected_file{
    background: #78749C;
    color:white;
}
.cc_slidepanel{
    margin-top:20px;
}

.top_of_file_preview{
    display:flex;
    justify-content: space-between;
    margin: 10px 0 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.data_section_head{
    padding: 10px;
    margin: 0;
    border-radius: 10px 10px 0 0;
}

.file_download_button{
    cursor:pointer;
    margin-top: 25px;
    padding: 5px;
    border-radius: 3px 3px 0 0;
    background: #888;
    color: #fff;
    display: inline-block;
}

#pending_visits table{
    width:100%;
}

#pending_visits table tr td button{
    display:block;
    float:right;
}

.file_download_button:hover{
    background: #555;
}

.hs_table{
    background:#eee;
    padding-bottom: 15px;
    border-radius: 10px;
    margin-bottom:20px;
}

.hs_table table{
    margin: 0 auto;
    max-width: 97%;

}

.hs_table_heading {
    font-weight:bold;
    margin-bottom: 10px;
}

table#new_hs_date_entry #new_visit_day_button{
    display:block;
    float:right;
}

#preview_file{
    margin-top:0px;
    width:100%;
    min-height: 900px;
    border: 2px solid #eee;
    /*padding: 5px; */
    border-radius: 2px;
}

#referral_files_panel #fill_notes_area{
    overflow: hidden;
    padding: 20px;
    max-height: 1000px;
}

#referral_files_panel #fill_notes_area.unshown{
    max-height:0;
    padding:0;
}

#notes_hider{
    padding: 5px;
    margin-left: 20px;
    background: #888;
    color:white;
    border-radius: 3px;
    cursor: pointer;
}
#notes_hider:hover{
    background:#555;
}

.notes_area{
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px 0 20px 0;
    transition: all 0.5s linear;
}

#new_note_row td div{
    max-height:0;
    overflow:hidden;
    transition: max-height 0.5s linear;
}

.notes_section .referral_notes_table #new_note_row.shown td div{
    max-height: 200px;
}

.notes_section table{
    width:100%;
}
.notes_section table textarea{
    width:100%;
    height: 100px;
}

.notes_expander_button{
    background: #888;
    color:white;
    margin: 10px 0;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
}
.notes_expander_button:hover{
    background: #555;
}

#new_note_button.expanded i{
    transform:rotate(-90deg);
}

#new_note_save_button{
    float:right;
}

.ref_note_met{
    width:200px;
}

.note_date_user{
    font-size: 0.9em;
    max-width:200px;
    padding: 5px;
    border-radius: 3px;
    background: #ddd;
}

.existing_note td{
    vertical-align: top;
}

.ref_note_note{
    padding-left: 20px;
}

.referral_notes_table textarea{
    border-radius: 3px;
    padding: 10px;
}


@media screen and (max-width:480px){
        #referral_files_panel{
        width:100vw;
        overflow:scroll;
    }
    .preview_file{
        overflow:scroll;
    }
}

@media screen and (max-width:768px){
        #referral_files_panel{
        width:100vw;
        overflow:scroll;
    }
    .preview_file{
        overflow:scroll;
    }
}

.has_focus{
    background: #888;
    color: #fff;
}


/* end practitioner file previews */



.connection_alert{
    display:block;
    margin: 30px auto;
    padding:10px;
    border: 1px solid red;
    max-width:35%;
    background: #eee;
}

.connection_alert_json{
    display:block;
    margin: 30px auto;
    padding:10px;
    border: 1px solid blue;
    max-width:35%;
    background: #eee;
}

.central_box{
    display:block;
    width:60%;
    margin-top:25%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size: 1.3em;
}

.approval_wait_holder{
    width: 95vw;
    /*height: 95vh;*/
    margin: auto;
    border: 2px solid #888;
    background: #eee;
    height:auto;
}

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

.approval_wait_holder .approval_wait_intro{
    text-align:left;
    /*max-width: 70vw;*/
    /*margin-left:10vw;*/
}

.approval_wait_title{
    text-align:center;
    padding: 25px 20px;
}
.approval_internal #doc_preview{
    max-width:90vw;
    max-height: 100vh;
    overflow:scroll;
}
.approval_tabs{
    max-width:90vw;
}
.flex_apart{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.mobile .flex_apart{
    flex-direction: column;
    align-items: center;
}

.mobile .message_approval_section{
    margin-top:30px;
}

.message_approval_section textarea{
    padding: 10px;
}

.flex_apart .message_approval_section{
    max-width: 50%;
}

.message_approval_section{
    border: 1px solid #888;
    padding: 25px;
}

/*forms_generator*/
/*
.filling_list table thead th:first-child, .filling_list table tr td:first-child{
    width: 0;
    display:none;
}
*/
/*not working
.form_page_holder .required:after{
    content:" *";
    color: red;
    display:inline-block;
} */


/*For all forms using the user-form page: */

.cc_inner_table tr.text td,
.cc_inner_table tr.textarea td,
.cc_inner_table tr.date td,
.cc_inner_table tr.file td,
.cc_inner_table tr.number td,
.cc_inner_table tr.select td{
    border-bottom:1px solid #ddd;
    padding: 10px 0;
}

.missedEntry td{
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    background-color: #F4D7D8;
}

#new_appt{
    display: flex;
    align-items:center;
    justify-content: space-evenly;
    margin:20px 15px;
}

.input_holder{
    position:relative;
}

.input_holder .reqmark{
    position:absolute;
    top:0;
    right:0;
    color:red;
    font-size:1.5em
}
.input_holder input[type="checkbox"]{
    transform:scale(1.5);
}

.cc_inner_table tr.text label,
.cc_inner_table tr.checkbox label,
.cc_inner_table tr.select label,
.cc_inner_table tr.date label,
.cc_inner_table tr.file label,
.cc_inner_table tr.textarea label{
    font-weight:bold;
}

.cc_inner_table tr.checkbox input{
    margin-left: 20px;
    float:none;
}

.cc_inner_table tr.checkbox td{
    width:100%;
    /*background:white;*/
}

.cc_inner_table tr.checkbox td label{
    text-align:right;
    float:right;
}

.cc_inner_table tr.textonly{
    font-style:italic;
    font-size: 1.2em;
}

.tabbed_forms{
    align-items:center;
    justify-content:center;
}

.fTitle{
    text-align:center;
}

.form_page_holder table.cc_form_table{
    margin:30px auto;
    width: 95%;
}

.form_page_holder .cc_inner_table{
    margin: 0 auto;
    width:100%;
}

.form_page_holder select{
    /*width:400px; */
}
.form_page_holder input{
    width:400px;
    float:right;
}
.form_page_holder option{
    /*text-align:center;*/
}
.frm_submit_button{
    float:right;
}
.divider_row td{
    border-bottom:2px solid #ddd;
}
.cc_form_table{
    max-width:800px;
}

.cc_form_table td.form_subgroup{
    vertical-align:top;
    padding:0;
    width:100%;
}

.form_subgroup table{
    width:100%;
}

.cc_form_table td:last-child{
   /* max-width: 60%; */
}

.cc_form_table input, .cc_form_table textarea{
    float:right; width:100%;
    border: #eee;
}
.cc_form_table select{
     float:right;
     max-width:400px;
     border: #eee;
}

.cc_inner_table{
    float:right;
    width:100%
}

.cc_inner_table tr td:nth-child(2){
    /*min-width:500px;*/
}

.cc_inner_table td:last-child{
     /*float:right;*/
}
.cc_inner_table label{
    font-weight:normal;
    /*font-size: 0.9em;*/
}

.group_border{
    border-top: 1px solid #aaa;
}
.group_spacer{
    height: 30px;
}
.qcomments i{
    margin-bottom:10px;
}


/*agreements */

.yellow_highlight{
    background: yellow;
}

.prefix_check{
    max-width: 450px;
    text-align:center;
    display:block;
    margin: 0 auto;
    border-top:1px solid #eee;
    padding:20px 0;
    margin-top:30px;
}
.prefix_check input{
    transform: scale(1.5);
    background-color:  #FFFDD0;
}

.agreement_pretext{
    margin:30px;
    border:0;
    padding:26px;
    background:#eee;
    border-radius: 7px;
}

.agreement_filler{
    margin: 30px;
    border: 1px solid #ddd;
    padding: 25px;
}

.agreement_filler input, .agreement_filler select{
    background: #FFFDD0;
}

.form_submission_control{
    padding-top: 50px;
    width:100%;
}
.form_submission_control button, .form_submission_control i{
    display:block;
    margin:0 auto;
}

.filling_list{
    font-size:0.8em;
    width:100%;
}
.filling_list table{
    width:100%;
}

.filling_list table thead th{
    text-align:left;
}

.filling_list table tbody td{
    cursor: pointer;
}

.filling_list table tr:hover{
   background:#eee;
}

.form_type_chooser h4{
    margin-right:30px;
    cursor : pointer;
    padding: 15px;
    background: #eee;
    border-radius:5px;
}

.form_type_chooser h4:hover{
    background: #ccc;
}

.form_type_chooser .chosen{
    background: #ccc;
}


.table_holder_grey_back{
    background:#eee;
    max-width:825px;
    margin: 20px auto 50px;
    padding:25px;
    border-radius: 10px;
}



.table_holder_grey_back input, .table_holder_grey_back textarea, .table_holder_grey_back select{
    background:#fff;
    /*margin-top:10px;*/
}


.table_holder_grey_back textarea{
    border-radius: 7px;
}

#client_folder_area{
    min-width: 450px;
}

.user_forms_table tr:hover td{
    background:#eee;
}

.user_forms_table .active_row td{
    background:#ddd;
}

.form_submit_button_holder{
    width:100%;
    margin-top:25px;
    margin-bottom:25px;
}

.form_submit_button_holder button, .form_redraft_button_holder button, button.resend_form{
    display:block;
    margin: 0 auto;
}

#redraft label{
   text-align:center;
}

#redraft label, #redraft textarea, #redraft button{
    display:block;
    margin: 10px auto;
}

.forms_creator_holder, .forms_selector_holder{
    margin-top:20px;
    border: 2px solid #bbb;
    padding:15px;
    border-radius:15px;
    background: #ddd;
}
.add_question_holder{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    padding:15px;
}

.form_field .fa-circle-minus{
    cursor:pointer;
}

.form_field .fa-bars{
    cursor: grab;
}

#form_creation_table{
    width:100%;
    margin-top:20px;
}
#form_creation_table th{
    text-align:left;
}

#form_creation_table input{
    width:100%;
}

.pdf_generator_table td{
    vertical-align:text-top;
}

.pdf_generator_table input{
    width:100%;
}

/* switches */

/*chips  */
/*----*/

.dirsig_button{
    position:relative;
}
.dir_notifier{
    background:transparent;
    position:absolute;
    top:-3px;
    right:-3px;
    font-size:0.9em;
    color: red;
}

.simple_function_buttons{
    display:flex;
    align-items:center;
    width:100%;
    justify-content: center; /* space-between; */
    margin-top: 30px;
}

.simple_function_buttons .client_button{
    width:155px;
    margin: 25px;
    text-align:center;
}

.simple_function_buttons .client_button .client_button_icon{
    text-align:center;
    margin:0 auto;
}

.simple_function_buttons .client_button i{
    width:100%;
    text-align:center;
    margin: 0 auto;
}

        input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: searchfield-cancel-button;
        }

            span.deleteicon {
                position: relative;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }

        .removing td{
            transition: background 3s linear;
            background: red;
        }

        body.pagelayer-body .wp-site-blocks i:not(.fa, .fas, .far, .fab, .fa-solid, .ccicon){
           font-style: italic
        }

        #theFileList .progress{
            height:2px;
            background: #ddd;
            margin:0;
        }

        .ccicon{
            font-size: 1.7em;
            font-style: normal!important;
        }

        li.processing > i.jstree-checkbox {
            visibility: hidden;
            cursor: not-allowed;
        }

        li.processing a{
            opacity: 0.4;
            cursor: not-allowed!important;
        }

        li.processing .jqtree-title::after{
            content: " [processing] ";
        }

        .example_data{
            font-family: "Lucida Console", Monaco, monospace;
            font-size: 0.9em;
        }

        .cc_steps ol li{
            margin:20px 0;
        }

        .active_preview_line td .fa-beat-fade{
            display:none;
        }

        body.cc_client, body.cc_client .ui-widget-content {
            background-color: #eee!important;
        }

        .cc_client .entry-content{
            background-color:#eee!important;
        }

        .cc_client .entry-content #cc_admin_tabs{
            border: 0;
        }

        .client_welcome_text{
            font-size: 1.2em;
            font-weight: 500;
            margin:15px 0;
        }

        .client_dash_holder{
            margin: 0 auto;
            padding: 20px;
            background: #eee;
            max-width:700px;
        }

        .client_facing_user_strip{
            display:flex;
            justify-content:space-between;
            width:100%;
            position:fixed;
            top:0;
            left:0;
            padding: 5px 10%;
        }

        .zipfile_image{
           display:flex;
           flex-direction:column;
           align-items:center;
           justify-content:flex-start;
        }

        .zipfile_image img{
            max-width:200px;
            height: auto;
            margin-top: 100px;
        }

        .jstree-node .file_deleted{
            /* this doesn't work. Have to set element directly
           /* text-decoration: line-through; */
        }

        .client_function_section, .archive_panel_section{
            border: 1px solid #aaa;
            border-radius: 10px;
            padding: 15px;
            margin: 20px;
        }
        .archive_panel_section table{
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            border-collapse: collapse;
        }
        .archive_panel_section table td{
            padding:5px;
        }

        #the_file_attributes{
            margin-top:50px;
        }

        #file_attribute_section{
            border: 1px solid #aaa;
            border-radius: 10px;
            padding: 0;
            margin: 15px;
        }
        #file_attribute_section table{
            margin: 30px auto 30px auto;
            max-width: 90%;
            font-size: 0.9em;
        }

        #file_attribute_section table input,#file_attribute_section table select{
            width:200px;
        }

        #file_attribute_section table td{
            padding-left: 7px;
        }

        .att_update_button_section{
            margin: 10px;
        }

        .att_update_button_section button{
            display:block;
            margin: 0 auto;
        }

        .file_attributes_head{
            background: #eee;
            border-radius: 10px 10px 0 0;
            overflow:hidden;
            padding: 5px;
            font-size: 1.1em;
            text-align:center;
        }

        .entity_table{
            margin-left:auto;
            margin-top:40px;
            margin-right: auto;
        }
        .entity_table td{
            padding: 5px;
            border-bottom:1px solid #eee;
        }

        .entity_table tbody tr:nth-child(odd){
            background-color: #ddd;
        }

        #pwresult{
            border:1px solid green;
            padding: 10px;
            border-radius:3px;
            margin-top: 25px;
        }

        #add_client_section{
            margin-top:25px;
        }

        .flexleft{
            display:flex;
            justify-content: flex-start;
        }
        .flexleft button{
            margin-right:20px;
        }



.cc_plugin .docSignTable{
    font-size: 0.7em;
    width:100%;
    transform:scale(1.3);
}

#clientTable td, #clientTable div, #clientTable tr span{
    transition: all 0.3s linear;
}

.expander_button{
    color: #999;
    font-size: 1.2em;
}

.revealer{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
}

.new_provider_select .collapsed select{
    max-width: 0;
    border:0;
}

.revealer select{
    max-width: 400px;
    transition: max-width 0.5s linear;
}

.cc_chip .removeminus{
    font-size: 1.2em;
    color:#999;
    margin: 0 5px;
}

.providers{
    display:flex;
    min-width:250px;
}

.providers .cc_chip{
    font-size: 0.9em;
    padding: 4px 4px;
    height:auto;
    display:inline-block;
    margin:0 auto;
    text-align:center;
}

.password_form_table{
    margin: 30px auto;
}

#password_check_table .check .fa-times{
   color:red;
}

#password_check_table .check .fa-check{
    color: green;
}

.password_form_table button{
    display:block;
    margin: 20px auto;
}

.password_form_table td{
    padding: 10px;
}

.password_set_form{
    display: block;
    margin: 30px auto;
    padding: 20px;
    background: #ddd;
    font-weight:bold;
}

#clientTable .target td{
    background: #ddd;
}

.clickable{
    cursor:pointer;
}


.dashbutton i{
    font-style:normal!important;
}

i.fa-regular, i.fa-solid{
    font-style:normal;
}

#cc_client_folders, #client_users_panel, #health_screening_panel{
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 30px;
    margin:15px;
}

.upload_button{
    padding:4px;
    background: white;
    border: 1px solid #aaa;
    border-radius:3px;
    margin-right:5px;
    cursor:pointer;
}

.upload_button:hover{
    background:#eee;
}

.self_right{
    align-self: flex-end;
    display:block;
    float:right;
}

.client_folder, #client_section_area ul.jqtree-tree li.jqtree_common{
    padding: 4px;
    margin: 3px 0;
}


.jqtree-element{
    display:flex;
    align-items:center;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*#client_section_area ul.jqtree-tree li .jqtree-element:hover .jqtree-title, #client_section_area ul.jqtree-tree li .jqtree-element:hover a{
   color: #fff;
}*/

#client_section_area ul.jqtree-tree li.jqtree-selected .jqtree-title {
    border: none;
    /* text-shadow: 0 0 BLACK; */
    box-shadow:none;
    /* color:#fff; */
    outline: none;
}



 #client_section_area ul.jqtree-tree li.jqtree-selected .jqtree-element{
     background: none;
 }

 .jqtree-selected .upload_button{
     color: #444!important;
 }


 /*
 #client_section_ara ul.jqtree-tree li.jqtree-selected .upload_button{
     color: #444;
 }
 */

.client_buttons_holder{
    margin-top:40px;
    min-width: 500px;
    justify-content:space-around;
    align-items: center;
}

.client_button_area{
    padding: 10px;
    transition: max-height 0.5s linear;
    align-self: flex-start;
    display:flex;
    flex-direction:column;
    align-items: flex-start;
}

.client_button_area .client_button button{
    padding: 30px;
    font-size: 1.3em;
    text-align:center;
}

#jstree {
    font-size: 0.8em;
    font-weight: normal;
}

/*--upload form */

.docSignTable .sign_show td{
    border-bottom: 1px solid #eee;
}

.uploader_modal input[type='file'] {
    border: 2px dashed #025bee;
    padding: 100px 50px 20px 130px;
    position: relative;
    margin:0 auto;
    max-width: 450px;
    color: #444;
    background-color: #fff;
}

.uploader_modal input[type='file'].active{
    border:2px dashed red;
    background-color: #FBFD9B;
}


.uploader_modal input[type='file']:before {
    content: "Drop files here or";
    display: block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin: -25px 0 0 -100px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 0.3em;
}

.uploader_modal .indivFile{
    width:100%;
    font-size: 0.8em;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items:center;
}


.uploader_modal .delFile{
    color:red;
}

.uploader_modal .fileProg{
    /*border: 1px solid #bbb;*/
    text-align:left;
    width:350px;
}

.uploader_modal .fileListFormat{
    margin: 20px auto;
}

.uploader_modal input[type="file"]{
    /* display:none; */
}

.uploader_modal label.drop_area{
    visibility:hidden;
    display: block;
    position: relative;
    background-color: #025bee;
    color: #ffffff;
    font-size: 1.1em;
    text-align: center;
    width: 16em;
    /*padding: 1em 0;*/
    /*border: 0.2em solid #025bee;*/
    border-radius: 0.3em;
    margin: 0; /* auto 1em auto;*/
}

.uploader_modal .upload_checks{
    display:block;
    width: 80%;
    margin:20px auto;
}

.uploader_modal .upload_checks input[type="checkbox"]{
    transform:scale(1.2);
}

body .uploader_modal i{
    text-decoration:none;
    font-style: normal;
}

.uploader_modal  textarea{
    display:block;
    margin: 0 auto;
}

body .uploader_modal label.active {
    border: 0.2em dashed #fff; /* #025bee; */
}

.uploader_modal #error {
    text-align: center;
    color: #ff3030;
}


.folder_in_table{
    display:flex;
    justify-content:flex-start;
    align-content: flex-start;
}
.folder_in_table .fname{
    padding-left:7px;
}

body .user_selectors_table td{
    border-right:1px solid #ccc;
}

.cc_chip_holder .unfound{
    display:none;
}

.cc_chip_holder{
    display:flex;
    flex-direction: row;
    justify-content:flex-start;
    flex-wrap:wrap;
}

.cc_chip{
    display: inline-flex;
    flex-direction: row;
    background-color: #e5e5e5;
    border: none;
    cursor: default;
    height: 36px;
    outline: none;
    border: 2px solid white;
    padding: 0;
    font-size: 14px;
    color: #333333;
    font-family:"Open Sans", sans-serif;
    white-space: nowrap;
    align-items: center;
    border-radius: 16px;
    vertical-align: middle;
    text-decoration: none;
    justify-content: center;
}

.cc_chip div{
    transform:scale(0.7);
}

.cc_chip-head{
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: #32C5D2;
    font-size: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    user-select: none;
    border-radius: 50%;
    justify-content: center;
    width: 36px;
    color: #fff;
    height: 36px;
    font-size: 20px;
    margin-right: -4px;
}

.cc_chip-head img.userchip{
    width:36px;
    height:36px;
    border-radius:50%;
}

.cc_chip-content{
    cursor: inherit;
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
}

.cc_chip-action{
    width:36px;
    height:36px;
    background-color:#aaa;
    color: #fff;
    font-weight:bold;
    border-radius:50%;
    font-size: 1.3em;
    float:right;
    text-align:center;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cc_chip-action:hover{
    background-color: #777;
}

/*---- */

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

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

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

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

input:checked + .slider {
    background-color: #2196F3;
}

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

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

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

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

/* Sortable tables */

#cc_folder_settings_table{
    border:0;
    width:100%;
}

#cc_folder_settings_table .user_selectors_table{
    width:100%;
}
#cc_folder_settings_table .user_selectors_table td{
    width:50%;
}

#cc_folder_settings_table td{
    padding: 7px;
    border-bottom: 1px solid #aaa;
}

#cc_folder_settings_table .minned td{
    display:none;
}

#cc_folder_settings_table .maxed td{
    display: table-cell;
}

#cc_folder_settings_table .switch_table td{
    border:0;
    border-bottom: 0;
}
#cc_folder_settings_table .user_selectors_table td{
    border:0;
    border-bottom: 0;
}

#tree_holder{
    margin-top:20px;
}

.cc_plugin .in_form_table{
    width:100%;
    font-size: 0.9em;
    margin-bottom:20px;
}

.cc_plugin .in_form_table td{
    padding: 4px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.cc_plugin .in_form_table label{
    font-style:normal;
}


.full-width-flex{
    flex-grow:1;
    flex-shrink:0;
    width:100%;
}

.cc_usersTable{
    font-size: 14px;
    width: 100%;
}

.cc_usersTable td{
    text-align:left;
    border-bottom:2px solid #eee;
}

.cc_usersTable th{
    text-align:left;
    border-bottom:2px solid #bbb;
}

.cc_usersTable input{
    font-size:0.8em;
}
.cc_usersTable .title{
    max-width:30px;
}

.hidden_display{
    display:none;
}

.cc_flex_button{
    padding: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
    margin-right: 7px;
    cursor: pointer;
}
.cc_flex_button:hover{
    color:white;
}

.cc_plugin .ui-widget-content .ui-state-active{
    /*border: 1px solid #99322F;
    background: #D54743;   */
    font-weight: normal;
    color: #fff;
}

.cc_user_pill{
    color: white;
    background: #aaa;
    font-weight:bold;
    font-size: 0.8em;
    text-align:center;
    padding: 2px;
    border-radius: 50%;
}

.twentyMarginBottom{
    margin-bottom:20px;
}

.flextogetherish {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.flextogetherish-left,
.flextogetherish-right {
    display: flex;
    flex: 1;
}

.flextogetherish-left {
    justify-content: left;
}

.flextogetherish-right {
    justify-content: right;
    gap: 20px;
}


.slidertabs{
    cursor: pointer;
}



#new_client_fields{
    transition: max-height linear 0.5s;
}

.cc_plugin .client_info_holder table{
    margin:0 auto;
}

.cc_plugin .docsend_button button{
    font-size: 0.8em;
    padding: 6px;
    border-radius: 3px;
}


.cc_plugin .docSignTable td{
    word-wrap:normal;
}

.sign_show{
    cursor: pointer;
}

.sign_show:hover td{
   background:#eee;
}

button.cc_button{
    padding:5px;
    font-size: 0.8em;
    font-weight:400;
    background: #ddd;
    color: #000 !important;
    border: 1px solid #777;
    border-radius: 3px;
}

button.cc_button:hover{
    text-decoration: none;
    background: #000;
    color: #eee !important;
}

.centered .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
.centered .ui-tabs-nav li:not(.slidertabs) {
    display: inline-block;
    float: none;
    margin: 0em;
}

.slideflex{
    display:flex;
    /*justify-content:space-between;*/
    flex-shrink:0;
    flex-grow:1;
    flex-wrap:nowrap;
    align-items:flex-start;
}

#doc_link{
    background: #888;
    padding: 5px;
}
.approval_internal #doc_link a{
    color: white;
    width:100%;
}

.message_approval_section #referral_changes{
    width:90%;
    margin: 20px auto;
    height: 250px;

}

.mobile .message_approval_section #referral_changes{
    width: 100%;
    margin:5px auto;
    height: 250px;
}
.mobile .flex_apart .message_approval_section{
    max-width: 100%;
}

.ref_acceptance_area button{
    margin-top: 20px;
}

.message_success{
    background-color: #EEFBF2;
    border: 2px solid #3FCC23;
    padding: 10%;
}
.message_success_inner{
    color: #108431;
    text-align:center;
    font-size: 1.1em;
    background: transparent;
    border: 0;
}

.practitioner_comment{
    min-height: 250px;
}

#doc_preview{
    width:100%;
    height: 4500px;
}

#doc_preview img:not(.userchip){
    width:100%;
}

#doc_preview .pdftxt_display{
    height:100% !important;
    width: 100% !important;
    min-height:1000px;
}

.centered .invite_form{
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.small_button button{
    transform:scale(0.7);
}

.client_details{
    display:block;
    margin-left: 20px;
}

.redfile{
    color:red;
}
.bluefile{
    color:blue;
}
.greenfile{
    color:green;
}
.greyfile{
    color:gray;
}
.goldfile{
    color: #FFD700;
}

.orangefile{
    color:#FFA500;
}

.notshown{
    display:none;
}

.cc_client footer{
    position:absolute;
    width:100%;
    bottom:0;
    border-top: 2px solid #ddd;
    background: #eee;
    padding: 10px 25px 0 25px;
}

.cc_client footer.simple{
    position:relative;
}

.cc_client footer .client_footer, .cc_client footer .simple_client_footer{
    display:flex;
    justify-content: space-between;
    align-items:center;
    width:700px;
    margin: 0 auto;
    padding: 0 25px;
    font-size: 0.9em;
}
.cc_client footer .client_footer .logo_footer, .cc_client footer .simple_client_footer .logo_footer{
    width: 100px;
}

.cc_client select{
    overflow:auto;
}

.cc_client .wp-site-blocks{
    padding-bottom:0;
}

.flex_dashboard select{
    margin-left: 20px;
}

.client_intro{
    margin-bottom: 20px;
}

.client_function_buttons{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    width:100%;
}

.client_button .button-icon{
    font-size:2.2em;
}


.client_button a{
    font-size: 0.9em;
}

.client_button{
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    width: 320px;
    border: 1px solid #ddd;
    cursor: pointer;
    min-height: 128px;
    align-content: center;
}

.client_button:hover{
    background:#ededed;
}

.explain_section{
    border-radius : 10px;
    border: 1px solid #ddd;
    background: #fff;
    width:100%;
    margin-top: 30px;
    margin-bottom: 120px;
}
.explain_section .expl_head{
    color: #fff;
    font-weight:bold;
    font-size: 1.1em;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
}
.explain_section .expl_text{
    font-size:0.9em;
    padding:15px;
}
.client_button_head{
    font-size: 1.1em;
    font-weight:bold;
    margin-bottom: 8px;
    margin-top: 6px;
}

.client_button_text{
    font-size: 0.9em;
}

span.cc_emoji_icon {
    font-size: 32px;
}

.flex_dashboard{
    display:flex;
    /*border: 1px solid #444;*/
    background: #eee;
    border-radius: 10px;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom:30px;
    /*justify-content: space-between;*/
}


.file_drop_area{
    height:150px;
    width:100%;
    padding: 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ajax-file-upload-filename{
    font-size: 0.7em;
}

.flexapart{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cc_upload_form{
    width:450px;
    /*height:200px; */
    /*overflow:scroll;*/
}

.cc_send_email_form{
    margin-top:15px;
}
.cc_send_email_form input[type="checkbox"]{
    display:inline-block;
    transform:scale(1.5);
}

.cc_overflow_scroll{
    overflow-y:scroll;
}

/*
.cc_dropzone{
    padding:15px;
    display:block;
    margin:0 auto;
    border: dashed 2px #999;
    background: #eee;
}
*/

.cc_filename{
    font-size: 0.8em;
}

.cc_upload_form #cc_box{
    width:100%;
    height:100%;
}

table.tablesorter thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: pointer;
}

.vakata-context { z-index:10052 !important; }

.this_row td{
    background:#eee;
}

.client_info_holder{
    /*not working */
    overflow:hidden;
    position:relative;
}

.client_slider{
    background: #fff;
}

#client_info .shown, #slidepanel.shown{
    /*
    -webkit-box-shadow: -2px 0px 8px 0px rgba(68,68,4,1);
    -moz-box-shadow: -2px 0px 8px 0px rgba(68,68,4,1);
    box-shadow: -2px 0px 8px 0px rgba(68,68,4,1);
    */
-webkit-box-shadow: -17px 0px 30px 6px rgba(0,0,0,0.76);
box-shadow: -17px 0px 30px 6px rgba(0,0,0,0.76);
}

#cc_sl_closer{
    cursor:pointer;
}

#cc_client_detail{
    margin:15px;
}

.signing_panel #cc_client_detail{
    padding: 10px;
    margin:0;
    position: fixed;
    max-width: 300px;
    top: 95px;
    background: white;
    height: 100%;
    overflow:scroll;
}

.admin-bar #cc_sl_closer{
    margin-top: 32px;
}

#slidepanel{
    overflow: scroll;
    z-index:10;
    width:100%; /*set locally too */
}

.hidden_first{
    max-height:0;
    overflow: hidden;
}

input#cc_search {
    border-width: 1px;
    border-radius: 5px;
    width: 450px;
    height: 40px;
    border-color: #e6e6e6 !important;
    border-style: solid;
}

.user-settings-button i, .add-client-button i{
    color: grey;
}

.user-settings-button, .add-client-button {
border: 1px solid #e6e6e6 !important;
border-radius:5px;
min-width: 120px;
height:40px;

    
}

.cc_plugin button {
    padding: 10px;
    border: 1px solid #999;
}

span.button-label {
    font-weight: bold;
    color: grey;
}

.client-maintenance-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-top: 18px;
    padding: 16px 24px;
    box-sizing: border-box;

    border: 1px solid #e3e7ec;
    border-radius: 8px;
    background: #fff;
}

.client-maintenance-copy {
    display: flex;
    align-items: center;
    gap: 20px;
}

.client-maintenance-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-list-admin-tabs > ul.ui-tabs-nav {
    display: none;
}

.client-page-header {
    position: relative;
    width: 100%;
    min-height: 190px;
    margin: 0 auto 64px;
    border-radius: 8px;
    background-color: #eef2f6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

.client-page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

.client-page-heading-card {
    position: absolute;
    left: 24px;
    bottom: -40px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 310px;
    max-width: calc(100% - 48px);
    padding: 18px 22px;
    border: 1px solid #e3e7ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
    box-sizing: border-box;
}

.client-page-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    overflow: hidden;
    border-radius: 50%;
    background: #eef4fb;
    color: #000;
    font-size: 24px;
}

.client-page-logo svg,
.client-page-logo img {
    display: block;
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
}

.client-page-heading-copy h1 {
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.client-page-heading-copy p {
    margin: 5px 0 0;
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 700px) {
    .client-page-header {
        min-height: 150px;
        margin-bottom: 72px;
    }

    .client-page-heading-card {
        left: 14px;
        bottom: -52px;
        max-width: calc(100% - 28px);
        min-width: 0;
        padding: 14px 16px;
    }

    .client-page-logo {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .client-page-logo svg,
    .client-page-logo img {
        max-width: 44px;
        max-height: 44px;
    }

    .client-page-heading-copy h1 {
        font-size: 24px;
    }

    .client-page-heading-copy p {
        font-size: 12px;
    }
}

table.tablesorter {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #d8d8d8a1;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

div#cc_admin_tabs {
    border-width: 0 !important;
}


tr.client_row td {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    padding: 10px !important;
    font-weight: 600;
    cursor:pointer;

}

table#clientTable tbody tr th {
    padding: 12px 10px;
    font-weight: 600;
    border-bottom: 1px solid #d8d8d8a1;
    font-size: 16px;
    text-align: center;
}

/* 5.3.0 UI reconciliation: centre the selected-client workspace so it aligns
   more closely with the compact, centred master Clients screen. */
#client_folder_area {
    width: 100%;
    max-width: 920px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 16px 24px;
    box-sizing: border-box;
}

#client_folder_area #client_folder_panel,
#client_folder_area #cc_client_folders {
    width: 100%;
    box-sizing: border-box;
}

/* Keep the tree centred with one stable layout model. The outer holder
   performs the centring; jsTree keeps its natural content width and left-
   aligned hierarchy. This avoids the tree snapping left after jsTree redraws. */
#client_folder_area #tree_holder {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

#client_folder_area #jstree {
    width: max-content;
    max-width: 100%;
    margin: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
}

#client_folder_area #jstree .jstree-anchor,
#client_folder_area #jstree .jstree-anchor:link,
#client_folder_area #jstree .jstree-anchor:visited,
#client_folder_area #jstree .jstree-anchor:hover,
#client_folder_area #jstree .jstree-anchor:active {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 28px;
    height: 28px;
}

/* 5.3.0 Client Detail reconciliation: reuse the master Clients screen header
   and keep the whole detail workspace centred through tab changes/redraws. */
#cc_client_detail {
    width: 100%;
    max-width: 930px;
    min-width: 0;
    margin: 0 auto !important;
    padding: 0 15px;
    flex: 0 1 930px;
    box-sizing: border-box;
}

#client_folder_area {
    margin-left: auto !important;
    margin-right: auto !important;
}

#client_folder_area .client-detail-page-header {
    width: 100%;
}

#client_folder_area #client_folder_panel,
#client_folder_area .cc_slidepanel {
    width: 100%;
    box-sizing: border-box;
}

#client_folder_area #tree_holder {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
}

#client_folder_area #jstree {
    width: max-content !important;
    max-width: 100%;
    margin: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* 5.3.0 Client Detail layout fix: centre the normal detail workspace using the
   stable slideflex parent rather than taking #cc_client_detail out of flow.
   The empty document preview previously consumed 100% flex width and pushed
   the detail workspace left; hide it until it actually contains preview data. */
#slidepanel.client_slider > .slideflex {
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

#slidepanel.client_slider > .slideflex > #cc_client_detail {
    position: relative;
    width: 100%;
    max-width: 930px;
    flex: 0 1 930px;
    margin: 0 auto !important;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Do not let an empty preview pane reserve a full flex column. As soon as
   preview content is injected, :empty no longer matches and the normal
   document-preview layout can take over. */
#slidepanel.client_slider > .slideflex > #doc_preview:empty {
    display: none;
    width: 0;
    height: 0;
    flex: 0 0 0;
}

/* Keep the document tree visually centred while preserving left-aligned
   hierarchy text. */
#client_folder_area #tree_holder {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
}

#client_folder_area #jstree {
    width: max-content !important;
    max-width: 100%;
    margin: 0 !important;
    text-align: left !important;
}


/* 5.3.0 definitive Client Detail centring.
   JS adds .client-detail-mode when a client detail view is rendered, so this
   survives AJAX re-renders and tab changes instead of relying on :empty alone. */
#slidepanel.client_slider > .slideflex.client-detail-mode {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider > .slideflex.client-detail-mode > #cc_client_detail {
    position: relative !important;
    width: min(1090px, calc(100% - 32px)) !important;
    max-width: 1090px !important;
    flex: 0 1 1090px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider > .slideflex.client-detail-mode > #doc_preview:empty {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
}

/* Keep the actual content column aligned within the centred Client Detail workspace. */
#slidepanel.client_slider > .slideflex.client-detail-mode #client_folder_area {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 5.3.0 Client Detail centring — actual admin DOM structure.
   In the admin view, .slideflex is nested inside #cc_client_tabs > #cc_folders,
   so selectors using `#slidepanel > .slideflex` never matched. These rules target
   the real descendant structure and therefore survive AJAX renders/tab changes. */
#slidepanel.client_slider .slideflex.client-detail-mode {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider .slideflex.client-detail-mode > #cc_client_detail {
    position: relative !important;
    width: min(1140px, calc(100% - 32px)) !important;
    max-width: 1140px !important;
    min-width: 0 !important;
    flex: 0 1 1140px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider .slideflex.client-detail-mode > #doc_preview:empty {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
}

#slidepanel.client_slider .slideflex.client-detail-mode #client_folder_area {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}



/* 5.3.0 Administration alignment fix.
   Global administration HTML is injected into #doc_preview, which sits beside
   #cc_client_detail inside the persistent .slideflex wrapper. When the detail
   pane is empty, remove it from flex layout and centre the administration hub
   in the same 1140px column used by the main Clients screen. */
#slidepanel.client_slider .slideflex.admin-hub-mode {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider .slideflex.admin-hub-mode > #cc_client_detail:empty {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
}

#slidepanel.client_slider .slideflex.admin-hub-mode > #doc_preview {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
}

#slidepanel.client_slider .slideflex.admin-hub-mode > #doc_preview > .cc-admin-hub-screen {
    width: min(1140px, calc(100% - 32px)) !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 5.3.0 Administration hub reconciliation: bring the internal admin screen
   into the same 1140px branded layout language as Clients and Client Details. */
.cc-admin-hub-screen {
    width: min(1140px, calc(100% - 32px));
    max-width: 1140px;
    margin: 0 auto;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc-admin-hub-header {
    width: 100%;
}

.cc-admin-hub-workspace {
    width: 100%;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc-admin-hub-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border-bottom: 1px solid #dce6d8;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc-admin-hub-tabs .cc_flex_button {
    margin: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc_slidepanel {
    width: 100%;
    margin: 0;
    padding: 24px;
    border: 1px solid #dfe4ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.06);
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc_slidepanel > h3,
.cc-admin-hub-screen .cc_slidepanel > div > h3 {
    margin: 0 0 18px;
    color: #171717;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.cc-admin-hub-screen #the_user_table {
    width: 100%;
    overflow-x: auto;
}

.cc-admin-hub-screen .cc_usersTable {
    width: 100%;
    margin: 0;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14px;
    background: #fff;
}

.cc-admin-hub-screen .cc_usersTable th,
.cc-admin-hub-screen .cc_usersTable td {
    padding: 11px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e8ebef;
    text-align: left;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc_usersTable th {
    background: #f7f9fb;
    color: #333;
    font-weight: 700;
    border-bottom: 1px solid #d9dee5;
}

/* Keep the core user columns proportionate and reserve real space for action buttons. */
.cc-admin-hub-screen .cc_usersTable {
    table-layout: fixed;
}

.cc-admin-hub-screen .cc_usersTable th:nth-child(1),
.cc-admin-hub-screen .cc_usersTable td:nth-child(1) { width: 6%; }

.cc-admin-hub-screen .cc_usersTable th:nth-child(2),
.cc-admin-hub-screen .cc_usersTable td:nth-child(2) { width: 7%; }

.cc-admin-hub-screen .cc_usersTable th:nth-child(3),
.cc-admin-hub-screen .cc_usersTable td:nth-child(3) { width: 14%; }

.cc-admin-hub-screen .cc_usersTable th:nth-child(4),
.cc-admin-hub-screen .cc_usersTable td:nth-child(4) { width: 15%; }

.cc-admin-hub-screen .cc_usersTable th:nth-child(5),
.cc-admin-hub-screen .cc_usersTable td:nth-child(5) { width: 10%; }

.cc-admin-hub-screen .cc_usersTable th:nth-child(6),
.cc-admin-hub-screen .cc_usersTable td:nth-child(6) {
    width: 18%;
    overflow-wrap: anywhere;
}

.cc-admin-hub-screen .cc_usersTable th:nth-child(7),
.cc-admin-hub-screen .cc_usersTable td:nth-child(7) { width: 17%; }

/* In the normal admin-user view there are three trailing action columns. */
.cc-admin-hub-screen .cc_usersTable th:nth-child(8),
.cc-admin-hub-screen .cc_usersTable td:nth-child(8),
.cc-admin-hub-screen .cc_usersTable th:nth-child(9),
.cc-admin-hub-screen .cc_usersTable td:nth-child(9),
.cc-admin-hub-screen .cc_usersTable th:nth-child(10),
.cc-admin-hub-screen .cc_usersTable td:nth-child(10) {
    width: 4.333%;
    min-width: 44px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap;
}

.cc-admin-hub-screen .cc_usersTable tr:nth-child(even) td {
    background: #fafafa;
}

.cc-admin-hub-screen .cc_usersTable tr:last-child td {
    border-bottom: 0;
}

.cc-admin-hub-screen .cc_usersTable button {
    min-width: 34px;
    min-height: 34px;
    border-radius: 5px;
}

.cc-admin-hub-screen .cc_usersTable .add_client_row td {
    background: #fff;
}

@media (max-width: 700px) {
    .cc-admin-hub-screen {
        width: calc(100% - 20px);
    }

    .cc-admin-hub-screen .cc_slidepanel {
        padding: 16px;
    }
}


/* 5.3.3 UI consistency refinements */
.archive_panel_section table {
    width: 100% !important;
    max-width: none !important;
    table-layout: auto;
}

.archive_panel_section .archive-bulk-actions {
    width: 100%;
    margin-top: 14px !important;
    text-align: left !important;
}

.client_function_section .client-function-title {
    font-weight: 700;
}

.client_function_section table {
    width: auto;
    max-width: 100%;
}

.client_function_section .client-function-checkbox {
    padding-left: 14px;
    vertical-align: top;
    text-align: left;
}

.client_function_section .client-function-checkbox input[type="checkbox"] {
    margin: 3px 0 0 0;
    vertical-align: top;
}

/* Shared standard button tier. Small buttons remain defined separately. */
.cc-button,
button.cc-button,
#add_group,
#save_group,
#cc_new_client_button,
#edit_client_name_button,
#update_client {
    font-size: 14px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 30px;
}

/* Explicit small button tier. */
.btn-sm,
button.btn-sm,
button.btn.btn-sm,
.btn.btn-sm {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
}

/* 5.3.4 alternating table row colours */
.cc_usersTable tbody tr:nth-child(odd) td,
.cc-archive-table tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

.cc_usersTable tbody tr:nth-child(even) td,
.cc-archive-table tbody tr:nth-child(even) td {
    background-color: #eeeeee;
}

/* Keep action/add rows neutral where present. */
.cc_usersTable tbody tr.add_client_row td {
    background-color: #ffffff;
}



/* 5.3.6 final pre-branch UI refinements */

/* Client Details user table: content-aware widths and consistent zebra striping. */
#cc_client_detail .cc_usersTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

#cc_client_detail .cc_usersTable th,
#cc_client_detail .cc_usersTable td {
    padding: 10px 12px;
    box-sizing: border-box;
    vertical-align: middle;
}

#cc_client_detail .cc_usersTable th:nth-child(1),
#cc_client_detail .cc_usersTable td:nth-child(1) { width: 6%; }
#cc_client_detail .cc_usersTable th:nth-child(2),
#cc_client_detail .cc_usersTable td:nth-child(2) { width: 7%; }
#cc_client_detail .cc_usersTable th:nth-child(3),
#cc_client_detail .cc_usersTable td:nth-child(3) { width: 14%; }
#cc_client_detail .cc_usersTable th:nth-child(4),
#cc_client_detail .cc_usersTable td:nth-child(4) { width: 14%; }
#cc_client_detail .cc_usersTable th:nth-child(5),
#cc_client_detail .cc_usersTable td:nth-child(5) { width: 16%; }
#cc_client_detail .cc_usersTable th:nth-child(6),
#cc_client_detail .cc_usersTable td:nth-child(6) {
    width: 24%;
    overflow-wrap: anywhere;
}
#cc_client_detail .cc_usersTable th:nth-child(7),
#cc_client_detail .cc_usersTable td:nth-child(7) { width: 14%; }
#cc_client_detail .cc_usersTable th:nth-child(n+8),
#cc_client_detail .cc_usersTable td:nth-child(n+8) {
    width: 5%;
    min-width: 44px;
    text-align: center;
}

#cc_client_detail .cc_usersTable tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}
#cc_client_detail .cc_usersTable tbody tr:nth-child(even) td {
    background-color: #eeeeee;
}

/* Archive table uses the same visual language as the other app tables. */
.cc-admin-hub-screen .cc-archive-table {
    width: 100% !important;
    table-layout: fixed;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
    font-size: 14px;
}

.cc-admin-hub-screen .cc-archive-table th,
.cc-admin-hub-screen .cc-archive-table td {
    padding: 11px 12px;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #e8ebef;
    box-sizing: border-box;
}

.cc-admin-hub-screen .cc-archive-table th {
    background: #f7f9fb;
    color: #333;
    font-weight: 700;
    border-bottom: 1px solid #d9dee5;
}

.cc-admin-hub-screen .cc-archive-table tbody tr:nth-child(odd) td { background: #fff; }
.cc-admin-hub-screen .cc-archive-table tbody tr:nth-child(even) td { background: #eeeeee; }
.cc-admin-hub-screen .cc-archive-table tbody tr:last-child td { border-bottom: 0; }
.cc-admin-hub-screen .cc-archive-table .cc-archive-select-column { width: 5%; }
.cc-admin-hub-screen .cc-archive-table th:nth-child(2),
.cc-admin-hub-screen .cc-archive-table td:nth-child(2) { width: 24%; }
.cc-admin-hub-screen .cc-archive-table th:nth-child(3),
.cc-admin-hub-screen .cc-archive-table td:nth-child(3) { width: 31%; }
.cc-admin-hub-screen .cc-archive-table th:nth-child(4),
.cc-admin-hub-screen .cc-archive-table td:nth-child(4) { width: 22%; }
.cc-admin-hub-screen .cc-archive-table .cc-archive-action-column,
.cc-admin-hub-screen .cc-archive-table th:nth-child(5),
.cc-admin-hub-screen .cc-archive-table td:nth-child(5) {
    width: 18%;
    text-align: center;
}

/* User Editor modal: clear two-column hierarchy and grouped account actions. */
.cc-user-editor-modal-body {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.cc-user-editor-summary {
    margin-bottom: 18px;
}

.cc-user-editor-grid,
.flex_user_edit.cc-user-editor-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(440px, 1.1fr);
    gap: 28px;
    align-items: start;
    justify-content: initial;
}

.cc-user-editor-details,
.cc-user-editor-actions {
    min-width: 0;
}

.cc-user-editor-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

#user_edit_form .user_fields table,
#user_edit_form .user_clients table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

#user_edit_form .user_fields td {
    padding: 0 8px 0 0;
    vertical-align: middle;
}

#user_edit_form .user_fields label {
    font-weight: 700;
}

#user_edit_form .user_fields input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cc-user-account-actions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e4e7eb;
}

.cc-user-account-actions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cc-user-account-actions-table td {
    padding: 8px;
    vertical-align: middle;
}

.cc-user-reset-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-user-reset-link-row #pw_reset_link {
    flex: 1 1 220px;
    min-width: 180px;
}

#cc_delete_user_button {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cc-user-editor-grid,
    .flex_user_edit.cc-user-editor-grid {
        grid-template-columns: 1fr;
    }
}


/* 5.3.7 - verified pre-branch refinements. These rules target the actual rendered classes. */

/* Client Details > Users: exact content-aware column distribution and zebra striping. */
#client_users_panel .cc_usersTable.cc-client-users-table,
#cc_client_detail .cc_usersTable.cc-client-users-table {
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 14px !important;
}
#client_users_panel .cc_usersTable.cc-client-users-table th,
#client_users_panel .cc_usersTable.cc-client-users-table td,
#cc_client_detail .cc_usersTable.cc-client-users-table th,
#cc_client_detail .cc_usersTable.cc-client-users-table td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(1),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(1) { width: 6% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(2),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(2) { width: 7% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(3),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(3) { width: 14% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(4),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(4) { width: 14% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(5),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(5) { width: 16% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(6),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(6) {
    width: 24% !important;
    overflow-wrap: anywhere;
}
#client_users_panel .cc_usersTable.cc-client-users-table th:nth-child(7),
#client_users_panel .cc_usersTable.cc-client-users-table td:nth-child(7) { width: 14% !important; }
#client_users_panel .cc_usersTable.cc-client-users-table tbody tr:nth-child(odd) td,
#cc_client_detail .cc_usersTable.cc-client-users-table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}
#client_users_panel .cc_usersTable.cc-client-users-table tbody tr:nth-child(even) td,
#cc_client_detail .cc_usersTable.cc-client-users-table tbody tr:nth-child(even) td {
    background-color: #eeeeee !important;
}

/* Manage Client Archives: same full-width table language as the rest of the application. */
#cc_archives_panel .cc-archive-table,
.cc-admin-hub-screen #cc_archives_panel .cc-archive-table {
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
    border: 1px solid #e1e5ea !important;
    border-radius: 8px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    font-size: 14px !important;
}
#cc_archives_panel .cc-archive-table th,
#cc_archives_panel .cc-archive-table td {
    padding: 11px 12px !important;
    vertical-align: middle !important;
    text-align: left !important;
    border-bottom: 1px solid #e8ebef !important;
    box-sizing: border-box !important;
}
#cc_archives_panel .cc-archive-table th {
    background: #f7f9fb !important;
    color: #333 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #d9dee5 !important;
}
#cc_archives_panel .cc-archive-table tbody tr:nth-child(odd) td { background: #fff !important; }
#cc_archives_panel .cc-archive-table tbody tr:nth-child(even) td { background: #eeeeee !important; }
#cc_archives_panel .cc-archive-table tbody tr:last-child td { border-bottom: 0 !important; }
#cc_archives_panel .cc-archive-table .cc-archive-select-column { width: 5% !important; }
#cc_archives_panel .cc-archive-table th:nth-child(2),
#cc_archives_panel .cc-archive-table td:nth-child(2) { width: 24% !important; }
#cc_archives_panel .cc-archive-table th:nth-child(3),
#cc_archives_panel .cc-archive-table td:nth-child(3) { width: 31% !important; }
#cc_archives_panel .cc-archive-table th:nth-child(4),
#cc_archives_panel .cc-archive-table td:nth-child(4) { width: 22% !important; }
#cc_archives_panel .cc-archive-table th:nth-child(5),
#cc_archives_panel .cc-archive-table td:nth-child(5) {
    width: 18% !important;
    text-align: center !important;
}
#cc_archives_panel .archive-bulk-actions {
    margin-top: 12px !important;
    text-align: left !important;
}

/* User editor: force the intended two-column layout over the old legacy flex rules. */
.cc-user-editor-modal-body {
    width: min(1140px, calc(100% - 32px)) !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
#the_user_editor.user_editor {
    padding: 18px !important;
}
#user_edit_form.flex_user_edit.cc-user-editor-grid {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.1fr) !important;
    gap: 28px !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
}
#user_edit_form .cc-user-editor-details,
#user_edit_form .cc-user-editor-actions {
    min-width: 0 !important;
    width: 100% !important;
}
#user_edit_form .cc-user-details-table,
#user_edit_form .cc-user-membership-table,
#user_edit_form .cc-user-account-actions-table {
    width: 100% !important;
    table-layout: auto !important;
}
#user_edit_form .cc-user-details-table td,
#user_edit_form .cc-user-membership-table td,
#user_edit_form .cc-user-account-actions-table td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
}
#user_edit_form .cc-user-details-table input[type="text"],
#user_edit_form .cc-user-account-actions-table input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.cc-user-account-actions {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid #e2e5e9 !important;
}
.cc-user-reset-link-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
}
.cc-user-reset-link-row label,
.cc-user-reset-link-row small {
    grid-column: 1 / -1 !important;
}
.cc-user-danger-actions td {
    padding-top: 14px !important;
}
@media (max-width: 900px) {
    #user_edit_form.flex_user_edit.cc-user-editor-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5.3.9 - deterministic zebra striping on actual rendered data rows.
   Uses explicit row classes emitted by PHP so headers, action rows and table structure
   cannot throw the alternation out of sequence. */

/* Main Clients table */
#clientTable tbody tr.client_row.cc-row-odd > td {
    background-color: #ffffff !important;
}
#clientTable tbody tr.client_row.cc-row-even > td {
    background-color: #eeeeee !important;
}

/* All user tables: Administration and Client Details */
.cc_usersTable tbody tr.cc-row-odd > td {
    background-color: #ffffff !important;
}
.cc_usersTable tbody tr.cc-row-even > td {
    background-color: #eeeeee !important;
}

/* Archived clients table */
.cc-archive-table tbody tr.cc-row-odd > td {
    background-color: #ffffff !important;
}
.cc-archive-table tbody tr.cc-row-even > td {
    background-color: #eeeeee !important;
}