html {margin: 0; padding: 0;}
body {font: normal 14pt Tahoma; text-align: center; color: #FFF; background-color: #494345;}
a {color: #FD974D;}
label {margin-left: 5px;}

#main {min-width: 320px; max-width: 800px; margin: 0 auto; padding: 0;}
h1 {margin: 32px; font-weight: normal; font-size: 20pt;}

#calcfrm {width: 100%; max-width: 630px; margin: 0 auto; padding: 16px 0; border-radius: 16px; background-color: #858585;}
h2 {margin: 16px; font-weight: normal; font-size: 18pt; color: #FFDA65;}
.mt48 {margin-top: 48px;}

.isdt {width: 100%; text-align: center;}
.isdt select {width: 70%; margin-top: 16px; min-width: 232px; max-width: 300px; padding: 5px 15px; border-radius: 5px; border: solid 1px #d9d5da; font-size: 14pt; text-align: center;}
#itime {clear: both; width: 100%; padding-top: 16px;}
#itime select {width: 108px; padding: 5px 15px; border-radius: 5px; border: solid 1px #d9d5da; font-size: 14pt; text-align: center;}

#irdm {width: 150px; height: 50px; margin: 0 auto; text-align: center;}
.ird {position: relative; float: left; margin: 16px;}

.btn {width: 232px; height: 48px; margin: 32px auto 16px; font-size: 16pt; background: #FFDA65; border-radius: 8px;}

#calcres {width: 100%; max-width: 630px; min-height: 500px; margin: 0 auto; padding: 16px 0; border-radius: 16px; background-color: #858585;}
#bzc {margin: 48px auto; font-size: 36pt;}
#bzc td {min-width: 70px; vertical-align: top;}
#ccap {height: 25px; font-size: 12pt; color: #D0D0D0;}
#ccap td {vertical-align: middle;}
.strl {max-width: 70px; margin: 16px auto; font-size: 12pt; color: #FFDA65;}

#bzlc {width: 100%; text-align: center;}
#bzlc .strl {margin: 8px auto;}
#bzlc td {min-width: 70px; max-height: 120px; font-size: 28pt; vertical-align: top;}
.cap td {height: 25px; font-size: 10pt!important; color: #D0D0D0; vertical-align: middle!important;}
#lct1 div {width: 250px; margin: 32px auto; text-align: center;}
#lct2 div {margin: 32px auto;} 
#bzlc div table {max-height: 300px; margin: 0 auto;}
.clb {clear: both; width: 100%;}
#lct2 {display: none;}

#bzclr {min-width: 200px; max-width: 350px; height: 30px; margin: 30px auto 0; padding: 0 32px; font-size: 14pt; color: #FFDA65;}
#bzclr select {display: none; padding: 3px 6px; margin: 4px 0 0 4px; font-size: 12pt; color: #494345; border-radius: 5px; border: solid 1px #d9d5da;}
#bzclr .checkopt, #bztslt .checkopt {float: left;}

#bztslt, #ctheme {height: 35px; min-width: 200px; max-width: 350px; margin: 24px auto; padding: 0 32px; font-size: 14pt; color: #FFDA65; text-align: left;}
#ctheme {margin-top: 10px;}

.checkopt {display: block; position: relative; padding-left: 22px; margin-top: 3px; cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkopt input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0px; left: 0; margin-top: 6px; height: 13px; width: 13px; border: solid 1px #d0cbd2; border-radius: 4px; background-color: #fff;}
.checkopt:hover input ~ .checkmark {background-color: #fffcf5;}
.checkopt input:checked ~ .checkmark {background-color: #fffcf5;}
.checkmark:after {content: ""; position: absolute; display: none;}
.checkopt input:checked ~ .checkmark:after {display: block;}
.checkopt .checkmark:after {left: 4px; top: 1px; width: 3px; height: 7px; border: solid #494345; border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}


#ftr {clear: both; width: 100%; margin-top: 32px; text-align: center;}
#fttx {width: 250px; margin: 32px auto;}
#fttx img {width: 108px; height: auto; margin-bottom: 16px; border-radius: 8px; vertical-align: text-top;}
#rlta, #rltt {position: relative; float: left; width: 100%; margin: 16px auto;}

#ftinfo {margin: 32px;}


@media (min-width: 450px) {
  .isdt select {width: 128px; min-width: 128px; margin-left: 16px;} 
  #irdm {width: 280px;}
  #fttx {width: 450px;}
  #fttx img {margin: auto 8px;}
  #rlta {width: auto; margin: 8px 72px 8px 16px;}
  #rltt {width: auto; margin: 8px;}
  #bzc {font-size: 42pt;}
  #bztslt {margin-top: 8px; height: 20px;}
  #bzclr select {margin-top: 0;}  
}

@media (min-width: 540px) {
  #lct1 {display: none;}
  #lct2 {display: inline-block;}
}

.cfire {color: #DB3131!important;}
.cwood {color: #79cc79!important;}
.cearth {color: #494345!important;}
.cmetal {color: #B6B6B6!important;}
.cwater {color: #69b2fc!important;}