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

    border-radius    : 5px;

    font-size        : 17px;

}

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;
    max-width : 100%;
}

div#msg_box_box div.message_content h1 {
    color         : #0bb8be;
    margin-bottom : 5px;
}

div#msg_box_box div.message_content h2 {
    color      : #0bb8be;
    margin-top : 5px;
}

div#msg_box_box div.message_content input[type=text],
div#msg_box_box div.message_content input[type=password] {
    width         : 100%;
    background    : #fff;
    border-radius : 3px;
    color         : #333;
    padding       : 5px;
    clear         : both;
    margin-bottom : 10px;
    font-size     : 17px;
}

div#msg_box_box div.message_content textarea {
    width         : 100%;
    background    : #fff;
    border-radius : 3px;
    color         : #333;
    padding       : 5px;
    clear         : both;
    margin-bottom : 10px;
    font-size     : 17px;
}

div#msg_box_box div.message_content div.button_bar {
    text-align    : center;
    padding-left  : 15px;
    padding-right : 15px;
}

div#msg_box_box div.message_content input.w2g_dialog_button {

    border        : none;
    border-radius : 2px;
    font-size     : 20px;
    line-height   : 20px;
    padding       : 10px 20px;
    margin-right  : 10px;
    text-align    : center;
}

div#msg_box_box div.message_content input.w2g_dialog_button.action {

    font-weight      : bold;
    margin           : 0 auto;
    background-color : #fbba00;
    color            : #fff;
}

div#msg_box_box div.message_content input.w2g_dialog_button.cancel {

    display          : none;
    background-color : transparent;
    color            : #999;
}

div#msg_box_box div.message_content p {
    color     : #333;
    font-size : 17px;
}

div#msg_box_box div.message_content div.technical_hint {
    margin-top  : 5px;
    padding-top : 5px;
    border-top  : 1px solid #999;
    font-size   : 15px;
}

div#msg_box_box div.message_content div.technical_hint input,
div#msg_box_box div.message_content div.technical_hint p {
    font-size : 15px;
}

div#msg_box_box div.message_content p.description {
    padding     : 3px;
    border      : 1px solid #cc3333;
    color       : #cc3333;
    font-weight : 700;
}

div#msg_box_box div.message_content p.description.info {
    border      : 1px solid #406939;
    color       : #406939;
    font-weight : 700;
}

div#msg_box_box div#msg_box_graphic {
    /*background : pink;*/
    /*flex    : 1 1 67px;*/
    flex    : 0;
    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 : none;
    /*border-left : 10px solid #3d8bc2;*/
}

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

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

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