/* Aether Utility Styles */

/* *** BEGIN *** Utility *** Hide or Visually Elements *** */
.d_none {
    display: none;
}

.visually_hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visually_hidden:not(:focus):not(:active) {
    /* ... */
}
/* *** END *** Utility *** Hide Elements *** */


.bold {
    font-weight: bold;
}

.fs_smaller, .fs-smaller {
    font-size: smaller;
}
.fs_larger, .fs-larger {
    font-size: larger;
}

.debug {
    background: pink;
    border: dashed thin deeppink;
    height: 1.75rem;
    overflow: hidden;
}

.debug:hover {
    height: 100%;
}

.highlight {
    background: yellow;
}

.alert {
    background: pink;
}

.warning {
    color: var(--warning-color-lighter);
    background-color: var(--warning-color-dark);
    border-color: var(--warning-color-darker);
}

.danger {
    color: var(--danger-color-lighter);
    background-color: var(--danger-color-dark);
    border-color: var(--danger-color-darker);
}

.error {
    color: var(--danger-color-lighter);
    background-color: var(--danger-color-dark);
    border-color: var(--danger-color-darker);
}

.strike {
    color: var(--danger-color-lighter);
    background-color: var(--danger-color-dark);
    text-decoration: line-through;
}

.attention_glow {
    text-shadow: 0 0 .25rem rgba(100,0,0,1), 0 0 1rem rgba(200,0,0,1), 0 0 2rem rgba(255,0,0,1);
}

