/* Base HTML styles */

/* region Root variables */
:root {
    --unil-main-color: #0078BD;
    --unil-main-color-100: #E6F4FA;
    --unil-main-color-200: #CDEBF8;
    --unil-main-color-300: #B3DDEF;
    --unil-main-color-400: #058CDA;
    --unil-main-color-500: #0078BD;
    --unil-main-color-600: #0066A0;

    --unil-positive-color: #119466;
    --unil-positive-color-100: #D7E9E2;
    --unil-positive-color-200: #BFE1D4;
    --unil-positive-color-400: #1AA373;
    --unil-positive-color-500: #119466;
    --unil-positive-color-600: #008556;

    --unil-warning-color: #F8B929;
    --unil-warning-color-100: #FEF1D4;
    --unil-warning-color-200: #EBD7AC;
    --unil-warning-color-500: #F8B929;
    --unil-warning-color-600: #EDA314;
    --unil-warning-color-700: #EA9210;
    --unil-warning-color-900: #B95900;

    --unil-negative-color: #E2464F;
    --unil-negative-color-100: #F6D7D8;
    --unil-negative-color-200: #F6C4C6;
    --unil-negative-color-500: #E2464F;
    --unil-negative-color-600: #D3353E;
    --unil-negative-color-700: #BE2830;

    --unil-gray-color: #0A1F30;
    --unil-gray-color-100: #EFF3F6;
    --unil-gray-color-200: #E2E9EE;
    --unil-gray-color-300: #D4DDE4;
    --unil-gray-color-600: #9DA8B1;
    --unil-gray-color-700: #72808B;
    --unil-gray-color-800: #3D4D5B;
    --unil-gray-color-900: #0A1F30;

    --unil-font-family: UnilSans, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --unil-font-size: 16px;
}

/* endregion */

/* region Custom fonts */
@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Thin.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Thin.woff') format('woff'), url('/fonts/UnilSansBETAv1-Thin.eot') format('embedded-opentype');
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-ThinItalic.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-ThinItalic.woff') format('woff'), url('/fonts/UnilSansBETAv1-ThinItalic.eot') format('embedded-opentype');
    font-weight: 100;
    font-style: oblique
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Light.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Light.woff') format('woff'), url('/fonts/UnilSansBETAv1-_Light.eot') format('embedded-opentype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-LightItalic.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-LightItalic.woff') format('woff'), url('/fonts/UnilSansBETAv1-LightItalic.eot') format('embedded-opentype');
    font-weight: 300;
    font-style: oblique
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Regular.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Regular.woff') format('woff'), url('/fonts/UnilSansBETAv1-Regular.eot') format('embedded-opentype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Italic.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Italic.woff') format('woff'), url('/fonts/UnilSansBETAv1-Italic.eot') format('embedded-opentype');
    font-weight: 400;
    font-style: oblique
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Bold.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Bold.woff') format('woff'), url('/fonts/UnilSansBETAv1-Bold.eot') format('embedded-opentype');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-BoldItalic.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-BoldItalic.woff') format('woff'), url('/fonts/UnilSansBETAv1-BoldItalic.eot') format('embedded-opentype');
    font-weight: 700;
    font-style: oblique
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-Black.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-Black.woff') format('woff'), url('/fonts/UnilSansBETAv1-Black.eot') format('embedded-opentype');
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: UnilSans;
    /*noinspection CssUnknownTarget*/
    src: url('/fonts/UnilSansBETAv1-BlackItalic.woff2') format('woff2'), url('/fonts/UnilSansBETAv1-BlackItalic.woff') format('woff'), url('/fonts/UnilSansBETAv1-BlackItalic.eot') format('embedded-opentype');
    font-weight: 900;
    font-style: oblique
}

/* endregion */

/* region Body */
/* ZK applies 5px of padding by default, reset it, and use the same family as ZK */
body {
    font-family: UnilSans, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: var(--unil-font-size);
    padding: 0;
}

/* endregion */

/* region Links */
a {
    color: var(--unil-main-color);
}

/* endregion */

/* region Checkboxes */
input[type="checkbox"] {
    border-color: rgb(212 221 228);
    border-radius: .375rem;
    border-width: 2px;
    color: var(--unil-main-color-500);
    height: 1.25rem;
    position: relative;
    width: 1.25rem;
}

input[type="checkbox"][disabled] {
    cursor: not-allowed;
}

input[type="checkbox"]:enabled:checked {
    background-color: var(--unil-main-color);
    border-color: var(--unil-main-color);
    color: var(--unil-main-color);
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
    background-origin: border-box;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

input[type="checkbox"]:hover {
    border-color: rgb(157 168 177)
}

/* endregion */

/* region Radio buttons */
input[type="radio"]:checked {
    border-color: var(--unil-main-color);
}

input[type="radio"]:checked:before {
    background-color: var(--unil-main-color);
}

/* endregion */