/* reset */
html {font-family: Arial, Helvetica, sans-serif}
h1 {margin: 0;font-size: 20px;font-weight: normal;}
h2 {margin: 0;font-size: 18px;font-weight: normal;}
body {display: flex;padding: 0;margin: 0;background: #f4f4f5;min-height: 99vh;}
form {width: 100%;}
button {border:none;border-radius: 8px;font-size: 14px;cursor:pointer;}
a {color:#555;text-decoration:none;}
.add-button {padding: 7px 15px;background:#000;color:#fff;border-radius: 8px;}
.add-button:hover {color:#fff;}
p {color:#999;font-size: 14px;line-height: 22px;}
.unauthenticated .authenticated {display:none;}
.authenticated .unauthenticated {display:none;}

/* sidebar */
aside {
    width: 270px;display:flex;flex-direction:column;
    header {padding: 20px 0;border-bottom: 1px solid #dadada;}
    header svg {width: 30px;height: 30px;margin: 0 10px 0 10px;vertical-align: middle;line-height: 18px;}
    header a {padding: 5px 5px 20px 0px;margin: 5px 0;}
    header .nav-button {display:none;cursor:pointer;}
    header .nav-button svg {width: 20px;height: 20px;}
    nav {margin: 0;padding: 15px 0;}
    nav a {border-radius:10px;display:block; clear: both; padding: 8px 10px;line-height: 15px;font-size: 14px;background-color: transparent;transition: background-color 0.3s ease; /* <— this enables the fade */}
    nav a svg {width: 20px;height: 20px;vertical-align: middle;line-height: 18px;}
    nav a span {vertical-align: middle;margin: 0 0 0 10px;}
    nav a.active {background:#ececec;}
    nav:hover a {background-color: transparent;}
    nav a:hover {background-color: rgba(0, 0, 0, 0.1);}
    footer {border-top:1px solid #dadada;padding-top: 10px;margin: auto 0px 20px 0px;}
    footer a {display:block; clear: both; padding: 8px 10px;}
    .aside-content {width: 270px;margin: 0 10px;}
}

@media (max-width: 950px) {
    aside {width: 38px;}
    aside .aside-content {margin: 0 0;}
    aside header {padding: 7px 0;}
    .logo {display:none;}
    aside header .nav-button {display: inline;}
}

/* main */
main {
    padding: 5px 5px 5px 0;display:flex;flex-direction:column;flex: 1 1 0%;
    .page {position:relative;padding: 40px;background:#fff;border: 1px solid #dadada;border-radius:5px;flex-grow: 1}
    .page .max-width-center {max-width: 1100px;margin: 0 auto;}
    .page h1 {}
    .page h1 a {color:black;}
}

@media (max-width: 950px) {
    main {margin-top: 25px;}
    main .page {padding: 20px 15px;}
}

/* list view */
.list-view-add-button {padding: 7px 15px;font-size: 14px;background:#000;color:#fff;border-radius: 8px;float:right;margin: -5px 0 0 5px;}
table {
    width: 100%;font-size: 14px;color:#7d7d7d;margin-top:30px;
    thead {border-bottom: 1px solid #dadada;}
    thead th {font-weight: normal;padding: 10px 0px;text-align: left;border-bottom: 1px solid #dadada;}
    tbody tr td {padding: 20px 0;border-bottom: 1px solid #dadada;}
    a {text-decoration:underline;}
}
.slim-table tbody tr td {padding: 10px 0;border:none;}

/* forms */
form {
    margin: 0 auto;
    hr {border:none;border-bottom:1px solid #dadada;margin: 20px 0;}
    p {margin: 10px 0;}
    input {width: 100%;padding: 10px 10px;border-radius: 7px;border: 1px solid #dadada;box-sizing: border-box;}
    textarea {width:100%;padding: 10px 10px;border-radius: 7px;border: 1px solid #dadada;box-sizing: border-box;font-family: arial;}
    select {width:100%;padding: 10px 10px;border-radius: 7px;border: 1px solid #dadada;box-sizing: border-box;}
    button {cursor:pointer;}
    button:disabled {color:#5e5e5e;cursor:not-allowed;}
    small {color: red;}
    .loader {
        display: inline-block;
        vertical-align: bottom;
        margin: 0 0 0 10px;
        border: 3px solid #f3f3f3; /* Light grey */
        border-top: 3px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 25px;
        height: 25px;
        animation: spin 2s linear infinite;
    }
}

.horizontal-form {
    label {width: 100%;display:inline-flex;margin: 20px 0;}
    label>div {width: 50%;}
}

.stacked-form {
    label {margin: 15px 0 0 0; display: block; position: relative;}
    label span {position:absolute;left: 10px;padding: 0 5px;transition: top 0.3s ease, color 0.3s ease, background 0.3s ease;font-size: 14px;}
    label.untouched span {top: 15px;color: #a6a6a6;}
    label.touched span {top: -5px;color: #000000;background: #fff;font-size: 12px;}
    input {padding: 15px;}
    textarea {padding: 15px;}
    select {padding: 15px;}
    button {}
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* utilities */
.hidden {display: none;}
.bold {font-weight: bold;}
.fade {opacity:0;visibility: hidden;transition: opacity 0.6s ease;}
.in {opacity: 1;visibility: visible;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mb-15 {margin-bottom: 15px;}
.ml-auto {margin-left: auto;}
.pb-10 {padding-bottom: 10px;}
.pt-10 {padding-top: 10px;}
.p-10 {padding: 10px;}
.pl-1 {padding-left: 5px;}
.px-1 {padding-left: 5px;padding-right: 5px;}
.pl-4 {padding-left: 20px;}
.pr-4 {padding-right: 20px;}
.underline {text-decoration: underline;}
.pointer {cursor:pointer;}
.text-align-right {text-align:right;}
.flex1 {flex:1;}
.w50 {width: 50%;}
.w100 {width: 100%;}
.black {color: black;}
.red {color:red;}
.f12 {font-size: 12px;}
.float-right {float:right;}
.horizontal-flex {display: flex;flex-direction: row;align-items: center;}
.border-top {border-top: 1px solid #dadada;}
.border-bottom {border-bottom: 1px solid #dadada;}
.table tr td {}
.alternating-bg-color tr:nth-child(even) {background-color: #f2f2f2;border-bottom: 1px solid #dadada;border-top: 1px solid #dadada;}

/* error page */
.error-page {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* info box */
.info-box {
    background: #fefce8;border-radius: 5px;padding: 1px 20px 40px 50px;font-size: 14px;margin: 50px 0 0 0;line-height: 22px;
    svg {width: 20px;height: 20px;color: #facc15;float:left;margin-left: -30px;}
    h3 {color: #854d0e;margin-top:20px; font-weight: normal;font-size: 14px;margin-bottom:8px;}
    p {color: #a16207;}
    ul {padding: 0;margin: 0;list-style:inside disc;}
    ul li {color: #a16207;}
}

/* custom questions */
.questions {margin: 0;padding: 0;list-style: inside number;}
.question {margin: 0px 0 0 0;padding: 20px 0 20px 0;}
.question .question-header {margin: -27px 0 0 0;}
.question .question-number {font-size: 23px;padding: 5px 0px;border-radius: 5px;width:40px;text-align:center;}
.question select.custom-question-type {width: auto;margin: 4px 0 0 40px;padding: 0;vertical-align: top;border:none;text-align: right;outline: none;box-shadow: none;}
.question .question-header a {vertical-align:middle;float:right;color:#8fbfdc;margin: 5px 5px 0 5px;cursor:pointer;}
.question .question-header a.question-delete-button {color:red;}
.add-question-link {padding: 10px;border-radius: 5px;border: 1px solid #dadada;color: #000000;cursor:pointer;}
.add-question-link:hover {background:#d6e3f3;}
.question:first-child #move-question-up-button {display:none;}
.question:last-child #move-question-down-button {display:none;}

ol li::marker {
    font-size: 24px;
    color: rgb(0, 0, 0); /* or whatever you want */
    font-weight: bold;
}

/* loading animation */
.loading-ellipse::after {
  content: "";
  animation: dots 1.0s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}