@media (max-width:481px) {

    .left-side,
    .right-side {
        width: 89% !important;
        border: none;
    }

    .info-detail p,
    .wallet-form .calculate p {
        flex-direction: column;
        text-align: left;
    }

        .left-side .info-detail p span:nth-child(1),
        .wallet-form .calculate p span:nth-child(1) {
            width: 100%;
            padding-bottom: 5px;
        }

        .wallet-form .calculate p span:nth-child(2) {
            width: 100%;
        }


        .button-group button {
            width: 100%;
        }

    .dropdown span {
        width: 90%;
    }

    .modal .modal-content {
        width: 95%;
    }


    .result-right .result-container {
        margin: 10px 20px 20px 20px;
        padding: 0
    }

    .result-right p span:nth-child(1) {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

    .result-right p span:nth-child(2) {
        color: #8f959d;
    }


    input[type=button], input[type=submit] {
        width: 87% !important;
    }


    #remainingTime {
        display: none;
    }

    #loginForm input[type=email],
    #loginForm input[type=password] {
        width: 87% !important;
    }
}

@media (max-width:800px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

    .wrapper .container {
        flex-direction: column;
        width: 100%;
    }

    .left-side,
    .right-side {
        width: 95%;
        border: none;
        padding: 30px 20px;
    }

        .right-side .tc-logo,
        .left-side .acquirer-logo {
            display: none;
        }

        .right-side .fn-logo,
        .left-side .acquirer-logo {
            display: none;
        }

        .right-side .login-form,
        .left-side .info-detail {
            margin-top: 30px;
        }

        .right-side .wallet-form {
            padding-top: 25px;
        }

    .dropdown {
        margin: 0 0 5px 0;
    }

    #walletError {
        margin-bottom: 10px;
    }

    #loginForm input[type=email],
    #loginForm input[type=password] {
        width: 94%;
    }


    .result {
        flex-direction: column !important;
    }

    .result-left {
        width: 100%;
        border-right: none;
        border-bottom: 3px solid #dfdfdf;
    }

        .result-left:after, .result-left:before {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .result-left:after {
            border-color: rgba(253, 253, 253, 0);
            border-top-color: #fdfdfd;
            border-width: 20px;
            margin-left: -20px;
            margin-top: 0;
        }

        .result-left:before {
            border-color: rgba(223, 223, 223, 0);
            border-top-color: #dfdfdf;
            border-width: 24px;
            margin-left: -24px;
            margin-top: 0
        }

        .result-left .result-container {
            margin-top: 30px;
        }

            .result-left .result-container div {
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-bottom: 10px;
            }

        .result-left img {
            width: 40px;
            margin-right: 10px;
            margin-top: 0;
        }

        .result-left button {
            margin-top: 0;
        }

        .result-left .redirect-text {
            margin-bottom: 20px;
        }


    .result-right {
        width: 100%;
    }

        .result-right .result-container {
            margin-top: 50px;
        }



    input[type=button], input[type=submit] {
        width: 94%;
    }
}

@media (max-width: 1024px) {

    header .container {
        width: 95%;
    }

    .wrapper {
        padding: 10px 0 10px 0;
    }

        .wrapper .container {
            width: 95%;
        }
}

@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */

    .wrapper {
        margin-bottom: 40px;
    }

        .wrapper .container {
            width: 85%;
        }
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */

    .wrapper .container {
        width: 71%;
    }
}