/* 
2025-02-23 RMcQ
Elements used on html forms (on several pages: adds, edits, lists. etc.).

*/

/* 2023-12-01: START form/field layout styles: */

/*

2023-12-07 RMcQ
THESE WERE ALL TAKEN FROM EditProject.cshtml, 
which originally came from CTFA Study (?) but were then modified.

Clean all this up:

*/

    /* 
    mqc-field-table is used to place two or more fields side-by-side:
    The spacer (separating) column should be 2% wide 
    See the CorpPageModel.FieldTable...() rendering methods.
    */

    .mqc-field-table { 
        padding:0; 
        margin:0; 
/*      border: 2px solid green; */
    }
    .mqc-field-table .mqc-td-field { 
        width:fit-content;
/*      border: 1px solid red; */
        padding:0;
        margin:0;
    }
    .mqc-field-table .mqc-td-spacer { 
    }


    div.form-group {
        border: 0px solid darkgray;
/*      overflow: hidden; To float label and control INSIDE this div. See https://stackoverflow.com/questions/6632340/place-a-button-right-aligned */
    }



    div.mqc-form-group {

    }

    label.mqc-form-label {
        /* 2024-10-25 Stop label wrapping to keep inputs in the same row at the same level */
        white-space:nowrap;
    }


    label {
        font-weight: 600;
    }

    .control-label {
        width:100%;
    }

    .form-control {
        margin: 2px;
        padding: 2px;
        height: 28px;
        width:100%;
/* Interesting variation, more compact, might work for some pages:
        float: right;
        width: 60%;
*/
    }


/*

    .divRadioButtons {
        margin: 2px;
        padding: 2px;
        height: 30px;
        float: right;
    }

*/


    .text-danger {
        margin: 1px;
        padding: 1px;
        border: 0px solid red;
    }

    .text-danger:empty {
        /* 2024-01-24 RMcQ: 
        HIDE it if there's no message, or course! Sheesh! */
        display:none;
    }

    .required::after {
        content: " *";
        font-weight: bold;
        font-size: 125%; /* Adjusts the size if needed */
/*      font-size: 2.0em;  */
        color: red;
        margin-left: 1px;
        vertical-align: middle; /* Aligns the asterisk with the text */
        line-height: 1; /* Prevents affecting the label's height */
    }

    /* red-ast is a nice big red asterisk for required fields (but see 'required' above */
    red-ast:before { color:red; font-size:150%; font-weight:bold; content:"*"; }

    .input-validation-error {
        border: 1px solid #ff0000;
        background-color: #ffeeee;
    }
/* Unused:
    .text-danger-TOP {
        font-size: 120%;
        font-weight: bold;
        margin-bottom: 8px;
    }
*/
    div.mqc-field-set {
        border: 1px solid darkgray;
        margin: 12px 0px 6px 0px;
        padding: 4px;
        height: 100%;
    }

    div.mqc-field-set h2 {
        margin-top: -14px;
        margin-left: 0px;
        padding: 2px 4px 2px 4px;
        background: #e8e8e8; /* transparent; */ /* Set the background to transparent */
        font-size: 11pt;
        font-weight: bold;
    }

    div.divMore {
        border: 1px solid darkgray;
        background-color: lightcyan;
        margin: 4px;
        padding: 2px;
    }

    div.divMore h1 {
        margin-top: -16px;
    }


/* Forms: */

.tblFormColumns td {
    vertical-align:top;padding:16px;font-weight:bold;
}

.btn-MOST-primary {
/*  font-size: 100%; */
    font-weight: bold;
}

/* 2023-12-01: END form/field layout styles: */

.transparent-input {
    background-color: transparent;
    border: 1px solid lightgray;
}


/* 2024-10-25 RMcQ  */

hr.mqc-form-sechead-hr {
    margin-top:12px;
    margin-bottom:12px;
} 

span.mqc-form-sechead-text {
    font-size: 14pt;
    font-weight: bold;
    color: dodgerblue !important;
    margin-bottom: 8px;
}
            
hr.mqc-form-secend-hr {
    margin-top:12px;
    margin-bottom:12px;
}


/* PopupSelect - BEGIN */




/* $PROMOTE$ this to a 'tblSecondary' */
/* Older set */
#tblPopupSelect {
    border:0px solid purple;
}
#tblPopupSelect th, #tblPopupSelect td {
    font-weight:normal; /* 2024-07-31 RMcQ: $EXPLAIN$: It's bold by default for some reason. */
    padding:1px 4px 1px 6px;
    font-size:90%;
    border: 1px solid #ddd;
}
/* These are used to implement stationary filter header and table head with scrolling body */
#tblPopupSelect tbody{
    max-height:400px;
    width:100%;
}
#tblPopupSelect thead tr {
}



/* This one is not ON the PopupSelect, it CALLs the PopupSelect */
.mqc-btn-popup-select-get {
    height:28px;
    padding:1px 8px 1px 8px;
    font-size:10pt;
    font-weight:600;
}

/* These are ON the PopupSelect page */

.mqc-popup-select-search-keyword {
    background-image: url('/images/icons/searchicon.png');
    background-position: calc(100% - 4px);  
    background-repeat: no-repeat;
}

.mqc-popup-select-table {

}

/* This is pretty specific, maybe too much */
.mqc-popup-select-name {
    font-weight:500;
}

/* PopupSelect - END */

/* NOTES Add, List, Edit - BEGIN */

#mqc-page-guidance {

}


#mqc-note-fields-table {

}

#mqc-add-note-modal-link {

}

#mqc-add-note-modal-link-for-item {

}

/* NOTES Add, List, Edit - END */

table.mqc-smart-goals-table {  
    width:100%;  
}  
table.mqc-smart-goals-table td:first-child {  
    text-align: center;  
    width:20%;
}  
table.mqc-smart-goals-table span.letter {
    font:150%;
    color:mediumblue;
}