Changed unread count styling, minor fix

Changed unread count styling, minor fix

@import "grid";
@import "bootstrap";
@import "tour.css";
@import "feedback.css.less";
@import "bubble.css";

/* ==|== primary styles =====================================================
Author: Factlink
========================================================================== */
body {
  background: #F4F4F4;
}

body.factlink-site .fact-block,
body.factlink-site div.user-block {
  border-bottom: 1px solid @grayLighter;
  margin: 0px;
  .transition(all 0.2s ease);
  &.active {
    margin: 15px 0 15px 0;
    .drop-shadow(0px, 0, 8px, 0.3);
  }
}

#tos {
  textarea {
    width: 500px;
    height: 240px;
    border: solid 1px #ccc;
    .border-radius(4px);

    #font > .serif(normal, @basefont, @baseline);
    line-height: 1.4em;
    color: #666;
    padding: 10px;
    margin: 0 0 24px 0;
  }
  h1 {
    font-size: @basefont * 2;
    font-weight: bold;
    margin-bottom: @baseline;
  }
  .explanation {
    font-size: 0.8em;
    width: 100%;
    text-align: right;
    color: #aaa;
  }

  form {
    .row {
      padding: 10px 0px;
      color: #777;
      text-shadow: 0px 1px 0px @white;

      label {
        display: block;
        float: left;
        width: 100px;
        margin-top: 6px;
      }

      input {
        padding: 8px;
        width: 320px;
        .border-radius(3px);
        border: solid 1px #ddd;
      }
    }

    input[type="submit"] {
      margin: 16px 0 0 384px;
    }

    .tos_checkbox {
      margin: 0 0 0 100px;
      .field_with_errors {
        width: 20px; float:left;
      }
    }
  }
}
#feedback {
  position: fixed;
  top: 160px;
  background: url("/assets/feedback.png") top left no-repeat transparent;
  height: 97px;
  width: 37px;
  left: 0;
  a {
    text-indent: -10000em;
    display: block;
    width: 100%;
    height: 100%;
  }
}

.tour-modal {
  width: 920px !important;

  top: 60px !important;
  left: 50% !important;
  margin: 0 0 0 -470px !important;

  .modal-body {
    height: 400px;
  }
}

.modal-backdrop {
  background: rgba(255, 255, 255, 0.75) !important;
}

a.bookmarklet {
  cursor: move;
}
// TODO should be in the patterns, fix when using bootstrap grid.
.topbar h3 {
  top: 1px;
  left: 80px!important;
  margin-left: 0px !important;
}
.topbar .search {
  left: 153px;
  top: 1px;
}
.search-results .results .user-block {
  padding: 10px 0 0px 5px;
  height: 72px;
  list-style: none;

  .avatar-container {
    height: 72px;
    &:hover {
      cursor: pointer;
    }
  }

  .user-avatar {
    width: 76px;
    float: left;

    img {
      height: 32px;
      width: 32px;
      margin: 0 0 0 16px;
      border: solid 1px #ddd;
      .border-radius(3px);
    }
  }
  .wrapper {
    h3, sub {
      color: #555 !important;
    }
  }
}

#container {
  padding-top: 60px;

  h1 {
    font-size: @basefont * 1.5;
    margin-bottom: @basefont;
  }

  form {
    .row {
      padding: 10px 0px;
      color: #777;
      text-shadow: 0px 1px 0px #fff;
      label {
        display: block;
        float: left;
        width: 100px;
        margin-top: 6px;
      }

      input {
        padding: 8px;
        width: 320px;
        border-radius: 3px;
        border: solid 1px #ddd;
      }
    }

    .action-wrapper {
      margin-top: 10px;
      height: 20px;

      input, span, button {
        float: right;
      }

      span {
        padding: 0;
      }
    }
  }

  sub {
    color: #333;
    #font > .sans-serif(normal, x-small, @baseline);
    bottom: 0.45em;
   }
  .side-column {
    header {
      margin-top: 16px;
    }
    // User block for side column heading
    .user-block {
      .avatar-container {
        padding: 1em;
        .border-radius(3px);
        width: 160px;
        border-bottom: 1px solid white;
        background-color: #ededed;
        .inner-shadow(0, 1px, 1px, 0.2);
      }
      margin-bottom: 8px;
      h3 {
        #font > .sans-serif(bold, @baseline * 0.9, @baseline);
      }
      .wrapper {
        margin-left: 48px;
      }
      .user-avatar {
        background: #f7f7f7;
        float: left;
        position: relative;
        top: 0px;
        left: 0px;
        display: block;
        height: 32px;
        width: 32px;
        border: solid 1px #ddd;
        .border-radius(3px);
      }
    }
    h2 {
      #font > .sans-serif(bold, @baseline * 0.9, @baseline);
      display: inline;
    }
    .add-channel {
      float: right;
      padding: 4px;
      margin-right: 18px;
      margin-top: -2px;
      &:before {
        content: "+ ";
        #font > .iconic();
      }
    }
    .related-users {
      padding-top: @baseline;
      article, li {
        padding-bottom: @baseline / 2;
      }
      // User block for related users
      .user-block {
        padding: 0;
        background-color: transparent;
        &:hover {
          cursor: pointer;
          h1 {
            color: @linkColor;
          }
        }
        .wrapper {
          margin-left: 48px;
          h3 {
            color: @linkColor;
            font-size: @basefont;
            font-weight: bold;
            &:hover {
              color: @linkColorHover;
            }
          }
        }
      }
    }
  }
  @borderRadius: 4px;
  #main-wrapper {
    padding: 15px;
    margin-bottom: 172px;
    background: @white;
    .border-radius(@borderRadius);
    border: 1px solid @grayLighter;
    min-height: 400px;
    .drop-shadow();
    position: relative;
    z-index: 100;
    header.title {
      border-top: 1px solid @white;
      background-color: #f8f8f8;
      text-shadow: 0px 1px 0px @white;
      .border-radius(@borderRadius @borderRadius 0 0);
      margin: -15px -15px 0 -15px;
      padding: 10px 16px 6px 19px;
      border-bottom: 1px solid #d8d8d8;
      span.contained-channel-description {
        display: none;
      }
      h1 {
        .ellipsis();
        margin: 3px 0px 6px 0;
        display: block;
        font-size: 16pt;
        height: @basefont * 2;
        width: 70%;

      }
      a {
        float: right;
        display: block;
        color: @black;
      }
      div.float-box-container {
        float: right;
        position: relative;
      }
      p {
        margin: 0 0 6px 0;
      }
      .more {
        width: 100%;
        text-align: center;
      }
      #more-button {
        float: none;
        display: none;
        &:hover {
          text-decoration: none;
        }

        .label {
          &:hover {
            background-color: darken(#bfbfbf, 10%);
          }
        }
      }
      #contained-channels {
        .overflow {
          display: none;
        }
      }
      #contained-channel-list {
        display: block;
        li {
          width: 155px;
          display: inline-block;
          margin: 4px 8px 4px 0;
          border: 1px solid transparent;
          .box-shadow(0px 0px 3px #a8a8a8);
          padding: 2px;
          .border-radius(3px);

          a  {
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
            img {
              width: 24px;
              vertical-align: -30%;
              height: 24px;
              margin-right: 6px;
            }
            span {
              .ellipsis();
              display: inline-block;
              width: 110px;
            }
            &:hover {
              text-decoration: none;
              color: #333;
            }
          }
          &:hover {
            box-shadow: 0px 0px 3px #1d8cc8;
            border: 1px solid #1d8cc8;
            background-color: #fbfbfb;
          }
        }
      }
    }
  }

  #facts_for_channel {
    div.loading {
      text-align: center;
      line-height: 100px;

      img, span {
        vertical-align: middle;
      }
    }

  }

  #channel-listing {
    @margin: 6px;
    margin: 1.5em 0 1em 0;
    li a {
      padding: @margin 4px @margin 0;
      width: 145px;
      display: block;
      #font > .sans-serif(normal, @basefont, @baseline);
      text-shadow: 0px 1px 0px @white;
      padding-left: 24px;
      &:hover {
        text-decoration: none;
      }
      &.stream {
        padding-bottom: 3px;
        background: url("/assets/homeIcon.png") 4px @margin no-repeat transparent;
        border-bottom: 1px solid #dbdbdb;
      }
      &.created {
        border-top: 1px solid white;
        background: url("/assets/userIcon.png") 5px @margin no-repeat transparent;
      }
      .new {
        color: @black;
        margin-left: -20px;
        float: right;
      }
      .title {
        .ellipsis();
        width: 130px;
        display: inline-block;
      }
    }
    li.active {
      a {
        color: @black;
      }
      background: url("/assets/menuBackground.png") left (@margin / 2) - 2 no-repeat transparent;
    }
  }
  .no_facts {
    margin-top: 15px;
    font-size: @basefont;
    text-align: center;
    p {
      padding-bottom: 1em;
    }
    h3 {
      font-size: @basefont*1.5;
      padding-bottom: 0.5em;
    }

    .empty-channel-action {
      float: left;
      width: 49%;
    }
    .empty-channel-action-end {
      display: block;
      width: 1px;
      height: 212px;
    }
  }
}

@import "grid";
@import "bootstrap";
@import "tour.css";
@import "feedback.css.less";
@import "bubble.css";

/* ==|== primary styles =====================================================
Author: Factlink
========================================================================== */
body {
  background: #F4F4F4;
}

body.factlink-site .fact-block,
body.factlink-site div.user-block {
  border-bottom: 1px solid @grayLighter;
  margin: 0px;
  .transition(all 0.2s ease);
  &.active {
    margin: 15px 0 15px 0;
    .drop-shadow(0px, 0, 8px, 0.3);
  }
}

#tos {
  textarea {
    width: 500px;
    height: 240px;
    border: solid 1px #ccc;
    .border-radius(4px);

    #font > .serif(normal, @basefont, @baseline);
    line-height: 1.4em;
    color: #666;
    padding: 10px;
    margin: 0 0 24px 0;
  }
  h1 {
    font-size: @basefont * 2;
    font-weight: bold;
    margin-bottom: @baseline;
  }
  .explanation {
    font-size: 0.8em;
    width: 100%;
    text-align: right;
    color: #aaa;
  }

  form {
    .row {
      padding: 10px 0px;
      color: #777;
      text-shadow: 0px 1px 0px @white;

      label {
        display: block;
        float: left;
        width: 100px;
        margin-top: 6px;
      }

      input {
        padding: 8px;
        width: 320px;
        .border-radius(3px);
        border: solid 1px #ddd;
      }
    }

    input[type="submit"] {
      margin: 16px 0 0 384px;
    }

    .tos_checkbox {
      margin: 0 0 0 100px;
      .field_with_errors {
        width: 20px; float:left;
      }
    }
  }
}
#feedback {
  position: fixed;
  top: 160px;
  background: url("/assets/feedback.png") top left no-repeat transparent;
  height: 97px;
  width: 37px;
  left: 0;
  a {
    text-indent: -10000em;
    display: block;
    width: 100%;
    height: 100%;
  }
}

.tour-modal {
  width: 920px !important;

  top: 60px !important;
  left: 50% !important;
  margin: 0 0 0 -470px !important;

  .modal-body {
    height: 400px;
  }
}

.modal-backdrop {
  background: rgba(255, 255, 255, 0.75) !important;
}

