@import url('/static/font/font.css');

:root {
    --web-font-family: "Noto Sans", "Noto Sans KR";
    --web-panel-border: var(--duice-form-element-border);
    --web-box-border: var(--duice-form-element-border);
    --web-tab-item-border: var(--duice-form-element-border);
    --web-code-font-family: "Noto Sans Mono";
    --web-number-font-family: "Noto Sans Mono";
    --web-date-font-family: "Noto Sans Mono";
    --web-color--red: red;
    --web-color--green: limegreen;
    --web-color--blue: blue;
    --web-background-color--red: orangered;
    --web-background-color--green: mediumseagreen;
    --web-background-color--blue: deepskyblue;
    /* table */
    --web-table-border: var(--duice-table-border);
    --web-table-thead-background: var(--duice-table-thead-background);
    --web-table-thead-border: var(--duice-table-thead-border);
    --web-table-tbody-background: var(--duice-table-tbody-background);
    --web-table-tbody-border: var(--duice-table-tbody-border);
    --web-table-tbody-hover-background: var(--duice-table-tbody-hover-background);
    --web-table-tfoot-background: var(--duice-table-tfoot-background);
    --web-table-tfoot-border: var(--duice-table-tfoot-border);
    /* badge */
    --web-badge-border-radius: 2em;
    --web-badge-padding: 0 1em;
    --web-badge-background-color: #aaa;
    --web-badge-font-color: #fff;
    --web-dark-mode-icon: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9Ii0wLjUgMCAxNyAxNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjbGFzcz0ic2ktZ2x5cGggc2ktZ2x5cGgtbW9vbi1zdGFyIiBmaWxsPSIjZmNmY2ZjIiBzdHJva2U9IiNmY2ZjZmMiPgoNPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiLz4KDTxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8dGl0bGU+MTE0MzwvdGl0bGU+IDxkZWZzPiA8L2RlZnM+IDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMS4wMDAwMDApIiBmaWxsPSIjM2I1MDgxIj4gPHBhdGggZD0iTTEwLjcwNSwxMi4yNzQgQzYuOTAxLDEyLjI3NCAzLjgxOCw5LjE4OSAzLjgxOCw1LjM4NiBDMy44MTgsMy4yNDIgNC43OTgsMS4zMjcgNi4zMzQsMC4wNjUgQzIuNzQ4LDAuODkyIDAuMDcyLDQuMDk5IDAuMDcyLDcuOTM2IEMwLjA3MiwxMi40MDEgMy42OTEsMTYuMDIxIDguMTU2LDE2LjAyMSBDMTEuOTk0LDE2LjAyMSAxNS4xOTksMTMuMzQ1IDE2LjAyNyw5Ljc1OCBDMTQuNzY0LDExLjI5NSAxMi44NSwxMi4yNzQgMTAuNzA1LDEyLjI3NCBMMTAuNzA1LDEyLjI3NCBaIiBjbGFzcz0ic2ktZ2x5cGgtZmlsbCI+IDwvcGF0aD4gPHBhdGggZD0iTTEyLjcxOSwwLjAyMSBMMTMuNzQ0LDIuMjI0IEwxNi4wMzcsMi41NzYgTDE0LjM3OSw0LjI5MSBMMTQuNzcsNi43MTEgTDEyLjcxOSw1LjU2OCBMMTAuNjY4LDYuNzExIEwxMS4wNTksNC4yOTEgTDkuMzk4LDIuNTc2IEwxMS42OTIsMi4yMjQgTDEyLjcxOSwwLjAyMSBaIiBjbGFzcz0ic2ktZ2x5cGgtZmlsbCI+IDwvcGF0aD4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==");
    --web-light-mode-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KDQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJfeDM2XyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojQzlCOTk3OyIgZD0iTTI1OC4zNzMsNDQ4LjEyMmMtMTEuNzgzLDAtMjEuMzM3LDEuMzk1LTIxLjMzNywxOC4xMzZjMCw4LjEzMSw5LjU1Myw0NS43NDIsMjEuMzM3LDQ1Ljc0Mg0KCQkJCWMxMS43ODQsMCwyMS4zMzYtMzcuNjExLDIxLjMzNi00NS43NDJDMjc5LjcwOSw0NDkuNTE4LDI3MC4xNTYsNDQ4LjEyMiwyNTguMzczLDQ0OC4xMjJ6Ii8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojQzlCOTk3OyIgZD0iTTM1Mi42NTMsNDIyLjg2Yy0xMC4yMDUsNS44OTEtMTcuNzgsMTEuODc2LTkuNDEsMjYuMzc0YzQuMDY1LDcuMDQxLDMxLjE0NCwzNC44MzcsNDEuMzQ5LDI4Ljk0NQ0KCQkJCWMxMC4yMDUtNS44OTItMC4zMjgtNDMuMjQxLTQuMzkzLTUwLjI4MkMzNzEuODI5LDQxMy40LDM2Mi44NTgsNDE2Ljk2OCwzNTIuNjUzLDQyMi44NnoiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNDOUI5OTc7IiBkPSJNNDQ4LjA0NiwzNDQuNDMyYy0xNC40OTgtOC4zNy0yMC40ODMtMC43OTUtMjYuMzc1LDkuNDFjLTUuODkyLDEwLjIwNS05LjQ2LDE5LjE3Niw1LjAzOCwyNy41NDYNCgkJCQljNy4wNDEsNC4wNjUsNDQuMzksMTQuNTk4LDUwLjI4Miw0LjM5M0M0ODIuODgzLDM3NS41NzYsNDU1LjA4NywzNDguNDk3LDQ0OC4wNDYsMzQ0LjQzMnoiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNDOUI5OTc7IiBkPSJNNDY1LjA3LDIzOC4yMjVjLTE2Ljc0MSwwLTE4LjEzNiw5LjU1My0xOC4xMzYsMjEuMzM3YzAsMTEuNzg0LDEuMzk2LDIxLjMzNiwxOC4xMzYsMjEuMzM2DQoJCQkJYzguMTMsMCw0NS43NDItOS41NTMsNDUuNzQyLTIxLjMzNkM1MTAuODEyLDI0Ny43NzcsNDczLjIsMjM4LjIyNSw0NjUuMDcsMjM4LjIyNXoiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNDOUI5OTc7IiBkPSJNNDI2LjcxLDEzNy43MzVjLTE0LjQ5OCw4LjM3LTEwLjkzLDE3LjM0MS01LjAzOCwyNy41NDZjNS44OTIsMTAuMjA0LDExLjg3NywxNy43OCwyNi4zNzUsOS40MQ0KCQkJCWM3LjA0MS00LjA2NSwzNC44MzctMzEuMTQ0LDI4Ljk0NS00MS4zNDlDNDcxLjA5OSwxMjMuMTM3LDQzMy43NSwxMzMuNjcsNDI2LjcxLDEzNy43MzV6Ii8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojQzlCOTk3OyIgZD0iTTE2NC4wOTIsNDIyLjg2Yy0xMC4yMDUtNS44OTItMTkuMTc2LTkuNDYtMjcuNTQ2LDUuMDM4Yy00LjA2NSw3LjA0MS0xNC41OTgsNDQuMzktNC4zOTMsNTAuMjgyDQoJCQkJYzEwLjIwNSw1Ljg5MiwzNy4yODMtMjEuOTA0LDQxLjM0OS0yOC45NDVDMTgxLjg3Miw0MzQuNzM3LDE3NC4yOTcsNDI4Ljc1MiwxNjQuMDkyLDQyMi44NnoiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNDOUI5OTc7IiBkPSJNNDI0LjIyNiwyNTkuNTYxYzAtNDUuNzk5LTE4LjU2NC04Ny4yNjMtNDguNTc3LTExNy4yNzZMMTQxLjA5NywzNzYuODM3DQoJCQkJYzMwLjAxMywzMC4wMTMsNzEuNDc3LDQ4LjU3OCwxMTcuMjc2LDQ4LjU3OEMzNDkuOTcxLDQyNS40MTUsNDI0LjIyNiwzNTEuMTU5LDQyNC4yMjYsMjU5LjU2MXoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNFNURDOTA7IiBkPSJNMTY0LjExLDk2LjIzOWMtMTAuMTQzLDUuODU1LTE5LjA1LDkuNDAxLTI3LjI5Ny00LjYxOGMtMC4wODItMC4wODMtMC4xNjUtMC4yNDctMC4yNDgtMC40MTINCgkJCQljLTQuMTIzLTcuMDA5LTE0LjU5Ni00NC4zNjctNC40NTMtNTAuMzA1YzcuNjY5LTQuNDU0LDI1LjA3LDEwLjMwOCwzNC43MTksMjAuNzgxYzMuMjk4LDMuNDY0LDUuNjksNi40MzMsNi42OCw4LjE2NA0KCQkJCUMxODEuODQsODQuMzY0LDE3NC4zMzYsOTAuMzg0LDE2NC4xMSw5Ni4yMzl6Ii8+DQoJCQk8Zz4NCgkJCQk8cGF0aCBzdHlsZT0iZmlsbDojRTVEQzkwOyIgZD0iTTI3OS43MjksNTIuODYxdjAuNTc3Yy0wLjI0OCwxNi4xNjQtOS43MzIsMTcuNTY2LTIxLjM1OSwxNy41NjYNCgkJCQkJYy05LjMxOSwwLTE3LjIzNi0wLjkwNy0yMC4xMjItOS40ODNjLTAuODI0LTIuMjI3LTEuMjM3LTUuMTEzLTEuMjM3LTguNjZjMC01LjAzLDMuNjI5LTIxLjI3Niw5LjE1NC0zMi45ODcNCgkJCQkJYzMuNTQ2LTcuMjU3LDcuNzUyLTEyLjc4MiwxMi4yMDUtMTIuNzgyYzEuMzE5LDAsMi42MzksMC40OTUsMy44NzYsMS40MDJDMjcyLjIyNSwxNS4xNzQsMjc5LjcyOSw0NS42MDQsMjc5LjcyOSw1Mi44NjF6Ii8+DQoJCQkJPHBhdGggc3R5bGU9ImZpbGw6I0U1REM5MDsiIGQ9Ik05NS4wODUsMTY1LjI2NGMtNS45MzgsMTAuMjI2LTExLjg3NSwxNy44MTMtMjYuMzksOS40MDENCgkJCQkJYy0zLjk1OC0yLjIyNy0xNC40MzItMTEuNzkzLTIxLjg1NC0yMS41MjRjLTAuMDgyLTAuMDgzLTAuMTY1LTAuMTY1LTAuMTY1LTAuMjQ4Yy01LjY5LTcuNTA0LTkuNDg0LTE1LjA5MS02LjkyOC0xOS41NDUNCgkJCQkJYzUuOTM4LTEwLjIyNiw0My4yMTMsMC4zMyw1MC4zMDUsNC4zNzFjMS4yMzcsMC43NDIsMi4zOTEsMS40ODQsMy4zODEsMi4yMjZDMTAzLjkwOSwxNDcuNjk5LDEwMC40NDUsMTU1Ljk0NSw5NS4wODUsMTY1LjI2NHoiDQoJCQkJCS8+DQoJCQkJPHBhdGggc3R5bGU9ImZpbGw6I0U1REM5MDsiIGQ9Ik02OS44NSwyNTkuNTI0YzAsMTEuNTQ2LTEuMzIsMjEuMDMtMTcuMjM2LDIxLjM1OWgtMC45MDdjLTcuODM0LDAtNDMuMTMtOC45MDctNDUuNjA1LTIwLjEyMg0KCQkJCQljLTAuMDgyLDAtMC4wODIsMC0wLjA4MiwwYzAtMC40MTItMC4wODMtMC44MjQtMC4wODMtMS4yMzdjMC00LjUzNiw1LjY5LTguODI0LDEzLjExMi0xMi4yMDUNCgkJCQkJYzExLjcxMS01LjUyNSwyNy43MDktOS4wNzEsMzIuNjU3LTkuMDcxYzQuNzAxLDAsOC4xNjQsMC43NDIsMTAuNzIxLDIuMDYyQzY5LjEwOCwyNDMuNzczLDY5Ljg1LDI1MS4xMTMsNjkuODUsMjU5LjUyNHoiLz4NCgkJCQk8cGF0aCBzdHlsZT0iZmlsbDojRTVEQzkwOyIgZD0iTTY4LjcsMzQ0LjQzMmMtNy4wNDEsNC4wNjUtMzQuODM3LDMxLjE0NC0yOC45NDUsNDEuMzQ5YzUuODkyLDEwLjIwNSw0My4yNDEtMC4zMjgsNTAuMjgxLTQuMzkzDQoJCQkJCWMxNC40OTgtOC4zNywxMC45My0xNy4zNDEsNS4wMzgtMjcuNTQ2Qzg5LjE4MywzNDMuNjM3LDgzLjE5NywzMzYuMDYyLDY4LjcsMzQ0LjQzMnoiLz4NCgkJCQk8cGF0aCBzdHlsZT0iZmlsbDojRTVEQzkwOyIgZD0iTTM1Mi42NTMsOTYuMjYzYzEwLjIwNSw1Ljg5MiwxOS4xNzYsOS40NiwyNy41NDYtNS4wMzhjNC4wNjUtNy4wNDEsMTQuNTk4LTQ0LjM5LDQuMzkzLTUwLjI4Mg0KCQkJCQljLTEwLjIwNS01Ljg5Mi0zNy4yODQsMjEuOTA0LTQxLjM0OSwyOC45NDVDMzM0Ljg3Myw4NC4zODYsMzQyLjQ0OCw5MC4zNzEsMzUyLjY1Myw5Ni4yNjN6Ii8+DQoJCQkJPHBhdGggc3R5bGU9ImZpbGw6I0U1REM5MDsiIGQ9Ik0yNTguMzczLDkzLjcwOGMtOTEuNTk4LDAtMTY1Ljg1Myw3NC4yNTUtMTY1Ljg1MywxNjUuODUzDQoJCQkJCWMwLDQ1Ljc5OSwxOC41NjMsODcuMjYyLDQ4LjU3NywxMTcuMjc2bDIzNC41NTItMjM0LjU1MkMzNDUuNjM1LDExMi4yNzEsMzA0LjE3Miw5My43MDgsMjU4LjM3Myw5My43MDh6Ii8+DQoJCQk8L2c+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGM0UyQTY7IiBkPSJNMjUyLjQwOCw0NDAuOTY0Yy0xMS43ODMsMC0yMS4zMzcsMS4zOTUtMjEuMzM3LDE4LjEzNmMwLDguMTMxLDkuNTUzLDQ1Ljc0MiwyMS4zMzcsNDUuNzQyDQoJCQlzMjEuMzM2LTM3LjYxMSwyMS4zMzYtNDUuNzQyQzI3My43NDQsNDQyLjM2LDI2NC4xOTEsNDQwLjk2NCwyNTIuNDA4LDQ0MC45NjR6Ii8+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGM0UyQTY7IiBkPSJNMzQ2LjY4OCw0MTUuNzAyYy0xMC4yMDUsNS44OTItMTcuNzgsMTEuODc3LTkuNDEsMjYuMzc1YzQuMDY1LDcuMDQxLDMxLjE0NCwzNC44MzcsNDEuMzQ5LDI4Ljk0NQ0KCQkJYzEwLjIwNS01Ljg5Mi0wLjMyOC00My4yNDEtNC4zOTMtNTAuMjgyQzM2NS44NjQsNDA2LjI0MiwzNTYuODkzLDQwOS44MSwzNDYuNjg4LDQxNS43MDJ6Ii8+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGM0UyQTY7IiBkPSJNNDQyLjA4MSwzMzcuMjc0Yy0xNC40OTgtOC4zNy0yMC40ODMtMC43OTUtMjYuMzc1LDkuNDFjLTUuODkyLDEwLjIwNS05LjQ2LDE5LjE3Niw1LjAzOCwyNy41NDYNCgkJCWM3LjA0MSw0LjA2NSw0NC4zOSwxNC41OTgsNTAuMjgyLDQuMzkzQzQ3Ni45MTgsMzY4LjQxOCw0NDkuMTIyLDM0MS4zMzksNDQyLjA4MSwzMzcuMjc0eiIvPg0KCQk8cGF0aCBzdHlsZT0iZmlsbDojRjNFMkE2OyIgZD0iTTQ1OS4xMDUsMjMxLjA2NmMtMTYuNzQxLDAtMTguMTM2LDkuNTUzLTE4LjEzNiwyMS4zMzdjMCwxMS43ODQsMS4zOTUsMjEuMzM2LDE4LjEzNiwyMS4zMzYNCgkJCWM4LjEzLDAsNDUuNzQyLTkuNTUzLDQ1Ljc0Mi0yMS4zMzZDNTA0Ljg0NiwyNDAuNjE5LDQ2Ny4yMzUsMjMxLjA2Niw0NTkuMTA1LDIzMS4wNjZ6Ii8+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGM0UyQTY7IiBkPSJNNDIwLjc0NCwxMzAuNTc3Yy0xNC40OTcsOC4zNy0xMC45MywxNy4zNDEtNS4wMzgsMjcuNTQ2YzUuODkyLDEwLjIwNSwxMS44NzcsMTcuNzgsMjYuMzc1LDkuNDENCgkJCWM3LjA0MS00LjA2NSwzNC44MzctMzEuMTQ0LDI4Ljk0NS00MS4zNDlDNDY1LjEzNCwxMTUuOTc5LDQyNy43ODUsMTI2LjUxMSw0MjAuNzQ0LDEzMC41Nzd6Ii8+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGM0UyQTY7IiBkPSJNMTU4LjEyNyw0MTUuNzAyYy0xMC4yMDUtNS44OTItMTkuMTc2LTkuNDYtMjcuNTQ2LDUuMDM4Yy00LjA2NSw3LjA0MS0xNC41OTgsNDQuMzktNC4zOTIsNTAuMjgyDQoJCQljMTAuMjA1LDUuODkyLDM3LjI4My0yMS45MDQsNDEuMzQ5LTI4Ljk0NUMxNzUuOTA3LDQyNy41NzgsMTY4LjMzMiw0MjEuNTk0LDE1OC4xMjcsNDE1LjcwMnoiLz4NCgkJPHBhdGggc3R5bGU9ImZpbGw6I0YzRTJBNjsiIGQ9Ik00MTguMjYxLDI1Mi40MDNjMC00NS43OTktMTguNTY0LTg3LjI2My00OC41NzctMTE3LjI3NkwxMzUuMTMyLDM2OS42NzkNCgkJCWMzMC4wMTQsMzAuMDEzLDcxLjQ3Nyw0OC41NzgsMTE3LjI3Niw0OC41NzhDMzQ0LjAwNiw0MTguMjU3LDQxOC4yNjEsMzQ0LjAwMSw0MTguMjYxLDI1Mi40MDN6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBzdHlsZT0iZmlsbDojRkJFRUI5OyIgZD0iTTE1OC4wOSw4OS4wNjVjLTcuNjcsNC40NTMtMTQuNjc5LDcuNTg3LTIxLjI3NywyLjU1N2MtMi4xNDQtMS41NjctNC4yMDYtNC4wNDEtNi4yNjgtNy41ODcNCgkJCWMtNC4wNDEtNy4wMS0xNC41OTctNDQuMzY3LTQuMzcxLTUwLjIyM2M5LjgxNC01LjY5LDM0Ljk2NywxOS41NDUsNDAuNjU3LDI3Ljg3NGMwLjMzLDAuNDEyLDAuNTc3LDAuNzQyLDAuNzQyLDEuMDcyDQoJCQlDMTc1LjkwMyw3Ny4xODksMTY4LjMxNiw4My4yMDksMTU4LjA5LDg5LjA2NXoiLz4NCgkJPGc+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkJFRUI5OyIgZD0iTTI3My43MDksNDUuNjg3YzAsMC41NzcsMCwxLjE1NS0wLjA4MywxLjY1Yy0wLjU3NywxNS4xNzQtOS44MTQsMTYuNDkzLTIxLjE5NCwxNi40OTMNCgkJCQljLTQuMjg4LDAtOC4yNDctMC4xNjUtMTEuNjI4LTEuMjM3Yy0wLjkwNy0wLjI0Ny0xLjczMi0wLjY1OS0yLjU1Ni0xLjA3MmMtMi43MjItMS40MDItNC44NjYtMy43MTEtNi4wMi03LjQyMg0KCQkJCWMtMC4wODMtMC4wODMsMC0wLjA4MywwLTAuMDgzYy0wLjc0Mi0yLjIyNy0xLjE1NS01LjAzLTEuMTU1LTguMzI5YzAtNC44NjUsMy40NjQtMjAuNDUyLDguODI0LTMyLjA4DQoJCQkJYzMuMjE2LTcuMDEsNy4xNzUtMTIuNjE3LDExLjM4MS0xMy40NDJDMjUxLjY5LDAuMDgzLDI1Mi4wMiwwLDI1Mi40MzIsMGMzLjU0NywwLDYuOTI3LDMuNDYzLDkuODE0LDguNDk0DQoJCQkJYzAuOTksMS42NDksMS44OTcsMy40NjQsMi44MDQsNS40NDNDMjcwLjMyOCwyNS40ODIsMjczLjcwOSw0MC45MDQsMjczLjcwOSw0NS42ODd6Ii8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkJFRUI5OyIgZD0iTTg5LjE0NywxNTguMDljLTUuOTM3LDEwLjIyNi0xMS44NzUsMTcuODEzLTI2LjM5LDkuNDg0Yy0yLjk2OS0xLjczMi05LjY0OC03LjUwNS0xNS45MTYtMTQuNDMyDQoJCQkJYy0wLjA4Mi0wLjA4My0wLjE2NS0wLjE2NS0wLjE2NS0wLjI0OGMtOC41NzctOS40MDEtMTYuMjQ2LTIwLjg2NC0xMi44NjUtMjYuNzE5YzUuODU1LTEwLjIyNiw0My4yMTMsMC4zMyw1MC4yMjIsNC4zNzENCgkJCQljNS4xOTUsMy4wNTEsOC4xNjQsNi4xODUsOS40MDEsOS40MDFDOTUuNjYyLDE0NS42MzcsOTIuODU4LDE1MS42NTgsODkuMTQ3LDE1OC4wOXoiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNGQkVFQjk7IiBkPSJNNjMuODMsMjUyLjQzMmMwLDExLjc5My0xLjQwMiwyMS4yNzctMTguMTQyLDIxLjI3N0g0NS40NGMtNS4wMy0wLjA4My0yMC4xMjItMy4zODItMzEuNTAzLTguNTc3DQoJCQkJYy0yLjg4Ni0xLjQwMi01LjYwOC0yLjgwNC03LjgzNS00LjM3MWMtMC4wODIsMC0wLjA4MiwwLTAuMDgyLDBDMi4zMDksMjU4LjIwNSwwLDI1NS40MDEsMCwyNTIuNDMyYzAtMC4zMywwLTAuNzQyLDAuMTY1LTEuMDcyDQoJCQkJYzAuNzQyLTQuMDQxLDUuNjktNy42NjksMTIuMDQtMTAuODg2YzExLjc5My01LjYwOCwyOC40NTEtOS40MDEsMzMuNDgyLTkuNDAxYzEuODk3LDAsMy42MjksMC4xNjUsNS4xOTYsMC40MTINCgkJCQljNi43NjIsMC45OSw5Ljk3OCw0LjI4OCwxMS41NDUsOC44MjRjMC40MTIsMS4wNzIsMC42NiwyLjMwOSwwLjgyNSwzLjU0NkM2My43NDgsMjQ2LjQxMiw2My44MywyNDkuMzgxLDYzLjgzLDI1Mi40MzJ6Ii8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkJFRUI5OyIgZD0iTTg0LjAzNCwzNzQuMjM3Yy01LjE5NiwzLjA1MS0yNy4zNzksOS42NDktNDAuNzM5LDguNTc2Yy0xLjU2Ny0wLjA4My0yLjk2OS0wLjMzLTQuMjg4LTAuNzQyDQoJCQkJYy0yLjM5Mi0wLjY2LTQuMjA2LTEuODE1LTUuMTk1LTMuNDY0Yy0wLjkwOC0xLjU2Ny0xLjA3Mi0zLjYyOS0wLjU3Ny01Ljg1NWMyLjgwNC0xMi4yMDYsMjMuNTAzLTMyLjA4LDI5LjUyMy0zNS40NjENCgkJCQljMi45NjktMS43MzIsNS42MDgtMi44MDQsNy45MTctMy4yMTZjNy45MTctMS43MzIsMTIuNDUzLDIuOTY5LDE2LjY1OSw5LjU2NmMwLjU3NywwLjk5LDEuMjM3LDEuOTc5LDEuODE0LDMuMDUxDQoJCQkJYzIuMDYyLDMuNzExLDMuOTU5LDcuMTc1LDQuNzAxLDEwLjU1NkM5NS4yNSwzNjMuMjY4LDkzLjM1MywzNjguODc2LDg0LjAzNCwzNzQuMjM3eiIvPg0KCQkJPHBhdGggc3R5bGU9ImZpbGw6I0ZCRUVCOTsiIGQ9Ik0zNDYuNjg4LDg5LjEwNGMxMC4yMDUsNS44OTIsMTkuMTc2LDkuNDYsMjcuNTQ2LTUuMDM4YzQuMDY1LTcuMDQxLDE0LjU5OC00NC4zOSw0LjM5My01MC4yODINCgkJCQljLTEwLjIwNS01Ljg5Mi0zNy4yODQsMjEuOTA0LTQxLjM0OSwyOC45NDVDMzI4LjkwOCw3Ny4yMjgsMzM2LjQ4Myw4My4yMTMsMzQ2LjY4OCw4OS4xMDR6Ii8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkJFRUI5OyIgZD0iTTM2OS43MDEsMTM1LjE2NGwtMC43NDMsMC43NDJsLTMuMzgxLDMuMzgxTDEzNS4xNjQsMzY5LjcwMQ0KCQkJCWMtMi40NzQtMi40NzQtNC43ODMtNC45NDgtNy4wOTItNy41ODdjLTYuMTg1LTcuMDA5LTExLjc5My0xNC41MTQtMTYuNzQxLTIyLjUxM2MtMTUuNjY4LTI1LjMxOC0yNC43NC01NS4xNzEtMjQuNzQtODcuMTY4DQoJCQkJYzAtOTEuNjIxLDc0LjIyMS0xNjUuODQyLDE2NS44NDItMTY1Ljg0MmMyOS45MzYsMCw1OC4wNTcsNy45MTcsODIuMzg1LDIxLjkzNkMzNDcuNiwxMTUuNzg0LDM1OS4zMSwxMjQuNzczLDM2OS43MDEsMTM1LjE2NHoiDQoJCQkJLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg==");
    --web-tag-important-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlVwbG9hZGVkIHRvIHN2Z3JlcG8uY29tIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiAKCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CgkuYWZpYWRvX2VlbntmaWxsOiMwQjE3MTk7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0iYWZpYWRvX2VlbiIgZD0iTTE4LDR2MTZoLTRWNEgxOHogTTE0LDI4aDR2LTRoLTRWMjh6Ii8+Cjwvc3ZnPg==");
    --web-tag-system-required-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIG9wYWNpdHk9IjAuMzQiIGQ9Ik0xMiAxNUMxMy42NTY5IDE1IDE1IDEzLjY1NjkgMTUgMTJDMTUgMTAuMzQzMSAxMy42NTY5IDkgMTIgOUMxMC4zNDMxIDkgOSAxMC4zNDMxIDkgMTJDOSAxMy42NTY5IDEwLjM0MzEgMTUgMTIgMTVaIiBzdHJva2U9IiMyOTJEMzIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTIgMTIuODc5OVYxMS4xMTk5QzIgMTAuMDc5OSAyLjg1IDkuMjE5OTQgMy45IDkuMjE5OTRDNS43MSA5LjIxOTk0IDYuNDUgNy45Mzk5NCA1LjU0IDYuMzY5OTRDNS4wMiA1LjQ2OTk0IDUuMzMgNC4yOTk5NCA2LjI0IDMuNzc5OTRMNy45NyAyLjc4OTk0QzguNzYgMi4zMTk5NCA5Ljc4IDIuNTk5OTQgMTAuMjUgMy4zODk5NEwxMC4zNiAzLjU3OTk0QzExLjI2IDUuMTQ5OTQgMTIuNzQgNS4xNDk5NCAxMy42NSAzLjU3OTk0TDEzLjc2IDMuMzg5OTRDMTQuMjMgMi41OTk5NCAxNS4yNSAyLjMxOTk0IDE2LjA0IDIuNzg5OTRMMTcuNzcgMy43Nzk5NEMxOC42OCA0LjI5OTk0IDE4Ljk5IDUuNDY5OTQgMTguNDcgNi4zNjk5NEMxNy41NiA3LjkzOTk0IDE4LjMgOS4yMTk5NCAyMC4xMSA5LjIxOTk0QzIxLjE1IDkuMjE5OTQgMjIuMDEgMTAuMDY5OSAyMi4wMSAxMS4xMTk5VjEyLjg3OTlDMjIuMDEgMTMuOTE5OSAyMS4xNiAxNC43Nzk5IDIwLjExIDE0Ljc3OTlDMTguMyAxNC43Nzk5IDE3LjU2IDE2LjA1OTkgMTguNDcgMTcuNjI5OUMxOC45OSAxOC41Mzk5IDE4LjY4IDE5LjY5OTkgMTcuNzcgMjAuMjE5OUwxNi4wNCAyMS4yMDk5QzE1LjI1IDIxLjY3OTkgMTQuMjMgMjEuMzk5OSAxMy43NiAyMC42MDk5TDEzLjY1IDIwLjQxOTlDMTIuNzUgMTguODQ5OSAxMS4yNyAxOC44NDk5IDEwLjM2IDIwLjQxOTlMMTAuMjUgMjAuNjA5OUM5Ljc4IDIxLjM5OTkgOC43NiAyMS42Nzk5IDcuOTcgMjEuMjA5OUw2LjI0IDIwLjIxOTlDNS4zMyAxOS42OTk5IDUuMDIgMTguNTI5OSA1LjU0IDE3LjYyOTlDNi40NSAxNi4wNTk5IDUuNzEgMTQuNzc5OSAzLjkgMTQuNzc5OUMyLjg1IDE0Ljc3OTkgMiAxMy45MTk5IDIgMTIuODc5OVoiIHN0cm9rZT0iIzI5MkQzMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=");
    --web-tag-i18n-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNDM0MzQzIj48cGF0aCBkPSJtNDc2LTgwIDE4Mi00ODBoODRMOTI0LTgwaC04NGwtNDMtMTIySDYwM0w1NjAtODBoLTg0Wk0xNjAtMjAwbC01Ni01NiAyMDItMjAycS0zNS0zNS02My41LTgwVDE5MC02NDBoODRxMjAgMzkgNDAgNjh0NDggNThxMzMtMzMgNjguNS05Mi41VDQ4NC03MjBINDB2LTgwaDI4MHYtODBoODB2ODBoMjgwdjgwSDU2NHEtMjEgNzItNjMgMTQ4dC04MyAxMTZsOTYgOTgtMzAgODItMTIyLTEyNS0yMDIgMjAxWm00NjgtNzJoMTQ0bC03Mi0yMDQtNzIgMjA0WiIvPjwvc3ZnPg==");
    --web-tag-sortable-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIgOEg4LjAwMUw4IDIwSDZWOEgybDUtNSA1IDV6bTEwIDhsLTUgNS01LTVoNFY0aDJ2MTJoNHoiLz48L2c+PC9zdmc+");
    --web-tag-sortable-asc-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cG9seWdvbiBwb2ludHM9IjI1Ni41LDY0LjUgNjQuNSwyNTYuNSAxNzYuNSwyNTYuNSAxNzYuNSw0NDguNSAzMzYuNSw0NDguNSAzMzYuNSwyNTYuNSA0NDguNSwyNTYuNSAiLz48L3N2Zz4=");
    --web-tag-sortable-desc-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cG9seWdvbiBwb2ludHM9IjI1Ni41LDQ0OC41IDQ0OC41LDI1Ni41IDMzNi41LDI1Ni41IDMzNi41LDY0LjUgMTc2LjUsNjQuNSAxNzYuNSwyNTYuNSA2NC41LDI1Ni41ICIvPjwvc3ZnPg==");
}

