/*
These are my CSS Styles
Updated 2019-02-19 Tuesday 9:15 PM
-mojo

 */


/* Completely hides an element and removes it from layout flow. */
.hideMe {
    display: none;
}

/* Hides an element visually while preserving its layout space. very useful for tables specially with use of templateMe_rows helper */
.invisibleMe {
    visibility: hidden;
}

/* Hides elements that are empty and removes them from layout. */
.hideMe_empty:empty {
    display: none;
    visibility: hidden;
}


.cursor_pointer {
    cursor: pointer;
}

.blinkMe{
    animation:blinkMe 0.8s infinite;
}
.blinkMeSlower{
    animation:blinkMe 1.8s infinite;
}

.blinkMeFaster{
    animation:blinkMe 0.4s infinite;
}

@keyframes blinkMe{
    0%{     opacity: 1;    }

    50%{    opacity: 1; }
    75%{    opacity: 1; }
    90%{    opacity: .25; }
    100%{   opacity: 0;    }
}


.bordered-light{
    border: 1px solid grey;
    border-radius: 4px;
}

.bordered-light-shadowed {
    border: 1px solid #ddd; /* light grey border */
    border-radius: 4px; /* slightly rounded edges */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* subtle shadowing */
}

.showFormErrors_border{
    border: 2px solid red;
    border-radius: 4px;
    box-shadow: 0 0 2px #ed0006;
}

.showFormErrors_msg{
    color: red;

}


.nl2br{
    white-space: pre-line;

}
.nl2br br{
    display: none;
}

.line-through{
    text-decoration: line-through;
}

/*initial state*/
.alert-msg{
    display: none;
}



/*for monitorFormValueChanges*/
/* highlight fields with unsaved changes */
.form-field-changed,
.form-changed {
    border: 2px solid #ffc107 !important;   /* warning yellow */
    background-color: #fff8e1 !important;   /* subtle light yellow bg */
    transition: background-color 0.3s, border-color 0.3s;
}


/*
    FIXES
 */

/*
This pads the Select2 close button a little to make it look good
https://i.imgur.com/GC2qLVY.jpeg
 */
.select2-selection__clear{
    padding-right: 5px;
}

/*forces select2 container to display properly @ 100% when it's initiated in a dive that's set to d-none (hidden)
https://stackoverflow.com/questions/51843241/select2-fullwidth-in-hidden-div
*/
.select2-container {
    width: 100% !important;
    z-index: 9999 !important;
}
/*makes select2 height same same as regular sm fields */
.select2-container--default .select2-selection--single{
    height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 28px;
}


#mojo-loader{
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
#mojo-loader .mojo-loader-text-bg{
    text-align: center;
    background-color: black;
    padding: 10px 0px 10px 0px;
}
#mojo-loader .mojo-loader-title{
    margin-top: 10px;
    color: #b3b0ac;

}
#mojo-loader .mojo-loader-waiting-text{
    animation:blinkMe 0.8s infinite;
    color: #b3b0ac;
}

#mojo-loader .mojax-loader-countdown-text{
    float: right;
    margin-right: 30px;
    font-size: 11px;
    color: grey;
}