body {
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}
#header {
    width: 100%;
    display: flex;
    
    align-items: center;
    background-image: linear-gradient(to bottom right, rgb(11, 51, 54), rgb(4, 22, 22));
    color: #eee;
    vertical-align: middle;

    #navlogo {
        width: 40px;
        height: 40px;
        margin: 0 0 0 1em;
        border: none;
    }

    > div {
        padding: 1em;
    }
    > div:last-child {
        margin-left: auto;
    }
}
#banner {
    margin: 0 1em;
    align-items: center;
    background-color: #fccb96;
    border: solid 1px #999;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    text-align: center;
    padding: 0.5em;

    a {
        color: rgb(75, 149, 195);
    }
}

table td.numeric {
    text-align: right;
}

#debug {
    display: none;
}

a {
    color: rgb(94, 177, 228);
}
a[target="_blank"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
}
a:hover {
    color: rgb(80, 234, 229);
}

span.copy-button:not(:empty) {
    cursor: copy;
}
span.copy-button:not(:empty)::after {
    content: url("data:image/svg+xml,%3Csvg width='12px' height='12px' fill='%23000000' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 460 460' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134h30V32.864c0-1.579,1.285-2.864,2.864-2.864h254.272 c1.579,0,2.864,1.285,2.864,2.864v254.272c0,1.58-1.285,2.865-2.864,2.865h-74.729v30h74.729 c18.121,0,32.864-14.743,32.864-32.865V32.864C458.797,14.743,444.055,0,425.934,0z'/%3E%3Cpath d='M288.339,139.998H34.068c-18.122,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272 c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z M288.341,430H34.068 c-1.58,0-2.865-1.285-2.865-2.864V172.863c0-1.58,1.285-2.865,2.865-2.865h254.272c1.58,0,2.865,1.285,2.865,2.865v254.273h0.001 C291.206,428.715,289.92,430,288.341,430z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 12px;
    height: 12px;
    margin: 0 3px 0 5px;
    cursor: default;
}

#error {
    display: none;
    color: #f0a0a0;
    border: solid 1px #666;
    border-radius: 4px;
} 
#content {
    padding: 1em;
}
#debug {
    font-family: 'Courier New', Courier, monospace;
    font-size: 9pt;
    color: #666;
}

/* application_list styles */

.footnote {
    font-size: 10pt;
    font-style: italic;
}
table {
    border-collapse: separate;
    border-spacing: 1em 0;
    th, td {
        border: none;
        text-align: left;
    }
    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    td {
        margin-right: 1em;
    }
}

/* install styles */

ol.install {
    li {
        line-height: 1.5;

        img {
            vertical-align: middle;
        }
    }
}

/* profile page styles */
#profile-form {
    display: none;
}

/* dashboard page styles */

.billboard-row {
    display: flex;
    justify-content: space-between;

    > div {
        width: 30%;
        border: solid 1px #ccc;
        padding: 1em;
        border-radius: 6px;

        h3 {
            margin: 0 0 .5em 0;
            text-decoration: underline;
            color: #666;
        }
    }
}

.centered {
    text-align: center;
}

#application-snapshot {
    display: none;
}
#app_table {
    display: none;
    border-top: solid 1px #ccc;
    margin-top: 1em;
    padding-top: 1em;
}
#get-started {
    display: none;

    ol {
        li {
            line-height: 1.5em;
        }
    }
}
#coming-soon {
    display: none;
}

#application-cal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    div {
        box-sizing: border-box;

        width: 12%;
        padding-bottom: 30px;

        height: auto;
        margin: 4px;

        border: solid 1px #999;
        border-radius: 3px;

        position: relative;
    }
    div.cal-day-nonexistent {
    }
    div.cal-day-inactive {
        background-color: #aaa;
    }
    div.cal-day-active {
        background-color: #77c377;
    }
    div.today {
        border-color: #333;
    }

    div > span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.bestfoot-spinner {
    width: 40px;
    height: 20px;
    margin: 0 auto;
    --c:radial-gradient(farthest-side,currentColor 93%,#0000);
    background: var(--c) 0    0, var(--c) 50%  0;
    background-size:8px 8px;
    background-repeat: no-repeat;
    position: relative;
    clip-path: inset(-200% -100% 0 0);
    animation: bestfoot-sp-0 1.5s linear infinite;
}
.bestfoot-spinner:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background:currentColor;
    left:-16px;
    top:0;
    animation: 
    bestfoot-sp-1 1.5s linear infinite,
    bestfoot-sp-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.bestfoot-spinner:after {
    content: "";
    position: absolute;
    inset:0 0 auto auto;
    width:8px;
    height: 8px;
    border-radius: 50%;
    background:currentColor; 
    animation: bestfoot-sp-3 1.5s  linear infinite;
}

@keyframes bestfoot-sp-0 {
    0%,30%  {background-position: 0  0   ,50% 0   }
    33%     {background-position: 0  100%,50% 0   }
    41%,63% {background-position: 0  0   ,50% 0   }
    66%     {background-position: 0  0   ,50% 100%}
    74%,100%{background-position: 0  0   ,50% 0   }
}

@keyframes bestfoot-sp-1 {
    90%  {transform:translateY(0)}
    95%  {transform:translateY(15px)}
    100% {transform:translateY(15px);left:calc(100% - 8px)}
}

@keyframes bestfoot-sp-2 {
    100% {top:-0.1px}
}

@keyframes bestfoot-sp-3 {
    0%,80%,100% {transform:translate(0)}
    90%         {transform:translate(26px)}
}


#li-profile-content {
    width: 99%;
    height: 6em;
    display: block;
}
#output-form {
    div {
        line-height: 1.5em;
        margin-bottom: 6px;
    }
    textarea {
        width: 100%;
        display: block;
    }
    input[type="text"] {
        width: 80%;
        display: block;
    }
}
div#resume {
    width: 8in;
    min-width: 8in;
    max-width: 8in;
    overflow: wrap;
    line-height: 1.35em;
    font-family: Helvetica;
    h1, h2, h3, h4, a, p, span {
        font-family: Helvetica;
    }
}