/* dark mode */
:root.dark-mode {
    --web-badge-background-color: #555;
    --web-badge-font-color: #ddd;
}

/* html */
html {
    font-family: var(--web-font-family), sans-serif;
}

/* panel */
.panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: var(--web-panel-border);
    box-sizing: border-box;
    padding: 1.5rem 2rem;
}
.panel-title {
    display: flex;
    gap: 1px;
}
.panel-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
@media screen and (max-width: 1023px) {
    .panel {
        padding: 1rem;
    }
}

/* dialog */
.dialog {
    padding: 2rem 2rem;
}
.dialog-title {
    display: flex;
    gap: 1rem;
}
.dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* link */
.link {
    cursor: pointer;
}
.link:hover {
    text-decoration: underline;
}

/* tab */
.tab {
    display: flex;
    justify-content: flex-start;
    gap: 1px;
    overflow: auto;
}
.tab-item {
    flex-shrink: 0;
    border: var(--web-tab-item-border);
    border-bottom: none;
    border-radius: 1px 1px 0 0;
    padding: 0.2rem 1rem;
    white-space: nowrap;
}

/* box */
.box {
    border: var(--web-box-border);
}

/* table */
.table {
}
.table.scrollable {
    border: none;
}
.table.scrollable > thead {
    position: sticky;
    top: 0;
}
.table > tbody > .selected{
    background-color: var(--duice-table-tbody-hover-background);
}

