:root {
    --sw-anchor-active-primary-color: #482683;
    --sw-anchor-done-primary-color: #8E77B6;
    --sw-toolbar-btn-background-color: #8E77B6;
    --sw-progress-color: #F2652C;
}

*, *:before, *:after { box-sizing: border-box; }

input[type="radio"], input[type="checkbox"] { height: 1.2rem; width: 1.2rem; margin-right: 0.5rem; appearance: none; -webkit-appearance: none; border: 0.2rem solid #E0E0E0; background-color: #F0F0F0; box-shadow: 0 0 0 1px var(--color); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline-offset: 0; }
input[type="radio"]:hover, input[type="checkbox"]:hover { border-width: 0; }
input[type="radio"]:checked, input[type="checkbox"]:checked { box-shadow: 0 0 0 1px #F2652C; background-color: #F2652C; border-width: 0.2rem; border-color: #FFFFFF; }

.btn-primary { border-color: #482683; color: #482683; }
.btn-primary:hover { background: #482683; color: #ffffff; }

#smartwizard .tab-pane { padding: 0 40px 40px; }
#smartwizard .tab-pane hr { margin-bottom: 60px; }

.course-entry { margin-top: 40px; }
.course-entry-number { display: inline-block; width: 30px; }
.course-entry-question { display: inline-block; }
.course-entry-image { margin-left: 35px; margin-top: 20px; }
.course-entry-image img { max-height: 200px; }
.course-entry-answers { display: block; padding-left: 35px; margin-top: 20px; }
.course-entry-answers div { display: flex; }
.course-entry-answers label { display: flex; align-items: center; align-content: flex-start; min-width: 20em; background-color: transparent; border-radius: 12px; cursor: pointer; margin: 1px 0; padding: 8px 10px; transition: all 0.25s; }
.course-entry-answers label:hover { background-color: #f2652c; color: #ffffff; }
.course-entry-answers span { display: block; padding-left: 8px; }

.course-presentation { display: flex; justify-content: end; margin-top: 50px; }
#course-presentation-submit { min-width: 200px; }

/*
 * RESULTS
 */

@property --p{ syntax: '<number>'; inherits: true; initial-value: 1; }
.pie { --p:0; --b:40px; --c:darkred; --w:200px; aspect-ratio: 1; display: inline-grid; font-family: sans-serif; font-size: 25px; font-weight: bold; margin: 5px; place-content: center; position: relative; width: var(--w); }
.pie:before, .pie:after { border-radius: 50%; content: ""; position: absolute; }
.pie:before { inset: 0; background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); }
.pie:after { inset: calc(50% - var(--b)/2); background: var(--c); transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); }
.animate { animation: p 1s .5s both; }
.no-round:before { background-size: 0 0, auto; }
.no-round:after { content: none; }
@keyframes p { from{--p:0} }