* { box-sizing: border-box; }


:root {

    --theme-border: light-dark(#893e3e,#893e3e);
    --theme-text: light-dark(#a35050,#a35050);
    --theme-background: light-dark(#f7d4d4,#f7d4d4);
    --theme-pri: #893e3e;
    --theme-sec: #593737;
    --theme-dialogview-bg: linear-gradient(0deg, #593737 0%, #893e3e 190%);
  
    /* color-scheme: light dark; */
    --pri-background: light-dark(#fff, #050505);
    --sec-background: light-dark(#fafafa, #111);
    --ter-background: light-dark(#f1f2f4, #0e0e0e);
    --qua-background: light-dark(#e8e8e8, #383838);
    --input-background: light-dark(#f5f5f5, #111);
    --input-background-hover: light-dark(#f0f0f0, #181818);
    --inactive-background: light-dark(#f5f5f5, #111);
    
    --pri-label: light-dark(#222,#ccc);
    --sec-label: light-dark(#444, #aaa);
    --ter-label: light-dark(#666,#888);
    --inactive-label: light-dark(#888, #666);

    --pri-border: light-dark(#ddd, #666);
    --sec-border: light-dark(#ccc, #333);

    --error-background: light-dark(#ffffcc,#22221c);
    --error-input-background: light-dark(#f9f0f0,#2b1717);
	--error-input-border: light-dark(#e64040,#e64040);
	--error-label: light-dark(#d12828,#e64040);

    --danger: #e64040;
    --danger-hover: #a63030;
    --green: #7FC97F; 
    --green2: #238b45;
    --green-hover: rgb(91, 145, 91);
    --notification: #E5624F; 



    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.2;
    font-family: var(--main-font);

    --arrow-svg: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');

}


html {
    margin: 0;
    padding: 0;
    background-color: var(--pri-background);
}

body {
    font-weight: 400;
    color: var(--pri-label);
    margin: 0;
}

table {
  border: none;
  outline: none;
}

th {
  font-weight: normal;
  border: none;
  outline: none;
}

td {
  border: none;
  outline: none;
}

a {
  text-decoration: none;
}


/*
Form component styles
*/
button:not(.f4select):not(.unstyled), input[type=submit], .link-button {
    /*display: block;*/
    text-align: center;
    cursor: pointer;
    border: none;
    height: 40px;
    padding: 0 20px;
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    font-size: 14px;
    line-height: 36px;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    background: var(--ter-background);
    color: var(--pri-label);
    appearance: none;
}

button.unstyled {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
}
button.unstyled:focus-visible {
    outline: 2px solid var(--theme-pri);
    outline-offset: 2px;
}

button.primary, input[type=submit].primary {
    background: var(--pri-action, #1976d2);
    color: #fff;
}
button.primary:hover, button.primary:focus,
input[type=submit].primary:hover, input[type=submit].primary:focus {
    background: var(--pri-action-hover, #1565c0);
    color: #fff;
}

.link-button {
    padding-top: 3px;
    line-height: 35.5px;
}

button:hover:not(.f4select):not(.unstyled), input[type=submit]:hover, .link-button:hover,
button:focus:not(.f4select):not(.unstyled), input[type=submit]:focus, .link-button:focus {
  background: #e6e6e6;
  color: var(--pri-label);
}
button:active:not(.f4select):not(.unstyled), input[type=submit]:active, .link-button:active {
    box-shadow: none;
}
button:disabled:not(.f4select):not(.unstyled), input[type=submit]:disabled, .link-button:disabled {
    background: #fefefe;
    color: #bbbbbb;
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    /* line-height: 36px; */
}

input[type="text"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="file"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
textarea,
input[type="password"],
.input,
.f4select {
    font-size: 14px;
    line-height: 18px;
    min-height: 32px;
    height: auto;
    padding: 6px 9px;
    border-radius: 2px;
    border: 1px solid var(--sec-border);
	background-color: var(--input-background);
    font-family: var(--main-font);
    /* font-weight: 100; */
	appearance: none;
	outline: none;
    margin: 0;
}
.f4select {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    min-height: 32px;
}
.f4select.multi {
    padding: 3px 3.5px;
}
.f4select.multi div {
    float: left;
    background-color: var(--pri-background);
    padding: 1.5px 5px;
    margin: 1px 3px 1px 0px;
    border-radius: 2px;
    display: flex;
    gap: 6px;
    align-items: center;
    border: 0.5px solid #868686;
}
.f4select.multi div:hover {
    background-color: var(--theme-pri);
    color: white;
 }
.f4select.multi div span {
    cursor: pointer;
}

select {
	padding: 6px 9px 6px 9px;
	min-height: 32px;
	background-color: var(--input-background);
    color: var(--pri-label);
    border: 1px solid var(--sec-border);
	border-radius: 2px;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* cursor: pointer; */
	outline: none;
    font-size: 14px;
    line-height: 16px;
    margin-left: 0px;

    font-family: var(--main-font);
    font-weight: 100;

    padding-right: 26px;
    background-image: var(--arrow-svg);
    background-repeat: no-repeat;
    background-position: right .64em top 50.65% !important;
    background-size: .57em auto;
}

.drop-arrow {
    padding-right: 26px !important;
    position: relative;
}
/* .drop-arrow::after {
    font-family: 'Material Symbols Rounded';
    content: "arrow_drop_down";
    position: absolute;
    right: 2px;
    font-size: 22px;
} */

.drop-arrow::before {
    color: inherit;
    content: "";
    background-color: currentColor;
    mask-position: center;
    mask-size: 9px;
    mask-image: var(--arrow-svg) !important;
    mask-repeat: no-repeat;
    position: absolute;
    right: 9px;
    width: 10px;
    top: 0;
    bottom: 0;
} 
/*
.drop-arrow-white,.drop-arrow.selected {
    padding-right: 26px !important;
    background-image: var(--arrow-svg) !important;
    background-repeat: no-repeat !important;
    background-position: right .64em top 50.65% !important;
    background-size: .57em auto !important;
} */


select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #444444;
}

select option {
    padding: 2px 0px;
}

input[type=radio]:focus {
    box-shadow: none;
}

input:focus, textarea:focus, select:focus, button:focus, .link-button:focus, .f4select:focus, .fakefocus {
    box-shadow: 0 0 5px rgba(71, 157, 195, 1);
	outline: none;
}
input:user-invalid, textarea:user-invalid, select:user-invalid, button:user-invalid, .link-button:user-invalid, .f4select:user-invalid {
    box-shadow: 0 0 5px rgb(195, 71, 71);
	outline: none;
}

input[type='text'].inherit {
    font-size: inherit;
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-weight: inherit;
    height: inherit;
    appearance: none;
}

input[type="text"].secret {
    color: transparent;
    text-shadow: 0 0 7px rgba(0,0,0,0.5);
    transition-property: text-shadow,color;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

input[type="text"].secret:focus {
    color: black;
    text-shadow: none;
}
/* 
input[type="color"] {
    height: 26px;
    padding: 0;
    margin: 0px;
    outline: none;
    appearance: none;
    border-radius: 2px;
    border: 0;
} */

.checkbox-group { display: flex; gap: 4px; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: 3px; font-weight: normal; cursor: pointer; }

.segmented-button-set {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #bbb;
    gap: 1px;
    background-color: #bbb;
    padding: 0px;
}
.segmented-button-set button {
    border-radius: 0;
    margin: 0px;
    border: 1px solid transparent !important;
    height: 38px;
}