/* table responsive */
@media screen and (max-width: 1023px) {
    table.responsive thead {
        display: none;
    }
    table.responsive tbody {
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    table.responsive tbody tr {
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }
    table.responsive td {
        display: flex;
        flex-direction: row;
        padding: 0;
        align-items: center;
        border-right: none;
    }
    table.responsive tr:not(:first-child) td:first-child {
        border-top: var(--web-table-thead-border);
    }
    table.responsive td > .responsive-th[hidden] {
        display: block !important;
        width:25%;
        background-color: var(--web-table-thead-background);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-right: 0.5rem;
        border-right: var(--web-table-tbody-border);
        font-weight: bold;
    }
}

/* icon */
.icon {
    height: 1.0em;
    vertical-align: middle;
}
.dark-mode .icon {
    filter: invert(0.9);
    mix-blend-mode: difference;
}

/* code */
.code {
    font-family: var(--web-code-font-family), monospace;
}

/* number */
.number {
    font-family: var(--web-number-font-family), monospace;
}

/* date */
.date {
    font-family: var(--web-date-font-family), monospace;
}

/* button */
.button:has(img.icon) > span {
    margin-right: 0.5rem;
}
.button.locked {
    pointer-events: none;
    opacity: 0.5;
    position:relative;
}
.button.locked::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA00lEQVR4nMWSvQ3CUAyEvwKoyAbAHgiQGCBr8DMPipQJIBmBZQIFScEGpAKdZAqe/EgaxDWW/Ox7Z5/hB1gBJdAALVADBbDoahwAOVABG2BiOcUtcAEyy7nIgSeQRt7HwNlIXNmVNd+BdYQkAa7eOKXJxpq/keyAU5hsbFZ6kMxssR9ogVGQi5Go7uEpmDq/eSRScAsLC7OKHiTawTEsWpoLSQdJavcw94oy8zlGktqdHCLv6MJEIp8lUzsZWtzbz2qOXuIbOhL5rEXJHUXN7Mr+P17xbTARxXqiZgAAAABJRU5ErkJggg==');
}
.button.small {
    height: calc(var(--duice-form-element-height) * 0.8);
    min-width: calc(var(--duice-form-element-height) * 0.8);
    padding-left: calc(var(--duice-form-element-height) / 5);
    padding-right: calc(var(--duice-form-element-height) / 5);
    vertical-align: middle;
}
.button.small > * {
    font-size: smaller;
}
.button:has(img.icon).small > span {
    margin-right: 0.4rem;
}

