@font-face {
  font-family: 'icomoon';
  src: url('font/icomoon.eot?gpabnl');
  src: url('font/icomoon.eot?gpabnl#iefix') format('embedded-opentype'),
       url('font/icomoon.ttf?gpabnl') format('truetype'),
       url('font/icomoon.woff?gpabnl') format('woff'),
       url('font/icomoon.svg?gpabnl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

html,body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: 'Roboto', sans-serif;
    font-size:14px;
}

input,select,textarea,a {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ol {
    padding-left:20px;
}

ol ol {
    padding-left:30px;
}

ul.pagination {
    font-size:12px;
    color:#959595;
    padding:0 0 0 0;
    display:block;
    text-align:center;
}

h2{

}
h2 small{
    font-size: 14px;
    color: #666;
}

ul.pagination li {
    padding:8px;
    display:inline;
}


a {
    color:#00acd3;
    text-decoration:none;
    cursor:pointer;
}

a.inactive {

}

a:hover {
    text-decoration:underline;
}

a div {
    color:#000000 ;
}

.icon:before {
  font-family: 'icomoon';
  font-weight: normal;
}

._icon:after {
  font-family: 'icomoon';
  font-weight: normal;
}

.icon.nav {
    font-size:60px;
    margin-right:0;
    font-weight:normal;
    color: #000000;
}

.active .icon.nav {
    color:#00acd3;
}

.icon-add-file:before {
    content: "\e95d";   /*add*/
}

.icon-arrow_down:before {
    content: "\e96f";
}

.icon-arrow_left:before {
    content: "\e95e";
}

.icon-arrow_right:before {
    content: "\e95f";
}

.icon-assign:before {
    content: "\e960";
}

.icon-surveys:before {
    content: "\e971";  /*auftraege*/
}

.icon-check:before {
    content: "\e966"; /*checked*/
}

.icon-cross:before {
    content: "\e969";  /*close*/
}

.icon-download:before {
    content: "\e962";
}

.icon-edit:before {
    content: "\e961";
}

.icon-hint:before {
    color: #ffb10d;
    content: "\e970";
}

.icon-home:before {
    content: "\e96e";
}

.icon-horizontal:before {
    content: "\e968";
}

._icon-horizontal:after {
    content: "\e968";
}

.icon-login:before {
    content: "\e965";
}

.icon-protocols:before {
    content: "\e96d";
}

.icon-question:before {
    content: "\e96c";
}

.icon-reset:before {
    content: "\e964";
}

.icon-show:before {
    content: "\e936";
}

.icon-trash:before {
    content: "\e96a";
}

.icon-vertical:before {
    content: "\e967";
}

._icon-vertical:after {
    content: "\e967";
}


.icon-zoom:before {
    content: "\e96b";
}

.icon-plus:before {
    content: "\e95c";
}

.icon-minus:before {
    content: "\e95b";
}

.icon-error:before {
    content: "\e959";
}

.icon-checked_circle:before {
    content: "\e95a";
}

.icon-direction_right:before {
    content: "\e954";
}

.icon-direction_left:before {
    content: "\e955";
}

.icon-direction_down:before {
    content: "\e956";
}

.icon-direction_up:before {
    content: "\e957";
}

._icon-direction_right:after {
    content: "\e954";
}

._icon-direction_left:after {
    content: "\e955";
}

._icon-direction_down:after {
    content: "\e956";
}

._icon-direction_up:after {
    content: "\e957";
}

.icon-arrow_up:before {
    content: "\e958";
}

.icon-upload:before {
    content: "\e953";
}

.icon-save:before {
    content: "\e972";
}

span.inactive-link {
    color:#787878;
}

form.search {
    float:left;
}

form.search label,
label.search {
    color: #959595;
    display:block;
    float:left;
    line-height:32px;
    margin-right:10px;
    font-size:12px;
}

form.search label.sort {
}

form.search input.text,
form.search select {
    margin: 0;
    float:left;
}

 div.icon.button {
    line-height:30px;
    font-size:14px;
    height:30px;
    color:#787878;
    border-top:1px solid #e2e2e2;
    border-right:1px solid #e2e2e2;
    border-bottom:1px solid #e2e2e2;
    width:32px;
    float:left;
    text-align:center;
    background: linear-gradient(#fafafa, #f1f1f1);
    cursor:pointer;
}

select div.icon-arrow-down
{
    position:absolute;
    width:32px;
    height:32px;
    right:0px;
    top:0px;
}

select option{
    padding:5px;
}

select::-ms-expand {
    display: none;
}

select {
    text-indent:1px;
    font-size:12px;
    height:32px;
    color:#000000;
    border:1px solid #e2e2e2;
    /*width:100%;*/

    background-color: white;
    display: inline-block;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;

    background-image:
        linear-gradient(to right, #e2e2e2, #e2e2e2),
        linear-gradient(45deg, transparent 50%, #787878 50%),
        linear-gradient(135deg, #787878 50%, transparent 50%),
        linear-gradient(#fafafa, #f1f1f1)
        ;
    background-position:
        calc(100% - 32px) 0px,
        calc(100% - 15px) 15px,
        calc(100% - 11px) 15px,
        right
        ;
    background-size:
        1px 32px,
        5px 5px,
        5px 5px,
        32px 32px
        ;
    background-repeat: no-repeat;
}

select:focus {
	border:1px solid #00acd3;
}

select.hint {
    border:1px solid #ffb10d;
}

select>option {
}

select>option:hover {
	color:#ffffff;
	font-weight:bold;
}

a.button{
    padding: 0 0 0 0;
    display:block;
    border-radius:4px;
    line-height:38px;
    width:200px;
    border:1px solid #009ad0;
    color: #fff;
    font-weight:bold;
    background: linear-gradient(#00acd3, #0099d2);
    box-shadow: 0 0 1px 0 #0077d2;
    text-align:center;
    font-size:14px;
    text-decoration:none;
}

a.button:hover{
    background: linear-gradient(#00a0ce, #0083ba);
    box-shadow: 0 0 1px 0 #195893;
}

label.button {
    padding: 0 0 0 0 !important;;
    display:block;
    border-radius:4px;
    line-height:38px;
    width:200px;
    border:1px solid #009ad0;
    color: #fff !important;
    font-weight:bold;
    background: linear-gradient(#00acd3, #0099d2);
    box-shadow: 0 0 1px 0 #0077d2;
    text-align:center !important;;
    font-size:14px;
    text-decoration:none;
    cursor: pointer;
}

label.button {
    background: linear-gradient(#00a0ce, #0083ba);
    box-shadow: 0 0 1px 0 #195893;
}

input.button, button.button  {
    padding:0 0 0 0;
    border-radius:4px;
    line-height:36px;
    width:200px;
    font-size:14px;
    font-family: inherit;
    border:1px solid #009ad0;
    color: #fff;
    font-weight:bold;
    background: linear-gradient(#00acd3, #0099d2);
    box-shadow: 0 0 1px 0 #0077d2;
    cursor: pointer;
}

input.button:disabled, button.button:disabled {
    border: 1px solid #9a9a9a;
    background: linear-gradient(#c3c2c2, #969696);
}

.button.small{
    font-size: 12px;
    line-height:30px;
}

button.icon{
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}

button.icon.active {
    color: #00acd3;
}

input.button:hover {
    background: linear-gradient(#00a0ce, #0083ba);
    /*box-shadow: 0 0 1px 0 #195893; */
}

input.text.hint {
    border:1px solid #ffb10d;
}


div.button {
    width:190px;
    /*font-weight:bold;*/
}

.button.square {
    font-family:'icomoon';
    font-weight:normal;
    height:32px;
    width:32px;
    line-height:30px;
    font-size:16px;
}

.button.secondary {
    width:190px;
    box-shadow:none;
    border-radius:0;
    font-size:14px;
    line-height:30px;
    height:32px;
    color:#787878;
    border:1px solid #e2e2e2;
    background: linear-gradient(#fafafa, #f1f1f1);
    text-align:center;
}

.button.secondary:hover {
    background: linear-gradient(#f9f9f9, #e9e9e9);
}

.button.tertiary {
    width:200px;
    box-shadow:none;
    border-radius:4px;
    font-size:14px;
    line-height:30px;
    height:32px;
    color:#ffffff;
    border:1px solid #000000;
    background: linear-gradient(#474747, #2b2b2b);
    text-align:center;
}

.button.tertiary .icon {
    color:#ffffff;
}

.button.tertiary:hover {
    background: linear-gradient(#2b2b2b, #000000);
}

.button.inactive {
    color:#aaaaaa;
    pointer-events:none;
}

div.button.secondary {
    height:30px;
}

div.italic {
    font-style: italic;
}

textarea {
    font-family:"Roboto",sans-serif;
    font-size:12px;
    padding:0 0 0 3px;
    color:#000000;
    font-weight:normal;
    border:1px solid #e2e2e2;
    /*width:100%;*/
    height:100px;
}

textarea:focus {
    border:1px solid #00acd3;
}

input.text {
    padding:0 0 0 0;
    font-size:12px;
    text-indent:6px;
	line-height:32px;
	color:#000000;
	border:1px solid #e2e2e2;
	/*width:100%;*/
	height:32px;
}

input.text:focus,
input.text.active {
	border:1px solid #00acd3;
}

input.text:disabled {
    background: #e2e2e2;
    border: 1px solid #d2d2d2;
}

input.text::input-placeholder {
	color:#e2e2e2;
}

form.ng-submitted input.text.ng-invalid {
    border:1px solid #ff4040;
}



/**************************************/

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  display   : none;
  width     : 12px;
  margin    : 0;
  padding   : 0;
  font-size : 10px;
  opacity   : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : 0;


}

input[type=checkbox]:not(old) + label > span{
  display          : inline-block;
  width            : 12px;
  height           : 12px;
  margin           : 8px 10px 0 0;
  border           : 1px solid #e2e2e2;
  border-radius    : 0;
  vertical-align   : bottom;
  background-image  : linear-gradient( #fafafa, #f1f1f1);
}

input.hint[type=checkbox]:not(old) + label > span{
  border           : 1px solid #ffb10d;
}

input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 12px;
  height           : 12px;
  margin           : 8px 10px 0 0;
  border           : 1px solid #e2e2e2;
  border-radius    : 12px;
  vertical-align   : bottom;
  background  : linear-gradient( #fafafa, #f1f1f1);
}

input[type=checkbox]:not(old) + label > span:hover,
input[type=radio   ]:not(old) + label > span:hover{
  border           : 1px solid #00acd3;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{

}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 12px;
  color       : #00acd3;
  font-size   : 10px;
  line-height : 12px;
  text-align  : center;
  font-weight : 900;
}
input[type=checkbox]:not(old):checked:disabled + label > span:before {
    color: #9a9a9a;
}
input[type=checkbox]:not(old):disabled + label > span:hover,
input[type=radio]:not(old):disabled + label > span:hover{
    border: 1px solid #e2e2e2;
}
/*input.button:disabled, button.button:disabled {*/
    /*border: 1px solid #9a9a9a;*/
    /*background: linear-gradient(#c3c2c2, #969696);*/
/*}*/

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 12px;
  height           : 12px;
  margin           : 0 0 0 0;
  border-radius    : 12px;
  background : radial-gradient(circle, #00acd3 48%, transparent 50%), linear-gradient( #fafafa, #f1f1f1) ;
}

/******************************/


.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {

    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);

}

input.file {
    border:1px solid #e2e2e2;
    line-height:30px;
    height:32px;
    font-size:14px;
    padding:0 0 0 0;
    text-indent:5px;
}

/*****************************/

label.input.above {
	line-height:30px;
    display:block;
    font-weight:bold;
    color:#000000;
}

label.input {
	line-height:40px;
    display:block;
    font-weight:bold;
    color:#000000;
}

div.row label.option {
    line-height:30px;
    font-size:12px;
    display:flex;
    font-weight:normal;
    vertical-align:top;
    color:#000000;
}

div.dialog-header {
    height:90px;
    width:100%;
    background-color:#3C3C3C;
    text-align:center;
    padding:40px;
}

div.dialog-body {
    margin:auto;
    text-align: center;
    width:800px;
    font-size:16px;
    font-weight:300;
}

div.dialog-body h1 {
    margin-top:80px;
    margin-bottom:30px;
    color: #00acd3;
    border:none;
    font-size:25px;
    font-weight:400;
    padding-bottom:0px;
    text-align:center;
}

div.dialog-body h2 {
    color: #00acd3;
    border:none;
    font-size:20px;
    font-weight:400;
}

div.dialog-body h3 {
    color: #00acd3;
    border:none;
    font-size:18px;
    font-weight:300;
}

.display_none {
    display:none;
}

.w1200 {
    width:1200px;
}

.w1000 {
    width:1000px;
}

.w900 {
    width:900px;
}

.w850 {
    width:850px;
}

.w800 {
    width:800px;
}

.w750 {
    width:750px;
}

.w700 {
    width:700px;
}

.w600 {
    width:600px;
}

.w550 {
    width:550px;
}

.w500 {
    width:500px;
}

.w450 {
    width:450px;
}

.w400 {
    width:400px;
}

.w350 {
    width:350px;
}

.w300 {
    width:300px;
}

.w250 {
    width:250px;
}

.w200 {
    width:200px;
}

.w150 {
    width:150px;
}

.w125 {
    width:125px;
}

.w100 {
    width:100px;
}

.w75 {
    width:75px;
}

.w50 {
    width:50px;
}

.w40 {
    width:40px;
}

.w25 {
    width:25px;
}

.wfull {
    width:100%;
}

.lh30 {
    line-height:30px;
}

.lh20 {
    line-height:20px;
}

.h30 {
    height:30px;
}

.h100 {
    height:100px;
}

.right {
    float:right;
}

.left {
    float:left;
}

.clear {
    clear:both;
}

.center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.col_red {
    background-color:#ff4040;
}

.col_yellow {
    background-color:#ffff40;
}

.col_green {
    background-color:#40ff40;
}

.col_cyan {
    background-color:#40ffff;
}

.col_blue {
    background-color:#4040ff;
}

.col_violet {
    background-color:#ff40ff;
}

.col_white {
    background-color:#ffffff;
}

.col_grey {
    background-color:#bfbfbf;
}

.col_black {
    background-color:#000000;
    color: #ffffff;
}

div.col {
	float:left;
	display:inline-block;
}

div.row {
    display:table;
    margin-top:10px;
}

div.row.no-margin {
    margin: 0 0 0 0;
}

div.row>* {
    display:table-cell;
    vertical-align:middle;
}

div.row>.valign-top {
    vertical-align:top;
}


div.row label {
	display:table-cell;
	line-height:30px;
    font-weight:bold;
    /*width:140px;*/
    color:#000000;
    vertical-align:middle;
    text-align:left;
}

div.info, span.info {
    position:relative;
    overflow:visible;
    font-size:16px;
    color:#00ACD3;
    width:36px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    cursor:default;
}

div.info:hover>div.message, span.info:hover>span.message {
	display:block;
}

div.info:hover {
	/*font-size: 99%; */
}

div.info>div.message, span.info>span.message {
	display:none;
    position: absolute;
    top:15px;
    transform: translateY(-50%);
    left: 40px;
    width: 200px;
    z-index: 100;
    background: #ffffff;
    color: #000000;
    font-size:14px;
    box-shadow:2px 3px 2px 2px rgba(0,0,0,.1);
    line-height:20px;
    text-align:left;
    padding: 8px 16px 8px 16px
}

div.info>div.message.right, span.info>span.message.right{
	border-left:7px solid #00ACD3;
}

div.info>div.message.right:before, span.info>span.message.right:before {
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:8px solid #00ACD3;
    left:-15px;
    top:calc(50% - 8px);
}

input {
    display:block;
}

input.text {
   /* margin:6px 0 30px 0;*/
}

input.button {
    cursor:pointer;
    /*margin:0 0 0 0;*/
}

div.loginform {
    margin:auto;
    margin-top:40px;
    width:400px;

    border:30px solid #ffffff;
}

div.registerform input,
div.loginform input,
div.resetform input {
    /*margin:6px 0 30px 0;*/
}

div.resetform {
    margin:auto;
    margin-top:40px;
    width:400px;
    border:30px solid #ffffff;
}

div.registerform {
    margin:auto;
    margin-top:40px;
    margin-bottom:40px;
    width:550px;
    border:30px solid #ffffff;
}

div.centercontainer {
    display: table-cell;
    vertical-align: middle;
}

div.block {
    padding:20px;
    background-color:#ffffff;
    border: 1px solid #f1f1f1;
    box-shadow:3px 3px 3px 0px rgba(0,0,0,.1);
}

div.block.shiny {
    padding:20px;
    box-shadow:0px 0px 16px 16px rgba(0,0,0,.2);
}

div.maincontent {
    /*position:absolute;*/
    top:80px;
    left:0px;
    right:0px;
    margin-left:20px;
    margin-right:20px;
    background-color:#f8f8f8;
}

div.content.multi {
    min-height: 0;
}

div.content{
    min-height: 484px;
}

div.content.topless {
    border-top: 1px none;
    overflow:visible;
}

nav.navbar {
    display:inline-block;
    width:150px;
    min-height: 100vh;
}

div.navfooter {
    padding-top:20px;
    text-align:center;
    min-height: 150px;
    height: auto !important;
    height: 150px;
    vertical-align:bottom;
}

div.navfooter a {
    font-size:14px;
    color:#787878;
}

div.navitem {
    overflow:hidden;
    width:142px;
    height:150px;
    border-top:1px solid #4A4A4A;
    border-bottom:1px solid #272727;
    background-color:#3C3C3C;
    text-align:center;
    border-left:4px solid #3C3C3C;
    border-right:4px solid #3C3C3C;
}

div.navitem.active {
    border-top:0px;
    border-bottom:0px;
    border-left:4px solid #00acd3;
    border-right:4px solid #2B2B2B;
    background-color:#2B2B2B;
}

a.navlink {
    position:relative;
    top:30px;
    display:block;
    height:90px;
    font-weight:bold;
    color:#787878;
    text-decoration:none;
}

a.formlink {
    display:block;
    /*margin-top:20px;*/
}

span.navlabel {
    display:block;
}

div.navitem.active a.navlink {
    color:#FFFFFF;
}

div.main {
    vertical-align:top;
    display:inline-block;
    width:calc(100% - 155px);
    min-height: 100vh;
    background-color:#F8F8F8;
    border-left:1px solid #E1E1E1;
}

div.mainnav {
	position:relative;
    min-width:800px;
    height:80px;
}

div.breadcrumbs {
	position:absolute;
	top:0;
	left:0px;
	margin-left:20px;
    float:left;
    height:40px;
    line-height:40px;
    color:#A4A4A4;
    background-color:#F8F8F8;
}

a.breadcrumblink {
    color:#03A7CC;
    text-decoration:none;
}

div.userbar {
    padding:0px;
	position:absolute;
	top:0;
	right:0px;
	margin-right:20px;
    float:right;
    width: 550px;
    height:40px;
    background-color:#fff;
    border-left:4px solid #00ACD3;
    border-top:0;
    border-bottom:0;
    border-right:0;
}

div.status {
    padding:0px;
    position:absolute;
    top:0;
    right:554px;
    margin-right:20px;
    float:right;
    width: 450px;
    height:40px;
    background-color:#fff;
    border-left:4px solid #00ACD3;
    border-top:0;
    border-bottom:0;
    border-right:0;
}

div.status p{
    float: left;
    margin: 10px;
}


div.status .status-ok {
    color: green;
}

div.status .status-fail {
    color: red;
}



div.userlabel {

    line-height:40px;
    float:left;
    margin-left:10px;
}

div.userlinks {
    line-height:40px;
    float:right;
    margin-right:10px;
    color:#00ACD3;
}

a.userlink {
    /*text-decoration:none;*/
}

h1 {
	font-size:20px;
	padding-bottom:10px;
	color:#000000;
	font-weight:bold;
	border-bottom:1px solid #e2e2e2;
    margin:0 0 10px 0;
    text-align:left;
}

h1 span.info {
    font-size:12px;
    color:#959595;
    margin-left:20px;
    font-weight:normal;
}

div.cell {
    border:1px solid #e2e2e2;
    padding:10px;
    margin-right:20px;
    /*margin-top:20px;*/
    float:left;
    background: linear-gradient(#fafafa, #f1f1f1);
}

div.cell:hover {
    border:1px solid #00acd3;
}

span.bold {
    font-weight:bold;
}

span.light {
    color:#787878;
}

span.small {
    font-size:11px;
    font-weight:300;
}

span.tiny {
    font-size:9px;
    font-weight:300;
}


span.blue {
    color: #00acd3;
}

img.video-preview {
    border:1px solid #e2e2e2;
}

img.video-preview:hover {
    border:1px solid #00acd3;
}

.float {
	float:left;
}

.margin-right {
    margin-right:10px;
}

.margin-right_1 {
    margin-right:1px;
}

.margin-left {
    margin-left:10px;
}

.margin-left_20 {
    margin-left:20px;
}

.margin-left_30 {
    margin-left:30px;
}

.margin-left_40 {
    margin-left:40px;
}

.margin-left_50 {
    margin-left:50px;
}

.margin-left_60 {
    margin-left:60px;
}

.margin-top_1 {
    margin-top:1px;
}

.margin-top {
	margin-top:10px;
}

.margin-top_20 {
    margin-top:20px;
}

.margin-top_30 {
    margin-top:30px;
}

.margin-top_40 {
    margin-top:40px;
}

.padding-left_20 {
    padding-left:20px;
}

.inactive {
    color:#959595;
}

.hidden {
    display:none;
}

table.form {

}

table.form th {
    text-align:left;
    width:150px;
}

table.form td,
table.form th {
    padding:5px;
}

div.overlay {
    min-height:100%;
    display:none;

    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;


    width:100%;
    height:100%;

    background-color: rgba(0,0,0,.45);
    text-align:center;
    z-index:500;
}

div.popup {
    padding:24px;
    /*
    width:500px;
    height:400px;
    */
    display:inline-block;
    background-color:#ffffff;
    margin:auto;
    position:relative;
}

div.popup .close,
div.popup .ng-close {
    position:absolute;
    top:0px;
    right:0px;
    width:24px;
    text-align:center;
    line-height:24px;
    font-size:14px;
    color:#787878;
    font-weight:bold;
    cursor:pointer;
}

img.preview-big {
    border:1px solid #e2e2e2;
}

div.preview-container {
    overflow-y:scroll;
    max-height:800px;

}

div.popup.preview .previous {
    font-size:20px;
    position:absolute;
    width:32px;
    height:32px;
    left:-5px;
    top:50%;
    color: #00acd3;
    cursor: pointer;
}

div.popup.preview .next {
    font-size:20px;
    position:absolute;
    width:32px;
    height:32px;
    right:-5px;
    top:50%;
    color: #00acd3;
    cursor: pointer;
}

div.preview-container-small.wide {
    width:736px;
    height:387px;
    border:1px solid #00acd3;
    position:relative;
}

div.preview-container-small {
    border:1px solid #00acd3;
    width:460px;
    height:390px;
}

div.preview-small{
    position:relative;
    float:left;
}

div.preview-small img {
    width:80px;
    height:113px;
    border:1px solid #e2e2e2;
    margin:5px;
    cursor:pointer;
}

div.page {
    position:absolute;
    right:20px;
    bottom:20px;
}

div.contingent {
    font-size:30px;
    font-weight:bold;
    color: #00acd3;
}

div.package {
    text-align:center;
    padding:10px;
    margin-right:10px;
    width:150px;
    border:1px solid #e2e2e2;
    background-color: #f8f8f8;
}

div.package:hover {
    border:1px solid #00acd3;
}

div.cover {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color: rgba(255,255,255,.1);
    text-align:center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div.loading {
    margin:auto;
    margin-top:150px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: .25rem solid rgba(0,172,211, 0.2);
    border-top-color: #00acd3;
    animation: spin 1s infinite linear;
    display:inline-block;
&--double {
    border-style: double;
    border-width: .5rem;
  }
}
div.loading.lodingThickness {
    display: block;
    margin: 50px auto;
}

div.render-container {
    margin:auto;
}

div.renderprogress {
    font-size:14px;
    color:#000000;
    display:none;
}

img.letter_paper_type {
    border:1px solid #e2e2e2;
    width:100px;
    margin:0 10px 0 10px;
}

img.letter_paper_type:hover {
    border:1px solid #00acd3;
}

div.popup.contact {
    display:none;
}

div.advantages {
    background-color:#00ACD2;
    color:#ffffff;
    margin-left:50px;
    height:470px;
    margin-top:50px;
    border:none;
}

div.logo {
    margin:auto;
    width:240px;
    height:189px
    margin-bottom:50px;
}

div.advantages table th {
    font-size:26px;
    line-height:55px;
    font-weight:normal;
}

div.advantages img {
    height:60px;
}

div.advantages .label {
    color:#000000;
    font-size:18px;
}

div.advantages .icon {
    width:30%;
    text-align:center;
}

hr{
    background: none;
    height: 1px;
    border: none;
    border-bottom: 1px solid #ccc;
}


#measurementCorrection{
    position: relative;
    width: 800px;
}

.loading-wrapper{
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    left: 0;
    top: 0;
    text-align: center;
}

.loading-wrapper__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.loading-wrapper .loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -75px;
}
.bg-grey {
    background: #f5f5f5;
}


table.block-scale{
    page-break-inside: avoid;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
    width: 100%;
}

table.block-scale td{
    padding: 4px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
}

table.block-table{
    page-break-inside: avoid;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}

table.block-table td{
    padding: 4px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
}
.sortorder:after {
    content: '\25b2';
}
.sortorder.reverse:after {
    content: '\25bc';
}

table.block_summary{
    border: 1px solid #ccc;
    width: 100%;
}

table.block_summary tr.head th{
    background-color: #efefef;
    padding: 5px;
    font-weight: normal;
    color: #555;
}
table.block_summary tr td{
    border-top: 1px solid #fff;
}
table.block_summary td{
    padding: 5px;
}

table.block_summary tr.summary td{
    background-color: #ccc;
    border-top:1px solid #ccc;
}

table.block_summary tr td{
    text-align: center;
}

table.block_summary tr td.text-left{
    text-align: left;
}

.sublist tr > td,
.sublist tr:hover > td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.measuremetThicknessTable:hover{
    border-left: none;
    border-top: none;
}

.measuremetThicknessImage{
    width: 100%;
}

.measuremetThicknessTable{
    width: 100%;
    border-left: none;
    border-top: none;
}
.measuremetThicknessTable tr td,
.measuremetThicknessTable tr th,
.measuremetThicknessTable tr:hover td,
.measuremetThicknessTable tr:hover th {
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}

.measuremetThicknessTable tr td,
.measuremetThicknessTable tr th {
    text-align: center;
    width: 45px;
    height: 45px;
}

.measuremetThicknessTable .label,
.measuremetThicknessTable tr:hover td.label,
.measuremetThicknessTable tr:hover th.label {
    background: none;
    border: none !important;
}
.measuremetThicknessTable .verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.measuremetThicknessTable .verticalTableHeader::before {
    content:'';
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}

.measuremetThicknessTable .verticalTableHeader.bottomTop {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.measuremetThicknessTable .verticalTableHeader.topBottom {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.forceVisibility.fixed{
    height: 100px;
}

.forceVisibility.fixed .forceVisibilityPopup{
    padding: 10px;
    border-top: 2px solid #ccc;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}


.config_grid_box{
    box-sizing: border-box;
    border: 2px solid #ccc;
    margin: 0.5%;
    padding: 10px;
    width: 24%;
    float: left;
}

.config_grid_box_container{
    overflow: hidden;
}

.config_grid_box_container .config_grid_box:nth-child(4n+5){
    clear:left;
}