.Infobox {
    position:                   relative;
    top:                        12vh;
    width:                      60vw;
    max-width:                  960px;
    margin:                     auto;
    margin-bottom:              25px;
    font-size:                  120%;
    display:                    block;
    z-index:                    50;
}

.InfoboxHeadline {
    position:                   relative;
    top:                        0px;
    left:                       0px;
    width:                      calc(100% - 50px);
    padding:                    8px 25px 6px 25px;
    background-color:           rgba(73, 119, 171, 0.8);
    font-size:                  120%;
    border-radius:              4px 4px 0px 0px;
    box-shadow:                 4px 4px 4px rgba(100, 100, 100, 0.25);
    display:                    inline-block;
}

.InfoboxText {
    position:                   relative;
    width:                      calc(100% - 50px);
    margin:                     auto;
    padding:                    25px;
    font-size:                  120%;
    background-color:           rgba(255, 255, 255, 0.95);
    border-radius:              0px 0px 4px 4px;
    box-shadow:                 4px 4px 4px rgba(100, 100, 100, 0.25);
    display:                    inline-block;
}

.infoboxred {
    background-color:           rgba(255, 0, 0, 0.60);
    font-size:                  150%;
    padding:                    6px 12px;
    margin-bottom:              30px;
    display:                    inline-block;
}

.infobox_green {
    text-decoration:            none;
    /*background-color:           rgba(0, 176, 92, 0.12);*/
    color:                      rgba(0, 176, 92, 0.9);
    padding:                    4px 6px;
    margin:                     0px -2px 0px -2px;
    border-radius:              2px;
    transition:                 all 0.3s;
}

.infobox_green:hover {
    text-decoration:            none;
    /*background:                 linear-gradient(rgba(85, 213, 152, 0.6), rgba(6, 160, 86, 0.6));*/
    background:                 linear-gradient(rgba(161, 200, 112, 0.8), rgba(68, 110, 17, 0.8));
    color:                      rgba(231, 253, 243, 0.9);
    box-shadow:                 2px 2px rgba(0, 0, 0, 0.1);
    padding:                    8px 12px;
    border-radius:              6px;
}

.infobox_green:active {
    text-decoration:            none;
    background-color:           rgba(0, 176, 92, 0.6);
    color:                      rgba(231, 253, 243, 0.9);
    box-shadow:                 0px 0px rgba(0, 0, 0, 0.1);
    padding:                    8px 12px;
    border-radius:              6px;
    margin-left:                1px;
    margin-top:                 1px;
}

.infobox_green:hover:after {
    content:                    " \f061";
    font-family:                FontAwesome;
}


.nButton {
    color:                      rgba(202, 216, 232, 1);
    background-color:           rgba(126, 157, 192, 1);
    /*background-image:           linear-gradient(rgb(155, 194, 232) 0%, rgba(126, 157, 192, 1) 100%);*/
    font-size:                  62%;
    border:                     0px;
    border-radius:              3px;
    padding:                    8px 12px;
    margin-left:                1px;
    box-shadow:                 2px 2px 4px rgba(100, 100, 100, 0.25);
    transition:                 all .15s ease-in-out;
}

.nButton:hover {
    color:                      rgba(235, 240, 246, 1);
    background-color:           rgba(152, 180, 211, 1);
}

.nButton:active {
    box-shadow:                 0px 0px rgba(0, 0, 0, 0.1);
    margin-left:                2px;
    margin-right:               -1px;
    margin-top:                 1px;
}




.DialogForm1Col {
    width:                      100%;
    display:                    inline-block;
}

.DialogImage {
    min-width:                  25px;
    width:                      calc(30% - 15px);
    height:                     30%;
    float:                      left;
    margin-left:                5px;
    margin-right:               25px;
    margin-top:                 12px;
    display:                    inline-block;
}

.DialogImage > img {
    width:                      100%;
}

.DialogForm2Cols {
    width:                      calc(70% - 15px);
    display:                    inline-block;
}

.DialogForm2Cols > p {
    font-size:                  95%;
    line-height:                130%;
}

.DialogForm2Cols > p > a {
    color:                      #FF0000;
    text-decoration:            none;
}

.gpgfingerprint {
    font-family:                Courier New, monospace;
    font-size:                  95%;
}

#signupform #gpgpublickeyring {
    height:                     20vh;
}

.dialog {
    position:                   relative;
    border:                     0;
    border-left:                1px solid #CCCCCC;
    border-right:               1px solid #CCCCCC;
    border-bottom:              1px solid #CCCCCC;
    background:                 rgba(255, 255, 255, 0.90);
}