a.bookmarklet {
  cursor: move;
}
// TODO should be in the patterns, fix when using bootstrap grid.
.topbar h3 {
  top: 1px;
  left: 80px!important;
  margin-left: 0px !important;
}
.topbar .search {
  left: 153px;
  top: 1px;
}
.search-results .results .user-block {
  padding: 10px 0 0px 5px;
  height: 72px;
  list-style: none;

  .avatar-container {
    height: 72px;
    &:hover {
      cursor: pointer;
    }
  }

  .user-avatar {
    width: 76px;
    float: left;

    img {
      height: 32px;
      width: 32px;
      margin: 0 0 0 16px;
      border: solid 1px #ddd;
      .border-radius(3px);
    }
  }
  .wrapper {
    h3, sub {
      color: #555 !important;
    }
  }
}

#container {
  padding-top: 60px;

  h1 {
    font-size: @basefont * 1.5;
    margin-bottom: @basefont;
  }

  form {
    .row {
      padding: 10px 0px;
      color: #777;
      text-shadow: 0px 1px 0px #fff;
      label {
        display: block;
        float: left;
        width: 100px;
        margin-top: 6px;
      }

      input {
        padding: 8px;
        width: 320px;
        border-radius: 3px;
        border: solid 1px #ddd;
      }
    }

    .action-wrapper {
      margin-top: 10px;
      height: 20px;

      input, span, button {
        float: right;
      }

      span {
        padding: 0;
      }
    }
  }

  sub {
    color: #333;
    #font > .sans-serif(normal, x-small, @baseline);
    bottom: 0.45em;
   }
  .side-column {
    header {
      margin-top: 16px;
    }
    // User block for side column heading
    .user-block {
      .avatar-container {
        padding: 1em;
        .border-radius(3px);
        width: 160px;
        border-bottom: 1px solid white;
        background-color: #ededed;
        .inner-shadow(0, 1px, 1px, 0.2);
      }
      margin-bottom: 8px;
      h3 {
        #font > .sans-serif(bold, @baseline * 0.9, @baseline);
      }
      .wrapper {
        margin-left: 48px;
      }
      .user-avatar {
        background: #f7f7f7;
        float: left;
        position: relative;
        top: 0px;
        left: 0px;
        display: block;
        height: 32px;
        width: 32px;
        border: solid 1px #ddd;
        .border-radius(3px);
      }
    }
    h2 {
      #font > .sans-serif(bold, @baseline * 0.9, @baseline);
      display: inline;
    }
    .add-channel {
      float: right;
      padding: 4px;
      margin-right: 18px;
      margin-top: -2px;
      &:before {
        content: "+ ";
        #font > .iconic();
      }
    }
    .related-users {
      padding-top: @baseline;
      article, li {
        padding-bottom: @baseline / 2;
      }
      // User block for related users
      .user-block {
        padding: 0;
        background-color: transparent;
        &:hover {
          cursor: pointer;
          h1 {
            color: @linkColor;
          }
        }
        .wrapper {
          margin-left: 48px;
          h3 {
            color: @linkColor;
            font-size: @basefont;
            font-weight: bold;
            &:hover {
              color: @linkColorHover;
            }
          }
        }
      }
    }
  }
  @borderRadius: 4px;
  #main-wrapper {
    padding: 15px;
    margin-bottom: 172px;
    background: @white;
    .border-radius(@borderRadius);
    border: 1px solid @grayLighter;
    min-height: 400px;
    .drop-shadow();
    position: relative;
    z-index: 100;
    header.title {
      border-top: 1px solid @white;
      background-color: #f8f8f8;
      text-shadow: 0px 1px 0px @white;
      .border-radius(@borderRadius @borderRadius 0 0);
      margin: -15px -15px 0 -15px;
      padding: 10px 16px 6px 19px;
      border-bottom: 1px solid #d8d8d8;
      span.contained-channel-description {
        display: none;
      }
      h1 {
        .ellipsis();
        margin: 3px 0px 6px 0;
        display: block;
        font-size: 16pt;
        height: @basefont * 2;
        width: 70%;

      }
      a {
        float: right;
        display: block;
        color: @black;
      }
      div.float-box-container {
        float: right;
        position: relative;
      }
      p {
        margin: 0 0 6px 0;
      }
      .more {
        width: 100%;
        text-align: center;
      }
      #more-button {
        float: none;
        display: none;
        &:hover {
          text-decoration: none;
        }

        .label {
          &:hover {
            background-color: darken(#bfbfbf, 10%);
          }
        }
      }
      #contained-channels {
        .overflow {
          display: none;
        }
      }
      #contained-channel-list {
        display: block;
        li {
          width: 155px;
          display: inline-block;
          margin: 4px 8px 4px 0;
          border: 1px solid transparent;
          .box-shadow(0px 0px 3px #a8a8a8);
          padding: 2px;
          .border-radius(3px);

          a  {
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
            img {
              width: 24px;
              vertical-align: -30%;
              height: 24px;
              margin-right: 6px;
            }
            span {
              .ellipsis();
              display: inline-block;
              width: 110px;
            }
            &:hover {
              text-decoration: none;
              color: #333;
            }
          }
          &:hover {
            box-shadow: 0px 0px 3px #1d8cc8;
            border: 1px solid #1d8cc8;
            background-color: #fbfbfb;
          }
        }
      }
    }
  }

  #facts_for_channel {
    div.loading {
      text-align: center;
      line-height: 100px;

      img, span {
        vertical-align: middle;
      }
    }

  }

  #channel-listing {
    @margin: 6px;
    margin: 1.5em 0 1em 0;
    li a {
      padding: @margin 4px @margin 0;
      width: 140px;
      display: block;
      .ellipsis();
      #font > .sans-serif(normal, @basefont, @baseline);
      text-shadow: 0px 1px 0px @white;
      padding-left: 24px;
      &:hover {
        text-decoration: none;
      }
      &.stream {
        padding-bottom: 3px;
        background: url("/assets/homeIcon.png") 4px @margin no-repeat transparent;
        border-bottom: 1px solid #dbdbdb;
      }
      &.created {
        border-top: 1px solid white;
        background: url("/assets/userIcon.png") 5px @margin no-repeat transparent;
      }
      .new {
        color: @black;
        margin-left: -20px;
        float: right;
      }
    }
    li.active {
      a {
        color: @black;
      }
      background: url("/assets/menuBackground.png") left (@margin / 2) - 2 no-repeat transparent;
    }
  }
  .no_facts {
    margin-top: 15px;
    font-size: @basefont;
    text-align: center;
    p {
      padding-bottom: 1em;
    }
    h3 {
      font-size: @basefont*1.5;
      padding-bottom: 0.5em;
    }

    .empty-channel-action {
      float: left;
      width: 49%;
    }
    .empty-channel-action-end {
      display: block;
      width: 1px;
      height: 212px;
    }
  }
}


.bt.rt.bl arc style

.bt.rt.bl arc style

