﻿.screen-content[data-css-name="Diagnosis"] {
  color: white;
  background-color: #000000;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] {
    background-color: #332F2E;
  }
}
.screen-content[data-css-name="Diagnosis"] .btn-malignant {
  position: absolute;
  bottom: 82.4px;
  left: calc(50vw - 440px - 38px);
  z-index: 100;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .btn-malignant {
    width: calc(50vw - 36px);
    bottom: 10px;
    left: 18px;
  }
}
.screen-content[data-css-name="Diagnosis"] .btn-benign {
  position: absolute;
  bottom: 82.4px;
  right: calc(50vw - 440px - 38px);
  z-index: 100;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .btn-benign {
    width: calc(50vw - 36px);
    bottom: 10px;
    right: 18px;
  }
}
.screen-content[data-css-name="Diagnosis"] .btn-malignant:not(:hover),
.screen-content[data-css-name="Diagnosis"] btn-benign:not(:hover) {
  box-shadow: rgba(28, 40, 49, 0.4) 0 10px 20px;
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__image {
  position: absolute;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
  z-index: 11;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__image {
    object-fit: contain;
    height: 100vw;
    margin-top: 60px;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 12;
  background-color: rgba(0, 0, 0, 0.8);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper {
    visibility: hidden;
    display: flex;
    height: 100vw;
    margin-top: 60px;
    align-items: center;
    justify-content: center;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player {
  width: 536px;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai,
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player {
    width: 50vw;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_name,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_name,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_diagnosis,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_diagnosis {
  color: #E6E6E6;
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_name,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_name {
  height: 25px;
  font-size: 20px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_name,
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_name {
    font-size: 12px;
    margin-bottom: unset;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_diagnosis,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_diagnosis {
  height: 75px;
  font-size: 60px;
  font-weight: lighter;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_diagnosis,
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_diagnosis {
    height: unset;
    font-size: 25px;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_point,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_point {
  font-size: 120px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_point,
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_point {
    font-size: 40px;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_icon,
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_icon {
  width: 138px;
  height: 116px;
  margin: auto;
  margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_icon,
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_icon {
    width: 46px;
    height: 39px;
    margin-bottom: 10px;
    background-size: contain;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai {
  position: absolute;
  top: 27.78vh;
  right: 50vw;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai {
    position: unset;
    top: unset;
    right: unset;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_icon {
  background: url(/images/icon_ai.png) center no-repeat;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-ai .result_icon {
    background-size: contain;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player {
  position: absolute;
  top: 27.78vh;
  left: 50vw;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player {
    position: unset;
    top: unset;
    right: unset;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_icon {
  background: url(/images/icon_player.png) center no-repeat;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .result-player .result_icon {
    background-size: contain;
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .btn-next {
  position: absolute;
  bottom: 14.11vh;
  left: calc(50vw - 440px / 2);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper .btn-next {
    bottom: -200px;
    left: calc(50vw - 161.74px / 2);
  }
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper.shown {
  visibility: visible;
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper[data-diagnosis-result=true] {
  background-color: rgba(25, 150, 91, 0.8);
}
.screen-content[data-css-name="Diagnosis"] .image-diagnosis .image-diagnosis__result-wrapper[data-diagnosis-result=false] {
  background-color: rgba(181, 22, 30, 0.8);
}