.dialog.top {
    border-radius:              4px 4px 0px 0px;
    border-top:                 1px solid #CCCCCC;
}

.dialog.bottom {
    border-radius:              0px 0px 4px 4px;
}

.dialog.single {
    border-radius:              4px 4px 4px 4px;
    border-top:                 1px solid #CCCCCC;
}



.dialog input {
    width:                      calc(100% - 20px);
    font-family:                sans-serif;
    font-size:                  84%;
    padding:                    14px 10px;
    margin-bottom:              0px;
    border:                     0;
    background:                 transparent;
}

.dialog.top input {
    border-radius:              4px 4px 0px 0px;
}

.dialog.bottom input {
    border-radius:              0px 0px 4px 4px;
}


.dialog input:focus {
    outline:                    none;
    border-color:               rgba(255, 0, 0, 0.90);
    box-shadow:                 0 0 10px rgba(255, 0, 0, 0.50);
}


.dialog textarea {
    width:                      calc(100% - 20px);
    font-family:                sans-serif;
    font-size:                  84%;
    padding:                    14px 10px;
    border:                     0;
    background:                 transparent;
    resize:                     vertical;
    display:                    block;
}

.dialog textarea:focus {
    outline:                    none;
    border-color:               rgba(255, 0, 0, 0.90);
    box-shadow:                 0 0 10px rgba(255, 0, 0, 0.50);
}


.overlay {
    position:                   absolute;
    top:                        50%;
    transform:                  translateY(-50%);
    right:                      8px;
    font-size:                  65%;
    text-align:                 right;
}

.overlay > i
{
    font-size:                  120%;
}

.fa-check
{
    color:                      rgba(132, 221, 146, 0.9);
}

.fa-exclamation-triangle
{
    color:                      rgba(236, 234, 64, 0.9);
}

.fa-times
{
    color:                      rgba(255, 0, 0, 0.60);
    margin-right:               2px;
}

.overlayError:before {
    content:                    "\f00d";
    font-family:                FontAwesome;
    color:                      rgba(255, 0, 0, 0.60);
    margin-right:               6px;
}

.overlayErrorText {
    color:                      #a94442;
    background-color:           #f2dede;
    border:                     1px solid #ebccd1;
    border-radius:              4px;
    padding:                    4px 8px 4px 5px;
}

.overlayWarning:before {
    content:                    "\f071";
    font-family:                FontAwesome;
    color:                      rgba(236, 234, 64, 0.9);
    margin-right:               4px;
}

.overlayWarningText {
    color:                      rgb(195, 166, 116);
    background-color:           #fcf8e3;
    border:                     1px solid #faebcc;
    border-radius:              4px;
    padding:                    4px 8px 4px 5px;
}

.overlayNotice:before {
    content:                    "\f12a";
    font-family:                FontAwesome;
    color:                      rgba(236, 234, 64, 0.9);
    margin-right:               4px;
}

.overlayNoticeText {
    color:                      #31708f;
    background-color:           #d9edf7;
    border:                     1px solid #bce8f1;
    border-radius:              4px;
    padding:                    4px 8px 4px 5px;
}

.overlayOk:before {
    content:                    "\f00c";
    font-family:                FontAwesome;
    color:                      rgba(132, 221, 146, 0.9);
    font-size:                  120%;
    margin-right:               4px;
}

.overlayOkText {
    color:                      #3c763d;
    background-color:           #dff0d8;
    border:                     1px solid #d6e9c6;
    border-radius:              4px;
    padding:                    4px 8px 4px 5px;
}



@media only screen and (max-width: 1024px) {

    .dialog input {
        font-size:                  70%;
        padding:                    8px 10px;
    }

    .dialog textarea {
        font-size:                  70%;
        padding:                    8px 10px;
    }

    .overlay {
        right:                      5px;
    }

    .overlay > i
    {
        font-size:                  80%;
    }

}


@media only screen and (max-width: 480px) {

    #DialogImage {
        display:                    none;
    }

    #DialogForm2Cols {
        width:                      calc(100% - 0px);
    }

}





@media only screen and (max-width: 1024px) {

    .Infobox {
        top:                        10vh;
        width:                      80vw;
    }

}


@media only screen and (max-width: 768px) {

    .Infobox {
        top:                        10vh;
        width:                      90vw;
    }

    .InfoboxHeadline {
        font-size:                  90%;
    }

    .InfoboxText {
        font-size:                  100%;
        width:                      calc(100% - 40px);
        padding:                    20px;
    }

}