/* Arial */
@font-face {
  font-family: lcArial;
  font-style: normal;
  font-weight: 400;
  src: local('lcArial'), url('Arial.woff') format('woff');
}
/* Acme */
@font-face {
  font-family: 'Acme';
  font-style: normal;
  font-weight: 400;
  src: local('Acme'), local('Acme-Regular'), url(Acme.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* Roboto-latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(Roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* Roboto-latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(Roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
* {
    font-family: 'Roboto', sans-serif;
}
html, input {
	height: 100%;
	font-size: 16px;
	line-height: 20px;
	color: rgba(0,0,0,0.87);
}
html,
body {
	width: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
label,
textarea {
	font-size: 16px;
	/* line-height: 1em; */
	color: rgba(0,0,0,0.87);
	resize: none;
}

textarea{
	position:relative;
	width: 100%;
	border: none;
	height: 2.2em;
	background: transparent;
	color: #676767;
	overflow: hidden;
	border: 1px solid #aaa;
	margin-top: 5px;
	border-top: none;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}
textarea:focus{
	outline: none;
}
.autowidth{
	width: auto;
}

/***************************************************************************************
 * scribble
 **************************************************************************************/
.sd-scribble {
	position: relative;
	z-index: 1;
	height: 400px;
}
.sd-scribble canvas{
	border: 1px solid #eee;
	width: 100%;
	height: 400px;
	display: block;
	z-index: 1;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	transform: translateZ(0);
	-webkit-transform: translateZ(0);

}
.sd-button.sd-scribble-button{
	position: absolute;
	top: 4px;
	left: auto;
	right: 4px;
	z-index: 2;
}

input[type=file] {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
}

.flex {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	box-sizing: border-box;
}

/** base svg fill ***/
svg {
	fill: #676767;
}
/***************************************************************************************
 * global param
 **************************************************************************************/
.sd-loader {
	background-image: url(../images/ui_loader.gif);
	min-width: 87px;
	min-height: 87px;
	background-repeat: no-repeat;
	position: fixed;
	left: calc(50% - 43px);
	top: calc(50% - 43px);
	z-index: 999;
}

.sd-inset,
.sd-toggle,
.sd-widget,
.sd-button,
.sd-barrow,
.sd-collapsible,
.sd-checkbox.simple .checkbox {
	border-radius: 4px;
}

.sd-row,
.sd-toggle,
.sd-barrow,
.sd-input::after,
.sd-select::after,
.sd-checkbox::after,
.sd-input .outerNode,
.sd-select .outerNode {
	border-style: solid;
	border-width: 1px;
	border-top: none;
}

.sd-select.scrollable .outerNode {
    max-height: 160px;
    display: inline-block;
    overflow-y: auto;
    border-top: 1px solid #eee;
    margin-top: 3px;
    padding-top: 0;
}

textarea::after{
	content: '';
}
/***************************************************************************************
 * Page definitions
 **************************************************************************************/
.sd-page, .sd-video {
	/*
	overflow-x: hidden;
*/
	display: inline-block;
	width: 100%;
	z-index: -1;
	min-height: 99.5vh;
	}
.sd-video {
	overflow-x: hidden;
	height: 100%;
	z-index: -1;
}

.sd-touch-device .sd-page {
    /*padding-bottom: 50vh;*/
}

.page-center-form {
    max-width: 1000px;
    border: 1px solid #aaa;
    border-radius: 0.5em;
    background: #fff;
    margin: 1vh auto;
    min-height: calc(100vh - 16em);
    position: relative;
    box-shadow: 0px 2px 4px #ccc;
    padding: 2em 1em;
}
.page-centered {
	background-color: #eee;
	text-align: center;
}
/********************
.sd-page.panel{
	padding-top: 100px;
	height: calc(100% - 100px);
}
********************/
.sd-clickable {
	cursor: pointer;
}
/***************************************************************************************
 * Side bar definitions
 **************************************************************************************/
.sd-sidebar{
	width: 130px;
	min-height: 100vh;
	z-index: 500;
	position: fixed;
	overflow-y: auto;
	float: left;
	border-radius: 0;
	background: #343A3A;
	top: 0;
}
.sd-sidebar.fullscreen.forceHide {
    display: none !important;
}
.sd-sidebar svg {
    fill: #ccc;
}
.sidebar-hide-icon{
	float: right;
	margin-top: 10px;
}
.sd-sidebar .settingsmenu{
	background: #343A3A;
}
.sd-sidebar .settingsmenu{
    position: absolute;
    top: 89px;
    left: 0;
    width: 100%;
    text-align: center;
    display: inline-block;
}
.sd-sidebar .settingsmenu .sd-button {
	width: 100%;
	clear: both;
	text-align: center;
	border-top: 1px solid #666;
	border-radius: 0;
	display: inline-block;
	height: 79.5px;
	box-sizing: border-box;
	line-height: 5em;
	padding: 0;
}
.sd-sidebar .settingsmenu .sd-button.checked{
	background-color: transparent;
}

/****************************************************************************************
 * Button definitions
 ***************************************************************************************/
.sd-button {
	background-color: #fff;
	border: 1px solid #dddddd;
	padding: 0.4em 0.6em;
	position: relative;
	/* display: -webkit-inline-flex; */
	display: -ms-inline-flexbox;
	/* display: inline-flex; */
	line-height: 1em;
	width: auto;
	cursor: pointer;
}

.sd-button-square .title {
	width: 100%;
	bottom: 0;
	position: absolute;
}
.sd-button-circle {
	border-radius: 50%;
	width: 50px;
	padding: 0;
	height: 50px;
	z-index: 2;
}
.sd-button-circle.sd-icon-plus {
	height: 50px;
	width: 50px;
	background-image: none;
}
.sd-button-clear {
	border: none;
	background-color: transparent;
}

.sd-button-square {
	width: 30px;
	height: 30px;
	background-color: #fff;
}

.sd-button-square.sd-icon-list {
	width:15px;
	height:0px;
	background-color:#fff;
	border-radius:5px;
	position:relative;
	float: left;
	border: none;
	font-size: 12px;
}

.sd-icon-delete svg{
	fill: #FF0000;
}
/** sd-panel ***/
.sd-panel .sd-button{
/*
	min-height: 39px;
	min-width: 39px;
*/
}
.sd-panel .sd-button:not(.sd-button-circle) svg {
	min-height: 32px;
	min-width: 32px;
	fill: #fff;
}

.sd-panel .sd-button-circle svg {
	width: 36px;
	height: 36px;
	position: absolute;
	top: 6px;
	left: 6px;
}
.sd-panel .sd-button-circle {
	margin: 27px 1% 0 0;
	float: left;
	top: 3.5em;
	position: absolute;
	min-width: 50px;
	min-height: 50px;
	z-index: 4;
}
.sd-panel .sd-button-circle:after{
	box-shadow: 0px 2px 4px #ccc;
	content: ' ';
	border-radius: 50%;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 0px;
	position: absolute;
	display: inline-block;
	z-index: 0;
}
.sd-panel .sd-button-circle.sd-icon.sd-icon-done svg {
	fill: #008000;
}
.sd-icon-list:after {
	content: '';
	width: 100%;
	height: 3px;
	position:absolute;
	border-radius: 2px;
	left: 0px;
	box-shadow: inset 0 0 0 5px, 0 -12px 0 0,0 12px 0 0;
}
.sd-icon-list:after {
	top:10px;
}
.sd-icon-list:before {
	top:10px;
}

.sd-button .title,
.sd-button .sd-icon {
	text-align: center;
}

/*******************************************************************************************
 * Dialog definitions
 ******************************************************************************************/
.sd-dialog {
    width: 100%;
    padding: 0;
    position: absolute;
    /* text-align: center; */
    left: 0;
    /* height: 100vh; */
    z-index: 1000;
    /* background: #C3C3CC; */
    padding-top: 15%;
}
.dialog-underlay{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 3;
    top: 0px;
    left: 0px;
    z-index: 500;
    /* background-color: rgba(195, 195, 204, 0.6); */
}
.sd-dialog .box{
    min-width: 40%;
    min-height: 50px;
    max-width: 90%;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #CCC;
    display: inline-block;
    position: absolute;
    width: auto;
    margin: 0;
    box-shadow: 0px 0px 40px #bbb;
    padding: 8px;
    z-index: 10;
    box-sizing: border-box;
}

.sd-dialog .box .message{
	min-height: 40px;
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: center;
}
.sd-dialog .box .message.draggable {
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
	cursor: -webkit-grab;
}
.sd-dialog .box.dragging .message.draggable {
	cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
	cursor: -webkit-grabbing;
}

.sd-dialog .box .sd-button{
	position: relative;
    float: right;
}

.sd-dialog .box .sd-controlgroup {
	margin-top: 10px;
    float: right;
}
.sd-dialog .box .sd-dlg-ctr-left{
	float: left;
    clear: both;
}

.sd-dialog .box .sd-controlgroup .sd-button{
    float: left;
}

/*******************************************************************************************
 * map definitions
 ******************************************************************************************/
.sd-maps{
	position: relative;
}
.map-dom-node{
	position: relative;
	width: 100%;
	height: 100%;
}
.sd-form.map-info-widget{
	position: absolute;
	top: 8px;
	left: 8px;
	box-sizing: border-box;
	background: #fff;
	width: 98%;
	padding: 4px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.sd-form.map-info-widget fieldset{
	padding-top: 0;
	padding-bottom: 0;
}
.sd-form.map-info-widget fieldset label:after{
	content: ':';
}
/*******************************************************************************************
 * Inset definitions
 ******************************************************************************************/
.sd-inset {
	margin: 1em;
	border: 0.1em solid #dddddd;
	box-shadow: 0px 0px 15px #D3D3D3;
	background-color: #fff;
	padding: 1em;
	display: inline-block;
}

/*******************************************************************************************
 * Controlgroup definitions
 ******************************************************************************************/
.sd-controlgroup {
	height: auto;
	width: auto;
    display: inline-block;
}

.sd-panel .sd-controlgroup {
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
}

.sd-controlgroup .sd-button {
	top: 0;
	float: left;
	color: #676767;
	margin: 0px;
	position: relative;
	border: 1px solid #dddddd;
	border-radius: 0;
	border-right: none;
	background-color: #FFF;
    display: block;
}

.sd-controlgroup .sd-button:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	/* border-style: solid; */

}

.sd-controlgroup .sd-button:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: 1px solid #dddddd;
}

.sd-controlgroup .sd-button.checked,
.sd-controlgroup .sd-button.checked .title{
	background-color: transparent;
	color: #FFF;
}

.sd-ctrgrp-vertical .sd-button {
    float: none;
}

.sd-controlgroup.sd-ctrgrp-vertical .sd-button:first-child:not(:last-child) {
	border-top-right-radius: 4px;
	border-bottom-left-radius: 0;
	border-right: 1px solid #dddddd;
}
.sd-controlgroup.sd-ctrgrp-vertical .sd-button:not(:first-child):not(:last-child) {
	border-top: 4px;
	border-right: 1px solid #dddddd;

}
.sd-controlgroup.sd-ctrgrp-vertical .sd-button:last-child:not(:first-child) {
    border-top: none;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
}

/*******************************************************************************************
 * Collapsible definitions
 ******************************************************************************************/
.sd-collapsible {
	clear: both;
	width: 98%;
	margin-left: 1.2%;
	margin-top: 1em;
	position: relative;
	border-width: 1px;
	margin-bottom: 1em;
	border-style: solid;
	border-color: #eee;
	box-sizing: border-box;
	display: inline-block;
}
.sd-collapsible .header:not(.invitation-list) {
	box-sizing: border-box;
	padding: 0.5em;
	min-height: 48px;
	line-height: 1.7em;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: #eee;
}
.sd-collapsible .content {
	width: 100%;
	min-height: 2em;
	padding: 0;
	border-bottom-left-radius: 0.2em;
	display: inline-block;
}

.sd-collapsible .content .sd-list .outerNode .sd-row:last-child {
	/* margin-bottom: -8px; */
	border-bottom: none;
}

.sd-collapsible.fullsize {
	width: calc(102% + 2px);
    margin: 1em 0 0 0;
    border-radius: 0;
}
.sd-collapsible.fullsize .header {
    border-radius: 0;
    padding-left: 12px;
}

.sd-collapsible .header .sd-icon.sd-collaps-icon {
	transform: rotate(90deg);
	float: left;
}
.sd-collapsible.scrollable .content{
    max-height: 400px;
    display: inline-block;
    overflow-y: auto;
}

.sd-collapsible.collapsed .header{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}
.sd-collapsible.collapsed .header .sd-icon.sd-collaps-icon {
	transform: rotate(0);
}

.sd-collapsible.collapsed .content{
	display: none;
}

/*******************************************************************************************
  collapsible controlgroup (ctr) definitions
 ******************************************************************************************/
.sd-ctrgroup {
	float: right;
	right: -10px;
}
.sd-ctrgroup .sd-button {
	background-color: #FAFAFA;
	border: 0.1em solid #f4f4f4;
	margin: 0;
	border-radius: 0;
	min-width: 0.5em;
	text-align: center;
}
.sd-ctrgroup .sd-button:first-child {
	border-top-left-radius: 0.2em;
	border-bottom-left-radius: 0.2em;
}
.sd-ctrgroup .sd-button:last-child {
	border-top-right-radius: 0.2em;
	border-bottom-right-radius: 0.2em;
	border-style: solid;
	border-right-width: 1px;
}
.sd-ctrgroup .sd-input {
	position: relative;
	top: -1.45em;
	margin: 0;
	height: 2.2em;
}
.sd-collapsible .sd-ctrgroup{
	margin-top: -6px;
}
.sd-collapsible .sd-ctrgroup .sd-button{
	border: none;
}
.sd-collapsible .header .sd-icon svg{
	fill: #FFF;
}

/***********************************************************************************************
 * List definitions
 **********************************************************************************************/
.sd-list{
	width: 100%;
	margin: 0 0%;
}
.sd-list .sd-listheader{
	width: 100%;
	display: inline-block;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	float: left;
}
.sd-list .sd-listheader .sd-description{
	max-height: 2em;
}
.sd-list .sd-listheader .sd-description.selected.ASC::after,
.sd-list .sd-listheader .sd-description.selected.DESC::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url(./../images/svg/up.svg);
    width: 24px;
    height: 24px;
    top: 0;
    margin-top: 4px;
    -webkit-text-fill-color: rebeccapurple;
    left: auto;
    right: 0;
}
.sd-list .sd-listheader .sd-description.selected.DESC::after {
    -ms-transform:rotate(180deg);       /* IE 9 */
    -moz-transform:rotate(180deg);      /* Firefox */
    -webkit-transform:rotate(180deg);   /* Safari and Chrome */
    -o-transform:rotate(180deg);        /* Opera */
    transform: rotate(180deg);          /* default */
}
.sd-list .sd-layout-col{
	border-right: 1px solid #eee;
	box-sizing: border-box;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sd-list .sd-layout-col:last-child{
	border-right: none;
}

.sd-list .sd-row{
	padding: 4px 8px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	float: left;
}
.sd-list.layout-list .sd-row{
	width: 100%;
	padding: 0px;
}

.sd-list .outerNode{
	/* overflow: hidden; */
	width: 100%;
	display: inline-block;
	float: left;
}
/** special pagination styling*/
.sd-list.pagination{
	padding-bottom: 2em;
}
.sd-list.pagination .sd-row:last-child{
	border-radius: 0;
}
.sd-list .pagination-footer {
    height: 2em;
    display: inline-block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.sd-list .pagination-footer .sd-button{
	height: 20px;
	width: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.sd-list .pagination-footer .sd-button:hover{
	background-color: transparent;
}
.sd-list .pagination-footer .sd-button:last-child{
	left:auto;
	right: 4px;
}
.sd-list .pagination-footer .sd-description{
	float: left;
	width: auto;
	text-align: center;
	padding: 0 0.6rem;
}

.sd-list .pagination-footer .page-counter {
	position: relative;
	margin: auto;
	width: 150px;
}
.sd-list .pagination-footer .page-counter .sd-button{
	color: #3f99d5;
	text-decoration: underline;
	cursor: pointer;
	float: left;
	position: relative;
	padding-right: 0;
}
.sd-list .pagination-footer .page-counter .sd-button:last-child::before{
	content: ' / ';
	position: absolute;
	left: 0.1rem;
	color: #000;
}
/***********************************************************************************************
 * Special list definitions (left-menu-list)
 **********************************************************************************************/
.left-menu-list{
    width: 20vw;
    min-width: 10em;
    border-right: 1px solid #ddd;
    height: calc(100vh - 6em);
    top: 6em;
    background: #fff;
    position: fixed;
    z-index: 3;
    box-shadow: 1px 3px 10px #ccc;
    overflow-y: auto;
}
.sd-list.left-menu-list .sd-row {
	display: table;
	vertical-align: middle;
	height: 4em;
	min-height: 4em;
}
.sd-list.left-menu-list .sd-row.checked {
	background-color: #F0F8FF;
	font-weight: bolder;
}
.sd-list.left-menu-list .sd-row div{
	display: table-cell;
	vertical-align: middle;
	float: none;
}

.sd-list.left-menu-list + .sd-inset {
	width: calc(70vw);
	margin-left: 23vw;
}
.left-menu-list.left-menu-list-collapsible .sd-row {
	padding: 0;
	width: 100%;
	height: auto;
	border: none;
}

.left-menu-list.left-menu-list-collapsible .sd-list.inner-col-list .sd-row,
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .content .sd-list.inner-col-list .sd-row {
	display: table;
	padding: 8px;
	width: calc(100% - 16px);
}

.left-menu-list.left-menu-list-collapsible .outerNode,
.left-menu-list.left-menu-list-collapsible .sd-row,
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible,
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .header,
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .content,
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .content .sd-list.inner-col-list .sd-row{
	display: inline-block;
	width: 100%;
	margin: 0;
}
.left-menu-list.left-menu-list-collapsible .sd-row {
	min-height: 3em;
}
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .sd-icon {
	float: left;
}
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible {
	border:0;
}

.left-menu-list.left-menu-list-collapsible .sd-row.checked {
	font-weight: normal;
	background-color: #fff;
}
/* .left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible .content .sd-list.inner-col-list .sd-row.checked{
	font-weight: bolder;
} */
.left-menu-list.left-menu-list-collapsible .sd-row .sd-collapsible.collapsed .content {
	display:none;
}

/***********************************************************************************************
 * Input definitions
 **********************************************************************************************/
.sd-select {
	cursor: pointer;
	/* z-index: 2; */
}
.sd-select.sd-pulse {
    z-index: 9;
}

.sd-input,
.sd-select,
.sd-checkbox {
	height: 2em;
	position: relative;
}

.sd-select.multiselect{
	/**
	 * Set height to auto to allow auto growth (multiselect)
	 */
	height: auto;
}
.sd-checkbox svg {
	position: absolute;
	left: 4px;
	top: -4px;
	width: 2em;
    height: 2em;
	display: none;
	fill: #008000;
}
.sd-checkbox:not(.simple) .sd-row.checked svg,
.sd-checkbox.checked svg
{
	display: block;
}

.sd-select .valueNode {
	padding-left: 5px;
	z-index: 0;
	position: relative;
	float: left;
	width: 100%;
	min-height: 32px;
	box-sizing: border-box;
	white-space: nowrap;
}
.sd-select .valueNode:after {
	content: ' ';
	display: inline-block;
	position: absolute;
	width: 0;
	height: 0;
	top: 4px;
	right: 0px;
	left: auto;
	margin: 14px 8px 0px 0px;
	border-top: 4px solid #666;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.sd-select .valueNode:not(:empty) {
    background-color: #FFF;
}
.sd-select .placeholder {
    position: absolute;
    padding-left: 5px;
    color: #aaa;
}

.sd-select .sd-row,
.sd-select .sd-description.sd-row.more-button {
	padding: 4px;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	border-style: none;
	border-bottom-style: solid;
	float: left;
	min-height: 41px;
}

.sd-select .sd-row:hover{
 	background-color: rgba(210, 210, 210, 0.2);
}

.sd-select.multiselect .sd-row.checked {
	display: none;
}

.sd-input::after,
.sd-select::after,
.sd-checkbox.simple::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 10%;
	left: 0px;
	top: 29px;
}

.sd-select::after{
	top: -19px;
	position: relative;
	width: 100%;
	display: inline-block;
}

.sd-checkbox::after {
	width: 2em;
}

.sd-select .sd-tag{
	width: auto;
	max-width: 100%;
	margin-left: 4px;
	display: inline-block;
	border: 1px solid #aaa;
	border-radius: 4px;
	padding: 0px 20px 2px 6px;
	background: #bbb;
	line-height: 1.3em;
	color: #fff;
	overflow: hidden;
	text-overflow:ellipsis;
	position: relative;
}
.sd-select .sd-tag .sd-description{
	width: 50%;
	display: inline-block;
	padding-top: 4px;
	line-height: 1.2em;
	color: #fff;
	overflow: hidden;
	text-overflow:ellipsis;
}
/**
 * Multi select using layout
 */
.sd-select.multiselect.layout .sd-tag{
	width: auto;
	max-width: 100%;
}
.sd-select.multiselect.layout .sd-tag .sd-description{
	width: auto !important;
	margin-right: 6px;
}

.sd-select .sd-tag .sd-button{
	height: 16px;
	width: 16px;
	padding: 3px;
	/* margin-left: 4px; */
	display: inline-block;
	margin-bottom: 0;
	position: absolute;
	top: 2px;
	left: auto;
	right: 0px;
}
.sd-textarea.sd-input::after{
	content: '';
	border: none;
}

.sd-input input,
.sd-select input,
.sd-input .multicol,
.sd-select .multicol {
	padding: 0 0.3em;
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	border: none;
	top: 0;
	left: 0;
	margin: 0;
	line-height: 32px;
	color: #212121;
	background-color: transparent;
	border-radius: 2px;
	z-index: 1;
}
.sd-input .multicol,
.sd-select .multicol {
	min-height: 2em;
	border: none;
	top: 0.1em;
}
.sd-input .outerNode,
.sd-select .outerNode {
	width: 100%;
	background: #ddd;
	height: auto;
	top: 35px;
	left: 0em;
	position: absolute;
	/* border-bottom: 0; */
	z-index: 3;
	margin-bottom: 100px;
	display: inline-block;
}
.sd-input .outerNode .title {
	width: 100%;
}

.sd-select .outerNode div:last-child {
	border-bottom: none;
	margin-bottom: -1px;
}
input[type="color"] {
    height: 40px;
    width: calc(100% + 4px);
    left: -6px;
    top: -9px;
}

input[type=file]:after {
	content: ' ';
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	display: inline-block;
	position: absolute;
	border: 1px solid #E2601F;
}

.sd-input .file-name{
	margin-left:4px;
	width: calc(100% - 4px);
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
}

.sd-input .sd-button{
    float: right;
    height: 19px;
    width: 19px;
    right: -4px;
    left: auto;
    z-index: 1;
}
.sd-input .sd-controlgroup{
	float: right;
}

.sd-input .sd-controlgroup .sd-button{
    float: left;
}

.sd-input .sd-button{
    float: right;
    height: 19px;
    width: 19px;
    right: -4px;
    left: auto;
    z-index: 1;
}
.sd-input .datepicker{
	/* height: auto; */
	/* display: inline-block; */
	position: absolute;
	width: 100%;
	top: 2em;
	background: #fff;
	z-index: 3;
	border: 1px solid #ddd;
	border-radius: 0;
	text-align: center;
}
.sd-input .datepicker .sd-calendar.month .calendar-header{
	position: relative;
	top: 0;
	line-height: 1em;
	float: left;
	border-radius: 0;
}
.sd-input .datepicker .sd-calendar{
	margin-top: 0;
	float: left;
	border-bottom: none;
	border-radius: 0;
}
.sd-input .datepicker .datepicker-header{
	width: 100%;
	height: 34px;
	border-bottom: 1px solid #ddd;
	border-radius: 0;
}
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-left,
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-right{
	position: absolute;
	/*width: 20px;*/
	/*height: 20px;*/
	width: 33px;
	height: 33px;
	right: 0;
	left: auto;
	padding: 8px 4px;
	border-radius: 0;
	background-color: transparent;
}
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-left svg,
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-right svg {
    width: 20px;
    height: 20px;
}
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-left:hover,
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-right:hover {
	background: none;
}
.sd-input .datepicker .datepicker-header .sd-button.sd-icon-left{
	left: 0;
}
.sd-input .datepicker .datepicker-header .sd-description{
	width: 100%;
	height: 33px;
	text-align: center;
	color: #676767;
}
.sd-input .datepicker .sd-calendar .sd-calendartimeelement,
.sd-input .datepicker .sd-calendar .calendar-row,
.sd-input .datepicker .sd-calendar .calendar-block{
	height: 30px;
	box-sizing: border-box;
}
.sd-input .datepicker .sd-calendar .sd-calendartimeelement.calendar-header-element,
.sd-input .datepicker .sd-calendar .calendar-row{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	/* text-overflow: ellipsis; */
}
.sd-input .datepicker .sd-calendar .sd-calendartimeelement.calendar-header-element:before{
	width: 0;
	height: 0;
}
.sd-input .datepicker .sd-calendar .calendar-block{
	padding: 2px;
	width: calc(100% / 8);
}
.sd-calendartimeelement.calendar-block:not(.cur-month){
	background-color: rgba(200,200,200, 0.5);
}
.sd-calendartimeelement.calendar-block.today{
	background-color: #ffb34061;
}
/***********************************************************************************************
 * Description widget
 **********************************************************************************************/
.sd-description{
	margin: 0;
	/* text-align: center; */
	float: left;
	width: calc(100% - 4px);
	line-height: 2em;
}
/***********************************************************************************************
 * Icon definitions
 **********************************************************************************************/
.sd-icon {
	width: 32px;
	height: 32px;
}
/**********************************************************************************************
 * Effects
 *********************************************************************************************/
.sd-button:hover,
input:hover,
input:focus,
.sd-select:focus,
.sd-toggle:focus,
.sd-form:focus {
	outline: 0;
}

.sd-button .sd-icon:hover,
.sd-button.sd-icon:hover {
	/*
	-webkit-animation: spin 0.5s linear;
	-moz-animation: spin 0.5s linear;
	animation: spin 0.5s linear;
	*/
}
.sd-animate200 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}
.sd-animate1000 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition: 1s ease;
	transition: 1s ease;
}

@-webkit-keyframes sd-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.sd-pulse {
/*   display: inline-block; */
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.sd-pulse {
  -webkit-animation-name: sd-pulse;
  animation-name: sd-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


.sd-animation-reset{
	-webkit-transform: none; /* Safari and Chrome */
	   -moz-transform: none; /* Firefox */
		-ms-transform: none; /* IE 9 */
		 -o-transform: none; /* Opera */
			transform: none;
}

.sd-opacity {
    opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}
/**********************************************************************************************
 * Fieldset definitions
 *********************************************************************************************/
fieldset {
	border: none;
	outline: 0;
	width: 93%;
	position: relative;
	line-height: 32px;
}
fieldset label {
	width: 40%;
	text-align: left;
	float: left;
	/* margin-top: 4px; */
}
fieldset label.labelExt::after {
	content: ' ';
	margin: 0.5%;
}

fieldset label.required.labelExt::after,
.sd-description.required.labelExt::after {
	content: ' *';
}

fieldset .sd-list,
fieldset .sd-input,
fieldset .sd-rating,
fieldset .sd-select,
fieldset .sd-scribble,
fieldset .sd-textarea,
fieldset .sd-checkbox:not(.simple),
fieldset .sd-description:not(.half):not(.third) {
	float: left;
	width: 60%;
	/* margin-top: -2px; */
}
fieldset .sd-checkbox:not(.simple){
	margin: 0;
}

/** correct descriptions within select value nodes */
fieldset .sd-select:not(.multiselect) .valueNode .sd-description{
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 2.2em;
}
fieldset .sd-barrow {
	width: calc(60% - 2px);
}

fieldset .sd-toggle{
	float: left;
}
.no-filedset-y-padding fieldset{
	padding: 0;
}
.form-widget-wrapper label{
	width: 98%;
	display: inline-block;
	margin: 0px 1% 20px 1%;
}


@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
/******************************************************************************************
 * Form definitions
 *****************************************************************************************/
.sd-form {
	width: 100%;
	margin: 0%;
}

/******************************************************************************************
 * List definitions
******************************************************************************************/

.sd-row {
	cursor: pointer;
	padding-left: 4px;
	width: calc(100% - 4px);
	display: inline-block;
	border-left: none;
	border-right: none;
}
.sd-row .sd-description{
	line-height: 30px;
	margin-bottom: 0;
}
/******************************************************************************************
 * Toggle definitions
 *****************************************************************************************/
.sd-toggle {
	text-align: center;
	cursor: pointer;
	/* line-height: 2.5em; */
	margin-top: -6px;
	border-top-style: solid;
	border-top-width: 1px;
	height: 2.2em;
}
.sd-toggle .on,
.sd-toggle .off,
.sd-toggle .toggle {
	z-index: 0;
	float: left;
	min-width: 50px;
	height: 2.2em;
	line-height: 2.1em;
}
.sd-toggle .on {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.sd-toggle .off {
	border-top-right-radius: 0.2em;
	border-bottom-right-radius: 0.2em;
}
.sd-toggle .toggle {
	z-index: 1;
	height: 2.2em;
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-top: none;
	border-bottom: none;
	border-left-style: none;
	left: 50%;
	float: none;
	top: 0;
	width: 50%;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.sd-toggle .toggle.left {
	left: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 0;
}
/******************************************************************************************
 * Checkbox definitions
 *****************************************************************************************/
.sd-checkbox {
	margin: 0px 0 0 12px;
	display: inline-block;
	/*	width: 98%;*/
	cursor: pointer;
	position: relative;
	z-index: 0;
	height: auto;
}
.sd-checkbox.simple {
	border: none;
}
.sd-checkbox.simple .checkbox {
	border: 0.1em solid #dddddd;
}
.sd-checkbox.simple .checkbox:first-child {
	border-top: 0.1em solid #dddddd;
}
.sd-checkbox.simple {
	width: 40px;
	margin-left: 0;
	min-height: 2em;
	float: left;
	/* border-top: 0.1em solid #dddddd; */
	background: none;
	border-radius: 0;
	text-align: center;
	margin-top: -0.1em;
}
.sd-checkbox .checkbox:first-child {
	margin-top: 0;
	border-top: none;
}
.sd-checkbox .checkbox.checked::before {
	content: " ";
	width: 2em;
	height: 2em;
	position: relative;
	display: inline-block;
	background-position: -163px -201px;
}
.sd-checkbox .title {
	width: calc(83.8%);
	padding-left: 1%;
	display: inline-block;
	border-left: 0.1em solid #dddddd;
	border-bottom: 0.1em solid #dddddd;
	line-height: 2em;
	min-height: 2em;
	float: left;
}
.sd-checkbox .title:last-child {
	border-bottom: none;
}
.sd-checkbox:not(.simple) .sd-row {
	display: inline-block;
	vertical-align: bottom;
}
.sd-checkbox:not(.simple) .sd-row .sd-checkbox.simple{
    float: left;
    margin: 0px 8px 0px 0px;
    height: 100%;
}
.sd-checkbox:not(.simple) .sd-row .sd-description{
    float: left;
    text-align: left;
    width: calc(100% - 62px);
}
.sd-checkbox:not(.simple) {
	width: 96%;
}
fieldset .sd-checkbox:not(.simple) {
	margin: 0;
}
/******************************************************************************************
 * Panel definitions
******************************************************************************************/
.sd-panel {
	min-height: 8em;
}
.sd-panel-bar {
	width: 100%;
	position: fixed;
	text-align:left;
	z-index: 4;
	top: 0;
	min-height: 6em;
	box-shadow: 1px 3px 10px #ccc;
	box-sizing: border-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	display: flex;
}

.sd-panel-title {
	font-size: 1.3em;
	line-height: 1.6em;
	margin: 1em 0;
	position: absolute;
	left: 80px;
}

.sd-panel-bar .sd-button {
	/* color: #fff; */
	margin: 16px 16px;
	z-index: 5;
}

.sd-panel-bar .sd-controlgroup .sd-button {
	margin: 0;
}
.sd-button-square.sd-icon-back{
	margin-top: 20px
}
.sd-panel .sd-icon.sd-button-circle{
	position: fixed;
	right: 1%;
}

.sd-panel .sd-saved {
	width: 200px;
	position: fixed;
	left: 30%;
	background-color: #74DE6E;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: #fff;
	padding: 0 12px;
}
/******************************************************************************************
 * Slide and slideshow related definitions
******************************************************************************************/
.sd-display,
.sd-slideshow {
	height: calc(100% - 5px);
	overflow-x: hidden;
	width: 100%;
	display: inline-block;
}

.sd-display .display-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 9999;
	top: 0;
	left: 0;
}
/*
.sd-slideshow {
	overflow: hidden;
	width: 100%;
	position: absolute;
	height: 100%;
	display:;
	top: 0;
	left: 0;
}
*/
.sd-slide,
.sd-dsppage,
.sd-dsppage .sd-description ,
.sd-dsppage .sd-form .sd-description ,
.sd-dsppage .sd-row .sd-description {
	line-height: 1.2em;
}

.sd-dsppage .slide-time,
.sd-dsppage .slide-date {
    width:auto;
    left: auto;
    right: 1vw;
    height: 2em;
	line-height: 2em;
    position: absolute;
}
.sd-description.template-header {
	width: 100%;
	margin-top: 0.8em;
	font-size: larger;
	text-align: center;
}
.sd-rotate-90  .sd-description.template-header,
.sd-rotate-270 .sd-description.template-header{
	margin-top: 1.8em;
	position: relative;
}

.sd-dsppage .slide-date {
    right: auto;
    left: 0.3em;

}
.sd-slide,
.sd-dsppage {
	float: left;
	height: 100vh;
	width: 100vw;
	font-size: 3vw;
	z-index: 1;
	position: relative;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	/* 	background-color: #fff; */
	overflow: hidden;
}
.sd-dsppage .sd-widget.sd-widget.weather-container-widget,
.sd-dsppage .sd-widget.sd-widget.event-container-widget,
.sd-dsppage .sd-widget.sd-widget.room-widget,
.sd-dsppage .sd-widget.sd-widget.slide-image {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
.sd-rotate-90 .sd-dsppage .sd-widget.weather-container-widget,
.sd-rotate-90 .sd-dsppage .sd-widget.event-container-widget,
.sd-rotate-90 .sd-dsppage .sd-widget.room-widget,
.sd-rotate-90 .sd-dsppage .sd-widget.slide-image,
.sd-rotate-270 .sd-dsppage .sd-widget.weather-container-widget,
.sd-rotate-270 .sd-dsppage .sd-widget.event-container-widget,
.sd-rotate-270 .sd-dsppage .sd-widget.room-widget,
.sd-rotate-270 .sd-dsppage .sd-widget.slide-image {
    width: 100vh;
    height: 100vw;
    border-radius: 0;
}
/*
.sd-slide.top {
	z-index: 2;
}
.sd-slide.zero {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.sd-slide.neg {
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.sd-slide.pos {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}
/**/
/******************************************************************************************
 * Rating definitions
******************************************************************************************/
.sd-rating {
	cursor: pointer;
	margin-top: 0%;
	width: 100%;
	list-style: none;
	display: inline-block;
	padding: 0;
	min-height: 11vw;
	text-align: center;
	position: relative;
}

.sd-ratingelement{
	float: none;
	/* width: 18%; */
	position: relative;
	margin: 0px 0.3vw 0 0;
	text-align: center;
	left: 0px;
	/* width: auto; */
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
.sd-rating.sd-rating-rcount-2 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-3 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-5 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-6 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-7 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-8 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-9 .sd-ratingelement:first-child,
.sd-rating.sd-rating-rcount-10 .sd-ratingelement:first-child ,
.sd-rating.sd-rating-rcount-11 .sd-ratingelement:first-child {
	margin-left: 0;
}
.sd-rating.sd-rating-rcount-2 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-3 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-4 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-5 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-6 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-7 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-8 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-9 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-10 .sd-ratingelement:last-child,
.sd-rating.sd-rating-rcount-11 .sd-ratingelement:last-child {
	margin-right: 0;
}
.sd-rating.sd-rating-rcount-6 .sd-ratingelement {
    margin-left: calc((100% - (6 * 8vw)) / 10);
    margin-right: calc((100% - (6 * 8vw)) / 10);
}
.sd-rating.sd-rating-rcount-7 .sd-ratingelement {
    margin-left: calc((100% - (7 * 7.6vw)) / 12);
    margin-right: calc((100% - (7 * 7.6vw)) / 12);
}
.sd-rating.sd-rating-rcount-8 .sd-ratingelement {
    margin-left: calc((100% - (8 * 6.6vw)) / 14);
    margin-right: calc((100% - (8 * 6.6vw)) / 14);
}
.sd-rating.sd-rating-rcount-9 .sd-ratingelement {
    margin-left: calc((100% - (9 * 5.9vw)) / 16);
    margin-right: calc((100% - (9 * 5.9vw)) / 16);
}
.sd-rating.sd-rating-rcount-10 .sd-ratingelement,
.sd-rating.sd-rating-rcount-11 .sd-ratingelement {
    margin-left: calc((100% - (10 * 5.05vw)) / 18);
	margin-right: calc((100% - (10 * 5.05vw)) / 18);
}

.sd-ratingelement svg{
	border-radius: 50%;
}
.sd-ratingelement.star {
	color: #676767;
}
.sd-rating .sd-widget.rating-footer .left{
	width: auto;
	float: left;
	text-align: left;
	max-width: 50%;
	text-overflow: ellipsis;
	overflow: hidden;
}
.sd-rating .sd-widget.rating-footer .right{
	float: right;
	text-align: right;
	width: auto;
	max-width: 50%;
	text-overflow: ellipsis;
	overflow: hidden;
}
/*
 * Do not use char (ASCII) since tables
 * such as samsung galaxy tab 10
 * convert them into propriatery icons
 */
 /*
.sd-ratingelement.star::before {
	content: "\2606";
	font-size: 9vw;
}

.sd-ratingelement.star.selected::before {
	content: "\2605";
}
 */

.sd-ratingelement svg{
	margin: 0 0;
	height: 9vw;
	width: 9vw;
}
.sd-rating.sd-rating-rcount-6 .sd-ratingelement {
	width: 8vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-6 .sd-ratingelement svg{
	width: 8vw;
}

.sd-rating.sd-rating-rcount-7 .sd-ratingelement {
	width: 7.5vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-7 .sd-ratingelement svg{
	width: 7.5vw;
}
.sd-rating.sd-rating-rcount-8 .sd-ratingelement {
	width: 6.5vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-8 .sd-ratingelement svg{
	width: 6.5vw;
}
.sd-rating.sd-rating-rcount-9 .sd-ratingelement {
	width: 5.8vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-9 .sd-ratingelement svg{
	width: 5.8vw;
}
.sd-rating.sd-rating-rcount-10 .sd-ratingelement {
	width: 5vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-10 .sd-ratingelement svg{
	width: 5vw;
}
.sd-rating.sd-rating-rcount-11 .sd-ratingelement {
	width: 4.45vw;
	height: 9%;
	display: inline-block;
}
.sd-rating.sd-rating-rcount-11 .sd-ratingelement svg{
	width: 4.5vw;
}
.sd-ratingelement.number .value-node{
	position: absolute;
	line-height: 9vw;
	width: 100%;
	text-align: center;
	font-size: 2.5vw;
}
/* .sd-ratingelement.number:after{
	content: '1';
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 9vw;
	font-size: 2vw;
} */
/*
.sd-ratingelement.number.sd-rating-2:after{
	content: '2'
}
.sd-ratingelement.number.sd-rating-3:after{
	content: '3'
}
.sd-ratingelement.number.sd-rating-4:after{
	content: '4'
}
.sd-ratingelement.number.sd-rating-5:after{
	content: '5'
}
.sd-ratingelement.number.sd-rating-6:after{
	content: '6'
}
.sd-ratingelement.number.sd-rating-7:after{
	content: '7'
}
.sd-ratingelement.number.sd-rating-8:after{
	content: '8'
}
.sd-ratingelement.number.sd-rating-9:after{
	content: '9'
}
.sd-ratingelement.number.sd-rating-10:after{
	content: '10'
}
.sd-ratingelement.number.sd-rating-11:after{
	content: '11'
}
*/
.sd-rating.inverted .sd-ratingelement.selected {
    color: white;
}
/******************************************************************************************
 * Chart definitions
******************************************************************************************/
.sd-chart {
	/* width: 97%; */
	color: #fff;
}

.sd-barrow {
	width: 100%;
	height: 30px;
	border:none;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	overflow: hidden;
	box-shadow: 0px 2px 4px #ccc;
	white-space: nowrap;
	border: 1px solid #ddd;
}

.sd-barelement{
	height: 100%;
	display: block;
	float: left;
	-webkit-transition: width 1s;
	transition: width 1s;
	line-height: 2em;
	color: #FFF;
	text-shadow: 0px 1px #000;
	text-align: center;
	overflow: hidden;
}

.sd-barelement {
	height: 32px;
	display: inline-block;
	float: left;
	text-align: center;
	/* cursor: pointer; */
}

.sd-barelement:first-child {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
.sd-barelement:last-child {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.sd-hidden {
	display: none !important;
	visibility: hidden;
}

.sd-disable {
	filter: Alpha(Opacity=60);
	opacity: .6;
	/* pointer-events:none; */
}
.sd-button.sd-disable {
	pointer-events:none;
}

.sd-row,
.sd-toggle .toggle,
.sd-input::after,
.sd-select::after,
.sd-checkbox.simple::after,
.sd-input .outerNode,
.sd-select .outerNode{
	border-color: #aaa;
	padding: 0;
}

/******************************************************************************************
 * Chat styling
 ******************************************************************************************/
.sd-chat {
	background-color: #eee;
	height: 335px;
	padding-top: 3px;
	width: 100%;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	color: rgba(0,0,0,0.87);
	position: relative;
}
.sd-chat .outerNode {
    max-height: 80%;
    overflow-y: auto;
    background-color: #ececec;
	padding-bottom: 12px;
	box-sizing: border-box;
}
.sd-chat .outerNode .sd-row {
    background-color: #FFF;
    width: 96%;
    padding: 4px;
    box-sizing: border-box;
    margin: 4px 0px 0px 4px;
    border-right: 4px solid #777;
}
.sd-chat .outerNode .sd-row.message-incoming {
	border-left: 4px solid #777;
	border-right: none;
}
.sd-chat .sd-chat-input-bar{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #FFF;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid #eee;
}
.sd-chat .sd-chat-input-bar .sd-textarea {
    float: left;
    height: auto;
    width: 90%;
    padding: 4px;
    box-sizing: border-box;
}
.sd-chat .sd-chat-input-bar .sd-textarea textarea {
	border: none;
	max-width: 90%;
}
.sd-chat .sd-chat-input-bar .sd-button {
    position: absolute;
    left: auto;
    left: calc(100% - 50px);
    top: 2px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 0;
    z-index: 999;
}
.sd-chat .sd-chat-input-bar .sd-button svg {
	fill: #555;
	margin: 3px
}
/******************************************************************************************
 * Error definition note!the class has to be at the end of the file
 ******************************************************************************************/
.sd-error:before {
	width: 100%;
	border-radius: 3px;
	content: '';
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color cubic-bezier(0, 1.63, 0.99, -0.07) .15s, box-shadow cubic-bezier(0, 1.13, 1, -0.07) .15s;
	-moz-box-shadow: 0 0 7px #f90000 ;
	-webkit-box-shadow: 0 0 7px #f90000 ;
	box-shadow: 0px 2px 10px #f90000;
	border-style: solid;
	position: absolute;
	height: 30px;
	border: none;
}
.sd-error-msg{
	color: red;
	text-align: center;
	display: inline-block;
}

.sd_pulse.sd-row,
.sd_pulse.sd-toggle .toggle,
.sd-pulse.sd-input:after,
.sd-pulse.sd-select:after,
.sd-checkbox.simple.sd-pulse:after,
/* .sd-pulse.sd-checkbox:after, */
.sd-pulse textarea,
.sd-pulse.sd-input .outerNode,
.sd-pulse.sd-scribble canvas,
.sd-pulse.sd-select:after{
	border-color: red;
}

.sd-grid-cell-20,
.sd-grid-cell-25,
.sd-grid-cell-30,
.sd-grid-cell-33,
.sd-grid-cell-40,
.sd-grid-cell-50,
.sd-grid-cell-60,
.sd-grid-cell-70,
.sd-grid-cell-80,
.half {
	float: left;
	width: 98%;
	margin: 0 1%;
}
.third {
	width: 30%;
	margin: 0 1.5%;
}

/******************************************************************************************
* trial css
*******************************************************************************************/
.sd-trial-widget {
    text-align: center;
    /* clear: both; */
    position: absolute;
    top: 3em;
    width: 100%;
    height: 1.5em;
    display: inline-block;
    margin-left: calc(64px + 1em);
}
.sd-trial-info {
    width: auto;
}
.sd-trial-widget .sd-trial-btn {
    float: left;
    margin: 0 0 0 10px;
    background-color: rgb(255, 16, 16);
}

/******************************************************************************************
 * web widget design configuration
 ******************************************************************************************/
.sd-web-widget {
    /* width: 60%; */
    /* display: inline-table; */
    /* min-height: 60%; */
    /* max-height: 90%; */
    /* left: 20%; */
    /* right: 20%; */
    /* border: 1px solid #ddd; */
    /* border-radius: 2px; */
    /* padding: 20px; */
    /* box-shadow: 0px 0px 40px #bbb; */
    /* position: absolute; */
    /* top:0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* margin: 2% auto; */
    min-width: 500px;
}
.sd-web-widget .sd-page {
	display: inline-table;
	min-height: auto;
}

.sd-web-widget.overlay-fullsize {
    top: 0;
    left: 0;
    position: absolute;
    width: calc(100% - 2px);
    height: 100%;
    padding: 0;
    background-color: #FFF;
}

.sd-web-widget .survey-fullscreen .srv-survey-inset{
	/* padding-top: 0; */
}

.sd-web-widget:not(.overlay-fullsize) label{
	font-size: 14px;
}
.sd-web-widget .sd-rating{
	height: auto;
}
.sd-web-widget:not(.overlay-fullsize) .sd-ratingelement{
	height: 40px;
	width: 40px;
	padding-top: 4px;
}
.sd-web-widget:not(.overlay-fullsize) .sd-ratingelement svg{
	height: 100%;
	width: 100%;
}

.sd-web-widget .sd-panel-bar {
    position: absolute;
    top: 0;
    left: 0;
}

.sd-web-widget .sd-panel .sd-icon.sd-button-circle {
    position: absolute;
}

.sd-display.swiper-container{/* min-height: 720px; */}
.sd-web-widget .swiper-container .swiper-slide {
    width: 80%;
}

/** swiper enhncement - could be useless!!! */
.swiper-wrapper,
.swiper-slide{
    -moz-transform-style: flat;
    -webkit-transform-style: flat;
    -ms-transform-style: flat;
    transform-style: flat;
}
.sd-carousel .swiper-slide{
	margin: 0 0.5em;
}
.sd-dialog .box .sd-button.qrDlBtn,
.sd-button.qrDlBtn {
    float: left;
    margin-left: 3%;
    margin-top: -182px;
    background-color: #2B9373;
    margin-bottom: 20px;
    color: #FFF;
}

/******************************************************************************************
 * calendar widget
 ******************************************************************************************/
.sd-calendar {
	/* min-height: 100%; */
	width: 100%;
	display: inline-block;
	background-color: #E4EEFF;
	position: relative;
	margin-top: 0px;
}

/*calendar header*/
.sd-widget.calendar-header{
    width: 100%;
    text-align: center;
    /*     position: fixed; */
    background-color: #F0F8FF;
    /* border-bottom: 1px solid #3f99d5; */
    display: none;
    border-radius: 0;
    line-height: 2.5em;
    z-index: 2;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.sd-calendar.week .sd-widget.calendar-header,
.sd-calendar.month .sd-widget.calendar-header{
	display: inline-flex;
}
.sd-calendartimeelement.calendar-header-element{
    display: inline-block;
    width: calc((100% - 68px) / 7);
    border-bottom: 0;
    border-bottom: 1px solid #3f99d5;
    border-top: none;
    height: auto;
    line-height: 1.2rem;
    min-height: 30px;
}
.sd-calendar.week .sd-calendartimeelement.calendar-header-element:first-child{
	/* margin-left: 68px; */
	width: calc(((100% - 68px) / 7));
	padding-left: 68px;
}
.sd-calendar.month .sd-calendartimeelement.calendar-header-element:first-child{
	margin-left: calc(100% / 8);
}

.sd-calendar.day,
.sd-calendar.week{
	/* height: 4512px; */
}

.sd-calendar.week,
.sd-calendar.month{
	/* margin-bottom: -5px; */
	margin-top: 0px;
}
.sd-widget.calendar-header .sd-calendartimeelement.calendar-header-element:before{
    border: none;
}
/*specific css for week header*/
.sd-calendar.week .sd-widget.calendar-header{
    position: relative;
    width: 100%;
    padding-left: 0;
}
/*specific css for month header*/
.sd-calendar.month .sd-widget.calendar-header{
    width: calc(100% / 7 * 7);
    /* padding-left: calc(100% / 8); */
}

/*general design*/
.sd-calendartimeelement{
	cursor: pointer;
	height: 30px;
	/* reduce width using padding*/
	width: calc(100% - 16px);
	padding: 8px;
	border-top: 1px dotted #888;
	border-radius: 0;
}
.sd-calendar.month .sd-calendartimeelement:not(.calendar-header-element) {
	border-top: none;
}
.sd-calendartimeelement:before,
.sd-widget.dayRow.first .sd-calendartimeelement:before{
    content: ' ';
    position: absolute;
    height: 48px;
    width: 56px;
    margin-top: -8px;
    border-right: 3px double #FAD163;
}
.sd-calendartimeelement:first-child{
	border-top: none;
}
/* .sd-calendartimeelement.calendar-single-day:nth-child(4n + 1){
	border-bottom-style: solid;
}
.sd-calendartimeelement.calendar-week-day:nth-child(4n){
	border-bottom-style: solid;
} */
.sd-calendartimeelement.calendar-single-day.hour-part-element,
.sd-calendartimeelement.calendar-week-day.hour-part-element{
	border-top: 1px solid #aaa;
}
.sd-calendartimeelement.calendar-single-day.hour-part-first-element,
.sd-calendartimeelement.calendar-week-day.hour-part-first-element{
	border-top:none;
}
.sd-calendartimeelement.calendar-week-day.time{
	width: calc((100% - 68px) / 7 - 1px);
}

/*new design for week*/
.sd-widget.dayRow{
    width: calc((100% - 68px) / 7 - 1px);
    float: left;
    border-right: 1px dotted #000;
    /* margin-top: 48px; */
    border-radius: 0;
}
.sd-widget.dayRow.first {
	width: calc((100% - 68px) / 7 + 67px);
}
.sd-widget.dayRow.first .sd-calendartimeelement.calendar-week-day.time{
	width: calc(100% - 16px);
}
.sd-widget.dayRow:last-child{
	border-right: none;
}
.sd-calendartimeelement.calendar-week-day:before{
    border-right: none;
}

/*new design for month*/
.sd-widget.calendar-row.first{
    /* margin-top: 46px; */
    /* border-top: 1px solid #ddd; */
}
.sd-widget.calendar-row {
	border-bottom:1px solid #ddd;
	border-radius: 0;
	height: 140px;
}
.sd-widget.calendar-row:last-child {
	border-bottom: none;
}
.sd-calendar .calendar-block{
    height: 140px;
    padding: 8px;
    display: inline-block;
    width: calc((100% / 8) - 17px);
    border-right: 1px dotted #888;
    border-radius: 0;
    box-sizing: border-box;
}
/*.sd-widget.calendar-block{
    display: inline-block;
    margin-right: 3%;
}*/
.sd-calendar .calendar-block{
    /*width: calc(100% / 8 - 16px);*/
    /*display: inline-block;*/
    height: 140px;
    float: left;
}
.sd-calendartimeelement.calendar-block:last-child{
	border-right: none;
}
.sd-calendartimeelement.calendar-block:before{
    content: none;
}

.sd-calendar .calendar-block:not(.sd-calendartimeelement) {
    border-right: 1px solid #3f99d5;
    background-color: #F0F8FF;
    box-sizing: border-box;
}
.sd-calendarevent {
	background-color: #fff;
	position: absolute;
	border: 1px solid #ddd;
	padding: 4px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	box-sizing: border-box;
	color:  #fff;
}
.sd-calendarevent p{
	text-overflow: ellipsis;
	color: #fff;
}

/******************************************************************************************
 * Resposive desing settings
 ******************************************************************************************/
@media all and (max-width:600px){
    .sd-dialog .box .sd-button.qrDlBtn,
    .sd-button.qrDlBtn {
        float: left;
        margin: 0 0 0 40%;
    }
	.sd-web-widget {
		top: 0;
		left: 0;
		position: absolute;
		width: 97%;
		height: 100%;
		padding: 0;
		background-color: #FFF;
		margin: 0;
		box-shadow: none;
		border: none;
		min-width: auto;
	}
	.sd-web-widget .sd-button.sd-button-circle {
		display: none;
	}
	.sd-web-widget .srv-survey_headline {
		line-height: 35px
	}
}
@media all and (max-width:1199px){
	.page-centered {
		background-color: #fff;
	}
	.page-center-form {
		border: none;
		border-radius: 0;
		/* min-height: 84vh; */
		box-shadow: none;
		/* padding: 0; */
	}

}
@media all and (max-width:360px){
    .sd-trial-widget {
        text-align: center;
        position: absolute;
        top: 3em;
        width: 100%;
        height: 1.5em;
        display: inline-block;
        margin-left: 32px;
    }
}
@media all and (max-width:479px){

	fieldset label,
	fieldset .sd-list,
	fieldset .sd-barrow,
	fieldset .sd-rating,
	fieldset .sd-select,
	fieldset .sd-textarea,
	fieldset .sd-scribble,
	fieldset .sd-checkbox,
	fieldset .sd-checkbox:not(.simple),
	fieldset .sd-description:not(.half):not(.third){
	  width: 97%;
	  text-align: left;
	}
	fieldset label {
		margin-bottom: 7%;
	}
	fieldset .sd-input{
		width: 97%;
	}
	fieldset .sd-toggle{
		float:left;
	}
	fieldset .sd-rating {
		text-align: center;
		letter-spacing: -4px;
	}
	.sd-ratingelement{
		margin: 0 0.5vw 0 0;
	}
	.sd-ratingelement.number:after{
		line-height: 14vw;
		font-size: 4vw;
		letter-spacing: 0vw;
	}
	.sd-ratingelement svg{
		height: 14vw;
		width: 14vw
	}
	.sd-ratingelement.number .value-node{
		line-height: 8vw;
		margin-left: -0.5vw
	}
	.sd-rating.sd-rating-rcount-2 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-3 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-4 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-5 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-6 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-7 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-8 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-9 .sd-ratingelement.number .value-node,
	.sd-rating.sd-rating-rcount-10 .sd-ratingelement.number .value-node{
		line-height: 14vw;
	}
    .sd-rating.sd-rating-rcount-5 .sd-ratingelement {
        margin-left: calc((100% - (5 * 14vw)) / 8);
        margin-right: calc((100% - (5 * 14.4vw)) / 8);
    }
    .sd-rating.sd-rating-rcount-10 .sd-ratingelement svg {
        width: 8vw;
        height: 14vw;
    }
    .sd-rating.sd-rating-rcount-10 .sd-ratingelement svg {
        margin-left: calc((100% - (5 * 8vw)) / 18);
    	margin-right: calc((100% - (5 * 8vw)) / 18);
    }
    .sd-rating.sd-rating-rcount-10 .sd-ratingelement.number:after {
        line-height: 8vw;
    }
	.sd-rating.sd-rating-rcount-11 .sd-ratingelement{
        width: 7.5vw;
        height: 7.5vw;
	}
    .sd-rating.sd-rating-rcount-11 .sd-ratingelement.number:after {
        line-height: 7.5vw;
    }
    .sd-rating.sd-rating-rcount-11 .sd-ratingelement svg {
        width: 7.5vw;
        height: 7.5vw;
    }

    .sd-rating.sd-rating-rcount-11 .sd-ratingelement{
        margin-left: calc((100% - (11 * 7.5vw)) / 20);
    	margin-right: calc((100% - (11 * 7.5vw)) / 20);
    }
    .sd-dialog .box .sd-button.qrDlBtn,
    .sd-button.qrDlBtn {
        float: left;
        margin: 0 0 0 4%;
    }
}

/** media queries and their meaning
 * @media (min-width:320px)  // smartphones, iPhone, portrait 480x320 phones
 * @media (min-width:481px)  // portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.
 * @media (min-width:641px)  // portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
 * @media (min-width:961px)  // tablet, landscape iPad, lo-res laptops ands desktops
 * @media (min-width:1025px) // big landscape tablets, laptops, and desktops
 * @media (min-width:1281px) // hi-res laptops and desktops
 *
 * In practice, many designers convert pixels to ems, largely b/c ems better afford zooming.
 * At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.
 *
 * Ressources:
 * https://github.com/scottjehl/Respond/issues/18
 * https://gist.github.com/chrisjlee/5832418
 */



@media all and (max-width:375px){
	.sd-inset{
		padding: 0;
	}
}

@media all and (min-width:800px) {
    .sd-grid-cell-25,
    .sd-grid-cell-30,
	.sd-grid-cell-33,
    .sd-grid-cell-40,
    .sd-grid-cell-50,
    .sd-grid-cell-60,
    .sd-grid-cell-70,
    .sd-grid-cell-80{
        width: 48%;
    }
}
@media all and (min-width: 1024px) {
    .sd-grid-cell-30,
    .sd-grid-cell-25 {
    	width: 28%;
    }
	.sd-grid-cell-33 {
		width: 33.3%;
	}
	.sd-grid-cell-40{
        width: 38%;
    }
    .sd-grid-cell-50{
    	width: 48%;
    }
    .sd-grid-cell-60{
        width: 58%;
    }
    .sd-grid-cell-70{
    	width: 68%;
    }
    .sd-grid-cell-80{
    	width: 78%;
    }
}
@media all and (min-width: 1280px) {
    .sd-grid-cell-25{
        width: 23%;
    }
}

/* @media only screen and (min-width: 80em ) { */
@media only screen and (min-width: 60em) {
	.tablet-mode .sidebar-hide-icon{
		display: none;
	}
	.tablet-mode .sd-sidebar {
		display: block !important;
		visibility: visible;
	}
	.tablet-mode .sd-page:not(.login-page) {
		width: calc(100% - 130px);
		margin-left: 130px;
	}
	.tablet-mode .sd-button.menuBtn.sd-sidebar-icon
	/*.tablet-mode .sd-page.sd-visible:not(.survey-fullscreen) .back-button */
	{
		display: none;
	}
	.tablet-mode .sd-panel-title {
		width: calc(100% - 130px);
    	text-align: center;
		left: 0;
   	}
	.sd-page.survey-page.survey-fullscreen.sd-visible{
		width: 100%;
		margin-left: 0;
		z-index:9999;
		position:absolute;
		height: 100%;
		background-color:#fff;
		top:0;
	}
}