.crnx-ode-properties {
	// settings
	@font-size: 14;
	@cell-width: 250;
	@arc-cell-height: 30;
	@arc-arrow-width: 8;
	@arc-arrow-length: 12;
	@node-cell-padding: 20;
	@button-width: 20;
	@button-height: 20;
	@passive-stroke-color: #444;
	@passive-fill-color: #EEE;
	@active-stroke-color: #000;
	@active-fill-color: #FFF;
	@separator-color: #AAA;

	.svg(@width,@height,@contents) {
		@svg: "<svg xmlns='http://www.w3.org/2000/svg' width='@{width}' height='@{height}'>@{contents}</svg>";
		@data: escape(@svg);
		background-image+: url("data:image/svg+xml;charset=utf-8,@{data}");
	}
	.arc(@width,@height,@d) {
		.svg(@width,@height,"<path d='@{d}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />");
	}
	font-size: unit(@font-size,px);
	font-family: sans-serif;
	table {
		table-layout: fixed;
		border-collapse: collapse;
		td, th {
			min-width: unit(@cell-width,px);
			width: unit(@cell-width,px);
			padding: 0;
			position: relative;
		}
		tr.nodes {
			@cx: @cell-width;
			@hcx: @cell-width/2;
			@ax1: @hcx + @arc-arrow-width/2;
			@ax2: @hcx - @arc-arrow-width/2;
			@cy: @node-cell-padding;
			@ay: @arc-arrow-length + 0.5;
			th {
				padding: unit(@cy,px) 0;
				background-repeat: no-repeat;
				@start-path-data: "M @{hcx} 0 V @{cy}";
				@end-path: "<path d='M @{hcx} @{cy} V @{ay}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />";
				@arrow-path: "<path d='M @{ax1} @{ay} L @{hcx} 0.5 L @{ax2} @{ay} Z' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' stroke-width='1' />";
				&.b {
					.svg(@cx, @cy, @end-path @arrow-path);
					background-position+: bottom;
					background-repeat+: no-repeat;
				}
				&.t {
					.arc(@cx, @cy ,@start-path-data);
					background-position+: top;
					background-repeat+: no-repeat;
				}
				&.b.t {
					.svg(@cx ,@cy, @end-path @arrow-path);
					background-position+: bottom;
					background-repeat+: no-repeat;
					.arc(@cx, @cy, @start-path-data);
					background-position+: top;
					background-repeat+: no-repeat;
				}
				&.bt {
					.arc(@cx,@cy,"M @{hcx} 0 V @{cy}");
					background-repeat+: repeat-y;
				}
				button {
					@obx: @button-width;
					@oby: @button-height;
					@hobx: @obx/2;
					@hoby: @oby/2;
					@bx: @obx - 4;
					@by: @oby - 4;
					@hbx: @bx/2;
					@hby: @by/2;
					display: block;
					position: absolute;
					z-index: 2;
					box-sizing: border-box;
					width: unit(@obx,px);
					height: unit(@oby,px);
					left: unit(@hcx - @hobx, px);
					padding: 1px;
					border: solid 1px @passive-stroke-color;
					.svg(@bx,@by,
						"<path d='M @{hbx} 0 V @{by} M 0 @{hby} H @{bx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
					);
					background-color: @passive-fill-color;
					background-position: 1px 1px;
					background-repeat: no-repeat;
					&.t {
						top: unit(@cy - @oby, px);
					}
					span {
						position: absolute;
						left: -10000px;
					}
					opacity: 0;
					transition: 300ms;
					&:focus, &:hover {
						transition: none;
						opacity: 1;
						border: solid 1px @active-stroke-color;
						.svg(@bx,@by,
							"<path d='M @{hbx} 0 V @{by} M 0 @{hby} H @{bx}' fill='none' stroke='@{active-stroke-color}' stroke-width='2' />"
						);
						background-color: @active-fill-color;
					}
					&.attached-b, &.attached-t {
						transition: none;
						opacity: 1;
						.svg(@bx,@by,
							"<path d='M 0 @{hby} H @{bx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
						);
					}
					&.attached-b {
						border-bottom: none;
					}
					&.attached-t {
						border-top: none;
						background-position: 1px 2px;
					}
				}
				&:hover button {
					opacity: 1;
				}
				ul {
					@w: @cx - 2;
					position: absolute; // to be vertically positioned with js
					z-index: 1;
					width: unit(@w,px);
					margin: 0;
					padding: 0;
					border: 1px solid @active-stroke-color;
					background: @passive-fill-color;
					color: @passive-stroke-color;
					text-align: left;
					font-weight: normal;
					li {
						list-style: none;
						padding: 5px;
						&:focus, &:hover {
							background: @active-fill-color;
							color: @active-stroke-color;
						}
						cursor: default;
					}
					visibility: hidden;
					&.attached {
						visibility: visible;
					}
				}
			}
		}
		tr.arcs {
			@cx: @cell-width;
			@cy: @arc-cell-height;
			@hcx: @cx/2;
			@hcy: @cy/2;
			@hcxj: @hcx - 4;
			@hcyj: @hcy - 6;
			th {
				@rt-full-arc: "M @{hcx} 0 a @{hcy} @{hcy} 0 0 0 @{hcy} @{hcy} H @{cx}";
				@bl-full-arc: "M @{hcx} @{cy} a @{hcy} @{hcy} 0 0 0 -@{hcy} -@{hcy} H 0";
				@bt-arc: "M @{hcx} 0 V @{cy}";
				height: unit(@arc-cell-height,px);
				background-repeat: no-repeat;
				&.rt {
					.arc(@cx, @cy, @rt-full-arc);
				}
				&.bl {
					.arc(@cx, @cy, @bl-full-arc);
				}
				&.rt.bl {
					.arc(@cx, @cy, @rt-full-arc @bl-full-arc);
				}
				&.bt {
					.arc(@cx, @cy, @bt-arc);
				}
				&.bt.bl {
					.arc(@cx, @cy, @bt-arc @bl-full-arc);
				}
				&.bt.rt {
					.arc(@cx, @cy, @bt-arc @rt-full-arc);
				}
				&.bt.rt.bl {
					.arc(@cx, @cy, @bt-arc @rt-full-arc @bl-full-arc);
				}

				&.rl {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx}");
				}
				&.rl.rt {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx} M @{hcx} 0 a @{hcy} @{hcy} 0 0 0 @{hcy} @{hcy}");
				}
				&.rl.bl {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx} M @{hcx} @{cy} a @{hcy} @{hcy} 0 0 0 -@{hcy} -@{hcy}");
				}
				&.rl.bt {
					.arc(@cx,@cy,
						"M 0 @{hcy} H @{hcxj} v -1 a 3 3 0 0 1 3 -3 h 2 a 3 3 0 0 1 3 3 v 1 H @{cx} "
						"M @{hcx} 0 V @{hcyj} m 0 4 V @{cy}"
					);
				}
				&.rl.bt.rt {
					@ctl-y: 5;
					@ctl-x: @hcy - @ctl-y;
					.arc(@cx,@cy,
						"M 0 @{hcy} H @{hcxj} v -1 a 3 3 0 0 1 3 -3 h 2 a 3 3 0 0 1 3 3 v 1 H @{cx} "
						"M @{hcx} 0 V @{hcyj} m 0 4 V @{cy} "
						"M @{hcx} 0 c 0 @{ctl-y} @{ctl-x} @{hcy} @{hcy} @{hcy}"
					);
				}
			}
		}
		tfoot td {
			text-align: center;
		}
		tbody {
			td {
				vertical-align: top;
			}
			ul {
				padding: 0;
				margin: 0;
				li {
					list-style: none;
					margin: 5px;
					padding: 0;
				}
				ul li {
					list-style: disc;
					margin: 5px 0 5px 20px;
				}
				&.major li {
					@separator-width: 100;
					@separator-padding: 9;
					@sx: @separator-width;
					@sy: @separator-padding*2 + 1;
					@hsy: @sy/2;
					@separator-path: "<path d='M 0 @{hsy} H @{sx}' fill='none' stroke='@{separator-color}' />";
					margin: 0;
					padding: 0px 5px unit(@sy,px) 5px;
					.svg(@sx,@sy,@separator-path);
					background-position: bottom;
					background-repeat: no-repeat;
					&:first-child {
						padding-top: unit(@sy,px);
						.svg(@sx,@sy,@separator-path);
						background-position+: bottom;
						.svg(@sx,@sy,@separator-path);
						background-position+: top;
					}
				}
			}
			div.equation {
				border: solid 1px @separator-color;
				margin: 0 5px;
				transition: 300ms;
				&.highlight {
					background: #FEA;
					border: solid 1px @active-stroke-color;
				}
			}
			div.detail {
				@td: "M 4.5 0.5 l 3 3 h -6 z";
				@bd: "M 4.5 9.5 l 3 -3 h -6 z";
				button {
					display: block;
					box-sizing: border-box;
					width: 100%;
					height: unit(@font-size,px);
					padding: 0;
					transition: 300ms;
					transition-property: border, background;
					border: solid 1px transparent;
					background-color: transparent;
					.svg(9,10,"<path d='@{td} @{bd}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
					background-repeat: no-repeat;
					background-position: center;
					span {
						position: absolute;
						left: -10000px;
					}
					&:last-child {
						display: none;
					}
					&:focus, &:hover {
						border: solid 1px @active-stroke-color;
						background-color: @active-fill-color;
						.svg(9,10,"<path d='@{td} @{bd}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
					}
				}
				div {
					display: none;
				}
				&.open {
					button {
						&:first-child {
							margin-bottom: unit(-@font-size,px);
							.svg(9,10,"<path d='@{bd}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
							&:focus, &:hover {
								.svg(9,10,"<path d='@{bd}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
							}
						}
						&:last-child {
							display: block;
							margin-top: unit(-@font-size,px);
							.svg(9,10,"<path d='@{td}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
							&:focus, &:hover {
								.svg(9,10,"<path d='@{td}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
							}
						}
					}
					div {
						display: block;
					}
				}
			}
			div.note {
				font-size: 90%;
				color: @passive-stroke-color;
			}
		}
	}
	span.arrow {
		@cx: 50;
		@cy: @font-size;
		@hcy: @cy/2;
		@ax: @arc-arrow-length + 0.5;
		@ay1: @hcy + @arc-arrow-width/2;
		@ay2: @hcy - @arc-arrow-width/2;
		display: inline-block;
		width: unit(@cx,px);
		height: unit(@cy,px);
		.svg(@cx,@cy,
			"<path d='M @{ax} @{hcy} H @{cx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
			"<path d='M @{ax} @{ay1} L 0.5 @{hcy} L @{ax} @{ay2} Z' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' stroke-width='1' />"
		);
	}
}

.crnx-ode-properties {
	// settings
	@font-size: 14;
	@cell-width: 250;
	@arc-cell-height: 30;
	@arc-arrow-width: 8;
	@arc-arrow-length: 12;
	@node-cell-padding: 20;
	@button-width: 20;
	@button-height: 20;
	@passive-stroke-color: #444;
	@passive-fill-color: #EEE;
	@active-stroke-color: #000;
	@active-fill-color: #FFF;
	@separator-color: #AAA;

	.svg(@width,@height,@contents) {
		@svg: "<svg xmlns='http://www.w3.org/2000/svg' width='@{width}' height='@{height}'>@{contents}</svg>";
		@data: escape(@svg);
		background-image+: url("data:image/svg+xml;charset=utf-8,@{data}");
	}
	.arc(@width,@height,@d) {
		.svg(@width,@height,"<path d='@{d}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />");
	}
	font-size: unit(@font-size,px);
	font-family: sans-serif;
	table {
		table-layout: fixed;
		border-collapse: collapse;
		td, th {
			min-width: unit(@cell-width,px);
			width: unit(@cell-width,px);
			padding: 0;
			position: relative;
		}
		tr.nodes {
			@cx: @cell-width;
			@hcx: @cell-width/2;
			@ax1: @hcx + @arc-arrow-width/2;
			@ax2: @hcx - @arc-arrow-width/2;
			@cy: @node-cell-padding;
			@ay: @arc-arrow-length + 0.5;
			th {
				padding: unit(@cy,px) 0;
				background-repeat: no-repeat;
				@start-path-data: "M @{hcx} 0 V @{cy}";
				@end-path: "<path d='M @{hcx} @{cy} V @{ay}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />";
				@arrow-path: "<path d='M @{ax1} @{ay} L @{hcx} 0.5 L @{ax2} @{ay} Z' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' stroke-width='1' />";
				&.b {
					.svg(@cx, @cy, @end-path @arrow-path);
					background-position+: bottom;
					background-repeat+: no-repeat;
				}
				&.t {
					.arc(@cx, @cy ,@start-path-data);
					background-position+: top;
					background-repeat+: no-repeat;
				}
				&.b.t {
					.svg(@cx ,@cy, @end-path @arrow-path);
					background-position+: bottom;
					background-repeat+: no-repeat;
					.arc(@cx, @cy, @start-path-data);
					background-position+: top;
					background-repeat+: no-repeat;
				}
				&.bt {
					.arc(@cx,@cy,"M @{hcx} 0 V @{cy}");
					background-repeat+: repeat-y;
				}
				button {
					@obx: @button-width;
					@oby: @button-height;
					@hobx: @obx/2;
					@hoby: @oby/2;
					@bx: @obx - 4;
					@by: @oby - 4;
					@hbx: @bx/2;
					@hby: @by/2;
					display: block;
					position: absolute;
					z-index: 2;
					box-sizing: border-box;
					width: unit(@obx,px);
					height: unit(@oby,px);
					left: unit(@hcx - @hobx, px);
					padding: 1px;
					border: solid 1px @passive-stroke-color;
					.svg(@bx,@by,
						"<path d='M @{hbx} 0 V @{by} M 0 @{hby} H @{bx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
					);
					background-color: @passive-fill-color;
					background-position: 1px 1px;
					background-repeat: no-repeat;
					&.t {
						top: unit(@cy - @oby, px);
					}
					span {
						position: absolute;
						left: -10000px;
					}
					opacity: 0;
					transition: 300ms;
					&:focus, &:hover {
						transition: none;
						opacity: 1;
						border: solid 1px @active-stroke-color;
						.svg(@bx,@by,
							"<path d='M @{hbx} 0 V @{by} M 0 @{hby} H @{bx}' fill='none' stroke='@{active-stroke-color}' stroke-width='2' />"
						);
						background-color: @active-fill-color;
					}
					&.attached-b, &.attached-t {
						transition: none;
						opacity: 1;
						.svg(@bx,@by,
							"<path d='M 0 @{hby} H @{bx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
						);
					}
					&.attached-b {
						border-bottom: none;
					}
					&.attached-t {
						border-top: none;
						background-position: 1px 2px;
					}
				}
				&:hover button {
					opacity: 1;
				}
				ul {
					@w: @cx - 2;
					position: absolute; // to be vertically positioned with js
					z-index: 1;
					width: unit(@w,px);
					margin: 0;
					padding: 0;
					border: 1px solid @active-stroke-color;
					background: @passive-fill-color;
					color: @passive-stroke-color;
					text-align: left;
					font-weight: normal;
					li {
						list-style: none;
						padding: 5px;
						&:focus, &:hover {
							background: @active-fill-color;
							color: @active-stroke-color;
						}
						cursor: default;
					}
					visibility: hidden;
					&.attached {
						visibility: visible;
					}
				}
			}
		}
		tr.arcs {
			@cx: @cell-width;
			@cy: @arc-cell-height;
			@hcx: @cx/2;
			@hcy: @cy/2;
			@hcxj: @hcx - 4;
			@hcyj: @hcy - 6;
			th {
				@rt-full-arc: "M @{hcx} 0 a @{hcy} @{hcy} 0 0 0 @{hcy} @{hcy} H @{cx}";
				@bl-full-arc: "M @{hcx} @{cy} a @{hcy} @{hcy} 0 0 0 -@{hcy} -@{hcy} H 0";
				height: unit(@arc-cell-height,px);
				background-repeat: no-repeat;
				&.rt {
					.arc(@cx, @cy, @rt-full-arc);
				}
				&.bl {
					.arc(@cx, @cy, @bl-full-arc);
				}
				&.rt.bl {
					.arc(@cx, @cy, @rt-full-arc @bl-full-arc);
				}
				&.rl {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx}");
				}
				&.rl.rt {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx} M @{hcx} 0 a @{hcy} @{hcy} 0 0 0 @{hcy} @{hcy}");
				}
				&.rl.bl {
					.arc(@cx,@cy,"M 0 @{hcy} H @{cx} M @{hcx} @{cy} a @{hcy} @{hcy} 0 0 0 -@{hcy} -@{hcy}");
				}
				&.bt {
					.arc(@cx,@cy,"M @{hcx} 0 V @{cy}");
				}
				&.bt.rt {
					.arc(@cx,@cy,"M @{hcx} 0 V @{cy} M @{hcx} 0 a @{hcy} @{hcy} 0 0 0 @{hcy} @{hcy} H @{cx}");
				}
				&.bt.bl {
					.arc(@cx,@cy,"M @{hcx} 0 V @{cy} M @{hcx} @{cy} a @{hcy} @{hcy} 0 0 0 -@{hcy} -@{hcy} H 0");
				}
				&.rl.bt {
					.arc(@cx,@cy,
						"M 0 @{hcy} H @{hcxj} v -1 a 3 3 0 0 1 3 -3 h 2 a 3 3 0 0 1 3 3 v 1 H @{cx} "
						"M @{hcx} 0 V @{hcyj} m 0 4 V @{cy}"
					);
				}
				&.rl.bt.rt {
					@ctl-y: 5;
					@ctl-x: @hcy - @ctl-y;
					.arc(@cx,@cy,
						"M 0 @{hcy} H @{hcxj} v -1 a 3 3 0 0 1 3 -3 h 2 a 3 3 0 0 1 3 3 v 1 H @{cx} "
						"M @{hcx} 0 V @{hcyj} m 0 4 V @{cy} "
						"M @{hcx} 0 c 0 @{ctl-y} @{ctl-x} @{hcy} @{hcy} @{hcy}"
					);
				}
			}
		}
		tfoot td {
			text-align: center;
		}
		tbody {
			td {
				vertical-align: top;
			}
			ul {
				padding: 0;
				margin: 0;
				li {
					list-style: none;
					margin: 5px;
					padding: 0;
				}
				ul li {
					list-style: disc;
					margin: 5px 0 5px 20px;
				}
				&.major li {
					@separator-width: 100;
					@separator-padding: 9;
					@sx: @separator-width;
					@sy: @separator-padding*2 + 1;
					@hsy: @sy/2;
					@separator-path: "<path d='M 0 @{hsy} H @{sx}' fill='none' stroke='@{separator-color}' />";
					margin: 0;
					padding: 0px 5px unit(@sy,px) 5px;
					.svg(@sx,@sy,@separator-path);
					background-position: bottom;
					background-repeat: no-repeat;
					&:first-child {
						padding-top: unit(@sy,px);
						.svg(@sx,@sy,@separator-path);
						background-position+: bottom;
						.svg(@sx,@sy,@separator-path);
						background-position+: top;
					}
				}
			}
			div.equation {
				border: solid 1px @separator-color;
				margin: 0 5px;
				transition: 300ms;
				&.highlight {
					background: #FEA;
					border: solid 1px @active-stroke-color;
				}
			}
			div.detail {
				@td: "M 4.5 0.5 l 3 3 h -6 z";
				@bd: "M 4.5 9.5 l 3 -3 h -6 z";
				button {
					display: block;
					box-sizing: border-box;
					width: 100%;
					height: unit(@font-size,px);
					padding: 0;
					transition: 300ms;
					transition-property: border, background;
					border: solid 1px transparent;
					background-color: transparent;
					.svg(9,10,"<path d='@{td} @{bd}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
					background-repeat: no-repeat;
					background-position: center;
					span {
						position: absolute;
						left: -10000px;
					}
					&:last-child {
						display: none;
					}
					&:focus, &:hover {
						border: solid 1px @active-stroke-color;
						background-color: @active-fill-color;
						.svg(9,10,"<path d='@{td} @{bd}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
					}
				}
				div {
					display: none;
				}
				&.open {
					button {
						&:first-child {
							margin-bottom: unit(-@font-size,px);
							.svg(9,10,"<path d='@{bd}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
							&:focus, &:hover {
								.svg(9,10,"<path d='@{bd}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
							}
						}
						&:last-child {
							display: block;
							margin-top: unit(-@font-size,px);
							.svg(9,10,"<path d='@{td}' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' />");
							&:focus, &:hover {
								.svg(9,10,"<path d='@{td}' fill='@{active-fill-color}' stroke='@{active-stroke-color}' />");
							}
						}
					}
					div {
						display: block;
					}
				}
			}
			div.note {
				font-size: 90%;
				color: @passive-stroke-color;
			}
		}
	}
	span.arrow {
		@cx: 50;
		@cy: @font-size;
		@hcy: @cy/2;
		@ax: @arc-arrow-length + 0.5;
		@ay1: @hcy + @arc-arrow-width/2;
		@ay2: @hcy - @arc-arrow-width/2;
		display: inline-block;
		width: unit(@cx,px);
		height: unit(@cy,px);
		.svg(@cx,@cy,
			"<path d='M @{ax} @{hcy} H @{cx}' fill='none' stroke='@{passive-stroke-color}' stroke-width='2' />"
			"<path d='M @{ax} @{ay1} L 0.5 @{hcy} L @{ax} @{ay2} Z' fill='@{passive-fill-color}' stroke='@{passive-stroke-color}' stroke-width='1' />"
		);
	}
}


Dropdown can now hide other input types #1752

/*
 * # Semantic - Dropdown
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

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

@type    : 'module';
@element : 'dropdown';

@import '../../theme.config';

/*******************************
            Dropdown
*******************************/

.ui.dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
  line-height: 1em;
  tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  text-align: left;
  transition: @transition;
}

/*******************************
            Content
*******************************/

/*--------------
      Menu
---------------*/

.ui.dropdown .menu {
  cursor: auto;
  position: absolute;
  display: none;
  outline: none;
  top: 100%;
  transition: @menuTransition;

  margin: @menuMargin;
  padding: @menuPadding;
  background: @menuBackground;
  min-width: 100%;

  white-space: @menuWrap;
  font-size: 1rem;
  text-shadow: none;
  text-align: @menuTextAlign;

  box-shadow: @menuBoxShadow;
  border: @menuBorder;
  border-radius: @menuBorderRadius;
  transition: @menuTransition;
  z-index: @menuZIndex;
  will-change: transform, opacity;
}

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

.ui.dropdown > input:not(.search):first-child,
.ui.dropdown > select {
  display: none !important;
}

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

.ui.dropdown > .dropdown.icon {
  width: auto;
  margin: @dropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon {
  width: auto;
  float: @itemDropdownIconFloat;
  margin: @itemDropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon + .text {
  margin-right: @itemDropdownIconDistance;
}

/*--------------
      Text
---------------*/

.ui.dropdown > .text {
  display: inline-block;
  transition: @textTransition;
}

/*--------------
    Menu Item
---------------*/

.ui.dropdown .menu > .item {
  position: relative;
  cursor: pointer;
  display: block;
  border: @itemBorder;
  height: @itemHeight;

  border-top: @itemDivider;
  line-height: @itemLineHeight;
  font-size: @itemFontSize;
  color: @itemColor;

  padding: @itemVerticalPadding @itemHorizontalPadding !important;
  font-size: @itemFontSize;
  text-transform: @itemTextTransform;
  font-weight: @itemFontWeight;
  box-shadow: @itemBoxShadow;
  -webkit-touch-callout: none;
}
.ui.dropdown .menu > .item:first-child {
  border-top-width: 0px;
}

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

.ui.dropdown > .text > [class*="right floated"],
.ui.dropdown .menu .item > [class*="right floated"] {
  float: right !important;
  margin-right: 0em !important;
  margin-left: @floatedDistance !important;
}
.ui.dropdown > .text > [class*="left floated"],
.ui.dropdown .menu .item > [class*="left floated"] {
  float: left !important;
  margin-left: 0em !important;
  margin-right: @floatedDistance !important;
}

.ui.dropdown .menu .item > .icon.floated,
.ui.dropdown .menu .item > .flag.floated,
.ui.dropdown .menu .item > .image.floated,
.ui.dropdown .menu .item > img.floated {
  margin-top: @itemLineHeightOffset;
}

/*--------------
  Menu Divider
---------------*/

.ui.dropdown .menu > .header {
  margin: @menuHeaderMargin;
  padding: @menuHeaderPadding;
  color: @menuHeaderColor;
  font-size: @menuHeaderFontSize;
  font-weight: @menuHeaderFontWeight;
  text-transform: @menuHeaderTextTransform;
}

.ui.dropdown .menu > .divider {
  border-top: @menuDividerBorder;
  height: 0em;
  margin: @menuDividerMargin;
}

.ui.dropdown .menu > .input {
  margin: @menuInputMargin;
  min-width: @menuInputMinWidth;
}
.ui.dropdown .menu > .header + .input {
  margin-top: 0em;
}
.ui.dropdown .menu > .input:not(.transparent) input {
  padding: @menuInputPadding;
}
.ui.dropdown .menu > .input:not(.transparent) .button,
.ui.dropdown .menu > .input:not(.transparent) .icon,
.ui.dropdown .menu > .input:not(.transparent) .label {
  padding-top: @menuInputVerticalPadding;
  padding-bottom: @menuInputVerticalPadding;
}

/*-----------------
  Item Description
-------------------*/

.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
  margin: @itemDescriptionMargin;
  color: @itemDescriptionColor;
}

/*--------------
    Sub Menu
---------------*/

.ui.dropdown .menu .menu {
  top: @subMenuTop !important;
  left: @subMenuLeft !important;
  right: @subMenuRight !important;
  margin: @subMenuMargin !important;
  border-radius: @subMenuBorderRadius !important;
  z-index: @subMenuZIndex !important;
}

/* Hide Arrow */
.ui.dropdown .menu .menu:after {
  display: none;
}

/*******************************
            Coupling
*******************************/

/*--------------
   Sub Elements
---------------*/

/* Icons / Flags / Labels / Image */
.ui.dropdown > .text > .icon,
.ui.dropdown > .text > .label,
.ui.dropdown > .text > .flag,
.ui.dropdown > .text > img,
.ui.dropdown > .text > .image {
  margin-top: @textLineHeightOffset;
}
.ui.dropdown .menu > .item > .icon,
.ui.dropdown .menu > .item > .label,
.ui.dropdown .menu > .item > .flag,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img  {
  margin-top: @itemLineHeightOffset;
}

.ui.dropdown > .text > .icon,
.ui.dropdown > .text > .label,
.ui.dropdown > .text > .flag,
.ui.dropdown > .text > img,
.ui.dropdown > .text > .image,
.ui.dropdown .menu > .item > .icon,
.ui.dropdown .menu > .item > .label,
.ui.dropdown .menu > .item > .flag,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img  {
  margin-left: 0em;
  margin-right: @itemElementDistance;
}

/*--------------
     Image
---------------*/

.ui.dropdown > .text > img,
.ui.dropdown > .text > .image,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-height: @menuImageMaxHeight;
}

/*--------------
      Menu
---------------*/

/* Remove Menu Item Divider */
.ui.dropdown .ui.menu > .item:before,
.ui.menu .ui.dropdown .menu > .item:before {
  display: none;
}

/* Prevent Menu Item Border */
.ui.menu .ui.dropdown .menu .active.item {
  border-left: none;
}

/* Automatically float dropdown menu right on last menu item */
.ui.menu .right.menu .dropdown:last-child .menu,
.ui.menu .right.dropdown.item .menu,
.ui.buttons > .ui.dropdown:last-child .menu {
  left: auto;
  right: 0em;
}

/*--------------
     Button
---------------*/

/* No Margin On Icon Button */
.ui.dropdown.icon.button > .dropdown.icon {
  margin: 0em;
}
.ui.dropdown.button:not(.pointing):not(.floating).active,
.ui.dropdown.button:not(.pointing):not(.floating).visible {
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
}

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

/*--------------
    Selection
---------------*/

/* Displays like a select box */
.ui.selection.dropdown {
  cursor: pointer;
  word-wrap: break-word;
  white-space: normal;
  outline: 0;
  transform: rotateZ(0deg);

  min-width: @selectionMinWidth;

  background: @selectionBackground;
  display: @selectionDisplay;
  padding: @selectionPadding;
  color: @selectionTextColor;
  box-shadow: @selectionBoxShadow;
  border: @selectionBorder;
  border-radius: @selectionBorderRadius;
  transition: @selectionTransition;
}
.ui.selection.dropdown.visible,
.ui.selection.dropdown.active {
  z-index: @selectionZIndex;
}

select.ui.dropdown {
  height: 38px;
  padding: 0em;
  margin: 0em;
  visibility: hidden;
}
.ui.selection.dropdown > .text {
  margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
  position: absolute;
  top: auto;
  margin: 0em;
  width: auto;
  right: @selectionHorizontalPadding;
  opacity: @selectionIconOpacity;
  transition: @selectionIconTransition;
}

/* Compact */
.ui.compact.selection.dropdown {
  min-width:  0px;
}

/*  Selection Menu */
.ui.selection.dropdown .menu {
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  border-top-width: 0px !important;
  width: auto;
  margin: 0px -@menuBorderWidth;
  min-width: @menuMinWidth;
  outline: none;

  box-shadow: @selectionMenuBoxShadow;
  transition: @selectionMenuTransition;
}
.ui.selection.dropdown .menu:after,
.ui.selection.dropdown .menu:before {
  display: none;
}

@media only screen and (max-width : @largestMobileScreen) {
  .ui.selection.dropdown .menu {
    max-height: @selectionMobileMaxMenuHeight;
  }
}
@media only screen and (min-width: @tabletBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionTabletMaxMenuHeight;
  }
}
@media only screen and (min-width: @computerBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionComputerMaxMenuHeight;
  }
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionWidescreenMaxMenuHeight;
  }
}

/* Menu Item */
.ui.selection.dropdown .menu > .item {
  border-top: @selectionItemDivider;
  padding-left: @selectionHorizontalPadding !important;
  /* Add in spacing for scroll bar */
  padding-right: calc(@selectionHorizontalPadding + 1em) !important;
  white-space: normal;
  word-wrap: normal;
}

/* Hover */
.ui.selection.dropdown:hover {
  border-color: @selectionHoverBorderColor;
  box-shadow: @selectionHoverBoxShadow;
}

/* Disabled */
.ui.selection.dropdown.disabled,
.ui.selection.dropdown.disabled:hover {
  cursor: default;
  box-shadow: none;
  color: @selectionTextColor;
  border: @selectionBorder;
  opacity: @disabledOpacity !important;
}

/* Visible Hover */
.ui.selection.visible.dropdown:hover {
  border-color: @selectionVisibleHoverBorderColor;
  box-shadow: @selectionVisibleHoverBoxShadow;
}
.ui.selection.visible.dropdown:hover .menu {
  border: @selectionVisibleHoverMenuBorder;
  box-shadow: @selectionVisibleHoverMenuBoxShadow;
}

/* Visible */
.ui.selection.dropdown.visible {
  border-color: @selectionVisibleBorderColor;
  box-shadow: @selectionVisibleBoxShadow;
}
.ui.visible.selection.dropdown > .dropdown.icon {
  opacity: @selectionVisibleIconOpacity;
}

/* Active Item */
.ui.selection.active.dropdown > .text:not(.default),
.ui.selection.visible.dropdown > .text:not(.default) {
  font-weight: @selectionVisibleTextFontWeight;
  color: @selectionVisibleTextColor;
}

/* Connecting Border */
.ui.active.selection.dropdown,
.ui.visible.selection.dropdown {
  border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
  border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
}

/*--------------
   Searchable
---------------*/

/* Search Selection */
.ui.search.dropdown {
  min-width: @searchMinWidth;
}

/* Search Dropdown */
.ui.search.dropdown > input.search {
  background: none transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0em !important;
  cursor: pointer;
  top: 0em;
  left: 0em;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  padding: inherit;
}

/* Text Layering */
.ui.search.dropdown > input.search {
  position: absolute;
  z-index: 2;
}
.ui.search.dropdown > .text {
  cursor: text;
  position: relative;
  z-index: 3;
}

/* Search Selection */
.ui.search.selection.dropdown > input.search {
  line-height: @searchSelectionLineHeight;
  padding: @searchSelectionInputPadding;
}

/* Active/Visible Search */
.ui.search.dropdown.active > input.search,
.ui.search.dropdown.visible > input.search {
  cursor: auto;
}
.ui.search.dropdown.active > .text,
.ui.search.dropdown.visible > .text {
  pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
  color: @unselectedTextColor !important;
}

/* Search Menu */
.ui.search.dropdown .menu {
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width : @largestMobileScreen) {
  .ui.search.dropdown .menu {
    max-height: @searchMobileMaxMenuHeight;
  }
}
@media only screen and (min-width: @tabletBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchTabletMaxMenuHeight;
  }
}
@media only screen and (min-width: @computerBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchComputerMaxMenuHeight;
  }
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchWidescreenMaxMenuHeight;
  }
}

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

