
body * {
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 11pt;
    background-color: #f1f5f7;
    color: var(--default-text-color);
}

:root {
    --root-padding: 40px;
    --bg-default: white;
    /*--primary: #5593FB;*/
    /*--success: #45B496;*/
    --border-color: #727272;
    --light-border-color: #d3d3d3;
    --app-block-width: 500px;
    --large-app-block-width: 1000px;
    --padding-sm: .5rem;
    --padding-md: .8rem;
    --padding-lg: 1rem;
}


.root {
    padding-top: var(--root-padding);
}

.app-block {
    /*background-color: var(--bg-default);*/
    /*border: 1px solid var(--light-border-color);*/
    margin: 0 auto;
    width: var(--app-block-width);

    /*padding: var(--padding-xl);*/
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    border-radius: var(--border-radius-md);
}


.app-block.large {
    width: 100%;
    max-width: var(--large-app-block-width);
}

.app-block__header {
    background-color: var(--white);
    padding: var(--padding-lg);
    border-bottom: 1px solid var(--light-border-color);
}

.app-block__header img {
    margin: 0 auto;
    width: 50%;
    display: block;
}

.app-block.large .app-block__header img {
    width: 25%;
}

.app-block__body {
    padding: var(--padding-md);
}

.form-group {
    margin-bottom: var(--padding-md);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    display: block;
    margin-bottom: calc(var(--margin-xs) / 2);
}

.form-group input {
    padding: var(--box-padding-input);
    border-radius: var(--border-radius-md);
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    transition: border-color .2s ease-in;
    border: 2px solid var(--light-border-color);
    outline: none;
}

.form-group input:focus {
    border-color: var(--border-color);
}

.margin-bottom-lg {
    margin-bottom: var(--margin-lg);
}

.margin-bottom-mega {
    margin-bottom: var(--margin-mega);
}

.margin-right-md {
    margin-right: var(--margin-md);
}

.btn {
    border: 1px solid;
    outline: none;
    border-radius: var(--border-radius-md);
    transition: background-color .2s ease-in, box-shadow .2s ease-in;
    cursor: pointer;

    font-family: inherit;
    color: inherit;
    text-decoration: none;

    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size-md);
    box-shadow: var(--button-box-shadow-lg);
    display: inline-block;
}

.btn:hover {
    box-shadow: var(--button-hover-box-shadow-lg);
}

.btn.btn-primary {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--white);
}

.btn.btn-lg {
    font-size: var(--font-size-lg);
}

.btn.btn-full-width {
    width: 100%;
    text-align: center;
}

.errorlist {
    margin: 0;
    background-color: var(--bg-danger);
    padding: var(--padding-md) var(--padding-lg);
    color: var(--danger);
    border-radius: 6px;
    margin-bottom: var(--padding-md);
}

.errorlist li {
    display: list-item;
    list-style: none;
    text-align: left;
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.text-large {
    font-size: 1.5rem;
}

.text-small {
    font-size: .8rem;
}

.link {
    color: var(--link);
    text-decoration: none;

}

.flex-row {
    display: flex;
}

.flex-space-between {
    justify-content: space-between;
}

.align-self-end {
    align-self: flex-end;
}

.form-header {
    padding-bottom: var(--padding-lg);
    font-size: 1.2rem;
    font-weight: bold;
}

.text-right {
    text-align: right;
}

.radio-select-block {
    position: relative;
    cursor: pointer;
}

.radio-select-block input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.radio-select-block .radio-label {
    display: flex;
    align-items: center;
    padding: var(--padding-lg);
    background-color: white;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--default-text-color);
    border: 1px solid var(--light-border-color);
    border-radius: var(--border-radius-lg);
}

.radio-select-block input:checked ~ .radio-label {
    background-color: var(--primary-dark);
    color: white;
}

.radio-select-block input:checked ~ .radio-label:before {
    content: "\f090";
    font-family: "Font Awesome 6 Pro";
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}
