/* styles for giving app */
:root {
	--shadow: 
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
    --font-sans: 'Figtree', sans-serif;

}
@media (min-width: 0px) {
    html {
		font-size: 65.2%;
	}
	body {
		background-color: #fff;
		/*#2c3e50;*/
		color: #222;
		font-family: var(--font-sans);
		font-size: 2rem;
		font-weight: 400;
		height: 100%;
		line-height: 1.5;
		margin: 0;
		overflow-x: hidden;
		overflow-x: hidden;
		overflow-y: scroll;
		padding: 0;
		/* has to be scroll, not auto */
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	#all {
        display: flex;
        flex-direction: column;
        float: left;
        height: 100vh;
		overflow-x: hidden;
		scroll-behavior: smooth;
        width: 100%;
	}
    .header,
    main
    .footer {
        display: block;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
    }
    .header,
    .footer {
        flex-grow: 0;
        flex-shrink: 0;
        min-height: 40px;
    }
    .header .logo {
        max-height: 60px;
        width: auto;
    }
    main {
        flex-grow: 1;
        flex-shrink: 1;
    }
    .bg {
        font-size: 70%;
        padding: 6px 12px;
    }
    .bg-info {
        background-color: #afd8e1 !important;
        color: #222;
    }
    .credits {
        font-size: 1.25rem;
        opacity: 0.6;
        padding: 4px 12px;
        text-align: right;
    }   
        .credits a {
            color: #000;
            text-decoration: none;
        }
    .field {
        padding: 8px 16px 8px 0;
    }
    .field-label {
        display: flex;
        flex-direction: column;
    }
    .field input,
    .field textarea {
        padding: 4px 8px;
    }
    .field .field-input input,
    .field .field-input textarea {
        width: 100%;
    }
    .field-group-check label {
        display: flex;
        flex-direction: row;
    }
    .field-group-check .field-input {
        margin-right: 8px;
    }
        .field-group-check .field-input input {
            height: 20px;
            width: 20px;
        }
    .choices {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .radio-custom-label {
        flex-grow: 0;
        flex-shrink: 0;
        margin: 8px 32px 8px 0;
        width: 132px;
    }
        .radio-custom-label input {
            height: 20px;
            width: 20px;
        }
    #other .field-label {
        font-weight: 800;
    }
    h1 {
        font-size: 4rem;
        font-weight: 800;
    }
    .workspace p {
        font-size: 2rem;
        padding: 6px 0;
    }
    form h2 {
        font-size: 3rem;
        font-weight: 800;
        padding: 24px 0 0 0;
    }
    form .cc {
        width: 280px;
    }
    form .cc label {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        width: 100%;
    }
        form .cc .cc-input {
            border: 1px solid #555;
            border-radius: 6px;
            margin: 2px 0;
            padding: 8px 20px 6px 20px;
        }
    form .btn-submit {
        font-size: 2rem;
        font-weight: 800;
        margin: 12px 0;
        padding: 12px 40px;
    }
    form .btn-submit:hover {
        box-shadow: var(--shadow);
    }
    main {
        padding-bottom: 24px;
    }
    table {
        display: block;
        float: left;
        padding: 24px 0;
        width: 100%;
    }
    table tr td:first-child {
        font-weight: 800;
        padding-right: 12px;
    }
    .error {
        background: #d35400;
        color: #fff;
        margin: 3px;
        padding: 8px 12px;
    }
    p.error .badge {
        font-size: 60%;
    }
    #login {
        margin: 0 auto;
        max-width: 300px;
        padding: 40px 0;
    }
    #login label {
        padding-top: 16px;
    }
    #login .form-control {
        font-size: 2rem;
    }
    #login .error {
        color: #d35400;
    }
    #admin input {
        border: 1px solid #555;
        padding: 3px 8px;
    }
}
@media (min-width: 768px) {
    .workspace {
        margin: 0 auto;
        max-width: 540px;
    }
    form .group {
        display: flex;
        flex-direction: row;
    }
}