.ui.inline.dropdown {
  cursor: pointer;
  display: inline-block;
  color: @inlineTextColor;
}
.ui.inline.dropdown .dropdown.icon {
  margin: @inlineIconMargin;
  vertical-align: top;
}
.ui.inline.dropdown > .text {
  font-weight: @inlineTextFontWeight;
}
.ui.inline.dropdown .menu {
  cursor: auto;
  margin-top: @inlineMenuDistance;
  border-radius: @inlineMenuBorderRadius;
}

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

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

/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
  background: @hoveredItemBackground;
  color: @hoveredItemColor;
  z-index: 12;
}

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

/* Menu Item Active */
.ui.dropdown .menu .active.item {
  background: @activeItemBackground;
  font-weight: @activeItemFontWeight;
  color: @activeItemColor;
  box-shadow: @activeItemBoxShadow;
  z-index: @activeItemZIndex;
}

/*--------------------
     Default Text
----------------------*/

.ui.dropdown > .default.text,
.ui.default.dropdown > .text {
  color: @defaultTextColor;
}
.ui.dropdown:hover > .default.text,
.ui.default.dropdown:hover > .text {
  color: @defaultTextHoverColor;
}

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

.ui.loading.dropdown > .text {
  transition: none;
}
.ui.dropdown > .loading.menu {
  display: block;
  visibility: hidden;
  z-index: @loadingZIndex;
}

