[Input] ADD the same style for input[type="file"].

in form validation, type="file" is working properly but the style
doesn't change properly. Because there are missing points. I add css
selectors for input[type="file"] in this file so that we can see some
'error' style for input[type="file"].

/*!
 * # 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 .field {
  clear: both;
  margin: @fieldMargin;
}

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

.ui.form .fields .field {
  clear: both;
  margin: 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="file"],
.ui.form input[type="url"] {
  width: @inputWidth;
  vertical-align: top;
}

/* Set max height on unusual input */
.ui.form ::-webkit-datetime-edit,
.ui.form ::-webkit-inner-spin-button {
  height: @inputLineHeight;
}

.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="file"],
.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;
}

/* 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
---------------------*/

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

/* Inline */
.ui.form .inline.fields .field > .selection.dropdown,
.ui.form .inline.field > .selection.dropdown {
  width: auto;
}
.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  float: none;
}

/*--------------------
       UI Input
---------------------*/

/* Block */
.ui.form .field .ui.input,
.ui.form .fields .field .ui.input,
.ui.form .wide.field .ui.input {
  width: 100%;
}

/* Inline  */
.ui.form .inline.fields .field:not(.wide) .ui.input,
.ui.form .inline.field:not(.wide) .ui.input {
  width: auto;
  vertical-align: middle;
}

/* Auto Input */
.ui.form .fields .field .ui.input input,
.ui.form .field .ui.input input {
  width: auto;
}

/* Full Width Input */
.ui.form .ten.fields .ui.input input,
.ui.form .nine.fields .ui.input input,
.ui.form .eight.fields .ui.input input,
.ui.form .seven.fields .ui.input input,
.ui.form .six.fields .ui.input input,
.ui.form .five.fields .ui.input input,
.ui.form .four.fields .ui.input input,
.ui.form .three.fields .ui.input input,
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
  flex: 1 0 auto;
  width: 0px;
}

/*--------------------
   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: normal;
  background: @promptBackground !important;
  border: @promptBorder !important;
  color: @promptTextColor !important;
}
.ui.form .inline.fields .field .prompt,
.ui.form .inline.field .prompt {
  vertical-align: top;
  margin: @inlinePromptMargin;
}
.ui.form .inline.fields .field .prompt:before,
.ui.form .inline.field .prompt:before {
  border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
  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="file"]: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:not(:empty) {
  display: block;
}
.ui.form.success .icon.success.message:not(:empty) {
  display: flex;
}

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

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

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

/* On Form */
.ui.form.error .error.message:not(:empty) {
  display: block;
}
.ui.form.error .icon.error.message:not(:empty) {
  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="file"],
.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="file"],
.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="file"]: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 {
  pointer-events: none;
  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;
}
.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;
}

/* Inverted Field */
.ui.inverted.form input:not([type]),
.ui.inverted.form input[type="date"],
.ui.inverted.form input[type="datetime-local"],
.ui.inverted.form input[type="email"],
.ui.inverted.form input[type="number"],
.ui.inverted.form input[type="password"],
.ui.inverted.form input[type="search"],
.ui.inverted.form input[type="tel"],
.ui.inverted.form input[type="time"],
.ui.inverted.form input[type="text"],
.ui.inverted.form input[type="file"],
.ui.inverted.form input[type="url"] {
  background: @invertedInputBackground;
  border-color: @invertedInputBorderColor;
  color: @invertedInputColor;
  box-shadow: @invertedInputBoxShadow;
}

/*--------------------
     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;
  margin: @fieldMargin;
}
.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;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*--------------------
     Equal Width
---------------------*/

.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
  width: 100%;
  flex: 1 1 auto;
}

/*--------------------
    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: baseline;
  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.field > input,
.ui.form .inline.field > select {
  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 {
  width: 100%;
}

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

.ui.mini.form {
  font-size: @mini;
}
.ui.tiny.form {
  font-size: @tiny;
}
.ui.small.form {
  font-size: @small;
}
.ui.form {
  font-size: @medium;
}
.ui.large.form {
  font-size: @large;
}
.ui.big.form {
  font-size: @big;
}
.ui.huge.form {
  font-size: @huge;
}
.ui.massive.form {
  font-size: @massive;
}

.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 .field {
  clear: both;
  margin: @fieldMargin;
}

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

.ui.form .fields .field {
  clear: both;
  margin: 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"] {
  width: @inputWidth;
  vertical-align: top;
}

/* Set max height on unusual input */
.ui.form ::-webkit-datetime-edit,
.ui.form ::-webkit-inner-spin-button {
  height: @inputLineHeight;
}

