ember-ui-components/addon/styles/ember-ui-components.css

A collection of common user interface components

@charset "UTF-8";


body.modal-dialog-is-open,
body.modal-window-is-open,
.uic-disable-scroll {
  overflow: hidden;
}

label {
  margin: 10px;
  vertical-align: middle;
}


div.uic-check-box.slider,
div.uic-check-box.toggle,
select.uic-select {
  margin: 20px 0;
}

/*
  Panel
*/
.panel hr {
	background: none;
	border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.panel,
.uic-panel {
  margin: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background: #fff;
  border: 1px solid #EEF1F5;
  border-radius: 4px;
  box-shadow: 0px 0px 1px #888888;
}
fieldset.uic-fieldset.panel,
fieldset.uic-fieldset.uic-panel {
  margin: 10px 0;
  box-shadow: 0px 0px 1px #888888;
}

/*
  Form elements
*/
.uic-form-element {
	white-space: nowrap;
	display: block;
}
.uic-fieldset > label,
label.uic-form-element,
div.uic-form-element > label,
.uic-form-element,
div.uic-form-element input,
div.uic-form-element select,
div.uic-form-element textarea {
  min-height: 39px;
  padding: 6px 12px;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}
div.uic-form-element select,
select.uic-form-element {
  height: 39px;
}
input.uic-input {
  width: 100%;
}
div.uic-form-element {
  text-align: left;
}
div.uic-form-element div.uic-check-box.toggle {
  margin: 10px 0;
}
.uic-form-element,
div.uic-form-element input,
div.uic-form-element select,
div.uic-form-element textarea {
  width: calc(70% - 10px);
  max-width: 500px;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  display: inline-block;
  font-size: 16px;
  line-height: 1.57143;
  color: #555;
  box-sizing: border-box;
}
.uic-fieldset.disabled > label,
label.uic-form-element.disabled,
div.uic-form-element.disabled > label,
.uic-form-element.disabled,
div.uic-form-element input[disabled],
div.uic-form-element select[disabled],
div.uic-form-element textarea[disabled] {
  color: #ABABAB;
}
div.uic-form-element .uic-button {
  line-height: 1.57143;
  height: 39px;
  padding: 6px 30px;
  vertical-align: top;
  border-radius: 3px;
}

div.uic-form-element input,
div.uic-form-element select,
div.uic-form-element textarea,
input.uic-form-element,
select.uic-form-element,
textarea.uic-form-element {
  background-color: #fff;
}
label {
  line-height: 1.57143;
}
.uic-form-element:focus,
div.uic-form-element input:focus,
div.uic-form-element select:focus,
div.uic-form-element textarea:focus {
  outline: none;
  border-color: #71c0ff;
  box-shadow: 0 0 4px #b0dafb;
}
div.uic-form-element {
  padding: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  box-shadow: none;
  border: none;
  width: 100%;
  max-width: 100%;
}
.uic-fieldset > label,
label.uic-form-element,
div.uic-form-element > label {
  float: left;
  width: 30%;
  text-align: right;
}
label + .uic-form-element {
  width: 67%;
}
.uic-fieldset .uic-form-element,
label + .uic-form-element {
  float: left;

}
.uic-form-element > .uic-check-box {
  vertical-align: -webkit-baseline-middle;
}
.uic-fieldset {
  border: none;
}
.uic-fieldset > legend {
  border-radius: 4px;
  padding: 2px 6px;
}
.uic-fieldset > legend.white {
  background: #fff;
}



/*
  uic-button
*/
button.uic-button,
button.uic-ok-button,
button.uic-cancel-button {
  display: inline-block;
  margin: 0;
  padding: 5px 20px;
  font-weight: 300;
  font-size: 1rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background: #FFF;
  border-radius: 4px;
  border: 1px solid #CDCDCD;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button.uic-button:focus,
button.uic-ok-button:focus,
button.uic-cancel-button:focus {
  outline: none;
  box-shadow: 0px 0px 1px #b0dafb;
}
button.uic-button:hover,
button.uic-ok-button:hover,
button.uic-cancel-button:hover {
  box-shadow: 0px 0px 1px #888;
}
button.uic-button[disabled]:hover,
button.uic-ok-button[disabled]:hover,
button.uic-cancel-button[disabled]:hover,
.uic-button-group button.uic-button[disabled]:hover {
  box-shadow: none!important;
}
button.uic-button:active,
button.uic-ok-button:active,
button.uic-cancel-button:active {
  box-shadow: 0px 0px 1px #888 inset;
}
button.uic-button:active,
button.uic-cancel-button:active {
  color: #000;
}
button.uic-ok-button:active {
  color: #FFF;
}
button.uic-button.large {
  padding: 10px 30px;
  font-size: 1.1em;
}
button.uic-button.small {
  padding: 2px 10px;
  font-size: .9rem;
}
button.uic-button.extra-small {
  padding: 1px 5px;
  font-size: .8rem;
}
button.uic-button.blue,
.uic-button-group.blue button.uic-button,
button.uic-ok-button {
  color: #fff;
  background: #388FFF;
  box-sizing: border-box;
  border: 1px solid transparent;
}
button.uic-button[disabled].blue,
.uic-button-group.blue button.uic-button[disabled],
button.uic-ok-button[disabled] {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(56, 143, 255, 0.3);
}
button.uic-button.green,
.uic-button-group.green button.uic-button {
  color: #fff;
  background: #11D232;
  border: 1px solid transparent;
}
button.uic-button[disabled].green,
.uic-button-group.green button.uic-button[disabled] {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(17, 210, 50, 0.3);
}
button.uic-button.yellow,
.uic-button-group.yellow button.uic-button {
  color: #000;
  background: #FFD128;
  border: 1px solid transparent;
}
button.uic-button[disabled].yellow,
.uic-button-group.yellow button.uic-button[disabled] {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(255, 209, 40, 0.5);
}
button.uic-button.red,
.uic-button-group.red button.uic-button {
  color: #fff;
  background: #FF0202;
  border: 1px solid transparent;
}
button.uic-button[disabled].red,
.uic-button-group.red button.uic-button[disabled] {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 2, 2, 0.5);
}
.uic-button > svg {
	vertical-align: middle;
}






/*
  ButtonGroup
*/
.uic-button-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.uic-button-group + .uic-button-group,
.uic-button-group + .uic-button,
.uic-button + .uic-button-group {
  margin-left: 5px;
}
.uic-button-group button.uic-button {
  padding: 5px 15px;
  border-radius: 4px;
}
.uic-button-group > .uic-dropdown > button.uic-button {
  padding: 5px 12px;
}
.uic-button-group button.uic-button:hover {
  box-shadow: inset 0px 0px 1px #333;
}
.uic-button-group button.uic-button:active {
  box-shadow: inset 0px 0px 5px #888;
}
.uic-button-group button.uic-button:focus {
  background: #eee;
  z-index: 2;
}
button.uic-button.selected {
  box-shadow: inset 0px 0px 3px #888;
  background: #F9F9F9;
}
.uic-button-group > button.uic-button:first-child {
  margin-left: 0;
}
.uic-button-group button.uic-button+button.uic-button,
.uic-button-group button.uic-button+.uic-button-group,
.uic-button-group .uic-button-group+button.uic-button,
.uic-button-group .uic-button-group+.uic-button-group,
.uic-button-group .uic-dropdown+button.uic-button,
.uic-button-group button.uic-button+.uic-dropdown {
  margin-left: -1px;
}
.uic-button-group > button.uic-button,
.uic-button-group > .uic-dropdown {
  position: relative;
  float: left;
}
.uic-button-group > button.uic-button:first-child:not(:last-child),
.uic-button-group > .uic-dropdown:not(:last-child) > button.uic-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.uic-button-group > button.uic-button:not(:first-child):not(:last-child):not(.uic-dropdown) {
  border-radius: 0;
}
.uic-button-group > button.uic-button:last-child:not(:first-child),
.uic-button-group > .uic-dropdown:not(:first-child) > button.uic-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/*
  button-group
  large
*/
.uic-button-group.large button.uic-button {
  padding: 8px 25px;
  font-size: 1rem;
}
.uic-button-group.large > .uic-dropdown > button.uic-button {
  padding: 8px 15px;
  font-size: 1rem;
}

/*
  button-group
  small
*/
.uic-button-group.small button.uic-button,
.uic-button-group.small > .uic-dropdown > button.uic-button {
  padding: 3px 10px;
  font-size: 0.8rem;
}

/*
  button-group
  extra-small
*/
.uic-button-group.extra-small button.uic-button,
.uic-button-group.extra-small > .uic-dropdown > button.uic-button {
  padding: 1px 8px;
  font-size: 0.75rem;
}

/*
  button-group
  blue
*/
.uic-button-group button.uic-button.blue,
.uic-button-group.blue button.uic-button {
  border: 1px solid #697292;
}
.uic-button-group button.uic-button.blue:hover,
.uic-button-group.blue button.uic-button:hover {
  box-shadow: inset 0px 0px 2px #333;
}
.uic-button-group button.uic-button.blue:focus,
.uic-button-group.blue button.uic-button:focus {
  box-shadow: inset 0px 0px 2px #333;
  background: #277EEF;
  color: #fff;
}
.uic-button-group button.uic-button.blue.selected,
.uic-button-group.blue button.uic-button.selected {
  box-shadow: inset 0px 0px 2px #333;
  background: #216AC7;
  color: #fff;
}
.uic-button-group button.uic-button.blue[disabled],
.uic-button-group.blue button.uic-button[disabled] {
  border: 1px solid #bbbbbb;
}

/*
  button-group
  green
*/
.uic-button-group button.uic-button.green,
.uic-button-group.green button.uic-button {
  border: 1px solid #2BA03F;
}
.uic-button-group button.uic-button.green:hover,
.uic-button-group.green button.uic-button:hover {
  box-shadow: inset 0px 0px 1px #333;
}
.uic-button-group button.uic-button.green:focus,
.uic-button-group.green button.uic-button:focus {
  box-shadow: inset 0px 0px 2px #333;
  background: #12CC31;
  color: #fff;
}
.uic-button-group button.uic-button.green.selected,
.uic-button-group.green button.uic-button.selected {
  box-shadow: inset 0px 0px 2px #333;
  background: #25CC11;
  color: #fff;
}

/*
  button-group
  yellow
*/
.uic-button-group button.uic-button.yellow,
.uic-button-group.yellow button.uic-button {
  border: 1px solid #AEAF5D;
}
.uic-button-group button.uic-button.yellow:hover,
.uic-button-group.yellow button.uic-button:hover {
  box-shadow: inset 0px 0px 1px #333;
}
.uic-button-group button.uic-button.yellow:focus,
.uic-button-group.yellow button.uic-button:focus {
  box-shadow: inset 0px 0px 2px #333;
  background: #FFC800;
}
.uic-button-group button.uic-button.yellow.selected,
.uic-button-group.yellow button.uic-button.selected {
  box-shadow: inset 0px 0px 6px #888C65;
  background: #FFCF1E;
  color: #000;
}

/*
  button-group
  red
*/
.uic-button-group button.uic-button.red,
.uic-button-group.red button.uic-button {
  border: 1px solid #A53737;
}
.uic-button-group button.uic-button.red:hover,
.uic-button-group.red button.uic-button:hover {
  box-shadow: inset 0px 0px 2px #333;
}
.uic-button-group button.uic-button.red:focus,
.uic-button-group.red button.uic-button:focus {
  box-shadow: inset 0px 0px 2px #333;
  background: #FF1A1A;
}
.uic-button-group button.uic-button.red.selected,
.uic-button-group.red button.uic-button.selected {
  box-shadow: inset 0px 0px 6px #544A4A;
  background: #F51B1B;
  color: #fff;
}








/*
  CheckBoxComponent
*/
.uic-check-box {
  display: inline-block;
  position: relative;
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
}
.uic-check-box.slider.disabled,
.uic-check-box.toggle.disabled {
  opacity: 0.4;
}
.uic-check-box input[type=checkbox] {
  width: auto;
  height: auto;
}
.uic-check-box input + label {
  display: block;
  cursor: pointer;
  position: absolute;
  margin: 0;
}
.uic-check-box.disabled input + label {
  cursor: default;
}
.uic-check-box span {
  margin: 10px;
  vertical-align: middle;
}
.uic-check-box.slider,
.uic-check-box.toggle {
  top: -3px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.uic-check-box.slider input[type=checkbox],
.uic-check-box.toggle input[type=checkbox] {
  visibility: hidden;
}
.uic-check-box.slider {
  top: -3px;
  width: 80px;
  height: 26px;
  border-radius: 50px;
}
.uic-check-box.slider:after {
  content: 'OFF';
  color: #888;
  position: absolute;
  right: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.uic-check-box.slider.light:after {
  color: #888;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.uic-check-box.slider.dark:after {
  color: #000;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.uic-check-box.slider:before {
  content: 'ON';
  color: #27ae60;
  position: absolute;
  left: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
}
.uic-check-box.slider label {
  width: 34px;
  height: 20px;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.uic-check-box.slider.light label {
  background: #646563;
  background: -webkit-linear-gradient(top, #BBBABA 0%, #B2B5B2 40%, #646563 100%);
  background: linear-gradient(to bottom, #BBBABA 0%, #B2B5B2 40%, #646563 100%);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.uic-check-box.slider input[type=checkbox]:checked + label {
  left: 43px;
}
.uic-check-box.toggle {
  background: none;
  width: 3.5rem;
  height: 1.5rem;
  border-radius: 500rem;
}
.uic-check-box.toggle label:before {
  display: block;
  position: absolute;
  content: ''!important;
  z-index: 1;
  border: none;
  top: 0;
  left: 0;
  transform: none;
  background: rgba(0,0,0,.05);
  width: 3.5rem;
  height: 1.5rem;
  border-radius: 500rem;

  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.uic-check-box.toggle input[type=checkbox]:checked + label:before {
  background: #2185d0;
}
.uic-check-box.toggle.green input[type=checkbox]:checked + label:before {
  background: #11D232;
}
.uic-check-box.toggle.red input[type=checkbox]:checked + label:before {
  /*background: #E61010;*/
  background: #FF0202;
}
.uic-check-box.toggle label {
  top:0px;
  left: 0px;
  z-index: 0;
  width: 3.5rem;
  height: 1.5rem;
  background: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-transition: none;
  transition: none;
}
.uic-check-box.toggle label:after {
  position: absolute;
  content:''!important;
  background: -webkit-linear-gradient(transparent,rgba(0,0,0,.05)) #fff;
  background: linear-gradient(transparent,rgba(0,0,0,.05)) #fff;
  box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 500rem;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.uic-check-box.toggle input[type=checkbox]:checked + label:after {
  left: 2rem;
}









/*
  SlideMenuComponent
*/
.uic-slide-menu > nav {
  position: fixed;
  z-index: 200;
  background: #4f6b81;
  color: #ddd;
  transition: transform 0.4s;
}
.uic-slide-menu > nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uic-slide-menu > nav > button.close-button {
  color: #fff;
  text-align: left;
  background-color: #4f6b81;
  font-size: 1.1em;
  border: none;
  box-shadow: none;
  border-radius: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.uic-slide-menu > nav > button.close-button:focus {
  outline: none;
}

/*
  slide-menu content-container
*/
.uic-slide-menu > .uic-content-container {
  transition: transform .4s, margin .4s;
}

/*
  slide-menu-mask
*/
.uic-content-mask.slide-menu-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.uic-slide-menu > input[type=checkbox].menu-toggle:checked ~ .slide-menu-mask {
  width: 100%;
  height: 100%;
  opacity: 0.05;
  transition: opacity 0.4s;
}

/*
  menu-toggle button
*/
.uic-slide-menu > input[type=checkbox].menu-toggle {
  position: fixed;
  opacity: 0;
  z-index: 200;
}
.uic-slide-menu > input[type=checkbox].menu-toggle ~ label {
  position: absolute;
  margin: 0;
  z-index: 200;
  display: block;
  font-size:3em;
  color: #444;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .4s;
}

.uic-slide-menu > input[type=checkbox].menu-toggle ~ label.uic-menu-toggle-fixed {
  position: fixed;
}

.uic-slide-menu > nav li {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
  padding: 15px;
  background: linear-gradient(#628297, #4f6b81);
  border-bottom: 1px solid #1e222b;
  box-shadow: inset 0px 1px 1px #8b9db3;
  text-align: left;
  cursor: pointer;
}

.uic-slide-menu > nav li:hover {
  background: linear-gradient(#3b3f48, #3c434d);
  box-shadow: inset 0px 1px 1px #475059;

}

.uic-slide-menu > nav li.active {
  background: linear-gradient(rgba(59, 63, 72, 0.22), #3c434d);
  box-shadow: inset 0px 1px 1px #475059;

}


/*
 slide-menu left & right
*/
.uic-slide-menu > nav {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
@media all and (min-width: 320px) {
  .uic-slide-menu > nav {
    width: 250px;
  }
}
.uic-slide-menu > nav button.close-button {
  display: block;
  padding: 15px;
}
.uic-slide-menu.left > nav button.close-button,
.uic-slide-menu.right > nav button.close-button {
  width: 100%;
}

/*
  slide-menu left
*/
.uic-slide-menu.left > nav,
.uic-slide-menu > nav.left {
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

@media all and (min-width: 320px) {
  .uic-slide-menu.left > nav,
  .uic-slide-menu > nav.left {
    transform: translateX(-250px);
  }
}

.uic-slide-menu.left > input[type=checkbox].menu-toggle + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.left + label {
  top: 0px;
  left: 10px;
}
.uic-slide-menu.left > input[type=checkbox].menu-toggle:checked + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.left:checked + label  {
  transform: translate3d(250px, 0, 0) rotate(90deg);
}
.uic-slide-menu.left > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.push-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.left:checked ~ .uic-content-container.push-content {
  transform: translate3d(250px, 0, 0);
}
.uic-slide-menu.left > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.squeeze-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.left:checked ~ .uic-content-container.squeeze-content {
  margin-left: 250px;
}
.uic-slide-menu.left > input[type=checkbox].menu-toggle:checked ~ nav,
.uic-slide-menu > input[type=checkbox].menu-toggle.left:checked ~ nav.left {
  transform: translate3d(0, 0, 0);
}

/*
  slide-menu right
*/
.uic-slide-menu.right > nav,
.uic-slide-menu > nav.right {
  top: 0;
  right: 0;
  transform: translateX(100%);
}

@media all and (min-width: 320px) {
  .uic-slide-menu.right > nav,
  .uic-slide-menu > nav.right {
    transform: translateX(250px);
  }
}

.uic-slide-menu.right > input[type=checkbox].menu-toggle + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.right + label {
  top: 0px;
  right: 10px;
}
.uic-slide-menu.right > input[type=checkbox].menu-toggle:checked + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.right:checked + label {
  transform: translate3d(-250px, 0, 0) rotate(-90deg);
}
.uic-slide-menu.right > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.push-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.right:checked ~ .uic-content-container.push-content {
  transform: translate3d(-250px, 0, 0);
}
.uic-slide-menu.right > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.squeeze-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.right:checked ~ .uic-content-container.squeeze-content {
  margin-right: 250px;
}
.uic-slide-menu.right > input[type=checkbox].menu-toggle:checked ~ nav,
.uic-slide-menu > input[type=checkbox].menu-toggle.right:checked ~ nav.right {
  transform: translate3d(0, 0, 0);
}

/*
  slide-menu top & bottom
*/
.uic-slide-menu.top > nav,
.uic-slide-menu.bottom > nav {
  vertical-align: middle;
  width: 100%;
  height: 60px;
  text-align: center;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  box-shadow: none;
}
.uic-slide-menu.top > nav ul,
.uic-slide-menu.bottom > nav ul {
  display: inline-block;
  text-align: center;
  background: linear-gradient(#628297, #4f6b81);
}
.uic-slide-menu.top > nav ul > li,
.uic-slide-menu.bottom > nav ul > li {
  display: inline-block;
  text-align: center;
  margin: 0;
  /*padding: 0;*/
  line-height: 60px;
  padding: 0 15px;
  box-shadow: none;
}
/*.uic-slide-menu.top > nav .slide-menu-item,
.uic-slide-menu.bottom > nav .slide-menu-item {
  display: inline-block;
  line-height: 60px;
  padding: 0 15px;
  box-shadow: none;
}*/
.uic-slide-menu.top > nav button.close-button,
.uic-slide-menu.bottom > nav button.close-button {
  display: inline-block;
  margin-right: 12px;
  padding: 0 24px;
  height: 60px;
  line-height: 60px;
}

/*
  slide-menu top
*/
.uic-slide-menu.top > nav {
  top: 0;
  left: 0;
  transform: translateY(-60px);
}
.uic-slide-menu.top > input[type=checkbox].menu-toggle + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.top + label {
  top: 0px;
  left: 10px;
}
.uic-slide-menu.top > input[type=checkbox].menu-toggle:checked + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.top:checked + label  {
  transform: translateY(60px) rotate(90deg);
}
.uic-slide-menu.top > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.push-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.top:checked ~ .uic-content-container.push-content {
  transform: translateY(60px);
}
.uic-slide-menu.top > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.squeeze-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.top:checked ~ .uic-content-container.squeeze-content {
  margin-top: 60px;
}
.uic-slide-menu.top > input[type=checkbox].menu-toggle:checked ~ nav,
.uic-slide-menu > input[type=checkbox].menu-toggle.top:checked ~ nav.top {
  transform: translateY(0);
}

/*
  slide-menu bottom
*/
.uic-slide-menu.bottom > nav {
  bottom: 0;
  left: 0;
  transform: translateY(60px);
}
.uic-slide-menu.bottom > input[type=checkbox].menu-toggle + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.bottom + label {
  position: fixed;
  bottom: 0;
}
.uic-slide-menu.bottom > input[type=checkbox].menu-toggle:checked + label,
.uic-slide-menu > input[type=checkbox].menu-toggle.bottom:checked + label  {
  transform: translateY(-60px) rotate(90deg);
}
.uic-slide-menu.bottom > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.push-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.bottom:checked ~ .uic-content-container.push-content {
  transform: translateY(-60px);
}
.uic-slide-menu.bottom > input[type=checkbox].menu-toggle:checked ~ .uic-content-container.squeeze-content,
.uic-slide-menu > input[type=checkbox].menu-toggle.bottom:checked ~ .uic-content-container.squeeze-content {
  margin-bottom: 60px;
}
.uic-slide-menu.bottom > input[type=checkbox].menu-toggle:checked ~ nav,
.uic-slide-menu > input[type=checkbox].menu-toggle.bottom:checked ~ nav.bottom {
  transform: translateY(0);
}

/*
  hide scroll bars
*/
.uic-slide-menu > nav::-webkit-scrollbar,
.uic-context-menu nav.uic-context-menu-container::-webkit-scrollbar,
.uic-context-menu li.uic-sub-menu > span > div::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.uic-slide-menu > nav,
.uic-context-menu nav.uic-context-menu-container,
.uic-context-menu li.uic-sub-menu > span > div {
  -ms-overflow-style: none;
}



/*
  ContextMenuComponent
*/
.uic-context-menu menu menuitem,
.uic-context-menu-container menuitem,
.uic-dropdown menu menuitem,
.uic-dropdown-container menuitem {
  display: block;
}

/*
  ContextMenuComponent & DropdownComponent
*/
.uic-context-menu-container,
.uic-context-menu-container menuitem > div > .uic-menu-container,
.uic-context-menu-container .uic-sub-menu > div > .uic-menu-container,
.uic-dropdown-container,
.uic-dropdown-container menuitem > div > .uic-menu-container,
.uic-dropdown-container .uic-sub-menu > div > .uic-menu-container {
	display: inline-block;
	margin: 0px;
	background-color: rgb(255,255,255);
	padding:4px 0;
	position: fixed;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	-moz-border-radius: 4px;
	border-radius:4px;
	text-align: left;
  font-size: 13px;
  font-family: sans-serif;
	cursor: default;
  z-index: 200;
  white-space: nowrap;
}
/*.uic-context-menu-container ul,
.uic-dropdown-container ul {

}*/
.uic-context-menu-container .uic-sub-menu-title,
.uic-dropdown .uic-sub-menu-title {
  margin-right: 15px;
}
.uic-context-menu-container menuitem.uic-sub-menu > div,
.uic-context-menu-container li.uic-sub-menu > div,
.uic-dropdown-container menuitem.uic-sub-menu > div,
.uic-dropdown-container li.uic-sub-menu > div {
  right: 15px;
}
.uic-context-menu-container menuitem.uic-sub-menu > div,
.uic-context-menu-container li.uic-sub-menu > div,
.uic-dropdown-container menuitem.uic-sub-menu > div,
.uic-dropdown-container li.uic-sub-menu > div,
.uic-dropdown-container .uic-sub-menu > div > .uic-menu-container {
  position: absolute;
}
.uic-context-menu-container,
.uic-context-menu-container ul,
.uic-dropdown-container,
.uic-dropdown-container ul {
	margin: 0px;
	margin-left:0px;
	padding:4px 0;
  list-style: none;
}
.uic-context-menu-container ul,
.uic-dropdown-container ul {
  padding: 0px;
}
.uic-context-menu-container menuitem,
.uic-context-menu-container li,
.uic-dropdown-container menuitem,
.uic-dropdown-container li {
	padding:3px 25px 3px 25px;
	white-space: nowrap;
	overflow: hidden;
}
.uic-context-menu-container menuitem:hover,
.uic-context-menu-container li:hover,
.uic-dropdown-container menuitem:hover,
.uic-dropdown-container li:hover {
	background: #3A9FF4;
	color:#ffffff;
}
.uic-context-menu-container menuitem > div > svg,
.uic-context-menu-container li > div > svg,
.uic-dropdown-container menuitem > div > svg,
.uic-dropdown-container li > div > svg {
	margin-left:10px;
	margin-top:3px;
}
.uic-context-menu-container hr,
.uic-dropdown-container hr {
	width: 100%;
	margin:4px 0;
}
.uic-context-menu-container menuitem,
.uic-context-menu-container menuitem > div > .uic-menu-container > ul > li,
.uic-context-menu-container li.uic-sub-menu > div > .uic-menu-container > ul > li,
.uic-dropdown-container menu menuitem,
.uic-dropdown-container menuitem.uic-sub-menu > div > .uic-menu-container > ul > li,
.uic-dropdown-container li.uic-sub-menu > div > .uic-menu-container > ul > li {
	color:#000000;
}
.uic-context-menu-container menuitem:hover,
.uic-context-menu-container .uic-sub-menu > div > .uic-menu-container > ul > li:hover,
.uic-dropdown menu menuitem:hover,
.uic-dropdown-container .uic-sub-menu > div > .uic-menu-container > ul > li:hover {
	color:#ffffff;
}
menuitem.uic-sub-menu > div > svg.svg-triangle polygon,
li.uic-sub-menu > div > svg.svg-triangle polygon {
  fill: rgb(0, 0, 0);
  stroke:#000000;
  stroke-width:1;
}
menuitem.uic-sub-menu:hover > div > svg.svg-triangle polygon,
li.uic-sub-menu:hover > div > svg.svg-triangle polygon {
  fill: rgb(255, 255, 255);
  stroke:#ffffff;
  stroke-width:1;
}
menuitem[disabled].uic-sub-menu > div > svg.svg-triangle polygon,
li[disabled].uic-sub-menu > div > svg.svg-triangle polygon,
menuitem[disabled].uic-sub-menu:hover > div > svg.svg-triangle polygon,
li[disabled].uic-sub-menu:hover > div > svg.svg-triangle polygon {
	fill: #ccc !important;
  stroke:#ccc !important;
}
.uic-context-menu-container menuitem[disabled],
.uic-context-menu-container li[disabled],
.uic-context-menu-container li.context-menu-disabled,
.uic-dropdown-container li.disabled {
	color:#ccc !important;
}
.uic-context-menu-container menuitem[disabled]:hover,
.uic-context-menu-container li[disabled]:hover,
.uic-context-menu-container li.context-menu-disabled:hover,
.uic-dropdown-container li.disabled:hover {
	background: rgb(255,255,255) !important;
}
.uic-context-menu-container > div,
.uic-dropdown-container > div {
  margin: 10px;
}
.uic-context-menu-container menuitem > span.icon,
.uic-context-menu-container li > span.icon,
.uic-dropdown-container menuitem > span.icon,
.uic-dropdown-container li > span.icon {
	position: absolute;
	left: 5px;
	margin-top: -1px;
}
menuitem:hover >span.icon > svg,
li:hover >span.icon > svg {
	fill: #fff;
}


/*
  dropdown
*/
.uic-dropdown {
  display: inline-block;
  position: relative;
  cursor: pointer;
  white-space: normal;
}
.uic-dropdown-container, .uic-dropdown-container li.uic-sub-menu > div > div.uic-menu-container {
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.15);
	-moz-border-radius: 2px;
	border-radius:2px;
  position: absolute;
}
.uic-dropdown.left .uic-dropdown-container {
  left: 0;
}
.uic-dropdown.right .uic-dropdown-container {
  right: 0;
}


/*
  content-mask
*/
.uic-content-mask {
  position: fixed;
  z-index: 300;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.uic-content-mask.active {
  width: 100%;
  height: 100%;
  opacity: 0.05;
  transition: opacity 0.4s;
}
.uic-content-mask.uic-menu-overlay {
  background: none;
  opacity: inherit;
}


.uic-modal-dialog .uic-content-mask.active,
.uic-modal-window .uic-content-mask.active,
.uic-disable-pointer-events {
  pointer-events: none;
}

.uic-modal-window.uic-disable-pointer-events .uic-modal,
.uic-modal-dialog.uic-disable-pointer-events .uic-modal {
  pointer-events: all;
}



/*
  ModalDialogComponent
*/
.uic-modal {
	background-color: rgb(255,255,255);
	padding: 1em;
	border:1px solid #DCDCDC;
	position:relative;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
  overflow: auto;
  z-index: 310;
  max-height: calc(100% - 40px);
}
.uic-modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 301;
}
.uic-modal-button-container {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uic-modal-button-container button {
  /*height: 25px;*/
  min-width: 80px;
  margin: 10px;
}
header.uic-modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
}
header.uic-modal-header h1 {
  text-align: left;
  font-size: 16px;
  font-size: 1rem;
  margin: 10px;
  margin-right: 20px;
  /*font-weight: normal;*/
}
button.uic-close-button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  font-size: 1rem;
  z-index:1;
}
button.uic-close-button:hover {
  border: 1px solid #DCDCDC;
  background: #fff;
  box-shadow: 0px 0px 1px #888888;
}
.uic-modal-body {
  margin-top: 18px;
}
.uic-modal h1, .uic-modal p {
  text-align: center;
	margin: 15px;
}
.uic-modal h1 {
	font-size: 20px;
  font-size: 1.5rem;
}
.uic-modal p {
	font-size: 16px;
  font-size: 1rem;
}
.uic-modal-dialog, .uic-modal-alert, .uic-modal-confirm {
  z-index: 400;
}
.uic-modal.resizable {
  resize: both;
  overflow: auto;
}
.uic-modal.full-screen {
	height: calc(100% - 40px);
	width: calc(100% - 40px);
}
.uic-modal.full-screen > .uic-modal-body {
	height: calc(100% - 18px);
}

/*
  Tabs
*/
.uic-tabs {
  position: relative;
}
.uic-tabs > ul {
	position: relative;
	margin:0px;
	padding: 0 10px;
	white-space: nowrap;
  overflow-x: auto;
}
.uic-tabs > ul > li {
	display:inline-block;
	margin:0px;
	padding:7px 10px;
	height: 30px;
	background: rgba(0,0,0,0.1);
	cursor:pointer;
	color:#999;
	position:relative;
	border-top: 1px solid rgb(197, 212, 226);
	border-left: 1px solid rgb(197, 212, 226);
	border-right: 1px solid rgb(197, 212, 226);
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
  box-sizing: border-box;
}
.uic-tabs > ul > li.active {
	background: #f9f9f9;
	z-index:2;
	color:#000;
}
.uic-tabs > div {
	display:none;
  position: relative;
	top: -1px;
	padding: 5px;
	z-index:1;
}
.uic-tabs > div .uic-tabs > div {
	padding: 5px 0;
}
.uic-tabs > div div.panel {
	margin: 2px;
	margin-bottom: 12px;
}
.uic-tabs > div.active {
	display:block;
	border: 1px solid rgba(197, 212, 226, 0);
	border-top: 1px solid rgba(197, 212, 226, 0.5);
	background: #f9f9f9;
}

/* list */

ul.uic-list.default {
	max-height: 100%;
	overflow: auto;
  list-style: none;
	padding: 0;
	box-sizing: border-box;
  background: #fff;
}
ul.uic-list.inset-border {
  border: 1px solid #f3f3f3;
  box-shadow: 0px 0px 3px #9c9c9c inset;
}
ul.uic-list.default li {
	border-bottom: 1px solid #ececec;
	padding: 10px;
}




/*
  Common styles
*/
.light {
  border: 1px solid rgb(89, 96, 134);
  background: #F3F3F3;
  color: #000;
}
.dark {
  border: 1px solid rgb(89, 96, 134);
  background: #333;
  color: #D5D5D5;
}
.shadow {
  box-shadow: 4px 4px 4px #888888!important;
}
.top-border.yellow {
  border-top: 4px solid rgb(236, 207, 101);
}
.top-border.green {
  border-top: 4px solid rgb(123, 224, 123);
}
.top-border.red {
  border-top: 4px solid rgb(251, 189, 189);
}
.left-border.yellow {
  border-left: 4px solid rgb(236, 207, 101);
}
.left-border.green {
  border-left: 4px solid rgb(123, 224, 123);
}
.left-border.red {
  border-left: 4px solid rgb(251, 189, 189);
}
.rounded-corners {
  border-radius: 4px;
}
.no-outline:focus {
  outline: none;
}
.ellipsis {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}