/* badge */
.badge {
    display: inline-block;
    text-align: center;
    font-size: xx-small;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--web-badge-border-radius);
    padding: var(--web-badge-padding);
    background-color: var(--web-badge-background-color);
    color: var(--web-badge-font-color);
}

/* tag-important */
.tag-important:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-image: var(--web-tag-important-icon);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-left: 0.25em;
}
.dark-mode .tag-important:after {
    filter: invert(0.9);
}
/* tag-i18n*/
.tag-i18n:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-image: var(--web-tag-i18n-icon);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-left: 0.25em;
}
.dark-mode .tag-i18n:after {
    filter: invert(0.9);
}
/* tag-optional */
.tag-optional:after {
    display: inline-block;
    content: "(Optional)";
    font-family: var(--web-code-font-family), monospace;
    font-size: smaller;
    font-weight: normal;
    margin-left: 0.25em;
}
/* tag-system-required */
.tag-system-required:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-image: var(--web-tag-system-required-icon);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-left: 0.25em;
}
.dark-mode .tag-system-required:after {
    filter: invert(0.9);
}
/* tag-sortable */
.tag-sortable:after {
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
    background-image: var(--web-tag-sortable-icon);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-left: 0.25em;
}
.tag-sortable.asc:after {
    background-image: var(--web-tag-sortable-asc-icon);
}
.tag-sortable.desc:after {
    background-image: var(--web-tag-sortable-desc-icon);
}
.dark-mode .tag-sortable:after {
    filter: invert(0.9);
}

/* color */
.color--red {
    color: var(--web-color--red);
}
.color--green {
    color: var(--web-color--green);
}
.color--blue {
    color: var(--web-color--blue);
}

/* background-color */
.background-color--red {
    background-color: var(--web-background-color--red);
}
.background-color--green {
    background-color: var(--web-background-color--green);
}
.background-color--blue {
    background-color: var(--web-background-color--blue);
}

/* dark mode switch */
.dark-mode-switch {
    cursor: pointer;
    content: var(--web-dark-mode-icon);
}
.dark-mode .dark-mode-switch {
    filter: none !important;
    content: var(--web-light-mode-icon);
}

/* animate */
.blink {
    animation: blink 1.0s infinite ease-in-out;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* text-truncate */
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* loading */
.loading:after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' stroke='%23888888' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='283' stroke-dashoffset='75'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    animation: spin 0.5s ease-in-out infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}