Added Obsidian Snake

Added Obsidian Snake

This theme is based on the zero-dark-matrix (it's great) with the color
theme of HTML, CSS and JS based on the obsidian theme
(https://github.com/mekwall/obsidian-color-scheme).

//***************************************************************************************************************************/
/* Obsidian Snake by Charles Ahmadzadeh (@superzadeh), based on Obsidian (https://github.com/mekwall/obsidian-color-scheme) */
/****************************************************************************************************************************/

@theme-type: dark;

// Global Settings
@text-height      : 14px;
@global-accent    : #93C763;
@global-arrow     : #8c8c8c;
@global-background: #22282A;
@global-boxshadow : rgba(17,17,17,.6);
@global-divider   : lighten(@global-background, 5%);
@global-hover     : lighten(@global-background, 5%);
@global-input     : #111;
@global-selected  : #364c3b;
@global-text      : #ccc;
@global-label     : #626262;
@global-warn      : #db0;
@global-error     : #ff5a5a;
@global-textshadow: darken(@global-background, 4%);

// JavaScript
@js-atom      : #93C763;
@js-attribute : #4e87bf;
@js-builtin   : #8CBBAD;
@js-comment   : #676767;
@js-def       : #8CBBAD;
@js-error     : #9D1E15;
@js-header    : #ff6400;
@js-hr        : #aeaeae;
@js-keyword   : #93C763;
@js-link      : #8CBBAD;
@js-meta      : #d8fa3c;
@js-number    : #FFCD22;
@js-operator  : #E8E2B7;
@js-property  : #C0C49D;
@js-string    : #EC7600;
@js-tag       : #49a6d2;
@js-variable  : #F0F0F0;
@js-variable-2: #F0F0F0;

// JavaScript Objects
@js-obj-array    : #7c7c7c;
@js-obj-boolean  : #93C763;
@js-obj-function : #8b6ccf;
@js-obj-name     : #77a8c6;
@js-obj-number   : #93C763;
@js-obj-preview  : #ddd;
@js-obj-regexp   : #D39745;
@js-obj-string   : #d97640;
@js-obj-undefined: #ad4e4e;

// CSS
@css-at-rule   : #b094bb;
@css-atom      : #EC7600;
@css-builtin   : #93C763;
@css-comment   : #676767;
@css-def       : #93C763;
@css-important : #f00;
@css-meta      : #9898BC;
@css-number    : #F0F0F0;
@css-operator  : #F0F0F0;
@css-property  : #668BB0;
@css-qualifier : #93C763;
@css-string    : #e3b959;
@css-string-2  : #F0F0F0;
@css-tag       : #93C763;
@css-variable  : #93C763;
@css-variable-2: #93C763;

// HTML Highlighting
@xml-attribute         : #B3B689;
@xml-comment           : #66747B;
@xml-error             : #bf4c4c;
@xml-iframe-root       : #db0;
@xml-js-node           : #c2c3c3;
@xml-link              : #FFCD22;
@xml-pseudo            : #49a5d2;
@xml-pseudo-highlighted: #a6371a;
@xml-shadow-root       : #db0;
@xml-string            : #EC7600;
@xml-tag               : #8CBBAD;

// Tabbed Header Configuration
@tab-color-top      : lighten(@global-background, 18%);
@tab-color-bottom   : lighten(@global-background, 8%);
@tab-highlighted    : @global-accent;
@tab-label          : #999;
@tab-label-selected : #f8f8f8;
@tab-label-unsaved  : #db0;

// Toolbars
@tab-main-icons-padding : 6px;
@tab-main-toolbar-height: 34px;
@tab-sub-icons-padding : 0;
@tab-sub-toolbar-height: 25px;

// Glyphs
@glyph-active  : @global-accent;
@glyph-inactive: lighten(@global-background, 35%);

// Crumbs
@crumb-selected-background: @global-selected;
@crumb-selected-text      : #f8f8f8;
@crumb-text               : @global-text;

// Console
@console-default-text: @global-text;
@console-input-text  : #f1f1f1;
@console-link        : #888;

// Dialog [Ctrl/Cmd + O | Ctrl/Cmd + Shift + O]
@dialog-background     : lighten(@global-background, 5%);
@dialog-border         : lighten(@global-background, 10%);
@dialog-item-background: @global-background;
@dialog-item-highlight : @global-accent;
@dialog-item-text      : lighten(@global-text, 10%);

// Editor Properties
@cm-cursor             : #fff;
@cm-error              : #9D1E15;
@cm-gutter             : lighten(@global-background, 4%);
@cm-gutter-border      : lighten(@global-background, 5%);
@cm-gutter-lines       : lighten(@global-background, 40%);
@cm-matching-bracket   : #15ca1a;
@cm-nonmatching-bracket: #db0404;
@cm-lines-no-sourcemap : lighten(@global-background, 1%);
@cm-selected           : lighten(@global-background, 10%);
@cm-whitespace         : lighten(@global-background, 5%);

// Element Highlighter
@eh-base-color          : @global-selected;
@eh-children-shadow     : darken(@global-background, 10%);
@eh-editing-outline     : @global-accent;
@eh-highlight-background: @selection-background;
@eh-highlight-outline   : @selection-border;
@eh-hover-background    : @hover-background;
@eh-hover-outline       : @hover-border;
@eh-clipboard-selection : lighten(@global-background, 40%);

// Elements Sidebar
@style-edit-mode-selector-text: #999;
@style-selector-text          : #ccc;
@style-separator              : lighten(@global-background, 10%);
@style-value                  : #ccc;

// Filters
@filter-background   : lighten(@global-background,5%);
@filter-text         : @global-text;
@filter-hover        : lighten(@global-background, 10%);
@filter-selected     : lighten(@global-background, 15%);
@filter-selected-text: lighten(@global-text, 15%);
@filter-error        : @global-error;
@filter-warning      : #db0;
@filter-info         : #A277FF;
@filter-log          : #49a6d2;
@filter-debug        : #FC844C;

// Find
@find-header-background   : lighten(@global-background, 3%);
@find-header-text         : #888;
@find-highlight-background: @global-accent;
@find-highlight-text      : #000;

// Forms
@form-button-background: lighten(@global-background, 5%);
@form-button-border    : lighten(@global-background, 10%);
@form-button-pressed   : inset 0 1px 1px 0 darken(@global-background, 5%), 0 1px 1px 0 lighten(@global-background, 5%);
@form-button-text      : darken(@global-text, 10%);
@form-input-background : lighten(@global-background, 5%);
@form-input-border     : lighten(@global-background, 10%);
@form-input-text       : lighten(@global-text, 10%);
@form-label-text       : @global-text;

// Local Modifications
@history-added-text  : #7EB17E;
@history-removed-text: @global-error;

// Screencast
@screencast-viewport       : lighten(@global-background, 10%);
@screencast-viewport-border: @global-accent;

// Scrollbars
@sb-thickness      : 12px;
@sb-thumb-border   : darken(@global-background, 10%);
@sb-thumb-color    : lighten(@global-background, 20%);
@sb-thumb-roundness: 8px;

// Settings
@settings-background       : #444;
@settings-border           : #454545;
@settings-delimiter        : #eee;
@settings-dialog           : #333;
@settings-edit-background  : #222;
@settings-folder-background: #222;
@settings-selected         : rgba(150, 255, 150, 0.2);
@settings-text             : #333;

// Table/Sidebar Selections | Breakpoints
@selection-background: @global-selected;
@selection-border    : lighten(@selection-background, 15%);
@selection-text      : lighten(@global-text, 10%);
@hover-background: @global-hover;
@hover-border    : lighten(@hover-background, 10%);
@hover-text      : @global-text;

// Sources Tab
@sources-exception-all     : rgba(220,3,3,1);
@sources-exception-uncaught: rgb(213,191,0);
@sources-highlight-text    : darken(@global-background, 4%);
@sources-pane-background   : rgba(0,0,0,.8);
@sources-placeholder-text  : #999;
@sources-save-background   : @global-background;
@sources-text              : @global-text;

// Tables
@table-primary  : @global-background;
@table-secondary: lighten(@global-background,2%);

// Timeline
@timeline-expandable-border   : lighten(@global-background, 35%);
@timeline-graph-bar           : rgba(200,200,200,.3);
@timeline-graph-bar-background: rgba(200,200,200,.2);
@timeline-overview-background : @global-background;
@timeline-graph-selection     : @global-accent;
@timeline-progress-pane       : fade(lighten(@global-background,30%), 50%);
@timeline-resources-divider   : lighten(@global-background, 3%);

// Popovers
@popover-background       : lighten(@global-background, 5%);
@popover-details-row-title: #49a6d2;
@popover-details-title    : #db0;
@popover-title            : #ff8b3e;
@popover-tree-border      : #888;

error: pathspec 'themes/obsidian-snake.less' did not match any file(s) known to git


Add s10wen theme

Add s10wen theme

//*********************************************
// Zero Base Template [v0.1]
// -------------------------------------------
// Theme - s10wen
// Author - Simon Owen [@s10wen]
//*********************************************

// Default colours
@alpha  : hsl( 78,  92%, 47%); /* light green */
@bravo  : hsl(340,  95%, 56%); /* dark red    */
@charlie: hsl(187,  71%, 68%); /* light blue  */
@delta  : hsl(262, 100%, 73%); /* purple      */
@echo   : hsl( 53,  66%, 71%); /* yellow      */

@white  : hsl(0, 100%, 100%);
@grey   : hsl(0,   0%,  80%);
@black  : hsl(0,   0%,   7%);

// Global Settings
@text-height           : 14px;
@global-background     : #111;
@global-boxshadow      : rgba(17,17,17,.6);
@global-accent         : @alpha;
@global-hover          : lighten(@global-background, 5%);
@global-label          : @delta;
@global-input          : #111;
@global-disabled       : #888;
@global-selected       : #364c3b;
@global-text           : @delta;
@global-text-error     : #f66;
@navigation-arrow-color: #AAB0AF;

// JavaScript
@js-atom      : #89f5a2;
@js-attribute : #4e87bf;
@js-builtin   : #8da6ce;
@js-comment   : #676767;
@js-def       : @bravo;
@js-error     : #f8f8f8;
@js-header    : #ff6400;
@js-hr        : #aeaeae;
@js-keyword   : #8b6ccf;
@js-link      : #8da6ce;
@js-meta      : #d8fa3c;
@js-number    : #89f5a2;
@js-operator  : #cdb943;
@js-property  : #cdb943;
@js-string    : #f07b3c;
@js-tag       : @bravo;
@js-variable  : @delta;
@js-variable-2: @delta;

// JavaScript Objects
@js-obj-name     : #77a8c6;
@js-obj-array    : #7c7c7c;
@js-obj-function : #8b6ccf;
@js-obj-number   : #89f5a2;
@js-obj-boolean  : #89f5a2;
@js-obj-preview  : #ddd;
@js-obj-regexp   : #ff54e8;
@js-obj-string   : #ff8737;
@js-obj-undefined: #ad4e4e;

// CSS
@css-at-rule   : #b094bb;
@css-atom      : @delta;
@css-builtin   : @alpha;
@css-def       : @alpha;
@css-comment   : #676767;
@css-important : #f00;
@css-meta      : #6aedff;
@css-number    : @delta;
@css-operator  : @delta;
@css-property  : #6aedff;
@css-qualifier : @alpha;
@css-string    : #e3b959;
@css-string-2  : @delta;
@css-tag       : @alpha;
@css-variable  : @alpha;
@css-variable-2: @alpha;

// HTML Highlighting
@xml-comment           : #7c7c7c;
@xml-error             : #bf4c4c;
@xml-string            : @echo;
@xml-tag               : @bravo;
@xml-attribute         : @alpha;
@xml-link              : #e3b959;
@xml-pseudo            : #49a5d2;
@xml-pseudo-highlighted: #a6371a;
@xml-js-node           : #c2c3c3;
@xml-shadow-root       : #db0;
@xml-iframe-root       : #db0;

// Tabbed Header Configuration
@tab-base-color     : @global-background;
@tab-style          : light; // (light | dark)
@tab-top-contrast   : 18%;
@tab-bottom-contrast: 8%;
@tab-label          : #999;
@tab-label-selected : #f8f8f8;
@tab-highlighted    : @global-accent;

// Main Toolbar
@tab-main-toolbar-height: 34px;
@tab-main-icons-padding : 6px;

// Sub Toolbars
@tab-sub-toolbar-height: 25px;
@tab-sub-icons-padding : 0;

// Tab Rendering
.tb-render(dark) {
	@gradient-top: darken(@tab-base-color, @tab-top-contrast);
	@gradient-bottom: darken(@tab-base-color, @tab-bottom-contrast);
}

.tb-render(light) {
	@gradient-top: lighten(@tab-base-color, @tab-top-contrast);
	@gradient-bottom: lighten(@tab-base-color, @tab-bottom-contrast);
}

.tb-render(@tab-style);

// Glyphs
@glyph-inactive: lighten(@global-background, 35%);
@glyph-active: @global-accent;
@buttonGlyphs: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png);

// Filters
@filter-background: lighten(@global-background,5%);
@filter-item-hover: lighten(@global-background, 10%);
@filter-item-selected: lighten(@global-background, 15%);

// Element Highlighter
@eh-base-color          : @global-selected;
@eh-children-shadow     : darken(@global-background, 10%);
@eh-editing-outline     : @global-accent;
@eh-highlight-background: @selection-background;
@eh-highlight-outline   : @selection-border;
@eh-hover-background    : @hover-background;
@eh-hover-outline       : @hover-border;

// Elements Sidebar
@style-separator              : lighten(@global-background, 10%);
@style-value                  : @delta;
@style-selector-text          : @grey;
@style-edit-mode-selector-text: #999;

// Crumbs
@crumb-text               : @global-text;
@crumb-selected-label     : #f8f8f8;
@crumb-selected-background: @global-selected;

// Scrollbars
@sb-thickness      : 12px;
@sb-thumb-roundness: 8px;
@sb-thumb-color    : lighten(@global-background, 20%);
@sb-thumb-border   : darken(@global-background, 10%);

// Console
@console-input-text  : #f1f1f1;
@console-default-text: @global-text;
@console-log-msg     : @bravo;
@console-warning-msg : #db0;
@console-error-msg   : @global-text-error;
@console-link        : #888;

// Console Bubbles (# indicator for repeated console items)
@console-log-bubble    : @bravo;
@console-warning-bubble: #e8a400;
@console-error-bubble  : #d82323;

// Timeline
@timeline-expandable-border   : lighten(@global-background, 35%);
@timeline-graph-bar           : rgba(200,200,200,.3);
@timeline-graph-bar-background: rgba(200,200,200,.2);
@timeline-resources-divider   : lighten(@global-background, 3%);
@timeline-overview-background : rgba(0,0,0,.8);
@timeline-overview-grid-window: @global-selected;

// Table/Sidebar Selections | Breakpoints
@selection-background: @global-selected;
@selection-border    : lighten(@selection-background, 15%);
@selection-text      : lighten(@global-text, 10%);

@hover-background: @global-hover;
@hover-border    : lighten(@hover-background, 10%);
@hover-text      : @global-text;

// Tables
@table-primary  : @global-background;
@table-secondary: lighten(@global-background,2%);

// Editor Properties
@cm-gutter             : lighten(@global-background, 4%);
@cm-gutter-border      : lighten(@global-background, 5%);
@cm-gutter-lines       : lighten(@global-background, 40%);
@cm-matching-bracket   : #15ca1a;
@cm-nonmatching-bracket: #db0404;

// Find
@find-header-bg      : lighten(@global-background, 3%);
@find-header-text    : #888;
@find-highlight-bg   : @global-accent;
@find-hightlight-text: #000;

// Popovers
@popover-title            : #ff8b3e;
@popover-tree-border      : #888;
@popover-details-title    : #db0;
@popover-details-row-title: @bravo;

@popover-background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABpCAYAAAA5gg06AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMzNFODNCNTE0QTZFMjExQjY2OUE2RUJCODYzRjA1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MDY1NzM5QkE2QTMxMUUyQkZBRkJBNzVEQjUzM0I4RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MDY1NzM5QUE2QTMxMUUyQkZBRkJBNzVEQjUzM0I4RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA0M0U4M0I1MTRBNkUyMTFCNjY5QTZFQkI4NjNGMDVEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzM0U4M0I1MTRBNkUyMTFCNjY5QTZFQkI4NjNGMDVEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+4LICiQAAAl5JREFUeNrs3c9KVFEAwGHHmVEb6R85oLWpRArBIINo1RNEtIgmgqAnqF0v0M5WQdDGVYVU0EsEUYRERUhUCxdJVihpOZhTcztHZ6JFEQ13cet+PzjXGWFmcb45xzsgnEKSJF3Kdt2mAJIgQRIkQYIkSIIESZAgCZI6q9TpCyfqN3I9cRcrZ60kQcrHdveHhsMY/58n7jfb/WoYj+8cvTL38y+np6czhRRhamEcy/Mn/9S9C1Phx2TAepe1lTQSxvrH6+OrDz3vn7zpyxtOsbeUDB8f+xQenol/SgLW5QC1miWk0/Eyc/3RtueTD6p5XUXPrt2vjp47vLCvNh7n421cUVm5cRiKSJ/nlkp5Boo1Vr4UX999ur31tJalu7s98bI8u9DjXqyra2V+udxYWYtzuzNseZWsIJXjpdn4VkC0UdL88a9yRd+TfJkVJEGCJEiCBEmQIAmSIEESJEGCJEiQBEmQIAmSIEESJEGCJEiQBEmQIAmSIEESJEiCJEiQBEmQIAmSIEESJEiCJEiQBEmQIAkSJFMASZAg/U3rx88U+8qJKW1NbLm7PReNrCC9iJehI7vrmwb6v+YdqHpgV7208YF9mcb5SWkhLYVxMz4YOXlwsX9wSyPPQMMnxpZaT2+l8Z6FJOlsh/rFmXabw3jYfrIwM9+bNJNcnQJTrpSbW/cOrLWBwiq6FB9k6Uy/eEzaoTDOh1HbMTqY18W0GMbtAHQ1rTdM++DFuP9OtMb+HN491gPObNpvmuZ2l6uc2CxI/1odb3eykgQJkiBBEiRBgiRIggRJkCAp830XYABd2IbZvLB5+AAAAABJRU5ErkJggg==);