.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;
}

/* 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
---------------------*/

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

/* Inline */
.ui.form .inline.fields .field > .selection.dropdown,
.ui.form .inline.field > .selection.dropdown {
  width: auto;
}
.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
  float: none;
}

/*--------------------
       UI Input
---------------------*/

/* Block */
.ui.form .field .ui.input,
.ui.form .fields .field .ui.input,
.ui.form .wide.field .ui.input {
  width: 100%;
}

/* Inline  */
.ui.form .inline.fields .field:not(.wide) .ui.input,
.ui.form .inline.field:not(.wide) .ui.input {
  width: auto;
  vertical-align: middle;
}

/* Auto Input */
.ui.form .fields .field .ui.input input,
.ui.form .field .ui.input input {
  width: auto;
}

/* Full Width Input */
.ui.form .ten.fields .ui.input input,
.ui.form .nine.fields .ui.input input,
.ui.form .eight.fields .ui.input input,
.ui.form .seven.fields .ui.input input,
.ui.form .six.fields .ui.input input,
.ui.form .five.fields .ui.input input,
.ui.form .four.fields .ui.input input,
.ui.form .three.fields .ui.input input,
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
  flex: 1 0 auto;
  width: 0px;
}

/*--------------------
   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: normal;
  background: @promptBackground !important;
  border: @promptBorder !important;
  color: @promptTextColor !important;
}
.ui.form .inline.fields .field .prompt,
.ui.form .inline.field .prompt {
  vertical-align: top;
  margin: @inlinePromptMargin;
}
.ui.form .inline.fields .field .prompt:before,
.ui.form .inline.field .prompt:before {
  border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
  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:not(:empty) {
  display: block;
}
.ui.form.success .icon.success.message:not(:empty) {
  display: flex;
}

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

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

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

/* On Form */
.ui.form.error .error.message:not(:empty) {
  display: block;
}
.ui.form.error .icon.error.message:not(:empty) {
  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 {
  pointer-events: none;
  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;
}
.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;
}

/* Inverted Field */
.ui.inverted.form input:not([type]),
.ui.inverted.form input[type="date"],
.ui.inverted.form input[type="datetime-local"],
.ui.inverted.form input[type="email"],
.ui.inverted.form input[type="number"],
.ui.inverted.form input[type="password"],
.ui.inverted.form input[type="search"],
.ui.inverted.form input[type="tel"],
.ui.inverted.form input[type="time"],
.ui.inverted.form input[type="text"],
.ui.inverted.form input[type="url"] {
  background: @invertedInputBackground;
  border-color: @invertedInputBorderColor;
  color: @invertedInputColor;
  box-shadow: @invertedInputBoxShadow;
}

/*--------------------
     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;
  margin: @fieldMargin;
}
.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;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*--------------------
     Equal Width
---------------------*/

.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
  width: 100%;
  flex: 1 1 auto;
}

