@charset "UTF-8";

html,
body {
    min-height: 100%;
}

body,
div,
form,
input,
select,


h1 {
    margin: 0;
    font-weight: 400;
}

h3 {
    margin: 12px 0;
    color: #34b6e8;
}

.main-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

form {
    width: 100%;
    padding: 20px;
}

fieldset {
    border: none;
    border-top: 1px solid #34b6e8;
}

.account-details,
.personal-details,
.claim-details,
.referral-details,
.service-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



.account-details>div,
.personal-details>div>div,
.claim-details>div>div,
.referral-details>div>div,
.service-details>div>div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.account-details>div,
.personal-details>div,
.claim-details>div,
.referral-details>div,
.service-details>div,
input,
label {
    width: 100%;
}

label {
    padding: 0 5px;
    text-align: right;
    vertical-align: middle;
}

input {
    padding: 5px;
    vertical-align: middle;
}

.checkbox {
    margin-bottom: 10px;
}

select,
.children,
.gender,
.bdate-block {
    width: calc(100% + 26px);
    padding: 5px 0;
}

select {
    background: transparent;
}

.gender input {
    width: auto;
}

.gender label {
    padding: 0 5px 0 0;
}

.bdate-block {
    display: flex;
    justify-content: space-between;
}

.birthdate select.day {
    width: 35px;
}

.birthdate select.mounth {
    width: calc(100% - 94px);
}

.birthdate input {
    width: 38px;
    vertical-align: unset;
}

.checkbox input,
.children input {
    width: auto;
    margin: -2px 10px 0 0;
}

.checkbox a {
    color: #8ebf42;
}

.checkbox a:hover {
    color: #82b534;
}

button {
    width: 100%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #8ebf42;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

button {
    width: 100%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #34b6e8;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.add-service {
    width: 10%;
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    border: none;
    background: #34b6e8;
    font-size: 14px;
    font-weight: 600;
    color: #fff; 
}
button:hover {
    background: #82b534;
}

@media (min-width: 568px) {

    .account-details>div,
    .personal-details>div,
    .claim-details>div,
    .referral-details>div,
    .service-details>div {
        width: 50%;
    }

    label {
        width: 40%;
    }

    input {
        width: 30%;
    }

    select,
    .children,
    .gender,
    .bdate-block {
        width: calc(30% + 1px);
    }
}