/**
 * Message Boxen
 *
 * Folgende Styles kann eine Message Box haben:
 *
 * - info
 * - success
 * - warning
 * - error
 *
 /******************** ALLGEMEINE MELDUNGEN : SUCCESS; ERROR; PROGRESS *******************/
div#msg_box {
    /* We are using flex to center, see msgbox.js */
    /*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(55, 55, 55, 0.9);
}

div#msg_box_box {

    /*flex             : 1 1 auto;*/
    display        : flex;
    flex-direction : column;
    max-width      : 50%;
    min-width      : 350px;
    box-sizing     : border-box;
    margin-bottom    : 2rem;

    border-radius  : 8px;
    background     : #FFFFFF;
    box-shadow     : 0 6px 35px 0 rgba(0, 0, 0, 0.18);
}

div#msg_box_box div.header {

    flex           : 0 0 30px;
    height:30px;
    display        : flex;
    flex-direction : row;

    padding        : 10px;
    border-radius  : 8px 8px 0 0;
    background     : #259AF8;
}

div#msg_box_box div.header div.header_graphic {
    flex       : 0 0 24px;
    background : url(../images/logo_wbs_85.png) center center transparent no-repeat;
}

div#msg_box_box div.header div.header_title {

    flex           : auto;
    padding-left   : 15px;
    padding-top    : 4px;
    padding-bottom : 5px;

    /*background: #fff;*/
    line-height    : 16px;
    font-size      : 14px;
    color          : #FFFFFF;
}

div#msg_box_box div.header div.header_close_symbol {
    flex       : 0 0 24px;
    background : url(../images/icon_not_ok_16.png) center center transparent no-repeat;
}

div#msg_box_box div.upper_part {
    flex            : auto;
    /*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 : 15px;
    flex    : auto;

}

div#msg_box_box div.message_content div#msg_box_title {
    font-weight    : 700;
    font-size      : 13px;
    color          : #686868;
    letter-spacing : 0;
    line-height    : 17px;
    margin-bottom  : 10px;
}

div#msg_box_box div.message_content div#msg_box_message {
    max-width      : 100%;
    overflow-y     : auto;
    font-size      : 15px;
    color          : #686868;
    letter-spacing : 0;
    line-height    : 17px;
}

div#msg_box_box div.button_area {
    /*background-color : turquoise;*/
    /*display          : flex;*/
    flex            : 0 0 50px;
    height:30px;
    padding         : 10px;
    border-top      : 1px solid #d0d0d0;
    /*display          : none;*/
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : flex-end;
    align-items     : flex-start;
}

div#msg_box_box div.button_area button {

    height:30px;

    padding:7px;
    margin-left : 10px;
    border:1px solid #259AF8;
    border-radius: 4px;

    line-height: 16px;
    font-size:14px;

    color:#259AF8;
    background: #fff;
}
div#msg_box_box div.button_area button:hover {
    cursor:pointer;
    background-color: rgba(37, 154, 248, 0.16);
}


div#msg_box_box.success div.header {
    background    : #37D725;
    box-shadow    : 0 6px 35px 0 rgba(0, 0, 0, 0.18);
    border-radius : 8px 8px 0 0;
}
div#msg_box_box.success div.header div.header_graphic {
    /*background: url(../images/asset/ic-success.svg) center center transparent no-repeat;*/
}

div#msg_box_box.warning div.header {
    background    : #F8A125;
    box-shadow    : 0 6px 35px 0 rgba(0, 0, 0, 0.18);
    border-radius : 8px 8px 0 0;
}
div#msg_box_box.warning div.header div.header_graphic {
    /*background: url(../images/asset/ic-warning.svg) center center transparent no-repeat;*/
}
div#msg_box_box.error div.header {
    background    : #F84C25;
    box-shadow    : 0 6px 35px 0 rgba(0, 0, 0, 0.18);
    border-radius : 8px 8px 0 0;
}
div#msg_box_box.error div.header div.header_graphic {
    /*background: url(../images/asset/ic-error.svg) center center transparent no-repeat;*/
}

.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        : 200px;
    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;
}