.button {
    background-color: #346B80;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 15px;
    color: #fff;
    border: none;
    font-weight: bold;
    min-width: 80px;
    background-color: #355CAF;
    color: #eac67a;
    min-width: 120px;
    padding: 12px 24px;
    font-size: 17px;
    border-radius: 24px;
}
div.form-sub {
    max-width: 600px;
    margin: auto;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.block.left div.form-sub {
    margin: 0;
    padding-bottom: 8px;
    display: block;
}
div.form-sub > * {
    flex: 1 1 300px;
    margin-right: 5px;
    margin-left: 5px;
}
div.form-sub > * {
}
div.form-sub .pair {
    flex: 1 1 47%;
    min-width: 250px;
}
div.form-sub .pair:nth-child(2) {
    margin-right: 10px;
}
.form-sub .input {
    padding: 7px;
    border-radius: 4px;
    border: 1px solid #666;
    margin-top: 2px;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}
.form-sub .input-img,
.form-small .input
{
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #666;
    margin: 2px;
    display: block;
    font-size: 15px;
    width: 100%;
}
.form-sub .button,
.form-small .button
{
    cursor: pointer;
}
.form-sub .button:hover,
.form-small .button:hover
{
    font-weight: bold;
}
.button-bar
{
    width: auto;
    display: block;
    margin: auto;
    margin-bottom: 8px;
    text-align: center;
}
.button-bar div
{
    margin: 0px 10px;
    text-align: left;
}
.button-bar div[for]{
    font-weight: normal;
}
.button-bar .form-link {
    font-size:13px;
    padding: 2px;
    color: #18121e;
    white-space: nowrap;
}
div.form-sub .input,
#error,
#info
{
    width: 100%;
}
div.form-sub .input {
    color: #333;
}
div.form-sub label {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}
div.form-sub .input::-webkit-input-placeholder {
}
.form-sub .img-edit
{
    background-color: #d0d8e0;
    padding-top: 8px;
    margin-bottom: 8px;
}
.form-sub .img-edit div.img-edit-wrap,
.form-sub .img-edit div.img-edit-sub,
.form-sub .img-edit div.ctrl-wrap label
{
}
.form-sub .img-edit div.img-edit-wrap
{
    width: 24%;
    min-width: 100px;
}
.form-sub .img-edit div.img-edit-wrap img
{
    width: 100%;
    padding: 0px 8px;
}

.form-sub .img-edit div.img-edit-sub
{
}
.form-sub .img-edit-sub{
    width: 75%
}
.form-sub .input-img{
}
.form-sub .img-edit div.ctrl-wrap input
{
    width: 79%;
}
.form-sub .img-edit div.ctrl-wrap label
{
    width: 20%;
    text-align: right;
    padding-right: 8px;
}
.form-sub .img-edit div.img-edit-wrap .ctrl-list
{
    text-align: center;
}
.form-sub .img-edit div.ctrl-wrap div.ctrl-list
{
    width: 79%;
}
.form-sub .img-edit div.ctrl-wrap div.ctrl-list label
{
    font-weight: normal;
    padding-left: 3px;
}
.form-sub .img-edit div.ctrl-list label,
.form-sub .img-edit div.ctrl-list input
{
    display: inline-block;
    width: auto;
}
.form-sub .link-thumb img
{
    max-width: 200px;
}
div.content-sub
{
    margin: auto;
    max-width: 90%;
    margin-top: 20px;
    min-height: 200px;
}
body.ligh form {
    max-width: 500px;
    background-color: #D1D6D8;
}
body.light form {
    background-color: #D1D6D8;
    margin: 5vh auto 5vh auto;
    margin-top: 5vh;
    max-width: 600px;
}
body.light form h1 {
    color: #fff3c4;
    margin: 0px;
    background-color: #233237;
    width: 100%;
    margin: auto;
    font-size: 28px;
    padding: 4px;
}
body.block form .button,
body.light form .button {
    color: #fff;
}
body.light .form-sub {
    margin: 10px;
}
body.block div.form-sub label {
    color: #fff;
}
div.captcha-wrap {
    margin: auto;
    width: 300px;
    margin-bottom: 8px;
    max-width: 300px;
}
div.g-recaptcha
{
    margin: auto;
}
div.form-sub .button:disabled
{
    background-color: #666;
    color: #aaa;
}
div.form-sub textarea
{
    min-height: 100px;
}
div.error,
div.info
{
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 4px;
}
div.error:empty,
div.info:empty
{
    display: none;
}
div.error {
    color: #D4711C;
    background-color: #FFE9B2;
}
div.info
{
    color: rgb(11, 162, 11);
    background-color: rgba(230, 230, 200, 1);
    border-bottom: 1px solid rgba(190, 190, 170, 1);
}
div.error p,
div.info p {
    font-size: 14px;
}
div.error a,
div.error a:visited
{
    color: rgb(180, 40, 12);
}
div.error a:hover
{
    color: rgb(242, 160, 36);
}
#info
{
    font-weight: bold;
    color: rgb(96, 192, 96);
    text-align: center;
}

/* modal overlay */
.loading-modal {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0px;
    left:       0px;
    right:      0px;
    bottom:     0px;
    background-color: rgba( 255, 255, 255, .7 );
    background-image: url(/assets/image/loading/ajax-loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
.loader-loading {
    position: relative;
}
.loader-loading .loading-modal {
    display: block;
}
/* /modal overlay */

#gameForm .ui-button {
    background-color: #fff;
    color: #233237;
    border: none;
}
#gameForm .ui-button:hover {
    background-color: #7FA8FF/*#346B80*/;
    color: #fff;
    font-weight: bold;
}
#gameForm .ui-checkboxradio-checked,
#gameForm .ui-button:active {
    background: #355CAF;
    background-color: #355CAF;
    color: #fff;
    border: none;
}
.form-sub div.input.check-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.form-sub div.input.check-list > * {
    flex: 1 1;
    margin: 2px;
}
.input.check-list label {
    background-color: #fff;
    border-radius: 5px;
    z-index: 10;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    cursor: pointer;
}
body.block div.form-sub .input.check-list label {
    color: #333;
}
body.block div.form-sub .input.check-list label.selected {
    background-color: #355CAF;
    color: #fff;
}
.input.check-list label input[type='radio'] {
    z-index: -1;
    position: absolute;
    top: -100px;
    left: -100px;
}

