@charset "UTF-8"; :root { --font-sans-serif: system-ui, -apple-system, "Segoe UI", "Rubik", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --body-font-family: "Rubik", sans-serif; --body-font-size: 0.98rem; --body-font-color: #0C1011; --body-light-weight: 300; --body-regular-weight: 400; --body-medium-weight: 500; --body-strong-weight: 600; --body-stronger-weight: 700; --body-line-height: 1.35; --link-color: #2873B5; --link-hover-color: #0d518c; /* TITLES */ /* Unused */ --headings-font-family: "Rubik", sans-serif; --headings-font-weight: 600; --headings-font-style: normal; --headings-margin-bottom: 1.25rem; --headings-color: #2C2C3D; --h1-font-size: 36px; --h1-line-height: 1.05; --h2-font-size: 31px; --h2-line-height: 1.05; --h3-font-size: 26px; --h3-line-height: 1.15; --h4-font-size: 19px; --h4-line-height: 1.15; --h5-font-size: 18px; --h5-line-height: 1.10; --h6-font-size: 17px; --h6-line-height: 1.10; --h7-font-size: 16px; --h7-line-height: 1.10; --alert-success-background: #E0FBE8; --alert-success-color: #345A31; --alert-success-icon: #36956B; --alert-info-background: #e0ebfb; --alert-info-color: #313d5a; --alert-info-icon: #365d95; --alert-warning-background: #FCF5D9; --alert-warning-color: #903c08; --alert-warning-icon: #ce6520; --alert-danger-background: #FBE2E2; --alert-danger-color: #912055; --alert-danger-icon: #E34649; /* BUTTONS */ --button-height: 41px; --button-height-md: calc(var(--button-height) * 1.2); --button-height-lg: calc(var(--button-height) * 1.6); --button-radius: 3px; /* *0 OR / 2 */ --button-font-weight: var(--body-regular-weight); --button-font-size: 0.90rem; --button-line-height: 1.25; --button-padding: 0px 16px; --button-gap: 0 8px; --button-border-width: 0.1rem; --button-shadow: 0px 11px 25px rgba(0, 0, 0, 0.15), 0px 37px 35px rgba(0, 0, 0, 0.15); --button-transition: background-color 0.2s, color 0.2s; /* FORMS */ --form-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BD1818' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --form-border-width: 1px; --form-border-color: #668da3; --form-outline-width: 2px; --form-outline-color: #dfeaf1; --form-border-radius: .175rem; } #debugger { display: inline-block; position: fixed; bottom: 30px; left: 0; z-index: 999; } #debugger summary { list-style: none; } #debugger summary::marker, #debugger summary::-webkit-details-marker { display:none; } #debugger summary::before { display: inline-block; background-color: #fff; color: #840372; font-size: 11px; font-weight: 600; padding: 2px 2px; line-height: 1; content: '∞'; box-shadow: 0 1px 1px rgba(0,0,0,0.35); } :root { color-scheme: light; supported-color-schemes: light; } @media (prefers-color-scheme: dark) { /* target devices or user preferences that have a dark color scheme set. */ :root { color-scheme: light; } /* sets the color-scheme property of the HTML document, usually the tag to light. */ } *, *::before, *::after { box-sizing: border-box; min-height: 0; min-width: 0; } @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { .form-control { transition: none; } .form-select { transition: none; } } html { scroll-behavior: smooth; } body { font-weight: var(--body-light-weight); font-family: var(--body-font-family); font-size: var(--body-font-size); line-height: var(--body-line-height); color: var(--body-font-color); font-optical-sizing: auto; margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* overflow-x: hidden; - DO NOT USE HERE, OTHERWISE POSITION SITCKY DOESN'T WORK! */ } main a, main button, main input, main select, main textarea, main h2, main h3, main h4, main [tabindex="0"] { scroll-margin-top: 80px; scroll-margin-bottom: 100px; } hr { margin: 1.5rem 0; color: inherit; border: 0; border-top: 1px solid transparent; opacity: 1; border-color: rgba(0, 0, 0, 0.1); } h6, h5, h4, h3, h2, h1 { /* color: var(--headings-color); */ font-family: var(--headings-font-family); margin-bottom: var(--headings-margin-bottom); font-weight: var(--headings-font-weight); font-style: var(--headings-font-style); margin-top: 0; } h1, .h1 { font-size:var(--h1-font-size); line-height: var(--h1-line-height); } h2, .h2 { font-size:var(--h2-font-size); line-height: var(--h2-line-height); } h3, .h3 { font-size:var(--h3-font-size); line-height: var(--h3-line-height); } h4, .h4 { font-size:var(--h4-font-size); line-height: var(--h4-line-height); } h5, .h5 { font-size:var(--h5-font-size); line-height: var(--h5-line-height); } h6, .h6 { font-size:var(--h6-font-size); line-height: var(--h6-line-height); } .h7 { font-size:var(--h7-font-size); line-height: var(--h7-line-height); } p { margin-top: 0; margin-bottom: 1rem; } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 0; font-style: normal; line-height: inherit; } dl { margin-top: 0; margin-bottom: 1rem; } dt { font-weight: inherit; } dd { margin-bottom: 0; margin-left: 0; } small, .small { font-size: 80%; } mark, .mark { background-color: transparent; /* padding: 0.1875em; */ } sub, sup { position: relative; font-size: 80%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img {max-width: 100%; height: auto; } table { caption-side: bottom; border-collapse: collapse; } th { text-align: inherit; text-align: -webkit-match-parent; } tbody, td, tfoot, th, thead, tr { border-color: inherit; border-style: solid; border-width: 0; } label { display: inline-block; } button{border-radius:0} button:focus:not(:focus-visible){ /* outline:0 */ } input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit; outline: none; } button,select{text-transform:none} [role=button]{cursor:pointer} select{word-wrap:normal} select:disabled{opacity:1} [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important} button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button} button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer} ::placeholder{opacity:0.4;color:inherit;} ::-moz-placeholder{opacity:0.4;color:inherit;} ::-webkit-input-placeholder{opacity:0.4;color:inherit;} ::-moz-focus-inner{padding:0;border-style:none} textarea{resize:vertical} figure { margin: 0; margin-bottom: 1.0rem; } figure figcaption { /* padding-top: 8px; font-size: 88%; opacity:0.5; font-style: italic; */ } fieldset{min-width:0;padding:0;margin:0;border:0; } legend{ /* float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + 0.3vw);line-height:inherit; */ } legend + * { /* clear: left; */ } img,svg{vertical-align:middle} ::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0} ::-webkit-inner-spin-button{height:auto} [type=search]{outline-offset:-2px;-webkit-appearance:textfield} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-color-swatch-wrapper{padding:0} ::-webkit-file-upload-button{font:inherit;-webkit-appearance:button} ::file-selector-button{font:inherit;-webkit-appearance:button} /* input:-internal-autofill-selected being overridden on Chrome (via webkit) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { -webkit-text-fill-color: inherit; /* text color */ -webkit-box-shadow: 0 0 0px 1000px transparent inset; /* background color */ transition: background-color 5000s ease-in-out 0s; } input[type=number]{ -moz-appearance: textfield; appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; opacity: 1; } output{display:inline-block} iframe{border:0} blockquote { margin: 0 0 1rem 0; } summary{display:list-item;cursor:pointer} progress{vertical-align:baseline} [hidden]{display:none!important} pre, code, kbd, samp { font-family: var(--font-monospace); font-size: 1em; } kbd { padding: .125rem .275rem; font-size: .875em; border-radius: .15rem; line-height: 1; color: #003C71; background-color: #CEE3FF; font-weight: bold; } b, strong { font-weight: var(--body-medium-weight); } .strong { font-weight: var(--body-strong-weight); } .stronger { font-weight: var(--body-stronger-weight); } a { color: var(--link-color); text-decoration: underline; } a:hover { color: var(--link-hover-color); text-decoration: none; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } p.lead { font-size: 120%; } p.light { font-weight: 300; } /* COMPONENTS */ .text-start{text-align:left} .text-end{text-align:right} .text-center{text-align:center}.text-break { word-wrap: break-word; word-break: break-word; } .text-uppercase { text-transform: uppercase; } .text-justify { text-align: justify; } .text-muted { opacity: 0.6; } .ratio { display: block; position:relative; width:100%; } .ratio::before{display:block;padding-top:var(--aspect-ratio);content:""} .ratio > *{ display: block; position:absolute;top:0;left:0;width:100%;height:100%} .ratio-1x1{--aspect-ratio:100%} .ratio-4x3{--aspect-ratio:calc(3 / 4 * 100%)} .ratio-16x9{--aspect-ratio:calc(9 / 16 * 100%)} .ratio-21x9{--aspect-ratio:calc(9 / 21 * 100%)} .ratio-28x9{--aspect-ratio:calc(9 / 28 * 100%)} .ratio-3x4{--aspect-ratio:calc(4 / 3 * 100%)} .ratio-9x16{--aspect-ratio:calc(16 / 9 * 100%)} .ratio-9x21{--aspect-ratio:calc(21 / 9 * 100%)} .ratio-9x28{--aspect-ratio:calc(28 / 9 * 100%)} .ratio-rounded { border-radius: var(--button-radius); overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .clearfix, .clear { visibility:hidden; display:block; font-size:0; content:''; clear:both; height:0; } .clearfix::after{display:block;clear:both;content:""} .trans { --webkit-transition:all 0.2s; --moz-transition:all 0.2s; transition:all 0.2s; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .img-contain { width: 100%; height: 100%; object-fit: contain; } .img-contain.left { object-position: left; } .img-contain.right { object-position: right; } .img-contain.top { object-position: top; } .img-contain.bottom { object-position: bottom; } .cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .alert { padding: 12px 18px; border-radius: 4px; margin-bottom: 20px; font-weight: 400; } .alert .btn-alert { display: inline-block; padding: 6px 12px; background-color: #003C71; color: white; text-decoration: none; font-size: 14px; border-radius: 3px; transition:opacity 0.2s; } .alert .btn-alert:hover { opacity: 0.9; } .alert-success { background-color: var(--alert-success-background); color: var(--alert-success-color); } .alert-success .icon { color: #36956B; } .alert-success .btn-alert { background-color: var(--alert-success-color) } .alert-info { background-color: var(--alert-info-background); color: var(--alert-info-color); } .alert-info .icon { color: #3778ce; } .alert-info .btn-alert { background-color: var(--alert-info-color) } .alert-warning { background-color: var( --alert-warning-background); color: var(--alert-warning-color); } .alert-warning .icon { color: #ec721b; } .alert-warning .btn-alert { background-color: var(--alert-warning-color) } .alert-danger { background-color: var(--alert-danger-background); color: var(--alert-danger-color); } .alert-danger .icon { color: #E34649; } .alert-danger .btn-alert { background-color: var(--alert-danger-color) } .alert .alert-link { font-weight: 400; } .alert-danger .alert-link { color: var(--alert-danger-color); } .alert-warning .alert-link { color: var(--alert-warning-color); } .alert-success .alert-link { color: var(--alert-success-color); } .alert-info .alert-link { color: var(--alert-info-color); } /* GRID SYSTEM - https://www.mozilla.org/en-GB/firefox/119.0/whatsnew/ */ .container, .container-fluid { --container-gutter: 20px; /* zoom: 1; -> WARNING: This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. */ margin: 0 auto; width: 100%; padding-right: var(--container-gutter); padding-left: var(--container-gutter); } .container-fluid { max-width: 100%; } .container.container-narrow { max-width: 860px; } .container.container-narrower { max-width: 560px; } .vertically-centered { display: flex; flex-direction: column; flex: 1; justify-content: center; } /* -------------------------------> BUTTONS <------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: var(--button-font-size); line-height: var(--button-line-height); gap: var(--button-gap); border-radius: var(--button-radius); font-weight: var(--button-font-weight); border: var(--button-border-width) solid transparent; white-space: nowrap; vertical-align: middle; text-decoration: none; background-color: transparent; -webkit-transition:var(--button-transition); -moz-transition:var(--button-transition); transition:var(--button-transition); height: var(--button-height); padding: var(--button-padding); /* min-width: 130px; */ } .btn:hover { text-decoration: none; color: inherit; } .btn:disabled { cursor: not-allowed; pointer-events: none; } .btn strong { font-weight: 500; } .btn-full { display: flex; width: 100%; } .btn .icon { line-height: 1; font-size: 100%; } .btn .icon-img { display: inline-block; width: 18px; height: 18px; } /* Button Efects */ .btn[data-effect="ripple"] { position: relative; overflow: hidden; } .btn[data-effect="ripple"] s { background-color: rgba(0, 0, 0, 0.5); position: absolute; pointer-events: none; text-decoration: none; transform: translate(-50%,-50%); border-radius: 50%; animation: btn_animate 1s linear infinite; } @keyframes btn_animate { 0% { width: 0px; height: 0px; opacity: 0.25; } 100% { width: 350px; height: 350px; opacity: 0; } } /* Link */ .btn-link {} /* Solid */ .btn-white { background-color:var(--color-white); color:var(--color-blue-dark); } .btn-blue { background-color:var(--color-blue-dark); color:var(--color-white); } .btn-blue:hover { color:var(--color-white); } .btn-blue-light { background-color:var(--color-blue); color:var(--color-white); } .btn-blue-light:hover { color:var(--color-white); } .btn-red { background-color:var(--color-red); color:var(--color-white); } .btn-red:hover { color:var(--color-white); } .btn-green { background-color:var(--color-green-dark); color:var(--color-white); } .btn-green:disabled { background-color:#717976; opacity: 0.6; } .btn-green:hover { color:var(--color-white); } /* Outlined */ .btn-white.btn-outline { background-color: transparent; border-color:var(--color-white); color:var(--color-white); } .btn-white.btn-outline:hover { background-color: var(--color-white); color: var(--color-blue-dark); /* box-shadow: 0 0 0 2px white, 0 0 0 4px white; */ } .btn-blue.btn-outline { background-color: transparent; border-color:var(--color-blue-dark); color:var(--color-blue-dark); } .btn-blue.btn-outline:hover { background-color: var(--color-blue-dark); color: var(--color-white); } .btn-blue-light.btn-outline { background-color: transparent; border-color:var(--color-blue); color:var(--color-blue); } .btn-blue-light.btn-outline:hover { background-color: var(--color-blue); color: var(--color-white); } /* .btn sizes */ .btn-group-sm > .btn, .btn-sm { --button-height: 30px; --button-font-size: 12px; --button-radius: 2px; --button-padding: 0 12px; --button-border-width: 1px; } .btn-group-md > .btn, .btn-md { --button-height: 46px; --button-font-size: 16px; --button-radius: 4px; --button-padding: 0 18px; --button-border-width: 2px; } .btn-md .icon { font-size: 130%; } .btn-md .icon-img { display: inline-block; width: 30px; height: 30px; } .btn-group-lg > .btn, .btn-lg { --button-height: 50px; --button-font-size: 17px; --button-radius: 4px; --button-padding: 0 22px; --button-border-width: 2px; } .btn-lg .icon { font-size: 130%; } .btn-lg .icon-img { display: inline-block; width: 30px; height: 30px; } .btn-group-xl > .btn, .btn-xl { --button-height: 60px; --button-font-size: 18px; --button-radius: 4px; --button-padding: 0 22px; --button-border-width: 2px; } .btn-xl .icon { font-size: 130%; } .btn-xl .icon-img { display: inline-block; width: 30px; height: 30px; } /* GRID SYSTEM */ .grid { --row-gap-v: 30px; --row-gap-h: var(--row-gap-v); --column-gap: var(--row-gap-h); display: grid; gap: var(--row-gap-v) var(--row-gap-h); column-gap: var(--column-gap); /* place-items: center; */ grid-template-rows: auto; /* max-content 1fr; */ grid-template-columns: repeat(12, 1fr); } .grid-reverse { } /* not possible */ .grid[data-columns="12"] { grid-template-columns: repeat(12, 1fr); } .grid[data-columns="16"] { grid-template-columns: repeat(16, 1fr); } .grid > .cell-1{grid-column:span 1} .grid > .cell-2{grid-column:span 2} .grid > .cell-3{grid-column:span 3} .grid > .cell-4{grid-column:span 4} .grid > .cell-5{grid-column:span 5} .grid > .cell-6{grid-column:span 6} .grid > .cell-7{grid-column:span 7} .grid > .cell-8{grid-column:span 8} .grid > .cell-9{grid-column:span 9} .grid > .cell-10{grid-column:span 10} .grid > .cell-11{grid-column:span 11} .grid > .cell-12{grid-column:span 12} .grid > .cell-13{grid-column:span 13} .grid > .cell-14{grid-column:span 14} .grid > .cell-15{grid-column:span 15} .grid > .cell-16{grid-column:span 16} .grid > [class*="cell-"] > .cell-inner { display: flex; flex-direction: column; height: 100%; } .grid.gap-0 { gap: 0 0; column-gap: 0; } .grid.gap-sm { gap: calc(var(--row-gap-v) * 0.5) calc(var(--row-gap-h)* 0.5); column-gap: calc(var(--column-gap) * 0.5); } .grid.gap-md { gap: calc(var(--row-gap-v) * 1.5) calc(var(--row-gap-h)* 1.5); column-gap: calc(var(--column-gap) * 1.5); } .grid.gap-lg { gap: calc(var(--row-gap-v) * 2.0) calc(var(--row-gap-h)* 2.0); column-gap: calc(var(--column-gap) * 2.0); } .grid.gap-xl { gap: calc(var(--row-gap-v) * 3.0) calc(var(--row-gap-h)* 3.0); column-gap: calc(var(--column-gap) * 3.0); } /* FLEX SYSTEM */ ul.row, ol.row { padding: 0; list-style: none none; list-style-position: inside; } .row { --column-gutter-x: 1.5rem; --column-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--column-gutter-y)); margin-right: calc(-0.5 * var(--column-gutter-x)); margin-left: calc(-0.5 * var(--column-gutter-x)); } .row-reverse { flex-direction: row-reverse; } .row-center { justify-content: center; } .row-middle { align-items: center; } .row-end { align-items: flex-end; } .row > [class*="col-"] { flex: 0 0 auto; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--column-gutter-x) * 0.5); padding-left: calc(var(--column-gutter-x) * 0.5); margin-top: var(--column-gutter-y); } .row > [class*="col-"] > .col-inner { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; } .row > .col-auto { width: auto; } .row > .col-1 { width: 8.33333333%; } .row > .col-2 { width: 16.66666667%; } .row > .col-20 { width: 20%; } .row > .col-3 { width: 25%; } .row > .col-4 { width: 33.33333333%; } .row > .col-5 { width: 41.66666667%; } .row > .col-6 { width: 50%; } .row > .col-7 { width: 58.33333333%; } .row > .col-8 { width: 66.66666667%; } .row > .col-9 { width: 75%; } .row > .col-10 { width: 83.33333333%; } .row > .col-11 { width: 91.66666667%; } .row > .col-12 { width: 100%; } .g-0,.gx-0{--column-gutter-x:0} .g-0,.gy-0{--column-gutter-y:0} .g-1,.gx-1{--column-gutter-x:.25rem} .g-1,.gy-1{--column-gutter-y:.25rem} .g-2,.gx-2{--column-gutter-x:.5rem} .g-2,.gy-2{--column-gutter-y:.5rem} .g-3,.gx-3{--column-gutter-x:1rem} .g-3,.gy-3{--column-gutter-y:1rem} .g-4,.gx-4{--column-gutter-x:1.5rem} .g-4,.gy-4{--column-gutter-y:1.5rem} .g-5,.gx-5{--column-gutter-x:3rem} .g-5,.gy-5{--column-gutter-y:3rem} /* SPACING */ .mb-0{margin-bottom:0} .mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.5rem} .mb-5{margin-bottom:3rem} .mb-auto{margin-bottom:auto} .form-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; color: var(--form-border-color); font-weight: 400; } .form-control, .form-select { display: block; width: 100%; padding: .575rem .75rem; font-size: var(--body-font-size); font-weight: var(--body-regular-weight); line-height: 1.5; color: var(--body-font-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-white); background-clip: padding-box; border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); outline: var(--form-outline-width) solid var(--form-outline-color); transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .form-select { padding-right: .385rem; background-image: var(--form-select-chevron); background-repeat: no-repeat; background-position: right .45rem center; background-size: 24px 18px; } .form-control:read-only, .form-control:disabled { background-color: rgba(124, 129, 133, 0.15); color: rgba(0, 0, 0, 0.6); cursor: not-allowed; } .form-select:disabled { background-color: rgba(124, 129, 133, 0.15); color: rgba(0, 0, 0, 0.6); cursor: not-allowed; } .form-control.invalid { outline-color: #faa0a0; outline-width: 3px; border-color: red; } /* CHECKBOXES */ .form-check { display: block; min-height: 1.5rem; padding-left: 1.9em; margin-bottom: .125rem; } .form-check .form-check-input { float: left; margin-left: -1.9em; } .form-check .form-check-label { user-select: none; cursor: pointer; } .form-check-input { flex-shrink: 0; width: 1.35em; height: 1.35em; margin-top: .035em; vertical-align: top; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; background-image: var(--form-check-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: var(--form-border-width) solid var(--form-border-color); outline: var(--form-outline-width) solid var(--form-outline-color); -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; } .form-check-input { border-radius: .15em; } .form-check-input:checked[type="checkbox"] { background-color: var(--color-green); border-color: var(--color-green); --form-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } /* FORM GROUP */ .input-group-append, .input-group-prepend { display: -webkit-box; display: -ms-flexbox; display: flex; } .input-group-append { margin-left: -1px; } .input-group-prepend { margin-right: -1px; } .input-group { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; } .input-group-text { display: flex; align-items: center; padding: .575rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--body-font-color); text-align: center; white-space: nowrap; border-radius: var(--form-border-radius); border: var(--form-border-width) solid var(--form-outline-color); outline: 2px solid var(--form-outline-color); background-color: var(--form-outline-color); } .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control, .input-group > .input-text, .input-group > .form-floating, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(var(--bs-border-width) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; } .nowrap { white-space: nowrap; } .nowrap.long { white-space: pre-line; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; /* hyphens: auto; */} .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; } .form-actions .primary {} .form-actions .secondary {} .form-actions .btn .bi-send-fill { display: inline-block; transform: rotate(0); transition: transform 0.3s ease-in-out; } .form-actions .btn:hover .bi-send-fill { transform: rotate(45deg) translateX(-5px) translateY(5px) scale(1.2); } .form-text { margin-top: 5px; font-size: 12px; color: #595C5F; } .badge { margin-right: 3px; background-color: #6C757D; color: white; display: inline-block; padding: 4px 7px; font-size: 13px; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius:2px; } .badge-danger { background-color: var(--color-red); } .badge-success { background-color: var(--color-green); } /* TABLES */ .table{ --tColor-border: #DEE2E6; --tColor-stripe: #F7F7F7; --tColor-hover: #e6eff7; --tBorder-width: 1px; width:100%; vertical-align:top; margin-bottom:1rem; border-color:var(--tColor-border); } .table > :not(caption) > * > *{padding:.5rem;border-bottom-width:var(--tBorder-width); transition:background-color 0.2s; } .table > tbody{vertical-align:inherit} .table > thead{vertical-align:bottom} .caption-top{caption-side:top} .table-sm > :not(caption) > * > *{padding:.25rem; } .table-bordered > :not(caption) > *{border-width:var(--tBorder-width) 0} .table-bordered > :not(caption) > * > *{border-width:0 var(--tBorder-width)} .table-borderless > :not(caption) > * > *{border-bottom-width:0} .table-borderless > :not(:first-child){border-top-width:0} .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--tColor-stripe); } .table-striped-columns > :not(caption) > tr > :nth-child(even) { background-color: var(--tColor-stripe); } .table-hover > tbody > tr:hover > * { background-color: var(--tColor-hover); } .table-group-divider { border-top-width: calc(var(--tBorder-width) * 2); border-top-style: solid; border-top-color: currentcolor; } .container-doc { max-width: 740px; width: 100%; margin-left: auto; margin-right: auto; } form :has(input:invalid) input.form-control { /* border: 1px solid red; outline: 2px solid pink; */ } .table-cookies { display: table; width:100%; max-width:100%; border-spacing:0; border-collapse:collapse; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0.1); } .table-cookies th, .table-cookies td { padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.1); } .table-cookies thead { font-size: 12px; text-transform: uppercase; background-color: rgba(0, 0, 0, 0.1); text-shadow: 0 1px 1px #ffffff; } .table-cookies tbody { font-size: 90%; } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ ANIMATIONS ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ .animated { opacity: 0; } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ BREAKPOINTS ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */ @media (min-width: 576px) { .container { max-width: 540px; max-width: 100%; } .hidden-sm-up { display: none !important; } } @media (min-width: 768px) { .container { max-width: 720px; max-width: 100%; } .hidden-md-up { display: none !important; } } @media (min-width: 992px) { .container { max-width: 960px; max-width: 100%; } .hidden-lg-up { display: none !important; } } /* @media ---| >= 992px |--- */ @media (min-width: 1280px) { .container { max-width: 1170px; max-width: 100%; } .hidden-xl-up { display: none !important; } } @media (min-width: 1366px) { .container { max-width: 1260px; } /* was 1170px ; 1190px; 1278px; 1320px */ .hidden-xxl-up { display: none !important; } } @media (min-width: 1440px) { .container { /* max-width: 1352px; */ } .hidden-3xl-up { display: none !important; } } @media (min-width: 1600px) { .container { /* max-width: 1512px; */ } .hidden-4xl-up { display: none !important; } } @media (min-width: 1920px) { .container { /* max-width: 90%; */ } } /* 1920px & Up */ /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ #################################### DEVELOPMENT BREAKPOINTS ################################## ║ */ /* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* 4XL */ @media (max-width: 1919.98px) { #debugger summary::before { content:'4XL'; } .row[data-collapse="4xl"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 1920px |--- */ /* 3XL */ @media (max-width: 1599.98px) { #debugger summary::before { content:'3XL'; } .row[data-collapse="3xl"] > [class*="col-"] { width: 100%; } .container.container-narrow { max-width: 860px; } .container.container-narrower { } } /* @media ---| width < 1600px |--- */ /* 2XL */ @media (max-width: 1439.98px) { #debugger summary::before { content:'XXL'; } .hidden-xxl-down { display: none !important; } .row[data-collapse="2xl"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 1440px |--- */ /* XL */ @media (max-width: 1365.98px) { :root { } #debugger summary::before { content:'XL'; } .hidden-xl-down { display: none !important; } .row[data-collapse="xl"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 1366px |--- */ /* LG */ @media (max-width: 1279.98px) { :root { --body-font-size: 0.96rem; --h1-font-size: 30px; --h2-font-size: 26px; --h3-font-size: 22px; --h4-font-size: 18px; --h5-font-size: 18px; --h6-font-size: 18px; --h7-font-size: 16px; } #debugger summary::before { content:'LG'; } .hidden-lg-down { display: none !important; } .row[data-collapse="lg"] > [class*="col-"] { width: 100%; } .container.container-narrow { max-width: 860px; } .container.container-narrower { } } /* @media ---| width < 1200px |--- */ /* MD */ @media (max-width: 991.98px) { #debugger summary::before { content:'MD'; } :root { --button-padding: 0 20px; --h1-font-size: 24px; --h2-font-size: 21px; --h3-font-size: 20px; --h4-font-size: 18px; --h5-font-size: 18px; --h6-font-size: 18px; --h7-font-size: 16px; } .hidden-md-down { display: none !important; } .row[data-collapse="md"] > [class*="col-"] { width: 100%; } .form-actions { display: flex; gap: 0 15px; align-items: center; justify-content: space-between; } .form-actions .primary { margin-bottom: 20px; } .form-actions .secondary {} .row-services > [class*="col-"] { width: 50%; } .btn-group-lg > .btn, .btn-lg { --button-height: 46px; --button-font-size: 16px; --button-radius: 4px; --button-padding: 0 12px; } } /* @media ---| width < 992px |--- */ /* SM */ @media (max-width: 767.98px) { #debugger summary::before { content:'SM'; } :root { --body-font-size: 0.90rem; --button-padding: 0 16px; --button-font-size: 0.85rem; --h1-font-size: 22px; --h2-font-size: 20px; --h3-font-size: 20px; --h4-font-size: 18px; --h5-font-size: 16px; --h6-font-size: 16px; --h7-font-size: 16px; } .btn-group-md > .btn, .btn-md { --button-height: 38px; --button-font-size: 15px; --button-radius: 3px; --button-padding: 0 12px; --button-border-width: 2px; } .btn { min-width: auto; } .hidden-sm-down { display: none !important; } .alert { padding: 15px; } .row > [class*="col-"], .row[data-collapse="sm"] > [class*="col-"] { width: 100%; } hr { margin: 1.0rem 0; } .container.container-narrow, .container.container-narrower { max-width: 100%; } .container-doc { width: auto; margin-left: 15px; margin-right: 15px; } } /* @media ---| width < 768px |--- */ /* XS */ @media (max-width: 575.98px) and (orientation:landscape) {} @media (max-width: 575.98px) { #debugger summary::before { content:'XS'; } :root { --body-font-size: 0.86rem; --button-padding: 0 12px; --button-font-size: 0.86rem; --h1-font-size: 20px; --h2-font-size: 18px; --h3-font-size: 17px; --h4-font-size: 16px; --h5-font-size: 16px; --h6-font-size: 16px; --h7-font-size: 16px; } .btn-group-xl > .btn, .btn-xl { --button-height: 48px; --button-font-size: 14px; --button-radius: 3px; --button-padding: 0 12px; } .hidden-xs-down { display: none !important; } .row[data-collapse="xs"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 576px |--- */ @media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { } /* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {} @media (max-width: 319.98px) { #debugger summary::before { content:'XXS'; } .hidden-xxs-down { display: none !important; } .row[data-collapse="xxs"] > [class*="col-"] { width: 100%; } } /* @media ---| width < 320px |--- */ /* ---| END |--- */ /* ¡ NO STYLES BELOW THIS LINE PLEASE ! */