/******************** 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.65);
}

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          : 0;
    margin           : 0;

    margin-bottom    : 2rem;

    border-radius    : 5px;
    box-shadow       : 3px 3px 3px #999;
}

div#msg_box_box div.headline {
    position       : relative;
    overflow       : hidden;
    display        : flex;
    flex-direction : row;

    box-sizing     : border-box;
    width          : 100%;
    height         : 24px;
    line-height    : 24px;
    padding-left   : 1rem;

    font-weight    : 400;
    font-size      : 14px;
    color          : #fff;
    text-shadow    : 1px 1px 1px black;

    background     : #77b8e9;
    background     : url(../images/headline_bg_bluegrey.png) top left repeat-x;
}

div#msg_box_box div.headline div.msg_box_title {
    /*background : orange;*/
    flex : 1 1 80%;
}

div#msg_box_box div.headline div.button_top_right {
    /*background : red;*/
    flex : 32px;
}

div#msg_box_box div.headline div.button_top_right a {
    color           : white;
    display         : block;
    float           : right;
    height          : 18px;
    width           : 18px;
    text-decoration : none;
    font-style      : oblique;
    text-align      : center;
    border          : solid #fff 1px;
    line-height     : 18px;
    font-size       : 12px;
    margin          : 1px;
    padding         : 1px;
}

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 : 1rem;
    flex    : auto;
}

div#msg_box_box div#msg_box_graphic {
    /*background : pink;*/
    flex    : 1 1 67px;
    padding : 0;
"
}

div#msg_box_box div#msg_box_button_area,
div#msg_box_box div.button_area {
    /*background-color : turquoise;*/
    /*display          : flex;*/
    width      : 100%;
    /*display    : block;*/

    /*border     : 1px solid red;*/
    padding    : 10px;
    height     : 40px;
    /*display    : none;*/
    box-sizing : border-box;
    /*flex-direction  : row;*/
    /*flex-wrap       : nowrap;*/
    /*justify-content : flex-end;*/
    /*align-items     : flex-start;*/
}

div#msg_box_box div#msg_box_button_area button,
div#msg_box_box div.button_area button {
    display     : inline-block;
    margin      : 0 5px;
    padding     : 3px 8px;
    height      : 20px;
    line-height : 15px;
    font-size   : 15px;
    text-align  : center;

    cursor      : pointer;
    /*margin-left : 10px;*/
}

div#msg_box_box div#msg_box_button_area button:hover,
div#msg_box_box div.button_area button:hover {
    box-shadow : rgba(172, 171, 169, 0.21);
}

div#msg_box_box div#msg_box_button_area button.button_ok,
div#msg_box_box div.button_area button.button_ok {
    background-color : #0E658E;
    border           : #0E658E;
    color            : #fff;
}

div#msg_box_box div#msg_box_button_area button.button_cancel,
div#msg_box_box div.button_area button.button_cancel {
    background-color : #f0f0f0;
    border           : #f0f0f0;
    color            : #0E658E;
}

div#msg_box_box div#msg_box_button_area button span,
div#msg_box_box div.button_area button span {
    display : none;
}

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

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

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

div#msg_box_box.error {
    background-color : #fefefe;
    border-left      : 2px 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;
}

.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;
}