/*--------------------
    Keyboard Select
----------------------*/

/* Selected Item */
.ui.dropdown.selected,
.ui.dropdown .menu .selected.item {
  background: @selectedBackground;
  color: @selectedColor;
}

/*--------------------
    Search Filtered
----------------------*/

/* Filtered Item */
.ui.dropdown > .filtered.text {
  visibility: hidden;
}
.ui.dropdown .filtered.item {
  display: none;
}

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

.ui.dropdown.error,
.ui.dropdown.error > .text,
.ui.dropdown.error > .default.text {
  color: @errorTextColor;
}

.ui.selection.dropdown.error {
  background: @errorBackgroundColor;
  border-color: @errorBorderColor;
}

.ui.selection.dropdown.error:hover {
  border-color: @errorBorderColor;
}

.ui.dropdown.error > .menu,
.ui.dropdown.error > .menu .menu {
  border-color: @errorBorderColor;
}

.ui.dropdown.error > .menu > .item {
  color: @errorItemTextColor;
}

/* Item Hover */
.ui.dropdown.error > .menu > .item:hover {
  background-color: @errorItemHoverBackground;
}

/* Item Active */
.ui.dropdown.error > .menu .active.item {
  background-color: @errorItemActiveBackground;
}

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

/* Disabled */
.ui.disabled.dropdown {
  cursor: default;
  pointer-events: none;
  opacity: @disabledOpacity;
}

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

/*--------------
    Direction
---------------*/

/* Flyout Direction */
.ui.dropdown .menu {
  left: 0px;
}

/* Default Side (Right) */
.ui.dropdown .right.menu > .menu,
.ui.dropdown .menu .right.menu {
  left: 100% !important;
  right: auto !important;
}

/* Left Flyout Menu */
.ui.dropdown > .left.menu .menu,
.ui.dropdown .menu .left.menu {
  left: auto !important;
  right: 100% !important;
}

.ui.dropdown .item .left.dropdown.icon,
.ui.dropdown .left.menu .item .dropdown.icon {
  width: auto;
  float: @leftMenuDropdownIconFloat;
  margin: @leftMenuDropdownIconMargin;
}
.ui.dropdown .item .left.dropdown.icon,
.ui.dropdown .left.menu .item .dropdown.icon {
  width: auto;
  float: @leftMenuDropdownIconFloat;
  margin: @leftMenuDropdownIconMargin;
}
.ui.dropdown .item .left.dropdown.icon + .text,
.ui.dropdown .left.menu .item .dropdown.icon + .text {
  margin-left: @itemDropdownIconDistance;
}

/*--------------
     Upward
---------------*/

.ui.upward.dropdown > .menu {
  top: auto;
  bottom: 100%;
  box-shadow: @upwardMenuBoxShadow;
  border-radius: @upwardMenuBorderRadius;
}

/* Active Upward */
.ui.simple.upward.active.dropdown,
.ui.simple.upward.dropdown:hover {
  border-radius: @borderRadius @borderRadius 0em 0em !important;
}
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
.ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
  border-radius: @borderRadius @borderRadius 0em 0em;
}

