* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

#shadow-host-companion {
    display: none;
}

#loom-companion-mv3 {
    display: none;
}

:root {
    --clr-primary-gold: #ffd700;
    --clr-primary-light-gold: #fffabf;
    --clr-bg: #e8f0f4;
    --clr-text-color-black: #2d364a;
    --clr-light: white;
    --clr-text-color-grey: #aebac8;
}


th {
    font-weight: bold;
}


/* directors */
/* users registration */
.users_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    color: var(--clr-text-color-black);
}

.users_container h1 {
    font-size: 1.5rem;
}

.users_container .users_form {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.users_container .users_form input,
.users_container .users_form select {
    border: 1px solid var(--clr-text-color-grey);

}

.users_container .users_list {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.users_container .users_list table {
    overflow: scroll;
}

@media screen and (max-width: 1080px) {
    .users_container {
        flex-direction: column;

    }

    .users_container .users_form {
        flex: 100%;
    }

    .users_container .users_list {
        flex: 100%;

    }
}

/* kifwa application */
.kifwa_application_container {
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    color: var(--clr-text-color-black);
}

.kifwa_application_container h1 {
    font-size: 1.5rem;
}

.kifwa_application_container p {
    text-align: center;
}

.kifwa_application_form input,
.kifwa_application_form textarea,
.kifwa_application_form select {
    border: 1px solid var(--clr-text-color-grey);
}

.kifwa_application_form label {
    padding-bottom: .5rem;
}

.kifwa_application_form a,
.kifwa_movement_form a {
    padding: 10px;
    border: 1px solid var(--clr-text-color-grey);
    color: var(--clr-text-color-black);
    text-decoration: none;
}

.kifwa_application_form a:hover,
.kifwa_movement_form a:hover {
    background-color: var(--clr-text-color-black);
    color: white;
    border: none;
}

.kifwa_application_container table {
    overflow: scroll;
}

/* Kifwa movement pass */
.kifwa_movement_container {
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    color: var(--clr-text-color-black);
}

.kifwa_movement_form input,
.kifwa_movement_form select {
    border: 1px solid var(--clr-text-color-grey);

}

#signature-pad,
#officials_signature_canvas,
#chairmans_signature_canvas,
#director_signature_canvas {
    border: 1px solid var(--clr-text-color-grey);
    background-color: #fff;
}

/* shipping */
/* operations */
.s_operations_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.s_operations_container h2 {
    font-size: 1.5rem;
}

.s_operations_container .s_operations_DO {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.s_operations_container .s_operations_DO p a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--clr-text-color-black);
}

.s_operations_container .s_operations_DO p a:hover {
    color: rgb(0, 0, 247);
}

.s_operations_container .s_operations_DO input,
.s_operations_container .s_operations_DO select {
    border: 1px solid var(--clr-text-color-grey);
}