/*--------------------
    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: baseline;
  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.field > input,
.ui.form .inline.field > select {
  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 {
  width: 100%;
}

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

.ui.mini.form {
  font-size: @mini;
}
.ui.tiny.form {
  font-size: @tiny;
}
.ui.small.form {
  font-size: @small;
}
.ui.form {
  font-size: @medium;
}
.ui.large.form {
  font-size: @large;
}
.ui.big.form {
  font-size: @big;
}
.ui.huge.form {
  font-size: @huge;
}
.ui.massive.form {
  font-size: @massive;
}

.loadUIOverrides();


Fix choice vertical / horizontal style

Fix choice vertical / horizontal style

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/sonatra/sonatra-theme-gluon.git/'


Update

Update

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/Didichaoren/Didichaoren.github.io.git/'


Update

Update


icon search styles

icon search styles

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/Digipalvelutehdas/APIKA.git/'


HYD-4435 Create block split-button mixin

In the server detail page we are using full width buttons
for a better mobile experience. Some of these buttons are
split buttons. Bootstrap does not support full-width
split buttons, so we need to create a mixin.

Create a mixin that we can call on a full-width
button to style it nicely.

  - Create a split-block-button mixin.

Change-Id: I860185423ff2d2f5d6d764777e8bd7e922b0a41a
Signed-off-by: Joe Grund <5a0004131f5af71cc30270f318d2c30ba7aaa99a@intel.com>
Reviewed-on: http://review.whamcloud.com/15505
Tested-by: Jenkins
Tested-by: Chroma Test User <a0b98b2ff5154776fa24760ef410655af7a8b56c@intel.com>
Reviewed-by: Will Johnson <12b9e8082b7fae5ba694976591ab55465e35debd@intel.com>
Reviewed-by: Wayne Kenneth Seymour III <91a819736b2ae022828fb01b73df051e4864c94b@intel.com>

.block-dropdown {
  .btn-block;

  .btn-success {
    width: 90%;

    &::before {
      content: ' ';
      display: inline-block;
      width: 11%;
    }
  }

  .dropdown-toggle {
    width: 10%;
  }

  .dropdown-menu li {
    text-align: center;
  }

  + .btn.btn-block {
    margin-top: 5px;
  }

  .clearfix();
}

error: pathspec 'chroma-manager/chroma_ui_new/source/chroma_ui/styles/split-block-button.less' did not match any file(s) known to git


INBOX-410 fix tags style

INBOX-410 fix tags style

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/heroandtn3/openpaas-esn.git/'


Remove a flex-grow line that doesn't need to be there

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/hevnly/asset-bazaar.git/'


Center image and keep original size.

Center image and keep original size.

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/hjiang/1byte.io.git/'


Add font family variable

Add font family variable

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// Global variables
@space: 70px;
@wrapperWidth: 750px;
@baseFontSize: 24px;
@baseLineHeight: 1.7;
@linkColor: #e34; // #2ed for invert color
@backgroundColor: #fff;
@textColor: #000;
@sansSerif: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
@serif: Palatino, "Hiragino Mincho ProN", serif;

// Invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url(font.woff) format('woff');
}

.font-face {
  font-family: PFDTCP-M, @sansSerif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

.helvetica {
  color: fade(@textColor, 40%);
  font-family: @sansSerif;
  font-size: @baseFontSize / 2;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: @baseLineHeight * .9;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The original space content hack is removed here. No need to support Opera on my personal site.
// 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.

.cf {
  &:before,
  &:after {
    content: ""; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// Basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: @serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

.wrapper {
  max-width: @thumbSize * 5 + @thumbPadding * 8; // Defined at work-list
  margin: 0 auto;
  padding: 0 @space * 1.2;
}

a, button {
  color: @textColor;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");
  &:hover {
    color: @linkColor;
    .transition(~"color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease");
  }
}

ins {
  color: fade(@textColor, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@textColor, 6%);
}

// Core styles begin
body:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  content: "";
  background: fade(@textColor, 2%);
  border-bottom: 1px solid fade(@textColor, 2%);
  z-index: 9999;
  pointer-events: none;
}

a[role=logo] {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;
  &:hover {
    border-bottom-color: @linkColor;
  }
}

// Borrowed from Bootstrap
.vertical(@startColor: #444, @endColor: #333) {
  background-color: mix(@startColor, @endColor, 60%);
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image:   linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
}

header.index {
  margin: 0 0 @space / 5;
  height: 200px;
  .vertical(#9475d1, #b67fd6);
  a[role=logo] {
    margin: 37px auto 0;
    border-bottom-color: @backgroundColor;
    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }
  h2 {
    padding: 0 5%;
    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.5;
      border-bottom: transparent 1px solid; // We have to define this in order to make transition work
      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }
  h3 {
    .helvetica;
    padding-top: 64px;
    color: @backgroundColor;
    opacity: .6;
  }
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.5;
  .cf;
  ul {
    li {
      display: inline-block;
      list-style: none;
      line-height: 2;
      a {
        padding: 3px 1em;
        font-weight: bold;
      }
      &[role=current] {
        a {
          color: @linkColor;
        }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 282px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@linkColor, 95%);
      pointer-events: none;
      .transition(~"opacity .1s ease, padding .1s ease");
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.35;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  .status {
    a {
      &:hover {
        color: fade(green, 80%);
      }
    }
    & > *:first-child:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
    &.available > *:first-child:before {
      background: fade(green, 60%);
    }
    &.unavailable > *:first-child:before {
      background: fade(red, 20%);
    }
  }
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article:not(.width-fix) {
  max-width: @wrapperWidth; // Width fix for work-list in posts
}

article {
  margin: 0 auto @space * 1.35;
  // For some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // For sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    text-align: left;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: @baseLineHeight;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: @baseLineHeight;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      .cf;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: @sansSerif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
      cite {
        float: right;
        margin: 0 0 2em;
        font-size: 85%;
        color: fade(@textColor, 80%);
        &:before {
          content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
        }
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      .helvetica;
      margin: @space 0 1.6em;
      &:before {
        content: attr(data-placeholder);
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
    form {
      label {
        .helvetica;
        display: block;
        margin-bottom: @space * .3;
      }
      input {
        .helvetica;
        display: block;
        border: 1px solid fade(@textColor, 20%);
        padding: 7px;
        margin: 0 auto @space * .3;
        width: 100%;
        outline: none;
        box-sizing: border-box;
        border-radius: 0; // Remove border-radius for ios devices
        -webkit-appearance: none; // Remove ios pre-defined style
        &:focus {
          border-color: @textColor;
        }
      }
      button.btn {
        display: block;
        margin: 0 auto;
      }
    }
  }
  .browser {
    float: left;
    margin: 0 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .store, .download {
    @iconSize: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @iconSize @iconSize;
    padding-left: @iconSize * 1.25;
  }
  .note {
    background-image: url("data:image/svg+xml,<svg id='note' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>");
  }
  .store {
    background-image: url("data:image/svg+xml,<svg id='store' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>");
  }
  .download {
    background-image: url("data:image/svg+xml,<svg id='download' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>");
  }
}

[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

[role=tweet] {
  margin-top: @space;
}

.txt[role=announcement] {
  text-align: center;
}

// Image list in "work"
@thumbSize: 190px;
@thumbPadding: 15px;
@thumbFontSize: @baseFontSize * .7;

ul[role^=work-list] {
  margin: -@thumbPadding;
  text-align: left;
  .cf;
  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;
    a {
      display: block;
      width: @thumbSize;
      height: @thumbSize + @thumbFontSize * 2 + @thumbPadding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: @thumbFontSize;
      overflow: hidden; // For text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumbPadding * 1.4 0 0;
    }
    time {
      color: fade(@textColor, 30%);
    }
    img {
      width: @thumbSize;
      height: @thumbSize;
      margin: 0; // Override: article img
      background: @linkColor;
    }
  }
  & ~ div.txt {
    margin: @space * .5 0 0; // Better margin between to work lists
  }
}

// Image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  margin: 0 0 20px;
}

// Post list in "note"
div[role^=note-list] {
  section {
    margin: 0 0 @space * .2;
    overflow: hidden;
    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;
      time {
        color: fade(@textColor, 30%);
      }
      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }
  section:last-child {
    margin-bottom: 0;
  }
}

aside {
  margin: 0 0 @space * 1.35;
}

aside[role=sponsor] {
  max-width: @wrapperWidth;
  clear: both;
  .bsap {
    .bsa_it_i { // Letter i = image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // Letter t = text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_d { // Letter d = description
      display: block;
      font-size: .9em;
      line-height: @baseLineHeight;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@textColor, 40%);
        &:hover {
          color: @textColor;
        }
      }
    }
  }
}

.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  &:hover, &:focus {
    background: @linkColor;
  }
}

footer {
  .helvetica;
  font-size: @baseFontSize / 2 - 1px;
}

// Four thumbnails in a row
@media (max-width: 1238px) {
  .wrapper {
    max-width: @thumbSize * 4 + @thumbPadding * 6; // Defined at work-list
  }
}

// Three thumbnails in a row
@media (max-width: 1018px) {
  .wrapper {
    max-width: @thumbSize * 3 + @thumbPadding * 4; // Defined at work-list
  }
}

// Small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}

// iPad and iPhone portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  .wrapper {
    @padding: 69px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

// iPhone
@media (max-device-width: 480px) {
  .wrapper {
    @padding: 32px;
    padding-left: @padding;
    padding-right: @padding;
  }

  ul[role^=work-list] {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;
      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }
      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// iPhone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  .wrapper {
    @padding: 15px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// Global variables
@space: 70px;
@wrapperWidth: 750px;
@baseFontSize: 24px;
@baseLineHeight: 1.7;
@linkColor: #e34; // #2ed for invert color
@backgroundColor: #fff;
@textColor: #000;

// Invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url(font.woff) format('woff');
}

.font-face {
  font-family: PFDTCP-M, "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: @baseFontSize * 7/3;
  -webkit-font-smoothing: antialiased;
}

.helvetica {
  color: fade(@textColor, 40%);
  font-family: "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  font-size: @baseFontSize / 2;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: @baseLineHeight * .9;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The original space content hack is removed here. No need to support Opera on my personal site.
// 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.

.cf {
  &:before,
  &:after {
    content: ""; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// Basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @textColor;
  background: @backgroundColor;
  font-size: @baseFontSize;
  font-family: Palatino, "Hiragino Mincho ProN", serif;
  line-height: @baseLineHeight;
  margin: 0 auto 0;
  padding: 0 0  @space * 1.5;
  text-align: center;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

.wrapper {
  max-width: @thumbSize * 5 + @thumbPadding * 8; // Defined at work-list
  margin: 0 auto;
  padding: 0 @space * 1.2;
}

a, button {
  color: @textColor;
  .transition(~"color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease");
  &:hover {
    color: @linkColor;
    .transition(~"color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease");
  }
}

ins {
  color: fade(@textColor, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@textColor, 6%);
}

// Core styles begin
body:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  content: "";
  background: fade(@textColor, 2%);
  border-bottom: 1px solid fade(@textColor, 2%);
  z-index: 9999;
  pointer-events: none;
}

a[role=logo] {
  display: block;
  width: 0;
  height: 0;
  margin: -29px auto @space / 5;
  border-style: solid;
  border-width: 0 26px 45px 26px;
  border-color: transparent;
  border-bottom-color: @textColor;
  text-indent: -9999em;
  &:hover {
    border-bottom-color: @linkColor;
  }
}

// Borrowed from Bootstrap
.vertical(@startColor: #444, @endColor: #333) {
  background-color: mix(@startColor, @endColor, 60%);
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image:   linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
}

header.index {
  margin: 0 0 @space / 5;
  height: 200px;
  .vertical(#9475d1, #b67fd6);
  a[role=logo] {
    margin: 37px auto 0;
    border-bottom-color: @backgroundColor;
    &:hover {
      border-bottom-color: fade(@backgroundColor, 70%);
    }
  }
  h2 {
    padding: 0 5%;
    a {
      color: @backgroundColor;
      .font-face;
      font-size: @baseFontSize * 1.5;
      border-bottom: transparent 1px solid; // We have to define this in order to make transition work
      &:hover {
        border-bottom-color: @backgroundColor;
      }
    }
  }
  h3 {
    .helvetica;
    padding-top: 64px;
    color: @backgroundColor;
    opacity: .6;
  }
}

nav {
  .helvetica;
}

nav[role=navigation] {
  margin: 0 0 @space * 1.5;
  .cf;
  ul {
    li {
      display: inline-block;
      list-style: none;
      line-height: 2;
      a {
        padding: 3px 1em;
        font-weight: bold;
      }
      &[role=current] {
        a {
          color: @linkColor;
        }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 282px;
    display: block;
    padding: 7px 10px;
    font-size: @baseFontSize / 2 - 2px;
    letter-spacing: .2em;
    background: fade(@textColor, 5%);
    z-index: 9999;
    .transition(~"padding .1s ease");
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@linkColor, 95%);
      pointer-events: none;
      .transition(~"opacity .1s ease, padding .1s ease");
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.35;
  > * {
    font-weight: normal;
  }
  h1 {
    margin: 0 0 .1em;
  }
  h2 {
    .helvetica;
  }
  .status {
    a {
      &:hover {
        color: fade(green, 80%);
      }
    }
    & > *:first-child:before {
      @s: 9px;
      display: inline-block;
      content: "";
      width: @s;
      height: @s;
      border-radius: 50%;
      background: fade(@textColor, 20%);
      margin-right: @s;
    }
    &.available > *:first-child:before {
      background: fade(green, 60%);
    }
    &.unavailable > *:first-child:before {
      background: fade(red, 20%);
    }
  }
  & + .txt :first-child { // For example, hgroup + .txt h3:first-child
    margin-top: 0;
    padding-top: 0;
  }
}

article:not(.width-fix) {
  max-width: @wrapperWidth; // Width fix for work-list in posts
}

article {
  margin: 0 auto @space * 1.35;
  // For some specified posts in work category
  .cf;
  img, video, iframe {
    display: block;
    margin: 0 auto 40px;
    max-width: 100%;
  }
  .txt {
    clear: both; // For sibling, following elements (ie. .browser class) with float: left;
    overflow: hidden;
    text-align: left;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@textColor, 30%); // Set larger value for invert color
    }
    p {
      margin: 0 0 1.1em;
      line-height: @baseLineHeight;
    }
    h3 {
      .helvetica;
      margin: @space 0 1.6em;
    }
    ul, ol {
      margin: 0 0 1em 1em;
      li {
        line-height: @baseLineHeight;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      .cf;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
        font-size: 120px;
        color: fade(@textColor, 70%);
        font-family: "Helvetica Neue", sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
      cite {
        float: right;
        margin: 0 0 2em;
        font-size: 85%;
        color: fade(@textColor, 80%);
        &:before {
          content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
        }
      }
    }
    sup {
      font-size: 75%;
    }
    hr {
      .helvetica;
      margin: @space 0 1.6em;
      &:before {
        content: attr(data-placeholder);
      }
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
    form {
      label {
        .helvetica;
        display: block;
        margin-bottom: @space * .3;
      }
      input {
        .helvetica;
        display: block;
        border: 1px solid fade(@textColor, 20%);
        padding: 7px;
        margin: 0 auto @space * .3;
        width: 100%;
        outline: none;
        box-sizing: border-box;
        border-radius: 0; // Remove border-radius for ios devices
        -webkit-appearance: none; // Remove ios pre-defined style
        &:focus {
          border-color: @textColor;
        }
      }
      button.btn {
        display: block;
        margin: 0 auto;
      }
    }
  }
  .browser {
    float: left;
    margin: 0 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .store, .download {
    @iconSize: 40px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: @iconSize @iconSize;
    padding-left: @iconSize * 1.25;
  }
  .note {
    background-image: url("data:image/svg+xml,<svg id='note' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>");
  }
  .store {
    background-image: url("data:image/svg+xml,<svg id='store' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>");
  }
  .download {
    background-image: url("data:image/svg+xml,<svg id='download' width='40px' height='40px' xmlns='http://www.w3.org/2000/svg' version='1.1'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>");
  }
}

[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

[role=tweet] {
  margin-top: @space;
}

.txt[role=announcement] {
  text-align: center;
}

// Image list in "work"
@thumbSize: 190px;
@thumbPadding: 15px;
@thumbFontSize: @baseFontSize * .7;

ul[role^=work-list] {
  margin: -@thumbPadding;
  text-align: left;
  .cf;
  li {
    position: relative;
    list-style: none;
    float: left;
    margin: @thumbPadding;
    a {
      display: block;
      width: @thumbSize;
      height: @thumbSize + @thumbFontSize * 2 + @thumbPadding * 1.4 + 1px; // 1px to make the contianer safer
      .font-face;
      font-size: @thumbFontSize;
      overflow: hidden; // For text
    }
    &:hover a {
      opacity: 1;
    }
    p {
      margin: @thumbPadding * 1.4 0 0;
    }
    time {
      color: fade(@textColor, 30%);
    }
    img {
      width: @thumbSize;
      height: @thumbSize;
      margin: 0; // Override: article img
      background: @linkColor;
    }
  }
  & ~ div.txt {
    margin: @space * .5 0 0; // Better margin between to work lists
  }
}

// Image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  margin: 0 0 20px;
}

// Post list in "note"
div[role^=note-list] {
  section {
    margin: 0 0 @space * .2;
    overflow: hidden;
    h2 {
      .font-face;
      font-size: @baseFontSize * 2;
      margin: 0 0 .1em;
      font-weight: normal;
      time {
        color: fade(@textColor, 30%);
      }
      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }
    }
  }
  section:last-child {
    margin-bottom: 0;
  }
}

aside {
  margin: 0 0 @space * 1.35;
}

aside[role=sponsor] {
  max-width: @wrapperWidth;
  clear: both;
  .bsap {
    .bsa_it_i { // Letter i = image
      float: left;
      padding-right: 20px;
    }
    .bsa_it_t { // Letter t = text
      display: block;
      font-size: .5em;
      line-height: @baseLineHeight;
    }
    .bsa_it_d { // Letter d = description
      display: block;
      font-size: .9em;
      line-height: @baseLineHeight;
    }
    .bsa_it_p {
      display: block;
      margin-top: 5px;
      .helvetica;
      a {
        color: fade(@textColor, 40%);
        &:hover {
          color: @textColor;
        }
      }
    }
  }
}

.btn {
  .helvetica;
  display: inline-block;
  color: @backgroundColor;
  background: @textColor;
  font-size: @baseFontSize / 2 - 2px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  &:hover, &:focus {
    background: @linkColor;
  }
}

footer {
  .helvetica;
  font-size: @baseFontSize / 2 - 1px;
}

// Four thumbnails in a row
@media (max-width: 1238px) {
  .wrapper {
    max-width: @thumbSize * 4 + @thumbPadding * 6; // Defined at work-list
  }
}

// Three thumbnails in a row
@media (max-width: 1018px) {
  .wrapper {
    max-width: @thumbSize * 3 + @thumbPadding * 4; // Defined at work-list
  }
}

// Small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}

// iPad and iPhone portrait {
@media (max-device-width: 1024px) and (orientation: portrait) {
  .wrapper {
    @padding: 69px;
    padding-left: @padding;
    padding-right: @padding;
  }
}

// iPhone
@media (max-device-width: 480px) {
  .wrapper {
    @padding: 32px;
    padding-left: @padding;
    padding-right: @padding;
  }

  ul[role^=work-list] {
    li {
      float: none; // Make sure smaller images are stretched to 100% in iOS and Safari, Firefox (only Chrome works without this hack at the moment)
      margin-bottom: @thumbPadding * 2;
      img {
        width: 100%;
        height: auto; // Should be 100%, but Safari for iOS has stupid bug for it.
      }
      a {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// iPhone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  .wrapper {
    @padding: 15px;
    padding-left: @padding;
    padding-right: @padding;
  }
}


Tweaked some things for readabilty (schedule)

//style.less
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');

.big {
  margin-top: 10%;
}

.search {
  margin: 0 auto;
  width: 50%;
  display: block;
  font-family: Open Sans;
}

input.search {
  text-align: center;
  margin-bottom: 10px;
}

.bar {
  height: 10px;
  width: 100%;
  background-color: #96aa48;
  margin-bottom: 50px;
}

h1#title {
  font-size: 8rem;
  font-family: Oswald;
  letter-spacing: 0px;
  text-align: center;
  text-transform: uppercase;

  span {
    font-size: 3rem;
    letter-spacing: -2px;
    position: relative;
    left: -12px;
    top: -1px;
    -webkit-transform: rotate(-7deg);
    display: inline-block;

     > span {
       color: #96AA48;
       position: relative;
       left: -3px;
       top: 1px;
       display: inline-block;
       -webkit-transform: rotate(11deg);
    }
  }
}

div.schedule {
  display: table;
  margin: 10px auto;
  font-family: Open Sans;

  &.rip {
    text-align: center;
    border: none;

    sup {
      font-size: 10px;
      position: relative;
      top: -25px;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;

    li {
      width: 25px;
      height: 25px;
      color: #FFF;
      font-family: Oswald;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      -webkit-transition: 1s ease;

      &:hover {
        -webkit-transition: 1s ease;
        width: 200px !important;
      }

      &:first-child span {
        background-color: #0C5489;
      }

      &:last-child span {
        background-color: #C41824;
      }

      span {
        width: 25px;
        height: 25px;
        display: inline-block;
        background-color: #96aa48;
      }

      a {
        text-decoration: none;
        color: #000;
      }
    }
  }

  div.day {
    float: left;

    &:nth-child(2) {
      .hour {
        border-left: none !important;
      }
    }

    div.hour {
      width: 150px;
      height: 20px;
      padding: 12px 0px;
      position: relative;
      border-bottom: solid 1px #000;
      border-left: solid 1px #000;

      &:last-child {
        border-bottom: none;
      }

      a {
         text-decoration: none;
         color: inherit;
      }

      span {
        display: inline-block;
        width: 33%;

        &.sub_2 {
           position: relative;
           top: -15px;
        }
      }

      .teacher {
        text-align: left;
        position: relative;
        left: 15px;
      }

      .chamber {
        text-align: center;
      }

      .course {
        text-align: right;
        position: relative;
        right: 15px;
      }

      &.changed {
        color: red !important;
      }

      &.title {
        text-align: center;
        background-color: #000;
        color: #FFF;
        text-transform: uppercase;
        font-family: Oswald;

        span {
          text-align: center;
          width: 100%;
        }
      }

      .time {
          font-size: 10px;
          color: #665;
          width: 100%;
          position: absolute;
          top: 2px;
          left: 5px;
      }

      .free {
        .changed;
        text-align: center;
        width: 100%;
      }
    }
  }
}

.links {
    width: 100%;
    position: fixed;
    bottom: -90px;
    transition: ease .5s;

    &:hover {
        bottom: 0px;
        transition: ease .5s;
    }

    div {
        height: 100px;
        width: calc(100% / 3);
        float: left;

        a {
            text-decoration: none;
            height: 100%;
            width: 100%;
            display: inline-block;
            color: #FFF;
            text-align: center;
            font-size: 60px;
        }
    }
}

@import "mobile";

//style.less
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');

.big {
  margin-top: 10%;
}

.search {
  margin: 0 auto;
  width: 50%;
  display: block;
  font-family: Open Sans;
}

input.search {
  text-align: center;
  margin-bottom: 10px;
}

.bar {
  height: 10px;
  width: 100%;
  background-color: #96aa48;
  margin-bottom: 50px;
}

h1#title {
  font-size: 8rem;
  font-family: Oswald;
  letter-spacing: 0px;
  text-align: center;
  text-transform: uppercase;

  span {
    font-size: 3rem;
    letter-spacing: -2px;
    position: relative;
    left: -12px;
    top: -1px;
    -webkit-transform: rotate(-7deg);
    display: inline-block;

     > span {
       color: #96AA48;
       position: relative;
       left: -3px;
       top: 1px;
       display: inline-block;
       -webkit-transform: rotate(11deg);
    }
  }
}

div.schedule {
  display: table;
  margin: 10px auto;
  border: solid 1px #e1e1e1;
  font-family: Open Sans;

  &.rip {
    text-align: center;
    border: none;

    sup {
      font-size: 10px;
      position: relative;
      top: -25px;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
    background-color: #e1e1e1;

    li {
      width: 25px;
      height: 25px;
      color: #FFF;
      font-family: Oswald;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      -webkit-transition: 1s ease;

      &:hover {
        -webkit-transition: 1s ease;
        width: 200px !important;
      }

      &:first-child span {
        background-color: #0C5489;
      }

      &:last-child span {
        background-color: #C41824;
      }

      span {
        width: 25px;
        height: 25px;
        display: inline-block;
        background-color: #96aa48;
      }

      a {
        text-decoration: none;
        color: #000;
      }
    }
  }

  div.day {
    float: left;

    div.hour {
      width: 150px;
      height: 20px;
      border-bottom: solid 1px #DDD;
      padding: 12px 0px;
      border-bottom: 1px solid #e1e1e1;
      border-left: 1px solid #FFF;
      position: relative;

      a {
         text-decoration: none;
         color: inherit;
      }

      span {
        display: inline-block;
        width: 33%;

        &.sub_2 {
           position: relative;
           top: -15px;
        }
      }

      .teacher {
        text-align: left;
        position: relative;
        left: 15px;
      }

      .chamber {
        text-align: center;
      }

      .course {
        text-align: right;
        position: relative;
        right: 15px;
      }

      &.changed {
        color: red !important;
      }

      &.title {
        text-align: center;
        background-color: #E1E1E1;
        border-color: #E1E1E1;

        span {
          text-align: center;
          width: 100%;
        }
      }

      .time {
          font-size: 10px;
          color: #665;
          width: 100%;
          position: absolute;
          top: 2px;
          left: 5px;
      }

      .free {
        .changed;
        text-align: center;
        width: 100%;
      }
    }
  }
}

.links {
    width: 100%;
    position: fixed;
    bottom: -90px;
    transition: ease .5s;

    &:hover {
        bottom: 0px;
        transition: ease .5s;
    }

    div {
        height: 100px;
        width: calc(100% / 3);
        float: left;

        a {
            text-decoration: none;
            height: 100%;
            width: 100%;
            display: inline-block;
            color: #FFF;
            text-align: center;
            font-size: 60px;
        }
    }
}

@import "mobile";


navbar padding

navbar padding

// User Dropdown box
.dropdown-user { min-width: 300px; padding: 10px; right: -10px; left: auto;
	.img { margin-right: 10px; }
	.info { margin-left: 110px; overflow: hidden; }
}
@media (min-width: 768px) {
	.navbar-nav.navbar-right:last-child {
		margin-right: 0px;
	}
}


OG style change

OG style change

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/benabraham/cbp-day14project.git/'


fix(ui): fixed json format contextData (#18718)

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/beeftornado/sentry.git/'