<- generated wrapper by Rails
*/
.input-group {
display: flex;
box-sizing: border-box;
}
.input-group > input, .input-group > .field_with_errors {
flex: 999;
}
/* the input that has an addon on the left */
.input-group > .input-group-addon + input {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* the input that has an addon on the right */
.input-group > input:has(+.input-group-addon) {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* remove border of input in error state that has an addon on the right */
.input-group > .field_with_errors:has(+.input-group-addon) input {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* remove border of input in error state with an addon on the left */
.input-group > .input-group-addon + .field_with_errors input {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-addon {
--color-input-background: var(--color-light);
--color-input-border: var(--border-color);
--color-input-active-border: var(--color-bright);
--color-input-addon: #b1bac3;
background: var(--color-input-background);
border: var(--border-sm) solid var(--color-input-border);
width: -webkit-fill-available;
background-image: none;
color: var(--color-input-addon);
display: block;
font-size: var(--font-size);
line-height: var(--line-height);
outline: none;
padding: var(--s-3) var(--s-2);
border-radius: var(--border-radius);
flex: 1;
}
.input-group-addon:has(+input:focus) {
--color-input-border: var(--color-input-active-border);
}
input:focus + .input-group-addon {
--color-input-border: var(--color-input-active-border);
}
/* left-side input group addons */
.input-group > .input-group-addon:has(+input) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
/* error state of input-group-addon that's on the left */
.field_with_errors .input-group > .input-group-addon:has(+.field_with_errors) {
--color-input-background: var(--color-error-light-1);
--color-input-border: var(--color-error);
--color-input-addon: var(--color-error);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
/* right-side input group addons */
.input-group > input + .input-group-addon {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
/* error state of input-group-addon that's on the right */
.field_with_errors .input-group > .field_with_errors + .input-group-addon {
--color-input-background: var(--color-error-light-1);
--color-input-border: var(--color-error);
--color-input-addon: var(--color-error);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
table,
.display\:table {
--table-border-color: var(--color-lightish);
--table-marker-color: var(--color-info);
--table-border-size: var(--border-thin);
--table-background-color: var(--background-color);
--table-padding: var(--s-1);
--table-header-background-color: #f8fafc;
--table-header-font-color: var(--color-grey);
--table-width: 100%;
--table-cell-hover-color: var(--color-light);
--table-font-color: var(--font-color);
color: var(--table-font-color);
border-collapse: collapse;
border-spacing: 0;
text-align: left;
width: var(--table-width);
background-color: var(--table-background-color);
}
table._padding\:none {
--table-padding: 0;
}
table .bg\:error {
--table-border-color: var(--color-light);
--table-marker-color: var(--color-error);
}
table .bg\:warning {
--table-border-color: var(--color-light);
--table-marker-color: var(--color-warning);
}
table.table-sm {
font-weight: normal;
font-size: var(--font-size-sm);
--table-padding: var(--s-2);
}
/* ===================== */
td,
.display\:table-cell,
th,
.display\:table-header-cell {
border-bottom: var(--table-border-size) solid var(--table-border-color);
padding: var(--table-padding) var(--table-padding);
}
td,
.display\:table-cell {
background-color: var(--table-background-color);
color: var(--table-font-color);
}
th,
.display\:table-header-cell {
background-color: var(--table-header-background-color);
}
/*
When we use dropdowns on a table header, do not style the th.
This prevents dropdown elements from all looking like table
headers, which is very difficult to unstyle
@usage
...
<%#= styling for the th is here, on the dropdown trigger %>
Accounts
...
*/
th:not(.with-dropdown),
.th:not(.with-dropdown),
.display\:table-header-group > .display\:table-cell {
border-bottom-width: var(--table-border-size);
font-weight: 600;
color: var(--table-header-font-color);
font-variant: small-caps;
text-transform: uppercase;
font-size: x-small;
letter-spacing: calc(var(--s-7) / 2);
}
th.with-dropdown,
.th.with-dropdown {
font-weight: var(--font-weight);
}
thead,
.display\:table-header-group {
background-color: var(--table-header-background-color);
}
tfoot,
.display\:table-footer-group {
border-top: var(--table-border-size) solid var(--color-lightish);
}
table.border\:none,
.display\:table.table-borderless {
--table-border-size: 0;
}
table tr.active,
.display\:table-row-active,
.display\:table-row.active {
background-color: var(--color-info-lightest);
color: var(--color-primary);
}
table.table-hover tbody tr:hover td,
.display\:table-hover .display\:table-row:hover {
background-color: var(--table-cell-hover-color);
}
.display\:table {
display: table;
}
.display\:table-header-group {
display: table-header-group;
}
.display\:table-row {
display: table-row;
}
.display\:table-cell {
display: table-cell;
vertical-align: middle;
}
.vertical-align\:top {
vertical-align: top;
}
.table._padding\:s-3,
.display\:table._padding\:s-3 {
--table-padding: var(--s-3);
}
/* Settings For Custom Interactions */
.display\:table-row.active input,
.display\:table-row.active textarea,
.display\:table-row.active .input-group-addon,
.display\:table-row.active select {
--color-active: var(--color-primary);
--color-active-background: var(--color-light);
--color-input-background: white;
}
table.intrinsic {
--table-width: auto;
}
.table-marker {
width: var(--border-thick);
background: var(--table-marker-color);
height: calc((2 * var(--table-padding)) + var(--s0));
}
.table tbody tr:last-child td,
.table tfoot tr:last-child td,
table tbody tr:last-child td,
table tfoot tr:last-child td {
border-bottom: none;
}
/* Staff-specific table styling */
th.staff {
--table-header-background-color: var(--color-purple-muted);
--table-header-font-color: var(--color-purple);
--table-border-color: var(--color-purple-bright);
}
td.staff {
--table-background-color: var(--color-purple-lightest);
--table-cell-hover-color: var(--color-purple-light);
--table-font-color: var(--color-purple);
--table-border-color: var(--color-purple-lightish);
}
/*
ALERTS
Alerts, or toasts, are components we use to message users on status of their actions,
or warn them about something.
@variants
.alert.alert-info
.alert.alert-error
.alert.alert-warning
.alert.alert-success
@usage
Alerts should be used as a class on a box-l component.
# content
*/
.alert {
--box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 1%);
--color-background: var(--color-info-light);
--alert-color: var(--color-info);
--color-border: var(--color-info);
background: var(--color-background);
border: var(--border-thin) solid var(--color-border);
color: var(--alert-color);
line-height: 1.5;
box-shadow: none;
}
.alert i {
color: var(--alert-color) default;
}
.alert.alert-warning {
--color-background: var(--color-warning-light);
--alert-color: var(--color-warning-dark);
--color-border: var(--color-warning);
}
.alert.alert-error, .alert.alert-danger {
--color-background: var(--color-error-light);
--alert-color: var(--color-error);
--color-border: var(--color-error);
}
.alert.alert-success {
--color-background: var(--color-success-light);
--alert-color: var(--color-success-dark);
--color-border: var(--color-success);
}
.alert.alert-purple {
--color-background: var(--color-purple-light);
--alert-color: var(--color-purple);
--color-border: var(--color-purple);
}
/* When a child of the floating wrapper in the application, alerts will have a box-shadow */
.flash-wrapper .alert {
box-shadow: var(--box-shadow);
}
figure.avatar {
--avatar-background: var(--color-light-grey);
--avatar-color: var(--color-light);
--size: var(--s2);
font-size: calc(var(--size) / 2);
height: var(--size);
width: var(--size);
background: var(--avatar-background);
color: var(--avatar-color);
border-radius: 50%;
display: inline-block;
position: relative;
vertical-align: middle;
font-weight: 500;
line-height: 1.25;
margin: 0;
}
figure.avatar[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
figure.avatar img {
border-radius: 50%;
position: relative;
z-index: 1;
height: 100%;
width: 100%;
}
figure.avatar.avatar-xl {
font-size: calc(var(--s2) / 2);
height: var(--s6);
width: var(--s6);
}
figure.avatar._size\:s1 {
--size: var(--s1);
}
.badge {
--badge-background: var(--color-primary);
--badge-color: var(--color-light);
position: relative;
white-space: nowrap;
}
.badge._color\:staff {
--badge-background: var(--color-staff);
}
.badge::after {
background: var(--badge-background);
background-clip: padding-box;
border-radius: .5rem;
color: var(--badge-color);
content: attr(data-badge);
display: inline-block;
transform: translate(-0.1rem, -.6rem);
box-shadow: 0 0 0 .1rem var(--background-color);
height: var(--s-3);
min-width: var(--s-3);
padding: 0;
width: var(--s-3);
}
.breadcrumbs a {
text-decoration: none;
}
/*
Button Group
@description
A button group is a style applied to a group of select options that are too few for a dropdown select.
@note
- It's inadvisable to use a button group for a quantity of buttons over 7.
- Use in conjunction with the cluster class for nice layout and spacing rules.
- Button groups are used in tandem with the buttonGroup js controller. See `app/javascript/controllers/README.md`
@examples
```
```
@variants
No variants at this time.
*/
.button-group .button.active {
background: var(--color-info-mid);
border-color: var(--color-info);
color: var(--color-info);
}
.button-group > .button + .button {
margin-left: 0;
margin-right: 0;
border-left: 0;
border-radius: 0;
}
.button-group > .button:nth-last-child(2) {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-group > .button:last-child {
margin-right: calc(var(--cluster-space) / 2);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.button-group > .button:first-child {
margin-right: 0;
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.button-group > .button:only-child {
border-radius: var(--border-radius);
}
/*
Card
@description
A box layout with some custom styling.
@example
```
```
@variants
No present variants
*/
.card {
border: var(--border-thin) solid var(--color-lightish);
box-shadow: var(--box-shadow-1);
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
}
.card:hover {
box-shadow: var(--box-shadow-2);
}
.card.active {
background-color: var(--color-info-mid);
border-color: var(--color-info);
}
.card.active table {
--table-background-color: var(--color-info-mid);
}
/*
COMBO BOX
Usage
.combo is exclusively used to style our custom tag.
See app/helpers/combo_helper.rb for how this html is generated.
<%= combo_tag 'sandbox', options=[], html_options={} %>
*/
.combo {
/* variables */
--menu-hover-background-color: var(--color-info-lightest);
--menu-hover-color: var(--color-bright);
position: relative;
}
.combo input[type="text"] {
background: var(--color-input-background) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false' class='css-8mmkcg'%3E%3Cpath fill='%23b1bac3' d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'%3E%3C/path%3E%3C/svg%3E") no-repeat right var(--s0) center/var(--s0) var(--s0);
padding: var(--s-3) var(--s0) var(--s-3) var(--s-2);
}
.combo[disabled="disabled"] {
pointer-events: none;
opacity: 0.6;
}
.combo[disabled="disabled"]:hover {
cursor: not-allowed;
}
.combo-options-wrapper {
position: absolute;
min-width: var(--measure);
/* max-width: var(--measure); */
width: 100%;
z-index: var(--z1);
}
.combo-options-wrapper.right {
right: 0;
}
.combo .combo-options {
display: none;
/* todo: constrain with JS if the bottom of the window would cut this off */
max-height: 300px;
overflow-y: scroll;
}
.combo.is\:open .combo-options {
display: block;
}
.combo .combo-option {
padding: var(--s-1);
border-radius: var(--border-radius);
}
.combo .combo-option:hover,
.combo .combo-option:focus {
background: var(--menu-hover-background-color);
color: var(--menu-hover-color);
outline: 0;
}
.credit-card-type {
background: url(https://sprout.bonsai.io/assets/png/credit-card-sprite@2x-5cc6564f0dde1dcf999331fdc5fc1df1d5c2c07ff0c98547d51320ba54da2934.png) no-repeat top left;
width: 67px;
height: 40px;
}
.credit-card-type.master { background-position: 0px -240px }
.credit-card-type.MasterCard { background-position: 0px -240px }
.credit-card-type.Blank { background-position: 0px 0px }
.credit-card-type.amex { background-position: 0px -40px }
.credit-card-type.AmericanExpressInverted { background-position: 0px -80px }
.credit-card-type.discover { background-position: 0px -120px }
.credit-card-type.DinersClub { background-position: 0px -160px }
.credit-card-type.JCB { background-position: 0px -200px }
.credit-card-type.Maestro { background-position: 0px -280px }
.credit-card-type.visa { background-position: 0px -320px }
/*
@component Dropdown
@description A simple dropdown component!
@example
```
```
*/
.dropdown {
position: relative;
}
.dropdown > .dropdown-toggle {
cursor: pointer;
}
.dropdown.dropdown-right .dropdown-menu {
left: auto;
right: 0;
}
.dropdown-menu {
display: none;
z-index: 2000;
animation: slide-down 0.15s ease 1;
left: 0;
max-height: 70vh;
overflow-y: auto;
position: absolute;
top: calc(100% + var(--s-3));
}
.dropdown-menu hr {
margin-left: calc(-1 * var(--s0));
margin-right: calc(-1 * var(--s0));
/* margin-bottom: var(--s0); */
}
.fileDrop {
width: -webkit-fill-available;
min-height: unset;
margin: none;
}
.fileDrop {
min-height: 150px;
border: var(--border-thick) dashed var(--color-lightish);
background: #fff;
padding: var(--s0);
border-radius: var(--border-radius);
cursor: pointer;
}
.fileDrop label {
cursor: pointer;
}
.fileDrop.active {
border-color: var(--color-primary);
}
.label {
--label-background: var(--color-lightish);
--label-background-hover: var(--color-dark);
--label-color: var(--color-muted);
--label-color-hover: var(--color-lightish);
--label-border-radius: 1em;
--label-border: none;
--invert-background: var(--color-grey-alpha);
--invert-color: var(--color-light-grey);
background: var(--label-background);
color: var(--label-color);
padding: var(--s-3) var(--s-1);
border-radius: var(--label-border-radius);
border: var(--label-border);
}
/* Dark mode - TODO: think about how to do this in a more intrinsic way */
.bg\:black .label {
--label-background: #e8ebee36;
--label-color: var(--color-light);
}
.label.label-sm {
padding: var(--s-4) var(--s-3);
font-size: smaller;
}
.label i {
color: var(--label-color);
}
.label.label-success,
.label.label-green {
--label-background: var(--color-success-light);
--label-color: var(--color-success);
--label-color-hover: var(--color-success-light);
--label-background-hover: var(--color-success);
--invert-background: var(--color-success-light-alpha);
--invert-color: var(--color-green-bright);
}
.label.label-blue {
--label-background: var(--color-blue);
--label-color: white;
--label-color-hover: var(--color-blue-light);
--invert-background: var(--color-info-light-blue-alpha);
--invert-color: var(--color-info-bright);
}
.label.label-bright-blue {
--label-background: var(--color-info-bright);
--label-color: white;
--label-color-hover: var(--color-blue-light);
}
.label.label-orange {
--label-background: var(--color-orange);
--label-color: white;
}
.label.label-info {
--label-background: var(--color-info-light);
--label-background-hover: var(--color-info-bright-dark);
--label-color: var(--color-info);
--label-color-hover: var(--color-info-light);
--invert-background: var(--color-info-light-blue-alpha);
--invert-color: var(--color-info-bright);
}
.label.label-warning,
.label.label-yellow {
--label-background: var(--color-warning-light);
--label-color: var(--color-warning-dark);
--label-color-hover: var(--color-warning-light);
--label-background-hover: var(--color-warning-dark);
}
.label.label-danger,
.label.label-red,
.label.label-error {
--label-background: var(--color-danger-light);
--label-color: var(--color-danger-dark);
--label-color-hover: var(--color-danger-light);
--label-background-hover: var(--color-danger-mid);
--invert-background: var(--color-error-light-alpha);
--invert-color: var(--color-red);
}
.label.label-pink {
--label-background: rgb(253, 224, 247);
--label-color: rgb(237, 8, 191);
--label-color-hover: var(--label-background);
}
.label.label-purple {
--label-background-hover: var(--color-purple);
--label-background: var(--color-purple-light);
--label-color-hover: var(--color-light);
--label-color: var(--color-purple);
}
.label.label-gradient {
/* background: rgb(0,188,255); */
--label-background: linear-gradient(
90deg,
rgba(0, 188, 255, 0.3) 0%,
rgba(120, 125, 247, 0.3) 62%
);
--label-background-hover: linear-gradient(
90deg,
rgba(0, 188, 255, 1) 0%,
rgba(120, 125, 247, 1) 62%
);
--label-color-hover: var(--color-light);
--label-color: var(--color-purple);
}
.label i {
color: var(--label-color);
}
.popover > .label:hover {
--label-background: var(--label-background-hover);
--label-color: var(--label-color-hover);
}
.label.label-filter {
--label-border: var(--border-sm) solid var(--label-color);
}
/* Loading
Loading indicator is used for loading or updating. You can add the `loading` class to a container for loading status. Add the `loading-lg` class for large size.
Add the `loading` class to buttons to replace content inside with the loading animation.
@examples
```
...content...
```
```
<%= turbo_frame_tag "console_response", class: "turbo-loading stack" do %>
...content...
<% end %>
```
@variants
.loading - the default version, which spins a border around an empty circle
.loading-ellipses - the three dots version
.turbo-loading - adding this to a turbo frame will make the loading indicator appear in the frame's place while its request is in flight. See https://turbo.hotwired.dev/handbook/drive#displaying-progress
*/
.loading,
.turbo-loading[aria-busy="true"] {
min-height: var(--icon-size);
pointer-events: none;
position: relative;
opacity: 0.5;
}
.turbo-loading[aria-busy="true"] {
color: unset !important;
opacity: 0.5;
}
.loading::after,
.turbo-loading[aria-busy="true"]::after {
animation: fa-spin 500ms infinite linear;
border: var(--border-thick) solid var(--color-primary);
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: var(--icon-size);
left: 50%;
margin-left: calc(-1 * var(--s-2));
margin-top: calc(-1 * var(--s-2));
position: absolute;
top: 50%;
width: var(--icon-size);
z-index: 0;
}
.loading-ellipses:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipses steps(4, end) 900ms infinite;
animation: ellipses steps(4, end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipses character */
width: 0px;
}
@keyframes ellipses {
to {
width: 1.25em;
}
}
@-webkit-keyframes ellipses {
to {
width: 1.25em;
}
}
menu {
/* variables */
--menu-hover-background-color: var(--color-info-light);
--menu-active-background-color: var(--color-info-lightest);
--menu-hover-color: var(--color-bright);
--menu-color: var(--color-mid);
/* defaults */
min-width: calc(var(--measure) / 3);
list-style: none;
}
menu li {
text-decoration: none;
user-select: none;
}
menu li > a {
border-radius: var(--border-radius);
display: block;
color: var(--menu-color);
text-decoration: none;
padding: var(--s-2);
}
menu li i {
color: var(--menu-color);
}
menu li > a {
cursor: pointer;
transition: all 0.15s ease-in;
}
menu li > a:hover {
background: var(--menu-hover-background-color);
}
menu li > a.active {
background: var(--menu-active-background-color);
color: var(--menu-hover-color);
}
menu li > a.active i {
color: var(--menu-hover-color);
}
menu.brand {
--menu-active-background-color: var(--color-brand);
--menu-hover-background-color: var(--color-brand-mid);
--menu-hover-color: var(--color-lightest);
--menu-color: var(--color-dark);
}
/*
Meters
@description
A progress bar that shows the completion progress of a task or quality of a value
@reference
- Credits to https://css-tricks.com/html5-meter-element/
@example
```
```
@variants
No present variants
*/
meter {
height: var(--s-2);
width: 100%;
background: var(--color-lightish);
border: none;
border-radius: var(--border-radius);
display: block;
margin-top: var(--s-2);
}
meter::-webkit-meter-inner-element {
display: block;
}
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
border-radius: var(--border-radius);
}
meter::-webkit-meter-bar {
background: var(--color-lightish);
}
meter::-webkit-meter-optimum-value {
background: var(--color-success);
}
meter::-webkit-meter-suboptimum-value {
background: var(--color-warning);
}
meter::-webkit-meter-even-less-good-value {
background: var(--color-error);
}
meter::-moz-meter-bar,
meter:-moz-meter-optimum,
meter:-moz-meter-sub-optimum,
meter:-moz-meter-sub-sub-optimum {
border-radius: var(--border-radius);
}
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--color-lightish);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--color-warning);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--color-error);
}
meter[value="1"]::-webkit-meter-optimum-value { background: var(--color-error); }
meter[value="2"]::-webkit-meter-optimum-value { background: var(--color-error); }
meter[value="3"]::-webkit-meter-optimum-value { background: var(--color-error); }
meter[value="4"]::-webkit-meter-optimum-value { background: var(--color-warning); }
meter[value="5"]::-webkit-meter-optimum-value { background: var(--color-warning); }
meter[value="6"]::-webkit-meter-optimum-value { background: var(--color-warning); }
meter[value="7"]::-webkit-meter-optimum-value { background: var(--color-yellow); }
meter[value="8"]::-webkit-meter-optimum-value { background: var(--color-yellow); }
meter[value="9"]::-webkit-meter-optimum-value { background: var(--color-lime); }
meter[value="10"]::-webkit-meter-optimum-value { background: var(--color-green-bright); }
meter[value="1"]::-moz-meter-bar { background: var(--color-error); }
meter[value="2"]::-moz-meter-bar { background: var(--color-error); }
meter[value="3"]::-moz-meter-bar { background: var(--color-error); }
meter[value="4"]::-moz-meter-bar { background: var(--color-warning); }
meter[value="5"]::-moz-meter-bar { background: var(--color-warning); }
meter[value="6"]::-moz-meter-bar { background: var(--color-warning); }
meter[value="7"]::-moz-meter-bar { background: var(--color-yellow); }
meter[value="8"]::-moz-meter-bar { background: var(--color-yellow); }
meter[value="9"]::-moz-meter-bar { background: var(--color-lime); }
meter[value="10"]::-moz-meter-bar { background: var(--color-green-bright); }
.pagination .disabled > * {
cursor: default;
opacity: .5;
pointer-events: none;
}
.pagination > * > *.active {
background: var(--color-secondary);
padding: calc(var(--s-2) / 2) calc(var(--s1) / 2);
border-radius: .1rem;
}
.pagination > * > *.active a {
color: var(--color-primary);
}
/*
@title Popover
@description
A hover-activated box that give more context for an element
@example
```
There are no judgements in this list to calculate a grade.
```
@todo
- [ ] Calculate the best place to position the popover given the location of the element, and if the container will fly out of the constraint of the page width.
@variants
By default, the popover flys in on the top of the element (ie "over" it). These utilities change the popover-container position.
.popover-left
.popover-bottom
.popover-right
*/
.popover {
display: inline-block;
position: relative;
font-size: initial;
font-weight: initial;
cursor: pointer;
}
.popover .popover-container {
left: 50%;
opacity: 0;
padding: var(--s0);
position: absolute;
top: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease;
min-width: calc(var(--measure));
z-index: 100;
text-align: justify;
}
.popover *:focus + .popover-container,
.popover:hover .popover-container,
.popover .popover-container:hover {
display: block;
opacity: 1;
transform: translate(-50%, -100%) scale(1);
}
.popover.popover-right .popover-container {
left: 100%;
top: 50%;
}
.popover.popover-right :focus + .popover-container,
.popover.popover-right:hover .popover-container,
.popover.popover-right .popover-container:hover {
transform: translate(0, -50%) scale(1);
}
.popover.popover-bottom .popover-container {
left: 50%;
top: 100%;
}
.popover.popover-bottom :focus + .popover-container,
.popover.popover-bottom:hover .popover-container,
.popover.popover-bottom .popover-container:hover {
transform: translate(-50%, 0) scale(1);
}
.popover.popover-left .popover-container {
left: 0;
top: 50%;
}
.popover.popover-left :focus + .popover-container,
.popover.popover-left:hover .popover-container,
.popover.popover-left .popover-container:hover {
transform: translate(-100%, -50%) scale(1);
}
.popover.popover-right-bottom :focus + .popover-container,
.popover.popover-right-bottom:hover .popover-container,
.popover.popover-right-bottom .popover-container:hover {
transform: translate(0, -20%) scale(1);
left: 100%;
top: 50%;
display: block;
opacity: 1;
}
.popover.popover-left-bottom :focus + .popover-container,
.popover.popover-left-bottom:hover .popover-container,
.popover.popover-left-bottom .popover-container:hover {
transform: translate(-100%, 0%) scale(1);
top: 100%;
display: block;
opacity: 1;
}
progress {
--progress-border-radius: var(--s-2);
--progress-bg-color: var(--color-lightish);
--progress-color: var(--color-primary);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--progress-bg-color);
border: 0;
border-radius: var(--progress-border-radius);
color: #5755d9;
height: var(--s-2);
position: relative;
width: 100%;
display: inline-block;
vertical-align: baseline;
}
progress::-webkit-progress-bar {
background: transparent;
border-radius: var(--progress-border-radius);
}
progress::-webkit-progress-value {
background: var(--progress-color);
border-radius: var(--progress-border-radius);
}
progress::-moz-progress-bar {
background: var(--progress-color);
border-radius: var(--progress-border-radius);
}
progress:indeterminate {
animation: progress-indeterminate 1.5s linear infinite;
background: var(--color-dark) linear-gradient(to right, var(--color-primary) 30%, var(--color-dark) 30%) top left / 150% 150% no-repeat;
}
progress:indeterminate::-moz-progress-bar {
background: transparent;
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
progress._progress-color\:grey {
--progress-color: var(--color-grey);
}
.pulsing-dot {
--pulsing-dot-color: var(--color-green-bright);
--pulsing-dot-box-shadow-0: 0 0 0 0 rgba(77,170,87,0.9);
--pulsing-dot-box-shadow-50: 0 0 0 5px rgba(77,170,87,0);
--pulsing-dot-box--shadow-100: 0 0 0 0 rgba(77,170,87,0);
position: relative;
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 8px;
height: 8px;
/* border: 2px solid #fff; */
border-radius: 50%;
background: var(--pulsing-dot-color);
}
@keyframes circle-pulse {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-box-shadow: var(--pulsing-dot-box-shadow-0);
box-shadow: var(--pulsing-dot-box-shadow-0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: var(--pulsing-dot-box-shadow-50);
box-shadow: var(--pulsing-dot-box-shadow-50);
}
100% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
-webkit-box-shadow: var(--pulsing-dot-box-shadow-100);
box-shadow: var(--pulsing-dot-box-shadow-100);
}
}
.pulsing-dot::after {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
-webkit-animation: circle-pulse 2s infinite;
animation: circle-pulse 2s infinite;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 0 var(--pulsing-dot-color);
box-shadow: 0 0 0 0 var(--pulsing-dot-color);
}
/* Yellow Dot */
.pulsing-dot._status\:yellow {
--pulsing-dot-color: var(--color-warning-bright);
--pulsing-dot-box-shadow-0: 0 0 0 0 rgba(255,212,0,0.9);
--pulsing-dot-box-shadow-50: 0 0 0 5px rgba(255,212,0,0);
--pulsing-dot-box--shadow-100: 0 0 0 0 rgba(255,212,0,0);
}
/* Red Dot */
.pulsing-dot._status\:red {
--pulsing-dot-color: var(--color-error);
--pulsing-dot-box-shadow-0: 0 0 0 0 rgba(236,44,76,0.9);
--pulsing-dot-box-shadow-50: 0 0 0 5px rgba(236,44,76,0);
--pulsing-dot-box--shadow-100: 0 0 0 0 rgba(236,44,76,0);
}
/*
@title Special Box for wrapping Staff-only or Dev-only concerns
@description
A box with a border and tab that wraps content that is only visible to staff or developers.
@example
```
<%= staff_box do %>
This content is only visible to staff or developers.
<%= end %>
```
@todo
- Add custom attributes
@variants
._color:purple-bright
*/
.staff-box-wrapper {
--border-color: var(--color-staff);
margin-top: var(
--s4
) !important; /* !important to override the margin-top: var(--s-3) in app/assets/stylesheets/every_layout/Box.css */
position: relative;
}
.staff-box {
--box-shadow: none;
border-color: var(--border-color);
border: var(--border-thin) solid var(--border-color);
}
.staff-box-wrapper > .box-tab {
width: max-content;
transform: translateY(-100%) translateX(var(--s0));
position: absolute;
top: 0;
left: 0;
background: var(--border-color);
color: var(--color-light);
padding: var(--s-5) var(--s-2);
width: max-content;
text-align: center;
border-color: var(--border-color);
border: var(--border-thin) solid var(--border-color);
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: unset;
}
.staff-box-wrapper._color\:purple-bright {
--border-color: var(--color-purple-bright);
}
.button-group .button.staff-button {
border: var(--border-thin) solid var(--border-color);
background: var(--border-color);
color: var(--color-light);
--border-color: var(--color-purple-bright);
}
/*
@title Special Box for wrapping Staff-only or Dev-only concerns
@description
A box with a border and tab that wraps content that is only visible to staff or developers.
@example
```
<%= staff_nav(user) do %>
This content is only visible to staff users.
<% end %>
```
@todo
- Add custom attributes
@variants
._color:purple-bright
*/
.staff-nav-wrapper {
--border-color: var(--color-staff);
margin-top: var(--s4) !important; /* !important to override the margin-top: var(--s-3) in app/assets/stylesheets/every_layout/Box.css */
position: relative;
}
.staff-nav {
--box-shadow: none;
--box-radius: 0;
border-color: var(--border-color);
border-top: var(--border-thin) solid var(--border-color);
}
/* this is the same as in the staff_box component, might need to consolidate */
.staff-nav-wrapper > .nav-tab {
width: max-content;
transform: translateY(-100%) translateX(var(--s0));
position: absolute;
top: 0;
left: 0;
background: var(--border-color);
color: var(--color-light);
padding: var(--s-5) var(--s-2);
width: max-content;
text-align: center;
border-color: var(--border-color);
border: var(--border-thin) solid var(--border-color);
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: unset;
}
.staff-nav-header {
--color: var(--color-staff);
--border-color: var(--color-staff);
border-bottom: var(--border-thin) solid var(--color);
position: relative;
margin-top: var(--s4);
}
.staff-nav-header > .nav-tab {
width: max-content;
transform: translateY(-100%) translateX(var(--s0));
position: absolute;
top: 0;
left: 0;
background: var(--border-color);
color: var(--color-light);
padding: var(--s-5) var(--s-2);
width: max-content;
text-align: center;
border-color: var(--border-color);
border: var(--border-thin) solid var(--border-color);
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: unset;
}
ul.tabs {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: var(--border-thin) solid var(--color-lightish);
}
ul.tabs > li {
margin-top: 0;
}
ul.tabs > li > a {
border-bottom: var(--border-thick) solid transparent;
color: inherit;
display: block;
margin: 0 var(--s-2) 0 0;
padding: var(--s-3) var(--s-3) calc(var(--s-3) - var(--border-thick)) var(--s-3);
text-decoration: none;
}
ul.tabs > li > a:focus, ul.tabs > li > a:hover {
cursor: pointer;
color: var(--link-color);
}
ul.tabs > li.active > a {
border-bottom-color: var(--link-color);
color: var(--link-color);
}
/* Temporary */
ul.tabs > li > a.color\:muted {
color: var(--color-muted);
}
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip::after {
font-family: var(--font-body);
font-weight: initial !important;
background: var(--color-dark);
border-radius: var(--border-radius);
bottom: 100%;
color: var(--color-light);
content: attr(data-tooltip);
display: block;
font-size: var(--font-size-sm);
left: 50%;
max-width: calc(var(--measure) / 2);
opacity: 0;
overflow: hidden;
padding: 0.2rem 0.4rem;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, 0.4rem);
transition: all .2s ease;
white-space: pre;
z-index: 3;
}
.tooltip:focus::after, .tooltip:hover::after {
opacity: 1;
transform: translate(-50%, calc(-0.2rem));
}
/* LEFT */
.tooltip.tooltip-left::after {
bottom: 50%;
left: auto;
right: 100%;
transform: translate(calc(0.4rem), 50%);
}
.tooltip.tooltip-left:focus::after,
.tooltip.tooltip-left:hover::after {
transform: translate(calc(-0.2rem), 50%);
}
/* RIGHT */
.tooltip.tooltip-right::after {
bottom: 50%;
left: 100%;
transform: translate(calc(-0.2rem), 50%);
}
.tooltip.tooltip-right:focus::after,
.tooltip.tooltip-right:hover::after {
transform: translate(calc(0.2rem), 50%);
}
/* BOTTOM */
.tooltip.tooltip-bottom::after {
bottom: auto;
top: 100%;
transform: translate(-50%, calc(-0.4rem));
}
.tooltip.tooltip-bottom:focus::after,
.tooltip.tooltip-bottom:hover::after {
transform: translate(-50%, calc(0.4rem));
}
#top-account-nav a {
color: var(--font-color);
}
#top-account-nav a.color\:muted {
color: var(--color-muted);
}
#top-account-nav a.active {
color: var(--link-color);
}
ul#account-nav {
padding: 0 var(--s4) 0 calc(var(--s4) - var(--s-4));
}
@media screen and (min-width: 425px) {
#account-nav > li:first-child a {
/* margin-left: var(--s4) */
padding-left: var(--s-5);
}
}
/* CodeMirror overrides and custom css */
/* Override gutter line number color and display settings */
.ͼ2 .cm-gutters {
background-color: unset;
color: var(--color-light-grey);
border-right: none;
}
/* add border radius to the "active line" */
.cm-activeLine.cm-line {
border-radius: 0 var(--s-5) var(--s-5) 0;
}
.cm-gutterElement.cm-activeLineGutter {
border-radius: var(--s-5) 0 0 var(--s-5);
}
.cm-foldGutter .cm-gutterElement.cm-activeLineGutter {
border-radius: unset;
}
.compositions-list > .composition-list-turbo-item:not(:last-child) {
border-bottom: var(--border-thick) solid var(--color-lightish);
}
.compositions-list > * {
padding: var(--s0) 0;
}
.composition-list-turbo-item {
/* display: flex; */
}
.composition-layer-grid {
border-bottom: var(--border-thick) solid var(--color-lightish);
}
.composition-layer-grid > * {
padding: var(--s-1) var(--s0);
}
#logs-wrapper {
min-height: 80vh;
max-height: 80vh;
overflow: scroll;
position: relative;
}
#logs-header {
background-color: #101827db;
position: sticky;
top: calc(-1 * var(--s0));
}
#logs-wrapper.position\:fixed-full {
max-height: unset;
position: fixed;
}
#logs-footer {
position: fixed;
bottom: var(--s5);
right: var(--s5);
}
svg.sidenav-openButton {
padding: calc(var(--s1) / 2);
margin: 0;
}
#searchscape-body {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
#searchscape-main {
flex: 1;
display: flex;
flex-direction: column;
}
#searchscape-content {
flex: 1;
overflow: scroll;
}
#searchscape-content::-webkit-scrollbar {
display: none;
}
#login-image-cover {
background-image: url( https://sprout.bonsai.io/assets/jpg/mathias-reding-unsplash-97e8a5d48a7bb0c42ca3b510022a0300f0d6f64d240f7056192362c697b61b84.jpg );
background-size: cover;
}
.button-sso-img {
/* height: 20px; */
height: var(--s2);
}
box-l {
--background: var(--background-color);
--box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%);
/* 0 var(--s-3) var(--s0) 0 rgba(69,77,93,.1) */
--box-radius: var(--border-radius);
display: block;
padding: var(--s0);
outline: var(--border-thin) solid transparent;
outline-offset: calc(var(--border-thin) * -1);
box-shadow: var(--box-shadow);
border-radius: var(--box-radius);
background: var(--background);
}
box-l._box-shadow\:none {
--box-shadow: none;
}
box-l._border-radius\:0 {
--box-radius: 0;
}
.box-tab {
position: absolute;
top: -10px;
left: 0;
background: var(--color-info);
color: var(--color-light);
padding: 0 var(--s-2);
width: 100%;
text-align: center;
border-color: var(--color-info);
border: var(--border-thin) solid var(--color-info);
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: small;
}
/*
Center
@description
A component that creates a horizontally centered column
@reference
- https://every-layout.dev/layouts/center/
@example
```
```
@variants
No present variants
*/
center-l {
display: block;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: var(--measure);
}
/*
Cluster
@description
The cluster is a top-level layout class that spatially groups a small amounth of elements in a consistent way no matter if they are stacked vertically or horizontally. It's kind of like treating the children elements as inline-like elements with specific spacing rules.
@reference
- https://every-layout.dev/layouts/cluster/
@note
Apologies in advance for any namespace confusion. Calling it a cluster wasn't intended to mix folks up when it comes to _search clusters_. The important part of using this word is that clustering information in the UI means that these elements are _related_ to one another and should be logically grouped. Thus..."cluster".
@example
```
```
@variants
The Cluster has many utility classes, because it can be used in many different compositions. Indeed, it is one of the most used layouts besides the stack.
._justify:left - left-aligns the items like text
._justify:center - centers items within the container of the cluster
._justify:flex-end - right-alignment
._justify:space-between - pushed the children elements to take up all available space and distribute themselves evenly. Nice for headers and navs.
._space:0 - Leaves no gap between elements. Seldom used.
._space:s1 - A bit larger spacing. See settings.css for all of our spacing variables.
# etc
._align:baseline - bottom aligns elements
._align:center - horizontally aligns the elements
._wrap:nowrap - keeps child elements in one line, never forming a "word" break
*/
.cluster {
--cluster-display: flex;
--cluster-flex-wrap: wrap;
--cluster-justify-content: flex-start;
--cluster-align-items: flex-start;
--cluster-space: var(--s1);
}
.cluster > * {
display: var(--cluster-display);
flex-wrap: var(--cluster-flex-wrap);
justify-content: var(--cluster-justify-content);
align-items: var(--cluster-align-items);
margin: calc(var(--cluster-space) / 2 * -1);
}
.cluster > * > * {
margin: calc(var(--cluster-space) / 2);
}
.cluster._justify\:flex-end {
--cluster-justify-content: flex-end;
}
.cluster._justify\:left {
--cluster-justify-content: left;
}
.cluster._justify\:space-between {
--cluster-justify-content: space-between;
}
.cluster._justify\:center {
--cluster-justify-content: center;
}
.cluster._space\:s-4 {
--cluster-space: var(--s-4);
}
.cluster._space\:s-3 {
--cluster-space: var(--s-3);
}
.cluster._space\:s-2 {
--cluster-space: var(--s-2);
}
.cluster._space\:s-1 {
--cluster-space: var(--s-1);
}
.cluster._space\:0 {
--cluster-space: 0;
}
.cluster._align\:baseline {
--cluster-align-items: baseline;
}
.cluster._align\:center {
--cluster-align-items: center;
}
.cluster._wrap\:nowrap {
--cluster-flex-wrap: nowrap;
}
/*
@title Cover
@example
```
```
*/
.cover {
--cover-padding: var(--s1);
--cover-min-block-size: 100vh;
--cover-centered-margin: auto;
display: flex;
flex-direction: column;
min-block-size: var(--cover-min-block-size);
padding: var(--cover-padding);
}
.cover > * {
margin-block: 1rem;
}
.cover > *:first-child:not(.centered) {
margin-block-start: 0;
}
.cover > *:last-child:not(.centered) {
margin-block-end: 0;
}
.cover > *.centered {
margin-block: var(--cover-centered-margin);
}
.cover._padding\:0 {
--cover-padding: 0;
}
.cover._min-block-size\:fit-content {
--cover-min-block-size: fit-content;
}
.cover._centered-margin\:10rem {
--cover-centered-margin: 10rem;
}
.cover._height\:100pct {
--cover-min-block-size: 100%;
}
frame-l {
display: block;
position: relative;
padding-bottom: calc(6 / 9 * 100%);
}
frame-l > * {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
frame-l > img,
frame-l > video {
height: 100%;
width: 100%;
object-fit: cover;
}
grid-l {
display: grid;
grid-gap: var(--s1);
align-content: start;
grid-template-columns: 100%;
}
/*
@title Icon
@example
```
<%= space.depot_slug %>
```
*/
icon-l {
--align: baseline;
align-items: var(--align);
}
icon-l svg {
--size: 0.75em;
height: var(--size);
/* height: 1cap; */
width: var(--size);
/* width: 1cap; */
}
icon-l._align\:center {
--align: center;
}
/* To make sure ELO components play nice with Stimulus */
icon-l {
pointer-events: none;
}
icon-l._size\:1em svg {
--size: 1em;
}
imposter-l {
border-radius: var(--border-radius);
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
min-width: -webkit-fill-available;
z-index: var(--z2);
}
.modal-backdrop {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.351);
top: 0;
left: 0;
z-index: var(--z1);
}
body.modal-open {
overflow: hidden;
}
imposter-l.open > box-l {
animation: slide-down .2s ease 1;
z-index: 1;
}
imposter-l._size\:xl {
border-radius: var(--border-radius);
position: fixed;
min-width: unset;
width: calc(100% - calc(2*var(--s0)));
height: calc(100vh - calc(2*var(--s0)));
overflow: scroll;
}
imposter-l._size\:xl.open > box-l {
height: -webkit-fill-available;
overflow: scroll;
}
imposter-l._size\:full-screen {
border-radius: 0;
width: 100%;
height: 100vh;
overflow: scroll;
}
imposter-l._size\:full-screen > box-l {
overflow: scroll;
border-radius: 0;
height: 100%;
}
/*
Sidebar
@description
The sidebar is a top-level layout class that knows when two items should be next to one another or stacked based on the device width.
It automatically aligns items in the vertical center, so top-alignment needs an extra utility class of "_align:flex-start".
@reference
- https://every-layout.dev/layouts/sidebar/
@example
```
```
@variants
.sidebar-with-input - ?
._gap:0 - removes space between elements
._gap:s2 - increases gap space
._width:medium - Creates a "medium" width of the main content, at 10rem
._align:stretch - Stretchs items out to
._align:flex-start - Aligns items at the top
._sidebar-width:0 - decreases the sidebar width to only take up as much space
*/
.with-sidebar, .sidebar {
--sidebar-gap: var(--s-1);
--sidebar-width: 20rem;
--sidebar-inline-size: 50%;
--sidebar-align: center;
--flex-grow: 999;
display: flex;
flex-wrap: wrap;
gap: var(--sidebar-gap);
align-items: var(--sidebar-align);
box-sizing: border-box;
}
.with-sidebar > :first-child, .sidebar > :first-child {
/* ↓ The width when the sidebar _is_ a sidebar */
flex-basis: var(--sidebar-width);
flex-grow: 1;
}
.with-sidebar > :last-child, .sidebar > :last-child {
flex-basis: 0;
flex-grow: var(--flex-grow);
min-inline-size: var(--sidebar-inline-size);
}
/* utility classes */
.with-sidebar._gap\:0, .sidebar._gap\:0 {
--sidebar-gap: 0;
}
.sidebar._gap\:s2 {
--sidebar-gap: var(--s2);
}
.sidebar._width\:medium {
--sidebar-width: 10rem;
}
.sidebar._align\:stretch {
--sidebar-align: stretch;
}
.sidebar.sidebar-with-input {
--sidebar-width: 50%;
}
.sidebar.sidebar-with-input > :last-child {
min-inline-size: 30ch;
box-sizing: border-box;
}
.sidebar._align\:flex-start {
--sidebar-align: flex-start;
}
.sidebar._sidebar-width\:0 {
--sidebar-width: 0;
}
.sidebar._sidebar-half {
--sidebar-width: auto;
--flex-grow: 1;
}
/*
Stack
@description
The stack is a top-level layout class, which establishes a nice
vertical rhythm based on our variable --var scale (defined
in settings.css).
@reference
- https://every-layout.dev/layouts/stack/
@note
In general, we may want to eventually use the attr() css function
when it's out of its experiemental phase to help with
layout-specific utility classes, like "_space:s0".
See https://developer.mozilla.org/en-US/docs/Web/CSS/attr
@variants
.stack-sm - a specific variant for a slightly smaller spacing since it is so widely used. This one is more commonly used aroud form-groups, or to establish a closer relationship with subheaders and content that are already inside a parent stack.
._space:s-1 - smallest vertical spacing. Can also just use "stack-sm" with "stack"
._space:s0
._space:s1
._space:s2 - largest vertical spacing
*/
.stack {
--stack-space: var(--s1);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * + * {
margin-top: var(--stack-space);
}
/* common smaller stack */
.stack.stack-sm > * + * { --stack-space: var(--s-1) }
.stack._space\:s-2 > * + * { --stack-space: var(--s-2) }
.stack._space\:s-1 > * + * { --stack-space: var(--s-1) }
.stack._space\:s0 > * + * { --stack-space: var(--s0) }
.stack._space\:s1 > * + * { --stack-space: var(--s1) }
.stack._space\:s2 > * + * { --stack-space: var(--s2) }
.stack._space\:s3 > * + * { --stack-space: var(--s3) }
.stack._space\:0 > * + * { --stack-space: 0 }
/*
Switcher
@description
The switcher is a top-level layout class that takes a set of child elements and intrinsically lays them out vertically or horizontally depending on device width. To do this, it "switches a Flexbox context between a horizontal and a vertical layout at a given, container-based breakpoint. That is, if the breakpoint is 30rem, the layout will switch to a vertical configuration when the parent element is less than 30rem wide."
@reference
- https://every-layout.dev/layouts/switcher/
@example
```
```
*/
switcher-l {
display: block;
}
switcher-l > * {
display: flex;
flex-wrap: wrap;
}
switcher-l > * > * {
flex-basis: calc((var(--measure) - 100%) * 999);
flex-grow: 1;
}
/* new, css-only way */
.switcher {
--gap: var(--s1);
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.switcher._gap\:s2 { --gap: var(--s2) }
.switcher._gap\:s6 { --gap: var(--s6) }
.switcher > * {
flex-basis: calc((var(--measure) - 100%) * 999);
flex-grow: 1;
}
/* stepped number input */
[data-controller="number-input"] input {
max-width: 4ch;
text-align: center;
}
[data-controller="number-input"] input::-webkit-inner-spin-button,
[data-controller="number-input"] input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
[data-controller="number-input"] input[type=number] {
-moz-appearance: textfield;
}
[data-controller="number-input"] i {
color: var(--color-info);
}
.stimulus-select {
--webkit-box-align: center;
background: var(--color-input-background) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false' class='css-8mmkcg'%3E%3Cpath fill='%23b1bac3' d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'%3E%3C/path%3E%3C/svg%3E") no-repeat right var(--s0) center/var(--s0) var(--s0);
padding: var(--s-6) var(--s3) var(--s-7) var(--s-2);
min-height: 2.4rem;
/* keep the xmark icon on the right */
display: inline-flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.stimulus-select_label-container {
align-items: center;
display: flex;
flex: 1 1 0%;
flex-wrap: wrap;
gap: var(--s-4);
position: relative;
overflow: hidden;
box-sizing: border-box;
min-width: 11rem;
color: var(--color-muted);
}
.stimulus-select_input-container {
visibility: visible;
flex: 1 1 auto;
display: inline-grid;
grid-area: 1 / 1 / 2 / 3;
grid-template-columns: 0px min-content;
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
color: rgb(51, 51, 51);
box-sizing: border-box;
}
.stimulus-select_input-container input {
color: inherit;
background: 0px center;
opacity: 1;
/* width: 100%; */
grid-area: 1 / 2;
font: inherit;
min-width: 2px;
border: 0px;
margin: 0px;
outline: 0px;
padding: 0px;
}
.stimulus-select .label {
/* --label-background: var(--color-blue);
--label-color: white;
--label-color-hover: var(--color-blue-light); */
--label-border-radius: 0.1em;
/* arrange the label text and icon evenly */
padding: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
/* add padding to the label text */
.select-label-text {
padding: 0.01rem 0.2rem;
}
/* add padding to the label icon */
.select-label-icon {
padding: 0.01rem 0.2rem;
border-radius: 0 0.1rem 0.1rem 0;
}
/* on hover, make the lil x mark dark */
.stimulus-select .label:hover .select-label-icon {
background-color: var(--label-background-hover);
transition: cubic-bezier(1, 0, 0, 1) 0.1s;
}
/* Colors */
.color\:error { color: var(--color-error) }
.color\:info { color: var(--color-info) }
.color\:link { color: var(--link-color) }
.color\:bright { color: var(--color-bright) }
.color\:light-grey { color: var(--color-light-grey) }
.color\:dark { color: var(--color-dark) }
.color\:muted { color: var(--color-muted) }
.color\:success { color: var(--color-success) }
.color\:warning { color: var(--color-warning) }
.color\:warning-dark { color: var(--color-warning-dark) }
.color\:transparent { color: transparent }
.color\:orange { color: var(--color-orange) }
.color\:purple { color: var(--color-purple) }
.color\:font-color { color: var(--font-color) }
.color\:inherit { color: inherit }
/* Backgrounds - Utility */
.bg\:black {
background-color: var(--color-black);
--font-color: var(--color-light);
color: var(--font-color);
}
.bg\:dark {
background-color: var(--color-dark);
--font-color: var(--color-light);
color: var(--font-color);
}
.bg\:light { background-color: var(--color-light) }
.bg\:muted { background-color: var(--color-muted) }
.bg\:bright { background-color: var(--color-bright) }
.bg\:success { background-color: var(--color-success) }
.bg\:success-light { background-color: var(--color-success-light) }
.bg\:error { background-color: var(--color-error-light) }
.bg\:warning { background-color: var(--color-warning-light) }
.bg\:primary { background-color: var(--color-primary) }
.bg\:white { background-color: white }
.bg\:transparent { background-color: transparent }
.bg\:white-alpha { background-color: var(--color-white-alpha) }
.bg\:error {
background-color: var(--color-error-light);
color: var(--color-error-dark);
}
.bg\:info-mid { background-color: var(--color-info-mid) }
.hover-color\:success,
.hover-color\:info,
.hover-color\:info-light,
.hover-color\:light,
.hover-color\:danger {
cursor: pointer
}
.hover-color\:info-light:hover { color: #a7e3ffa8 }
.hover-color\:success:hover { color: var(--color-success) }
.hover-color\:light:hover { color: var(--color-light) }
.hover-color\:info:hover { color: var(--color-info) }
.hover-color\:bright:hover { color: var(--color-bright) }
.hover-color\:danger:hover { color: var(--color-error) }
/* Backgrounds - Brand */
.bg\:light-brand { background-color: var(--color-brand-light); }
.bg\:brand-light { background-color: var(--color-brand-light) }
/* Box Shadow */
.box-shadow { box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%); }
.box-shadow\:none { box-shadow: none }
.box-shadow\:none:hover { box-shadow: none }
/* Cursors */
.cursor\:pointer { cursor: pointer }
/* Type */
.decoration\:none { text-decoration: none }
.white-space\:nowrap { white-space: nowrap !important }
.text-wrap\:nowrap { text-wrap: nowrap }
.font-weight\:500 { font-weight: 500 }
.text\:underline { text-decoration: underline !important }
.smallcaps {
font-variant: small-caps;
letter-spacing: 0.15ch;
}
/* Columns and Flex */
.grid-column\:span-1 { grid-column: span 1 }
.grid-column\:span-2 { grid-column: span 2 }
.grid-column\:span-3 { grid-column: span 3 }
.flex { display: flex; }
.flex-direction\:column { flex-direction: column }
.flex-direction\:column-reverse { flex-direction: column-reverse }
/* .flex > * { flex: 1 } */
.flex\:0 { flex: 0 }
.flex\:1 { flex: 1 }
.flex\:2 { flex: 2 }
.flex\:3 { flex: 3 }
.flex\:4 { flex: 4 }
.flex\:5 { flex: 5 }
.flex\:6 { flex: 6 }
.flex\:auto { flex: auto }
.flex\:none { flex: none }
.flex-grow\:0 { flex-grow: 0 !important }
.gap\:s0 { gap: var(--s0) }
/* Hovering states */
.hover-parent:hover .hover-target { opacity: 1; }
.hover-target { opacity: 0; transition: opacity 0.2s; }
/* Padding */
.padding\:0 { padding: 0 }
.padding\:s-1 { padding: var(--s-1) }
.padding\:s-2 { padding: var(--s-2) }
.padding\:s-5 { padding: var(--s-5) }
.padding\:s0 { padding: var(--s0) }
.padding\:s1 { padding: var(--s1) }
.padding\:s2 { padding: var(--s2) }
.padding\:s3 { padding: var(--s3) }
.padding-top\:0 { padding-top: 0 !important } /* shouldn't have to do a ! here - fix this */
.padding-left\:s-1 { padding-left: var(--s-1)}
.padding-left\:s0 { padding-left: var(--s0)}
.padding-left\:0 { padding-left: 0}
.padding-right\:0 { padding-right: 0 !important} /* shouldn't have to do a ! here - fix this */
/* Margin */
.margin\:auto { margin: auto }
.margin\:0 { margin: 0 }
.margin-bottom\:0 { margin-bottom: 0 }
.margin-bottom\:s0 { margin-bottom: var(--s0) }
.margin-bottom\:auto { margin-bottom: auto }
.margin-bottom\:6 { margin-bottom: var(--s6) }
.margin-left\:0 { margin-left: 0 }
.margin-left\:s-4 { margin-left: var(--s-4) }
.margin-left\:s-3 { margin-left: var(--s-3) }
.margin-left\:s3 { margin-left: var(--s3) }
.margin-left\:s4 { margin-left: var(--s4) }
.margin-top\:0 { margin-top: 0 }
.margin-top\:auto { margin-top: auto }
.margin-top\:s0 { margin-top: var(--s0) }
.margin-top\:s1 { margin-top: var(--s1) }
.margin-top\:s2 { margin-top: var(--s2) }
.margin-top\:s-1 { margin-top: var(--s-1) }
.margin-right\:s-1 { margin-right: var(--s-1) }
.margin-right\:s-2 { margin-right: var(--s-2) }
.margin-right\:s-3 { margin-right: var(--s-3) }
.margin-right\:s-4 { margin-right: var(--s-4) }
/* Alignment */
.text-align\:center { text-align: center }
.text-align\:left { text-align: left }
.text-align\:right { text-align: right }
.align-items\:baseline { align-items: baseline; }
.align-items\:center { align-items: center; }
.justify-content\:center { justify-content: center }
/* Width */
.width\:auto { width: auto }
.width\:33pct { width: 33% }
.width\:50pct { width: 50% }
.width\:80pct { width: 80% }
.width\:100pct { width: 100% }
.width\:s1 { width: var(--s1) }
.width\:s2 { width: var(--s2) }
.width\:s3 { width: var(--s3) }
.width\:s4 { width: var(--s4) }
.width\:s5 { width: var(--s5) }
.width\:fit-content { width: fit-content !important }
.width\:min-content { width: min-content }
.width\:max-content { width: max-content }
.width\:measure { width: var(--measure) }
.width\:measure-2 { width: calc(var(--measure)/2) }
.width\:50pct-1 { width: calc(50% - calc(var(--cluster-space) / 2)) }
.min-width\:max-content { min-width: max-content }
.min-width\:measure { min-width: var(--measure) }
.max-width\:100pct { max-width: 100% }
.max-width\:85pct { max-width: 85% }
.max-width\:s3 { max-width: var(--s3) }
.max-width\:s4 { max-width: var(--s4) }
.max-width\:s5 { max-width: var(--s5) }
.max-width\:measure { max-width: var(--measure) }
.max-width\:measure-0\.5 { max-width: calc(0.5 * var(--measure)) }
.max-width\:measure-1\.2 { max-width: calc(1.2 * var(--measure)) }
.max-width\:measure-2 { max-width: calc(2 * var(--measure)) }
.max-width\:min-content { max-width: min-content }
.max-width\:fit-content { max-width: fit-content }
.max-width\:large { max-width: 50rem }
/* Height */
.height\:100vh { height: 100vh; }
.height\:100pct { height: 100%; }
.min-height\:100vh { min-height: 100vh }
.max-height\:100vh { max-height: 100vh }
.height\:fill-available { height: -webkit-fill-available }
/* Display */
.display\:none { display: none !important }
.display\:unset { display: unset }
.display\:block { display: block }
.display\:inline-block { display: inline-block }
.visibility\:hidden { visibility: hidden }
/* Position */
.position\:absolute { position: absolute }
.position\:relative { position: relative }
.position\:fixed-full {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
overflow: scroll;
}
.position\:sticky { position: sticky }
.top\:0 { top: 0 }
/* Borders */
.border\:all {
border: var(--border-thin) solid var(--color-lightish);
}
.border\:none { border: none }
.border\:top {
border-top: var(--border-thick) solid var(--color-lightish);
}
.border\:right {
border-right: var(--border-thick) solid var(--color-lightish);
}
.border\:bottom {
border-bottom: var(--border-thick) solid var(--color-lightish);
}
.border-radius\:0 { border-radius: 0 }
/* Disabled State */
.disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Overflow */
.overflow-x\:scroll {
overflow-x: scroll;
}
.overflow\:scroll {
overflow: scroll;
}
/* Animations */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
.shake-animation {
animation: shake 0.45s ease-in-out;
}
/*
Extensions
@description
Extending on third-party libraries that we use
*/
/* Font Awesome */
.fa-3xs {
font-size: .425em;
line-height: .1em;
vertical-align: 0.2em;
}
/* Code Highlighting for Mustache */
.mustache {
color: blue;
}
.mustache > .ͼe {
color: blue;
}
.cm-editor {
height: 100%;
}
@font-face{font-family:devicon;src:url(https://sprout.bonsai.io/fonts/devicon.eot?-hdf3wh);src:url(https://sprout.bonsai.io/fonts/devicon.eot?#iefix-hdf3wh)format('embedded-opentype'),url(https://sprout.bonsai.io/fonts/devicon.woff?-hdf3wh)format('woff'),url(https://sprout.bonsai.io/fonts/devicon.ttf?-hdf3wh)format('truetype'),url(https://sprout.bonsai.io/fonts/devicon.svg?-hdf3wh#devicon)format('svg');font-weight:400;font-style:normal}[class*=" devicon-"],[class^=devicon-]{font-family:devicon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.devicon-safari-line-wordmark:before{content:"\e632"}.devicon-safari-line:before{content:"\e63a"}.devicon-safari-plain-wordmark:before{content:"\e63b"}.devicon-safari-plain:before{content:"\e63c"}.devicon-jetbrains-line-wordmark:before,.devicon-jetbrains-line:before,.devicon-jetbrains-plain-wordmark:before,.devicon-jetbrains-plain:before{content:"\e63d"}.devicon-django-line-wordmark:before,.devicon-django-line:before{content:"\e63e"}.devicon-django-plain-wordmark:before,.devicon-django-plain:before{content:"\e63f"}.devicon-gimp-plain:before{content:"\e633"}.devicon-redhat-plain-wordmark:before{content:"\e62a"}.devicon-redhat-plain:before{content:"\e62b"}.devicon-cplusplus-line-wordmark:before,.devicon-cplusplus-line:before{content:"\e634"}.devicon-cplusplus-plain-wordmark:before,.devicon-cplusplus-plain:before{content:"\e635"}.devicon-csharp-line-wordmark:before,.devicon-csharp-line:before{content:"\e636"}.devicon-csharp-plain-wordmark:before,.devicon-csharp-plain:before{content:"\e637"}.devicon-c-line-wordmark:before,.devicon-c-line:before{content:"\e638"}.devicon-c-plain-wordmark:before,.devicon-c-plain:before{content:"\e639"}.devicon-nodewebkit-line-wordmark:before{content:"\e611"}.devicon-nodewebkit-line:before{content:"\e612"}.devicon-nodewebkit-plain-wordmark:before{content:"\e613"}.devicon-nodewebkit-plain:before{content:"\e614"}.devicon-nginx-original-wordmark:before,.devicon-nginx-original:before,.devicon-nginx-plain-wordmark:before,.devicon-nginx-plain:before{content:"\e615"}.devicon-erlang-plain-wordmark:before{content:"\e616"}.devicon-erlang-plain:before{content:"\e617"}.devicon-doctrine-line-wordmark:before{content:"\e618"}.devicon-doctrine-line:before{content:"\e619"}.devicon-doctrine-plain-wordmark:before{content:"\e61a"}.devicon-doctrine-plain:before{content:"\e625"}.devicon-apache-line-wordmark:before{content:"\e626"}.devicon-apache-line:before{content:"\e627"}.devicon-apache-plain-wordmark:before{content:"\e628"}.devicon-apache-plain:before{content:"\e629"}.devicon-go-line:before{content:"\e610"}.devicon-redis-plain-wordmark:before{content:"\e606"}.devicon-redis-plain:before{content:"\e607"}.devicon-meteor-plain-wordmark:before{content:"\e608"}.devicon-meteor-plain:before{content:"\e609"}.devicon-heroku-line-wordmark:before,.devicon-heroku-original-wordmark:before{content:"\e60a"}.devicon-heroku-line:before,.devicon-heroku-original:before{content:"\e60b"}.devicon-heroku-plain-wordmark:before{content:"\e60c"}.devicon-heroku-plain:before{content:"\e60f"}.devicon-go-plain:before{content:"\e61b"}.devicon-docker-plain-wordmark:before{content:"\e61e"}.devicon-docker-plain:before{content:"\e61f"}.devicon-amazonwebservices-original:before,.devicon-amazonwebservices-plain:before{content:"\e603"}.devicon-amazonwebservices-plain-wordmark:before{content:"\e604"}.devicon-android-plain-wordmark:before{content:"\e60d"}.devicon-android-plain:before{content:"\e60e"}.devicon-angularjs-plain-wordmark:before{content:"\e61c"}.devicon-angularjs-plain:before{content:"\e61d"}.devicon-appcelerator-original:before,.devicon-appcelerator-plain:before{content:"\e620"}.devicon-appcelerator-plain-wordmark:before{content:"\e621"}.devicon-apple-original:before,.devicon-apple-plain:before{content:"\e622"}.devicon-atom-original-wordmark:before,.devicon-atom-plain-wordmark:before{content:"\e623"}.devicon-atom-original:before,.devicon-atom-plain:before{content:"\e624"}.devicon-backbonejs-plain-wordmark:before{content:"\e62c"}.devicon-backbonejs-plain:before{content:"\e62d"}.devicon-bootstrap-plain-wordmark:before{content:"\e62e"}.devicon-bootstrap-plain:before{content:"\e62f"}.devicon-bower-line-wordmark:before{content:"\e630"}.devicon-bower-line:before{content:"\e631"}.devicon-bower-plain-wordmark:before{content:"\e64e"}.devicon-bower-plain:before{content:"\e64f"}.devicon-chrome-plain-wordmark:before{content:"\e665"}.devicon-chrome-plain:before{content:"\e666"}.devicon-codeigniter-plain-wordmark:before{content:"\e667"}.devicon-codeigniter-plain:before{content:"\e668"}.devicon-coffeescript-original-wordmark:before,.devicon-coffeescript-plain-wordmark:before{content:"\e669"}.devicon-coffeescript-original:before,.devicon-coffeescript-plain:before{content:"\e66a"}.devicon-css3-plain-wordmark:before{content:"\e678"}.devicon-css3-plain:before{content:"\e679"}.devicon-debian-plain-wordmark:before{content:"\e67e"}.devicon-debian-plain:before{content:"\e67f"}.devicon-dot-net-plain-wordmark:before{content:"\e6d3"}.devicon-dot-net-plain:before{content:"\e6d4"}.devicon-drupal-plain-wordmark:before{content:"\e6e2"}.devicon-drupal-plain:before{content:"\e6e3"}.devicon-firefox-plain-wordmark:before{content:"\e75d"}.devicon-firefox-plain:before{content:"\e75e"}.devicon-foundation-plain-wordmark:before{content:"\e7a2"}.devicon-foundation-plain:before{content:"\e7a3"}.devicon-git-plain-wordmark:before{content:"\e7a7"}.devicon-git-plain:before{content:"\e7a8"}.devicon-grunt-line-wordmark:before{content:"\e7a9"}.devicon-grunt-line:before{content:"\e7aa"}.devicon-grunt-plain-wordmark:before{content:"\e7ea"}.devicon-grunt-plain:before{content:"\e7eb"}.devicon-gulp-plain:before{content:"\e7ec"}.devicon-html5-plain-wordmark:before{content:"\e7f6"}.devicon-html5-plain:before{content:"\e7f7"}.devicon-ie10-original:before,.devicon-ie10-plain:before{content:"\e7f8"}.devicon-illustrator-line:before{content:"\e7f9"}.devicon-illustrator-plain:before{content:"\e7fa"}.devicon-inkscape-plain-wordmark:before{content:"\e834"}.devicon-inkscape-plain:before{content:"\e835"}.devicon-java-plain-wordmark:before{content:"\e841"}.devicon-java-plain:before{content:"\e842"}.devicon-javascript-plain:before{content:"\e845"}.devicon-jquery-plain-wordmark:before{content:"\e849"}.devicon-jquery-plain:before{content:"\e84a"}.devicon-krakenjs-plain-wordmark:before{content:"\e84f"}.devicon-krakenjs-plain:before{content:"\e850"}.devicon-laravel-plain-wordmark:before{content:"\e851"}.devicon-laravel-plain:before{content:"\e852"}.devicon-less-plain-wordmark:before{content:"\e853"}.devicon-linux-plain:before{content:"\eb1c"}.devicon-mongodb-plain-wordmark:before{content:"\eb43"}.devicon-mongodb-plain:before{content:"\eb44"}.devicon-moodle-plain-wordmark:before{content:"\eb5a"}.devicon-moodle-plain:before{content:"\eb5b"}.devicon-mysql-plain-wordmark:before{content:"\eb60"}.devicon-mysql-plain:before{content:"\eb61"}.devicon-nodejs-plain-wordmark:before{content:"\eb69"}.devicon-nodejs-plain:before{content:"\eb6a"}.devicon-oracle-original:before,.devicon-oracle-plain:before{content:"\eb6b"}.devicon-photoshop-line:before{content:"\eb6c"}.devicon-photoshop-plain:before{content:"\eb6d"}.devicon-php-plain:before{content:"\eb71"}.devicon-postgresql-plain-wordmark:before{content:"\eb7c"}.devicon-postgresql-plain:before{content:"\eb7d"}.devicon-python-plain-wordmark:before{content:"\eb88"}.devicon-python-plain:before{content:"\eb89"}.devicon-rails-plain-wordmark:before{content:"\eba2"}.devicon-rails-plain:before{content:"\eba3"}.devicon-react-original-wordmark:before,.devicon-react-plain-wordmark:before{content:"\e600"}.devicon-react-original:before,.devicon-react-plain:before{content:"\e601"}.devicon-ruby-plain-wordmark:before{content:"\ebc9"}.devicon-ruby-plain:before{content:"\ebca"}.devicon-sass-original:before,.devicon-sass-plain:before{content:"\ebcb"}.devicon-symfony-original-wordmark:before,.devicon-symfony-plain-wordmark:before{content:"\e602"}.devicon-symfony-original:before,.devicon-symfony-plain:before{content:"\e605"}.devicon-travis-plain-wordmark:before{content:"\ebcc"}.devicon-travis-plain:before{content:"\ebcd"}.devicon-trello-plain-wordmark:before{content:"\ebce"}.devicon-trello-plain:before{content:"\ebcf"}.devicon-ubuntu-plain-wordmark:before{content:"\ebd0"}.devicon-ubuntu-plain:before{content:"\ebd1"}.devicon-vim-plain:before{content:"\ebf3"}.devicon-windows8-original-wordmark:before,.devicon-windows8-plain-wordmark:before{content:"\ebf4"}.devicon-windows8-original:before,.devicon-windows8-plain:before{content:"\ebf5"}.devicon-wordpress-plain-wordmark:before{content:"\ebfd"}.devicon-wordpress-plain:before{content:"\ebfe"}.devicon-yii-plain-wordmark:before{content:"\ec01"}.devicon-yii-plain:before{content:"\ec02"}.devicon-zend-plain-wordmark:before{content:"\ec03"}.devicon-zend-plain:before{content:"\ec04"}.devicon-amazonwebservices-original.colored,.devicon-amazonwebservices-plain-wordmark.colored,.devicon-amazonwebservices-plain.colored{color:#F7A80D}.devicon-android-plain-wordmark.colored,.devicon-android-plain.colored{color:#A4C439}.devicon-angularjs-plain-wordmark.colored,.devicon-angularjs-plain.colored{color:#c4473a}.devicon-apache-line-wordmark.colored,.devicon-apache-line.colored,.devicon-apache-plain-wordmark.colored,.devicon-apache-plain.colored{color:#303284}.devicon-appcelerator-original.colored,.devicon-appcelerator-plain-wordmark.colored,.devicon-appcelerator-plain.colored{color:#ac162c}.devicon-apple-original.colored,.devicon-apple-plain.colored{color:#000}.devicon-atom-original-wordmark.colored,.devicon-atom-original.colored,.devicon-atom-plain-wordmark.colored,.devicon-atom-plain.colored{color:#67595D}.devicon-backbonejs-plain-wordmark.colored,.devicon-backbonejs-plain.colored{color:#002A41}.devicon-bootstrap-plain-wordmark.colored,.devicon-bootstrap-plain.colored{color:#59407f}.devicon-bower-line-wordmark.colored,.devicon-bower-line.colored,.devicon-bower-plain-wordmark.colored,.devicon-bower-plain.colored{color:#ef5734}.devicon-c-line-wordmark.colored,.devicon-c-line.colored,.devicon-c-plain-wordmark.colored,.devicon-c-plain.colored{color:#03599c}.devicon-chrome-plain-wordmark.colored,.devicon-chrome-plain.colored{color:#ce4e4e}.devicon-codeigniter-plain-wordmark.colored,.devicon-codeigniter-plain.colored{color:#ee4323}.devicon-coffeescript-original-wordmark.colored,.devicon-coffeescript-original.colored,.devicon-coffeescript-plain-wordmark.colored,.devicon-coffeescript-plain.colored{color:#28334c}.devicon-cplusplus-line-wordmark.colored,.devicon-cplusplus-line.colored,.devicon-cplusplus-plain-wordmark.colored,.devicon-cplusplus-plain.colored{color:#9c033a}.devicon-csharp-line-wordmark.colored,.devicon-csharp-line.colored,.devicon-csharp-plain-wordmark.colored,.devicon-csharp-plain.colored{color:#68217a}.devicon-css3-plain-wordmark.colored,.devicon-css3-plain.colored{color:#3d8fc6}.devicon-debian-plain-wordmark.colored,.devicon-debian-plain.colored{color:#A80030}.devicon-django-line-wordmark.colored,.devicon-django-line.colored,.devicon-django-plain-wordmark.colored,.devicon-django-plain.colored{color:#003A2B}.devicon-docker-plain-wordmark.colored,.devicon-docker-plain.colored{color:#019bc6}.devicon-doctrine-line-wordmark.colored,.devicon-doctrine-line.colored,.devicon-doctrine-plain-wordmark.colored,.devicon-doctrine-plain.colored{color:#f56d39}.devicon-dot-net-plain-wordmark.colored,.devicon-dot-net-plain.colored{color:#1384c8}.devicon-drupal-plain-wordmark.colored,.devicon-drupal-plain.colored{color:#0073BA}.devicon-erlang-plain-wordmark.colored,.devicon-erlang-plain.colored{color:#a90533}.devicon-firefox-plain-wordmark.colored,.devicon-firefox-plain.colored{color:#DD732A}.devicon-foundation-plain-wordmark.colored,.devicon-foundation-plain.colored{color:#008cba}.devicon-gimp-plain-wordmark.colored,.devicon-gimp-plain.colored{color:#716955}.devicon-git-plain-wordmark.colored,.devicon-git-plain.colored{color:#f34f29}.devicon-go-line.colored,.devicon-go-plain.colored{color:#000}.devicon-grunt-line-wordmark.colored,.devicon-grunt-line.colored,.devicon-grunt-plain-wordmark.colored,.devicon-grunt-plain.colored{color:#fcaa1a}.devicon-gulp-plain.colored{color:#eb4a4b}.devicon-heroku-line-wordmark.colored,.devicon-heroku-line.colored,.devicon-heroku-original-wordmark.colored,.devicon-heroku-original.colored,.devicon-heroku-plain-wordmark.colored,.devicon-heroku-plain.colored{color:#6762a6}.devicon-html5-plain-wordmark.colored,.devicon-html5-plain.colored{color:#e54d26}.devicon-ie10-original.colored,.devicon-ie10-plain.colored{color:#1EBBEE}.devicon-illustrator-line.colored,.devicon-illustrator-plain.colored{color:#faa625}.devicon-inkscape-plain-wordmark.colored,.devicon-inkscape-plain.colored{color:#000}.devicon-java-plain-wordmark.colored,.devicon-java-plain.colored{color:#EA2D2E}.devicon-javascript-plain.colored{color:#f0db4f}.devicon-jetbrains-line-wordmark.colored,.devicon-jetbrains-line.colored,.devicon-jetbrains-plain-wordmark.colored,.devicon-jetbrains-plain.colored{color:#F68B1F}.devicon-jquery-plain-wordmark.colored,.devicon-jquery-plain.colored{color:#0769ad}.devicon-krakenjs-plain-wordmark.colored,.devicon-krakenjs-plain.colored{color:#0081C2}.devicon-laravel-plain-wordmark.colored,.devicon-laravel-plain.colored{color:#fd4f31}.devicon-less-plain-wordmark.colored{color:#2a4d80}.devicon-linux-plain.colored{color:#000}.devicon-meteor-plain-wordmark.colored,.devicon-meteor-plain.colored{color:#df5052}.devicon-mongodb-plain-wordmark.colored,.devicon-mongodb-plain.colored{color:#4FAA41}.devicon-moodle-plain-wordmark.colored,.devicon-moodle-plain.colored{color:#F7931E}.devicon-mysql-plain-wordmark.colored,.devicon-mysql-plain.colored{color:#00618a}.devicon-nginx-original-wordmark.colored,.devicon-nginx-original.colored,.devicon-nginx-plain-wordmark.colored,.devicon-nginx-plain.colored{color:#090}.devicon-nodejs-plain-wordmark.colored,.devicon-nodejs-plain.colored{color:#83CD29}.devicon-nodewebkit-line-wordmark.colored,.devicon-nodewebkit-line.colored,.devicon-nodewebkit-plain-wordmark.colored,.devicon-nodewebkit-plain.colored{color:#3d3b47}.devicon-oracle-original.colored,.devicon-oracle-plain-wordmark.colored,.devicon-oracle-plain.colored{color:#EA1B22}.devicon-photoshop-line.colored,.devicon-photoshop-plain.colored{color:#80b5e2}.devicon-php-plain.colored{color:#6181b6}.devicon-postgresql-plain-wordmark.colored,.devicon-postgresql-plain.colored{color:#336791}.devicon-python-plain-wordmark.colored,.devicon-python-plain.colored{color:#ffd845}.devicon-rails-plain-wordmark.colored,.devicon-rails-plain.colored{color:#a62c46}.devicon-ruby-plain-wordmark.colored,.devicon-ruby-plain.colored{color:#d91404}.devicon-safari-line-wordmark.colored,.devicon-safari-line.colored,.devicon-safari-plain-wordmark.colored,.devicon-safari-plain.colored{color:#1B88CA}.devicon-react-original-wordmark.colored,.devicon-react-original.colored,.devicon-react-plain-wordmark.colored,.devicon-react-plain.colored{color:#61dafb}.devicon-redhat-original-wordmark.colored,.devicon-redhat-original.colored,.devicon-redhat-plain-wordmark.colored,.devicon-redhat-plain.colored{color:#e93442}.devicon-redis-plain-wordmark.colored,.devicon-redis-plain.colored{color:#d82c20}.devicon-sass-original.colored,.devicon-sass-plain-wordmark.colored,.devicon-sass-plain.colored{color:#c69}.devicon-symfony-original-wordmark.colored,.devicon-symfony-original.colored,.devicon-symfony-plain-wordmark.colored,.devicon-symfony-plain.colored{color:#1A171B}.devicon-travis-plain-wordmark.colored,.devicon-travis-plain.colored{color:#bb2031}.devicon-trello-plain-wordmark.colored,.devicon-trello-plain.colored{color:#23719f}.devicon-ubuntu-plain-wordmark.colored,.devicon-ubuntu-plain.colored{color:#dd4814}.devicon-vim-plain.colored{color:#179a33}.devicon-windows8-original-wordmark.colored,.devicon-windows8-original.colored,.devicon-windows8-plain-wordmark.colored,.devicon-windows8-plain.colored{color:#00adef}.devicon-wordpress-plain-wordmark.colored,.devicon-wordpress-plain.colored{color:#494949}.devicon-yii-plain-wordmark.colored,.devicon-yii-plain.colored{color:#0073bb}.devicon-zend-plain-wordmark.colored,.devicon-zend-plain.colored{color:#68b604}
.flag-icon-background {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}
.flag-icon {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 1.33333333em;
line-height: 1em;
}
.flag-icon:before {
content: "\00a0";
}
.flag-icon.flag-icon-squared {
width: 1em;
}
.flag-icon-ad {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ad-1d5c54a1bf912b9b2ddde7691540df7528517bf96bf9707dddb5dc0b64b24971.svg);
}
.flag-icon-ad.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ad-c2779f7c77e14e340a0ebcdd10e2b933d9284158bbf8399b25bacdd093b2ad54.svg);
}
.flag-icon-ae {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ae-d46014f9867fb0623bc60531da73c571e08daaa6d8d4dd302f83947b0d422653.svg);
}
.flag-icon-ae.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ae-70092c737f628e93ab2c1159cc219833b71c71cf808318741ceef7dbf206166e.svg);
}
.flag-icon-af {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/af-1c43acfd3db65b1a478983fffc480cdee2e6e567e8c8a3c50a3c20e77e1f9ebd.svg);
}
.flag-icon-af.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/af-a8a07e0dee15dfee05615183352b5e68288a0620cacdadafc57e047078dbbe91.svg);
}
.flag-icon-ag {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ag-5ac408cd0f738db405b36b38908d9f777cda977c84f7121f7e6b82ea99f3eefc.svg);
}
.flag-icon-ag.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ag-60030b1b142dc125c454d45f2aff24cf842b987f16c65fb5d4428005e74fbf7b.svg);
}
.flag-icon-ai {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ai-d43f51c9a9adc0a06fe3b1861780ed414e397d9c3f0845764c2919bd5c89502e.svg);
}
.flag-icon-ai.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ai-a1a279c06b9b72baa7f4965f961638449feb8a49c39671a8b337f21684d0dcce.svg);
}
.flag-icon-al {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/al-3d3aef08eef282721c6ed0db8b3283be84e62b03b2b20f632d0e315b200b8113.svg);
}
.flag-icon-al.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/al-157627108c3e73e1f34e076bdea3ed11bf6a641b49427f14303f52995bbb24fd.svg);
}
.flag-icon-am {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/am-2dc653179db32b001861cd5648de7aa88cf00095284b2ada6541755e896887c2.svg);
}
.flag-icon-am.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/am-22ee208d27a0d4b74219809b35c45bb8fbfa4ff50e492a8696122795425f1247.svg);
}
.flag-icon-ao {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ao-5171a7ef8b92135e89670357e1f513555631e03bddabb2b3acdb8169c79fbe9e.svg);
}
.flag-icon-ao.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ao-482838f62b0d924833e564325fb62b3244f065f9d40182b9bb1aff4cfe10cf8b.svg);
}
.flag-icon-aq {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/aq-535da0936e30876c573ff542da191df1c74d645b98f86f4c7a2f7db27560419f.svg);
}
.flag-icon-aq.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/aq-0d420e2faf6cad0375a35f62e709f70f00757b977dd7d47d937ad1122cdb3b70.svg);
}
.flag-icon-ar {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ar-16277b35a4dda848f5b27b37e6ede347a26d106eff4f8eadebb92c9ccba31d4e.svg);
}
.flag-icon-ar.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ar-d07fbdb55ad69134c57ac5f8267046ca9aa57b3092243d7836a5e48a5b09b03e.svg);
}
.flag-icon-as {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/as-0205d1e6c5debd9f8101593ce18d43f29508101668b38fdbc11dabd563679f54.svg);
}
.flag-icon-as.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/as-d903a57097f11a8758f47dbc6509d1d501364dc74e9668df8c0b87980639eca8.svg);
}
.flag-icon-at {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/at-e21f59d0d971d90bf1d7b561a66b85de8fa5100c7a192249f62248368bb4b0df.svg);
}
.flag-icon-at.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/at-e9b4331b21576caa4e14879f92e1ded4b68751970fed8141cb25ce19018176fd.svg);
}
.flag-icon-au {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/au-5db5fa2d95fa5223f223f40f389fd5db28027a10169acd66a57147620456b123.svg);
}
.flag-icon-au.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/au-f826048be906fc032886e5683a3477bec2f3042fd790de2d9435a14adb16b954.svg);
}
.flag-icon-aw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/aw-e76b7bba98b09e1777664b8f70c8b180296daa42657db32fe50e8306b26ce611.svg);
}
.flag-icon-aw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/aw-b57e05948d8e5eaf8f5afc39c0f9126f5e7686ce880de13e56c0ff5384ed5a48.svg);
}
.flag-icon-ax {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ax-15d3f2d4b724ec782ea620a7545dc037b4841a6717a1c75378bff87de12e630d.svg);
}
.flag-icon-ax.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ax-0e6745340c89c1a73acca0fa7fafb620a6c452289c0726dee0f31fbb604de0fb.svg);
}
.flag-icon-az {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/az-93314c96116f1ff9871d51b221ead2a5c9c89e0ba1be05bc49f1a71fc1bc504e.svg);
}
.flag-icon-az.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/az-c17c0ac57bb58aa6db2c0660ccb45d65971f88307d3950be47d8a09facb1c4fc.svg);
}
.flag-icon-ba {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ba-ce8f7f898c12d49e6e9e68a9031ecf30266f4c8b73f108ce92a24a2b7b849102.svg);
}
.flag-icon-ba.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ba-bc754c2f7755a31ca34b0fa82b70e6a581b7dde03fa0631b9964bda01a41e836.svg);
}
.flag-icon-bb {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bb-e7f9137da60ea1e86383da018857f7003e817cb48839d5fe460f09e1bdaa087c.svg);
}
.flag-icon-bb.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bb-66cdcf4f93cf710bfd63a628f139daee0dd4f441374f5377e318f86d3cb286f3.svg);
}
.flag-icon-bd {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bd-7c73b4c3021eda2329634ce8eddc06103fdf8f2e4dba98734d7fac6aa0eee087.svg);
}
.flag-icon-bd.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bd-4980e75026eca3d73b96e6dc32b78a3b7a0bb4d0133c0b104ac9dac7396f589b.svg);
}
.flag-icon-be {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/be-f7b5b89e68e10e6f379a4932dbb4f09767533d559296701b63742b97b1909607.svg);
}
.flag-icon-be.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/be-888ddceee8ee7a554833595019be8f58212239a0cdc0163f8f34d6c162bf02c5.svg);
}
.flag-icon-bf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bf-29f7ef54a8e4aaeef8e965a85da309dc62f82732efdf9a0d50df27603702ace0.svg);
}
.flag-icon-bf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bf-4553c163d4432a1334bc7e27dd4da350c066fa4028060e511b4f078722cffbf2.svg);
}
.flag-icon-bg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bg-569584f6de2334e4eb5666047547a8722bf1f33863e1b69edacbdcbf09896874.svg);
}
.flag-icon-bg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bg-683f66b3d38b5c489725d5756b8896466dc782b44e627f19af9a48291331cc7f.svg);
}
.flag-icon-bh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bh-2d61286ed68e17983bc6184f333fb3deed6c5bf6e3e4464f4898f3ee8cfba8f3.svg);
}
.flag-icon-bh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bh-866717d17ddf56f20779cde594fc84400f479585735ce5ce1f7cd5473680558f.svg);
}
.flag-icon-bi {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bi-1ea0c7c29d0d008f7e3465e64e9aa4fc43f968ad6f257da2f95609238f86e811.svg);
}
.flag-icon-bi.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bi-a0d4598a4f8e87d56cf36af6a3610f71b6654b82365258401c63d3e3497e3222.svg);
}
.flag-icon-bj {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bj-125c5f0e1b7943de14db26b7f162dfc7278e6e480f57bd5d261010f231b36b9a.svg);
}
.flag-icon-bj.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bj-92c4b6a3802e6d86dcdd25a9311d2d2b53a62e1f768bffced35f56608392d203.svg);
}
.flag-icon-bl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bl-5a669d778dbab758e0ae965109e3ea636f2d12a221922826948c3d066af3e797.svg);
}
.flag-icon-bl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bl-57f4c5629bf77e5af98daa8eddf4afcef0ca803c4fc62980d81ae6271a56d3b3.svg);
}
.flag-icon-bm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bm-af00abf5f6db201413e38a2af97b0d2b5d3b3138a48db6e20d23501c0bd5538f.svg);
}
.flag-icon-bm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bm-187bc742d274ec7b32d1d0b3892f515788dbfd9b5448d7ab7ee20d9951e73f50.svg);
}
.flag-icon-bn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bn-c27045ec4339e4aeb89d65f656eb4413dd3b24cb1d4ce555c67acbb8de386de6.svg);
}
.flag-icon-bn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bn-4c052ac6c7022c6fae5ad894593cdd285f199695af7635e48956c08ff19c44d9.svg);
}
.flag-icon-bo {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bo-eb3358c2f03b94f5a558d5656931b3afa8d51e4b0e8206a6ba59c59f50a1552c.svg);
}
.flag-icon-bo.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bo-cb3b28c2d4f96f8809b5a3658469ba98570cb1d0860bed66333940eb17915e30.svg);
}
.flag-icon-bq {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bq-41d2a4ef0889f1dba370b4abfd202faaa1e029b26497dfd71f5654f91d567a4e.svg);
}
.flag-icon-bq.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bq-b2f010bc9f038a9dc2de71fee50e5d709eaa66074cfb6c86fced701532ed4704.svg);
}
.flag-icon-br {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/br-bcef6a97942883d2d1022e89004f57f02564f44582e41cd6f40c0975a2df32ba.svg);
}
.flag-icon-br.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/br-7be0aa016308bc77b9b5fa6968d1b91957d6a6ce7c1cd6c5e7294aee85514af6.svg);
}
.flag-icon-bs {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bs-f3fa0b4d911bac68d09ed5c07c269566df716a65da2e3404352bb672b89e5a45.svg);
}
.flag-icon-bs.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bs-68f40f5a965a5d7d620e8e91144e2dc978118ab4c117224a034e527558c7cfc6.svg);
}
.flag-icon-bt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bt-1f1e3b3a10857cf14d98fef892973c2ce412d3be7111e57794861a974f5a1c27.svg);
}
.flag-icon-bt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bt-fc18ad0110fe7fefcb80cd67f69387b69fcf5110a43a369da1465444cd8acc4d.svg);
}
.flag-icon-bv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bv-4ce7082eaca61cd98f08163821653142a682d40f0e65503dc8ec2dbec9842500.svg);
}
.flag-icon-bv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bv-7ee96cccf441cf5effe5cec64a60b5cbde9dadf749de402a88c4ddd19def61e0.svg);
}
.flag-icon-bw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bw-04d43357ab30c273d889f9d21be8aca4056dc4b6675e36b69f1a345c48d11642.svg);
}
.flag-icon-bw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bw-6246d85d8fb866e99e623aeca6fc475e23507d9ec60526c71616e65bf5fe75fe.svg);
}
.flag-icon-by {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/by-9bf05d089c91cc6791f5744ebb36bc6554f4d8a9ea56e63ed6043421a6c1a5cb.svg);
}
.flag-icon-by.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/by-c5998ad5ed3b73eb5586a184681dabcff407885b4f8aa24c24ad793285cd5ee7.svg);
}
.flag-icon-bz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/bz-0ad9de4d550b9733160a9aabf163c76cebe5fd28d121993157d9a12f6ad61aec.svg);
}
.flag-icon-bz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/bz-77600e5deb0988ec840f8491ae550473b3d52fd3b208b0c18523bbfc50c0f7cb.svg);
}
.flag-icon-ca {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ca-209a3e7b8376ffc3baf43359bd3ce32ba54d420b0832910ed494897c67b63d24.svg);
}
.flag-icon-ca.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ca-88b55382d60ec8a13e2c1c05cf8bba3c5a286305435c5414c1deef81eb0dcebd.svg);
}
.flag-icon-cc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cc-2bb060751d19ab3c0cf0eb1082a5e578287344ffdd1efc1170a3179d39ddf631.svg);
}
.flag-icon-cc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cc-f826048be906fc032886e5683a3477bec2f3042fd790de2d9435a14adb16b954.svg);
}
.flag-icon-cd {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cd-c44476eba917cea909e644d5eb573cd399208bf240f3b33a750cc57d8f780654.svg);
}
.flag-icon-cd.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cd-82107a531f26ae790efec9fa03cf22f1ef93806b0cb70a758419dd75c826e394.svg);
}
.flag-icon-cf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cf-5b0f30ecedf7cf8b4776c92e7750533e8306b5eba789dcd418a17dac7e6f1749.svg);
}
.flag-icon-cf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cf-9290bb558505b63b5c0756620abeeccadb23e8575147eae8c5d010d8ceea3319.svg);
}
.flag-icon-cg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cg-c2d9f8cdb672d40c3180c412fbf1d339375efb73874c497faa792e1c8c2c7da1.svg);
}
.flag-icon-cg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cg-0965929a1f5611bac32b56be69ace630d283513e78eaa60621d6e114dcbdfc5f.svg);
}
.flag-icon-ch {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ch-f6fd4cde7d602f17501cb61c8485dbb09cdaf964ae91cc5312528fcc9caa1fb4.svg);
}
.flag-icon-ch.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ch-520c023ebd2524d2f3af2044d526a319c9b5ab3676c94c8766878e429bc98be4.svg);
}
.flag-icon-ci {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ci-483c82c86cde0ad5883c54b8e9b11ee579644b10ec8b2f484e0d9efdb4f3badb.svg);
}
.flag-icon-ci.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ci-4fe1a6e205ee5cc546774f0867f5864ab4de624d4fb4ba15e797e90ea354925e.svg);
}
.flag-icon-ck {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ck-ce24183a352aecad846f100e18cafd9a4b1f24550db9af9c7bc81cefa35d0188.svg);
}
.flag-icon-ck.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ck-d395041c214de0fd845190a17537996ff1da3cba2aa289bb83796b9cf1b040de.svg);
}
.flag-icon-cl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cl-269e494bb191fe452feef2ecadd6aa1c27041ffa29d2e2b77255b690c9d13880.svg);
}
.flag-icon-cl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cl-481c323e8d0e197c49a1836881d76970b51b5f401c36bc26b3ad06dd88318b8d.svg);
}
.flag-icon-cm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cm-4d06ab8bea93bd9d5317502de275aea7559fe55107a33b0ed35f6bb6a9db6c25.svg);
}
.flag-icon-cm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cm-ffd6e78306bd1b73b1b1ef744f540bac57127505619798b2dd1cd7fed3920590.svg);
}
.flag-icon-cn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cn-e2db18411b89f8a4fbb89414a819483b21a26132aff872942f0b835af531f85c.svg);
}
.flag-icon-cn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cn-084192e9450c23ae0c49e248466b640ee0b72e53b40f76599db27f01a3a0e276.svg);
}
.flag-icon-co {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/co-7ba68d9a7a531200f2df5203987ee45a365cdf554a8e2a6fd802717e723608d6.svg);
}
.flag-icon-co.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/co-4e339dd1ce197c83267f2d31f676318026cbe00642961322eccda0953f310fc9.svg);
}
.flag-icon-cr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cr-c4386dc64de3db7ef5f4a1ca6745cd5695f1e45f8f824903eede482aff9942b4.svg);
}
.flag-icon-cr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cr-4fbdefb407d60f710c3130cde1fac6dc35a26c15448aa2567cc70db5e60bda94.svg);
}
.flag-icon-cu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cu-b6e7be982230faae6259aedb89297aad1b89b6a7e420556395e2a85d8266eba9.svg);
}
.flag-icon-cu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cu-2c4f3a899634843ae8e1ad41d9c777678e4c4bc381b13a3236aafab084ee68ed.svg);
}
.flag-icon-cv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cv-9290959a94ef5b5e06001fe95a0df8a4d5cbe747251884fdf67009405dc15d79.svg);
}
.flag-icon-cv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cv-a5da159f52e861a30a2ad76251bf28bf660088317b1644cfd491d69f1cfb2fe8.svg);
}
.flag-icon-cw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cw-55e1df0b40dddd7bea866db088551ca9fac8856a16c2121bfdc8c670b5fab768.svg);
}
.flag-icon-cw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cw-c57b22d2cc6ea882197e53d59941f91c55df7872f5d7ad4a1e17a7538bb83797.svg);
}
.flag-icon-cx {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cx-5565fefda4ab931c2face51b8e12f0f035b4d6b4f0f1a79a043bc3eba384b5bf.svg);
}
.flag-icon-cx.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cx-c79bfc093face7c8934bb2ce437b4b1e420c14c1a5a19a13aa55515dae205c21.svg);
}
.flag-icon-cy {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cy-31a7897adc02d2ad1f7a01ee5a1a5a23cbc501ec6048dded6b872b0e5736c9f9.svg);
}
.flag-icon-cy.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cy-44a7e742552842ab0820828ee934f86f23b95980e8b4a9c4599f43669f3aeacc.svg);
}
.flag-icon-cz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/cz-8e9aa9a22afde4977dba6b90c802d81b84695fc3515bdbbba91e95b5782687d4.svg);
}
.flag-icon-cz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/cz-14102c9951264f4f7ad6aee9096ed041c956729114e832072fb1637b0c0f6303.svg);
}
.flag-icon-de {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/de-3f18c80a15bd6820cf5a9379ebd0a0fc4cf188ccef53801ef3eaf7779a570fef.svg);
}
.flag-icon-de.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/de-9749edbfe97760dfb459269be2da7e1bf87d72ca05450adea27ba464b755c411.svg);
}
.flag-icon-dj {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/dj-5736efd6606585ca7ccbd0503c63afc0ce9b18c615144636bddb061238677568.svg);
}
.flag-icon-dj.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/dj-34f42493782464745776d80e4e795acfb265f673dbb45f1a37dd7422b3260be0.svg);
}
.flag-icon-dk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/dk-cbbb5e2d84c7e71ebd51fb3c278997a68581a52c851843af9b4ce27ea94b8b32.svg);
}
.flag-icon-dk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/dk-590692f87ec1f13f838f17546134459118b4d9271ca6e89a2e4383756459429d.svg);
}
.flag-icon-dm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/dm-c62cc6b47244c1e27c5783d8683d01c9f44f1e65eb1d27d7d2c6dd688ce2bbbb.svg);
}
.flag-icon-dm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/dm-29311c1eee49c4a723dad9897e40667ac321957399b94fbee5bcbf525e5bdb92.svg);
}
.flag-icon-do {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/do-47cd54f7f0af49671866c492e25cdafcd23ea13e741b8d8c08ca7e6bcda6cebd.svg);
}
.flag-icon-do.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/do-6c4f5738ed097d317416d26a389ccbd1e23698568d831e9a0860424adbf828b9.svg);
}
.flag-icon-dz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/dz-8fd337bff391e37159508883e0528a9d1314ca862393fad9db756b7c7c92e427.svg);
}
.flag-icon-dz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/dz-8fef161cd9c4f27ab73243ac6bd7f73325cad475db6c34d8a46bc29e279afa37.svg);
}
.flag-icon-ec {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ec-bdbe181dd4c72847b3a9191fdac9453a83cf846f3acc65e3de3923ddf4a0369d.svg);
}
.flag-icon-ec.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ec-3fef8c9046c9ac5b77e86ceffb5a1f0187fc3aac08cbcd5959b31b8898e2cdb1.svg);
}
.flag-icon-ee {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ee-c287701c5e4642e1c8139ff774905a6accc6e14af52d3fa0cf8b216fea7f5d93.svg);
}
.flag-icon-ee.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ee-8d37c1143d86dbdb215494a4a2d317061ecf2cd448e013aa100106795ec7f43e.svg);
}
.flag-icon-eg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/eg-25dd3086a18e2648f52cbc62ed626a1a541f970b6edfd65b7d8cb9f009563c54.svg);
}
.flag-icon-eg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/eg-d5617b11d9930a2f1a3654684e0ecd6c9147e7801abea79db57837f2551ce3f1.svg);
}
.flag-icon-eh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/eh-3f4dda5a6c51e172f6d731a931d00264235d098327316a784955fbc2a1b572d7.svg);
}
.flag-icon-eh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/eh-d6f1ca9a152cab2a7e98fa639615a8eac1239cb483bc260bb12213df20e169f3.svg);
}
.flag-icon-er {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/er-e1a8dd4276298f735b330faadccb16c5d5d79a0994d5aedb6b498c721b337f28.svg);
}
.flag-icon-er.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/er-8cf41e8a36b0c62b77ec5a85077ca38df0a72515d42b203b6271e8f877a1fdfa.svg);
}
.flag-icon-es {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/es-a49cadcdef98958ce04a23918b740ca09a8fd9b114b27efbf82dd76fd2e8fc55.svg);
}
.flag-icon-es.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/es-0860ad3ee39582c3a1a4aa5679626e4a57c22753be767af4b84bce27f0a157ec.svg);
}
.flag-icon-et {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/et-7f3d679ab0f3786ed6a25ead12aaf547dbc9ab7c5a5c4e3deaa94b2b70e63e8b.svg);
}
.flag-icon-et.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/et-35b59fc689e17ea8ff51e0096d2512417842ffd08a3726db361da4336d0a8fbb.svg);
}
.flag-icon-fi {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fi-25d12846e1a344469d3d5dbe0b7d691f1014fd18ff3aa10fed31791ad3b8b100.svg);
}
.flag-icon-fi.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fi-c52a534a141e3702414bdea7a4f087eabd4d3e9a92c2e10ecdb20e74bb2775cc.svg);
}
.flag-icon-fj {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fj-b8b9945b123063b761ff2c8c13b35f87e830348fd413aecbdeae2fdac2f8ff01.svg);
}
.flag-icon-fj.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fj-69eea30930a9af6c9c7485ebbb1756e67ca60c883add2741de6c908bf0d86ca5.svg);
}
.flag-icon-fk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fk-255da6cc284e86e957463c49ac410a97b682b7ace47f28e1cfe7ea8cc0c43f35.svg);
}
.flag-icon-fk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fk-aa0c0bee80f1fdcf0f600d7aece35405512d925e845d6b013bfcd0819edaa18a.svg);
}
.flag-icon-fm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fm-0c3b506ea3e19c73f46fdd669d79291401f4cd2784552a40f7f7d2c34cd45975.svg);
}
.flag-icon-fm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fm-e25ffa390465358b0947652ef21b83ed0b266847cf5970570cfaed9c2277d4a1.svg);
}
.flag-icon-fo {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fo-0ef3db0646be1daf39bef37fdbbd3361d8aee1fff59e0b992785e2a61591d6de.svg);
}
.flag-icon-fo.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fo-78b91912da2b8b099f238c0ffc24b3916c0229d0e78aba96ee64937dc9b77784.svg);
}
.flag-icon-fr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/fr-0758473f4af7375af9ecee747323105ab72525f2e613eae9c797488b2dbbc7cc.svg);
}
.flag-icon-fr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/fr-57f4c5629bf77e5af98daa8eddf4afcef0ca803c4fc62980d81ae6271a56d3b3.svg);
}
.flag-icon-ga {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ga-ff394999bc84f7adaef8d45f386e69ae44fd39d50c2f8c9ee528868104a25dab.svg);
}
.flag-icon-ga.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ga-82eaadd209f437313c1e1b19f0f49e363d69a2283b99afef8fe140e6ee7dba08.svg);
}
.flag-icon-gb {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gb-b5ae4f6cfeabb7d14fcc395dd3301f09c3c19918f8ebd02340e9840d2a55ad33.svg);
}
.flag-icon-gb.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gb-6f1965b1356b8599a8d3ceae93781189cdc8821bc0eaff0fff2671b35dfa0ffe.svg);
}
.flag-icon-gd {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gd-2ee5f4953a3079e79e8134650eccd1a75e6865b9cfaee926a7fb224da0b035d7.svg);
}
.flag-icon-gd.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gd-26994305fabc56bc9609f01dfe27853838b02fba5571b68173219e849b65f51b.svg);
}
.flag-icon-ge {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ge-29636d37494884d16d787a3cb1b96e1a98609e1e08f0b90c6b04ab9dddcab866.svg);
}
.flag-icon-ge.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ge-b263e27347cfb5c1cbad3951401abbeda1e52d9b07fa16485805ef409fba9926.svg);
}
.flag-icon-gf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gf-cd898bba56868fe428a1aadfb424aa227c66f23a56894cfa4ab9112f862ee931.svg);
}
.flag-icon-gf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gf-a2e287e26fc1ee85bf4f8f4c03b98375b84bc2cdc0d6d4744f10dcef6cf3a67a.svg);
}
.flag-icon-gg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gg-7f90cfff67ace577de4ddc26417c863824a9956d4cb3683041bc9d4088d3114f.svg);
}
.flag-icon-gg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gg-fa14ff15c1e9e99a0ac50bb936a5f43e54618006940eb981820dd6184ef1c615.svg);
}
.flag-icon-gh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gh-09771f127076ca7ff3ae9224e38785b1e102ef38756e885090cb3f17b56e1368.svg);
}
.flag-icon-gh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gh-62b2f2f468d580de89b18bc52cebe6cb3b9792ee7309c797979ec77e3929471a.svg);
}
.flag-icon-gi {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gi-c552db87d21a8c6c1d3127fe25e6c928a35f127122a955245329613204325bfa.svg);
}
.flag-icon-gi.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gi-4071ffea23fc0c4326e217d641dda5d4d027bbfbd7d926170181e035488ced2f.svg);
}
.flag-icon-gl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gl-ec7d3c69830f246c0e2cb269d93a1e290aa1cb60ac4a36dba3b17686ea0305f5.svg);
}
.flag-icon-gl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gl-c5d9b0e7caa7ad20cd64ea11c3d1613947f7224f3007c2945ecb3d11818c08ae.svg);
}
.flag-icon-gm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gm-56e4f3ff22f0e1d4ae8b69ede43e5fdb9e37132fb89ef42bbbdf6e95ce49fb34.svg);
}
.flag-icon-gm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gm-e853045092bd353c8487bc7e42014f67ac7f9da316742b0ce8ff8a8a36ad0de6.svg);
}
.flag-icon-gn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gn-40f46458268b7a019855f6652e9c052f81803e5e0e31781775654345a7f62792.svg);
}
.flag-icon-gn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gn-3ade76cabce3af39f0110a0f4620ca55b7920f454be8df8bb621d405a2394855.svg);
}
.flag-icon-gp {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gp-81dd42496bd4919719d74d90551cf6d281c8d6bbd9520298e10cc6e050164507.svg);
}
.flag-icon-gp.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gp-23499438cec4547936b4d9ccc2550a9db3984da7a8c3334fd4b921311e60c0ac.svg);
}
.flag-icon-gq {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gq-3c68f6c2865b100cac8e0cf7a15c4120aeacc6c9e26918e6f8b939399c15ec14.svg);
}
.flag-icon-gq.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gq-fe5d3c4e5746d28de745bb7a0a4edee89d8f83b2e206388927f62ccb01c8ae01.svg);
}
.flag-icon-gr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gr-795da5d64b55ffc9e3e6fe8fe5c13f86361050bd2aff0a085af0430864632155.svg);
}
.flag-icon-gr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gr-6d65811feace25587923e003a093007a96082ac2af7df9d09a18b040a9afcc9b.svg);
}
.flag-icon-gs {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gs-6c591751e250e295bad04dfd95f0974339a501d67eb4f1aadf83df3bf533f8bc.svg);
}
.flag-icon-gs.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gs-8edce43abed389fc444d339f1b9430b04bc9f39980ee27b4a5353420b0d83a98.svg);
}
.flag-icon-gt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gt-76428af88f802122924da8641bcd4b47c91950a6e5c4e5af3593da6e62434713.svg);
}
.flag-icon-gt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gt-b95281e4fc14e25fd776cf83ccfc81fb1ec58df39da20f12d879a10ece006bf9.svg);
}
.flag-icon-gu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gu-72d96d642585e22788326793537cca828353ddc9121199c14f34b003b2b19735.svg);
}
.flag-icon-gu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gu-6a88edbd712410f39dbcbc83cca2526a8282360be973d9ba7dad045fba700b41.svg);
}
.flag-icon-gw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gw-2f57f62c74993a2860e83cfb0a7479d568abcd100b9bb2201f36af7b4953b9e7.svg);
}
.flag-icon-gw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gw-1dc8416a29fc9b3c7cfd09cb848c8001702ffec3e862e129236621954580449d.svg);
}
.flag-icon-gy {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/gy-a4b801d8dd484f188702993c0e629f282eef24595e956f61f33cb790a5e5066a.svg);
}
.flag-icon-gy.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/gy-e0e72786cc08f67f600d5a5fe8aa3a809870e3334645ba70e13c24d9c987eacc.svg);
}
.flag-icon-hk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/hk-6546f18ed21f70ab9b724df88f90c45c3c7fc00677e6feca4fe0dfd9058dc40c.svg);
}
.flag-icon-hk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/hk-894fb4771af1bb4f29ced2796d6026d20ccb2d29a5d46f1e84b6d3b33cb6a9a8.svg);
}
.flag-icon-hm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/hm-db5e50dfa3360cc801d447f432336eaf678fdaa2a8f2db54ef75caf99f76958f.svg);
}
.flag-icon-hm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/hm-5536a2a622ef2cdb4c76446752ad2c96b66bf7ab9e85339b239a46029b21b41d.svg);
}
.flag-icon-hn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/hn-0fa8df555c527a6c7f4f9e7fbe0f5c4e106548008093d194f8e9f4a7e7cf2678.svg);
}
.flag-icon-hn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/hn-83aa25d854db80d31a161036558f5eee7cffc953ba849b7d09066735da26453f.svg);
}
.flag-icon-hr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/hr-2f8236ff344185a5a9bfaa9547d2191db2c0e95d191e34916f5336e2888e010b.svg);
}
.flag-icon-hr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/hr-cdb4f86990c9c542b41e83dff6fdcedbdfed29f10bffa439c2902d00b500539d.svg);
}
.flag-icon-ht {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ht-b73e6383d97894f2bff980e4826b955bc1d43935b6f77a0e28a2b79f00a91222.svg);
}
.flag-icon-ht.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ht-24ddb3fb6b403688cbd4b83f39766fbb5b79307eb91303293c6236bf73d9964c.svg);
}
.flag-icon-hu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/hu-1d6e0cfaf944deb12d12515d4d3d2a263205e2d563d909bc42ac63a977f51926.svg);
}
.flag-icon-hu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/hu-b0b147fbd4b276cf33db56f3a595ad7062e059baf458efd2e66f343a71821338.svg);
}
.flag-icon-id {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/id-7f5d2774c132706595a940946349154336f4b506c159541e77b550271e70e649.svg);
}
.flag-icon-id.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/id-0441ff71099cb5313ddc3cefdafb7707f8e55dd82ce281931f9210afb9107ab6.svg);
}
.flag-icon-ie {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ie-aa4c8e16ef9eb0430e5f2aab5d9299689f9ab78251bb9084a690bd30965a96f5.svg);
}
.flag-icon-ie.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ie-a2a56a95acdcad7c90fa7a4b4e912f8d7a8199d61ede1d946a99124fc618fa4b.svg);
}
.flag-icon-il {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/il-93d542b34fa6ae52b1fa485cf28e5a7c1aeb0396b3cc9ba414a7493e39f01827.svg);
}
.flag-icon-il.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/il-bbc5c1ad1af1c67cc4f353d89b5b7b3799baf75ac716a227d68d56f0c307c2cf.svg);
}
.flag-icon-im {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/im-c92bf80305254acf26401f6ce62e735002d2fdc021b88a12cc5b17bc252e662c.svg);
}
.flag-icon-im.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/im-9608151bba8d457f50c587a73a0fbb2f67b712d7633c20cb91aa44bc7b438722.svg);
}
.flag-icon-in {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/in-135f86418ed479375869d2faf98273926f8beb5b0df8e081b47addac760515e1.svg);
}
.flag-icon-in.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/in-417a943e7da0c15346b393e6bcd41255fca763816e53405c2ef596dc0cce1996.svg);
}
.flag-icon-io {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/io-d8015a04885fecc9c2969c820ea0ad16e4fdd3707e78f89d38ff0f8d8765d7a4.svg);
}
.flag-icon-io.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/io-c5a671ff468e48522cd86167946fd3896a96b05e40f7ccd0e608141ae0776f28.svg);
}
.flag-icon-iq {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/iq-aa53de68aadfdd5af862db77ffc9a79339b8bf33bd7a5e84b4c4454ab8d135d4.svg);
}
.flag-icon-iq.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/iq-dce2fb9b88c4114a8c11163709e563740a06ab5096f297809eeafdb3c42d70e9.svg);
}
.flag-icon-ir {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ir-b747019186dba243829922351be760ff5b5f201b910fe6796f35d4cde4c9874e.svg);
}
.flag-icon-ir.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ir-d9143fb8914707a56eace5bea3eabb7b75b003b169bd8897d4259ec2ff3955ec.svg);
}
.flag-icon-is {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/is-1bccbdb44363b0b6faae16d605169afc13bd7acb270cadd1555d0712244b76bc.svg);
}
.flag-icon-is.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/is-ffb1516b36de8946e79fda6b98b9dda3239646aeb6e75c30c8cc6ae20ac5ab01.svg);
}
.flag-icon-it {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/it-d21127c1dd8c5ebb9cf43e36e2cf5b63958c340867c8203579c191a91d8cac66.svg);
}
.flag-icon-it.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/it-59aecf47e437aa992cc67f6852d7115956a119af5a6a2033d854ca2e76823495.svg);
}
.flag-icon-je {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/je-11438963d51592e346fa6cc00eb4b2818aba55e58e5c564e2595b16bbf09a14d.svg);
}
.flag-icon-je.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/je-181a1344c1f62e12a065e2a3c644e4a3b2ed8ce2a01cac98038c194ed58b7980.svg);
}
.flag-icon-jm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/jm-f37520b786f97e10a3b47f4c6a9feb024c40519c38ddb142de427b00747c3c79.svg);
}
.flag-icon-jm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/jm-10f6efd33e46a2f88338cd8ae8390cd9d4fea7777f8fe87623f5b2169c5368fc.svg);
}
.flag-icon-jo {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/jo-d2d69f3ab6dea5997fa6fc1f46daa2af713387d9f643f652cd296891cc2ab280.svg);
}
.flag-icon-jo.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/jo-bfd1f808f7bd274bfd9ce82d418210b948652cfaaa01d67f99858d0845c0a4bd.svg);
}
.flag-icon-jp {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/jp-d7200d3c1aa8576a4d97145c3af0eee0cb88a6815c6531d66eeb8a04636298f8.svg);
border: 1px solid #ccc;
}
.flag-icon-jp.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/jp-87cb24181e01e374e5409e3381e2e0a49ef780d40639c00779b985824ee5e72e.svg);
}
.flag-icon-ke {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ke-30d359f79d2a67c913952c7f653e1cf0a8f9f16ec380169dfa05c46b790db017.svg);
}
.flag-icon-ke.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ke-c0919419ca7c5c74cc1b271facb401adfcca169d5f4da8a729f1a32eae00e8dc.svg);
}
.flag-icon-kg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kg-df7c876fc39c547fccad9ec6f16dafe0b8b9778619cda14383c39fe97a986532.svg);
}
.flag-icon-kg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kg-58bd2dc156ee003295f0a648dbbbaceb28ff18385e0ccc5a4d58f23d4ef19a6c.svg);
}
.flag-icon-kh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kh-6f1f7d5c6ac00fc7675d61d3a8fcf40139bfa098aaf21401edd9c3197fd50fe0.svg);
}
.flag-icon-kh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kh-eb4bf5b28318324de7b9d55a8eb19d8ad109c60963fc427bad079297eb761962.svg);
}
.flag-icon-ki {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ki-ab8f4e1d75837c9b8c9c483955f16d155e45260da34962bbd949c02f0c6037bb.svg);
}
.flag-icon-ki.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ki-7124ae0253f3f0af622d6c18fa9fa669c8352970b546629ba4d4a6aac07b9a0a.svg);
}
.flag-icon-km {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/km-06c9e1f813d8de5122a89876c822e1a755cbd781204e3231cc08b101b2092e26.svg);
}
.flag-icon-km.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/km-1c4778e492088843875cdb8a6754ca6b0083bf033961045e15ec745f202994af.svg);
}
.flag-icon-kn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kn-43a099ed2ad3929ce08ce2b92769ac74d6ef772617c1264959c1c7b781c1f934.svg);
}
.flag-icon-kn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kn-533d3c61f2ab3b2ea16079059e586398635b730d05f588b087e61ff5b374763e.svg);
}
.flag-icon-kp {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kp-620e35fb66c0a617671b061e9f97b86fbf17cb8514cde9d9c93fdea069071a84.svg);
}
.flag-icon-kp.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kp-caa721d4de867c79e06e477f37ac6c18bec0df858e4634f0a36aa53c840d25de.svg);
}
.flag-icon-kr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kr-dc8331bada0aafc7f720e336aedf9d1ee8220b6d7aa81dcc878f5fa3232567a6.svg);
}
.flag-icon-kr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kr-32b0933899663c81aee0f35dcc72e46e3e241d5793a5926380006088a388e1f0.svg);
}
.flag-icon-kw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kw-b0c7d94bfa013de81c0b958326d04b6b97b3a1534bc7baeb4b49bdced4742800.svg);
}
.flag-icon-kw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kw-43ecb8654271e7cd149850abeb1e1a7a650a4f618bc87d68cb743d3a90e292b6.svg);
}
.flag-icon-ky {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ky-f465435ceaa18bc1ed525d530dda0c33c7744fbbb1c527ab100ac2eb1f5b9ab2.svg);
}
.flag-icon-ky.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ky-4cb72d66eb1a48e6a0b8b9aaa554bd70ac70a53fee0af81617952dd636130ea3.svg);
}
.flag-icon-kz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/kz-f7eadf7a4b6c83759a0dc4e802a684d6e853832c3f3cd0d62ec98184530c9d37.svg);
}
.flag-icon-kz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/kz-6ee24935145e5650a7a239de3597cd714c092c811945f0ac96b553e50c70bbd0.svg);
}
.flag-icon-la {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/la-1025c8b29b753e61eed0ff3499390cb3b2b9556aff80f862d661a7a88e6c8b0c.svg);
}
.flag-icon-la.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/la-c1065f724a2a433ae8ae59984abb97c08d4e578f0fd822b8dc2d56522195dd57.svg);
}
.flag-icon-lb {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lb-3ac0f026f888286bb5bfe41e30fc2bfe94b7f1b12df33c2448bcfa6bdd0234e3.svg);
}
.flag-icon-lb.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lb-8c3260625ccb49dd74eb6c06bfe23b2cd97a922ad98bfb97898e62b7f96f47cf.svg);
}
.flag-icon-lc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lc-c4894d923fcdf9dfa769c79211ab3772675cd46af8c0cb2f0e3bc7c94337330d.svg);
}
.flag-icon-lc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lc-910d7d346b885890f0a5a1bfcc4a54dfbd2d9548b0384b0ae6c970ecfc42833b.svg);
}
.flag-icon-li {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/li-22ec62bdc64d1ce5ba1fcfe9c919c0068f4b9d90d70f1233b490c3e87bb834e2.svg);
}
.flag-icon-li.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/li-91345196d201caff899cdbc0c8eee56841683b8d873ff25d4081d7ea54c47070.svg);
}
.flag-icon-lk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lk-2ff391fb8427963b23d8281e0de22f06c1f85e75885bf675d1f6685e07058497.svg);
}
.flag-icon-lk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lk-ce29ce52c4a29d3a4709486a0e57fb66fb6103b455edd803906142d55ca58b73.svg);
}
.flag-icon-lr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lr-8aed641325df2fd0ce6b2d4ff79528165ff08d38316cb734ab7baa811ea97785.svg);
}
.flag-icon-lr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lr-599927e9e3fb4897f4b2b4c0ceccb97e46f67e0588564fe70e4d5a9e4bd2f0fa.svg);
}
.flag-icon-ls {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ls-a99c3c9a2d1feed55f0d6ef35c137b5ded2903c9ecf0a6a5aa7e2691fea82125.svg);
}
.flag-icon-ls.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ls-dba118bf8ce67c755ebca6811aad9f5a14c18d36a122b75a5b02c39655ed243d.svg);
}
.flag-icon-lt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lt-b25fddeff8579a433b857551fcab51f2c92bc068f35a6a4b5cceb799b8603acd.svg);
}
.flag-icon-lt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lt-9f3d84fd6778c7cd1a92f30225051a494a5858908959d5b1aa3cf256a2eadcdb.svg);
}
.flag-icon-lu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lu-d445634c592c6d5656bbfcdc29e2334f94bb94625e0cced995e9677d378335e4.svg);
}
.flag-icon-lu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lu-6e94d53b307ab521d7e8e30ee958bbf49ca89c4f5ac3670cb6e3cbaee2f7820b.svg);
}
.flag-icon-lv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/lv-d0359916f3304051ef46f20d0875635c6a2412af0cc91b5f7e2dfe620c86a0ea.svg);
}
.flag-icon-lv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/lv-0d19402d0cd9fbea31426fd62431acd21586733c8792f9f253b913a4919d767f.svg);
}
.flag-icon-ly {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ly-ab80321a1ff89cc5d56c056fb4c4e2d75b51416d08a54e9e323feebadb9aa66c.svg);
}
.flag-icon-ly.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ly-6a89dbeba1f3c26b7d4ed51d20a10490dbd2714dfe9436a8dcdd74186cf9bbec.svg);
}
.flag-icon-ma {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ma-0efa986c966f46d8c7b61bd45ff53aac25d551c5bdac07f91bba5925a5126a1c.svg);
}
.flag-icon-ma.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ma-aa04065d343cee968068441ef9702a917c2a420eef9240c0e337786a551bc7d9.svg);
}
.flag-icon-mc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mc-4a7cf43a95a006aa8982ae56d55c246e3b9b35d9acadb97717bf7c2e053183ac.svg);
}
.flag-icon-mc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mc-ac574f083a76ffd644ea1015576e68784c533f34fdcb69f40bb842f07b361dc4.svg);
}
.flag-icon-md {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/md-45cd99c226620f549903f8262f35737ee4544af70b529d487191942e45e96954.svg);
}
.flag-icon-md.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/md-5ee0d4d79fefb4d5c76e79efa5f00c52b81626f3d4a9e53cd3199471e04791f9.svg);
}
.flag-icon-me {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/me-9dda65b0b045e7337cefcf87e0e86108c02db8cd14a413f7138fedfd4f7e4d8f.svg);
}
.flag-icon-me.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/me-58e3b27f35b918f07dfab1ac635524cb2a04c61819127659f54e81fc60d1067a.svg);
}
.flag-icon-mf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mf-0758473f4af7375af9ecee747323105ab72525f2e613eae9c797488b2dbbc7cc.svg);
}
.flag-icon-mf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mf-57f4c5629bf77e5af98daa8eddf4afcef0ca803c4fc62980d81ae6271a56d3b3.svg);
}
.flag-icon-mg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mg-c984eba3a76dad169529466a5e11c06627c0054833f0f3efaf8b841b84c701ce.svg);
}
.flag-icon-mg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mg-0dc0864ff6d0c08baba21e3064930912095738ade44af674c86f93e948a06488.svg);
}
.flag-icon-mh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mh-5a9d3c89b5eae2327b360a94f211ef11186dff39b7b0e90c0fabaa266f6bf23e.svg);
}
.flag-icon-mh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mh-219e0ea780165d0de9581c88d41a1150488148a1b7b449ef1f789c2d95f0f07b.svg);
}
.flag-icon-mk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mk-c3251dc8723c785c13acce082942383776461e8838d8c24b30d7adae2142ce22.svg);
}
.flag-icon-mk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mk-94203d87c72b173685fb6af047b23dd6078bc935d0d29cf4bea7fc05ddc27046.svg);
}
.flag-icon-ml {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ml-4d4d5c0d7a3f279fc64ded69daa3a53aaa1ac59ab77386d4d931a787a1328c6e.svg);
}
.flag-icon-ml.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ml-5f824c8869ca0fdf42642738c7f7bd652a40b47e4f72f5da187c3198bbc5f755.svg);
}
.flag-icon-mm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mm-0465f8a099f70bc8d45b754aecd45240b8e86168d3d26f68bb090c971a1a1b71.svg);
}
.flag-icon-mm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mm-3187fb0ac5309b570094870950f2ec1c14f03899e007d1937e7fa6fca62366e9.svg);
}
.flag-icon-mn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mn-4069b87692dc27fbffa268f42a1578361a405866c2badf4ca22a9dc2c87e8cb4.svg);
}
.flag-icon-mn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mn-c2418b05292e3e29b77761f4071c6a2ebcda274d48ec895c77fda86de5a3e20d.svg);
}
.flag-icon-mo {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mo-1262da4ffe787c843a87b08757d4f78fa880253a36313c4ae53bf3ee6b1778f2.svg);
}
.flag-icon-mo.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mo-aed4c98cabec025cb9fa5b9f2685f78c22f64d00d743e7a9afd2ad14f65a88f5.svg);
}
.flag-icon-mp {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mp-7af74d57880cd9a74cfad2a823d11f5a2fa7d0d4315560d51b1dbb1aeae45502.svg);
}
.flag-icon-mp.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mp-bb40420eb68c1f5eba2a67e2169adc7a9fbf497d9283b78539286caa9b7777a8.svg);
}
.flag-icon-mq {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mq-085435c0c67bb89857b1633457edf6985fdf01e096c7c31054ac85c0e08c4a08.svg);
}
.flag-icon-mq.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mq-b655f8a825f59040a836edbc4768b2836acbad31477cf534e853e3b91bce0476.svg);
}
.flag-icon-mr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mr-d4f1927127e761acd0224e578935156c794d73795e1ccb73950ce82e2b2dc2e2.svg);
}
.flag-icon-mr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mr-7e557e5371f042a47e9fca6127606a100d2a7585fc4f86f33f29ed44b7231526.svg);
}
.flag-icon-ms {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ms-418ed0202433382b9343cf93630c3360ca47a6ad053fe17d04d2b5d91d22bf38.svg);
}
.flag-icon-ms.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ms-301c4c1dc7f897dbc0484afea3648c1a273786aaee3aef35f457a4f471c06f95.svg);
}
.flag-icon-mt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mt-0498a2a05cf2350ed65050e26e1c4c46644172820f954be3faf0431ee6a35882.svg);
}
.flag-icon-mt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mt-77d53a13209364c38f7ccf9235209ce348a07ecbbe0b30eadfe653949d46e7b4.svg);
}
.flag-icon-mu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mu-e3a9bae2e150b0f52383c2a13b07c073367d61a89b6d30dfb299b19aaacacdee.svg);
}
.flag-icon-mu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mu-48cc7a7be67f712da5bbd1d7214aef66c8b51f5f2ced5505485008af2c10627f.svg);
}
.flag-icon-mv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mv-e2cce5178b3dc4f9a2cfb85c3c795ab3568c75e4d1869f3d1478d8cb6c1fec99.svg);
}
.flag-icon-mv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mv-261f56b7192f7964dfa9ac30a71360e624dd83eb31d0c97a01185f23b186136d.svg);
}
.flag-icon-mw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mw-6578ef401bb4afcd48e6fffc8dc0b0f08e76d167bc0b860ea70d16772e7de0ad.svg);
}
.flag-icon-mw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mw-69995db2444b6a15b8f854a8bbfb1138ce2983bfa046e6a4a621a7e26fa59195.svg);
}
.flag-icon-mx {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mx-c80f236be6f389bf02c6a9a02584e76e5731d82a3ba3ce96c265e2bf85b19579.svg);
}
.flag-icon-mx.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mx-2c4a628d075947477adc8fd592c42f7bc78c6ef5fc8f3b02a9e92cd7d45a2c1b.svg);
}
.flag-icon-my {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/my-3dba34b0e0b850a5f98523551626763e1c1be7dd495beaac2383461c6532f1ed.svg);
}
.flag-icon-my.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/my-b5d18942af7151ecb7483a19a89605c42e483031a2187f330d1843f80d37de64.svg);
}
.flag-icon-mz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/mz-bb1ca23c0968faf60c821d70e6c9f57f8e65e7fcdf964028b48a3b90e1a0b256.svg);
}
.flag-icon-mz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/mz-3cc80939d3ff03c341d54d2092c86504e541192de0917f90f9add3ffd1cefa4a.svg);
}
.flag-icon-na {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/na-fbc9dc0a0071949958df841cab81e186d1c227b88435686a069630832e8a8e20.svg);
}
.flag-icon-na.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/na-f72407afbca9f542302f76219c7229ba4f4207992149f796519ebf40541fda57.svg);
}
.flag-icon-nc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nc-9b8c164595cc80dfc1086a3b7b06c1eec9749734ffc0f6d27fe9095305358e2b.svg);
}
.flag-icon-nc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nc-5793cd218865d9e1a3e117b4d254b003ad187fe1687c613483928caa5a3a61dc.svg);
}
.flag-icon-ne {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ne-38eba2cd349b70690dffd630d0cb5706a31b7e54470f440c138a56567f29bb37.svg);
}
.flag-icon-ne.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ne-341be4b32b5f37534f103d437369138063c965d3a296f7382be659ed3371080f.svg);
}
.flag-icon-nf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nf-d5796360eec6a3cc7be28f73b5bfe36595d4f446a98cc45a8c6b8aa408ae7511.svg);
}
.flag-icon-nf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nf-c12d318807492c9d5b62270288c50b151dacb2f0ad2f9662a5679ccdb34fbed5.svg);
}
.flag-icon-ng {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ng-f3315582a935d53e17e63b73b0b22ab3956c1cb1f46b40132b9465f880a177bd.svg);
}
.flag-icon-ng.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ng-d6f24926737fdf25b2b6713f6e124ffbfa2740347405d14ded337e19df29bb9c.svg);
}
.flag-icon-ni {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ni-3cb72bb50e3739bbfb6d56c77492d48937b4a289be91d8c1e1fa9243ff964032.svg);
}
.flag-icon-ni.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ni-4cab3b688b3c86d7e395024177f2e3465bfac375ae8882465a31453feb2903c4.svg);
}
.flag-icon-nl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nl-941fa558fe4da244f0a436259256491a386adeb9b1ff6dea7fe75fad0da816ca.svg);
}
.flag-icon-nl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nl-850d9f8a8ae6dbfd062e827a28b7bf695e4861a245de53362dfb164fdadeee06.svg);
}
.flag-icon-no {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/no-07689f1a166992f88b5cfa27cec80383f1a69843f8af594060ce1fa8eafde5d7.svg);
}
.flag-icon-no.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/no-1ebad59600989c1b5e1b9cd3684922800b58733f3e15788d8bc95998b42de598.svg);
}
.flag-icon-np {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/np-7a0ab4b2e5e4a4091aca463bdbc47a333f175b1b20631e6866e17c908cb19e1a.svg);
}
.flag-icon-np.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/np-d8bacd012e056050c7d7dbb355fbe2a47cde8d334ef79d9205b5cbbfaa824cfa.svg);
}
.flag-icon-nr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nr-1980fe506f9bd2ea501d73dbc167cf5990cb859bad3cdffde742b8fcfb67893a.svg);
}
.flag-icon-nr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nr-b50d99c56ca2f552d6d71ba7dd4a7bf15c26bf791d1412d9dc4ee0a9d5b062dd.svg);
}
.flag-icon-nu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nu-03020c69b22f0e94e433c4255428992725a504ccd97d0570dcd1172b9ef56100.svg);
}
.flag-icon-nu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nu-18ace2742eed2f24836ff21b61cddf4f889d703502512455f92fd59e2cf23091.svg);
}
.flag-icon-nz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/nz-2fad93e4cbf0532a423aa59a31a3d8911a1ea9a4d89c9d958003f83e9ca261c6.svg);
}
.flag-icon-nz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/nz-ad0ecc588c53f1962c1c07f50d665cc60954a70093c4e613dd7dd4b66b8c15d4.svg);
}
.flag-icon-om {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/om-fe36fcd0a948e77aa44223f71f90a0f3dc2e0b9014cbef6b78cf34f984b6aaec.svg);
}
.flag-icon-om.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/om-d1292cd4e2ed397ff8cbcc01c8a1c5030bbafea49eba5554c3eea14806833b5f.svg);
}
.flag-icon-pa {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pa-caa5358bc3c0daeed3706ecb9d92bf1f16d732c0202f95c939d9cfe85421c137.svg);
}
.flag-icon-pa.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pa-59ccc089afaafe4361ab55ab583d3e782539cc1d9cfa09c428103cdf7dc26d7c.svg);
}
.flag-icon-pe {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pe-bfecf391d2b547c7003e3f29e04a370f8ddae8d101c1aae40a18918b2dc26870.svg);
}
.flag-icon-pe.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pe-0a620e2bc02fc78bdfeb318b2bfcf56ba92083a55b3c92b91989cb69137bee34.svg);
}
.flag-icon-pf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pf-ecf29abfeefdcae59c093e6d89c75e8a3f0042d9d6a2f97709e401e407540a7c.svg);
}
.flag-icon-pf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pf-158893989615f051026af61ee660b64970da4291901d6faeb299ce255b842e54.svg);
}
.flag-icon-pg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pg-83564462ef90b4c86297721af50dec6c97fee3a3bbf7fe13ce5088d3094e50b0.svg);
}
.flag-icon-pg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pg-05e7225495a7bb10c96c9e0f100e799a0b6a7464b011f604479c83b83aea0aa7.svg);
}
.flag-icon-ph {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ph-3e475c289542f2f3df1caa482cd11c4e42c3d8fbf041e08248332d922add7d3d.svg);
}
.flag-icon-ph.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ph-4e861a6a4428086313ff080b36263a671dc38b420deca7c2aa32d3482fc03959.svg);
}
.flag-icon-pk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pk-3d2982805f5a2fb16cb580207912761cca074d66b5bf7bdc139c1d0ef2da21bd.svg);
}
.flag-icon-pk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pk-75bb29dff063b5110e888ef9b650df2f0a996cd06122accf962837abe528250e.svg);
}
.flag-icon-pl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pl-21be74bf1966776cb66de6efe869ca4e5438543432e060e9912d908ea1c37b3f.svg);
}
.flag-icon-pl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pl-aa418630f0fea00c5817290eb75fb39f201bec3c167540bdd91fcd41cfa5f4a2.svg);
}
.flag-icon-pm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pm-0dc8619fcc958a06ffcba075ccab30824af3b9fd2d2514b95922c613597243f2.svg);
}
.flag-icon-pm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pm-eb482212153b49a40b54aa1b25636f12d9caf6a7eb7be950bcf34da7c2a45f88.svg);
}
.flag-icon-pn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pn-98907b42c8cad1161bab493cddd97623aeca1e3964b36ead427341f092afb75b.svg);
}
.flag-icon-pn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pn-6360c77fd53fae184a117c5b5b79b21d38114851a8b2ed9ffaef266c7567bfa0.svg);
}
.flag-icon-pr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pr-42fab178d914d288e2b7d1e55fa6e9f28850dd042fd41ea6c27b011ef508ca87.svg);
}
.flag-icon-pr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pr-b0602ffae918998b39f24e69695fa5d2945abc63f01f6cb57e1f4d10b64efdcd.svg);
}
.flag-icon-ps {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ps-7077c9bd548e4a5c18ed2fc66aaa9de882c389eb2e97f4aaf2adad896fae9be0.svg);
}
.flag-icon-ps.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ps-df6f1b934099d54f1f9b0f0b5fbdee87aa407143231070eba117002507c29356.svg);
}
.flag-icon-pt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pt-f2732c472e9b5736449f3e1f38dac664d6312b7e70763c5e005bb5282bf197f5.svg);
}
.flag-icon-pt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pt-05fdc0c89b2aefd9e189a2424f66f1afa5230575d8de9d8d516cf55decb89685.svg);
}
.flag-icon-pw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/pw-1af7482da5eacf1f97d770456a200ebf57000581c1ded0e7af408b4c5f110fde.svg);
}
.flag-icon-pw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/pw-3696a3d9981254613211380b4fe58830d7748a271400a3ecec9eeb1f93185439.svg);
}
.flag-icon-py {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/py-8bd27eea3f5e92f6e22dc7fb5c29595f1a33d8bb83fa62ce5fc5dd9cbdde4a3b.svg);
}
.flag-icon-py.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/py-f236faf1f20b32e073cf71b4874971abe7602219dc1594ed8f1d568d2552402e.svg);
}
.flag-icon-qa {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/qa-5142262d35965bc05c69e04983f7f4c2c59792700765dcc9c9d5f918053ad0a5.svg);
}
.flag-icon-qa.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/qa-72d24297cce45e8a52d8786af29b653ae848ed9df290a9328c0b4a1524c30132.svg);
}
.flag-icon-re {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/re-c862317ba6f3ade6148fd471836ac2284586f474f2596c1db270c2f8672d0baa.svg);
}
.flag-icon-re.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/re-2ccdee142f987252f493cc5fb59d3c3613b96489eb8da744ca95f92e6ac38b03.svg);
}
.flag-icon-ro {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ro-9f0163db07aa185efd8a9b88f38483d5518aebe272de1597a225d78a290eec57.svg);
}
.flag-icon-ro.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ro-28bef44c6bcd6d260f3e62371580ea891d5ce677dae70a7dc68364a53f3e7912.svg);
}
.flag-icon-rs {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/rs-34a6e8fd4a531593f8239ceb39199f2277eec03ce7771b0214f22445062242ac.svg);
}
.flag-icon-rs.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/rs-e8b20d2cff3fdf3e56eae77bc3a78195cffbb8ff3db00028731f5ed33afd2e13.svg);
}
.flag-icon-ru {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ru-5327fbbd39586e98c3cc278e432e1036fcbbef3134d8c4a74fa64f7816ee5c44.svg);
}
.flag-icon-ru.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ru-827fcf04d6c0ec271ddb0ae3196012890de6c059e37608d8f073af8ebbd94f27.svg);
}
.flag-icon-rw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/rw-ffcc0a88fc464eebc9233e029bce49175dec11b24bfd874ad3b3e3f465bedd2b.svg);
}
.flag-icon-rw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/rw-e2e578d197dcb7cfaf2b263bc669bb7b97ae12e2fb32de596550d8fd4e792ffe.svg);
}
.flag-icon-sa {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sa-6d4c9b029dc5a347261bc28fd8ca6ab38c915d6568a57543fc263d340162c45a.svg);
}
.flag-icon-sa.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sa-3ef933c3fa496631b48e69bc0e4fb49c24372c65e6e979a182abab96e3fd72f4.svg);
}
.flag-icon-sb {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sb-3d96f7a34e49216f4f3abd2ec63e66aedd0117aa75f6d131eb4d1641899fc7ed.svg);
}
.flag-icon-sb.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sb-316588a18e2847a5449f5d5c84e9f15cf97210ca7a412ff6b999762ae432a83a.svg);
}
.flag-icon-sc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sc-8ea34f187d6820530ed7013b80d13a7c0c3d76a74e1556a7bec6703daf6b04ed.svg);
}
.flag-icon-sc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sc-68cf87ba23e7e19c77b7e45887e34a840cd13e4cda3d5ddc100f97a9274641fe.svg);
}
.flag-icon-sd {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sd-02ff3915df9edb344868b1fb3e51c047abc8fa63a95832fc7bd6ab6c5af6d091.svg);
}
.flag-icon-sd.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sd-2eda7413d09112684cf59267ee678d0da2d0bd7e44fb9d443c29d6e64b21d96d.svg);
}
.flag-icon-se {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/se-47606fc8cd5be8929c14a8096dda31f69abfd7159c5a99b1be09bf75f8ffe3d1.svg);
}
.flag-icon-se.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/se-388cef96ae61e124b37c13980005652e26b027b95b9540359abff804dfbebc8a.svg);
}
.flag-icon-sg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sg-dfca78c1bd5c234435688b5473de44b4836ba7948cf6da78662a5852c06e5c71.svg);
}
.flag-icon-sg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sg-f5a215d34bccdf7715ce5b20b6ecf4b5df755c39210e067232c56c0ac7b9332b.svg);
}
.flag-icon-sh {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sh-e376d26415c7b7bc6fbd295a099f5b7a5af9b78d71fbaafc121ae6e2cee89c14.svg);
}
.flag-icon-sh.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sh-3534e58fbbb29a7c8199cfc85a032e6d4a8ca5904a4fa37c4f36836642e2d388.svg);
}
.flag-icon-si {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/si-61a34c0e20eaa74e6e7c7efe5447dce70a379c6f235ee86b9e1ca8bc90b1307b.svg);
}
.flag-icon-si.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/si-5f65dd5ac8e71993ae0adeac130694d7d317da8876cd26d33611cbdd93fc5ab1.svg);
}
.flag-icon-sj {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sj-4b6fcc01d0e414c92ac17115172a528d38941ca7f079d6ed56af395306687163.svg);
}
.flag-icon-sj.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sj-c035c4b035db579c9d7498a8636e24905d7b725078ee4fa4bd8790e94064a67b.svg);
}
.flag-icon-sk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sk-7164cf3287548286a29071d98f7538a30812067c7c0461a26bb2f520bad05063.svg);
}
.flag-icon-sk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sk-1a1bf5856e0c37e8e8a7ed9ca8fc880800e2197e47de680ea4d5a9dd708dd4ae.svg);
}
.flag-icon-sl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sl-84e4b69e5c8ab67ce0756b65f4c7845eef87b67f88f12adb06be44026f4295f1.svg);
}
.flag-icon-sl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sl-21f621a265a73077f8f782a55bec986a5ce5096570e3da166bde5d6f2efce4f1.svg);
}
.flag-icon-sm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sm-cd48cdcf3b6feb323fe9cac43088862a35460d3b6d73918f48d9cc4d0573c3f0.svg);
}
.flag-icon-sm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sm-19dc59538b0ce815ceb07916f932c3377b3550ad61005cffd96b050f1ebf1a19.svg);
}
.flag-icon-sn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sn-b129333f83ec64205ab85f774e1581d24b2e2253878f7a3f061caebeb4c11619.svg);
}
.flag-icon-sn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sn-22b577701aeeacf60b204d8f4ec8949bbf8b813ad5fd2ca25e274efeca499ed2.svg);
}
.flag-icon-so {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/so-adca6c1bc65b774a5b9d550633068d524c0e69046354c883c5d27d53c439c7d4.svg);
}
.flag-icon-so.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/so-9d7f964d2d331eeb5b5d8bbafe5c830d85b13208d14da0eedfb0cd7364cae6b2.svg);
}
.flag-icon-sr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sr-686dd7a5a96300339f37e493897471cd515dd58ed8bc3c4dfdb393f3d42109dd.svg);
}
.flag-icon-sr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sr-679e7448377834d6653eec4a5eca151543ae3a6f010381c449bd5888c6b8a497.svg);
}
.flag-icon-ss {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ss-e5549ef9ed1af66b3704e10bbd3dd6ba1a6f0f68dbe820d2cde16ae405d2b2f4.svg);
}
.flag-icon-ss.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ss-337e6f000731ca167656ac1f07039fbcdf1dc5366fad6c2e7cca3b09add17095.svg);
}
.flag-icon-st {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/st-6fdfa281e0f8a025d7dadac41f1b510639bb8c246bddef0d81a2f597fef8be2d.svg);
}
.flag-icon-st.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/st-31451e1c3b17f2591fea0c2d2d846e5f968ae51ef7f29ef8a96dceab454dba16.svg);
}
.flag-icon-sv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sv-63c838697a7dd4efb466b9f940544b2e21b88214d4bc25344969cd1c892ea46f.svg);
}
.flag-icon-sv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sv-0152d9fa470ce96a36cc69235a8d1bbc64f06c07cb49ee8b9991c5661fd804f8.svg);
}
.flag-icon-sx {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sx-966546fc29ce10b4a4a3d890f5a91b7877a0517facb8c1d1c1a9171730c6bea5.svg);
}
.flag-icon-sx.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sx-00e2ad295e2539efe545c36f7b24fae587b4f9d492587d8d20f91471df0921df.svg);
}
.flag-icon-sy {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sy-f67fa2ec67fec4793313fdda9c1322fb1d993980329902db0bc382531ad1b4fd.svg);
}
.flag-icon-sy.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sy-492239f04dfda80ccc22bd5a6eb11bdad116a0d95ddc47e56224b4501756207f.svg);
}
.flag-icon-sz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/sz-e71771d086fe0a30fc402eeca2bc6ac7abb3062c54269a98c5a19975dcf0a571.svg);
}
.flag-icon-sz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/sz-222ad8351327c35a4fc7ee61b6abfa96d01c02563bde485e35ac864f15e92a10.svg);
}
.flag-icon-tc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tc-74998ce823df266228fa3361205f336061d4d8c438d66901ed674c376f6db133.svg);
}
.flag-icon-tc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tc-6483f1f3ae5cf889283e33b9e4fe040fd3c66e0eaeb64c05bb96c36ba35e7161.svg);
}
.flag-icon-td {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/td-eb91cac4902a83401a74c1aefe38e04e77abb92a28da295d2f431cbb644f1c8a.svg);
}
.flag-icon-td.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/td-c82d609e1627f88a5457fe7e50930bfb8ec0bed7269b522dd83b6ccc966e9af6.svg);
}
.flag-icon-tf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tf-c53c7b4d911b468629b6b64e17c882fdecb9061601ce2448646b8ba72c2b81f5.svg);
}
.flag-icon-tf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tf-9aeb68ce65de5931ddc45f4257a7826ec8e805225c9770b84f264604299e006d.svg);
}
.flag-icon-tg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tg-f1b91ee693c002159210f9fb602e852877e63a39b02ddb4260ecccb0a2b06ca9.svg);
}
.flag-icon-tg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tg-6eb5267d40149c0260e63298b13cf1bb33db81b73dd9c615199b131a76e57a27.svg);
}
.flag-icon-th {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/th-4a1d5732f33b7154e2d4c0d1128976a4a4aa43b46183ce204343d258d6de45f7.svg);
}
.flag-icon-th.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/th-69a013195904e6bc32d50fa5dd28b8abeb1401b85180aaa83e808e5d259737b2.svg);
}
.flag-icon-tj {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tj-df2d72f69689aa5439c85b63311ed0c427356eeb5ec9878732829d1fe6216827.svg);
}
.flag-icon-tj.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tj-67ed81c4d023f9fbd70249ac554c7982a03e1220d4e7232ae521443e1c5feb35.svg);
}
.flag-icon-tk {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tk-169810374f2e086e7622228d9732905fba9aa30eac6091e2a0c580ffe63313bc.svg);
}
.flag-icon-tk.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tk-4753c54b247e24eb5d3a86bcac2ba65a56aa46533f433e40536f775b1a764258.svg);
}
.flag-icon-tl {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tl-ea8e5c662ba9a6f0796b645e15d8b50ce6050f5f0fbb301f53a5c6c2d169dfed.svg);
}
.flag-icon-tl.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tl-b5a7fc9f28a50d89d142c670f5e1a4fa11bcf86668e38bb161872960c055fe11.svg);
}
.flag-icon-tm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tm-483d66afa25d2d9ac626c9d41078c16de5e7026aa11a42f39af52b6b062bfa33.svg);
}
.flag-icon-tm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tm-270df91f4b8260e19e8ad5540176c9cb95f6c639d341688c60ee5a7c801f74e1.svg);
}
.flag-icon-tn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tn-1d388289d8ea19455d2831839356b580cb72ade346ad246e97e61cc5617f6d2f.svg);
}
.flag-icon-tn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tn-ca500d9eba2c22e3a8ec6375d6ccabaa9c5b0b44e8b93277a4f40de482d60613.svg);
}
.flag-icon-to {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/to-08c52ecfb3119ceab755c9903edb6529c28b7f5a6d7d04d260ea43c98fac87ed.svg);
}
.flag-icon-to.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/to-528d194d6672f0b5d9a04408afeabc213db5003024d7a4764b1da428b903e302.svg);
}
.flag-icon-tr {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tr-7d258b1b25c9d9dccc87389671e3d6e8b58da70879ea87ff7b923e065b92f051.svg);
}
.flag-icon-tr.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tr-b7d09a431a357efe0a54d504b2b9b56020df6067fffcaa5291081609222fda58.svg);
}
.flag-icon-tt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tt-ff798073b2c095c01c781ac7ed627746273afca9ac830cdc06381d7ee59b0fee.svg);
}
.flag-icon-tt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tt-aef37f4d7d8be25853a6cc736c3814f2ede03b69ac2f6232d9fa4f62d8a6e88a.svg);
}
.flag-icon-tv {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tv-3da240739a32a0cb37fd42605647e27db60d6ef1421024d00bd6489478464a8a.svg);
}
.flag-icon-tv.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tv-476b36ba037c3c478e9e76a8e55e07f72e3f4b4a474d760a60905d07f377f4ee.svg);
}
.flag-icon-tw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tw-54d0d31bd1fefa88ef88f1a27c288f4b2ad04635c6170e9d6c3cfe1713e60927.svg);
}
.flag-icon-tw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tw-b738d1cd2d0bab87f0f4cde64925a9a155219058fcf2f673dda9c38d6ade159f.svg);
}
.flag-icon-tz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/tz-0e31d6b57ee9e737ee46ddad5910bb21a5075070a13b8769340bedc6db006cfd.svg);
}
.flag-icon-tz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/tz-814cc750690de8baff304353b1ed362f896d4828a9deb400b74481da92e25de7.svg);
}
.flag-icon-ua {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ua-327ef6512b05bd74007ce0508aa2695434ec8ffaeddcc9a159a01a98a1217f50.svg);
}
.flag-icon-ua.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ua-d3c75504a7ab9bfd893f1ebf5e9ccbeeafa5e138f119e47ccedfc0a920b8eb8b.svg);
}
.flag-icon-ug {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ug-5e6e8ead933650c4875707a0edc23d74c04174ace0dba9de89de69bac3ac3d1d.svg);
}
.flag-icon-ug.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ug-003184d309ea94f66817a6d92268808d934ff38a6ae651eed7ade37256d64790.svg);
}
.flag-icon-um {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/um-620c38d2b599580b5bd544af8c1134a017b36235e6f4d18a9905f07e289fc026.svg);
}
.flag-icon-um.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/um-3bb30f0ac46ff2b2abbf6bd3bfa2478331e90ce2bfcbf4e13d4188c95184035f.svg);
}
.flag-icon-us {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/us-9208dea5f68ff52f9fc7da0ea4a6ba99d92e805e4786106d45bb7c06fe606515.svg);
}
.flag-icon-us.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/us-b85833d453b028da218520f4f9d0ec0253f79e2ee52b0f00f95134bdf4ef1424.svg);
}
.flag-icon-uy {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/uy-f9f5b419226cc7d77a6d197a27e21abe906e4e8858ba1c80c2c66cef0e5e99b3.svg);
}
.flag-icon-uy.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/uy-248adea7f57f8589a9f2a035ebba1e6705f3e700078485bfaa85bc2833d2cb31.svg);
}
.flag-icon-uz {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/uz-93ffa6a4fccaca891101adfb9374e16722c35989e3da565484cb0d11d19ddfe2.svg);
}
.flag-icon-uz.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/uz-31b1cc1776096eefd945f460dabd42be9e808843782024b905451008055bf936.svg);
}
.flag-icon-va {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/va-aee8a3f8c0594fe31f8ca504cae0676935acf8c4997b091b7b421600b2e647ff.svg);
}
.flag-icon-va.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/va-3241d6fcaa6834081f2f8d051e9b88a214a5945b01b0e5115fd3ced40664f1ff.svg);
}
.flag-icon-vc {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/vc-beb5c686a950228dd2cffd86a5ea6d2798d60804620d8ba6eb61897461ded4cc.svg);
}
.flag-icon-vc.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/vc-ed0363376abd2a1a5e66b517349545484e9638f739469f073fc50be156adffe9.svg);
}
.flag-icon-ve {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ve-6a258edc7e41826a67f433c51ad6c531d5fd33ad9c9c1c765f9c34bd071687a2.svg);
}
.flag-icon-ve.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ve-27ebcbdb6dc6a012e3d2575a7346de5b34227a69077b546897dd0314082a189c.svg);
}
.flag-icon-vg {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/vg-5d566e90ce35a200e85cb4d23a17d6382fccc7bade24c66028636deb79005184.svg);
}
.flag-icon-vg.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/vg-e1848cd5af43dbcf62e63ab21d0506de3aa7e0380efd24dbca6a367118f53844.svg);
}
.flag-icon-vi {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/vi-5d566e90ce35a200e85cb4d23a17d6382fccc7bade24c66028636deb79005184.svg);
}
.flag-icon-vi.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/vi-e1848cd5af43dbcf62e63ab21d0506de3aa7e0380efd24dbca6a367118f53844.svg);
}
.flag-icon-vn {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/vn-9f0a3be8ecd8dc4425f159824b1f92bc5f00ae6904a84ba3ceaacfb7df3dfe19.svg);
}
.flag-icon-vn.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/vn-185a0beab7a63470ebc24729069c507ec361881636687199f6054651f91ac9e0.svg);
}
.flag-icon-vu {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/vu-e928fe1a50e336c877101f214f12e4733dc6a7da3c2bc42094e12f0e82f9db4f.svg);
}
.flag-icon-vu.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/vu-1463994d60be9dfb410a48d318a9973a32c23e3167d5c4344235629c60cdf61a.svg);
}
.flag-icon-wf {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/wf-925d86dfc5b62171b15309b08f208d4479d063a79522e5a8aa8e56a645cc930f.svg);
}
.flag-icon-wf.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/wf-f4e07e9131741b7af41190052cd6faa50771174878921df2d37890260f0830a0.svg);
}
.flag-icon-ws {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ws-7594ac625ed88cbbe12049e781000d984bf64347978abf629b01f5a115caf5a7.svg);
}
.flag-icon-ws.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ws-dc89ddb74c70fecb9d786328a63da753d91e459ae170e2cec09165b62628f115.svg);
}
.flag-icon-ye {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/ye-284e6ac5df5bb4afcd743c209cfc0c428846f341d77335ebcd1d113eef03ac0f.svg);
}
.flag-icon-ye.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/ye-f1cf4cbf13349f83d8049c43b567c76a91077374367fc0c52c9bc4093991bef5.svg);
}
.flag-icon-yt {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/yt-c6b55971672f11dd40985b769566e3aeb50b5d2474b11dc5c311150f4703043f.svg);
}
.flag-icon-yt.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/yt-0bfe6917f2ccad3f9db479d22a1bf3ac5810bf6227f1e73a43b18657a1bee9ab.svg);
}
.flag-icon-za {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/za-602e8162fa354a92348119c39c789a4385d6167dcc50df4b011114baf8c025c0.svg);
}
.flag-icon-za.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/za-c0d1878fa1c87a4b98271dae5bb0bf86e1f19c13e3d562aedb0e964908e1fa6b.svg);
}
.flag-icon-zm {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/zm-d63e0ebfaac79f8bb0e9bb22e179c00ed3f1342b928ddc4297eb407fe29997e5.svg);
}
.flag-icon-zm.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/zm-1ab691fcd9dab6df014641f4d1a2125e01a5c0f2631735eb671843fda6ecccda.svg);
}
.flag-icon-zw {
background-image: url(https://sprout.bonsai.io/assets/flags/4x3/zw-489e27f9756e6c1681d07f48ee9f6c4c5844c4abc397a68e88391a21f2d162d0.svg);
}
.flag-icon-zw.flag-icon-squared {
background-image: url(https://sprout.bonsai.io/assets/flags/1x1/zw-1fdc07dacf5316b9b686d795b3eee4cdc76055bcbb3f762f8aa71e45ce546975.svg);
}
/*!
* TOAST UI Chart 4th Edition
* @version 4.6.1 | Wed Dec 21 2022
* @author NHN Cloud. FE Development Lab
* @license MIT
*/.toastui-chart-wrapper{height:100%;position:relative;width:100%}.toastui-chart-export-menu{background:#fff;box-sizing:border-box;font-family:Arial,sans-serif;left:0;position:absolute;top:0;user-select:none}.toastui-chart-export-menu-title{box-sizing:inherit;height:34px;margin:0;padding:10px;width:140px}.toastui-chart-export-menu-btn-wrapper{height:76px;width:100%}.toastui-chart-export-menu-btn{background:transparent;border:none;color:inherit;cursor:pointer;float:left;font-family:inherit;height:50%;padding:12px 3px;width:50%}.toastui-chart-export-menu-btn:hover{font-weight:700}.toastui-chart-export-menu-btn:nth-child(3){border-bottom-left-radius:inherit}.toastui-chart-export-menu-btn:nth-child(4){border-bottom-right-radius:inherit}.toastui-chart-tooltip-container{left:0;pointer-events:none;position:absolute;top:0;user-select:none}.toastui-chart-tooltip{box-sizing:border-box;display:flex;flex-direction:column;min-width:150px}.toastui-chart-tooltip-category{border-bottom:1px solid rgba(0,0,0,.1);padding:8px 15px}.toastui-chart-tooltip-series-wrapper{display:flex;flex-direction:column;padding:13px 15px}.toastui-chart-tooltip-series{display:flex;justify-content:space-between;width:100%}.toastui-chart-series-name{align-items:center;display:flex;line-height:10px}.toastui-chart-series-name .toastui-chart-icon,.toastui-chart-tooltip-series .toastui-chart-icon{display:inline-block;height:10px;margin-right:8px;width:10px}.toastui-chart-series-name .toastui-chart-name{white-space:nowrap}.toastui-chart-series-value{margin-left:10px;white-space:nowrap}.toastui-chart-tooltip-series-wrapper .toastui-chart-tooltip-title{padding:8px 0 5px}.toastui-chart-tooltip-series-wrapper .toastui-chart-tooltip-title:first-child{padding-top:0}
/* Future work: set up custom inversions for color choices on cards, boxes, popovers, etc */
.invert table,
table.invert,
.display\:table.invert {
--table-border-color: var(--color-black);
--table-marker-color: var(--color-info);
--table-border-size: var(--border-thin);
--table-background-color: black;
--table-padding: var(--s-1);
--table-header-background-color: #f8fafc;
--table-width: 100%;
--font-color: var(--color-lightish);
}
.invert box-l,
box-l.invert {
--background: var(--color-black);
color: var(--color-lightish);
}
.invert .label {
--label-background: var(--invert-background);
--label-color: var(--invert-color);
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
max-width: 100%;
padding: 0 var(--s0);
}
/* container below the secondary nav - align the title with the account name in the top nav */
.sub-container {
max-width: 100%;
padding: 0 var(--s4);
}
/* The only rule about logo sizing so far */
.logo {
width: 6ch;
}
/* Visual Content Separators */
.vault {
border: var(--border-thick) solid var(--color-grey);
padding: var(--s0)
}
.well,
.space {
padding: var(--s0);
background-color: var(--color-light);
border-radius: var(--border-radius);
}
/* .vault-nested {} */
.vault-nested .space {
margin-left: calc(-2 * var(--s0));
padding-left: calc(2 * var(--s0));
margin-right: calc(-2 * var(--s0));
padding-right: calc(2 * var(--s0));
}
.vault-nested .space .pod {
margin-left: calc(-1 * var(--s0));
margin-right: calc(-1 * var(--s0));
}
/* Display Rules */
.desktop-hide {
display: none !important;
}
@media screen and (max-width: 425px) {
.mobile-hide {
display: none !important;
}
.desktop-hide {
display: revert !important;
}
/* container below the secondary nav */
.sub-container {
padding: 0 var(--s0);
}
}
.flash-wrapper {
position: fixed;
top: var(--s0);
right: var(--s0);
z-index: var(--z2);
}
.flash-container {
width: 100%;
right: 0;
}
.white-space\:pre {
white-space: pre;
}