.s_operations_container .s_operations_new_file {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.s_operations_container .s_operations_new_file input {
    border: 1px solid var(--clr-text-color-grey);
}

.table-responsive {
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    height: 50vh;
    overflow: scroll;
    padding: 1rem;

}



@media screen and (max-width: 1080px) {
    .s_operations_container {
        flex-direction: column;
    }


}

/* documents */
.do_table_container {
    display: flex;
    flex-direction: row;
}

.do_table_container .do_table_heading {
    flex: 50%;
}

.do_table_container .do_table_search {
    flex: 50%;
}

.do_table_container .do_table_search input {
    border: 1px solid var(--clr-text-color-grey);
}

@media screen and (max-width: 1080px) {
    .do_table_container {
        flex-direction: column;
    }

    .do_table_container .do_table_heading {
        flex: 100%;
    }

    .do_table_container .do_table_search {
        flex: 100%;
    }
}

/* s-accounts */
.s_accounts_container {
    display: flex;
    flex-direction: row;
    gap: 30px;

}

.s_accounts_container .s_accounts_form {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
}

.s_accounts_container .s_accounts_form input {
    border: 1px solid var(--clr-text-color-grey);

}

.s_accounts_container .s_accounts_data {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow: scroll;
}

.accounts_file_closure_container {
    display: flex;
    flex-direction: row;
    gap: 30px;

}

.accounts_file_closure_container .accounts_search {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.accounts_file_closure_container .accounts_search .accounts_search_container {
    display: flex;
    flex-direction: row;
}

.accounts_file_closure_container .accounts_search .accounts_search_container .search_form {
    text-align: left;
    flex: 100%;
}

.accounts_file_closure_container .accounts_search .accounts_search_container .search_form input {
    border: 1px solid var(--clr-text-color-grey);

}

.accounts_file_closure_container .accounts_search .a_accounts_container {
    height: 50vh;
    overflow: scroll;
}

.accounts_file_closure_container .accounts_search .a_accounts_container table {
    height: 50vh;
    overflow: scroll;
}

.accounts_file_closure_container .accounts_file_closure {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
}

.accounts_file_closure_container .accounts_file_closure input {
    border: 1px solid var(--clr-text-color-grey);

}

@media only screen and (max-width : 1024px) {

    /* specific CSS for IPad*/
    .s_accounts_container {
        flex-direction: column;
    }

    .s_accounts_container .s_accounts_data {
        height: 10vh;
        overflow: auto;
    }

    .accounts_file_closure_container {
        flex-direction: column;
    }



}

/* Declartion */
/* entry upload */
.d_upload_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.d_upload_container .d_upload_form {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
}

.d_upload_container .d_upload_form input {
    border: 1px solid var(--clr-text-color-grey);
}

.d_upload_container .d_upload_form textarea {
    border: 1px solid var(--clr-text-color-grey);
}

.d_upload_container .d_upload_data {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 70vh;
    overflow: scroll;
}

@media only screen and (max-width : 1024px) {
    .d_upload_container {
        flex-direction: column;
    }
}

/* field */
/* operations */
.f_operation_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.f_operation_container .f_operations_form {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;

}

.f_operation_container .f_operations_data {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow: scroll;

}

.f_operation_container .f_operations_form input {
    border: 1px solid var(--clr-text-color-grey);
}

.f_operation_container .f_operations_form select {
    border: 1px solid var(--clr-text-color-grey);
}

@media only screen and (max-width : 1024px) {
    .f_operation_container {
        flex-direction: column;
    }

    .f_operation_container .f_operations_data {
        height: 50vh;
        overflow: scroll;
    }
}

/* Operations */
/* jobs */
.o_jobs_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.o_jobs_container .o_jobs_assign {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow: scroll;
}

.o_jobs_container .o_jobs_data {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow: scroll;
}

/* accounts */
.o_accounts_container {
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow: scroll;
}

.o_accounts_container table {
    height: 50vh;
    overflow: scroll;
}

.search_container {
    display: flex;
    flex-direction: row;
}

.search_container .search_form {
    flex: 50%;
    text-align: right;
}

.search_container .search_form input {
    border: 1px solid var(--clr-text-color-grey);

}

/* Accounting */
/* invoicing */

.logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.logo-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #f8f9fa;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    text-align: center;
    width: 200px;
}

.icon {
    font-size: 24px;
    margin-right: 10px;
}

.logo-preview-text {
    font-size: 16px;
    color: #333;
}

#logo {
    display: none;
}

#logoPreview {
    margin-top: 10px;
}


.i-main h2 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.i-main .i-btn {
    float: right;
}

.i-invoice {
    background: white;
    border-radius: 20px;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;

}
.i-invoice .i-taxes{
    display: flex;
    flex-direction: row;
    gap: 20px;

}
.i-invoice .i-taxes .i-comments{
    flex: 70%;
    
}
.i-invoice .i-taxes .i-comments textarea{
    width: 50%;
    border: 1px solid var(--clr-text-color-grey);


}
.i-invoice .i-taxes .i-taxed{
    flex: 30%;  
    
}

.i-invoice .i-head input {
    border: 1px solid var(--clr-text-color-grey);
    width: 50%;
}
.i-invoice .i-address input {
    border: 1px solid var(--clr-text-color-grey);
    width: 36%;
}

.i-invoice .i-items input {
    border: 1px solid var(--clr-text-color-grey);
    width: 100%;
    border-radius: 5px;
    padding: 5px;
}

.i-invoice .i-items tfoot input {
    border: 1px solid var(--clr-text-color-grey);
    width: 30%;
    border-radius: 5px;
    padding: 5px;
}

.i-header {
    display: flex;
    flex-direction: row;
    padding: 1rem;
}

.i-header .i-address {
    flex: 70%;
}

.i-header .i-label {
    flex: 30%;
}

.i-header .i-label h1 {
    font-size: 5rem;
}

.i-head {
    display: flex;
    flex-direction: row;
    padding: 1rem;
}

.i-head .i-bill {
    flex: 50%;
}

.i-head .i-number {
    flex: 50%;
}

.i-head .i-number label:nth-of-type(2) {
    padding-left: 3.8rem;
}

