@charset "UTF-8";

.dino-form-container,
.dino-form {
  --font-size: 16px;
  --line-height: 1.3;
  --gap: 10px;
  --color-bg : #ffffff;
  --color-text : #666666;
  --color-text-sub : #999999;
  --color-button : rgba(0, 200, 179, 1);
  --color-border : rgba(0, 0, 0, 0.3);
  --color-focus : rgba(0, 136,255, 1);
  --color-focus-outline : rgba(0, 136,255, 0.3);
  --color-valid : rgba(52, 199, 89, 1);
  --color-valid-outline : rgba(52, 199, 89, 0.3);
  --color-invalid : rgba(255, 56, 60, 1);
  --color-invalid-outline : rgba(255, 56, 60, 0.3);
}

.dino-form-container {position: relative; font-size: var(--font-size); color: var(--color-text-sub); line-height: var(--line-height); max-width: 700px; margin: 30px auto;}
.dino-form-container.full {max-width: none;}
.dino-form-container > .row {position: relative; display: flex; gap: 0 var(--gap);}
.dino-form-container > .row + .row {margin-top: var(--gap);}
.dino-form-container > .row > .column {position: relative; flex: 1 1 0;}
.dino-form-container > .row > .column.inline {flex: 0 1 0;}


.dino-form {position: relative; display: inline-block; vertical-align: middle; color: var(--color-text-sub); font-size: var(--font-size); line-height:  var(--line-height); width: 15em;}
.dino-form :where(input.text, select, textarea) {font: inherit; color: var(--color-text); vertical-align: middle; width: 100%; max-width: 100%; height: 3em; border: 1px solid var(--color-border); border-radius: 0.5em; padding: 1em 1em 0 1em; outline: none; outline: 4px solid transparent; appearance: none; background-color: var(--color-bg); transition: border-color 0.12s ease-in, outline-color 0.12s ease-in;}
.dino-form.select {width: auto;}
.dino-form.select::after {content: '\f107'; font-family: 'Font Awesome 7 Free'; font-weight: 700; position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%);}
.dino-form select {padding-right: 4em; width: auto;}
.dino-form textarea {height: calc(var(--font-size) * 15); padding: 1.5em 1em 1em 1em;}
.dino-form.full {display: block; width: auto;}
.dino-form.date {width: 12em;}

.dino-form label {position: absolute; max-width: calc(100% - var(--font-size) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; left: var(--font-size); top: calc(var(--font-size) * 0.9); transition: all 0.12s ease-in;}
.dino-form label em {margin-right: 0.4em; color: var(--color-invalid);}
.dino-form label em span {position: absolute; left: -999px;}
.dino-form :where(input.text, select, textarea):focus + label,
.dino-form.select label,
.dino-form.filled label {font-size: 0.7em; top: 0.5em;}
.dino-form.icon label {left: calc(var(--font-size) * 4); max-width: calc(100% - var(--font-size) * 5);}
.dino-form.button label {max-width: calc(100% - var(--font-size) * 5);}
.dino-form.select label {max-width: calc(100% - var(--font-size) * 6.5);}
.dino-form.icon.button label {left: calc(var(--font-size) * 4); max-width: calc(100% - var(--font-size) * 8);}

.dino-form.icon :where(input.text, select, textarea) {padding-left: 4em;}
.dino-form.icon > i {position: absolute; left: 1px; top: 1px; width: calc(3em - 2px); height: calc(100% - 2px); border-top-left-radius: calc(0.5em - 1px); border-bottom-left-radius: calc(0.5em - 1px); border-right: 1px solid var(--color-border); background-color: var(--color-bg); transition: all 0.12s ease-in;}
.dino-form.icon > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.2em;}