@popover-arrow: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABMCAYAAACPiIzuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTNFODNCNTE0QTZFMjExQjY2OUE2RUJCODYzRjA1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMzdGN0JCRUE2QTQxMUUyOUFDOUJDNzA3QUQ2RDI5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMzdGN0JCREE2QTQxMUUyOUFDOUJDNzA3QUQ2RDI5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyM0U4M0I1MTRBNkUyMTFCNjY5QTZFQkI4NjNGMDVEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxM0U4M0I1MTRBNkUyMTFCNjY5QTZFQkI4NjNGMDVEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FMRF/AAAA6FJREFUeNrsl11IFFEUx1fdolbX/XBLM/tAt6JwtVo17CHooaAHCwvTwhJEkkgUEYyKIBCl3HwIfIko6JMUesgeLEstKwTZMtLwgyxDw7CHXfNbW+wcuXcYh5n1zp2FKBw4zJ2P/e25d84953+C5ubmdIE6gpZgfxl2ZfyOJkCp4YQwDtYF8AgoTK8VkJSUpMqzXLBn5KzJs4tgWWRcAmYDq+RZswsI6qvrML4sehRN7uWAFauFnQM7joMvTzrNw+2Doa/P1kWRZ3lgBaywUrBsHKBHnp7hFTgeav1qbL1UH0neOQ2WvxiskExFh56gR+KHA0294W5Xo036rhxM+Df0AD2RmwpM2/KhuiWCzuJoS9FhKUxYh7aKhlXogb9P3Fvbbv14/a2VXJYBcD+F2egXelfVZOt/2mVmCdbu++6IzputFnKZRWGpOMAQ6HvcYVET/f31Xaax7yMYq7vAuzUIe44P4g46RuPzUn+ygkKjwmc3ZWz3hK01/YbLh7V7rg0hbIpOc9vJFC8LMCzGPGM/kujZkrlzBEFgVeIP0MAKDN9onbanJ4hBLvBqQhoaCCzyB0RQbFq8d3PGjl8EVAGgKaWgfUFDBIGOU7sFoNlum7KnJ3pEoDIw32JZo5kAq7dmJ3vxxuCrz8Z9N44NkOcUpKoG7EWg5N4DsHLxDZgmUwpqJturmVzfloLUJsc3xAxgE4GqAYogt9v9D5S6JRX0P8GYglYsTqQHpOsQOGWCLdOkggCEFeoMLSh6DaAQCuqpeW/Sqs/OU1D3PbfVN+sL1nN6JSgkKI/m6ZFJPdfeBNAChTQ26F3OtdEBVCKnkFTDAFRIpaicQmIO2sqJuwfgdJUqJCVhw+pZJotCYoVhgdaZ4mwzhtXGWa2wGqyXKAlQrKBo4YZBbfQRcTIPRNESGm2a4a4BRJy4BGB6ghfVEHdBISLlMgXGHXIsAKreAQDE9aoQA43rLdORznXjTHEml89I1pjf7D/avq2MStkwyQ0TQYX+KsjpdGpO1wBMhpMXJVUuifAaWI9b/n4k1hVKcYaZIAbP8A+lmrSGtAUEYDE3TK4FBGABF0ypBQRgviZJJW0BAZijSZ/5awG5xJ5SC8itHOVaQE0yVNoCcsPkWkAuFYQ5ClOLtAVUDZPp3Fzizo0ZptAC+lSLPWwBY9McXsjto2SNylQrR+wppS0gD4i2iJ/ELSCAyrXkM6EF9Adi8gzTNgSkgTbtWjLtHwEGAIab1RKaLSq+AAAAAElFTkSuQmCC);