.i-head .i-number label:nth-of-type(4) {
    padding-left: 3rem;
}

.i-head .i-number label:nth-of-type(6) {
    padding-left: 4.5rem;
}

.i-head .i-number label:nth-of-type(4),
.i-head .i-number label:nth-of-type(6) {
    padding-top: 1rem;
}

.i-items {
    padding: 1rem;
}

.i-items thead tr {
    background-color: black;
    color: white;
}

.i-total {
    width: 50%;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: 0;
    padding-bottom: 2rem;
}

.i-total .i-labels {
    flex: 50%;
}

.i-total .i-subtotal {
    flex: 60%;
}

.i-payment {
    text-align: center;
    padding-bottom: 2rem;
}


.button_div_print {
    text-align: right;
}

/* responsivenes */
@media screen and (max-width: 800px) {
    .i-main {
        zoom: 60%;
    }

    .i-invoice {
        margin-right: -2rem;
    }

    .i-header .i-label h1 {
        font-size: 3rem;
    }

}

/* rent */
.rent_container {
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
}

.rent_container input {
    border: 1px solid var(--clr-text-color-grey);

}


/* dashboards */
.dashboard_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Responsive layout */
@media (max-width: 1024px) {
    .dashboard_cards {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for medium screens */
    }
}

@media (max-width: 768px) {
    .dashboard_cards {
        grid-template-columns: 1fr;
        /* 1 column for small screens */
    }
}

.dashboard_cards .card {
    background-color: var(--clr-text-color-white);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    text-align: center;

}

.dashboard_tables_container {
    background-color: var(--clr-text-color-white);
    border-radius: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* Changed from 'right' to 'flex-start' for proper alignment */
}

/* Responsive layout for dashboard tables container */
@media (max-width: 1024px) {
    .dashboard_tables_container {
        flex-direction: column;
        /* Stack items vertically on medium screens */
    }
}

.dashboard_list {
    display: flex;
    gap: 30px;
    flex-direction: column;
    width: 75%;
}

/* Responsive layout for dashboard list */
@media (max-width: 768px) {
    .dashboard_list {
        width: 100%;
        /* Full width on small screens */
    }
}

.dashboard_list .dashboard_entry_list,
.dashboard_list .dashboard_file_list {
    border: 1px solid var(--clr-text-color-grey);
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    flex: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    height: 30vh;
    overflow-y: scroll;
}

/* Responsive layout for dashboard entry and file lists */
@media (max-width: 768px) {

    .dashboard_list .dashboard_entry_list,
    .dashboard_list .dashboard_file_list {
        height: auto;
        /* Allow height to adjust based on content */
    }
}

.dashboard_profile {
    border: 1px solid var(--clr-text-color-grey);
    width: 25%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    border-radius: 0.5rem;
    height: 70vh;
}

/* Responsive layout for dashboard profile */
@media (max-width: 1024px) {
    .dashboard_profile {
        width: 100%;
        /* Full width on medium screens */
        height: auto;
        /* Allow height to adjust based on content */
    }
}

.dashboard_profile .card {
    border: none;
}

/* profile */
.profile-container {
    display: flex;
    flex-direction: row;
}

.profile-heading {
    flex: 30%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    border-radius: 10px;
    margin: 10px;
    padding: 1rem;
}

.profile-heading h2 {
    font-size: 1rem;
}

.profile-heading p {
    font-size: .8rem;
    color: grey;
}

.profile-form {
    flex: 70%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    border-radius: 10px;
    margin: 10px;
    padding: 1rem;

}


.profile-form input {
    border: none;
    border: 1px solid var(--clr-text-color-grey);
    border-radius: 0;
    color: var(--clr-text-color-black);
}

.profile-form .save_button {
    text-align: right;
}

.profile-form input:focus {
    outline: none;
}

/* admin clearing agents */

.clearing_container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    color: var(--clr-text-color-black);
}

.clearing_container h1 {
    font-size: 1.5rem;
}

.clearing_container .block_list {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow-y: scroll;

}

.clearing_container .unblock_list {
    flex: 50%;
    box-shadow: var(--clr-text-color-black) 0px 3px 8px;
    padding: 1rem;
    height: 50vh;
    overflow-y: scroll;

}

@media screen and (max-width: 1080px) {
    .clearing_container {
        flex-direction: column;

    }

    .clearing_container .block_list {
        flex: 100%;
    }

    .clearing_container .unblock_list {
        flex: 100%;

    }
}