apps/tools/app_generator/static/stylesheet.css

:root {
    color-scheme:light;
    --yiq-contrasted-threshold: 150;
    --white: hsl(0, 0%, 100%);
    --white-h: 0;
    --white-s: 0%;
    --white-l: 100%;
    --black: hsl(0, 0%, 0%);
    --black-h: 0;
    --black-s: 0%;
    --black-l: 0%;
    --blue: hsl(211, 64%, 50%);
    --blue-h: 211;
    --blue-s: 64%;
    --blue-l: 50%;
    --indigo: hsl(263, 90%, 51%);
    --indigo-h: 263;
    --indigo-s: 90%;
    --indigo-l: 51%;
    --purple: hsl(280, 61%, 50%);
    --purple-h: 280;
    --purple-s: 61%;
    --purple-l: 50%;
    --pink: hsl(332, 79%, 58%);
    --pink-h: 332;
    --pink-s: 79%;
    --pink-l: 58%;
    --red: hsl(354, 70%, 54%);
    --red-h: 354;
    --red-s: 70%;
    --red-l: 54%;
    --orange: hsl(27, 98%, 54%);
    --orange-h: 27;
    --orange-s: 98%;
    --orange-l: 54%;
    --yellow: hsl(45, 100%, 66%);
    --yellow-h: 45;
    --yellow-s: 100%;
    --yellow-l: 66%;
    --green: hsl(134, 61%, 41%);
    --green-h: 134;
    --green-s: 61%;
    --green-l: 41%;
    --teal: hsl(162, 73%, 46%);
    --teal-h: 162;
    --teal-s: 73%;
    --teal-l: 46%;
    --cyan: hsl(188, 78%, 41%);
    --cyan-h: 188;
    --cyan-s: 78%;
    --cyan-l: 41%;
    --gray-100: hsl(210, 17%, 98%);
    --gray-100-h: 210;
    --gray-100-s: 17%;
    --gray-100-l: 98%;
    --gray-200: hsl(210, 16%, 93%);
    --gray-200-h: 210;
    --gray-200-s: 16%;
    --gray-200-l: 93%;
    --gray-300: hsl(210, 14%, 89%);
    --gray-300-h: 210;
    --gray-300-s: 14%;
    --gray-300-l: 89%;
    --gray-400: hsl(210, 14%, 83%);
    --gray-400-h: 210;
    --gray-400-s: 14%;
    --gray-400-l: 83%;
    --gray-500: hsl(210, 11%, 71%);
    --gray-500-h: 210;
    --gray-500-s: 11%;
    --gray-500-l: 71%;
    --gray-600: hsl(208, 7%, 46%);
    --gray-600-h: 208;
    --gray-600-s: 7%;
    --gray-600-l: 46%;
    --gray-700: hsl(210, 9%, 31%);
    --gray-700-h: 210;
    --gray-700-s: 9%;
    --gray-700-l: 31%;
    --gray-800: hsl(210, 10%, 23%);
    --gray-800-h: 210;
    --gray-800-s: 10%;
    --gray-800-l: 23%;
    --gray-900: hsl(210, 11%, 15%);
    --gray-900-h: 210;
    --gray-900-s: 11%;
    --gray-900-l: 15%
}



h1,.h1 {
    font-size:2.25rem
    align="center";
}

h2, .h2 {
    font-size: 1.35rem;
}

h3, .h3 {
    font-size: 1.26rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top:.8rem;
    margin-bottom:.2rem;
    font-weight:500;
    line-height:1.2;
}

body {
    /* font-family: 'source_sans_proregular'; */
    font-family: FiraGO,Fira Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-size: 1em;
    line-height: 2.2;
    color: var(--gray-900);
    text-align: left;

    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 85%;
}




.message {
    padding: 10px;
    margin: 5px;
    background-color: #2980b9;
    color:#FFF;
}

.text-secondary {
  color: var(--gray-600) !important;
}

.alert {
    padding: 20px;
    margin: 5px;
    color: #970020;
    background-color: #ffd5de;
}