/* Selection */
.ui.upward.selection.dropdown .menu {
  border-top-width: @menuBorderWidth !important;
  border-bottom-width: 0px !important;
}
.ui.upward.selection.dropdown:hover {
  box-shadow: @upwardSelectionHoverBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover {
  box-shadow: @upwardSelectionVisibleHoverBoxShadow;
}
.ui.active.upward.selection.dropdown,
.ui.visible.upward.selection.dropdown {
  border-radius: @upwardSelectionVisibleBorderRadius !important;
}
.ui.upward.selection.dropdown.visible {
  box-shadow: @upwardSelectionVisibleBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover .menu {
  box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
}

/*--------------
     Simple
---------------*/

/* Displays without javascript */

.ui.simple.dropdown .menu:before,
.ui.simple.dropdown .menu:after {
  display: none;
}
.ui.simple.dropdown .menu {
  position: absolute;
  display: block;
  overflow: hidden;
  top: -9999px !important;
  opacity: 0;
  width: 0;
  height: 0;
  transition: @simpleTransition;
}

.ui.simple.active.dropdown,
.ui.simple.dropdown:hover {
  border-bottom-left-radius: 0em !important;
  border-bottom-right-radius: 0em !important;
}

.ui.simple.active.dropdown > .menu,
.ui.simple.dropdown:hover > .menu {
  overflow: visible;
  width: auto;
  height: auto;
  top: 100% !important;
  opacity: 1;
}
.ui.simple.dropdown > .menu > .item:active > .menu,
.ui.simple.dropdown:hover > .menu > .item:hover > .menu {
  overflow: visible;
  width: auto;
  height: auto;
  top: 0% !important;
  left: 100% !important;
  opacity: 1;
}
.ui.simple.disabled.dropdown:hover .menu {
  display: none;
  height: 0px;
  width: 0px;
  overflow: hidden;
}

/* Visible */
.ui.simple.visible.dropdown > .menu {
  display: block;
}

/*--------------
      Fluid
---------------*/

.ui.fluid.dropdown {
  display: block;
  width: 100%;
  min-width: 0em;
}
.ui.fluid.dropdown > .dropdown.icon {
  float: right;
}

/*--------------
    Floating
---------------*/

.ui.floating.dropdown .menu {
  left: 0;
  right: auto;
  box-shadow: @floatingMenuBoxShadow;
  border-radius: @floatingMenuBorderRadius;
}
.ui.floating.dropdown > .menu {
  margin-top: @floatingMenuDistance !important;
}

/*--------------
     Pointing
---------------*/

.ui.pointing.dropdown > .menu {
  top: 100%;
  margin-top: @pointingMenuDistance;
  border-radius: @pointingMenuBorderRadius;
}

.ui.pointing.dropdown > .menu:after {
  display: block;
  position: absolute;
  pointer-events: none;
  content: '';
  visibility: visible;
  transform: rotate(45deg);

  width: @pointingArrowSize;
  height: @pointingArrowSize;
  box-shadow: @pointingArrowBoxShadow;
  background: @pointingArrowBackground;
  z-index: @pointingArrowZIndex;
}

.ui.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: 50%;
  margin: 0em 0em 0em @pointingArrowOffset;
}

/* Top Left Pointing */
.ui.top.left.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  left: 0%;
  right: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.left.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  left: 0%;
  right: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.left.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: @pointingArrowDistanceFromEdge;
  right: auto;
  margin: 0em;
  transform: rotate(45deg);
}
/* Top Right  Pointing */
.ui.top.right.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  right: 0%;
  left: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.right.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: auto;
  right: @pointingArrowDistanceFromEdge;
  margin: 0em;
  transform: rotate(45deg);
}

/* Left Pointing */
.ui.left.pointing.dropdown > .menu {
  top: 0%;
  left: 100%;
  right: auto;
  margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
}
.ui.left.pointing.dropdown > .menu:after {
  top: 1em;
  left: @pointingArrowOffset;
  margin: 0em 0em 0em 0em;
  transform: rotate(-45deg);
}

/* Right Pointing */
.ui.right.pointing.dropdown > .menu {
  top: 0%;
  left: auto;
  right: 100%;
  margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.right.pointing.dropdown > .menu:after {
  top: 1em;
  left: auto;
  right: @pointingArrowOffset;
  margin: 0em 0em 0em 0em;
  transform: rotate(135deg);
}

/* Bottom Pointing */
.ui.bottom.pointing.dropdown > .menu {
  top: auto;
  bottom: 100%;
  left: 0%;
  right: auto;
  margin: 0em 0em @pointingArrowDistanceFromEdge ;
}
.ui.bottom.pointing.dropdown > .menu:after {
  top: auto;
  bottom: @pointingArrowOffset;
  right: auto;
  margin: 0em;
  transform: rotate(-135deg);
}
/* Reverse Sub-Menu Direction */
.ui.bottom.pointing.dropdown > .menu .menu {
  top: auto !important;
  bottom: 0px !important;
}

/* Bottom Left */
.ui.bottom.left.pointing.dropdown > .menu {
  left: 0%;
  right: auto;
}
.ui.bottom.left.pointing.dropdown > .menu:after {
  left: @pointingArrowDistanceFromEdge;
  right: auto;
}

/* Bottom Right */
.ui.bottom.right.pointing.dropdown > .menu {
  right: 0%;
  left: auto;
}
.ui.bottom.right.pointing.dropdown > .menu:after {
  left: auto;
  right: @pointingArrowDistanceFromEdge;
}

.loadUIOverrides();

/*
 * # Semantic - Dropdown
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

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

@type    : 'module';
@element : 'dropdown';

@import '../../theme.config';

/*******************************
            Dropdown
*******************************/

.ui.dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
  line-height: 1em;
  tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  text-align: left;
  transition: @transition;
}

/*******************************
            Content
*******************************/

/*--------------
      Menu
---------------*/

.ui.dropdown .menu {
  cursor: auto;
  position: absolute;
  display: none;
  outline: none;
  top: 100%;
  transition: @menuTransition;

  margin: @menuMargin;
  padding: @menuPadding;
  background: @menuBackground;
  min-width: 100%;

  white-space: @menuWrap;
  font-size: 1rem;
  text-shadow: none;
  text-align: @menuTextAlign;

  box-shadow: @menuBoxShadow;
  border: @menuBorder;
  border-radius: @menuBorderRadius;
  transition: @menuTransition;
  z-index: @menuZIndex;
  will-change: transform, opacity;
}

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

.ui.dropdown > input[type="hidden"],
.ui.dropdown > select {
  display: none !important;
}

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

.ui.dropdown > .dropdown.icon {
  width: auto;
  margin: @dropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon {
  width: auto;
  float: @itemDropdownIconFloat;
  margin: @itemDropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon + .text {
  margin-right: @itemDropdownIconDistance;
}

/*--------------
      Text
---------------*/

.ui.dropdown > .text {
  display: inline-block;
  transition: @textTransition;
}

/*--------------
    Menu Item
---------------*/

.ui.dropdown .menu > .item {
  position: relative;
  cursor: pointer;
  display: block;
  border: @itemBorder;
  height: @itemHeight;

  border-top: @itemDivider;
  line-height: @itemLineHeight;
  font-size: @itemFontSize;
  color: @itemColor;

  padding: @itemVerticalPadding @itemHorizontalPadding !important;
  font-size: @itemFontSize;
  text-transform: @itemTextTransform;
  font-weight: @itemFontWeight;
  box-shadow: @itemBoxShadow;
  -webkit-touch-callout: none;
}
.ui.dropdown .menu > .item:first-child {
  border-top-width: 0px;
}

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

.ui.dropdown > .text > [class*="right floated"],
.ui.dropdown .menu .item > [class*="right floated"] {
  float: right !important;
  margin-right: 0em !important;
  margin-left: @floatedDistance !important;
}
.ui.dropdown > .text > [class*="left floated"],
.ui.dropdown .menu .item > [class*="left floated"] {
  float: left !important;
  margin-left: 0em !important;
  margin-right: @floatedDistance !important;
}

.ui.dropdown .menu .item > .icon.floated,
.ui.dropdown .menu .item > .flag.floated,
.ui.dropdown .menu .item > .image.floated,
.ui.dropdown .menu .item > img.floated {
  margin-top: @itemLineHeightOffset;
}

/*--------------
  Menu Divider
---------------*/

.ui.dropdown .menu > .header {
  margin: @menuHeaderMargin;
  padding: @menuHeaderPadding;
  color: @menuHeaderColor;
  font-size: @menuHeaderFontSize;
  font-weight: @menuHeaderFontWeight;
  text-transform: @menuHeaderTextTransform;
}

.ui.dropdown .menu > .divider {
  border-top: @menuDividerBorder;
  height: 0em;
  margin: @menuDividerMargin;
}

.ui.dropdown .menu > .input {
  margin: @menuInputMargin;
  min-width: @menuInputMinWidth;
}
.ui.dropdown .menu > .header + .input {
  margin-top: 0em;
}
.ui.dropdown .menu > .input:not(.transparent) input {
  padding: @menuInputPadding;
}
.ui.dropdown .menu > .input:not(.transparent) .button,
.ui.dropdown .menu > .input:not(.transparent) .icon,
.ui.dropdown .menu > .input:not(.transparent) .label {
  padding-top: @menuInputVerticalPadding;
  padding-bottom: @menuInputVerticalPadding;
}

/*-----------------
  Item Description
-------------------*/

.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
  margin: @itemDescriptionMargin;
  color: @itemDescriptionColor;
}

/*--------------
    Sub Menu
---------------*/

.ui.dropdown .menu .menu {
  top: @subMenuTop !important;
  left: @subMenuLeft !important;
  right: @subMenuRight !important;
  margin: @subMenuMargin !important;
  border-radius: @subMenuBorderRadius !important;
  z-index: @subMenuZIndex !important;
}

/* Hide Arrow */
.ui.dropdown .menu .menu:after {
  display: none;
}

/*******************************
            Coupling
*******************************/

/*--------------
   Sub Elements
---------------*/

/* Icons / Flags / Labels / Image */
.ui.dropdown > .text > .icon,
.ui.dropdown > .text > .label,
.ui.dropdown > .text > .flag,
.ui.dropdown > .text > img,
.ui.dropdown > .text > .image {
  margin-top: @textLineHeightOffset;
}
.ui.dropdown .menu > .item > .icon,
.ui.dropdown .menu > .item > .label,
.ui.dropdown .menu > .item > .flag,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img  {
  margin-top: @itemLineHeightOffset;
}

.ui.dropdown > .text > .icon,
.ui.dropdown > .text > .label,
.ui.dropdown > .text > .flag,
.ui.dropdown > .text > img,
.ui.dropdown > .text > .image,
.ui.dropdown .menu > .item > .icon,
.ui.dropdown .menu > .item > .label,
.ui.dropdown .menu > .item > .flag,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img  {
  margin-left: 0em;
  margin-right: @itemElementDistance;
}

/*--------------
     Image
---------------*/

.ui.dropdown > .text > img,
.ui.dropdown > .text > .image,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-height: @menuImageMaxHeight;
}

/*--------------
      Menu
---------------*/

/* Remove Menu Item Divider */
.ui.dropdown .ui.menu > .item:before,
.ui.menu .ui.dropdown .menu > .item:before {
  display: none;
}

/* Prevent Menu Item Border */
.ui.menu .ui.dropdown .menu .active.item {
  border-left: none;
}

