html * {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 5px;
}

.outer {
    width: 100%;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.content-centered {
    text-align: center;
}

/* Desktop */

@media screen and (min-width: 520px) {
    .logo {
        width: auto;
        height: auto;
    }

    .inner {
        display: table;
        margin: 0 auto;
        width: 80%;
        max-width: 900px;
    }

    .inner-margin-top {
        margin-top: 40px;
    }

    .header {
        margin-top: 20px;
    }

    .header-title {
        margin-top: 50px;
    }

    .header-title-font {
        color: gray;
        font-size: 24px;
        font-weight: 100;
    }

    .header-subtitle {
        margin-top: 20px;
    }

    .header-subtitle-font {
        color: gray;
        font-size: 18px;
        font-weight: 100;
    }

    .payment-sum {
        float: left;
        margin-left: 18%;
        margin-right: 2%;
        width: 42%;
    }

    .payment-currency {
        float: right;
        margin-right: 18%;
        width: 20%;
    }

    .payment-reference {
        float: left;
        margin-left: 18%;
        margin-top: 10px;
        width: 64%;
    }

    .payment-method {
        float: left;
        margin-left: 18%
    }

    .payment-button {
        margin-top: 30px;
    }

    .confirmation-margin-first {
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .confirmation-margin {
        margin-bottom: 15px;
    }

    .confirmation-content {
        margin-left: 28%;
        width: 30%;
    }

    .confirmation-button-margin {
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .error-text-margin {
        margin-top: 30px;
        margin-bottom: 25px;
    }
}

/* Mobile Regular */

@media screen and (max-width: 520px) {
    .logo {
        width: 150px;
        height: 42px;
    }

    .inner {
        display: table;
        margin: 0 auto;
        width: 95%;
    }

    .inner-margin-top {
        margin-top: 20px;
    }

    .header {
        margin-top: 10px;
    }

    .header-title {
        margin-top: 30px;
    }

    .header-title-font {
        color: gray;
        font-size: 20px;
        font-weight: 100;
    }

    .header-subtitle {
        margin-top: 10px;
    }

    .header-subtitle-font {
        color: gray;
        font-size: 15px;
        font-weight: 100;
    }

    .payment-sum {
        float: left;
        margin-left: 10%;
        margin-right: 1%;
        width: 47%;
    }

    .payment-currency {
        float: right;
        margin-right: 10%;
        width: 30%;
    }

    .payment-reference {
        float: left;
        margin-left: 10%;
        margin-top: 10px;
        width: 80%;
    }

    .payment-method {
        float: left;
        margin-left: 10%
    }

    .payment-button {
        margin-top: 30px;
    }

    .confirmation-margin-first {
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .confirmation-margin {
        margin-bottom: 15px;
    }

    .confirmation-content {
        margin-left: 15%;
        width: 55%;
    }

    .confirmation-button-margin {
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .error-text-margin {
        margin-top: 30px;
        margin-bottom: 25px;
    }
}

/* Mobile Mini */

@media screen and (max-width: 319px) {
    .logo {
        margin-top: 7px;
        width: 110px;
        height: 30px;
    }

    .inner {
        display: table;
        margin: 0 auto;
        width: 95%;
    }

    .inner-margin-top {
        margin-top: 20px;
    }

    .header {
        margin-top: 10px;
        background: white;
    }

    .header-title {
        margin-top: 30px;
    }

    .header-title-font {
        color: gray;
        font-size: 20px;
        font-weight: 100;
    }

    .header-subtitle {
        margin-top: 10px;
    }

    .header-subtitle-font {
        color: gray;
        font-size: 15px;
        font-weight: 100;
    }

    .payment-sum {
        float: left;
        margin-left: 10%;
        margin-right: 1%;
        width: 47%;
    }

    .payment-currency {
        float: right;
        margin-right: 10%;
        width: 30%;
    }

    .payment-reference {
        float: left;
        margin-left: 10%;
        margin-top: 10px;
        width: 80%;
    }

    .payment-method {
        float: left;
        margin-left: 10%
    }

    .payment-button {
        margin-top: 30px;
    }

    .confirmation-margin-first {
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .confirmation-margin {
        margin-bottom: 15px;
    }

    .confirmation-content {
        margin-left: 8%;
        width: 55%;
    }

    .confirmation-button-margin {
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .error-text-margin {
        margin-top: 30px;
        margin-bottom: 25px;
    }
}

/* Language Buttons */

table.language {
    border-spacing: 10px;
    border-collapse: separate;
}

td.active {
    color: black;
    background-color: #E6E6E6;
    font-size: 15px;
    cursor: pointer;
}

td.inactive {
    color: #A2A2A2;
    background-color: #FBFBFB;
    font-size: 15px;
    cursor: pointer;
}

    td.inactive:hover {
        color: black;
        background-color: #E6E6E6;
    }

td.size {
    width: 32px;
    height: 24px;
    text-align: center;
}

/* DevExpress - Remove RadioButton Border */

.dxeRadioButtonList_weblandsysconf {
    border: none !important;
}