/* Override large padding in form-control class from the template */
.bg-fsi {
    background-color: #00A65A !important;
}

.color-fsi {
    color: #00A65A !important;
}

.bg-disabled-input {
    background-color: #e8e6e6;
}

.form-control {
    padding-left: 12px !important;
}

/* Added custom classes to force indention in inputs */
.group-field {
    padding-left: 35px !important;
}

.indented-field {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* Added a custom style for small form control */
.form-control-sm:focus {
    color: #495057;
    background-color: #fff;
    border-color: #e293d3;
    outline: 0;
    box-shadow: 0 0 0 2px #e9aede;
}

.form-control-sm {
    display: block;
    width: 100%;
    padding: 0.2rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    background-clip: padding-box;
    border: 1px solid #d2d6da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border-radius: 0.5rem;
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

/* Added custom classes and override existing style of bootstrap-select */
.unindented-select {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

div.dropdown-menu > div.inner {
    overflow-y: auto !important;
    /* for old version of bootstrap-select */
    overflow-x: hidden !important;
}

div.dropdown-menu, div.dropdown-menu > div.inner {
    min-height: 77px !important; 
}

div.bootstrap-select > button.dropdown-toggle:hover {
    transform: scale(1);
}

div.bootstrap-select > button.dropdown-toggle:focus {
    border-color: #e293d3 !important;
    box-shadow: 0 0 0 2px #e293d3 !important;
    outline: 0px !important;
    outline-offset: 0px !important;
}

div.bootstrap-select > button.dropdown-toggle {
    text-transform: none !important;
    box-shadow: none !important;
    border: 1px solid #d2d6da  !important;
    background-color: #fff !important;
    color: #495057 !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
    font-size: 0.875rem !important;
    padding: 8px 18px 8px 12px !important;
    margin-bottom: 0px;
}

div.bootstrap-select > .dropdown-menu {
    padding: 4px 0px 4px 0px !important;
}

div.bootstrap-select > button.dropdown-toggle::after {
    color: #495057 !important;
    font-weight: 1 !important;
    line-height: 1.4rem !important;
}

div.bootstrap-select > button.select-focus {
    border-color: #e293d3 !important;
    box-shadow: 0 0 0 2px #e293d3 !important;
}

/* Updated bootstrap confirm delete modal */
div.modal-danger {
    background-color: #ea0606;
} 

/* Updated bootstrap confirm password modal */
div.modal-secondary {
    background-color: #6c757d;
} 

/* Added custom container for confirm password view */
#confirm-password-container {
    border: 3px solid;
}

/* Added custom border class for card */
div.card-border-1 {
    border-width: 1px !important;
}

/* Added custom size with indention for input spinner */
.spinner-input {
    width: 0.7rem; 
    height: 0.7rem;
    margin-left: 4px;
}

/* Added custom css for native select option */
.form-option {
    font-size: 16px;
}

/* Added custom margin top for input remove button */
/* .del-contact-btn {
    margin-top: 33px !important;
} */

/* Override existing style of select2 */
.select2-selection__rendered, .select2--small, .select2-selection__choice {
    color: #495057 !important;
    font-weight: 400 !important;
    line-height: 1.4rem !important;
    font-size: 0.875rem !important;
}

.select2-selection {
    border-radius: 0.5rem !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    height: 40.4px !important;
}

/* Added custom css for datatable */
th.sorting::before, th.sorting::after, th.sorting_disabled::before, th.sorting_disabled::after {
    content: none !important;
}

/* Added custom css for clickable row in datatable */
.clickable-row:hover {
    background-color: #ebebeb;
    cursor: pointer;
}

/* Added a custom height for area table container */
.area-table-container {
    max-height: 535px;
}

/* Added custom min width to courier assignment table column */
.barcode-col, .sequence-col {
    min-width: 25px !important;
}

.action-col {
    min-width: 15px !important;
}

.other-col {
    min-width: 50px !important;
}

table.modal-table > thead > tr, table.modal-table > tbody > tr {
    font-size: 14px !important;
}

table.main-datatable {
    width: 100% !important;
}

/* Modify datatable checkbox */
.datatable-checkbox {
    border: 1px solid #565466 !important;
}

/* Added custom style for courier assignment elements */
.assignment-info-section {
    min-height: 80px; 
    max-height: 80px;
}

#searchType {
    border-top-right-radius: 0 !important; 
    border-bottom-right-radius: 0 !important;
}

#searchKeyword {
    border-top-left-radius: 0 !important; 
    border-bottom-left-radius: 0 !important;
}

.field-label-sm {
    width: 130px;
}

.field-label-sm > label {
    font-size: 13px;
}

/* Custom style for clickable offcanvas button */
.offcanvas-button {
    border-radius: 0;
    border-right: 0;
}

.offcanvas-field-label {
    font-size: 14px;
}

.offcanvas-field-value {
    font-size: 13px;
}

/* Custom style for selection modal */
#selectionModal {
    z-index: 1051;
}