.attention_glow_pulse {
    animation-name: text_glowing_blue;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


@keyframes text_glowing_red {
    from {
        text-shadow: 0 0 .25rem transparent, 0 0 1rem transparent, 0 0 2rem transparent;
    }
    to {
        text-shadow: 0 0 .25rem hsla(var(--hue-red), var(--saturation-most), var(--lum-mid),1), 0 0 1rem rgba(200,0,0,1), 0 0 2rem rgba(255,0,0,1);
    }
}

@keyframes text_glowing_blue {
    from {
        text-shadow: 0 0 .25rem transparent, 0 0 1rem transparent, 0 0 2rem transparent;
    }
    to {
        text-shadow: 0 0 .25rem hsla(var(--hue-blue), var(--saturation-most), var(--lum-mid),1), 0 0 1.5rem hsla(var(--hue-blue), var(--saturation-most), var(--lum-lighter),1);
    }
}

/* *** BEGIN *** Utility *** Countdown Timer *** */
.countdown_banner {
    width: 100%;
    /*background-color: rgb(70, 130, 180);*/ /* SteelBlue #4682B4 rgb(70, 130, 180)*/
    background-color: rgba(70, 130, 180,.1);
    /*background-image: rgba(70, 130, 180,.1);*/

    /*text-shadow: 0 0 15px rgba(14, 27, 37,1), 0 0 30px rgba(43, 80, 110,1);*/

    text-align: center;
    font-size: 1.5rem;

    /*animation-name: countdown_animation;
     *   animation-delay: 2s;
     *   animation-duration: 5s;
     *   animation-iteration-count: infinite;
     *   animation-direction: alternate;*/
}

.countdown_number {
    font-size: 2.5rem;
}

@keyframes countdown_animation {
    from {
        background-color: rgba(70, 130, 180,.1);
        /*background: radial-gradient(circle, rgba(218,26,50,.2) 0%, rgba(218,26,50,.2) 50%, rgba(255,255,255,0) 80%);*/
    }

    to {
        /*background-color: rgba(218,26,50,.6);*/
        background: rgba(70, 130, 180,.5);
        /*background: radial-gradient(circle, rgba(218,26,50,.4) 0%, rgba(218,26,50,.4) 50%, rgba(255,255,255,0) 80%);*/
    }
}
/* *** END *** Utility *** Countdown Timer *** */


/* *** BEGIN *** Utility *** Forms Related *** */
.append_colon::after {
    content: ':';
}

.input_required::after {
    /*content: '*';
     *    color: var(--warning-color-darker);*/

    /*position: relative;
     *    top: 5px;
     *    left: 5px;*/
}
.input_required::before {
    /*content: '*';
     *    color: var(--warning-color-darker);*/

    /*display: block;
     *    content: 'b*';
     *    background-color: yellow;
     *    color: red;
     *    font-weight: bold;
     *    top: 5px;
     *    left: 5px;*/
}

/* *** END *** Utility *** Forms Related *** */


/* *** BEGIN *** Utility *** Tables Related *** */
/* *** BEGIN *** Utility *** All Tables *** */
thead>tr {
    background-color: #e6e6e6; /* efefef e6e6e6 d9d9d9 */
}
/* *** END *** Utility *** All Tables *** */


/* *** BEGIN *** Utility *** Table Borders *** */
table.table_borders {
    border: solid thin hsla(0, 0%, 50%, 1);
    border-collapse: collapse;

    /*max-width: 100%;*/
}
table.table_borders th, td {
    border: solid thin hsla(0, 0%, 75%, 1);
    border-collapse: collapse;
    /* margin: 0; */

}
/* *** END *** Utility *** Table Borders *** */


/* *** BEGIN *** Utility *** Table Alternating Rows (even/odd) *** */
table.table_alt_rows tr:nth-child(even) {
    background-color: hsla(0, 0%, 95%, 1);
}
table.table_alt_rows tr:nth-child(odd) {
    background-color: hsla(0, 0%, 85%, 1);
}
/* *** END *** Utility *** Table Alternating Rows (even/odd) *** */



/* *** BEGIN *** Utilities *** Modal Container *** */
.modal_container {
    /* outline: solid thin green; */

    /* display: none; */
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;


    margin: 0;
    padding: 3.5rem 0rem;

    /* object-fit: contain; */
    /* height: 100vh;
     *    m ax-height: 100vh; */                 *  *
     *
     *    height: 100%;
     *    max-height: 100%;
     *    width: 100%;
     *    max-width: 100%;
     *
     *    /* height: 100vh;
     *    m ax-height: 100vh;                   *   *
     *    width: 100vw;
     *    max-width: 100vw; */

     /* display: flex; */
     flex-direction: column;
     /* justify-content: center;
      *    a lign-items: center;                 *   *
      *    align-content: center; */

     display: flex;
     align-items: center;
     justify-content: center;

     z-index: 1041;
     background-color: hsla(0, 0%, 50%, .9);
}

.modal_content {
    /* outline: dashed thin pink; */

    /* margin: auto; */
    padding: 0;

    /* border: solid .2rem hsla(0, 0%, 50%, .9); */
    border-radius: 1rem;
    box-shadow: .5rem .5rem 1.5rem .5rem hsla(0, 0%, 0%, 1);

    background: #eee;

    width: 100vw;

    max-width: calc(1024px - 2rem);
    max-height: calc(100% - 2rem);

    /* text-align: center; */

    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
}

.modal_header, .modal_footer {
    /*outline: solid thin orange;*/

    flex-grow: 0;
    flex-shrink: 1;

    /* width: 100%;
     *   max-width: 100%; */

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.modal_header_begin, .modal_footer_begin {
    margin: .5rem;
}

.modal_header_end, .modal_footer_end {
    margin: .5rem;
}

.modal_header {
    /* outline: solid thin red; */
    /* border-bottom: solid thin hsla(0, 0%, 50%, .5); */
    background-image: linear-gradient(to top, hsla(205,78%,80%,.9) 0%, hsla(205,78%,80%,.1) .2rem, hsla(205,78%,80%,.1) 100%);
}
.modal_body {
    /* outline: solid thin green; */

    flex-grow: 1;
    flex-shrink: 1;

    max-width: 100%;

    margin: .5rem;
    padding: .5rem .1rem;

    /* display: flex;
     *    f lex-direction: column; */            *  *
     *    /* justify-content: ; */
     /* align-items: stretch; */
     /* align-content: center; */

     object-fit: contain;
     overflow: auto;
}

.modal_footer {
    /* outline: solid thin orange; */
    /* border-top: solid thin hsla(0, 0%, 50%, .5); */
    background-image: linear-gradient(to bottom, hsla(205,78%,80%,.9) 0%, hsla(205,78%,80%,.1) .2rem, hsla(205,78%,80%,.1) 100%);
}

.modal_close {
    padding: .25rem .5rem;

    font-size: 1.2rem;
    /* font-weight: lighter; */

    background-color: hsla(0, 0%, 90%, 1);

    border: solid thin hsla(0, 0%, 70%, 1);
    border-radius: .5rem;
    box-shadow: .1rem .1rem .2rem .1rem hsla(0, 0%, 0%, 1);

    color: hsla(0, 0%, 30%, 1);
}
.modal_close:hover {
    /* font-weight: bold; */
    background-color: hsla(0, 0%, 80%, 1);

    border: solid thin hsla(0, 0%, 60%, 1);
    border-radius: .5rem;
    box-shadow: .1rem .1rem .2rem .1rem hsla(0, 0%, 50%, 1);

    color: hsla(0, 0%, 10%, 1);
}

.modal_title {
    /*float: left;*/
    font-size: 1.4rem;
    font-weight: bold;
    display: inline;

    margin: 0;
    padding: 0;
}
/* *** END *** Utilities *** Modal Container *** */


/* *** BEGIN *** Utilities *** Badge *** */
.badge {
    color: var(--default-fg-color);
    background-color: var(--default-bg-color);
    border-color: var(--default-border-color);
}


/* *** BEGIN *** Utilities *** Bootstrap: Buttons, Background, Foreground *** */

/* *** BEGIN *** Utility *** Bootstrap Tables Striped *** */
.table-striped>tbody>tr:nth-child(odd)>td {
    /*background-color: white;*/
    /*color: black;*/
}
.table-striped>tbody>tr:nth-child(even)>td {
    /*background-color: #efefef;*/
    /*color: white;*/
}
/* *** END *** Utility *** Bootstrap Tables Striped *** */

/* *** BEGIN *** Utility *** Bootstrap Forms *** */
.form-horizontal {
    background-color: white;
    /*margin: .5em;*/
    padding: 1em .5em;
}
/* *** END *** Utility *** Bootstrap Forms *** */

a.btn, button.btn {
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */

    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
    color: black;
    background-color: hsl(0, 0%, 95%, 1);
    /* background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); */

    border-width: thin;
    border-style: outset;
    border-color: hsla(0,0%,50%,1);
    border-radius: .25em;

    font: inherit;
    font-size: 1em;
    font-weight: normal;

    line-height: normal;

    margin: .1em;
    padding: .1em .2em;

    box-sizing: border-box;

    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.button:hover {
    background-color: hsl(0, 0%, 85%, 1);
    cursor: pointer;
}

.btn.btn_sm, .btn.btn-sm {
    font-size: .8em;
}

.btn.btn_lg, .btn.btn-lg {
    font-size: 1.1em;
}

.btn.btn-wrap-text {
    white-space: normal;
    word-wrap: normal; /* break-word */
    max-width: 50em; /* 55rem */
}


/* ### default ### */
.btn.bg-default {
    color: var(--default-fg-color);
    background-color: var(--default-bg-color) !important;
    border-color: var(--default-border-color);
}
.btn.btn-default {
    color: var(--default-fg-color);
    background-color: var(--default-bg-color);
    border-color: var(--default-border-color);
}
.btn.btn-default:hover {
    color: var(--default-fg-color-highlight);
    background-color: var(--default-bg-color-highlight);
    border-color: var(--default-border-color-highlight);
}
.btn.btn-outline-default {
    color: var(--default-fg-color);
    background-color: var(--default-bg-color);
    border-color: var(--default-border-color);
}
.btn.btn-outline-default:hover {
    color: var(--default-fg-color-highlight);
    background-color: var(--default-bg-color-highlight);
    border-color: var(--default-border-color-highlight);
}

/* ### light ### */
.bg-light {
    color: var(--default-color-lightest);
    background-color: var(--default-color-mid) !important;
    border-color: var(--default-color-dark);
}
.btn.btn-light {
    color: var(--default-color-lightest);
    background-color: var(--default-color-mid);
    border-color: var(--default-color-dark);
}
.btn.btn-light:hover {
    color: var(--default-color-lightest);
    background-color: var(--default-color-darker);
    border-color: var(--default-color-darkest);
}
.btn.btn-outline-light {
    color: var(--default-color-darkest);
    background-color: var(--default-color-lighter);
    border-color: var(--default-color-darker);
}
.btn.btn-outline-light:hover {
    color: var(--default-color-lightest);
    background-color: var(--default-color-darker);
    border-color: var(--default-color-darkest);
}

/* ### dark ### */
.bg-dark {
    color: var(--default-color-darkest);
    background-color: var(--default-color-mid) !important;
    border-color: var(--default-color-light);
}
.btn.btn-dark {
    color: var(--default-color-darkest);
    background-color: var(--default-color-mid);
    border-color: var(--default-color-light);
}
.btn.btn-dark:hover {
    color: var(--default-color-darkest);
    background-color: var(--default-color-lighter);
    border-color: var(--default-color-lightest);
}
.btn.btn-outline-dark {
    color: var(--default-color-darkest);
    background-color: var(--default-color-lighter);
    border-color: var(--default-color-lighter);
}
.btn.btn-outline-dark:hover {
    color: var(--default-color-darkest);
    background-color: var(--default-color-lighter);
    border-color: var(--default-color-lightest);
}

/* ### primary ### */
.btn.bg-primary {
    color: var(--primary-color-lightest);
    background-color: var(--primary-color-mid) !important;
    border-color: var(--primary-color-dark);
}
.btn.btn-primary {
    color: var(--primary-color-lightest);
    background-color: var(--primary-color-mid);
    border-color: var(--primary-color-dark);
}
.btn.btn-primary:hover {
    color: var(--primary-color-lightest);
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darkest);
}
.btn.btn-outline-primary {
    color: var(--primary-color-darkest);
    background-color: var(--primary-color-lighter);
    border-color: var(--primary-color-darker);
}
.btn.btn-outline-primary:hover {
    color: var(--primary-color-lightest);
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darkest);
}

/* ### secondary ### */
.bg-secondary {
    color: var(--secondary-color-lightest);
    background-color: var(--secondary-color-mid) !important;
    border-color: var(--secondary-color-dark);
}
.btn.btn-secondary {
    color: var(--secondary-color-lightest);
    background-color: var(--secondary-color-mid);
    border-color: var(--secondary-color-dark);
}
.btn.btn-secondary:hover {
    color: var(--secondary-color-lightest);
    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darkest);
}
.btn.btn-outline-secondary {
    color: var(--secondary-color-darkest);
    background-color: var(--secondary-color-lighter);
    border-color: var(--secondary-color-darker);
}
.btn.btn-outline-secondary:hover {
    color: var(--secondary-color-lightest);
    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darkest);
}