/* Automatically float dropdown menu right on last menu item */
.ui.menu .right.menu .dropdown:last-child .menu,
.ui.menu .right.dropdown.item .menu,
.ui.buttons > .ui.dropdown:last-child .menu {
  left: auto;
  right: 0em;
}

/*--------------
     Button
---------------*/

/* No Margin On Icon Button */
.ui.dropdown.icon.button > .dropdown.icon {
  margin: 0em;
}
.ui.dropdown.button:not(.pointing):not(.floating).active,
.ui.dropdown.button:not(.pointing):not(.floating).visible {
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
}

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

/*--------------
    Selection
---------------*/

/* Displays like a select box */
.ui.selection.dropdown {
  cursor: pointer;
  word-wrap: break-word;
  white-space: normal;
  outline: 0;
  transform: rotateZ(0deg);

  min-width: @selectionMinWidth;

  background: @selectionBackground;
  display: @selectionDisplay;
  padding: @selectionPadding;
  color: @selectionTextColor;
  box-shadow: @selectionBoxShadow;
  border: @selectionBorder;
  border-radius: @selectionBorderRadius;
  transition: @selectionTransition;
}
.ui.selection.dropdown.visible,
.ui.selection.dropdown.active {
  z-index: @selectionZIndex;
}

select.ui.dropdown {
  height: 38px;
  padding: 0em;
  margin: 0em;
  visibility: hidden;
}
.ui.selection.dropdown > .text {
  margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
  position: absolute;
  top: auto;
  margin: 0em;
  width: auto;
  right: @selectionHorizontalPadding;
  opacity: @selectionIconOpacity;
  transition: @selectionIconTransition;
}

/* Compact */
.ui.compact.selection.dropdown {
  min-width:  0px;
}

/*  Selection Menu */
.ui.selection.dropdown .menu {
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  border-top-width: 0px !important;
  width: auto;
  margin: 0px -@menuBorderWidth;
  min-width: @menuMinWidth;
  outline: none;

  box-shadow: @selectionMenuBoxShadow;
  transition: @selectionMenuTransition;
}
.ui.selection.dropdown .menu:after,
.ui.selection.dropdown .menu:before {
  display: none;
}

@media only screen and (max-width : @largestMobileScreen) {
  .ui.selection.dropdown .menu {
    max-height: @selectionMobileMaxMenuHeight;
  }
}
@media only screen and (min-width: @tabletBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionTabletMaxMenuHeight;
  }
}
@media only screen and (min-width: @computerBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionComputerMaxMenuHeight;
  }
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  .ui.selection.dropdown .menu {
    max-height: @selectionWidescreenMaxMenuHeight;
  }
}

/* Menu Item */
.ui.selection.dropdown .menu > .item {
  border-top: @selectionItemDivider;
  padding-left: @selectionHorizontalPadding !important;
  /* Add in spacing for scroll bar */
  padding-right: calc(@selectionHorizontalPadding + 1em) !important;
  white-space: normal;
  word-wrap: normal;
}

/* Hover */
.ui.selection.dropdown:hover {
  border-color: @selectionHoverBorderColor;
  box-shadow: @selectionHoverBoxShadow;
}

/* Disabled */
.ui.selection.dropdown.disabled,
.ui.selection.dropdown.disabled:hover {
  cursor: default;
  box-shadow: none;
  color: @selectionTextColor;
  border: @selectionBorder;
  opacity: @disabledOpacity !important;
}

/* Visible Hover */
.ui.selection.visible.dropdown:hover {
  border-color: @selectionVisibleHoverBorderColor;
  box-shadow: @selectionVisibleHoverBoxShadow;
}
.ui.selection.visible.dropdown:hover .menu {
  border: @selectionVisibleHoverMenuBorder;
  box-shadow: @selectionVisibleHoverMenuBoxShadow;
}

/* Visible */
.ui.selection.dropdown.visible {
  border-color: @selectionVisibleBorderColor;
  box-shadow: @selectionVisibleBoxShadow;
}
.ui.visible.selection.dropdown > .dropdown.icon {
  opacity: @selectionVisibleIconOpacity;
}

/* Active Item */
.ui.selection.active.dropdown > .text:not(.default),
.ui.selection.visible.dropdown > .text:not(.default) {
  font-weight: @selectionVisibleTextFontWeight;
  color: @selectionVisibleTextColor;
}

/* Connecting Border */
.ui.active.selection.dropdown,
.ui.visible.selection.dropdown {
  border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
  border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
}

/*--------------
   Searchable
---------------*/

/* Search Selection */
.ui.search.dropdown {
  min-width: @searchMinWidth;
}

/* Search Dropdown */
.ui.search.dropdown > input.search {
  background: none transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0em !important;
  cursor: pointer;
  top: 0em;
  left: 0em;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  padding: inherit;
}

/* Text Layering */
.ui.search.dropdown > input.search {
  position: absolute;
  z-index: 2;
}
.ui.search.dropdown > .text {
  cursor: text;
  position: relative;
  z-index: 3;
}

/* Search Selection */
.ui.search.selection.dropdown > input.search {
  line-height: @searchSelectionLineHeight;
  padding: @searchSelectionInputPadding;
}

/* Active/Visible Search */
.ui.search.dropdown.active > input.search,
.ui.search.dropdown.visible > input.search {
  cursor: auto;
}
.ui.search.dropdown.active > .text,
.ui.search.dropdown.visible > .text {
  pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
  color: @unselectedTextColor !important;
}

/* Search Menu */
.ui.search.dropdown .menu {
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width : @largestMobileScreen) {
  .ui.search.dropdown .menu {
    max-height: @searchMobileMaxMenuHeight;
  }
}
@media only screen and (min-width: @tabletBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchTabletMaxMenuHeight;
  }
}
@media only screen and (min-width: @computerBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchComputerMaxMenuHeight;
  }
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  .ui.search.dropdown .menu {
    max-height: @searchWidescreenMaxMenuHeight;
  }
}

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

.ui.inline.dropdown {
  cursor: pointer;
  display: inline-block;
  color: @inlineTextColor;
}
.ui.inline.dropdown .dropdown.icon {
  margin: @inlineIconMargin;
  vertical-align: top;
}
.ui.inline.dropdown > .text {
  font-weight: @inlineTextFontWeight;
}
.ui.inline.dropdown .menu {
  cursor: auto;
  margin-top: @inlineMenuDistance;
  border-radius: @inlineMenuBorderRadius;
}

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

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

/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
  background: @hoveredItemBackground;
  color: @hoveredItemColor;
  z-index: 12;
}

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

/* Menu Item Active */
.ui.dropdown .menu .active.item {
  background: @activeItemBackground;
  font-weight: @activeItemFontWeight;
  color: @activeItemColor;
  box-shadow: @activeItemBoxShadow;
  z-index: @activeItemZIndex;
}

/*--------------------
     Default Text
----------------------*/

.ui.dropdown > .default.text,
.ui.default.dropdown > .text {
  color: @defaultTextColor;
}
.ui.dropdown:hover > .default.text,
.ui.default.dropdown:hover > .text {
  color: @defaultTextHoverColor;
}

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

.ui.loading.dropdown > .text {
  transition: none;
}
.ui.dropdown > .loading.menu {
  display: block;
  visibility: hidden;
  z-index: @loadingZIndex;
}

/*--------------------
    Keyboard Select
----------------------*/

/* Selected Item */
.ui.dropdown.selected,
.ui.dropdown .menu .selected.item {
  background: @selectedBackground;
  color: @selectedColor;
}

/*--------------------
    Search Filtered
----------------------*/

/* Filtered Item */
.ui.dropdown > .filtered.text {
  visibility: hidden;
}
.ui.dropdown .filtered.item {
  display: none;
}

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

.ui.dropdown.error,
.ui.dropdown.error > .text,
.ui.dropdown.error > .default.text {
  color: @errorTextColor;
}

.ui.selection.dropdown.error {
  background: @errorBackgroundColor;
  border-color: @errorBorderColor;
}

.ui.selection.dropdown.error:hover {
  border-color: @errorBorderColor;
}

.ui.dropdown.error > .menu,
.ui.dropdown.error > .menu .menu {
  border-color: @errorBorderColor;
}

.ui.dropdown.error > .menu > .item {
  color: @errorItemTextColor;
}

/* Item Hover */
.ui.dropdown.error > .menu > .item:hover {
  background-color: @errorItemHoverBackground;
}

/* Item Active */
.ui.dropdown.error > .menu .active.item {
  background-color: @errorItemActiveBackground;
}

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

/* Disabled */
.ui.disabled.dropdown {
  cursor: default;
  pointer-events: none;
  opacity: @disabledOpacity;
}

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

/*--------------
    Direction
---------------*/

/* Flyout Direction */
.ui.dropdown .menu {
  left: 0px;
}

/* Default Side (Right) */
.ui.dropdown .right.menu > .menu,
.ui.dropdown .menu .right.menu {
  left: 100% !important;
  right: auto !important;
}

/* Left Flyout Menu */
.ui.dropdown > .left.menu .menu,
.ui.dropdown .menu .left.menu {
  left: auto !important;
  right: 100% !important;
}

.ui.dropdown .item .left.dropdown.icon,
.ui.dropdown .left.menu .item .dropdown.icon {
  width: auto;
  float: @leftMenuDropdownIconFloat;
  margin: @leftMenuDropdownIconMargin;
}
.ui.dropdown .item .left.dropdown.icon,
.ui.dropdown .left.menu .item .dropdown.icon {
  width: auto;
  float: @leftMenuDropdownIconFloat;
  margin: @leftMenuDropdownIconMargin;
}
.ui.dropdown .item .left.dropdown.icon + .text,
.ui.dropdown .left.menu .item .dropdown.icon + .text {
  margin-left: @itemDropdownIconDistance;
}

/*--------------
     Upward
---------------*/

.ui.upward.dropdown > .menu {
  top: auto;
  bottom: 100%;
  box-shadow: @upwardMenuBoxShadow;
  border-radius: @upwardMenuBorderRadius;
}

/* Active Upward */
.ui.simple.upward.active.dropdown,
.ui.simple.upward.dropdown:hover {
  border-radius: @borderRadius @borderRadius 0em 0em !important;
}
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
.ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
  border-radius: @borderRadius @borderRadius 0em 0em;
}

