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

html {
  width:100%;
  height:100%;
}

body {
  width:100%;
  height:100%;
  color: #000;
  background-color: #fff;
}

.container {
  width:100%;
  height:90%;
  display:flex;
  flex-flow:column wrap;
  align-items:center;
  justify-content:center;
}

#cardbox {      
  width: 400px;
}

#iconImage {
  display:inline;
}

#titleText {
  font-size:1.4em;
  font-weight:bold;
  color:#777;
}

#contentsText {
  color:#999;
}

#form1 {
  padding:1em;
}

.row {
  height:3em;
}

.col1 {
  width:5em;
}

.inputbox {
  width:20em;
}

#buttonContainer {
  padding-top:0.6em;
  text-align:right;
}

#loading-animation {
  position:absolute;
  display: none;
  opacity: 0;
  z-index:20;
}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  opacity: 0;
  background-color: #fff;
  display:none;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
      #cardbox {
      width:90%;
      margin-left: 5%;
    }     

    label[id=contentsText] {
      display:none;
    }
  }