/* Custom style for error modal */
#errorModal > .modal-dialog > .modal-content > .modal-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

#errorModal > .modal-dialog > .modal-content > .modal-body {
    font-size: 14px; 
    font-style: italic; 
    padding-top: 14px; 
    padding-bottom: 14px;
}

#errorModal > .modal-dialog > .modal-content > .modal-header > p.modal-title {
    font-size: 15px; 
    font-weight: bold;
}

/* Custom style for success modal */
#successModal > .modal-dialog > .modal-content > .modal-header {
    padding-top: 15px;
    padding-bottom: 15px;
}

#successModal > .modal-dialog > .modal-content > .modal-body {
    font-size: 14px; 
    font-style: italic; 
    padding-top: 14px; 
    padding-bottom: 14px;
}

#successModal > .modal-dialog > .modal-content > .modal-header > p.modal-title {
    font-size: 15px; 
    font-weight: bold;
}

/* Added a custom css for display text */
.display-text-label {
    font-size: 12px;
    font-weight: bold;
}

.display-text-value {
    font-size: 12px;
    font-weight: normal;
}

/* Added a custom style for dm-uploader */
div.dm-uploader {
    border-style: dashed !important;
    background-color: #f1f1f1;
}

div.dm-uploader.active {
    background-color: #e4e4e4;
    border-color: #8b8b8b !important;
}

.uploader-file-card, .uploader-file-card > div {
    background-color: #f7f7f7;
}

.uploader-log-card, .uploader-log-card > ul > li {
    background-color: #fcfcfc; 
}

/* Added a custom style for virtual-select fields */
.virtual-dropdown {
    padding-left: 0px;
    padding-right: 0px;
    min-width: 100%;
}

.virtual-dropdown > div {
    color: #495057 !important;
    height: 41px;
    border: 1px solid #d2d6da;
    border-radius: 0.60rem;
}

.virtual-dropdown > div.focused {
    outline: 0;
    border-color: #e293d3;
    box-shadow: 0 0 0 2px #e9aede;
}

.virtual-dropdown > div:focus {
    outline: 0;
    border-color: #e293d3;
    box-shadow: 0 0 0 2px #e9aede;
}

.vscomp-toggle-button {
    border: 0 !important;
    box-shadow: none !important;
}

.vscomp-toggle-button {
    border-radius: 8px;
}

.vscomp-option.focused {
    box-shadow: none;
}

.pop-comp-wrapper {
    color: #495057 !important;
}

.virtual-dropdown-sm > div {
    height: 32px !important;
}

.virtual-dropdown-sm > .vscomp-ele-wrapper > .vscomp-toggle-button {
    height: 30px !important;
}

/* custom css for batch number table */
.batch-item:hover, .batch-item.active {
    background-color: #00A65A;
    color: white;
    cursor: pointer;
}

/* custom css for clickable tooltip */
.action-tooltip:hover {
    color: #4D5C76 !important;
    cursor: pointer;
}

/* autocomplete on search module */ 
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items, .global-div {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
}
  
/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}
  
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}

.autocomplete-items .nav-link .icon svg .color-background {
    fill: #3A416F;
}

.global-div {
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
    padding: 10px;
}

.input-group .form-input-middle {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-right: 0.5rem !important;
}

.field-div {
    border: 1px solid #c6c7c8;
    position: relative;
    padding: 10px;
    font-size: 13px;
}

.legend {
    position: absolute;
    top: -12px;
    left: 12px;
    padding: 0px 5px;
    background-color: white;
}

/* image classes for different image preview mode in validation */
.normal-img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}

.stretched-img {
    max-height: 100%;
    max-width: 100%;
}

.first-zoom-img {
    height: 750px;
    width: auto;
}

.second-zoom-img {
    height: 1000px;
    width: auto;
}

.third-zoom-img {
    height: 1250px;
    width: auto;
}

/* payout table custom css */
table.payout-table td {
    font-size: 13px !important;
}

table.payout-table th {
    font-size: 14px !important;
}

/* custom css for basic table */
table.table-basic th, table.table-basic td {
    border: 2px solid #A7A7A7;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.table-basic td {
    font-size: 14px;
}

table.table-basic th {
    font-size: 15px;
}

/* custom css for search accoun link */
.search-img-link {
    color: #3237c7;
}

.search-img-link:hover {
    color: #151870;
}

/* image gallery using lightbox custom css */
.img-gallery-item {
    border:1px solid #545454;
}

.img-gallery-item img {
    max-height: 250px;
    object-fit: cover;
}

.img-gallery-item img:hover {
    opacity: 0.5;
}

/* rts image using lightbox custom css */
.rts-img {
    border:1px solid #545454;
}

.rts-img img {
    max-height: 750px;
}

.rts-img img:hover {
    opacity: 0.5;
}

/* custom fsi border and btn */
.border-fsi {
    border-color: #00A65A !important;
}

.btn-fsi {
    background-color: #00A65A !important;
}

/* custom visible input border */
.custom-input-border {
    border-color: #A7A7A7;
    border-width: 2px;
}