/* colors */

:root {
  --primary: rgb(64, 153, 222, 1);
  --primary-dark: rgb(41, 126, 192, 1);
  --primary-70: rgba(64, 153, 222, 0.7);
  --primary-50: rgba(64, 153, 222, 0.5);
  --primary-30: rgba(64, 153, 222, 0.3);
  --primary-10: rgba(64, 153, 222, 0.1);
  --sidebar-icon: rgb(242, 68, 65, 1);
  --ysc-purple: rgb(99, 65, 180);
  --ysc-red: rgb(255, 54, 77);
}

/* text */

.text-ysc-purple {
  color: var(--ysc-purple);
}

.text-ysc-red {
  color: var(--ysc-red);
}

/* layout */

.card-panel {
  height: 100% !important;
}

.bg-grad-sidebar {
  background-image: linear-gradient(0deg, rgb(37 26 62) 50%, var(--ysc-purple) 100%);
}

/* buttons */

.btn-secondary {
  background-color: var(--60);
  color: var(--white);
}

/* forms */

.form-input-bordered,
.form-select,
.form-input:focus {
  border-radius: 0.25rem;
}

::placeholder {
  color: var(--60);
}

.form-input.required,
.form-select.required,
.form-input.invalid,
.form-select.invalid {
  border-color: var(--danger);
}

.form-input {
  scroll-margin-top: 2rem;
}

.checking-loading {
  display: none;
  top: 50%;
  right: 0.5rem;
  transform: translate(0, -50%);
}

.checking-loading .spin {
  width: 1em;
  height: 1em;
  border: solid 2px var(--primary);
  border-right-color: transparent;
  border-radius: 999px;
  animation-duration: 0.65s;
}

.form-input.checking ~ .checking-loading {
  display: block;
}

[data-username-available],
[data-username-valid] {
  display: none;
}

svg.icon {
  fill: none;
}

svg.icon *:not([stroke=none]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.help-text {
  font-style: normal;
}

/* sidebar */

#sidebar .children {
  display: none;
}

#sidebar input + label:after {
  display: inline-block;
  content: '';
  width: 0; 
  height: 0; 
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-left: 0.35em solid #fff;
  margin-left: 0.65em;
  transition: 0.28s;
}

#sidebar input:checked ~ label ~ .children {
  display: block;
}

#sidebar input:checked ~ label:after {
  transform: rotate(90deg);
}

/* CK editor */

.ck-editor__editable {
  min-height: 12em;
}

/* confirm dialog */

.vue-dialog .vc-title {
  font-size: 1.1rem;
  color: var(--ysc-purple);
}

.vue-dialog .vc-text {
  color: var(--90);
}