* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*::before,
::after {
    box-sizing: inherit;
}

html {
    width: 100%;
    font-size: 16px;
}

body {
    font-family: Helvetica, "times new roman", Courier, Arial, Verdana, sans-serif;
    font-size: .9em;
    width: 100%;
    min-width: 280px;
    margin: 0 auto;
    background-color: #A1BBC8;
   
}

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

/* input ,select */{
    /*font-size:.8em;
    width: 35px;
    */
}

select#age {
    width: 120px;
}

#dwz_left ul li select {
    float: right;
    width: 45px;
    margin-left:12px;
}

#dwz_left ul li select option {
    width: 30px;
}

.player {
    width: 170px;
}

#dwz_left ul li {
    display: inline-block;
    width:130px;
    min-width: 110px;
    margin: 5px 0;
    list-style-type: none;
    line-height:1em;
}

a#add,
a#remove {
    color: #000;
    font-weight: bolder;
    text-decoration: none;
}

a:hover#add {
    color: #00ff00;
    text-decoration: none;
}

a:hover#remove {
    color: #f00;
    text-decoration: none;
}

#dwz_left ul li input {
    width: 35px;
}

#dwz {
    width: 100%;
    min-width: 280px;
    margin: 0 auto 1rem auto;
    /*height:100%;*/
    border: none;
    padding: 15px 10px;
    background-color: #FFF;
    /*overflow: hidden;
	height: 100vh;
    */
}

#dwz fieldset#dwzForm {
    width: 100%;
    min-width: 60%;
    height: 100%;
    padding: 10px 10px;
    border: 1px solid #999999;
    overflow: hidden;
}

#dwz fieldset#dwzForm legend {
    font-weight: bold;
    font-size: 16px;
    font-style: oblique;
    color: #333;
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 5px;
    text-decoration: none;
}

#dwzForm>#dwz_left {
    /*
    width:50%;
    
     height: 100%;*/
    /*min-width: 280px; */
    max-width: 210px;
    display: block;
    float: left;
    padding: 10px 15px;
    margin-right: 10px;
    border: 0 solid #0099FF;
}

#dwzForm>#content {
    position: relative;
    /*width:100%;*/
    display: block;
    /*height: 100vh;*/
    /*min-width: 180px;  */
    min-width: 200px;
    max-width: 360px;
    font-size: .8em;
    padding-top: 26px;
    margin-right: 10px;
    /*margin-left: 10px;*/
    float: left;
    border: 0 solid #ff33c0;
    /*background-color: #66ffcc;*/
}

#submit_dwz {
    width: 140px;
    height: 36px;
    margin: 0 0 12px 0;
    color: #333;
    /*#996600;*/
    background: #DCDCDC;
    /* #FFFFCC*/
    font-weight: 600;
}

#submit_dwz:hover {
    color: #f7f3ec;
    background: #9f9f93;
}

.clear_both {
    clear: both;
}

.new_line {
    clear: both;
    width: 100px;
    margin: 2px;
    height: 2px;
}


/* jQuery Form-validator */

label {
    font-size: .9em;
}

label.error {
    position: relative;
    display: block;
    margin: 0 auto 0 2px;
    padding: 0;
    color: red;
    font-style: italic;
    font-size: .9em;
    float: right;
}

#dwz_old input {
    width: 30px;
    float: left;
}

div.error {
    display: none;
}

input {
    border: 1px solid #999999;
}

input.checkbox {
    border: none
}

input:focus {
    border: 1px dotted #999999;
}

input.error {
    border: 1px dotted red;
}

.remark {
    font-size: .9em;
}

#add #remove {
    text-align: left;
    width: 145px;
}

#add img {
    display: block;
    border: none;
    float: left;
}

#remove img {
    display: block;
    border: none;
    float: left;
}

#output_on img,
#output_off img,
#add img,
#remove img {
    width: 20px;
}

#dwz>#info {
    font-size: 11px;
    font-style: italic;
}

#dwz>#info a {
    color: #000;
    font-weight: bolder;
    text-decoration: none;
}

#dwz>#info a:hover {
    color: #0099FF;
}

.hide {
    display: none;
}

.active {
    display: block;
}

#noJScript img {
    display: block;
    width: 28px;
    float: left;
    margin-right: 8px;
}

#output {
    margin: 0;
    padding: 0;
    border: 0px solid #0099FF;
}

a#output_on {
    color: #000;
    /*#0000ff;*/
    font-weight: bolder;
    text-decoration: none;
}

a#output_off {
    color: #000;
    /*#0000ff;*/
    font-weight: bolder;
    text-decoration: none;
}

a:hover#output_on {
    color: #00ff00;
    text-decoration: none;
}

a:hover#output_off {
    color: #f00;
    text-decoration: none;
}

#loader {
    position: absolute;
    display: block;
    margin-top: 20px;
    margin-left: 130px;
    padding: 0;
    color: red;
    font-style: italic;
}

#err_before {
    display: none;
}

@media all and (max-width: 700px) {
    #dwzForm>#dwz_left {
        /* width:40%;*/
        max-width: 220px;
    }
    #dwzForm>#content {
        /*width:60%;*/
        max-width: 220px;
    }
}

@media all and (max-width: 480px) {
    #dwzForm>#dwz_left {
        width: 100%;
        float: none;
    }
    #dwzForm>#content {
        width: 100%;
        float: none;
    }
}