body {
  color: #ffffff;
  background-color: #000;
}
.certification-card {
  width: 80vw;
  max-width: 400px;
  min-height: unset;
  margin: clamp(50px, 15vw, 100px) auto;
  position: relative;
  background-color: #000;
}
.login-err-msg {
  position: absolute;
  padding-top: 15px;
  font-size: 15px;
  left: 0;
  width: 100%;
}
.text-align-center {
  text-align: center;
}
.text-register {
  float: right;
  position: relative;
  margin-top: 28px;
  color: #fff;
}
.text-register:hover {
  color: #fff;
}
img.company-banner {
  position: relative;
  margin-top: 8%;
}
.certification {
  text-align: center;
}
.certification a {
  text-decoration: none;
}
.certification a:hover {
  color: #343a40;
}
.certification a h5 {
  padding-top: unset;
  font-size: 0.9rem;
  margin-top: 7%;
}
.btn-default {
  background-color: #343a40;
  border: none;
  border-radius: 8px;
  position: relative;
  color: #eef2f7;
}
.btn-default:hover {
  color: #eef2f7;
}
.btn-login,
.btn-register,
.btn-submit {
  width: 220px;
  height: 35px;
  margin-top: 20%;
}
.input-control {
  padding-top: 0.375rem;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  border: none;
  /*height: 35px;*/
}
.certification-card .certification.text-color-white {
  position: relative;
}
.certification .input-control:nth-of-type(1),
.certification .new-password {
  margin-bottom: 30px;
}
input[type='email'] + .field-validation-error,
#NewPassword.new-password + .field-validation-error {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 100%;
  top: 36px;
}
.company-logo {
  background-image: url('../images/logo.png');
}
.text-color-white {
  color: #ffffff;
}
.text-color-default {
  color: #343a40;
}
/* ===  修正＠画像アップロード画面[写真を投稿]ボタンhoverでボタン消える  =============== */
input#upload_submit {
  border: 1px solid #fff;
}
input#upload_submit:hover {
  color: #131313;
  border: 1px solid #131313;
}
/* ===============  修正＠写真を多めにアップしようとするとはみ出てしまう  =============== */
#image-registration-modal #dropzoneForm {
  overflow-y: scroll !important;
}
#image-registration-modal #dropzoneForm::-webkit-scrollbar {
    width: 10px;
}
#image-registration-modal #dropzoneForm::-webkit-scrollbar-track {
    background: #dfdfdf;
}
#image-registration-modal #dropzoneForm::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
/* #image-registration-modal .scrollspy-example {
  height: auto !important;
} */
/* ===============  修正＠文字と画像をセンター配置  =============== */
#image-registration-modal #dropzoneForm .dz-message {
  width: calc(100% - 20px);
}
/* ===============  修正＠文字と画像をセンター配置  =============== */

/* #image-viewer-modal #blockGallery{
  position: unset;
}
#image-viewer-modal .modal-image-viewer{
  width: 80vw;
}
#image-viewer-modal .modal-body>.row {
  flex-direction: column;
}
#image-viewer-modal .modal-image-viewer .image-detail-col,
#image-viewer-modal .modal-image-viewer .image-detail-col .slider,
#image-viewer-modal .modal-image-viewer .image-uploader-wrapper{
  width: 100%;
}
#image-viewer-modal .modal-image-viewer .image-uploader-wrapper{
text-align: center;
}
#image-viewer-modal .modal-image-viewer .content {
  margin-right: 0;
}
#image-viewer-modal .modal-image-viewer .dots-image-container {
  margin-left: 0;
  text-align: center;
}
#image-viewer-modal .dots-image-container .dropdown_body{
width: 170px;
} */
/* dotが途中 */
/* ==========  修正＠ファイルアップロード画面高さ  ========== */

/* ===============  ダークモード修正  =============== */

#tagArea div p {
  margin-bottom: 0.5rem;
}

/** TODO: need specific class name for this */
.content-wrapper {
  margin-top: 64px !important;
}

@media only screen and (max-width: 599px) {
  .content-wrapper {
    margin-top: 96px !important;
  }

  .navbar-header .container-fluid {
    display: initial !important;
  }

  /*.navbar-header .container-fluid > div:first-child {*/
  /*  width: 100% !important;*/
  /*}*/
}

@media only screen and (max-width:600px) {
  .thumbnail-container .image-col {
    padding: 4px !important;
  }

  .modal-image-viewer {
    width: 100% !important;
  }
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
  .thumbnail-container .image-col {
    padding: 4px !important;
  }

  .modal-image-viewer {
    width: 100% !important;
  }
}

.main-home{
  margin-top: 3.7rem;
}

@media screen and (max-width: 600px) {
  .main-home{
      margin-top: 5.5rem;
  }
}

@media only screen and (min-width: 360px) and (max-width: 499px) {
  .thumbnail-container .image-col {
    padding: 4px !important;
  }

  .modal-image-viewer {
    width: 100% !important;
  }
}

@media only screen and (min-width: 500px) and (max-width: 599px) {
  .thumbnail-container .image-col {
    padding: 4px !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 740px) {
}

@media only screen and (min-width: 740px) and (max-width: 1023px) {
}

.company-banner {
  object-fit: cover;
  max-width: 100%;
}

#showPreviewImageModal .modal-dialog {
  max-width: initial;
}

#showPreviewImageModal .modal-dialog .modal-content {
  width: initial;
  margin: 0 auto;
}

#showPreviewImageModal #myCanvas {
  max-height: calc(80vh - 10px) !important;
}

.z-index-99 {
    z-index: 99 !important;
}

.project_tags > a {
  text-decoration: none;
}

.btn:hover {
  background-color: #879099 !important;
}
.text-left {
  text-align: left;
}