/* Selection */
.ui.upward.selection.dropdown .menu {
  border-top-width: @menuBorderWidth !important;
  border-bottom-width: 0px !important;
}
.ui.upward.selection.dropdown:hover {
  box-shadow: @upwardSelectionHoverBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover {
  box-shadow: @upwardSelectionVisibleHoverBoxShadow;
}
.ui.active.upward.selection.dropdown,
.ui.visible.upward.selection.dropdown {
  border-radius: @upwardSelectionVisibleBorderRadius !important;
}
.ui.upward.selection.dropdown.visible {
  box-shadow: @upwardSelectionVisibleBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover .menu {
  box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
}

/*--------------
     Simple
---------------*/

/* Displays without javascript */

.ui.simple.dropdown .menu:before,
.ui.simple.dropdown .menu:after {
  display: none;
}
.ui.simple.dropdown .menu {
  position: absolute;
  display: block;
  overflow: hidden;
  top: -9999px !important;
  opacity: 0;
  width: 0;
  height: 0;
  transition: @simpleTransition;
}

.ui.simple.active.dropdown,
.ui.simple.dropdown:hover {
  border-bottom-left-radius: 0em !important;
  border-bottom-right-radius: 0em !important;
}

.ui.simple.active.dropdown > .menu,
.ui.simple.dropdown:hover > .menu {
  overflow: visible;
  width: auto;
  height: auto;
  top: 100% !important;
  opacity: 1;
}
.ui.simple.dropdown > .menu > .item:active > .menu,
.ui.simple.dropdown:hover > .menu > .item:hover > .menu {
  overflow: visible;
  width: auto;
  height: auto;
  top: 0% !important;
  left: 100% !important;
  opacity: 1;
}
.ui.simple.disabled.dropdown:hover .menu {
  display: none;
  height: 0px;
  width: 0px;
  overflow: hidden;
}

/* Visible */
.ui.simple.visible.dropdown > .menu {
  display: block;
}

/*--------------
      Fluid
---------------*/

.ui.fluid.dropdown {
  display: block;
  width: 100%;
  min-width: 0em;
}
.ui.fluid.dropdown > .dropdown.icon {
  float: right;
}

/*--------------
    Floating
---------------*/

.ui.floating.dropdown .menu {
  left: 0;
  right: auto;
  box-shadow: @floatingMenuBoxShadow;
  border-radius: @floatingMenuBorderRadius;
}
.ui.floating.dropdown > .menu {
  margin-top: @floatingMenuDistance !important;
}

/*--------------
     Pointing
---------------*/

.ui.pointing.dropdown > .menu {
  top: 100%;
  margin-top: @pointingMenuDistance;
  border-radius: @pointingMenuBorderRadius;
}

.ui.pointing.dropdown > .menu:after {
  display: block;
  position: absolute;
  pointer-events: none;
  content: '';
  visibility: visible;
  transform: rotate(45deg);

  width: @pointingArrowSize;
  height: @pointingArrowSize;
  box-shadow: @pointingArrowBoxShadow;
  background: @pointingArrowBackground;
  z-index: @pointingArrowZIndex;
}

.ui.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: 50%;
  margin: 0em 0em 0em @pointingArrowOffset;
}

/* Top Left Pointing */
.ui.top.left.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  left: 0%;
  right: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.left.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  left: 0%;
  right: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.left.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: @pointingArrowDistanceFromEdge;
  right: auto;
  margin: 0em;
  transform: rotate(45deg);
}
/* Top Right  Pointing */
.ui.top.right.pointing.dropdown > .menu {
  top: 100%;
  bottom: auto;
  right: 0%;
  left: auto;
  margin: @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.top.right.pointing.dropdown > .menu:after {
  top: @pointingArrowOffset;
  left: auto;
  right: @pointingArrowDistanceFromEdge;
  margin: 0em;
  transform: rotate(45deg);
}

/* Left Pointing */
.ui.left.pointing.dropdown > .menu {
  top: 0%;
  left: 100%;
  right: auto;
  margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
}
.ui.left.pointing.dropdown > .menu:after {
  top: 1em;
  left: @pointingArrowOffset;
  margin: 0em 0em 0em 0em;
  transform: rotate(-45deg);
}

/* Right Pointing */
.ui.right.pointing.dropdown > .menu {
  top: 0%;
  left: auto;
  right: 100%;
  margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
}
.ui.right.pointing.dropdown > .menu:after {
  top: 1em;
  left: auto;
  right: @pointingArrowOffset;
  margin: 0em 0em 0em 0em;
  transform: rotate(135deg);
}

/* Bottom Pointing */
.ui.bottom.pointing.dropdown > .menu {
  top: auto;
  bottom: 100%;
  left: 0%;
  right: auto;
  margin: 0em 0em @pointingArrowDistanceFromEdge ;
}
.ui.bottom.pointing.dropdown > .menu:after {
  top: auto;
  bottom: @pointingArrowOffset;
  right: auto;
  margin: 0em;
  transform: rotate(-135deg);
}
/* Reverse Sub-Menu Direction */
.ui.bottom.pointing.dropdown > .menu .menu {
  top: auto !important;
  bottom: 0px !important;
}

/* Bottom Left */
.ui.bottom.left.pointing.dropdown > .menu {
  left: 0%;
  right: auto;
}
.ui.bottom.left.pointing.dropdown > .menu:after {
  left: @pointingArrowDistanceFromEdge;
  right: auto;
}

/* Bottom Right */
.ui.bottom.right.pointing.dropdown > .menu {
  right: 0%;
  left: auto;
}
.ui.bottom.right.pointing.dropdown > .menu:after {
  left: auto;
  right: @pointingArrowDistanceFromEdge;
}

.loadUIOverrides();


无jira任务 style:增加后缀

无jira任务 style:增加后缀

//右下角放置小三角
@background-auto-color: "background/auto_color_normal.png";
@background-auto-color-disabled: "background/auto_color_disable.png";

//右下角没有小三角
@background-auto-color-normal: "icon/auto_normal.png";
@background-trans-color: "background/trans_normal.png";
@background-trans-color-disabled: "background/trans_disable.png";
@background-auto-color-square-normal: "icon/auto_square_normal.png";
@background-auto-color-no-square-normal: "icon/auto_no_square_normal.png";

@background-farbtastic-wheel:"background/wheel.png";
@background-farbtastic-overlay:"background/mask.png";
@background-farbtastic-marker:"background/marker.png";

//右下角放置小三角
@background-auto-color: "background/auto_color_normal.png";
@background-auto-color-disabled: "background/auto_color_disable.png";

//右下角没有小三角
@background-auto-color-normal: "icon/auto_normal.png";
@background-trans-color: "background/trans_normal.png";
@background-trans-color-disabled: "background/trans_disable.png";
@background-auto-color-square-normal: "icon/auto_square_normal.png";
@background-auto-color-no-square-normal: "icon/auto_no_square_normal";

@background-farbtastic-wheel:"background/wheel.png";
@background-farbtastic-overlay:"background/mask.png";
@background-farbtastic-marker:"background/marker.png";


* fix issue #168, fix class name for scroll-inside option of modal.

/// ========================================================================
/// Bootstrap: modals.less
/// https://github.com/twbs/bootstrap/blob/master/less/modals.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================

// Modals

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0); }

  > .loader { display: none; }

  &.modal-loading,
  &.modal-updating
  {
    .loader {
      position: absolute;
      display: block;
      text-align: center;
      font-size: 56px;
      color: #fff;
      top: 35%;
      width: 80px;
      left: 50%;
      margin-left: -40px;
    }
  }
  &.modal-loading {
    .modal-dialog {opacity: 0;}
  }
  &.modal-updating {
    .modal-dialog {
      opacity: 1;
    }
    .modal-body {opacity: 0;}
    .loader {
      color: #eee;
      z-index: 1;
    }
  }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// Tag <iframe> in modal

.modal-iframe .modal-body {overflow: hidden!important;}
.modal-iframe .modal-body > iframe {border-radius: 0 0 @border-radius-large @border-radius-large}

// Actual modal

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0 auto;

  background-color: @modal-content-bg;
  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid @modal-content-border-color;
  border-radius: @border-radius-large;
  box-shadow: @modal-shadow;
  pointer-events: initial;

  background-clip: padding-box;
  // Remove focus outline from opened modal
  outline: 0;

  &.modal-moveable {
    position: absolute;
    margin: 0;

    .modal-header { cursor: move; }
  }
}

// Modal background

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal-background;
  background-color: @modal-backdrop-bg;
  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(@modal-backdrop-opacity); }
}

// Modal header

// Top section of the modal w/ title and dismiss
.modal-header {
  padding: @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
  &:extend(.clearfix all);
}
// Close icon
.modal-header .close {
  margin-top: -2px;
}

// Title text within header
.modal-title {
  margin: 0;
  line-height: @modal-title-line-height;
}

// Modal body

// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: @modal-inner-padding;
}

// Footer (for actions)

.modal-footer {
  padding: @modal-inner-padding;
  text-align: right; // right align buttons
  border-top: 1px solid @modal-footer-border-color;
  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal

@media (min-width: @screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: @modal-md;
    box-shadow: @modal-screen-shadow;

  }

  // Modal sizes
  .modal-sm { width: @modal-sm; }
}

@media (min-width: @screen-md-min) {
  .modal-lg { width: @modal-lg; }
}

/* full screen modal */
.modal-fullscreen {
  width: 100%!important;
  height: 100%!important;
  margin: 0;
  border-radius: 0;
  position: relative;

  .modal-body {
    position: absolute;
    top: 52px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
  }
}

.modal-scroll-inside {
  overflow: auto;
}

/// ========================================================================
/// Bootstrap: modals.less
/// https://github.com/twbs/bootstrap/blob/master/less/modals.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================

// Modals

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0); }

  > .loader { display: none; }

  &.modal-loading,
  &.modal-updating
  {
    .loader {
      position: absolute;
      display: block;
      text-align: center;
      font-size: 56px;
      color: #fff;
      top: 35%;
      width: 80px;
      left: 50%;
      margin-left: -40px;
    }
  }
  &.modal-loading {
    .modal-dialog {opacity: 0;}
  }
  &.modal-updating {
    .modal-dialog {
      opacity: 1;
    }
    .modal-body {opacity: 0;}
    .loader {
      color: #eee;
      z-index: 1;
    }
  }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// Tag <iframe> in modal

.modal-iframe .modal-body {overflow: hidden!important;}
.modal-iframe .modal-body > iframe {border-radius: 0 0 @border-radius-large @border-radius-large}

// Actual modal

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0 auto;

  background-color: @modal-content-bg;
  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid @modal-content-border-color;
  border-radius: @border-radius-large;
  box-shadow: @modal-shadow;
  pointer-events: initial;

  background-clip: padding-box;
  // Remove focus outline from opened modal
  outline: 0;

  &.modal-moveable {
    position: absolute;
    margin: 0;

    .modal-header { cursor: move; }
  }
}

// Modal background

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-modal-background;
  background-color: @modal-backdrop-bg;
  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(@modal-backdrop-opacity); }
}

// Modal header

// Top section of the modal w/ title and dismiss
.modal-header {
  padding: @modal-title-padding;
  border-bottom: 1px solid @modal-header-border-color;
  min-height: (@modal-title-padding + @modal-title-line-height);
  &:extend(.clearfix all);
}
// Close icon
.modal-header .close {
  margin-top: -2px;
}

// Title text within header
.modal-title {
  margin: 0;
  line-height: @modal-title-line-height;
}

// Modal body

// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: @modal-inner-padding;
}

// Footer (for actions)

.modal-footer {
  padding: @modal-inner-padding;
  text-align: right; // right align buttons
  border-top: 1px solid @modal-footer-border-color;
  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal

@media (min-width: @screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: @modal-md;
    box-shadow: @modal-screen-shadow;

  }

  // Modal sizes
  .modal-sm { width: @modal-sm; }
}

@media (min-width: @screen-md-min) {
  .modal-lg { width: @modal-lg; }
}

/* full screen modal */
.modal-fullscreen {
  width: 100%!important;
  height: 100%!important;
  margin: 0;
  border-radius: 0;
  position: relative;

  .modal-body {
    position: absolute;
    top: 52px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
  }
}

.body-modal-scroll-inside {
  overflow: auto;
}