// Network
@network-header-text: @grey;

// Resources
@resources-background: #252525;
@resources-text      : #aaa;

// Help/Settings Overlay
@helpSettings-background: #444;
@helpSettings-border    : #444;

error: pathspec 'themes/s10wen-monokai.less' did not match any file(s) known to git


Create landing.less

Create landing.less

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400);

body {
  background: #000;
}

a {
  color: #ff0;
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  .hi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    color: #fff;

    font-family: 'Roboto Slab', serif;
    font-size: 24px;
    line-height: 26px;
    text-align: center;

    span {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}

.tv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  .screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    margin: auto;

    opacity: 0;
    transition: opacity .5s;

    &.active {
      opacity: 1;
    }
  }
}

error: pathspec 'css/landing.less' did not match any file(s) known to git


Create larger.less

Create larger.less

// Icon Sizes
// -------------------------

/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }

error: pathspec 'font-awesome/less/larger.less' did not match any file(s) known to git


[清空购物车活动]调整样式

[清空购物车活动]调整样式

(cherry picked from commit d4a7ca7)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/psychokiller666/heishi.git/'


Article: margins of elements set to 3em (1.5 x 2) due to font size of paragraphs being 1.5

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/putterschool/styleguide.git/'


changed the background color for the active item

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


Finetuned colors a little bit

Finetuned colors a little bit

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Quinten/supernapietheme.git/'


a gray line like HR tag, but without margin top


Fix #2435 Flex fields do not allow wrap on mobile

/*!
 * # Semantic UI - Form
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'collection';
@element : 'form';

@import (multiple) '../../theme.config';

/*******************************
            Elements
*******************************/

/*--------------------
        Form
---------------------*/

.ui.form {
  position: relative;
  max-width: 100%;
}

/*--------------------
        Content
---------------------*/

.ui.form > p {
  margin: @paragraphMargin;
}

/*--------------------
        Field
---------------------*/

.ui.form .fields .field,
.ui.form .field {
  clear: both;
  margin: @fieldMargin;
}
.ui.form .field .field,
.ui.form .field:last-child,
.ui.form .fields:last-child .field {
  margin-bottom: 0em;
}

/*--------------------
        Labels
---------------------*/

.ui.form .field > label {
  display: block;
  margin: @labelMargin;
  color: @labelColor;
  font-size: @labelFontSize;
  font-weight: @labelFontWeight;
  text-transform: @labelTextTransform;
}

/*--------------------
    Standard Inputs
---------------------*/

.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"],
.ui.form .ui.input {
  width: 100%;
  vertical-align: top;
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"] {
  font-family: @inputFont;
  margin: 0em;
  outline: none;
  -webkit-appearance: none;
  tap-highlight-color:  rgba(255, 255, 255, 0);

  line-height: @inputLineHeight;
  padding: @inputPadding;
  font-size: @inputFontSize;

  background: @inputBackground;
  border: @inputBorder;
  color: @inputColor;
  border-radius: @inputBorderRadius;
  box-shadow: @inputBoxShadow;
  transition: @inputTransition;
}

/* Collapse Flex */
.ui.form .ui.input > input {
  width: 0px !important;
}

/* Text Area */
.ui.form textarea {
  margin: 0em;
  -webkit-appearance: none;
  tap-highlight-color:  rgba(255, 255, 255, 0);

  padding: @textAreaPadding;
  font-size: @textAreaFontSize;
  background: @textAreaBackground;
  border: @textAreaBorder;
  outline: none;
  color: @inputColor;
  border-radius: @inputBorderRadius;
  box-shadow: @inputBoxShadow;
  transition: @textAreaTransition;
  font-size: @textAreaFontSize;
  line-height: @textAreaLineHeight;
  resize: @textAreaResize;
}
.ui.form textarea:not([rows]) {
  height: @textAreaHeight;
  min-height: @textAreaMinHeight;
  max-height: @textAreaMaxHeight;
}

.ui.form textarea,
.ui.form input[type="checkbox"] {
  vertical-align: @checkboxVerticalAlign;
}

/*--------------------------
  Input w/ attached Button
---------------------------*/

.ui.form input.attached {
  width: auto;
}

/*--------------------
     Basic Select
---------------------*/

.ui.form select {
  display: block;
  height: auto;
  width: 100%;
  background: @selectBackground;
  border: @selectBorder;
  border-radius: @selectBorderRadius;
  box-shadow: @selectBoxShadow;
  padding: @selectPadding;
  color: @selectColor;
  transition: @selectTransition;
}

/*--------------------
       Dropdown
---------------------*/

.ui.form .field > .selection.dropdown {
  width: 100%;
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
  float: right;
}

.ui.form .inline.field > .selection.dropdown {
  width: auto;
}
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  float: none;
}

/*--------------------
       Dividers
---------------------*/

.ui.form .divider {
  clear: both;
  margin: @dividerMargin;
}

/*--------------------
   Types of Messages
---------------------*/

.ui.form .success.message,
.ui.form .warning.message,
.ui.form .error.message {
  display: none;
}

/* Assumptions */
.ui.form .message:first-child {
  margin-top: 0px;
}

/*--------------------
   Validation Prompt
---------------------*/

.ui.form .field .prompt.label {
  white-space: nowrap;
}
.ui.form .inline.field .prompt {
  margin: @inlineValidationMargin;
}
.ui.form .inline.field .prompt:before {
  margin-top: @inlineValidationArrowOffset;
  bottom: auto;
  right: auto;
  top: 50%;
  left: 0em;
}

/*******************************
            States
*******************************/

/*--------------------
      Autofilled
---------------------*/

.ui.form .field.field input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
  border-color: @inputAutoFillBorder !important;
}

/* Focus */
.ui.form .field.field input:-webkit-autofill:focus {
  box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
  border-color: @inputAutoFillFocusBorder !important;
}

/* Error */
.ui.form .error.error input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
  border-color: @inputAutoFillErrorBorder !important;
}

/*--------------------
      Placeholder
---------------------*/

/* browsers require these rules separate */
.ui.form ::-webkit-input-placeholder {
  color: @inputPlaceholderColor;
}
.ui.form ::-ms-input-placeholder {
  color: @inputPlaceholderColor;
}
.ui.form ::-moz-placeholder {
  color: @inputPlaceholderColor;
}

.ui.form :focus::-webkit-input-placeholder {
  color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-ms-input-placeholder {
  color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-moz-placeholder {
  color: @inputPlaceholderFocusColor;
}

/* Error Placeholder */
.ui.form .error ::-webkit-input-placeholder {
  color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-ms-input-placeholder {
  color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-moz-placeholder {
  color: @inputErrorPlaceholderColor;
}

.ui.form .error :focus::-webkit-input-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-ms-input-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-moz-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}

/*--------------------
        Focus
---------------------*/

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="url"]:focus {
  color: @inputFocusColor;
  border-color: @inputFocusBorderColor;
  border-radius: @inputFocusBorderRadius;
  background: @inputFocusBackground;
  box-shadow: @inputFocusBoxShadow;
}
.ui.form textarea:focus {
  color: @textAreaFocusColor;
  border-color: @textAreaFocusBorderColor;
  border-radius: @textAreaFocusBorderRadius;
  background: @textAreaFocusBackground;
  box-shadow: @textAreaFocusBoxShadow;
  -webkit-appearance: none;
}

/*--------------------
        Success
---------------------*/

/* On Form */
.ui.form.success .success.message {
  display: block;
}
.ui.form.success .icon.success.message {
  display: flex;
}

/*--------------------
        Error
---------------------*/

/* On Form */
.ui.form.warning .warning.message {
  display: block;
}
.ui.form.warning .icon.warning.message {
  display: flex;
}

/*--------------------
        Warning
---------------------*/

/* On Form */
.ui.form.error .error.message {
  display: block;
}
.ui.form.error .icon.error.message {
  display: flex;
}

/* On Field(s) */
.ui.form .fields.error .field label,
.ui.form .field.error label,
.ui.form .fields.error .field .input,
.ui.form .field.error .input {
  color: @formErrorColor;
}

.ui.form .fields.error .field .corner.label,
.ui.form .field.error .corner.label {
  border-color: @formErrorColor;
  color: @white;
}

.ui.form .fields.error .field textarea,
.ui.form .fields.error .field select,
.ui.form .fields.error .field input:not([type]),
.ui.form .fields.error .field input[type="date"],
.ui.form .fields.error .field input[type="datetime-local"],
.ui.form .fields.error .field input[type="email"],
.ui.form .fields.error .field input[type="number"],
.ui.form .fields.error .field input[type="password"],
.ui.form .fields.error .field input[type="search"],
.ui.form .fields.error .field input[type="tel"],
.ui.form .fields.error .field input[type="time"],
.ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="url"],
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input:not([type]),
.ui.form .field.error input[type="date"],
.ui.form .field.error input[type="datetime-local"],
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="url"] {
  background: @formErrorBackground;
  border-color: @formErrorBorder;
  color: @formErrorColor;
  border-radius: @inputErrorBorderRadius;
  box-shadow: @inputErrorBoxShadow;
}
.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus,
.ui.form .field.error input:not([type]):focus,
.ui.form .field.error input[type="date"]:focus,
.ui.form .field.error input[type="datetime-local"]:focus,
.ui.form .field.error input[type="email"]:focus,
.ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="password"]:focus,
.ui.form .field.error input[type="search"]:focus,
.ui.form .field.error input[type="tel"]:focus,
.ui.form .field.error input[type="time"]:focus,
.ui.form .field.error input[type="text"]:focus,
.ui.form .field.error input[type="url"]:focus {
  background: @inputErrorFocusBackground;
  border-color: @inputErrorFocusBorder;
  color: @inputErrorFocusColor;

  -webkit-appearance: none;
  box-shadow: @inputErrorFocusBoxShadow;
}

