.login-modal nav,
.register-modal nav {
  display: block;
}

.login-modal nav a ,
.register-modal nav a {
  width: 100%;
  margin-bottom: 20px;
  justify-content: center;
}

.login-modal hr,
.register-modal hr {
  height: 1.5px;
  margin-bottom: 30px;
}

.login-modal .info,
.register-modal .info,
.interests-modal .info {
  margin-bottom: 0;
}

/* login */
.login-modal input:last-of-type {
  margin-bottom: 20px;
}

.pop-up-content h4.line span {
  background-color: none;
}

.login-modal form a {
  align-self: flex-end;
  color: var(--black);
}

.login-modal form button {
  margin-top: 40px;
  margin-bottom: 35px;
}

.login-modal .join-data {
  display: flex;
  align-items: end;
  justify-content: center;
}

.login-modal .join-data h3 {
  color: #00D47f;
  cursor: pointer;
  margin-left: 15px;
}


/* login-error */
.login-error > .pop-up-content {
  background-image: none;
  max-width: 870px;
  max-height: 400px;
  height: 100%;
  justify-content: center;
}

.login-error .info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}

.login-error .info img {
  margin-bottom: 30px;
}

.login-error .info h2 {
  margin-bottom: 40px;
}

.login-error .info div:last-of-type {
  display: flex;
  align-items: end;
}

.login-error .info h3 {
  color: #00D47f;
  cursor: pointer;
  margin-right: 15px;
  text-decoration: underline;
}


/* interests-modal */
.interests-modal .pop-up-content .info {
  width: 100%;
}

.interests-modal .form-data > p {
  width: 67%;
  margin: 35px 0;
  text-align: start;
}

.cb-interests .cb-checkbox1 {
  background-image: url(../img/pictures/register-img1.png);
}
.cb-interests .cb-checkbox2 {
  background-image: url(../img/pictures/register-img2.png);
}
.cb-interests .cb-checkbox3 {
  background-image: url(../img/pictures/register-img3.png);
}
.cb-interests .cb-checkbox4 {
  background-image: url(../img/pictures/register-img4.png);
}

.interests-modal .cb-interests {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.interests-modal .cb-interests .col {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 190px;
  margin-right: 5px;
}

.interests-modal .cb-interests .col:last-of-type {
  margin-right: 0;
}

.interests-modal .cb-interests .col > div:not(.cb-advanced) {
  position: relative;
  background-repeat: no-repeat;
  flex-direction: column;
  display: block;
  width: 100%;
  min-height: 160px;
  align-content: flex-end;
  background-size: contain !important;
}

.interests-modal .cbi-input {
  position: absolute;
  top: 15px;
  right: 15px;
  margin: 0;
}

.interests-modal .cbi-input,
.interests-modal .cba-input {
  max-width: 18px;
  max-height: 18px;
  padding: 0;
}

.interests-modal .cba-input {
  position: relative;
}

.interests-modal input {
  cursor: pointer;
  background-color: #fff;
  appearance: none;
  border: 1.5px solid var(--black);
  border-radius: 0;
}

.interests-modal input:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background-color: var(--black);
}

.cb-checkbox1 .cb-text {
  background-color: var(--light-green); 
}
.cb-checkbox2 .cb-text {
  background-color: var(--light-blue);
}
.cb-checkbox3 .cb-text {
  background-color: var(--light-purple);
}
.cb-checkbox4 .cb-text {
  background-color: var(--light-pink);
}

.interests-modal .cb-text {
  display: flex;
  align-items: center;
  max-width: 190px;
  min-height: 50px;
}

.interests-modal .cb-text h5 {
  margin-left: 25px;
}

.interests-modal .choose-option {
  margin-top: 20px;
  align-self: start;
}

.interests-modal form button {
  background: var(--black);
  margin-top: 50px;
  margin-bottom: 0;
}

.interests-modal .cb-advanced {
  display: flex;
  flex-direction: column;
  text-align: start;
  margin-top: 35px;
  margin-bottom: 15px;
}

.interests-modal .cb-advanced label {
  display: flex;
  margin-bottom: 20px;
}

.interests-modal .cbi-input:last-of-type {
  margin: 0;
}

.interests-modal .cba-input:last-of-type {
  margin: 0;
  margin-right: 15px;
}

.interests-modal .cb-advanced label .p-detail {
  font-size: 16px;
}

.interests-modal .choose-again {
  margin-top: 20px;
}