/* ### info ### */
.bg-info {
    color: var(--info-color-lightest);
    background-color: var(--info-color-mid) !important;
    border-color: var(--info-color-dark);
}
.btn.btn-info {
    color: var(--info-color-lightest);
    background-color: var(--info-color-mid);
    border-color: var(--info-color-dark);
}
.btn.btn-info:hover {
    color: var(--info-color-lightest);
    background-color: var(--info-color-darker);
    border-color: var(--info-color-darkest);
}
.btn.btn-outline-info {
    color: var(--info-color-darkest);
    background-color: var(--info-color-lighter);
    border-color: var(--info-color-darker);
}
.btn.btn-outline-info:hover {
    color: var(--info-color-lightest);
    background-color: var(--info-color-darker);
    border-color: var(--info-color-darkest);
}

/* ### success ### */
.bg-success {
    color: var(--success-color-lightest);
    background-color: var(--success-color-mid) !important;
    border-color: var(--success-color-dark);
}
.btn.btn-success {
    color: var(--success-color-lightest);
    background-color: var(--success-color-mid);
    border-color: var(--success-color-dark);
}
.btn.btn-success:hover {
    color: var(--success-color-lightest);
    background-color: var(--success-color-darker);
    border-color: var(--success-color-darkest);
}
.btn.btn-outline-success {
    color: var(--success-color-darkest);
    background-color: var(--success-color-lighter);
    border-color: var(--success-color-darker);
}
.btn.btn-outline-success:hover {
    color: var(--success-color-lightest);
    background-color: var(--success-color-darker);
    border-color: var(--success-color-darkest);
}