/* Preserve Native Select Stylings */
.ui.form .field.error select {
  -webkit-appearance: menulist-button;
}

/*------------------
    Dropdown Error
--------------------*/

.ui.form .fields.error .field .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown .item,
.ui.form .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown .text,
.ui.form .field.error .ui.dropdown .item {
  background: @formErrorBackground;
  color: @formErrorColor;
}
.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown {
  border-color: @formErrorBorder !important;
}
.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
  border-color: @formErrorBorder !important;
}
.ui.form .fields.error .field .ui.dropdown:hover .menu,
.ui.form .field.error .ui.dropdown:hover .menu {
  border-color: @formErrorBorder;
}
.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.error .ui.multiple.selection.dropdown > .label {
  background-color: @dropdownErrorLabelBackground;
  color: @dropdownErrorLabelColor;
}

/* Hover */
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
  background-color: @dropdownErrorHoverBackground;
}

/* Selected */
.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
.ui.form .field.error .ui.dropdown .menu .selected.item {
  background-color: @dropdownErrorSelectedBackground;
}

/* Active */
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
  background-color: @dropdownErrorActiveBackground !important;
}

/*--------------------
    Checkbox Error
---------------------*/

.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
  color: @formErrorColor;
}
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
  background: @formErrorBackground;
  border-color: @formErrorBorder;
}
.ui.form .fields.error .field .checkbox label:after,
.ui.form .field.error .checkbox label:after,
.ui.form .fields.error .field .checkbox .box:after,
.ui.form .field.error .checkbox .box:after {
  color: @formErrorColor;
}

/*--------------------
       Disabled
---------------------*/

.ui.form .disabled.fields .field,
.ui.form .disabled.field,
.ui.form .field :disabled {
  opacity: @disabledOpacity;
}
.ui.form .field.disabled label {
  opacity: @disabledLabelOpacity;
}
.ui.form .field.disabled :disabled {
  opacity: 1;
}

/*--------------
    Loading
---------------*/

.ui.loading.form {
  position: relative;
  cursor: default;
  point-events: none;
  text-shadow: none !important;
  color: transparent !important;
  transition: all 0s linear;
  z-index: 100;
}
.ui.loading.form:before {
  position: absolute;
  content: '';
  top: 0%;
  left: 0%;
  background: @loaderDimmerColor;
  width: 100%;
  height: 100%;
  z-index: @loaderDimmerZIndex;
}
.ui.loading.form:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;

  margin: @loaderMargin;
  width: @loaderSize;
  height: @loaderSize;

  animation: form-spin @loaderSpeed linear;
  animation-iteration-count: infinite;

  border-radius: @circularRadius;

  border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
  border-style: solid;
  border-width: @loaderLineWidth;

  box-shadow: 0px 0px 0px 1px transparent;
  visibility: visible;
  z-index: @loaderLineZIndex;
}

@keyframes form-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*******************************
         Element Types
*******************************/

/*--------------------
     Required Field
---------------------*/

.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
  margin: @requiredMargin;
  content: @requiredContent;
  color: @requiredColor;
}

.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after {
  display: inline-block;
  vertical-align: top;
}

.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
  position: absolute;
  top: 0%;
  left: 100%;
}

/*******************************
           Variations
*******************************/

/*--------------------
    Inverted Colors
---------------------*/

.ui.inverted.form label,
.ui.form .inverted.segment label,
.ui.form .inverted.segment .ui.checkbox label,
.ui.form .inverted.segment .ui.checkbox .box,
.ui.inverted.form .ui.checkbox label,
.ui.inverted.form .ui.checkbox .box {
  color: @invertedLabelColor;
}

/*--------------------
     Field Groups
---------------------*/

/* Grouped Vertically */
.ui.form .grouped.fields {
  display: block;
  margin: @groupedMargin;
}
.ui.form .grouped.fields:last-child {
  margin-bottom: 0em;
}

.ui.form .grouped.fields > label {
  margin: @groupedLabelMargin;
  color: @groupedLabelColor;
  font-size: @groupedLabelFontSize;
  font-weight: @groupedLabelFontWeight;
  text-transform: @groupedLabelTextTransform;
}

.ui.form .grouped.fields .field,
.ui.form .grouped.inline.fields .field {
  display: block;
  margin: @groupedFieldMargin;
  padding: 0em;
}

/*--------------------
        Fields
---------------------*/

/* Split fields */
.ui.form .fields {
  display: flex;
  flex-direction: row;
}
.ui.form .fields > .field {
  flex: 0 1 auto;
  padding-left: (@gutterWidth / 2);
  padding-right: (@gutterWidth / 2);
}
.ui.form .fields > .field:first-child {
  border-left: none;
  box-shadow: none;
}

/* Other Combinations */
.ui.form .two.fields > .fields,
.ui.form .two.fields > .field {
  width: @twoColumn;
}
.ui.form .three.fields > .fields,
.ui.form .three.fields > .field {
  width: @threeColumn;
}
.ui.form .four.fields > .fields,
.ui.form .four.fields > .field {
  width: @fourColumn;
}
.ui.form .five.fields > .fields,
.ui.form .five.fields > .field {
  width: @fiveColumn;
}
.ui.form .six.fields > .fields,
.ui.form .six.fields > .field {
  width: @sixColumn;
}
.ui.form .seven.fields > .fields,
.ui.form .seven.fields > .field {
  width: @sevenColumn;
}
.ui.form .eight.fields > .fields,
.ui.form .eight.fields > .field {
  width: @eightColumn;
}
.ui.form .nine.fields > .fields,
.ui.form .nine.fields > .field {
  width: @nineColumn;
}
.ui.form .ten.fields > .fields,
.ui.form .ten.fields > .field {
  width: @tenColumn;
}

/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.form .fields {
    flex-wrap: wrap;
  }
  .ui.form .two.fields > .fields,
  .ui.form .two.fields > .field,
  .ui.form .three.fields > .fields,
  .ui.form .three.fields > .field,
  .ui.form .four.fields > .fields,
  .ui.form .four.fields > .field,
  .ui.form .five.fields > .fields,
  .ui.form .five.fields > .field,
  .ui.form .six.fields > .fields,
  .ui.form .six.fields > .field,
  .ui.form .seven.fields > .fields,
  .ui.form .seven.fields > .field,
  .ui.form .eight.fields > .fields,
  .ui.form .eight.fields > .field,
  .ui.form .nine.fields > .fields,
  .ui.form .nine.fields > .field,
  .ui.form .ten.fields > .fields,
  .ui.form .ten.fields > .field {
    width: @oneColumn !important;
    margin: @fieldMargin;
    padding-left: 0%;
    padding-right: 0%;
  }
}

.ui.form .fields .field:first-child {
  padding-left: 0%;
}
.ui.form .fields .field:last-child {
  padding-right: 0%;
}

/* Sizing Combinations */

.ui.form .fields .wide.field {
  width: @oneWide;
  padding-left: (@gutterWidth / 2);
  padding-right: (@gutterWidth / 2);
}
.ui.form .fields .wide.field:first-child {
  padding-left: 0%;
}
.ui.form .fields .wide.field:last-child {
  padding-right: 0%;
}

.ui.form .one.wide.field {
  width: @oneWide !important;
}
.ui.form .two.wide.field {
  width: @twoWide !important;
}
.ui.form .three.wide.field {
  width: @threeWide !important;
}
.ui.form .four.wide.field {
  width: @fourWide !important;
}
.ui.form .five.wide.field {
  width: @fiveWide !important;
}
.ui.form .six.wide.field {
  width: @sixWide !important;
}
.ui.form .seven.wide.field {
  width: @sevenWide !important;
}
.ui.form .eight.wide.field {
  width: @eightWide !important;
}
.ui.form .nine.wide.field {
  width: @nineWide !important;
}
.ui.form .ten.wide.field {
  width: @tenWide !important;
}
.ui.form .eleven.wide.field {
  width: @elevenWide !important;
}
.ui.form .twelve.wide.field {
  width: @twelveWide !important;
}
.ui.form .thirteen.wide.field {
  width: @thirteenWide !important;
}
.ui.form .fourteen.wide.field {
  width: @fourteenWide !important;
}
.ui.form .fifteen.wide.field {
  width: @fifteenWide !important;
}
.ui.form .sixteen.wide.field {
  width: @sixteenWide !important;
}

