:root{
    /* --main-theme-color:#075200;
    --button-color:#06B82F;
    --button-hover-color:#069026; */

    --main-theme-color:#4B216B;
    --button-color:#662D91;
    --button-hover-color:#331649;

    --custom-theme-color:#4B216B;
    --custom-button-color: #662D91;
    --custom-button-hover-color: #331649;
}

/* :root {
    --main-theme-color: #4B216B; 
    
    --button-color: #662D91; 
    
    --button-hover-color: #331649; 
} */

body {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Declare CSS */
.main-theme-color{
    background-color:var(--main-theme-color) !important; 
}
.main-theme-text-color{
    color:var(--main-theme-color) !important; 
}
.button-color{
   background-color:var(--button-color) !important; 
}
.button-color:hover{
    color:#fff !important;
    background-color:var(--button-hover-color) !important; 
}

.custom-button-color{
   background-color: var(--custom-button-color)!important; 
   border : 1px solid var(--custom-button-color)!important;
}
.custom-button-color:hover{
    color:#fff !important;
    background-color:var(--custom-button-hover-color) !important; 
    border: 1px solid var(--custom-button-hover-color)!important;
}

.input-default-to-select-padding{
    padding-block: 1px;
    padding-inline: 2px;
}

.border-1-black{
    border:1px solid #000;
}

.footer-bg-color{
    background-color:var(--main-theme-color) !important; 
}
.footer-bg-color strong{
    /* color:#b5b5b5 !important; */
}

.inline-flex-start-column-justify-mt{
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: justify;
    margin-top: 5px;
}

.inline-flex-center-column-gap-5{
    display: inline-flex !important;
    align-items: center !important;
    column-gap: 5px !important;
}

.container-customize-table-to-border table,
.container-customize-table-to-border table th,
.container-customize-table-to-border table td{
    border: 1px solid #000 !important;
}

.bold-input {
    font-weight: bold;
}

.dotted-underline-input{
    border: none !important; 
    border-bottom: 2px dotted #000 !important; 
    outline: none; 
}

.underline-input{
    border: none !important; 
    border-bottom: 1px solid #000 !important; 
    outline: none; 
}

.table-border thead tr{
    background-color:rgb(191,191,191) !important;
}
.table-border tbody tr:nth-child(odd){
    background-color:transparent !important;
}
.table-row-bg-gray{
    background-color:rgb(191,191,191) !important;
}
.table-no-border,
.table-no-border tr,
.table-no-border td{
    border:none !important;
}

.label-file{
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    font-weight: unset !important;
    cursor:pointer;
    margin-bottom:0;
}
.label-file:hover{
    color: #0056b3;
    text-decoration: none;
}
.label-file-disabled{
    font-weight: normal !important;
}
.display-file-name{
    font-weight:bold;
}

.unset-link{
    color: #000 !important;
    cursor: unset !important;
    text-decoration: none !important;
}

.col-flex-100{
    flex:100% !important;
}

/* .form-element[required]::placeholder {
    color: red; 
    font-weight: bold; 
} */

/* Iconify design (icons) */
/* .ph--circle-duotone {
    display: inline-block;
    width: 1.6rem;
    height: 1.3rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='%23000'%3E%3Cpath d='M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96' opacity='0.2'/%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
} */

/* BQ CLASS FS (name="title_style") */
.is-main-title-fs{
    font-weight:bold !important;
    text-decoration:underline !important;

}
.is-small-title-fs{
    font-weight:bold !important;
    text-decoration:underline !important;
    font-style: italic !important;
}

.bq-table thead th.longtext{
    min-width:250px;
}
.bq-table tbody td textarea,
.bq-table tbody td input{
    width:100%;
}

/* HTML */
body{
    overflow-x:hidden;
}

input[type="number"].hide-spin-btn::-webkit-outer-spin-button,
input[type="number"].hide-spin-btn::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].hide-spin-btn {
    -moz-appearance: textfield; /* For Firefox */
}


/* Select2 Customize */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: black !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
}

