/**
 * 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 55px;
    display        : flex;
    flex-direction : row;

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

div#msg_box_box div.header div.header_graphic {
    flex       : 0 0 24px;
    background : url(../images/asset/ic-info.svg) 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;*/
    font-family    : Roboto;
    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/asset/ic-closebig.svg) 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-family    : RobotoBold;
    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-family    : Roboto;
    font-size      : 13px;
    color          : #686868;
    letter-spacing : 0;
    line-height    : 17px;
}

div#msg_box_box div.button_area {
    /*background-color : turquoise;*/
    /*display          : flex;*/
    flex            : 0 0 60px;
    padding         : 15px;
    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 {
    margin-left : 10px;
}

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

.spinner {
    border-radius    : 50%;
    width            : 24px;
    height           : 24px;
    border           : .25rem solid #D0D0D0;
    border-top-color : #259AF8;
    animation        : spin 1s infinite linear;
    /*&--double {*/
    border-style     : double;
    border-width     : .5rem;
    /*}*/
}

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

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

/*.dot:before, .dot:after {*/
/*content : ".";*/
/*}*/
/**/
/*.dot {*/
/*animation : fade 1s linear infinite;*/
/*}*/
/**/
/*.dot:after {*/
/*animation : fade 2s linear infinite;*/
/*}*/

/*@keyframes fade {*/
/*0% {*/
/*opacity : 0;*/
/*}*/
/**/
/*100% {*/
/*opacity : 1;*/
/*}*/
/*}*/

#busy_wrapper {
    z-index          : 10001;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    opacity          : 1;
    background-color : rgba(153, 153, 153, 0.29);
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

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

#busy_wrapper .hcenter::before {
    content : "deprecated"
}

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

#busy_wrapper .vcenter::before {
    content : "deprecated"
}

#busy_wrapper .item {
    /*flex:*/
    /*height        : 200px;*/
    width         : 198px;
    opacity       : 1;
    background    : #fff;
    border        : 1px solid #259AF8;
    box-shadow    : 3px 3px 3px #999;
    border-radius : 5px;
    display       : inline-block;
    text-align    : center;
    padding       : 10px;
    margin        : 0;
}