/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.form .two.fields > .fields,
  .ui.form .two.fields > .field,
  .ui.form .three.fields > .fields,
  .ui.form .three.fields > .field,
  .ui.form .four.fields > .fields,
  .ui.form .four.fields > .field,
  .ui.form .five.fields > .fields,
  .ui.form .five.fields > .field,
  .ui.form .fields > .two.wide.field,
  .ui.form .fields > .three.wide.field,
  .ui.form .fields > .four.wide.field,
  .ui.form .fields > .five.wide.field,
  .ui.form .fields > .six.wide.field,
  .ui.form .fields > .seven.wide.field,
  .ui.form .fields > .eight.wide.field,
  .ui.form .fields > .nine.wide.field,
  .ui.form .fields > .ten.wide.field,
  .ui.form .fields > .eleven.wide.field,
  .ui.form .fields > .twelve.wide.field,
  .ui.form .fields > .thirteen.wide.field,
  .ui.form .fields > .fourteen.wide.field,
  .ui.form .fields > .fifteen.wide.field,
  .ui.form .fields > .sixteen.wide.field {
    width: @oneColumn !important;
    margin: @fieldMargin;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*--------------------
    Inline Fields
---------------------*/

.ui.form .inline.fields {
  margin: @fieldMargin;
  align-items: center;
}
.ui.form .inline.fields .field {
  margin: 0em;
  padding: @inlineFieldsMargin;
}

/* Inline Label */
.ui.form .inline.fields > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.field > label,
.ui.form .inline.field > p {
  display: inline-block;
  width: auto;
  margin-top: 0em;
  margin-bottom: 0em;
  vertical-align: middle;
  font-size: @inlineLabelFontSize;
  font-weight: @inlineLabelFontWeight;
  color: @inlineLabelColor;
  text-transform: @inlineLabelTextTransform;
}

/* Grouped Inline Label */
.ui.form .inline.fields > label {
  margin: @groupedInlineLabelMargin;
}

/* Inline Input */
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > select,
.ui.form .inline.fields .field > .ui.input,
.ui.form .inline.field > input,
.ui.form .inline.field > select,
.ui.form .inline.field > .ui.input {
  display: inline-block;
  width: auto;

  margin-top: 0em;
  margin-bottom: 0em;

  vertical-align: middle;
  font-size: @inlineInputSize;
}

/* Label */
.ui.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
  margin: 0em @inlineLabelDistance 0em 0em;
}
.ui.form .inline.fields .field > :only-child,
.ui.form .inline.field > :only-child {
  margin: 0em;
}

/* Wide */
.ui.form .inline.fields .wide.field {
  display: flex;
  align-items: center;
}
.ui.form .inline.fields .wide.field > input,
.ui.form .inline.fields .wide.field > select,
.ui.form .inline.fields .wide.field > .ui.input {
  width: 100%;
}

/*--------------------
        Sizes
---------------------*/

/* Standard */
.ui.small.form {
  font-size: @small;
}

/* Medium */
.ui.form {
  font-size: @medium;
}

/* Large */
.ui.large.form {
  font-size: @large;
}

/* Huge */
.ui.huge.form {
  font-size: @huge;
}

.loadUIOverrides();

/*!
 * # Semantic UI - Form
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'collection';
@element : 'form';

@import (multiple) '../../theme.config';

/*******************************
            Elements
*******************************/

/*--------------------
        Form
---------------------*/

.ui.form {
  position: relative;
  max-width: 100%;
}

/*--------------------
        Content
---------------------*/

.ui.form > p {
  margin: @paragraphMargin;
}

/*--------------------
        Field
---------------------*/

.ui.form .fields .field,
.ui.form .field {
  clear: both;
  margin: @fieldMargin;
}
.ui.form .field .field,
.ui.form .field:last-child,
.ui.form .fields:last-child .field {
  margin-bottom: 0em;
}

/*--------------------
        Labels
---------------------*/

.ui.form .field > label {
  display: block;
  margin: @labelMargin;
  color: @labelColor;
  font-size: @labelFontSize;
  font-weight: @labelFontWeight;
  text-transform: @labelTextTransform;
}

/*--------------------
    Standard Inputs
---------------------*/

.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"],
.ui.form .ui.input {
  width: 100%;
  vertical-align: top;
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"] {
  font-family: @inputFont;
  margin: 0em;
  outline: none;
  -webkit-appearance: none;
  tap-highlight-color:  rgba(255, 255, 255, 0);

  line-height: @inputLineHeight;
  padding: @inputPadding;
  font-size: @inputFontSize;

  background: @inputBackground;
  border: @inputBorder;
  color: @inputColor;
  border-radius: @inputBorderRadius;
  box-shadow: @inputBoxShadow;
  transition: @inputTransition;
}

/* Collapse Flex */
.ui.form .ui.input > input {
  width: 0px !important;
}

/* Text Area */
.ui.form textarea {
  margin: 0em;
  -webkit-appearance: none;
  tap-highlight-color:  rgba(255, 255, 255, 0);

  padding: @textAreaPadding;
  font-size: @textAreaFontSize;
  background: @textAreaBackground;
  border: @textAreaBorder;
  outline: none;
  color: @inputColor;
  border-radius: @inputBorderRadius;
  box-shadow: @inputBoxShadow;
  transition: @textAreaTransition;
  font-size: @textAreaFontSize;
  line-height: @textAreaLineHeight;
  resize: @textAreaResize;
}
.ui.form textarea:not([rows]) {
  height: @textAreaHeight;
  min-height: @textAreaMinHeight;
  max-height: @textAreaMaxHeight;
}

.ui.form textarea,
.ui.form input[type="checkbox"] {
  vertical-align: @checkboxVerticalAlign;
}

/*--------------------------
  Input w/ attached Button
---------------------------*/

.ui.form input.attached {
  width: auto;
}

/*--------------------
     Basic Select
---------------------*/

.ui.form select {
  display: block;
  height: auto;
  width: 100%;
  background: @selectBackground;
  border: @selectBorder;
  border-radius: @selectBorderRadius;
  box-shadow: @selectBoxShadow;
  padding: @selectPadding;
  color: @selectColor;
  transition: @selectTransition;
}

/*--------------------
       Dropdown
---------------------*/

.ui.form .field > .selection.dropdown {
  width: 100%;
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
  float: right;
}

.ui.form .inline.field > .selection.dropdown {
  width: auto;
}
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  float: none;
}

/*--------------------
       Dividers
---------------------*/

.ui.form .divider {
  clear: both;
  margin: @dividerMargin;
}

/*--------------------
   Types of Messages
---------------------*/

.ui.form .success.message,
.ui.form .warning.message,
.ui.form .error.message {
  display: none;
}

/* Assumptions */
.ui.form .message:first-child {
  margin-top: 0px;
}

/*--------------------
   Validation Prompt
---------------------*/

.ui.form .field .prompt.label {
  white-space: nowrap;
}
.ui.form .inline.field .prompt {
  margin: @inlineValidationMargin;
}
.ui.form .inline.field .prompt:before {
  margin-top: @inlineValidationArrowOffset;
  bottom: auto;
  right: auto;
  top: 50%;
  left: 0em;
}

/*******************************
            States
*******************************/

/*--------------------
      Autofilled
---------------------*/

.ui.form .field.field input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
  border-color: @inputAutoFillBorder !important;
}

/* Focus */
.ui.form .field.field input:-webkit-autofill:focus {
  box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
  border-color: @inputAutoFillFocusBorder !important;
}

/* Error */
.ui.form .error.error input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
  border-color: @inputAutoFillErrorBorder !important;
}

/*--------------------
      Placeholder
---------------------*/

/* browsers require these rules separate */
.ui.form ::-webkit-input-placeholder {
  color: @inputPlaceholderColor;
}
.ui.form ::-ms-input-placeholder {
  color: @inputPlaceholderColor;
}
.ui.form ::-moz-placeholder {
  color: @inputPlaceholderColor;
}

.ui.form :focus::-webkit-input-placeholder {
  color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-ms-input-placeholder {
  color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-moz-placeholder {
  color: @inputPlaceholderFocusColor;
}

/* Error Placeholder */
.ui.form .error ::-webkit-input-placeholder {
  color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-ms-input-placeholder {
  color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-moz-placeholder {
  color: @inputErrorPlaceholderColor;
}

.ui.form .error :focus::-webkit-input-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-ms-input-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-moz-placeholder {
  color: @inputErrorPlaceholderFocusColor;
}

/*--------------------
        Focus
---------------------*/

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="url"]:focus {
  color: @inputFocusColor;
  border-color: @inputFocusBorderColor;
  border-radius: @inputFocusBorderRadius;
  background: @inputFocusBackground;
  box-shadow: @inputFocusBoxShadow;
}
.ui.form textarea:focus {
  color: @textAreaFocusColor;
  border-color: @textAreaFocusBorderColor;
  border-radius: @textAreaFocusBorderRadius;
  background: @textAreaFocusBackground;
  box-shadow: @textAreaFocusBoxShadow;
  -webkit-appearance: none;
}

/*--------------------
        Success
---------------------*/

/* On Form */
.ui.form.success .success.message {
  display: block;
}
.ui.form.success .icon.success.message {
  display: flex;
}

/*--------------------
        Error
---------------------*/

/* On Form */
.ui.form.warning .warning.message {
  display: block;
}
.ui.form.warning .icon.warning.message {
  display: flex;
}

/*--------------------
        Warning
---------------------*/

/* On Form */
.ui.form.error .error.message {
  display: block;
}
.ui.form.error .icon.error.message {
  display: flex;
}

/* On Field(s) */
.ui.form .fields.error .field label,
.ui.form .field.error label,
.ui.form .fields.error .field .input,
.ui.form .field.error .input {
  color: @formErrorColor;
}

.ui.form .fields.error .field .corner.label,
.ui.form .field.error .corner.label {
  border-color: @formErrorColor;
  color: @white;
}

.ui.form .fields.error .field textarea,
.ui.form .fields.error .field select,
.ui.form .fields.error .field input:not([type]),
.ui.form .fields.error .field input[type="date"],
.ui.form .fields.error .field input[type="datetime-local"],
.ui.form .fields.error .field input[type="email"],
.ui.form .fields.error .field input[type="number"],
.ui.form .fields.error .field input[type="password"],
.ui.form .fields.error .field input[type="search"],
.ui.form .fields.error .field input[type="tel"],
.ui.form .fields.error .field input[type="time"],
.ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="url"],
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error input:not([type]),
.ui.form .field.error input[type="date"],
.ui.form .field.error input[type="datetime-local"],
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="url"] {
  background: @formErrorBackground;
  border-color: @formErrorBorder;
  color: @formErrorColor;
  border-radius: @inputErrorBorderRadius;
  box-shadow: @inputErrorBoxShadow;
}
.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus,
.ui.form .field.error input:not([type]):focus,
.ui.form .field.error input[type="date"]:focus,
.ui.form .field.error input[type="datetime-local"]:focus,
.ui.form .field.error input[type="email"]:focus,
.ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="password"]:focus,
.ui.form .field.error input[type="search"]:focus,
.ui.form .field.error input[type="tel"]:focus,
.ui.form .field.error input[type="time"]:focus,
.ui.form .field.error input[type="text"]:focus,
.ui.form .field.error input[type="url"]:focus {
  background: @inputErrorFocusBackground;
  border-color: @inputErrorFocusBorder;
  color: @inputErrorFocusColor;

  -webkit-appearance: none;
  box-shadow: @inputErrorFocusBoxShadow;
}

