body {
        margin: 0px;
        /*width: 100%;
        height: 100%;*/
/*
        background-image: url(/page_background.png);
        background-attachment: fixed;
        background-size: cover;
*/
        background-color: #f2f2f2;
        font-family: system-ui, Arial;
        color: #232f3e;
}
#main_body {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 20px);
        position: relative;
        max-width: 800px;
        min-height: 600px;
        padding-top: 10px;
	padding-bottom: 50px;
}
.logo {
        background-image: url(/webresources/img/simcard-korea-logo.png);
        background-size: contain;
        height: 50px;
        background-repeat: no-repeat;
	background-position: center;
}
.sep {
	margin: 15px 0px;
	border-bottom: 1px #b9b9b9 solid;
}
.mybox_title {
        margin-top: 25px;
        display: flex;
}
.mybox_title .icon {
        font-size: 25px;
        padding-left: 5px;
        width: 43px;
}
.mybox_title > .title {
        flex-grow: 1;
        line-height: 25px;
        font-size: 17px;
}
.mybox {
        background-color: white;
        border-radius: 10px;
        padding: 15px 20px;
        box-shadow: 0px 0px 5px #e8e8e8;
        margin: 8px 0px 10px 0px;
}
.info_table tr td:first-child { font-weight: bold; padding: 5px 40px 5px 0px; }
.info_table tr td:last-child {  }
.info_table { color: inherit; }

.address_table tr td:first-child { font-weight: bold; padding: 5px 40px 5px 0px; }
.address_table { color: inherit; }

.tracking_table { width: 100%; }
.tracking_table tr:first-child th { border-top: 1px #c9c9c9 solid; }
.tracking_table th { text-align: left; font-weight: normal; font-size: 18px; background-color: #f2f2f2; }
.tracking_table th, .tracking_table td { border-bottom: 1px #c9c9c9 solid; padding: 15px 10px; }

ul {
	line-height: 1.5em; 
	list-style-type: disclosure-closed;
}
ul > li {
	padding-left: 3px;
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 100%;
}

.form__group select {
  border: none;
  border-bottom: 2px solid #9b9b9b;
  background-color: white;
  width: 100%;
  height: 40px;
  font-size: 1.3rem;
  color: #3e3e3e;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #3e3e3e;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #d51c17, #d51c17);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #d51c17;
  font-weight: 700;
}

/* reset input */
.form__field:required, .form__field:invalid {
  box-shadow: none;
}


input[type=submit], button {
	cursor: pointer;
	outline: 0;
	color: #fff;
	background-color: #c11510;
	border-color: #c11510;
	display: inline-block;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	border: 1px solid transparent;
	padding: 6px 15px;
	font-size: 16px;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input[type=submit]:hover, button:hover {
	color: #fff;
	background-color: #d51c17;
	border-color: #d51c17;
}





.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
/*  background-color: #ffffff;
  margin: 0 20px;
  width: 280px;
  height: 350px;
  border-radius: 5px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
*/
}

.card .percent {
  position: relative;
}

.card svg {
  position: relative;
  width: 180px;
  height: 180px;
  transform: rotate(-90deg);
}

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
}

.card svg circle:last-of-type {
  stroke-dasharray: 625px;
  stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
  stroke: #3498db; 
}

.card .number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card .number h3 {
  font-weight: 200;
  font-size: 2.5rem;
}

.card .number h3 span {
  font-size: 2rem;
}

.card:nth-child(1) svg circle:last-of-type {
  stroke: #d51c17;
}

.card:nth-child(2) svg circle:last-of-type {
  stroke: #d51c17;
}

.infobox {
        background-color: white;
        width: 100%;
        margin-bottom: 8px;
}
.infobox > div {
        border: 1px #b9b9b9 solid;
        display: flex;
}
.infobox .ico {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        width: 25px;
        text-align: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        background-color: #f2f2f2;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
}
.infobox.hinweis > div {
        border-color: #28a0cc !important;
}        
.infobox.hinweis .ico {
        background-color: #28a0cc !important;
}
.infobox.warn > div {
        border-color: #fe8a01 !important;
}
.infobox.warn .ico {
        background-color: #fe8a01 !important;
}   
.infobox.okay > div, .infobox.success > div {
        border-color: #9dcd25 !important;
}   
.infobox.okay .ico, .infobox.success .ico {
        background-color: #9dcd25 !important;
}
.infobox.error > div {
        border-color: #e41d1d !important;
}
.infobox.error .ico {
        background-color: #e41d1d !important;
}