.grayed_hint {
    color: darkgray;
}

.box {
    border:20px solid black
    padding: 50px auto;
    position: relative;
}

.code-block {
    background-color: #282c34;
    color: #ebf2ff;
    border-radius: 5px;
    padding: 10px;

    overflow: auto;
    height: 400px;

    white-space: pre;

    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
}



.btn {
    display:inline-block;
    font-weight:400;
    color:var(--gray-900);
    text-align:center;
    vertical-align:middle;
    user-select:none;
    background-color:transparent;
    border:1px solid transparent;
    padding:.375rem .75rem;
    font-size:.9rem;
    line-height:1.5;
    border-radius:.25rem;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.btn-primary {
    color:hsla(0,0%,calc(-100 * (var(--blue-l) - calc(calc(var(--yiq-contrasted-threshold) / 2.56) * 1%))),1);
    background-color:var(--blue);
    border-color:var(--blue);
    font-size: larger;
}
.btn-primary:hover {
    color:hsla(0,0%,calc(-100 * (calc(var(--blue-l) + -7.5%) - calc(calc(var(--yiq-contrasted-threshold) / 2.56) * 1%))),1);
    background-color:hsla(var(--blue-h),var(--blue-s),calc(var(--blue-l) + -7.5%),var(--blue-a, 1));
    border-color:hsla(var(--blue-h),var(--blue-s),calc(var(--blue-l) + -10%),var(--blue-a, 1))
}
.btn-primary:focus,
.btn-primary.focus {
    color:hsla(0,0%,calc(-100 * (calc(var(--blue-l) + -7.5%) - calc(calc(var(--yiq-contrasted-threshold) / 2.56) * 1%))),1);
    background-color:hsla(var(--blue-h),var(--blue-s),calc(var(--blue-l) + -7.5%),var(--blue-a, 1));
    border-color:hsla(var(--blue-h),var(--blue-s),calc(var(--blue-l) + -10%),var(--blue-a, 1));
    box-shadow:0 0 0 .2rem hsla(calc((0 + var(--blue-h)) / 2),calc((0% + var(--blue-s)) / 2),calc((calc(-100 * (var(--blue-l) - calc(calc(var(--yiq-contrasted-threshold) / 2.56) * 1%))) + var(--blue-l)) / 2),.5)
}
.btn-primary.disabled,
.btn-primary:disabled {
    color:hsla(0,0%,calc(-100 * (var(--blue-l) - calc(calc(var(--yiq-contrasted-threshold) / 2.56) * 1%))),1);
    background-color:var(--blue);
    border-color:var(--blue)
}

.btn-center {
    margin-left:auto;
    margin-right:auto;
    display: flex;
    align-items: center;
}

.btn-sm,
.btn-group-sm>.btn {
    padding:.25rem .5rem;
    //font-size:.7875rem;
    line-height:1.5;
    border-radius:.2rem;
}


.form-control {
    #display: block;
    #width: 100%;
    #height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    padding-right: 0.5rem;
    margin-left:0.75rem;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-700);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--gray-400);
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control.is-invalid {
    border-color: var(--red);
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='var%28--red%29' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='var%28--red%29' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}



.custom-select {

    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-700);
    vertical-align: middle;
    background: var(--white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='var%28--gray-800%29' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;
    border: 1px solid var(--gray-400);
    border-radius: .25rem;
    appearance: none;

}


.nav {
    display:flex;
    flex-wrap:wrap;
    padding-left:0;
    margin-bottom:0;
    list-style:none
}
.nav-tabs .nav-item.show .nav-link {
    color:var(--gray-700);
    background-color:var(--white);
    border-color:var(--gray-300) var(--gray-300) var(--white)
}

nav a {
    margin-left: 50px;
    // text-decoration: none; // removing links underline is a bad idea
}

footer .nav-item:before {
    /* content:"\2022"; */
    width:1rem;
    display:inline-block;
    margin-left:-1.15rem;
    padding-top:1rem!important;
    margin-top:auto!important;
}


.test {
    color:red;
}