div.three-one {
    display: flex;
    justify-content: space-between;
    
    > :first-child {
        flex: 0 0 70%;
    }
    
    :not(:first-child) {
        flex: 0 0 25%;
    }
}
.wizard-stage {
    display: none;
    width: 80%;
    max-width: 80%;
    margin: 0 auto;


    border: solid 1px #999;
    background-color: #f0f0f0;
    border-radius: 1em;
    padding: 1em;

}
.wizard-button-bar {
    display: flex;
    justify-content: space-around;
    text-align: center;
    button, a {
        margin: 0 2em;
        background: #007bff;
        color: white;
        border: solid 1px #666;
        padding: 4px;
        font: inherit;
        cursor: pointer;
        border-radius: 6px;
        text-decoration: none;
        &:hover {
            background-color: #0056b3;
        }
    }
    a[target="_blank"]::after {
        content: none;
        margin: 0 2em;
    }
}

.wizard-stage.full-page  {
    width: inherit;
    max-width: inherit;
    margin: 0;
    border: inherit;
    background-color: inherit;
    border-radius: none;
}

.wizard-form-field {
    margin-bottom: 1em;

    label {
        display: block;
        font-style: italic;
        margin-bottom: 0.5em;
    }
    input {
        width: 80%;
    }
    textarea {
        width: 80%;
        height: 4em;
    }
}

.form-feedback {
    color: #999;
    font-style: italic;
    display: none;
}

.instruction-variant {
    display: none;
}

.tuneup-suggestion-section {
    display: flex;
    flex-direction: column;
    gap: 10px;

    > div {
        border: solid 1px #f0f0f0;
        border-radius: 6px;
        background-color: #d0d0d0;
        font-family: 'Courier New', Courier, monospace;
        padding: 1em;
    }
}

.copy-button {
    display: inline-block;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='12px' height='12px' fill='%23000000' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 460 460' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134h30V32.864c0-1.579,1.285-2.864,2.864-2.864h254.272 c1.579,0,2.864,1.285,2.864,2.864v254.272c0,1.58-1.285,2.865-2.864,2.865h-74.729v30h74.729 c18.121,0,32.864-14.743,32.864-32.865V32.864C458.797,14.743,444.055,0,425.934,0z'/%3E%3Cpath d='M288.339,139.998H34.068c-18.122,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272 c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z M288.341,430H34.068 c-1.58,0-2.865-1.285-2.865-2.864V172.863c0-1.58,1.285-2.865,2.865-2.865h254.272c1.58,0,2.865,1.285,2.865,2.865v254.273h0.001 C291.206,428.715,289.92,430,288.341,430z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 20px;
    border: solid 1px #ffffff;
    border-radius: 4px;
    cursor: pointer;
    color: black;
}

.autocomplete-suggestions {
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    background: #fff;
    z-index: 1000;
    width: 600px;

    .autocomplete-suggestion {
        padding: 8px;
        cursor: pointer;
        border: 1px solid #eee;
    }
    .autocomplete-suggestion:hover {
        background: #f0f0f0;
    }
}

.error {
    border: 1px solid red;
}

.layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.layout > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.layout > div:first-child {
    background-image: linear-gradient(to bottom right, rgb(11, 51, 54), rgb(4, 22, 22));
    color: #eee;
}

#app {
    max-width: 1200px;
    margin: 0 auto;
    textarea, input[type="text"], select, button {
        font-size: 12pt;
        line-height: 1.3em;
        font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    }
    textarea, input[type="text"] {
        min-width: 95%;
        margin: 1em auto;
        padding: 8px;
        border: solid 1px #333;
        border-radius: 4px;
    }
    textarea {
        min-height: 30em;
    }
    button {
        padding: 8px;
        cursor: pointer;
        border: solid 1px #333;
        border-radius: 4px;
        background-color: rgb(11, 51, 54); /*rgb(4, 22, 22);*/
        color: rgb(94, 177, 228);
        &:hover {
            background-color: rgb(11, 51, 54);
            color: rgb(80, 234, 229);
        }
    }
    p.infobit {
        font-style: italic;
        font-size: 10pt;
    }
}