.dino-form.button :where(input.text, select, textarea) {padding-right: 4em;}
.dino-form.button > a {position: absolute; right: 1px; top: 1px; width: calc(3em - 2px); height: calc(3em - 2px); border-top-right-radius: calc(0.5em - 1px); border-bottom-right-radius: calc(0.5em - 1px); transition: all 0.12s ease-in;}
.dino-form.button > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.2em;}
.dino-form.button > a.button {background-color: var(--color-button); color: #ffffff; }

.dino-form :where(input.text, select, textarea):focus {border-color: var(--color-focus); outline-color: var(--color-focus-outline);}
.dino-form :where(input.text, select, textarea):focus ~ i {color: var(--color-focus); border-right-color: var(--color-focus);}

.dino-form[data-status="valid"] :where(input.text, select, textarea) {border-color: var(--color-valid); color: var(--color-valid);}
.dino-form[data-status="valid"] :where(input.text, select, textarea):focus {border-color: var(--color-valid); outline-color: var(--color-valid-outline);}
.dino-form[data-status="valid"] :where(input.text, select, textarea) + label {color: var(--color-valid);}
.dino-form[data-status="valid"] > i {color: var(--color-valid); border-right-color: var(--color-valid);}
.dino-form[data-status="invalid"] :where(input.text, select, textarea) {border-color: var(--color-invalid); color: var(--color-invalid);}
.dino-form[data-status="invalid"] :where(input.text, select, textarea):focus {border-color: var(--color-invalid); outline-color: var(--color-invalid-outline);}
.dino-form[data-status="invalid"] :where(input.text, select, textarea) + label {color: var(--color-invalid);}
.dino-form[data-status="invalid"] > i {color: var(--color-invalid); border-right-color: var(--color-invalid);}

.dino-form .help {position: absolute; right: 0.2em; top: 0.2em; z-index: 10;}
.dino-form.button .help {right: 3.2em;}
.dino-form.select .help {right: 1.2em;}
.dino-form .help > a {color: var(--color-text-sub); position: relative; z-index: 10;}
.dino-form .help div.text {position: absolute; width: 200px; bottom: calc(100% + 5px); left: -20px; font-size: 0.7em; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(3px); border: 1px solid rgba(0, 0, 0, 0.4); color: var(--color-text); padding: 0.7em 1em; border-radius: 0.7em; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1); display: none;}
.dino-form .help div.text::before {content: ''; position: absolute; left: 20px; bottom: -20px; border: 10px solid transparent; border-top-color: var(--color-border);}
.dino-form .help div.text::after {content: ''; position: absolute; left: 20px; bottom: -18px; border: 10px solid transparent; border-top-color: rgba(255, 255, 255, 1);}


.dino-form .help a:focus + div.text,
.dino-form .help a:hover + div.text {display: block;}

.dino-form + p.message::before {content: '\f071'; font-family: 'Font Awesome 7 Free'; font-weight: 700; margin-right: 0.5em;}
.dino-form + p.message {font-size: calc(var(--font-size) - 4px); color: var(--color-invalid); margin-top: 0.3em; padding-left: 1.5em; text-indent: -1.5em; display: none;}
.dino-form[data-status="invalid"] + p.message {display: block;}


.dino-btn-container {position: relative; margin: 30px 0; text-align: center;}
.dino-btn {display: inline-block; min-width: 200px; line-height: 50px; background-color: var(--color-point); color: #ffffff; font-size: 20px; border-radius: 100px;}


.dino-form-container .dino-check-list > li {line-height: 30px;}
.dino-form-container div.text-box {border: 2px solid #e0e0e0; border-radius: 10px; padding: 10px; background-color: #f9f9f9;}
.dino-form-container div.text-box p.title {text-align: center; font-size: 20px; margin-bottom: 10px;}
.dino-form-container div.text-box div.pre {white-space: pre-line; font-size: 13px;}


@media screen and (max-width: 740px) {
  .dino-form-container,
  .dino-form {
    --font-size: 16px;
  }
  .dino-form-container {padding: 0;}
  .dino-form-container > .row {display: block;}
  .dino-form-container > .row > .col {display: block;}
  .dino-form-container div + div {margin-top: 10px;}

  .dino-btn-container {margin: 20px 0;}
  .dino-btn {min-width: 160px; line-height: 40px; font-size: 16px;}
}