/* mobile first min-width sets base and content is adapted to computers. */
@media (min-width: 100px) {
    body {
        background-color: #0093E9;
        /*background-image: linear-gradient(200deg, #b6fff2 0% ,#94d9ff 100%);*/
        /*background-image: linear-gradient(200deg, #cccccc 0% , #a6a6a6 100%);*/

        /*background-image: linear-gradient(200deg, #cbfff3 0%, #b4e5ff 100%);*/
        background: white;
    }

    main {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    h2 {
        margin-top: 20px;
        margin-bottom: 40px;
        letter-spacing: 1px;
    }

    #client-message-div {
        width: 100%;
    }
    #client-message-div label{
        margin-left: 15px;
    }

    textarea {
        border-radius: 30px;
        border: none;
        border: 4px solid #1d598c;
        margin-top: 10px;
        /*border: 4px solid #b5d2ad;*/
        width: 100%;
        font-size: 18px;
        background: rgba(15, 70, 107, 0.05);
        /*background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/

        padding: 20px 25px 20px 25px;
        line-height: 21px;
        min-height: 200px;
        overflow: hidden;
        /*box-shadow: 0 2px 30px rgba(0, 215, 0, 1);*/
    }

    textarea:focus {
        outline: #eef0f1;
        box-shadow: 0 2px 10px rgba(46, 62, 80, 0.24);
    }


    /*Next icon*/
    .submit-btn-div {
        padding: 6px 15px 0;
        border-radius: 11px;
        width: 70px;
        height: 43px;
        float: right;
        margin: 10px 10px 0;
        border: 1px solid #1d598c;
        border-bottom: 4px solid #1d598c;

        background: rgba(46, 62, 80, 0.06);
        /*background-image: linear-gradient(to right, #b6ffec 0%, #a9dfff 100%);*/
        text-align: center;
        box-shadow: 0 0px 10px rgba(46, 62, 80, 0.12);
        cursor: pointer;
    }

    .submit-btn-div:hover {
        /*border-left: 1px solid #1d598c;*/
        /*border-top: 1px solid #1d598c;*/
        /*border-right: 1px solid #1d598c;*/
        /*background-image: linear-gradient(to right, #a4ffe9 0%, #8ed5ff 100%);*/
        box-shadow: 0 0px 10px rgba(46, 62, 80, 0.22);
    }

    .submit-btn-div:focus {
        border-bottom-width: 1px;
        transform: translateY(4px);
    }

    .submit-btn-div img {
        width: 25px;
        height: 25px;
    }

    #submit-form-btn-div {
        padding-left: 12px;
    }
    #go-back-btn-div{
        float: left;
    }
    #go-back-btn-div img{
        transform: rotate(180deg);
    }

    #create-client-form{
        width: 100%;
    }
    /*Flipping card*/
    .card {
        perspective: 1200px;
        width: 100%;
        position: relative;
        box-shadow: none;
        background: none;
        margin-bottom: 350px;
    }
    /*Remove transition */
    .no-animation-on-page-load{
        /*transition: none !important;*/
    }
    .card-side {
        width: 100%;
        /*height: 35rem;*/
        border-radius: 35px;
        transition: transform 0.8s ease;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        /*width: 80%;*/
        padding: 32px 15px;
        color: white;

        box-shadow: 0 3px 20px rgba(46, 60, 80, 0.24);
        background: rgba(0, 0, 0, 0.05);
    }

    .card-side.back {
        transform: rotateY(-180deg);
    }

    .card-side.front {

    }

    .card.flipped .card-side.front {
        transform: rotateY(180deg);
    }

    .card.flipped .card-side.back {
        transform: rotateY(0deg);
    }

    /*Overwrite form.css*/
    .form-input-div label.form-radio-input, .form-radio-input{
        display: inline-grid;
    }

    /*Success*/
    #success-message{
        text-align: center;
    }
    #success-message img{
        width: 70px;
    }
    #success-message h3{
        margin-top: 0;
    }
}

@media (min-width: 420px) {
    /*#client-message-div {*/
    #create-client-form {
        width: 100%;
    }

    .card-side {
        padding: 32px;
    }
}

@media (min-width: 767px) {
    /* iPad mini */
    /*#client-message-div {*/
    #create-client-form {
        width: 80%;
    }
}

@media (min-width: 900px) {
    #create-client-form {
        width: 70%;
    }
}

@media (min-width: 1200px) {
    /*#client-message-div {*/
    #create-client-form {
        width: 60%;
    }
}