/* --------------------------------------------------
  Override Bootstrap
-------------------------------------------------- */
hr {
  width: 165px; }

.table th {
  color: #835c1a;
  font-weight: 400; }

.table-form th,
.table-form td {
  padding-top: .875rem;
  padding-bottom: .875rem; }

.table-form th {
  width: calc(7em + 1.5rem); }

.form-control {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

textarea.form-control {
  border-radius: 0.3125rem; }

form label {
  position: relative; }
  form label.required:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: -13px;
    border-radius: 50%;
    background-color: #ed5809; }

.form-check .form-check-label {
  width: 100%; }

.form-check input[type="radio"] {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute; }

.form-check input[type="radio"] + .form-check-label:before {
  display: inline-block;
  content: "";
  width: 22px;
  height: 22px;
  border: 1px solid #95989a;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -5px; }

.form-check input[type="radio"]:checked + .form-check-label:before {
  background-color: #f8ae3b;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='white' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 2px 4px;
  background-size: 75%;
  border-color: #f8ae3b; }

.btn-lg {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.btn-primary {
  color: #fff; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
    color: #fff; }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
    color: #fff; }
  .btn-primary.disabled, .btn-primary:disabled {
    background-color: #bcbcbb;
    border-color: #bcbcbb;
    color: #fff; }

.btn-outline-primary {
  background-color: #fff; }
  .btn-outline-primary:hover {
    color: #fff; }
  .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff; }

.btn-link {
  color: #f8ae3b; }
  .btn-link-text {
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: 1; }

.btn-white {
  background-color: #fff; }
  .btn-white:hover, .btn-white:focus, .btn-white.focus {
    background-color: #dee2e6; }

.btn-round {
  border-radius: 18px; }

.navbar {
  height: 70px; }
  .navbar__left, .navbar__right {
    width: 55px; }
  .navbar__left .navbar-btn {
    margin-left: -16px;
    padding: .688rem 1.25rem;
    color: #f8ae3b; }
  .navbar__right {
    text-align: right; }
    .navbar__right > a {
      display: -webkit-inline-box;
      display: inline-flex; }
  .navbar-btn {
    font-size: 1.25rem; }

.navbar-brand {
  -webkit-box-align: center;
  align-items: center;
  margin: auto;
  width: calc(100% - 110px);
  font-weight: 500;
  text-align: center;
  cursor: default; }

.badge {
  vertical-align: middle; }

.jumbotron {
  height: 200px; }

.card {
  border-top-width: 1px; }

.card-header {
  padding: .563rem .9375rem;
  background-color: #ffe4b5;
  font-size: 1rem; }

.card-body {
  padding: .719rem .9375rem; }
  .card-body .table th {
    padding-left: 0;
    width: 6em; }
  .card-body .table td {
    padding-right: 0; }

.modal-header {
  -webkit-box-align: center;
  align-items: center;
  background-color: #fff;
  height: 70px; }
  .modal-header__left, .modal-header__right {
    width: 50px; }

.modal-title {
  width: calc(100% - 100px);
  font-size: 1.125rem;
  text-align: center; }

.modal-body {
  height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden; }

.close {
  opacity: 1; }

/* --------------------------------------------------
  basic structure
-------------------------------------------------- */
body {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px; }

/* --------------------------------------------------
  common styles
-------------------------------------------------- */
.font-16 {
  font-size: 16px; }

.font-14 {
  font-size: 14px; }

.notes {
  font-size: 14px; }

.user-id {
  font-size: 18px; }
  .user-id-lg {
    font-size: 20px; }
  .user-id-label {
    color: #835c1a;
    font-size: 15px; }

form {
  padding-bottom: 5rem; }

/* --------------------------------------------------
  page content styles
-------------------------------------------------- */
.page-heading {
  margin-top: 70px;
  margin-bottom: 40px;
  text-align: center; }

.form-heading {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  text-align: center; }

.form-btn {
  margin-bottom: 2rem; }

.form-container {
  padding-left: 9px;
  padding-right: 9px; }

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 35px;
  height: 35px; }
  .avatar-md {
    width: 44px;
    height: 44px; }
  .avatar-lg {
    width: 100px;
    height: 100px; }
  .avatar img {
    max-width: 100%; }

.credit-info {
  padding: .75rem;
  background-color: #fff;
  border-radius: 0.3125rem;
  text-align: center; }

.item-name {
  margin-left: 1.125rem;
  text-indent: -1.125rem;
  margin-bottom: .5rem; }

.heading {
  margin-bottom: inherit;
  font-size: 16px;
  line-height: 1.5; }

.list-sort .list-group-item {
  padding: 0; }
  .list-sort .list-group-item .form-check {
    padding: .75rem; }

.btn.icon-check {
  position: relative; }
  .btn.icon-check:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 1px solid #ccc;
    border-radius: 50%;
    vertical-align: -5px;
    background-color: #ccc;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='white' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 2px 4px;
    background-size: 75%; }

.brand-logo {
  height: 34px;
  width: auto; }

#kiyaku {
  padding: 1rem;
  background-color: #fff;
  height: calc(100vh - 324px);
  overflow-y: scroll;
  font-size: 14px; }
