body {
   font-family: "Noto Sans Japanese", "Helvetica Neue", Meiryo, sans-serif;
   font-weight: 400;
}
/* 
form {
   padding: 20px;
   border: 1px solid #cccccc;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -moz-box-shadow: 0 0 10px #ccc;
   box-shadow: 0 0 10px #ccc;
   background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ffffff),
      to(#f2f2f2)
   );
} */

h1 {
   text-align: center;
   color: black;
   letter-spacing: 1.5px;
   word-spacing: 1px;
   position: relative;
   top: -10px;
   font-family: "Noto Sans Japanese", "Helvetica Neue", Meiryo, sans-serif;
}

h4 {
   text-align: center;
   color: black;
   letter-spacing: 0.8px;
   word-spacing: 0.9px;
   position: relative;
   top: -5px;
   font-family: "Noto Sans Japanese", "Helvetica Neue", Meiryo, sans-serif;
}

/* p {
   display: inline;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
} */

input {
   font-family: "Noto Sans Japanese", "Helvetica Neue", Meiryo, sans-serif;
   text-align: left;
}

.progress {
   background-color: rgb(229, 233, 235);
   height: 2em;
   position: relative;
   width: 100%;
}

.dont-break-out {
   /* These are technically the same, but use both */
   overflow-wrap: break-word;
   word-wrap: break-word;
   -ms-word-break: break-all;
   /* This is the dangerous one in WebKit, as it breaks things wherever */
   word-break: break-all;
   /* Instead use this non-standard one: */
   word-break: break-word;
   /* Adds a hyphen where the word breaks, if supported (No Blink) */
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

#logo {
   width: 6%;
   margin-top: -8px;
}

@media screen and (max-width: 576px) {
   #logo {
      /* display: none; */
   }
}

.bg-light {
   background-color: white;
}

#brand-title {
   color: black;
}

.signin-title {
   margin: 15px;
}

.input-field > label:first-of-type {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 400;
}

.input-field > label:first-of-type.h5 {
   font-weight: 600;
}

.input-field {
   position: relative;
   margin-bottom: 1.5rem;
   margin-top: 1.5rem;
   border-radius: 0px;
}

.signin {
   width: 100%;
   border-radius: 0px;
   margin-top: 1rem;
   padding: 0.6rem;
}

.btn-custom {
   background-color: #009933;
   border-color: #00802b;
   color: white;
}

.btn-custom:active,
.btn-custom:target,
.btn.btn-custom:active,
.btn.btn-custom:focus,
.btn.btn-custom:hover {
   -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
   background-color: white;
   color: #009933;
   border-color: #009933;
}

.btn.btn-custom:disabled,
.btn.btn-custom[disabled] {
   cursor: not-allowed;
   pointer-events: none;
   border: 1px solid #999999;
   background-color: #cccccc;
   color: #666666;
}

.btn.btn-dark:active,
.btn.btn-dark:focus,
.btn.btn-dark:hover {
   -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
   background-color: white;
   color: black;
}

.upload-title {
   display: inline;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   margin-bottom: 20px;
}

.lead {
   font-size: 1.25rem;
   font-weight: 300;
}

#fileDrag {
   font-weight: bold;
   text-align: center;
   padding: 1em 0;
   margin: 1em 0;
   color: #555;
   border: 2px dashed #555;
   border-radius: 7px;
   cursor: default;
}

#fileDrag.hover {
   color: rgb(45, 143, 15);
   border-color: rgb(45, 143, 15);
   border-style: solid;
   box-shadow: inset 0 3px 4px #888;
}

#s3-img {
   display: inline;
   margin-left: 15px;
   width: 8%;
}

@media screen and (max-width: 1024px) {
   #s3-img {
      width: 10%;
   }
}

@media screen and (max-width: 992px) {
   .upload-form {
      margin-top: 15px;
   }
}