/* Preserve Native Select Stylings */
.ui.form .field.error select {
  -webkit-appearance: menulist-button;
}

/*------------------
    Dropdown Error
--------------------*/

.ui.form .fields.error .field .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown .item,
.ui.form .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown .text,
.ui.form .field.error .ui.dropdown .item {
  background: @formErrorBackground;
  color: @formErrorColor;
}
.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown {
  border-color: @formErrorBorder !important;
}
.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
  border-color: @formErrorBorder !important;
}
.ui.form .fields.error .field .ui.dropdown:hover .menu,
.ui.form .field.error .ui.dropdown:hover .menu {
  border-color: @formErrorBorder;
}
.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.error .ui.multiple.selection.dropdown > .label {
  background-color: @dropdownErrorLabelBackground;
  color: @dropdownErrorLabelColor;
}

/* Hover */
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
  background-color: @dropdownErrorHoverBackground;
}

/* Selected */
.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
.ui.form .field.error .ui.dropdown .menu .selected.item {
  background-color: @dropdownErrorSelectedBackground;
}

/* Active */
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
  background-color: @dropdownErrorActiveBackground !important;
}

/*--------------------
    Checkbox Error
---------------------*/

.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
  color: @formErrorColor;
}
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
  background: @formErrorBackground;
  border-color: @formErrorBorder;
}
.ui.form .fields.error .field .checkbox label:after,
.ui.form .field.error .checkbox label:after,
.ui.form .fields.error .field .checkbox .box:after,
.ui.form .field.error .checkbox .box:after {
  color: @formErrorColor;
}

/*--------------------
       Disabled
---------------------*/

.ui.form .disabled.fields .field,
.ui.form .disabled.field,
.ui.form .field :disabled {
  opacity: @disabledOpacity;
}
.ui.form .field.disabled label {
  opacity: @disabledLabelOpacity;
}
.ui.form .field.disabled :disabled {
  opacity: 1;
}

/*--------------
    Loading
---------------*/

.ui.loading.form {
  position: relative;
  cursor: default;
  point-events: none;
  text-shadow: none !important;
  color: transparent !important;
  transition: all 0s linear;
  z-index: 100;
}
.ui.loading.form:before {
  position: absolute;
  content: '';
  top: 0%;
  left: 0%;
  background: @loaderDimmerColor;
  width: 100%;
  height: 100%;
  z-index: @loaderDimmerZIndex;
}
.ui.loading.form:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;

  margin: @loaderMargin;
  width: @loaderSize;
  height: @loaderSize;

  animation: form-spin @loaderSpeed linear;
  animation-iteration-count: infinite;

  border-radius: @circularRadius;

  border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
  border-style: solid;
  border-width: @loaderLineWidth;

  box-shadow: 0px 0px 0px 1px transparent;
  visibility: visible;
  z-index: @loaderLineZIndex;
}

@keyframes form-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*******************************
         Element Types
*******************************/

/*--------------------
     Required Field
---------------------*/

.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
  margin: @requiredMargin;
  content: @requiredContent;
  color: @requiredColor;
}

.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after {
  display: inline-block;
  vertical-align: top;
}

.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
  position: absolute;
  top: 0%;
  left: 100%;
}

/*******************************
           Variations
*******************************/

/*--------------------
    Inverted Colors
---------------------*/

.ui.inverted.form label,
.ui.form .inverted.segment label,
.ui.form .inverted.segment .ui.checkbox label,
.ui.form .inverted.segment .ui.checkbox .box,
.ui.inverted.form .ui.checkbox label,
.ui.inverted.form .ui.checkbox .box {
  color: @invertedLabelColor;
}

/*--------------------
     Field Groups
---------------------*/

/* Grouped Vertically */
.ui.form .grouped.fields {
  display: block;
  margin: @groupedMargin;
}
.ui.form .grouped.fields:last-child {
  margin-bottom: 0em;
}

.ui.form .grouped.fields > label {
  margin: @groupedLabelMargin;
  color: @groupedLabelColor;
  font-size: @groupedLabelFontSize;
  font-weight: @groupedLabelFontWeight;
  text-transform: @groupedLabelTextTransform;
}

.ui.form .grouped.fields .field,
.ui.form .grouped.inline.fields .field {
  display: block;
  margin: @groupedFieldMargin;
  padding: 0em;
}

/*--------------------
        Fields
---------------------*/

/* Split fields */
.ui.form .fields {
  display: flex;
  flex-direction: row;
}
.ui.form .fields > .field {
  flex: 0 1 auto;
  padding-left: (@gutterWidth / 2);
  padding-right: (@gutterWidth / 2);
}
.ui.form .fields > .field:first-child {
  border-left: none;
  box-shadow: none;
}

/* Other Combinations */
.ui.form .two.fields > .fields,
.ui.form .two.fields > .field {
  width: @twoColumn;
}
.ui.form .three.fields > .fields,
.ui.form .three.fields > .field {
  width: @threeColumn;
}
.ui.form .four.fields > .fields,
.ui.form .four.fields > .field {
  width: @fourColumn;
}
.ui.form .five.fields > .fields,
.ui.form .five.fields > .field {
  width: @fiveColumn;
}
.ui.form .six.fields > .fields,
.ui.form .six.fields > .field {
  width: @sixColumn;
}
.ui.form .seven.fields > .fields,
.ui.form .seven.fields > .field {
  width: @sevenColumn;
}
.ui.form .eight.fields > .fields,
.ui.form .eight.fields > .field {
  width: @eightColumn;
}
.ui.form .nine.fields > .fields,
.ui.form .nine.fields > .field {
  width: @nineColumn;
}
.ui.form .ten.fields > .fields,
.ui.form .ten.fields > .field {
  width: @tenColumn;
}

/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.form .two.fields > .fields,
  .ui.form .two.fields > .field,
  .ui.form .three.fields > .fields,
  .ui.form .three.fields > .field,
  .ui.form .four.fields > .fields,
  .ui.form .four.fields > .field,
  .ui.form .five.fields > .fields,
  .ui.form .five.fields > .field,
  .ui.form .six.fields > .fields,
  .ui.form .six.fields > .field,
  .ui.form .seven.fields > .fields,
  .ui.form .seven.fields > .field,
  .ui.form .eight.fields > .fields,
  .ui.form .eight.fields > .field,
  .ui.form .nine.fields > .fields,
  .ui.form .nine.fields > .field,
  .ui.form .ten.fields > .fields,
  .ui.form .ten.fields > .field {
    width: @oneColumn !important;
    margin: @fieldMargin;
    padding-left: 0%;
    padding-right: 0%;
  }
}

.ui.form .fields .field:first-child {
  padding-left: 0%;
}
.ui.form .fields .field:last-child {
  padding-right: 0%;
}

/* Sizing Combinations */

.ui.form .fields .wide.field {
  width: @oneWide;
  padding-left: (@gutterWidth / 2);
  padding-right: (@gutterWidth / 2);
}
.ui.form .fields .wide.field:first-child {
  padding-left: 0%;
}
.ui.form .fields .wide.field:last-child {
  padding-right: 0%;
}

.ui.form .one.wide.field {
  width: @oneWide !important;
}
.ui.form .two.wide.field {
  width: @twoWide !important;
}
.ui.form .three.wide.field {
  width: @threeWide !important;
}
.ui.form .four.wide.field {
  width: @fourWide !important;
}
.ui.form .five.wide.field {
  width: @fiveWide !important;
}
.ui.form .six.wide.field {
  width: @sixWide !important;
}
.ui.form .seven.wide.field {
  width: @sevenWide !important;
}
.ui.form .eight.wide.field {
  width: @eightWide !important;
}
.ui.form .nine.wide.field {
  width: @nineWide !important;
}
.ui.form .ten.wide.field {
  width: @tenWide !important;
}
.ui.form .eleven.wide.field {
  width: @elevenWide !important;
}
.ui.form .twelve.wide.field {
  width: @twelveWide !important;
}
.ui.form .thirteen.wide.field {
  width: @thirteenWide !important;
}
.ui.form .fourteen.wide.field {
  width: @fourteenWide !important;
}
.ui.form .fifteen.wide.field {
  width: @fifteenWide !important;
}
.ui.form .sixteen.wide.field {
  width: @sixteenWide !important;
}

/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.form .two.fields > .fields,
  .ui.form .two.fields > .field,
  .ui.form .three.fields > .fields,
  .ui.form .three.fields > .field,
  .ui.form .four.fields > .fields,
  .ui.form .four.fields > .field,
  .ui.form .five.fields > .fields,
  .ui.form .five.fields > .field,
  .ui.form .fields > .two.wide.field,
  .ui.form .fields > .three.wide.field,
  .ui.form .fields > .four.wide.field,
  .ui.form .fields > .five.wide.field,
  .ui.form .fields > .six.wide.field,
  .ui.form .fields > .seven.wide.field,
  .ui.form .fields > .eight.wide.field,
  .ui.form .fields > .nine.wide.field,
  .ui.form .fields > .ten.wide.field,
  .ui.form .fields > .eleven.wide.field,
  .ui.form .fields > .twelve.wide.field,
  .ui.form .fields > .thirteen.wide.field,
  .ui.form .fields > .fourteen.wide.field,
  .ui.form .fields > .fifteen.wide.field,
  .ui.form .fields > .sixteen.wide.field {
    width: @oneColumn !important;
    margin: @fieldMargin;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*--------------------
    Inline Fields
---------------------*/

.ui.form .inline.fields {
  margin: @fieldMargin;
  align-items: center;
}
.ui.form .inline.fields .field {
  margin: 0em;
  padding: @inlineFieldsMargin;
}

/* Inline Label */
.ui.form .inline.fields > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.field > label,
.ui.form .inline.field > p {
  display: inline-block;
  width: auto;
  margin-top: 0em;
  margin-bottom: 0em;
  vertical-align: middle;
  font-size: @inlineLabelFontSize;
  font-weight: @inlineLabelFontWeight;
  color: @inlineLabelColor;
  text-transform: @inlineLabelTextTransform;
}

/* Grouped Inline Label */
.ui.form .inline.fields > label {
  margin: @groupedInlineLabelMargin;
}

/* Inline Input */
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > select,
.ui.form .inline.fields .field > .ui.input,
.ui.form .inline.field > input,
.ui.form .inline.field > select,
.ui.form .inline.field > .ui.input {
  display: inline-block;
  width: auto;

  margin-top: 0em;
  margin-bottom: 0em;

  vertical-align: middle;
  font-size: @inlineInputSize;
}

/* Label */
.ui.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
  margin: 0em @inlineLabelDistance 0em 0em;
}
.ui.form .inline.fields .field > :only-child,
.ui.form .inline.field > :only-child {
  margin: 0em;
}