.select2-container--default .select2-results__group {
    background-color: #343a40; /* Darker background color */
    color: #fff; /* White text color */
    padding: 5px 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-selection--multiple:hover {
    border: 1px solid #ced4da !important; /* Change to desired border color */
}

/* Select2 Clear All Item */
.select2-container--default .select2-selection--multiple .select2-selection__clear{
    margin-right: 15px !important;
}

/* Select2 Drop Down Icon*/
.select2-selection--multiple .select2-selection__arrow{
    position: absolute;
    top: 50%;
    right: 3px;
    width: 20px;
}
.select2-selection--multiple .select2-selection__arrow b{
    position: absolute;
    top: 60%;
    left: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    margin-left: -4px;
    border-color: #343a40 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
}

/* Header */
.main-header.navbar{
    background-color: #fff !important;
}

/* Dashboard */
.dashboard-page .table-card{
    border-radius: unset;
    position: relative;
    overflow:hidden;
}

.dashboard-page .table-card .card-header{
    border-radius: unset;
    background-color: var(--main-theme-color);
    color: #fff;
    font-weight: 500;
    text-align: left;
    border-bottom:3px solid purple;
}

/* DataTable */
.dataTable .dropdown-toggle:hover,
.dataTable .btn-outline-secondary:not(:disabled):not(.disabled).active, 
.dataTable .btn-outline-secondary:not(:disabled):not(.disabled):active, 
.dataTable .show>.btn-outline-secondary.dropdown-toggle{
    background-color:var(--button-color) !important;
}

.dt-scroll-headInner{
    width:100% !important;
}

/* Styling for striped rows */
tbody tr:nth-child(odd):not(.table-default tr:nth-child(odd)) {
    background-color: #f2f2f2 !important;
}

tbody tr:hover:not(.table-default tr:hover) {
    background-color: #ddd !important;
}

tbody tr:nth-child(even):not(.table-default tr:nth-child(even)).active {
    background-color: #dbf4eb !important;
}

tbody tr:nth-child(odd):not(.table-default tr:nth-child(odd)).active {
    background-color: #dbf4eb !important;
}

tbody tr.active:hover:not(.table-default tr:hover) {
    background-color: #dbf4eb !important;
}

/* Action Show Form Field*/
.form-control:disabled, 
.form-control[readonly],
.action-show .form-group span.form-control,
.action-show .form-group textarea,
.action-show .form-group select.form-control,
.ck-read-only,
.select2-results__option[aria-disabled="true"],
.readonly-field[readonly]{
    background-color: #e9ecef !important;
}

.readonly-field[readonly]{
    border-color: rgba(118, 118, 118, 0.3);
}

.signature-cursor{
    cursor:url('/dist/img/cursors/patent-pen.png') 0 30, progress;
}

/* .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #39cccc !important;
    color: #ffffff !important;
} */

.bg-custom {
    background-color: #39cccc !important;
}

.textarea-control{
    width: 100%;
    padding: 4px 12px;
}
.textarea-control:disabled{
    width: 100%;
    padding: 4px 12px;
    background-color:white ;
}

.quantity-control::-webkit-outer-spin-button,
.quantity-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.openDigitalSignatureModal{
    background-color: #007bff !important;
    border-color: #007bff !important;
}
#digitalSignatureModal .modal-header,
#digitalSignatureModal .modal-footer{
    border:0 !important;
}
#digitalSignatureModal .signature_submit{
    background-color:#662D91;
    color:#fff;
}

#preview-signature{
    max-width: 100%; 
    aspect-ratio: 16 / 9; 
    object-fit: contain;
    border: 1px solid rgb(154,154,154);
    height:250px;
}

.digital-signature-box .sign-box{
    border:1px solid rgb(154,154,154);
    border-radius: .5rem;
    height:300px;
}
.digital-signature-box p{
    color:#333;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
}

.digital-signature-box p > b{
    color:#000;
    text-decoration:underline;
    cursor:pointer
}

button[type="submit"]{
    background-color:var(--button-color);
    border-color:var(--button-color);
}
button[type="submit"]:hover{
    background-color: var(--button-hover-color);
}

.bg-gray-button{
    background-color: rgb(229 231 235 / 1) !important;
}
.bg-gray-button:hover{
    background-color: #fff !important;
}

/* .ignore-submit-button-color button[type="submit"].dark\:bg-gray-200{
    background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}
.ignore-submit-button-color button[type="submit"].hover\:bg-gray-700:hover{
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
} */

.main-sidebar .sidebar{
    background-color:var(--main-theme-color);
}
.main-sidebar .sidebar a{
    color:#fff !important;
}
.user-panel a:hover{
    color:#fff !important;
}

.nav-item.menu-open>.nav-link{
    color: #fff !important;
    background-color: rgba(0, 0, 0, .1) !important;
}
.main-sidebar .sidebar nav a:hover{
    color:var(--main-theme-color) !important;
    background-color:#fff !important;
}
.main-sidebar .sidebar nav a.active{
    color:var(--main-theme-color) !important;
    background-color:#fff !important;
}

.nav-sidebar .nav-treeview{
    /* padding-left: 25px; */
}

.sidebar-mini .main-sidebar .nav-link{
    width: auto;
}

/* Display Project Status Btn */
.display-project-status-btn{
    position: fixed;
    right: 0;
    z-index: 100;
}
.display-project-status-btn .box{
    width: 25px;
    height: 500px;
    background-color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.display-project-status-btn .box:hover{
    background-color: #157045;
}
.display-project-status-btn i{
    font-size:22px;
    color:#fff;
}

/* Adjust Screen Size */
.adjust-section-size-box{
    border-radius: 0;
    box-shadow: unset !important;
}
.adjust-section-size-box .icon{
    cursor:pointer;
}

.border-radius-unset{
    border-radius:0 !important;
}

.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}


.document-editor__editable-container .ck-editor__editable {
    min-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}

.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.63em;
    padding-top: .5em;
    margin-bottom: 1.13em;
}

.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}

.uppercase{
    text-transform: uppercase;
}