.interests-modal hr {
  width: 100%;
  height: 1.5px;
  background-color: var(--black);
  display: none;
}

.gray-scale {
  filter: grayscale(100%);
}


/* register-confirmation */
.register-confirm > .pop-up-content {
  background-image: none;
  max-width: 870px;
  max-height: 630px;
  height: auto;
  justify-content: center;
}

.register-confirm .info {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}

.register-confirm .info .img-logo {
  width: 60px;
}

.register-confirm .info .img-email {
  width: 90px;
}

.register-confirm .info > img:not(.arrow-icon),
.register-confirm img:not(.arrow-icon), 
.register-confirm h2,
.register-confirm button, 
.register-confirm .info p.p-detail:first-child {
  margin-bottom: 30px;
}

.register-confirm .info p.p-detail:last-of-type {
  margin-top: 20px;
}

.register-confirm a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
}

.register-confirm h4 {
  font-weight: 600;
  justify-content: center;
}

.register-confirm button {
  background: var(--white);
  border: 1.5px solid var(--black);
}


/* responsive */

@media screen and (max-width: 1000px) {
  .pop-up-content .info input,
  .pop-up-content nav a {
    margin-bottom: 15px;
  }

  .interests-modal .info {
    margin-bottom: 20px;
  }

  .interests-modal .form-data > p {
    width: 100%;
  }

  .interests-modal .cb-interests {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
  }
  
  .interests-modal .cb-interests .col,
  .interests-modal .cb-interests .col .cb-text {
    max-width: 100%;
  }

  .interests-modal .cb-interests .col {
    margin-right: 0;
  }

  .interests-modal .cb-interests .col > div:not(.cb-advanced) {
    background-image: none;
    min-height: 50px;
  }

  .interests-modal .cb-interests .col .cb-text {
    width: 100%;
  }

  .interests-modal .choose-option {
    margin-top: 0;
  }

  .interests-modal .cb-advanced {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 15px;
  }

  .interests-modal .cb-advanced label {
    margin-bottom: 15px;
  }

  .register-modal form button,
  .interests-modal form button {
    margin-top: 20px;
  }
}

@media screen and (max-width: 760px) {
  .interests-modal .cb-advanced label .p-detail {
    font-size: 14px;
  }

  .interests-modal h5 {
    font-size: 16px;
  }

  .register-confirm .info .img-email {
    width: 70px;
  }

  .register-confirm .info > img:not(.arrow-icon) {
    margin-bottom: 20px;
  }

  .register-confirm .info > img:not(.arrow-icon),
  .register-confirm img:not(.arrow-icon), .register-confirm h2,
  .register-confirm button, .register-confirm .info p.p-detail:first-child {
    margin-bottom: 20px;
  }

  .register-confirm button {
    width: max-content;
  }

  .register-modal form button {
    margin-bottom: 40px;
  }

  .interests-modal form button {
    margin-bottom: 10px;
  }

  .pop-up-content nav a {
    height: 40px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 480px) {
  .pop-up-content .info select,
  .pop-up-content .info input {
    height: 50px;
    margin-bottom: 10px !important;
  }

  .login-modal form button {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .register-modal .info input:last-of-type {
    margin-bottom: 0;
  }

  .pop-up-content .info nav,
  .interests-modal .form-data > p {
    margin: 25px 0;
  }

  .interests-modal .cb-interests {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .interests-modal .cb-interests .col {
    margin-right: 0;
  }

  .interests-modal .cb-advanced {
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right: 0;
  }

  .interests-modal .cb-advanced label {
    margin-bottom: 10px;
  }

  .interests-modal .cb-interests .col > div:not(.cb-advanced),
  .interests-modal .cb-text {
    min-height: 40px;
  }

  .interests-modal .cba-input:last-of-type {
    margin-right: 10px;
  }

  .interests-modal .cbi-input {
    top: 13px;
  }

  .interests-modal .cbi-input,
  .interests-modal .cba-input {
    max-width: 15px;
    max-height: 15px;
  }

  .interests-modal .cb-advanced label .p-detail {
    font-size: 12px;
  }

  .register-modal form button,
  .interests-modal form button {
    margin-top: 30px;
  }

  .register-modal hr,
  .login-modal hr {
    margin-bottom: 20px;
  }

  .login-error .info div:last-of-type {
    flex-direction: column;
    align-items: center;
  }

  .login-error .info h3 {
    margin-right: 0;
  }

  .interests-modal form button {
    margin-bottom: 10px;
  }
}