/******************** ALLGEMEINE MELDUNGEN : SUCCESS; ERROR; PROGRESS *******************/
div#msg_box {
    /* We are using flex to center */
    /*display          : flex;*/
    display          : none;
    align-items      : center;
    justify-content  : center;

    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100% !important;
    position         : fixed;
    z-index          : 200000;
    background-color : rgba(77, 77, 77, 0.42);
}

div#msg_box_box {

    /*flex             : 1 1 auto;*/
    max-width        : 50%;
    min-width        : 200px;
    box-sizing       : border-box;
    background-color : #fff;
    /*background-color : yellow;*/
    padding          : 1rem;
    margin-bottom    : 2rem;
}
div#msg_box_box div.upper_part {
    /*background-color : orange;*/
    display          : flex;
    flex-direction   : row;
    flex-wrap        : nowrap;
    justify-content  : space-between;
    align-items      : flex-start;
}
div#msg_box_box div.message_content {
    /*background   : green;*/
    padding : 0 1rem;
    flex    : auto;
}

div#msg_box_box div#msg_box_graphic {
    /*background : pink;*/
    flex    : 1 1 67px;
    padding : 0;
"
}
div#msg_box_box div.button_area {
    /*background-color : turquoise;*/
    /*display          : flex;*/
    display          : none;
    flex-direction   : row;
    flex-wrap        : nowrap;
    justify-content  : flex-end;
    align-items      : flex-start;
}
div#msg_box_box div.button_area button{
    margin-left:10px;
}

div#msg_box_box.standard {
    border-left : 10px solid #3d8bc2;
}

div#msg_box_box.success {
    background-color : #fefefe;
    border-left      : 10px solid #499f45;
    font-size        : 17px;
}

.success-icon {
    color     : #499f45;
    font-size : 40px;
}

div#msg_box_box.error {
    background-color : #fefefe;
    border-left      : 10px solid #db1616;
}

div#msg_box_box.error .btn.btn-default {
    margin-top : 9px;
}

.error-icon {
    color       : #db1616;
    font-size   : 40px;
    margin-left : 10px;
}

div#msg_box_box.error div button {
    float        : left;
    margin-right : 225px;
}

div#msg_box_box.error div > a {
    margin-top   : -33px;
    margin-right : 30px;
}

div#msg_box_box.progress div strong, div.error div strong.headline {
    font-size : 17px;
}

div#msg_box_box.progress div#msg_box_box.progressbar {
    margin-top : 10px;
}

.progress-icon {
    color       : #1f282d;
    font-size   : 40px;
    margin-left : -10px;
}

div#msg_box.full {
    width : 100%;
}

/******************************************************************************
 * B U S Y   S P I N N E R
 *****************************************************************************/
.spinner {
    content       : "";
    display       : inline-block;
    width         : 0;
    height        : 0;
    border        : solid 30px;
    border-radius : 5em;
    border-color  : transparent transparent #3d8bc2 transparent;
    animation     : spin 1s linear infinite;
}

.dot:before, .dot:after {
    content : ".";
}

.dot {
    animation : fade 1s linear infinite;
}

.dot:after {
    animation : fade 2s linear infinite;
}

@keyframes spin {
    0% {
        transform : rotate(0deg);
    }

    100% {
        transform : rotate(360deg);
    }
}

@keyframes fade {
    0% {
        opacity : 0;
    }

    100% {
        opacity : 1;
    }
}

#busy_wrapper {
    z-index          : 10001;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    opacity          : 0.7;
    background-color : #999;
}

#busy_wrapper .hcenter {
    position : absolute;
    top      : 0;
    left     : 50%;
    height   : 100%;
    width    : 220px;
    margin   : 0 0 0 -110px;
    padding  : 0;
}

#busy_wrapper .vcenter {
    position   : absolute;
    top        : 50%;
    margin-top : -70px;
    height     : 140px;
    width      : 220px;
}

#busy_wrapper .item {
    height        : 118px;
    width         : 198px;
    opacity       : 1;
    background    : #dcdcdc;
    border        : 1px solid #3d8bc2;
    box-shadow    : 3px 3px 3px #999;
    border-radius : 5px;
    display       : inline-block;
    text-align    : center;
    padding       : 10px;
    margin        : 0;
}