#gameForm div.input.check-list {
}
#gameForm .form-sub div.input.check-list.small > * {
    flex-basis: 50px;
}
#gameForm .form-sub div.input.check-list p {
    color: #fff;
}
#gameForm .form-sub div.input.check-list.detail .pair {
    flex-basis: 100%;
    display: flex;
    flex-flow: row wrap;
}
#gameForm .form-sub div.input.check-list.detail .pair p {
    flex-basis: 70%;
    flex: 10 1;
    font-size:12px;
}
#gameForm .form-sub div.input.check-list.detail .pair label {
    min-width: 100px;
    height: 26px;
    vertical-align: middle;
    padding-top: 4px;
    margin-right: 6px;
}

label.img-check input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
label.img-check {
    display: flex;
    align-items: center;
    color: #CCEAF4;
    font-size: 14px;
    font-weight: bold;
}
label.img-check img {
    padding-right: 4px;
}
label.img-check input ~ img.checked {
    display: none;
}
label.img-check input:checked ~ img.checked {
    display: inline-block;
}
label.img-check input ~ img.unchecked {
    display: inline-block;
}
label.img-check input:checked ~ img.unchecked {
    display: none;
}

.vs_format_fix {
}

@media only screen and (max-width: 620px) {
    body .light form {
        max-width: 92%;
    }
}

@media only screen and (max-width: 370px) {
    div.capctha-wrap {
        width: 240px;
        max-width: 240px;
    }

    div.g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
}

@media only screen and (max-width: 300px) {
    .button-bar {
        width: 100%;
        text-align: center;
    }

        .button-bar .button {
            margin: 6px auto;
            width: 75%;
        }
}