/*******************************************************************************************************************************************************************
Title : CSS Style Library required for all Web Applications of MLF.
Version : 0.64
Changes ************************************************************************************************************************************************************
2025-03-10 : Rohit Jangid (RJ). Modified.
2023-03-01 : Rohit Jangid (RJ). Created.
********************************************************************************************************************************************************************/
/* Custom Style Variables : Must start with double dash */
:root { /* Available to html root element */
    --mlf-border-radius: 0.7rem !important;
    --mlf-border-line: 0.1rem solid #d3d3d3 !important;
}

/********************************************************************************************************************************************************************/
/* Background Colors */

.bg-darkgray { background-color: #a3a3a3 !important; } 
.bg-lightgray { background-color: #f3f3f3 !important; } 
.bg-verylightgray { background-color: #fafafa !important; }
.bg-darkblue { background-color: #033572 !important; }
.bg-lightblue { background-color: #09c0cf !important; }
.bg-verylightblue { background-color: #e6f0fc !important; }
.bg-flashblue { background-color: #9de6ed !important; }
.bg-cream { background-color: #F2EDCF !important; }
.bg-lightgreen { background-color: #25b525 !important; }
.bg-black { background-color: #000000 !important; }
.bg-white { background-color: #ffffff !important; }

/********************************************************************************************************************************************************************/
/* Foreground,Text Colors */

.c-red { color: #ff0000 !important; }
.c-orange { color: #FDB93A !important; }
.c-darkblue { color: #0451ae !important; }
.c-lightblue { color: #09c0cf !important; }
.c-blue { color: #0000FF !important; }
.c-glowblue { color: #09c0d0 !important; }
.c-darkcyan { color: #50abbe !important; }
.c-white { color: #ffffff !important; }
.c-black { color: #000000 !important; }

/********************************************************************************************************************************************************************/
/* Page */

body {
    font-size: 0.9rem;
    user-select: none;
    background-image: url("./images/body-bg.jpg");
    background-position: top bottom;
    background-repeat: repeat-x;
    background-color: #175d9e;
}

.page-subtitle {
    color: #0451ae;
    font-size: 1.25rem;
}

/********************************************************************************************************************************************************************/
/* Element Alignment */

.float-left { float: left; }
.float-right { float: right !important; }

/********************************************************************************************************************************************************************/
/* Text Alignment */

.text-right { text-align: right !important }
.text-center { text-align: center; }

/********************************************************************************************************************************************************************/
/* Fonts */

.bold { font-weight: bold; }

/********************************************************************************************************************************************************************/
/* Page Sections */

main {
    display: none;
    margin-top: 6rem;
}

.main-container {    
    margin-bottom: 0.25rem;
    padding: 1.75rem 2.5rem 1rem 2.5rem;
    border-radius: 0.7rem;
    background: #f2edcf;
}

.row-container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.7rem;
    background: #ffffff;
    box-shadow: 0.1rem 0.1rem 0.35rem #999;
}

/********************************************************************************************************************************************************************/
/* Buttons */

.btn-default { /* Customise Bootstrap Class */
    color: #ffffff;
    background-color: #09c0cf;
    border-radius: 0.7rem;
    margin-top: 0.05rem;
    padding: .45rem 1rem;
    border: 0rem;
}

.btn-gray {
    color: #000000;
    background-color: #f3f3f3;
    border-radius: 0.7rem;
    margin-top: 0.05rem;
    padding: .4rem 1rem;
    border: 0.1rem solid #dee2e6;
}

.btn-inline {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    border: 0rem;
    width: 1.75rem;
    height: 1.75rem;
    background: #11959f;
    cursor: pointer;
    border-radius: 50%;
}

.btn-table { /* Button shown inside table cell */
    color: #ffffff;
    background-color: #09c0cf;
    border-radius: 0.7rem;    
    padding: 0.15rem 0.35rem;
    border: 0rem;
}

/********************************************************************************************************************************************************************/
/* Labels */

.label-info {
    border-radius: 1.5rem;
    margin-top: 0.05rem;
    padding: 0.45rem 1rem;
    background-color: #f3f3f3;
    color: #505050;
    font-weight: bold;
    float: left;
}

span:empty.label-info {
    height: 2.2rem;
    width: 2.2rem;
}

.label-white-brown {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    border-radius: 0.35rem;
    background: maroon;
    padding: 0.25rem 0.5rem;
}

.label-append {
    width: 100%;
    background-color: #f3f3f3;
    border-top-right-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
    margin-top: 0.05rem;
    margin-left: -0.7rem;
    padding: 0.55rem 0.5rem 0.4rem 0.5rem;
    height: 2.4rem;
}

/********************************************************************************************************************************************************************/
/* Form Input Elements */

.form-control { /* Customise Bootstrap Class */
    padding: 0.30rem 0.75rem;
    background: #faf8ec;
}

.form-select { /* Customise Bootstrap Class */
    padding: 0.30rem 0.75rem;
    background-color: #faf8ec;
}

.form-check-input { /* Customise Bootstrap Class */
    margin-right: 0.25rem;
    width: 1.0rem;
    height: 1.0rem;
    margin-top: 0.2rem;
}

.form-check-input::after {
    content:  "-";
    position: relative;
    left: 0.87rem;
    top: -0.35rem;
    color: #a3a3a3 !important;
}

td input[type="checkbox"].form-check-input::after,
td input[type="radio"].form-check-input::after,
.line-off.form-check-input::after {
    color: transparent !important;
}

input[type="date"][value=""][disabled] { /* Hide placeholder 'mm/dd/yyyy' in empty dates if disabled */
    color: transparent;
}

/* Hide date placeholder mm/dd/yyyy if not in focus */
input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit-month-field,
input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit-day-field,
input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit-year-field,
input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit-text {
    color: transparent;
}

/********************************************************************************************************************************************************************/
/* Groupboxes */

.fields-group {
    border: 0.1rem solid #d3d3d3;
    margin-top: 0.05rem;
    padding: 0.4rem;
    border-radius: var(--mlf-border-radius);
    text-align: center;
    background: #fafafa;
}

.custom-group {
    border: 0.1rem solid #d3d3d3;
    margin-top: 0.05rem;
    padding: 0.4rem;
    border-radius: var(--mlf-border-radius);    
    background: #fafafa;
}

.custom-group .custom-group { /* Create a group inside a group */
    background: #efefef !important;
}

/********************************************************************************************************************************************************************/
/* Tables */

.table-container {
    background-color: #fafafa;
    border-bottom: var(--mlf-border-line);
    padding: 0 0.25rem 0 0.25rem; /* To remove horizontal scrollbar when table fully fits container */
}

table {    
    width: stretch !important;
}

table, th, td {
    border-color: #808080 !important;
    border: 0.1rem solid;
    font-size: 0.8rem;
}

thead, th {
    background-color: #033572 !important;
    color: #fff !important;
}

th, td {
    text-wrap: nowrap;
}

td input[type="date"] {
    width: 6.5rem;  
}

td input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0rem;
}

td input[type="checkbox"][disabled][checked] {
    filter: invert(100%) hue-rotate(18deg) brightness(5);
}

td input[type="checkbox"][disabled] {
    filter: brightness(5);
}

td input[disabled] {
    background: transparent;
    border: 0rem;
    pointer-events: none; /* Mouse events doesn't call element's or its parent's handler for disabled elements. This fixes issue and calls parent's event handler */
}

tr.row-selected td {
    background-color: rgba(210, 244, 234, 0.8) !important;
}

@supports (-moz-appearance:none) { /* Styles only for Mozilla Firefox Browser */
    td input[type="date"] {
        width: 7.7rem;
    }
}

/********************************************************************************************************************************************************************/
/* Popups */

.popup-container {
    /* Do not change margin - popup may extend outside screen and will be unreachable */
}

.popup-close {
    background: transparent;
    border: 0rem;
    color: #fff;
    float: right !important;
}

.popup-container .modal-header { /* Customise Bootstrap Class modal-header */
    padding: 0.3rem 1rem;
    background-color: #09c0cf !important;
    display: inline !important;
}

.popup-container .modal-title { /* Customise Bootstrap Class modal-title */
    color: #fff !important;
    font-weight: bold;
    font-size: 1rem;
    float: left !important;
    padding-top: 0.25rem !important;
}

.popup-container .modal-body { /* Customise Bootstrap Class modal-body */
}

.popup-container .modal-footer { /* Customise Bootstrap Class modal-footer */
    padding: 0.3rem 1rem;
    background-color: #f2edcf !important;
}

/********************************************************************************************************************************************************************/
/* Borders */

.border { border: var(--mlf-border-line); }
.border-top { border-top: var(--mlf-border-line); }
.border-bottom { border-bottom: var(--mlf-border-line); }
.border-left { border-left: var(--mlf-border-line); }
.border-right { border-right: var(--mlf-border-line); }
.border-round { border-radius: var(--mlf-border-radius); border: var(--mlf-border-line); }
.border-bottom-round { border-bottom-left-radius: var(--mlf-border-radius); border-bottom-right-radius: var(--mlf-border-radius); border: var(--mlf-border-line); }
.border-top-round { border-top-right-radius: var(--mlf-border-radius); border-top-left-radius: var(--mlf-border-radius); border: var(--mlf-border-line); }
.border-left-round { border-bottom-left-radius: var(--mlf-border-radius); border-top-left-radius: var(--mlf-border-radius); border: var(--mlf-border-line); }
.border-right-round { border-top-right-radius: var(--mlf-border-radius); border-bottom-right-radius: var(--mlf-border-radius); border: var(--mlf-border-line); }

/********************************************************************************************************************************************************************
** DO NOT USE BELOW STYLE CLASSES : Kept here only for BACKWARD COMPATIBILITY. Please use above style classes instead. **
********************************************************************************************************************************************************************/
.transbg { background-image: url("./images/body-bg.jpg"); background-position: top bottom; background-repeat: repeat-x; background-color: #175d9e; }
.bg90d4e2 { background: #90d4e2; } 
.bgf4f3f3 { background: #f4f3f3; } 
.bg033572 { background: #033572; }
.bg50ABBE { background: #09c0cf; } 
.bge6f0fc { background: #e6f0fc; }
.bg9de6ed { background: #9de6ed; } 
.bg09c0d0 { background: #09c0d0; } 
.bgF2EDCF { background: #F2EDCF; } 
.bgF6D01C { background: #F6D01C; } 
.bgFDB93A { background: #FDB93A; }
.bg000000 { background: #000000; } 
.cFDB93A { color: #FDB93A; }
.c173F78 { color: #033572; } 
.c50ABBE { color: #09c0cf; } 
.c09c0d0 { color: #09c0d0; } 
.border-bottom-033572 { border-bottom: solid 1px #999; } 
.border-bottom-000000-1 { border-bottom: solid 1px #000000; } 
.border-radius-25 { border-radius: 25px; } 
.border-radius-12 { border-radius: 12px; } 
.custom-pagination .page-link { color: #6c757d; } 
.search-btn { position: absolute; top: 0.35rem; right: 0.5rem; border: 0rem; width: 1.8rem; background: #11959f; cursor: pointer; border-radius: 50%; }
.border-5 { border-radius: 5px 5px 0px 0px; } 
.searchsubtop { border: solid 1px #FFFFFF; width: 100%; position: relative; z-index: 1; display: inline-block; border-radius: 10px; padding-left: 10px; background: #FFFFFF }
.searchsubtop .form-control { border: 0px solid #fff; border-radius: 25px; padding: .375rem .75rem .375rem 0rem; background: #FFFFFF; }
.searchsubtop .form-control:hover, .searchsubtop .form-control:focus { border: 0px solid #fff; } 
.searchsubtop .form-control::placeholder { font-style: normal; } 
.dark-border { border: 0.15rem #033572 solid; }  
.light-border { border: 0.15rem #50abbe solid; } 
.txt-cen { text-align: center; } 
.finger-bg { background-image: url("../img/finger-print.png"); background-position: left bottom; background-repeat: no-repeat; }
.login-bg { background-image: url("../img/login-bg.png"); background-position: left; background-repeat: repeat-y; border-radius: 20px; }
.btn-login { color: #fff; border-color: #093e79; border-radius: 0.7rem; padding: .50rem 1.0rem; border: 0rem; }
.btn-loginb { color: #fff; border-color: #093e79; border-radius: 0.7rem; padding: .50rem 1.0rem; border: 0rem; }
.btn-reset { color: #fff; background-color: #b5b1b1; border-radius: 0.7rem; padding: .50rem 1.0rem; border: 0rem; }
.btn-icon { color: #fff; background-color: #bbb; border-radius: 0.7rem; padding: .35rem 1.0rem; border: 0rem; }
.searchsub { border: solid 1px #d3d3d3; width: 100%; position: relative; z-index: 1; display: inline-block; border-radius: 0.6rem; background: #F2EDCF }
.searchsub .form-control { border: 0px solid #fff; border-radius: 0.6rem; padding: .375rem .75rem .375rem 0.714rem; background: #F2EDCF; }
.searchsub .form-control:hover, .searchsub .form-control:focus { border: 0px solid #fff; }
.searchsub .form-control::placeholder { font-style: normal; }
.border-bottom-darkgray { border-bottom: solid 1px #999; }
.border-radius { border-radius: var(--mlf-border-radius); }
.border-bottom-radius { border-bottom-left-radius: var(--mlf-border-radius); border-bottom-right-radius: var(--mlf-border-radius); }
.border-top-radius { border-top-right-radius: var(--mlf-border-radius); border-top-left-radius: var(--mlf-border-radius); }
.border-left-radius { border-bottom-left-radius: var(--mlf-border-radius); border-top-left-radius: var(--mlf-border-radius); }
.border-right-radius { border-top-right-radius: var(--mlf-border-radius); border-bottom-right-radius: var(--mlf-border-radius); }
.content-container { margin-bottom: 0.25rem; padding: 2rem 2.5rem 1rem 2.5rem; border-radius: 0.7rem; background: #f2edcf; }
.content-row { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.7rem; background: #ffffff; box-shadow: 0.1rem 0.1rem 0.35rem #999; }
/********************************************************************************************************************************************************************/