/* Wide */
.ui.form .inline.fields .wide.field {
  display: flex;
  align-items: center;
}
.ui.form .inline.fields .wide.field > input,
.ui.form .inline.fields .wide.field > select,
.ui.form .inline.fields .wide.field > .ui.input {
  width: 100%;
}

/*--------------------
        Sizes
---------------------*/

/* Standard */
.ui.small.form {
  font-size: @small;
}

/* Medium */
.ui.form {
  font-size: @medium;
}

/* Large */
.ui.large.form {
  font-size: @large;
}

/* Huge */
.ui.huge.form {
  font-size: @huge;
}

.loadUIOverrides();


Fix italicized checkbox check

Fix italicized checkbox check

/*!
 * # Semantic UI - Checkbox
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'checkbox';

@import (multiple) '../../theme.config';

/*******************************
           Checkbox
*******************************/

/*--------------
    Content
---------------*/

.ui.checkbox {
  position: relative;
  display: inline-block;
  backface-visibility: hidden;
  outline: none;
  vertical-align: baseline;
  font-style: normal;

  min-height: @checkboxSize;
  font-size: @medium;
  line-height: @checkboxLineHeight;
  min-width: @checkboxSize;
}

/* HTML Checkbox */
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0 !important;
  outline: none;
  z-index: 3;
  width: @checkboxSize;
  height: @checkboxSize;
}

/*--------------
      Box
---------------*/

.ui.checkbox .box,
.ui.checkbox label {
  cursor: auto;
  position: relative;
  display: block;
  padding-left: @labelDistance;
  outline: none;
  font-size: @labelFontSize;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
  position: absolute;
  top: 0px;
  left: 0px;

  width: @checkboxSize;
  height: @checkboxSize;
  content: '';

  background: @checkboxBackground;
  border-radius: @checkboxBorderRadius;

  transition: @checkboxTransition;
  border: @checkboxBorder;
}

/*--------------
    Checkmark
---------------*/

.ui.checkbox .box:after,
.ui.checkbox label:after {
  position: absolute;
  font-size: @checkboxCheckFontSize;
  top: @checkboxCheckTop;
  left: @checkboxCheckLeft;
  width: @checkboxCheckSize;
  height: @checkboxCheckSize;
  text-align: center;

  opacity: 0;
  color: @checkboxColor;
  transition: @checkboxTransition;
}

/*--------------
      Label
---------------*/

/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
  color: @labelColor;
  transition: @labelTransition;
}

/* Outside */
.ui.checkbox + label {
  vertical-align: middle;
}

/*******************************
           States
*******************************/

/*--------------
      Hover
---------------*/

.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
  background: @checkboxHoverBackground;
  border-color: @checkboxHoverBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
  color: @labelHoverColor;
}

/*--------------
      Down
---------------*/

.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
  background: @checkboxPressedBackground;
  border-color: @checkboxPressedBorderColor;
}
.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
  color: @checkboxPressedColor;
}
.ui.checkbox input:active ~ label {
  color: @labelPressedColor;
}

/*--------------
     Focus
---------------*/

.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
  background: @checkboxFocusBackground;
  border-color: @checkboxFocusBorderColor;
}
.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
  color: @checkboxFocusCheckColor;
}
.ui.checkbox input:focus ~ label {
  color: @labelFocusColor;
}

/*--------------
     Active
---------------*/

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
  background: @checkboxActiveBackground;
  border-color: @checkboxActiveBorderColor;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  opacity: @checkboxActiveCheckOpacity;
  color: @checkboxActiveCheckColor;
}

/*--------------
  Indeterminate
---------------*/

.ui.checkbox input:indeterminate ~ .box:before,
.ui.checkbox input:indeterminate ~ label:before {
  background: @checkboxIndeterminateBackground;
  border-color: @checkboxIndeterminateBorderColor;
}
.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
  opacity: @checkboxIndeterminateCheckOpacity;
  color: @checkboxIndeterminateCheckColor;
}

/*--------------
  Active Focus
---------------*/

.ui.checkbox input:indeterminate:focus ~ .box:before,
.ui.checkbox input:indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before  {
  background: @checkboxActiveFocusBackground;
  border-color: @checkboxActiveFocusBorderColor;
}
.ui.checkbox input:indeterminate:focus ~ .box:after,
.ui.checkbox input:indeterminate:focus ~ label:after,
.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
  color: @checkboxActiveFocusCheckColor;
}

/*--------------
    Read-Only
---------------*/

.ui.read-only.checkbox,
.ui.read-only.checkbox label {
  cursor: default;
}

/*--------------
     Disabled
---------------*/

.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
  cursor: default;
  opacity: @disabledCheckboxOpacity;
  color: @disabledCheckboxLabelColor;
}

/*--------------
     Hidden
---------------*/

/* Initialized checkbox moves input below element
 to prevent manually triggering */
.ui.checkbox input.hidden {
  z-index: -1;
}

/* Selectable Label */
.ui.checkbox input.hidden + label {
  cursor: pointer;
  user-select: none;
}

/*******************************
             Types
*******************************/

/*--------------
     Radio
---------------*/

.ui.radio.checkbox {
  min-height: @radioSize;
}

.ui.radio.checkbox .box,
.ui.radio.checkbox label {
  padding-left: @radioLabelDistance;
}

/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
  content: '';
  transform: none;

  width: @radioSize;
  height: @radioSize;
  border-radius: @circularRadius;
  top: @radioTop;
  left: @radioLeft;
}

/* Bullet */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  border: none;
  content: '' !important;
  width: @radioSize;
  height: @radioSize;
  line-height: @radioSize;
}

/* Radio Checkbox */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  top: @bulletTop;
  left: @bulletLeft;
  width: @radioSize;
  height: @radioSize;
  border-radius: @bulletRadius;
  transform: scale(@bulletScale);
  background-color: @bulletColor;
}

/* Focus */
.ui.radio.checkbox input:focus ~ .box:before,
.ui.radio.checkbox input:focus ~ label:before {
  background-color: @radioFocusBackground;
}
.ui.radio.checkbox input:focus ~ .box:after,
.ui.radio.checkbox input:focus ~ label:after {
  background-color: @radioFocusBulletColor;
}

/* Indeterminate */
.ui.radio.checkbox input:indeterminate ~ .box:after,
.ui.radio.checkbox input:indeterminate ~ label:after {
  opacity: 0;
}

/* Active */
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
  background-color: @radioActiveBackground;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
  background-color: @radioActiveBulletColor;
}

/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
  background-color: @radioActiveFocusBackground;
}
.ui.radio.checkbox input:focus:checked ~ .box:after,
.ui.radio.checkbox input:focus:checked ~ label:after {
  background-color: @radioActiveFocusBulletColor;
}

/*--------------
     Slider
---------------*/

.ui.slider.checkbox {
  min-height: @sliderHeight;
}

/* Input */
.ui.slider.checkbox input {
  width: @sliderWidth;
  height: @sliderHeight;
}

/* Label */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
  padding-left: @sliderLabelDistance;
  line-height: @sliderLabelLineHeight;
  color: @sliderOffLabelColor;
}

/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  transform: none;
  border: none !important;
  left: 0em;
  z-index: 1;

  top: @sliderLineVerticalOffset;

  background-color: @sliderLineColor;
  width: @sliderLineWidth;
  height: @sliderLineHeight;

  transform: none;
  border-radius: @sliderLineRadius;
  transition: @sliderLineTransition;

}

/* Handle */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @sliderHandleSize;
  height: @sliderHandleSize;
  top: @sliderHandleOffset;
  left: 0em;
  transform: none;

  border-radius: @circularRadius;
  transition: @sliderHandleTransition;
}

/* Focus */
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Hover */
.ui.slider.checkbox .box:hover,
.ui.slider.checkbox label:hover {
  color: @sliderHoverLabelColor;
}
.ui.slider.checkbox .box:hover::before,
.ui.slider.checkbox label:hover::before {
  background: @sliderHoverLaneBackground;
}

/* Active */
.ui.slider.checkbox input:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
  color: @sliderOnLabelColor !important;
}
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
  background-color: @sliderOnLineColor !important;
}
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
  left: @sliderTravelDistance;
}

/* Active Focus */
.ui.slider.checkbox input:focus:checked ~ .box,
.ui.slider.checkbox input:focus:checked ~ label {
  color: @sliderOnFocusLabelColor !important;
}
.ui.slider.checkbox input:focus:checked ~ .box:before,
.ui.slider.checkbox input:focus:checked ~ label:before {
  background-color: @sliderOnFocusLineColor !important;
}

/*--------------
     Toggle
---------------*/

.ui.toggle.checkbox {
  min-height: @toggleHeight;
}

/* Input */
.ui.toggle.checkbox input {
  width: @toggleWidth;
  height: @toggleHeight;
}

/* Label */
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
  min-height: @toggleHandleSize;
  padding-left: @toggleLabelDistance;
  color: @toggleOffLabelColor;
}
.ui.toggle.checkbox label {
  padding-top: @toggleLabelOffset;
}

/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  z-index: 1;
  transform: none;
  border: none;

  top: @toggleLaneVerticalOffset;

  background: @toggleLaneBackground;
  width: @toggleLaneWidth;
  height: @toggleLaneHeight;
  border-radius: @toggleHandleRadius;
}

/* Handle */
.ui.toggle.checkbox .box:after,
.ui.toggle.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @toggleHandleSize;
  height: @toggleHandleSize;
  top: @toggleHandleOffset;
  left: 0em;

  border-radius: @circularRadius;
  transition: @toggleHandleTransition;
}

.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
  left: @toggleOffOffset;
}

/* Focus */
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Hover */
.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
  background-color: @toggleHoverColor;
  border: none;
}

/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
  color: @toggleOnLabelColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: @toggleOnLaneColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  left: @toggleOnOffset;
}