/* ### warning ### */
.bg-warning {
    color: var(--warning-color-lightest);
    background-color: var(--warning-color-mid) !important;
    border-color: var(--warning-color-dark);
}
.btn.btn-warning {
    color: var(--warning-color-lightest);
    background-color: var(--warning-color-mid);
    border-color: var(--warning-color-dark);
}
.btn.btn-warning:hover {
    color: var(--warning-color-lightest);
    background-color: var(--warning-color-darker);
    border-color: var(--warning-color-darkest);
}
.btn.btn-outline-warning {
    color: var(--warning-color-darkest);
    background-color: var(--warning-color-lighter);
    border-color: var(--warning-color-darker);
}
.btn.btn-outline-warning:hover {
    color: var(--warning-color-lightest);
    background-color: var(--warning-color-darker);
    border-color: var(--warning-color-darkest);
}

/* ### danger ### */
.bg-danger {
    color: var(--danger-color-lightest);
    background-color: var(--danger-color-mid) !important;
    border-color: var(--danger-color-dark);
}
.btn.btn-danger {
    color: var(--danger-color-lightest);
    background-color: var(--danger-color-mid);
    border-color: var(--danger-color-dark);
}
.btn.btn-danger:hover {
    color: var(--danger-color-lightest);
    background-color: var(--danger-color-darker);
    border-color: var(--danger-color-darkest);
}
.btn.btn-outline-danger {
    color: var(--danger-color-darkest);
    background-color: var(--danger-color-lighter);
    border-color: var(--danger-color-darker);
}
.btn.btn-outline-danger:hover {
    color: var(--danger-color-lightest);
    background-color: var(--danger-color-darker);
    border-color: var(--danger-color-darkest);
}

/* *** BEGIN *** Utility *** Bootstrap Overrides *** */
@media (min-width: 992px) {
    .modal-lg {
        width: 95%;
    }
}

@media (min-width: 768px) {
    .modal-lg {
        width: 95%;
    }
}
/* *** END *** Utility *** Bootstrap Overrides *** */



.data_field {
    border: solid thin #eee;
}

.data_field:hover {
    border: dashed thin #fbb;
}


.list_inline {
    float: right;
}

.list_inline li {
    display: inline;
    text-decoration: none;
    margin-left: .25em;
    /*margin-right: .25em;*/
}



.name_prefix {

}
.name_informal {

}
.name_given {

}
.name_middle {

}
.name_family {

}
.name_suffix {

}

input.name_prefix {
    /*width: 3.5em;*/
}
input.name_informal {
    /*width: 6em;*/
}
input.name_given {
    /*width: 6em;*/
}
input.name_middle {
    /*width: 6em;*/
}
input.name_family {
    /*width: 6em;*/
}
input.name_suffix {
    /*width: 3.5em;*/
}