.messaging{
        
        --alert-success-color-h:                var( --hoof-success-color-h );
        --alert-danger-color-h:                 var( --hoof-danger-color-h );
        --alert-warning-color-h:                var( --hoof-warning-color-h );
        --alert-information-color-h:            var( --hoof-information-color-h );

        --alert-success-color:                  var( --hoof-success-color );
        --alert-success-surface-color:          var( --hoof-success-surface-color );
    
        --alert-danger-color:                   var( --hoof-danger-color );
        --alert-danger-surface-color:           var( --hoof-danger-surface-color );
    
        --alert-warning-color:                  var( --hoof-warning-color );
        --alert-warning-surface-color:          var( --hoof-warning-surface-color );
    
        --alert-information-color:              var( --hoof-information-color );
        --alert-information-surface-color:       var( --hoof-information-surface-color );
    }
    .message-initial-state {
        width:                  100%;
        text-align:             left;
        padding:                10px 30px;
        transition:             opacity 6s;
        opacity:                1;
    }
    .message-initial-state.fade-out{
        opacity:                0;
    }
    .message-final-state {
        opacity:                0;
    }
    .alert{
        border-radius:          0;
        position:               fixed;
        bottom:                 40px;
        left:                   0;
        width:                  100%;
    }
    .alert-success{
        border-top:             1px solid var(--alert-success-color);
        border-bottom:          1px solid var(--alert-success-color);
        background-color:       var(--alert-success-surface-color);
        color:                  var(--alert-success-color);
    }
    .alert-danger{
        border-top:             1px solid var(--alert-danger-color);
        border-bottom:          1px solid var(--alert-danger-color);
        background-color:       var(--alert-danger-surface-color);
        color:                  var(--alert-danger-color);
    }
    .frame-background{
        position:               absolute;
        left:                   0;
        top:                    0;
        height:                 100%;
        width:                  100%;
        
        background-color:       hsl( var(--hoof-brand-color-h), 0%, 90%);
        opacity:                0.90; 
    }
    .modal-background{
        position:               absolute;
        top:                    0;
        left:                   0;
        min-height:             100%;
        width:                  100%;

        display:                flex;
        justify-content:        center;
        align-items:            center;
    }
    .modal-frame{

        border-width:           1px;
        border-color:           var(--hoof-brand-color);
        border-style:           solid;
        border-radius:          0.75rem;

        background-color:       var(--hoof-surface-color-0);
        opacity:                1;
        color:                  var(--hoof-on-color-2);

        box-shadow:             var(--hoof-box-shadow) var(--hoof-shadow-color-2);
    }
    .modal-header{
        display:                flex;
        justify-content:        space-between;
        align-items:            center;
        font-weight:            bold;
        padding:                0.2rem 0 0.2rem 0;
        border-bottom:          1px solid var(--hoof-brand-color);
        color:                  var(--hoof-on-color-2);
    }
    .modal-title{
        margin-left:            1rem;
        margin-right:           1rem;
    }
    .icon-close-anchor{
        position:               relative;
        margin-right:           0.25rem;
        color:                  var(--hoof-brand-color);
    }
    .modal-message{
        margin-top:             1.5rem;
        margin-bottom:          1rem;
        margin-left:            1rem;
        margin-right:           1rem;
        font-size:              1rem;
        color:                  var(--hoof-on-color-2);
    }
    .modal-footer{
        display:                flex;
        justify-content:        space-around;
        padding-top:            0.5rem;
        padding-bottom:         0.5rem;
        
    }