/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: @toggleOnFocusLabelColor !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: @toggleOnFocusLaneColor !important;
}

/*******************************
            Variations
*******************************/

/*--------------
     Fitted
---------------*/

.ui.fitted.checkbox .box,
.ui.fitted.checkbox label {
  padding-left: 0em !important;
}

.ui.fitted.toggle.checkbox,
.ui.fitted.toggle.checkbox {
  width: @toggleWidth;
}

.ui.fitted.slider.checkbox,
.ui.fitted.slider.checkbox {
  width: @sliderWidth;
}

.loadUIOverrides();

/*!
 * # Semantic UI - Checkbox
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'checkbox';

@import (multiple) '../../theme.config';

/*******************************
           Checkbox
*******************************/

/*--------------
    Content
---------------*/

.ui.checkbox {
  position: relative;
  display: inline-block;
  backface-visibility: hidden;
  outline: none;
  vertical-align: baseline;

  min-height: @checkboxSize;
  font-size: @medium;
  line-height: @checkboxLineHeight;
  min-width: @checkboxSize;
}

/* HTML Checkbox */
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0 !important;
  outline: none;
  z-index: 3;
  width: @checkboxSize;
  height: @checkboxSize;
}

/*--------------
      Box
---------------*/

.ui.checkbox .box,
.ui.checkbox label {
  cursor: auto;
  position: relative;
  display: block;
  padding-left: @labelDistance;
  outline: none;
  font-size: @labelFontSize;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
  position: absolute;
  top: 0px;
  left: 0px;

  width: @checkboxSize;
  height: @checkboxSize;
  content: '';

  background: @checkboxBackground;
  border-radius: @checkboxBorderRadius;

  transition: @checkboxTransition;
  border: @checkboxBorder;
}

/*--------------
    Checkmark
---------------*/

.ui.checkbox .box:after,
.ui.checkbox label:after {
  position: absolute;
  font-size: @checkboxCheckFontSize;
  top: @checkboxCheckTop;
  left: @checkboxCheckLeft;
  width: @checkboxCheckSize;
  height: @checkboxCheckSize;
  text-align: center;

  opacity: 0;
  color: @checkboxColor;
  transition: @checkboxTransition;
}

/*--------------
      Label
---------------*/

/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
  color: @labelColor;
  transition: @labelTransition;
}

/* Outside */
.ui.checkbox + label {
  vertical-align: middle;
}

/*******************************
           States
*******************************/

/*--------------
      Hover
---------------*/

.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
  background: @checkboxHoverBackground;
  border-color: @checkboxHoverBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
  color: @labelHoverColor;
}

/*--------------
      Down
---------------*/

.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
  background: @checkboxPressedBackground;
  border-color: @checkboxPressedBorderColor;
}
.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
  color: @checkboxPressedColor;
}
.ui.checkbox input:active ~ label {
  color: @labelPressedColor;
}

/*--------------
     Focus
---------------*/

.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
  background: @checkboxFocusBackground;
  border-color: @checkboxFocusBorderColor;
}
.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
  color: @checkboxFocusCheckColor;
}
.ui.checkbox input:focus ~ label {
  color: @labelFocusColor;
}

/*--------------
     Active
---------------*/

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
  background: @checkboxActiveBackground;
  border-color: @checkboxActiveBorderColor;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  opacity: @checkboxActiveCheckOpacity;
  color: @checkboxActiveCheckColor;
}

/*--------------
  Indeterminate
---------------*/

.ui.checkbox input:indeterminate ~ .box:before,
.ui.checkbox input:indeterminate ~ label:before {
  background: @checkboxIndeterminateBackground;
  border-color: @checkboxIndeterminateBorderColor;
}
.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
  opacity: @checkboxIndeterminateCheckOpacity;
  color: @checkboxIndeterminateCheckColor;
}

/*--------------
  Active Focus
---------------*/

.ui.checkbox input:indeterminate:focus ~ .box:before,
.ui.checkbox input:indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before  {
  background: @checkboxActiveFocusBackground;
  border-color: @checkboxActiveFocusBorderColor;
}
.ui.checkbox input:indeterminate:focus ~ .box:after,
.ui.checkbox input:indeterminate:focus ~ label:after,
.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
  color: @checkboxActiveFocusCheckColor;
}

/*--------------
    Read-Only
---------------*/

.ui.read-only.checkbox,
.ui.read-only.checkbox label {
  cursor: default;
}

/*--------------
     Disabled
---------------*/

.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
  cursor: default;
  opacity: @disabledCheckboxOpacity;
  color: @disabledCheckboxLabelColor;
}

/*--------------
     Hidden
---------------*/

/* Initialized checkbox moves input below element
 to prevent manually triggering */
.ui.checkbox input.hidden {
  z-index: -1;
}

/* Selectable Label */
.ui.checkbox input.hidden + label {
  cursor: pointer;
  user-select: none;
}

/*******************************
             Types
*******************************/

/*--------------
     Radio
---------------*/

.ui.radio.checkbox {
  min-height: @radioSize;
}

.ui.radio.checkbox .box,
.ui.radio.checkbox label {
  padding-left: @radioLabelDistance;
}

/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
  content: '';
  transform: none;

  width: @radioSize;
  height: @radioSize;
  border-radius: @circularRadius;
  top: @radioTop;
  left: @radioLeft;
}

/* Bullet */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  border: none;
  content: '' !important;
  width: @radioSize;
  height: @radioSize;
  line-height: @radioSize;
}

/* Radio Checkbox */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  top: @bulletTop;
  left: @bulletLeft;
  width: @radioSize;
  height: @radioSize;
  border-radius: @bulletRadius;
  transform: scale(@bulletScale);
  background-color: @bulletColor;
}

/* Focus */
.ui.radio.checkbox input:focus ~ .box:before,
.ui.radio.checkbox input:focus ~ label:before {
  background-color: @radioFocusBackground;
}
.ui.radio.checkbox input:focus ~ .box:after,
.ui.radio.checkbox input:focus ~ label:after {
  background-color: @radioFocusBulletColor;
}

/* Indeterminate */
.ui.radio.checkbox input:indeterminate ~ .box:after,
.ui.radio.checkbox input:indeterminate ~ label:after {
  opacity: 0;
}

/* Active */
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
  background-color: @radioActiveBackground;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
  background-color: @radioActiveBulletColor;
}

/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
  background-color: @radioActiveFocusBackground;
}
.ui.radio.checkbox input:focus:checked ~ .box:after,
.ui.radio.checkbox input:focus:checked ~ label:after {
  background-color: @radioActiveFocusBulletColor;
}

/*--------------
     Slider
---------------*/

.ui.slider.checkbox {
  min-height: @sliderHeight;
}

/* Input */
.ui.slider.checkbox input {
  width: @sliderWidth;
  height: @sliderHeight;
}

/* Label */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
  padding-left: @sliderLabelDistance;
  line-height: @sliderLabelLineHeight;
  color: @sliderOffLabelColor;
}

/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  transform: none;
  border: none !important;
  left: 0em;
  z-index: 1;

  top: @sliderLineVerticalOffset;

  background-color: @sliderLineColor;
  width: @sliderLineWidth;
  height: @sliderLineHeight;

  transform: none;
  border-radius: @sliderLineRadius;
  transition: @sliderLineTransition;

}

/* Handle */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @sliderHandleSize;
  height: @sliderHandleSize;
  top: @sliderHandleOffset;
  left: 0em;
  transform: none;

  border-radius: @circularRadius;
  transition: @sliderHandleTransition;
}

/* Focus */
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Hover */
.ui.slider.checkbox .box:hover,
.ui.slider.checkbox label:hover {
  color: @sliderHoverLabelColor;
}
.ui.slider.checkbox .box:hover::before,
.ui.slider.checkbox label:hover::before {
  background: @sliderHoverLaneBackground;
}

/* Active */
.ui.slider.checkbox input:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
  color: @sliderOnLabelColor !important;
}
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
  background-color: @sliderOnLineColor !important;
}
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
  left: @sliderTravelDistance;
}

/* Active Focus */
.ui.slider.checkbox input:focus:checked ~ .box,
.ui.slider.checkbox input:focus:checked ~ label {
  color: @sliderOnFocusLabelColor !important;
}
.ui.slider.checkbox input:focus:checked ~ .box:before,
.ui.slider.checkbox input:focus:checked ~ label:before {
  background-color: @sliderOnFocusLineColor !important;
}

/*--------------
     Toggle
---------------*/

.ui.toggle.checkbox {
  min-height: @toggleHeight;
}

/* Input */
.ui.toggle.checkbox input {
  width: @toggleWidth;
  height: @toggleHeight;
}

/* Label */
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
  min-height: @toggleHandleSize;
  padding-left: @toggleLabelDistance;
  color: @toggleOffLabelColor;
}
.ui.toggle.checkbox label {
  padding-top: @toggleLabelOffset;
}

/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  z-index: 1;
  transform: none;
  border: none;

  top: @toggleLaneVerticalOffset;

  background: @toggleLaneBackground;
  width: @toggleLaneWidth;
  height: @toggleLaneHeight;
  border-radius: @toggleHandleRadius;
}

/* Handle */
.ui.toggle.checkbox .box:after,
.ui.toggle.checkbox label:after {
  background: @handleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @toggleHandleSize;
  height: @toggleHandleSize;
  top: @toggleHandleOffset;
  left: 0em;

  border-radius: @circularRadius;
  transition: @toggleHandleTransition;
}

.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
  left: @toggleOffOffset;
}

/* Focus */
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
  background-color: @toggleFocusColor;
  border: none;
}

/* Hover */
.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
  background-color: @toggleHoverColor;
  border: none;
}

/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
  color: @toggleOnLabelColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: @toggleOnLaneColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  left: @toggleOnOffset;
}

/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: @toggleOnFocusLabelColor !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: @toggleOnFocusLaneColor !important;
}

/*******************************
            Variations
*******************************/

/*--------------
     Fitted
---------------*/

.ui.fitted.checkbox .box,
.ui.fitted.checkbox label {
  padding-left: 0em !important;
}

.ui.fitted.toggle.checkbox,
.ui.fitted.toggle.checkbox {
  width: @toggleWidth;
}

.ui.fitted.slider.checkbox,
.ui.fitted.slider.checkbox {
  width: @sliderWidth;
}

.loadUIOverrides();