/*** Include Base CSS ***/
/* Webfonts */
@font-face {
font-family: 'OpenSans-Light';
font-style: normal;
font-weight: 300;
src: url("/fonts/opensans/light/OpenSans-Light.eot");
src: local('Open Sans Light'),
local('OpenSans-Light'),
url("/fonts/opensans/Light/OpenSans-Light.eot?#iefix") format("embedded-opentype"),
url("/fonts/opensans/Light/OpenSans-Light.woff2") format("woff2"),
url("/fonts/opensans/Light/OpenSans-Light.woff") format("woff"),
url("/fonts/opensans/Light/OpenSans-Light.ttf") format("truetype"),
url("/fonts/opensans/Light/OpenSans-Light.svg#OpenSansLight") format("svg");
}
@font-face {
font-family: 'OpenSans-Regular';
font-style: normal;
font-weight: 400;
src: url("/fonts/opensans/regular/OpenSans-Regular.eot");
src: local('Open Sans Regular'),
local('OpenSans-Regular'),
url("/fonts/opensans/Regular/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
url("/fonts/opensans/Regular/OpenSans-Regular.woff2") format("woff2"),
url("/fonts/opensans/Regular/OpenSans-Regular.woff") format("woff"),
url("/fonts/opensans/Regular/OpenSans-Regular.ttf") format("truetype"),
url("/fonts/opensans/Regular/OpenSans-Regular.svg#OpenSansRegular") format("svg");
}
@font-face {
font-family: 'OpenSans-Semibold';
font-style: normal;
font-weight: 600;
src: url("/fonts/opensans/Semibold/OpenSans-Semibold.eot");
src: local('Open Sans Semibold'),
local('OpenSans-Semibold'),
url("/fonts/opensans/Semibold/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"),
url("/fonts/opensans/Semibold/OpenSans-Semibold.woff2") format("woff2"),
url("/fonts/opensans/Semibold/OpenSans-Semibold.woff") format("woff"),
url("/fonts/opensans/Semibold/OpenSans-Semibold.ttf") format("truetype"),
url("/fonts/opensans/Semibold/OpenSans-Semibold.svg#OpenSans-Semibold") format("svg");
}
@font-face {
font-family: 'OpenSans-Bold';
font-style: normal;
font-weight: 700;
src: url("/fonts/opensans/Bold/OpenSans-Bold.eot");
src: local('Open Sans Bold'),
local('OpenSans-Bold'),
url("/fonts/opensans/Bold/OpenSans-Bold.eot?#iefix") format("embedded-opentype"),
url("/fonts/opensans/Bold/OpenSans-Bold.woff2") format("woff2"),
url("/fonts/opensans/Bold/OpenSans-Bold.woff") format("woff"),
url("/fonts/opensans/Bold/OpenSans-Bold.ttf") format("truetype"),
url("/fonts/opensans/Bold/OpenSans-Bold.svg#OpenSansBold") format("svg");
}
/***************************************/
/* BOOTSTRAP CONFIGURATION */
.col-xs-12 {
max-width: 100%;
}
.col-xs-11 {
max-width: 91.66666667%;
}
.col-xs-10 {
max-width: 83.33333333%;
}
.col-xs-9 {
max-width: 75%;
}
.col-xs-8 {
max-width: 66.66666667%;
}
.col-xs-7 {
max-width: 58.33333333%;
}
.col-xs-6 {
max-width: 50%;
}
.col-xs-5 {
max-width: 41.66666667%;
}
.col-xs-4 {
max-width: 33.33333333%;
}
.col-xs-3 {
max-width: 25%;
}
.col-xs-2 {
max-width: 16.66666667%;
}
.col-xs-1 {
max-width: 8.33333333%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.form-section .col-lg-1, .form-section .col-lg-10, .form-section .col-lg-11, .form-section .col-lg-12, .form-section .col-lg-2, .form-section .col-lg-3, .form-section .col-lg-4, .form-section .col-lg-5, .form-section .col-lg-6, .form-section .col-lg-7, .form-section .col-lg-8, .form-section .col-lg-9, .form-section .col-md-1, .form-section .col-md-10, .form-section .col-md-11, .form-section .col-md-12, .form-section .col-md-2, .form-section .col-md-3, .form-section .col-md-4, .form-section .col-md-5, .form-section .col-md-6, .form-section .col-md-7, .form-section .col-md-8, .form-section .col-md-9, .form-section .col-sm-1, .form-section .col-sm-10, .form-section .col-sm-11, .form-section .col-sm-12, .form-section .col-sm-2, .form-section .col-sm-3, .form-section .col-sm-4, .form-section .col-sm-5, .form-section .col-sm-6, .form-section .col-sm-7, .form-section .col-sm-8, .form-section .col-sm-9, .form-section .col-xs-1, .form-section .col-xs-10, .form-section .col-xs-11, .form-section .col-xs-12, .form-section .col-xs-2, .form-section .col-xs-3, .form-section .col-xs-4, .form-section .col-xs-5, .form-section .col-xs-6, .form-section .col-xs-7, .form-section .col-xs-8, .col-xs-9 {
padding-top: 0;
padding-bottom: 0;
}
.tiles .site-content > .row > .col-lg-1, .tiles .site-content > .row > .col-lg-10, .tiles .site-content > .row > .col-lg-11, .tiles .site-content > .row > .col-lg-12, .tiles .site-content > .row > .col-lg-2, .tiles .site-content > .row > .col-lg-3, .tiles .site-content > .row > .col-lg-4, .tiles .site-content > .row > .col-lg-5, .tiles .site-content > .row > .col-lg-6, .tiles .site-content > .row > .col-lg-7, .tiles .site-content > .row > .col-lg-8, .tiles .site-content > .row > .col-lg-9, .tiles .site-content > .row > .col-md-1, .tiles .site-content > .row > .col-md-10, .tiles .site-content > .row > .col-md-11, .tiles .site-content > .row > .col-md-12, .tiles .site-content > .row > .col-md-2, .tiles .site-content > .row > .col-md-3, .tiles .site-content > .row > .col-md-4, .tiles .site-content > .row > .col-md-5, .tiles .site-content > .row > .col-md-6, .tiles .site-content > .row > .col-md-7, .tiles .site-content > .row > .col-md-8, .tiles .site-content > .row > .col-md-9, .tiles .site-content > .row > .col-sm-1, .tiles .site-content > .row > .col-sm-10, .tiles .site-content > .row > .col-sm-11, .tiles .site-content > .row > .col-sm-12, .tiles .site-content > .row > .col-sm-2, .tiles .site-content > .row > .col-sm-3, .tiles .site-content > .row > .col-sm-4, .tiles .site-content > .row > .col-sm-5, .tiles .site-content > .row > .col-sm-6, .tiles .site-content > .row > .col-sm-7, .tiles .site-content > .row > .col-sm-8, .tiles .site-content > .row > .col-sm-9, .tiles .site-content > .row > .col-xs-1, .tiles .site-content > .row > .col-xs-10, .tiles .site-content > .row > .col-xs-11, .tiles .site-content > .row > .col-xs-12, .tiles .site-content > .row > .col-xs-2, .tiles .site-content > .row > .col-xs-3, .tiles .site-content > .row > .col-xs-4, .tiles .site-content > .row > .col-xs-5, .tiles .site-content > .row > .col-xs-6, .tiles .site-content > .row > .col-xs-7, .tiles .site-content > .row > .col-xs-8, .col-xs-9 {
padding-top: 0;
padding-bottom: 0;
}
.tile > header,
.site > header,
.site > form > header {
position: relative;
}
.site > header,
.site > form > header {
background: rgb(255,255,255);
}
.site > header > .row,
.site > form > header > .row {
margin: 0;
}
.tiles > .row > .col-xs-12,
.content-site > .row > .col-xs-12 {
padding-right: 0;
padding-left: 0;
}
.main-content-header {
margin-top: 10px;
}
.main-content-header .row > * {
padding-left: 0;
padding-right: 0;
}
.sub-section {
padding: 0 15px;
background: rgb(255,255,255);
}
.sub-section > h1 {
width: 100%;
margin: 20px 0 20px -15px;
padding: 17px 15px;
box-sizing: content-box;
background: rgb(158,158,158);
}
.accordion.closed > .sub-section-content {
display: none;
}
.sub-section.closed:not(.accordion) > h1 {
margin-bottom: 0;
}
.sub-section.closed:not(.accordion) > .sub-section-content {
display: none;
}
.inner-section {
padding: 0;
}
.site-content > .row,
.site-content > form > .row,
.site-content > .form-section > .row,
.site-content > .form-section > .row-wrapper > .row {
margin: 0;
background: rgb(255,255,255);
}
.dashboard .site-content > .row {
background: transparent;
}
.site-content > .row > div {
margin: 15px 0;
background: rgb(255,255,255);
}
.table > thead > tr > th {
border: none !important;
}
.dynatable_content .table > thead > tr > th {
vertical-align: top !important;
}
.table > * > tr > td,
.table > * > tr > th {
padding: 6px 8px;
}
.row:first-of-type > div:not(.shopitem) {
padding-top: 0;
}
.container {
width: 600px;
}
.form-group {
margin-bottom: 0;
}
.form-group + .btn {
margin: 0;
}
hr {
margin-top: 15px;
margin-bottom: 15px;
}
.tile-content {
position: relative;
}
.table-wrapper {
width: 100%;
margin-bottom: 20px;
}
.table-wrapper,
.table-inner-wrapper {
position: relative;
overflow: auto;
}
.table-shadow {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 50px;
z-index: 1;
pointer-events: none;
opacity: 0;
}
.shadow-left {
left: 0;
background-image: linear-gradient( to left, rgba(255,255,255,0), rgba(255,255,255,1) );
}
.shadow-right {
right: 0;
background-image: linear-gradient( to right, rgba(255,255,255,0), rgba(255,255,255,1) );
}
.table-wrapper table {
min-width: 100% !important;
}
.table-wrapper .table {
position: relative;
margin-bottom: 0;
}
.table-striped > tbody > tr:nth-of-type(2n+1),
.table-striped > tbody > tr:nth-of-type(2n),
.table-striped > tbody > tr:nth-of-type(2n) td {
background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(2n+1) td {
background-color: rgba(0,0,0,.05);
}
.table-lined td:not(.button-td):not(:first-child),
.table-lined th:not(.button-td):not(:first-child) {
border-left: 1px solid rgb(206,206,206) !important;
}
.table.table-lined > tbody > tr > th {
padding-top: 0;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
border-top: 0 none;
}
.tile .table {
font-size: .9rem;
line-height: 1rem;
}
.tile .table th,
.tile .table td {
line-height: 1.7rem;
}
.table-wrapper.wide,
.tile .table-wrapper {
width: auto;
margin-left: -15px;
margin-right: -15px;
}
.tile .table {
font-size: .83333rem;
line-height: 1rem;
}
.tile .table th,
.tile .table td {
line-height: 1.58333rem;
}
.highlight-first tr td:first-child {
font-weight: 700;
}
.nav-tabs {
display: inline-block;
margin-bottom: 40px;
border: none;
}
.nav-tabs > li {
margin-bottom: 0;
font-size: 1rem;
text-align: center;
background: rgb(238,238,238);
}
.nav-tabs > li:nth-child(1),
.nav-tabs > li:nth-child(3) {
width: 170px;
}
.nav-tabs > li:nth-child(2) {
width: 230px;
}
.nav-tabs > li:nth-child(n+4) {
width: 570px;
margin-top: 15px;
}
.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
position: relative;
margin-right: 0;
padding: 0;
color: rgb(93,93,93);
line-height: 60px;
border: none;
border-radius: 0;
}
.nav-tabs > li:not(:nth-child(1n + 3)):not(:last-child) > a::after {
content: '';
position: absolute;
display: block;
top: 10px;
right: 0;
height: 40px;
width: 1px;
background-color: #c6c6c6;
}
.nav-tabs > li.ui-state-active > a,
.nav-tabs > li.ui-state-active > a:focus,
.nav-tabs > li.ui-state-active > a:hover {
border: none;
background: transparent;
font-weight: 700;
color: rgb(0,48,135);
}
.tabs .participant-search-name .form-inline,
.tabs .participant-search-username .form-inline,
.tabs .participant-search-mail .form-inline {
margin-top: 20px;
}
.form-inline .form-control {
width: 100%;
}
/*
.form-inline {
margin: 10px 0;
}
*/
.form-inline .checkbox,
.form-inline .radio {
display: block;
}
.form-inline .form-group {
display: inline-block;
width: 470px;
}
.form-inline .btn-search,
.form-inline .btn-help {
vertical-align: top;
}
input.form-control.input-xs {
display: inline-block;
height: 80px;
width: 110px;
min-width: 0;
border: 1px solid rgb(93,93,93);
color: rgb(93,93,93);
text-align: center;
}
.has-inline-btn .form-control {
width: 470px;
}
.has-inline-btn .half.left {
float: left;
}
input:invalid,
input:invalid:focus,
input:invalid:active {
border-color: rgb(195,26,25);
-webkit-box-shadow: 0 0 0 1px rgb(195,26,25);
box-shadow: 0 0 0 1px rgb(195,26,25);
}
option {
padding: 10px 24px;
}
.form-control {
text-indent: 0;
font-weight: 400;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: rgb(255,255,255);
opacity: .65;
}
input[type="checkbox"],
input[type="radio"] {
margin: 0;
}
.form-section .checkbox,
.form-section .radio,
.form-section .checkbox + .checkbox,
.form-section .radio + .radio {
margin-top: 0;
margin-bottom: 30px;
}
.form-control:focus {
border-color: rgb(0,48,135);
outline: 0px none;
-webkit-box-shadow: 0 0 0 1px rgb(0,48,135);
box-shadow: 0 0 0 1px rgb(0,48,135);
}
textarea.form-control {
min-height: 150px;
padding: 20px;
}
.checkbox label,
.radio label {
min-height: 45px;
padding-left: 80px;
line-height: 1.2rem;
font-size: 1rem;
-webkit-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
}
.form-inline .checkbox label,
.form-inline .radio label {
padding-left: 80px;
}
.checkbox.inline {
display: inline;
margin: 0;
}
.checkbox.inline > label {
padding-left: 20px;
}
.checkbox label .checkbox-desc {
position: relative;
display: block;
}
.checkbox label .checkbox-desc::before,
.checkbox label .checkbox-desc::after {
content: '';
position: absolute;
top: 0;
left: -80px;
height: 60px;
width: 60px;
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
.checkbox label .checkbox-desc::before {
background-color: rgb(255,255,255);
border: 1px solid rgb(93,93,93);
}
.checkbox label input[disabled="disabled"] + .checkbox-desc::before {
border: 1px solid rgba(0,0,0,.1);
}
.checkbox label .checkbox-desc::after {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Qzg3N0Q3MEY1MjJDMTFFNUFDNkRFRkQ1NzRBRERFOEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Qzg3N0Q3MTA1MjJDMTFFNUFDNkRFRkQ1NzRBRERFOEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDODc3RDcwRDUyMkMxMUU1QUM2REVGRDU3NEFEREU4QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDODc3RDcwRTUyMkMxMUU1QUM2REVGRDU3NEFEREU4QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlN28hIAAAKrSURBVHja7JlNSFRRFMdnUqwZF2EfuCgwFCTculA0rDYVlWGSICEDIi6SQAkFXeguIqIIwk30QUShtjGkWhgq6SKDIFCDBDdhRNDGDxAVm/4X/sUg887c9+Y+vQ/egR/DcO7cuefed8//nJloMpmMBNn2RAJuYQBhAFlabiKRCMpai8FDcBqsg5egIzcgiy8EY6CI72OgBeQH4RGKgzcpi0+1K7YHkAMGQbmDf8X2AB6Ai4K/1+YAOsE1wX8P9NsaQAO4I/gHGaCVOnACPBf8E0Dl/qSNAZSCYbDXwT8D6sCGjUp8GLwDBx38i+A8WLKxlFC5foRqm87Uos8xCOtqoRw+8xUOfvW4XAJzthZzd0G9g09d1CbwwdZqtJ042Q3wytZy+jLFSBKq+7b2A5XghfD9/4XKxgBKmHFiOkJlWwAqx78Fh3SFKmNHlpLKyrkrn8GqD4vfB15TbbWFSucE1IRfwTSPb5HFlEmLMtdXuxUqnQCebduV/WAoQ3pza7dV9+RFqHQCqHTwqRR2i7uXjbWBLq9CpRPAvODvBo95R7xYLbsqz0KlE0ArWBPGNPPyxV3OrZLCgJDptIRKJwB1fKfAb2HcBTAKDmjOe4y/JMSzFSpdHfjETui7MLYKTIKjGeYsYF1faEKo3AjZNy5yVhhfBj7yNZ3lsaM6bkqo3CrxD57ElPCZIzyJqjS5/imoMSlUXkoJ9QVnuJNOpu7Ce96Nf3YTXDUtVF5roTUKzyPhszFmp2Zmsh4/hEq3FkpnW1zYT9ArtINPwB+/hMpENdoHrguLlObJWqhMldP9oBFsupjbiFCZ7AfUTp4FyxpjjQmV6YZmHJwEv4QxRoXKj47sC+v6hZ0QKr9aygWW4apvWOfdGGauX4rsoEXDf+rDAMIAwgB21f4KMADWWI+TVoSR8AAAAABJRU5ErkJggg==");
background-size: 40px 40px;
background-position: center center;
background-repeat: no-repeat;
border: none;
opacity: 0;
-webkit-transform: translateX(-20px) translateY(-15px) rotate(-60deg);
-ms-transform: translateX(-20px) translateY(-15px) rotate(-60deg);
transform: translateX(-20px) translateY(-15px) rotate(-60deg);
-webkit-transition: rotate .25s, opacity .25s, transform .25s;
transition: rotate .25s, opacity .25s, transform .25s;
}
.checkbox label input:checked + .checkbox-desc::after {
opacity: 1;
-webkit-transform: translateX(0) translateY(-15px) rotate(0deg);
-ms-transform: translateX(0) translateY(-15px) rotate(0deg);
transform: translateX(0) translateY(-15px) rotate(0deg);
}
.checkbox label input[type="checkbox"] {
display: none;
}
.checkbox + .checkbox,
.radio + .radio {
margin-top: 10px;
}
.middle-aligned * {
vertical-align: middle;
}
.middle-aligned input[type="radio"] + label::before {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.checkbox label input[type="checkbox"][disabled="disabled"],
.checkbox label input[type="checkbox"][disabled="disabled"] + span {
cursor: default;
}
.badge-select label .svg-icon {
height: 60px;
width: 60px;
}
.btn.focus,
.btn:focus,
.btn:hover {
color: unset;
text-decoration: unset;
}
.btn {
height: 80px;
width: 570px;
max-width: 100%;
margin: 10px 0 20px;
padding: 0 26px;
border: 1px solid rgb(0,48,135);
border-radius: 0;
font-size: 1.25rem;
line-height: 78px;
color: rgb(255,255,255);
vertical-align: middle;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.btn > *:not(span) {
vertical-align: middle;
}
.tile-content .table .btn {
height: 36px;
width: 170px;
margin: 0;
font-size: .83333rem;
line-height: 34px;
}
.btn-sm {
padding: 0 12px;
}
.btn-icon {
width: 80px;
padding: 10px;
border: 1px solid transparent;
background: transparent;
line-height: 0;
}
.btn-icon.success .svg-icon {
fill: rgb(115,155,75) !important;
}
.btn-icon.warning .svg-icon {
fill: rgb(230,160,0) !important;
}
.btn-icon.danger .svg-icon {
fill: rgb(195,26,25) !important;
}
.btn-text {
font-size: 1.25rem;
color: rgb(93,93,93);
}
.btn-default:hover {
color: unset;
background-color: unset;
border-color: unset;
}
.btn-default:not(.btn-light).disabled,
.btn-default:not(.btn-light).disabled.active,
.btn-default:not(.btn-light).disabled.focus,
.btn-default:not(.btn-light).disabled:active,
.btn-default:not(.btn-light).disabled:focus,
.btn-default:not(.btn-light).disabled:hover,
.btn-default:not(.btn-light)[disabled],
.btn-default:not(.btn-light).active[disabled],
.btn-default:not(.btn-light).focus[disabled],
.btn-default:not(.btn-light)[disabled]:active,
.btn-default:not(.btn-light)[disabled]:focus,
.btn-default:not(.btn-light)[disabled]:hover,
fieldset[disabled] .btn-default:not(.btn-light),
fieldset[disabled] .btn-default:not(.btn-light).active,
fieldset[disabled] .btn-default:not(.btn-light).focus,
fieldset[disabled] .btn-default:not(.btn-light):active,
fieldset[disabled] .btn-default:not(.btn-light):focus,
fieldset[disabled] .btn-default:not(.btn-light):hover {
background-color: rgb(0,48,135) !important;
border-color: rgb(0,48,135) !important;
font-weight: 400 !important;
letter-spacing: 0.01rem !important;
}
.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default:active:focus,
.btn-default:focus {
border-color: rgb(0,48,135);
background-color: rgb(0,48,135);
}
.btn-default.btn-light,
.btn-default.btn-light:hover,
.btn-default.btn-light:active,
.btn-default.btn-light:active:focus,
.btn-default.btn-light:focus {
border-color: rgb(0,48,135);
background-color: rgb(255,255,255);
color: rgb(0,48,135);
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary:focus {
border-color: rgb(93,93,93);
background-color: rgb(93,93,93);
}
.btn-secondary.btn-light,
.btn-secondary.btn-light:hover,
.btn-secondary.btn-light:active,
.btn-secondary.btn-light:active:focus,
.btn-secondary.btn-light:focus {
border-color: rgb(93,93,93);
background-color: rgb(255,255,255);
color: rgb(93,93,93);
}
.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success:active:focus,
.btn-success:focus,
.btn-success.disabled,
.btn-success.disabled.active,
.btn-success.disabled.focus,
.btn-success.disabled:active,
.btn-success.disabled:focus,
.btn-success.disabled:hover,
.btn-success[disabled],
.btn-success.active[disabled],
.btn-success.focus[disabled],
.btn-success[disabled]:active,
.btn-success[disabled]:focus,
.btn-success[disabled]:hover {
border-color: rgb(115,155,75);
background-color: rgb(115,155,75);
}
.btn-success.btn-light,
.btn-success.btn-light:hover,
.btn-success.btn-light:active,
.btn-success.btn-light:active:focus,
.btn-success.btn-light:focus {
border-color: rgb(115,155,75);
background-color: rgb(255,255,255);
color: rgb(115,155,75);
}
.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:active:focus,
.btn-info:focus {
border-color: rgb(0,48,135);
background-color: rgb(0,48,135);
}
.btn-info.btn-light,
.btn-info.btn-light:hover,
.btn-info.btn-light:active,
.btn-info.btn-light:active:focus,
.btn-info.btn-light:focus {
border-color: rgb(0,48,135);
background-color: rgb(255,255,255);
color: rgb(0,48,135);
}
.btn-warning,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:active:focus,
.btn-warning:focus {
border-color: rgb(230,160,0);
background-color: rgb(230,160,0);
}
.btn-warning.btn-light,
.btn-warning.btn-light:hover,
.btn-warning.btn-light:active,
.btn-warning.btn-light:active:focus,
.btn-warning.btn-light:focus {
border-color: rgb(230,160,0);
background-color: rgb(255,255,255);
color: rgb(230,160,0);
}
.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:focus {
border-color: rgb(195,26,25);
background-color: rgb(195,26,25);
}
.btn-danger.btn-light,
.btn-danger.btn-light:hover,
.btn-danger.btn-light:active,
.btn-danger.btn-light:active:focus,
.btn-danger.btn-light:focus {
border-color: rgb(195,26,25);
background-color: rgb(255,255,255);
color: rgb(195,26,25);
}
.btn.active.focus,
.btn.active:focus,
.btn.active:hover,
.btn.focus:active,
.btn:active:focus,
.btn:active:hover,
.btn:hover,
.btn:active,
.btn.focus,
.btn:focus {
font-weight: 600;
-webkit-box-shadow: none;
box-shadow: none;
color: rgb(255,255,255);
letter-spacing: -.0075rem;
}
.btn-icon-text {
height: auto;
width: 100%;
margin-left: 0;
line-height: 1.25rem;
word-break: normal;
text-align: left;
}
.btn-icon-text .svg-icon {
width: 80px;
height: 80px;
}
.btn-icon-text .btn-text {
display: inline-block;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
white-space: normal;
vertical-align: middle;
}
svg.overwritten {
opacity: .25;
}
.half.left > .btn-icon-text {
margin-left: -10px;
margin-right: 10px;
}
.form-control {
position: relative;
height: 80px;
min-width: 225px;
padding: 0 20px;
border: 1px solid rgb(93,93,93);
border-radius: 0;
font-size: 1.25rem;
background: rgb(255,255,255);
-webkit-box-shadow: none;
box-shadow: none;
text-overflow: ellipsis;
}
input.form-control.wrong-input,
select.form-control.wrong-input {
border: 1px solid rgb(195,26,25);
color: rgb(195,26,25);
}
.select-styler.wrong-input::after {
border-color: rgb(195,26,25);
}
input.form-control.wrong-input:focus {
box-shadow: 0px 0px 0px 1px rgb(195,26,25);
}
select.form-control {
padding: 0 50px 0 20px;
}
.tile-title .form-control {
min-width: auto;
}
.select-styler {
display: block;
position: relative;
font-weight: 400;
}
.select-styler::after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
height: 80px;
width: 65px;
border-top: 1px solid rgb(93,93,93);
border-right: 1px solid rgb(93,93,93);
border-bottom: 1px solid rgb(93,93,93);
padding: 20px 0 0 0;
background-color: rgb(255,255,255);
background-image: url("data:image/svg+xml;utf8,");
background-position: center center;
background-size: 60% 40%;
background-repeat: no-repeat;
text-align: center;
pointer-events: none;
}
body.ie .select-styler::after {
width: 70px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjEnIGlkPSdpY29uLWFycm93LWRvd24nPjxzdmcgdmlld0JveD0nMCAwIDE5LjcyIDUxLjIwMScgY2xhc3M9J3N2Zy1iYXNlIHN2Zy1pY29uLWFycm93LWRvd24nIHN0eWxlPSdmaWxsOiAlMjM1ZDVkNWQ7Jz48ZyB0cmFuc2Zvcm09J21hdHJpeCg0LjI0MDM2MTcsMCwwLC00LjI0MDM2MTcsLTMyLjIxMDM2NSwxMTQuOTMzMjUpJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg5LjE1OTIsMTguNjMyOCkgcm90YXRlKDI3MCknPjxwYXRoIGQ9J20wIDAgMC43NTQgMC43NTQtNi4wMzUgNi4wMzYtMC43NTQtMC43NTQgNS4yOC01LjI4Mi01LjI1NS01LjI1NiAwLjc1NC0wLjc1NCAzLjAxMyAzLjAxNHonLz48L2c+PC9nPjwvc3ZnPjwvc3ZnPg==");
}
.inline-select {
display: inline-block;
width: 320px;
}
.datepicker-title .form-control,
.tile header .form-control {
min-width: auto;
}
.radio input[type="radio"] {
margin-left: 0;
}
input[type="radio"] {
z-index: 2;
height: 60px;
width: 60px;
vertical-align: top;
opacity: 0;
cursor: pointer;
}
.checkbox input[disabled="disabled"] + label,
.radio input[disabled="disabled"] + label {
cursor: not-allowed;
color: rgb(206,206,206);
}
.checkbox input[disabled="disabled"] + label::before,
.radio input[disabled="disabled"] + label::before {
border-color: rgb(206,206,206);
}
input[type="radio"]:not([disabled="disabled"]) + label {
cursor: pointer;
}
input[type="radio"] + label::before {
content: '';
z-index: 1;
position: absolute;
display: inline-block;
left: 0px;
height: 60px;
width: 60px;
border: 1px solid rgb(93,93,93);
border-radius: 30px;
background: rgb(255,255,255);
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
input[type="radio"] + label::after {
content: '';
z-index: 2;
position: absolute;
display: inline-block;
left: 0px;
top: 0px;
height: 60px;
width: 60px;
border-radius: 30px;
background: transparent;
opacity: 0;
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
-webkit-transition: all .2s;
transition: all .2s;
}
input[type="radio"]:not([disabled="disabled"]):hover + label::after,
input[type="radio"]:not([disabled="disabled"]):focus + label::after {
left: 15px;
top: 15px;
height: 30px;
width: 30px;
border-radius: 15px;
background: rgb(0,48,135);
opacity: .25;
}
input[type="radio"]:checked + label::after,
input[type="radio"]:checked:hover + label::after,
input[type="radio"]:checked:focus + label::after {
left: 15px;
top: 15px;
height: 30px;
width: 30px;
border-radius: 15px;
background: rgb(0,48,135);
opacity: 1;
}
.middle-aligned input[type="radio"]:not([disabled="disabled"]):hover + label::after,
.middle-aligned input[type="radio"]:not([disabled="disabled"]):focus + label::after {
top: 50%;
}
.middle-aligned input[type="radio"]:checked + label::after,
.middle-aligned input[type="radio"]:checked:hover + label::after,
.middle-aligned input[type="radio"]:checked:focus + label::after {
top: 50%;
}
/* File Upload */
.form-inline.upload-form .form-group {
width: 350px;
}
.upload-form .form-group input {
width: 100%;
}
.upload-form .upload-file {
background-color: rgb(255,255,255);
}
.upload-form .btn {
width: 220px;
padding: 0;
vertical-align: top;
}
.csv-upload-form--drag {
outline: 4px solid rgba(115,155,75,.75);
outline-offset: 3px;
-webkit-transition: outline .1s;
transition: outline .1s;
}
.body--drag {
outline: 4px dashed rgba(100,100,100,.5);
outline-offset: 3px;
-webkit-transition: outline .3s;
transition: outline .3s;
}
#upload-drag-area {
display: block;
}
#upload-drag-area[class=""] {
outline: 4px dashed rgba(100,100,100,0);
outline-offset: 3px;
-webkit-transition: outline ease 0.3s;
transition: outline ease 0.3s;
}
.upload-fileselect {
height: 0;
visibility: hidden;
width: 0;
}
.download-area {
position: relative;
padding: 5px 15px;
border: 1px solid rgb(93,93,93);
}
.download-description {
padding-right: 15px;
font-size: 1.125rem;
opacity: .5;
}
.download-description-title {
margin-bottom: 0;
font-weight: 700;
color: rgb(93,93,93);
}
.download-link-wrapper {
padding-bottom: 20px;
}
.download-link {
font-size: 1.125rem;
color: rgb(93,93,93);
text-decoration: underline;
}
.download-link-content {
height: 1.5rem;
margin: 0;
}
.download-link-content .svg-icon {
display: inline-block;
width: 1.5rem;
margin-right: .5rem;
margin-bottom: -.25rem;
}
/* Dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
z-index: 3;
position: relative;
}
.open .dropdown-toggle:hover,
.open .dropdown-toggle:active,
.open .dropdown-toggle:focus {
text-decoration: none;
}
.dropdown.open .dropdown-toggle span:first-child {
border-color: transparent;
}
.dropdown-menu {
z-index: 2;
top: -8px;
right: -5px;
left: auto;
min-width: unset;
padding: 45px 0 0;
border: 1px solid rgb(0,48,135);
font-size: 30px;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-menu > li > a {
position: relative;
width: 72px;
margin: 0 5px;
padding: 3px 0;
border-top: 1px solid rgb(206,206,206);
text-align: left;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: #f5f5f5;
}
.dropdown-menu > li > a:hover::before,
.dropdown-menu > li > a:hover::after {
position: absolute;
content: '';
display: block;
top: 0;
height: 100%;
width: 5px;
background: #f5f5f5;
}
.dropdown-menu > li > a:hover::before,
.dropdown-menu > li > a:focus::before {
left: -5px;
}
.dropdown-menu > li > a:hover::after,
.dropdown-menu > li > a:focus::after {
right: -5px;
}
/* Lightbox */
.lightbox {
position: fixed;
width: 600px !important;
}
.lightbox::before {
content: '';
position: fixed;
z-index: 1001;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(0,0,0,.25);
}
.lightbox .dialog {
z-index: 1002;
position: relative;
height: 100% !important;
width: 100% !important;
padding: 15px;
background: rgb(255,255,255);
}
.lightbox .custom-close svg {
height: 60px;
width: 60px;
padding: 0;
}
.change-points-content > div {
margin-bottom: 42px;
}
.change-points-content > div.change-points-user {
margin-bottom: 10px;
}
.change-points-user,
.change-points-data {
width: 50%;
}
.change-points-user-image {
height: 265px;
width: 265px;
}
.change-points-content > div strong {
display: block;
}
.change-points-button-wrapper button {
height: 80px;
width: 100%;
margin: 15px 0;
font-size: 1.25rem;
}
.change-points-data-name {
font-weight: bold;
}
.dialog-icon {
height: 100px;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.dialog-icon-image {
width: 100% !important;
height: 100% !important;
}
/* LOGOUT START */
.notifications-list {
display: flex;
justify-content: flex-end;
align-items: center;
list-style-type: none;
}
.logout-link {
display: flex;
align-items: center;
}
.icon-logout {
display: none;
}
/* LOGOUT END*/
@media (min-width:768px) {
.col-sm-12{
max-width:100%
}
.col-sm-11{
max-width:91.66666667%
}
.col-sm-10{
max-width:83.33333333%
}
.col-sm-9{
max-width:75%
}
.col-sm-8{
max-width:66.66666667%
}
.col-sm-7{
max-width:58.33333333%
}
.col-sm-6{
max-width:50%
}
.col-sm-5{
max-width:41.66666667%
}
.col-sm-4{
max-width:33.33333333%
}
.col-sm-3{
max-width:25%
}
.col-sm-2{
max-width:16.66666667%
}
.col-sm-1{
max-width:8.33333333%
}
.container {
width: 768px;
}
.main-content-header {
margin-left: -30px;
margin-right: -30px;
}
.main-content-header .row > * {
padding-left: 15px;
padding-right: 15px;
}
.dashboard .site-content > .row > div { /* für Dashboard notwendig. Andere Seiten nicht getestet */
margin: 10px 0;
}
.main-content:not(.dashboard) .site-content > .row > div {
padding-top: 10px;
padding-bottom: 10px;
}
.sub-section {
padding: 0 9px;
}
.inner-section {
padding: 0px;
}
.closing-section .sub-section-content > .row-wrapper > .row:not(.wide) > [class^="col-"]:first-child > *,
.closing-section .sub-section-content > .row:not(.wide) > [class^="col-"]:first-child > * {
margin-left: 0;
}
/*
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding: 15px 24px;
}
*/
/*
.site-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-4 + .col-lg-4 > *,
.sub-section-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-4 + .col-lg-4 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-4:first-child + .col-lg-4 + .col-lg-4 > *,
.site-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-5 + .col-lg-3 > *,
.sub-section-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-5 + .col-lg-3 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-4:first-child + .col-lg-5 + .col-lg-3 > *,
.site-content > .row:not(.wide) > .col-lg-5:first-child + .col-lg-4 + .col-lg-3 > *,
.sub-section-content > .row:not(.wide) > .col-lg-5:first-child + .col-lg-4 + .col-lg-3 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-5:first-child + .col-lg-4 + .col-lg-3 > *,
.site-content > .row:not(.wide) > .col-lg-8:first-child + .col-lg-4 > *,
.sub-section-content > .row:not(.wide) > .col-lg-8:first-child + .col-lg-4 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-8:first-child + .col-lg-4 > *,
.site-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-8 > *,
.sub-section-content > .row:not(.wide) > .col-lg-4:first-child + .col-lg-8 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-4:first-child + .col-lg-8 > *,
.site-content > .row:not(.wide) > .col-lg-9:first-child + .col-lg-3 > *,
.sub-section-content > .row:not(.wide) > .col-lg-9:first-child + .col-lg-3 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-9:first-child + .col-lg-3 > *,
.site-content > .row:not(.wide) > .col-lg-3:first-child + .col-lg-9 > *,
.sub-section-content > .row:not(.wide) > .col-lg-3:first-child + .col-lg-9 > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-3:first-child + .col-lg-9 > *,
.site-content > .row:not(.wide) > .col-lg-12:first-child > *,
.sub-section-content > .row:not(.wide) > .col-lg-12:first-child > *,
.sub-section-content > .row-wrapper > .row:not(.wide) > .col-lg-12:first-child > * {
margin-right: 15px;
}
*/
.row {
margin-left: 0px;
margin-right: 0px;
}
.closing-section .row {
margin-left: -15px;
margin-right: -15px;
}
.tiles > .row,
.content-site > .row {
margin-left: -15px;
margin-right: -15px;
}
.tiles > .row > .col-xs-12,
.content-site > .row > .col-xs-12 {
padding-right: 0px;
padding-left: 0px;
}
.nav-tabs {
margin-bottom: 20px;
}
.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
line-height: 55px;
}
.nav-tabs > li:nth-child(1),
.nav-tabs > li:nth-child(3) {
width: 235px;
}
.nav-tabs > li:nth-child(2) {
width: 250px;
}
.nav-tabs > li:nth-child(n+4) {
width: 720px;
margin-top: 10px;
}
.nav-tabs > li:not(:nth-child(n+3)):not(:last-child) > a::after {
top: 10px;
height: 35px;
}
.nav-tabs .participant-search-name .form-group {
width: 680px;
}
.nav-tabs .participant-search-name .form-group .form-control {
width: 657px;
}
.tabs .search-form .form-control,
.tabs .search-form .form-group {
width: 657px;
}
.tabs .search-form .btn {
margin-left: 20px;
}
.form-inline .form-group {
display: inline-block;
}
.form-inline .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"] {
position: absolute;
}
.form-inline .btn-icon {
margin-left: 10px;
}
.btn {
height: 50px;
width: 470px;
margin-bottom: 0;
line-height: 48px;
font-size: 1.1rem;
}
.btn-icon {
width: 40px;
padding: 0;
line-height: 0;
}
.btn-icon-text {
width: 100%;
line-height: 1.2rem;
}
.btn-icon-text .svg-icon {
width: 40px;
height: 40px;
}
.btn-icon-text .btn-text {
display: inline-block;
max-width: -webkit-calc(100% - 40px);
max-width: calc(100% - 40px);
white-space: normal;
}
.half.left > .btn-icon-text {
margin-left: 0px;
margin-right: 0px;
}
.col-sm-6 .btn-md {
width: 100%;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
height: 40px;
width: 40px;
border-radius: 20px;
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
input[type="radio"]:not([disabled="disabled"]):hover + label::after,
input[type="radio"]:not([disabled="disabled"]):focus + label::after {
left: 10px;
top: 10px;
height: 20px;
width: 20px;
border-radius: 10px;
}
input[type="radio"]:checked + label::after,
input[type="radio"]:checked:hover + label::after,
input[type="radio"]:checked:focus + label::after {
left: 10px;
top: 10px;
height: 20px;
width: 20px;
border-radius: 10px;
}
input.form-control.input-xs {
height: 50px;
width: 95px;
min-width: 95px;
}
.checkbox label,
.radio label {
min-height: 35px;
padding-left: 62px;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.form-inline .checkbox label,
.form-inline .radio label {
padding-left: 62px;
}
.checkbox label .checkbox-desc::before,
.checkbox label .checkbox-desc::after {
content: "";
position: absolute;
top: 0px;
height: 40px;
width: 40px;
left: -62px;
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
.checkbox label .checkbox-desc::after {
-webkit-transform: translateX(-13px) translateY(-5px) rotate(-60deg);
-ms-transform: translateX(-13px) translateY(-5px) rotate(-60deg);
transform: translateX(-13px) translateY(-5px) rotate(-60deg);
}
.checkbox label input:checked + .checkbox-desc::after {
-webkit-transform: translateX(0px) translateY(-5px) rotate(0deg);
-ms-transform: translateX(0px) translateY(-5px) rotate(0deg);
transform: translateX(0px) translateY(-5px) rotate(0deg);
}
.checkbox label .checkbox-desc::after {
background-size: 30px 30px;
}
input[type="radio"] {
height: 40px;
width: 40px;
}
.form-section .checkbox,
.form-section .radio,
.form-section .checkbox + .checkbox,
.form-section .radio + .radio {
margin-bottom: 20px;
}
.form-control {
height: 50px;
padding: 0 10px;
font-size: 1rem;
}
select.form-control {
padding: 0 35px 0 10px;
}
input.form-control {
height: 50px;
width: 470px;
}
.datepicker-title .form-control,
.tile .form-control {
font-size: 1.1rem;
}
.datepicker-title .form-control,
.tile header .form-control {
height: 40px;
}
.datepicker-title .select-styler::after,
.tile header .select-styler::after {
height: 40px;
width: 40px;
}
body.ie .datepicker-title .select-styler::after,
body.ie .tile header .select-styler::after {
width: 44px;
}
.select-styler {
width: 470px;
}
.select-styler::after {
height: 50px;
width: 50px;
padding: 3px 0 0 0;
}
body.ie .select-styler::after {
width: 54px;
}
.half:last-child:not(.half-sm) {
padding-bottom: 30px;
}
.form-inline .form-control {
width: 470px;
}
/* File Input */
.form-inline.upload-form .form-group {
width: 500px;
}
/* Lightbox */
.lightbox {
width: 810px !important;
}
.lightbox.small {
height: 215px !important;
width: 555px !important;
}
.lightbox .dialog {
padding: 20px;
}
.lightbox .dialog.wait-dialog {
padding: 30px;
}
.lightbox .ui-dialog-titlebar {
display: none;
}
.lightbox .custom-close {
display: block;
position: absolute;
z-index: 1003;
top: 10px;
right: 20px;
height: 30px;
width: 30px;
line-height: 0;
}
.lightbox .custom-close svg {
height: 30px;
width: 30px;
}
.lightbox .progress-finished {
margin-top: 10px;
padding: 23px;
}
.lightbox .content h2 {
position: absolute;
top: 50%;
margin: 0px;
font-weight: 700;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.lightbox header {
margin-bottom: 13px;
border-bottom: 1px solid rgb(158,158,158);
}
.lightbox header h5 {
margin-top: 0;
margin-bottom: 2px;
}
.dialog-icon {
height: 100px;
width: 100px;
margin: 0 20px 20px 0;
}
.dialog-icon + .content {
width: calc(100% - 120px);
}
.icon-container {
margin-top: 30px;
}
}
@media (min-width:1200px) {
.col-lg-12{
max-width:100%
}
.col-lg-11{
max-width:91.66666667%
}
.col-lg-10{
max-width:83.33333333%
}
.col-lg-9{
max-width:75%
}
.col-lg-8{
max-width:66.66666667%
}
.col-lg-7{
max-width:58.33333333%
}
.col-lg-6{
max-width:50%
}
.col-lg-5{
max-width:41.66666667%
}
.col-lg-4{
max-width:33.33333333%
}
.col-lg-3{
max-width:25%
}
.col-lg-2{
max-width:16.66666667%
}
.col-lg-1{
max-width:8.33333333%
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
.tiles .site-content > .row > .col-lg-1, .tiles .site-content > .row > .col-lg-10, .tiles .site-content > .row > .col-lg-11, .tiles .site-content > .row > .col-lg-12, .tiles .site-content > .row > .col-lg-2, .tiles .site-content > .row > .col-lg-3, .tiles .site-content > .row > .col-lg-4, .tiles .site-content > .row > .col-lg-5, .tiles .site-content > .row > .col-lg-6, .tiles .site-content > .row > .col-lg-7, .tiles .site-content > .row > .col-lg-8, .tiles .site-content > .row > .col-lg-9, .tiles .site-content > .row > .col-md-1, .tiles .site-content > .row > .col-md-10, .tiles .site-content > .row > .col-md-11, .tiles .site-content > .row > .col-md-12, .tiles .site-content > .row > .col-md-2, .tiles .site-content > .row > .col-md-3, .tiles .site-content > .row > .col-md-4, .tiles .site-content > .row > .col-md-5, .tiles .site-content > .row > .col-md-6, .tiles .site-content > .row > .col-md-7, .tiles .site-content > .row > .col-md-8, .tiles .site-content > .row > .col-md-9, .tiles .site-content > .row > .col-sm-1, .tiles .site-content > .row > .col-sm-10, .tiles .site-content > .row > .col-sm-11, .tiles .site-content > .row > .col-sm-12, .tiles .site-content > .row > .col-sm-2, .tiles .site-content > .row > .col-sm-3, .tiles .site-content > .row > .col-sm-4, .tiles .site-content > .row > .col-sm-5, .tiles .site-content > .row > .col-sm-6, .tiles .site-content > .row > .col-sm-7, .tiles .site-content > .row > .col-sm-8, .tiles .site-content > .row > .col-sm-9, .tiles .site-content > .row > .col-xs-1, .tiles .site-content > .row > .col-xs-10, .tiles .site-content > .row > .col-xs-11, .tiles .site-content > .row > .col-xs-12, .tiles .site-content > .row > .col-xs-2, .tiles .site-content > .row > .col-xs-3, .tiles .site-content > .row > .col-xs-4, .tiles .site-content > .row > .col-xs-5, .tiles .site-content > .row > .col-xs-6, .tiles .site-content > .row > .col-xs-7, .tiles .site-content > .row > .col-xs-8, .col-xs-9 {
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
}
.row > .col-lg-4 > .inner-col-row-group > .form-inline > .half:last-child,
.row > .col-lg-4 > .form-inline > .half:last-child,
.row > .col-lg-4 > .half:last-child {
padding-left: 15px;
}
.row > .col-lg-8 > .inner-col-row-group > .inner-col-row > .half:first-child,
.row > .col-lg-8 > .inner-col-row > .half:first-child,
.row > .col-lg-8 > .half:first-child {
margin-right: 5px;
width: -webkit-calc( 50% - 10px ) !important;
width: calc( 50% - 10px ) !important;
}
.container {
width: 966px;
}
.closing-section .sub-section-content > .row-wrapper > .row,
.closing-section .sub-section-content > .row {
margin-left: -20px;
margin-right: -20px;
}
.closing-section .sub-section-content > .row-wrapper > .row:not(.wide) > [class^="col-"]:first-child > *,
.closing-section .sub-section-content > .row:not(.wide) > [class^="col-"]:first-child > * {
margin-left: 0;
}
.site-content > .row.wide > [class^="col-"],
.sub-section-content > .row-wrapper > .row.wide > [class^="col-"],
.sub-section-content > .row.wide > [class^="col-"] {
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.site-content > .row,
.site-content > form > .row,
.site-content > .form-section > .row,
.site-content > .form-section > .row-wrapper > .row {
background: transparent;
}
.tiles > .row,
.content-site > .row {
margin-left: 0;
margin-right: 0;
}
.content-site > .row > .col-xs-12,
.content-site > .row > .col-md-12,
.content-site > .row > .col-lg-12 {
margin-bottom: 15px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background: rgb(255,255,255);
}
.content-site.newsfeed > .row > *,
.content-site > .row.closing-section > .col-xs-12,
.content-site > .row.closing-section > .col-md-12,
.content-site > .row.closing-section > .col-lg-12 {
background: transparent;
}
.main-content-header {
margin-left: 0;
margin-right: 0;
}
.main-content-header .row > * {
padding-left: 0;
padding-right: 0;
}
.site {
margin: 0 -15px;
}
.site > header,
.site > form > header {
background: none;
}
.site > header > .row > div:last-child,
.site > form > header > .row > div:last-child {
padding-bottom: 0;
}
.site-content > * {
padding: 0;
}
.site-content > .row > div {
margin: 0;
background: none;
}
.sub-section {
padding: 0;
background: none;
}
.sub-section-content > .row-wrapper > .row,
.sub-section-content > .row {
margin-left: 0px;
margin-right: 0px;
}
.left-col {
padding-left: 25px;
}
.right-col {
padding-right: 25px;
}
.col-lg-12 {
padding-right: 25px;
padding-left: 25px;
}
.closing-section .col-lg-12 {
padding-right: 20px;
padding-left: 20px;
}
.form-section > .row-wrapper > .row,
.form-section > .row,
.form-section .sub-section-content > .row-wrapper > .row,
.form-section .sub-section-content > .row {
padding: 25px 0;
}
.form-section .row > * > .radio,
.form-section .row > * > .form-control,
.form-section .row > * > .select-styler {
margin-bottom: 0;
}
.form-inline {
margin: 0;
}
.form-group {
margin-bottom: 15px;
}
.form-group .btn {
margin: 0;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
padding: 8px;
}
.table-wrapper {
width: -webkit-calc( 100% + 30px );
width: calc( 100% + 30px );
margin-left: -15px;
}
.table-wrapper.wide,
.tile .table-wrapper {
margin-left: 0;
margin-right: 0;
}
.separated-cols > [class^="col-"]:not(:last-child) {
border-right: 1px solid rgb(238,238,238);
}
.nav-tabs {
margin-bottom: 0;
}
.nav-tabs > li {
font-size: .88888rem;
}
.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
padding: 9px 15px;
line-height: 14px;
}
.nav-tabs > li:not(:nth-child(1n + 3)):not(:last-child) > a::after {
top: 5px;
height: 22px;
}
.nav-tabs > li:nth-child(1),
.nav-tabs > li:nth-child(3) {
width: 128px;
}
.nav-tabs > li:nth-child(2) {
width: 187px;
}
.nav-tabs > li:nth-child(1n + 4) {
width: 443px;
margin-top: 5px;
}
.tabs .participant-search-name .form-inline,
.tabs .participant-search-username .form-inline,
.tabs .participant-search-mail .form-inline {
margin-top: 40px;
}
.tabs .search-form .form-control {
width: 100%;
}
.tabs .search-form .btn {
margin-left: 10px;
}
option {
padding: 5px 12px;
}
.datepicker-title .form-control,
.tile header .form-control,
.tile .form-control {
height: 30px;
padding: 0 8px;
font-size: .77777rem;
}
textarea.form-control {
padding: 10px;
}
.datepicker-title .select-styler::after,
.tile header .select-styler::after,
.tile .select-styler::after {
height: 30px;
width: 30px;
}
body.ie .datepicker-title .select-styler::after,
body.ie .tile header .select-styler::after,
body.ie .tile .select-styler::after {
width: 34px;
}
.select-styler.inline-select {
width: 165px;
}
.select-styler.inline-select > .form-control {
min-width: 165px;
}
.table-wrapper {
width: auto;
margin-left: 0;
}
.tile .table th,
.tile .table td {
line-height: 1.11111rem;
}
.btn {
height: 40px;
width: auto;
padding: 0 30px;
font-size: 1rem;
line-height: 38px;
}
.btn-icon-text {
line-height: 1.2rem;
}
.btn.right:last-child {
margin-right: 0 !important;
}
.tile-content .table .btn,
.table .btn {
height: 30px;
font-size: .77777rem;
line-height: 28px;
}
.btn-sm {
width: 165px;
padding: 0;
}
.btn-md {
width: 225px;
padding: 0;
}
.btn-lg {
width: 225px;
padding: 0;
}
.btn-icon {
height: 40px;
width: auto;
padding: 0;
border: none;
}
.btn-icon .svg-icon {
height: 40px;
width: 30px;
padding: 5px 0;
}
.btn-icon:focus {
outline: 1px dotted rgb(93,93,93);
}
.btn-icon-text {
max-width: -webkit-calc(100% - 35px);
max-width: calc(100% - 35px);
}
.half.left > .btn-icon.btn-icon-text,
.form-inline .btn-icon {
margin-left: 5px;
line-height: 1.11111rem;
}
.btn-text {
margin-left: 5px;
font-size: 1rem;
}
.form-inline .checkbox label,
.form-inline .radio label {
padding-left: 30px;
}
.form-inline .checkbox,
.form-inline .radio {
display: inline-block;
}
.form-inline .form-group {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
.sub-section-content > hr,
.sub-section-content > .row-wrapper > hr,
.form-section > .row:not(:last-of-type)::after,
.form-section > .row-wrapper > .row:not(:last-of-type)::after {
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
.sub-section-content > .row-wrapper > hr.half,
.sub-section-content > hr.half {
width: -webkit-calc(50% - 35px);
width: calc(50% - 35px);
margin: 10px 35px;
}
.checkbox.inline > label {
padding-left: 30px;
}
.checkbox label,
.radio label {
min-height: auto;
padding-left: 30px;
line-height: 20px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.checkbox label .checkbox-desc::before,
.checkbox label .checkbox-desc::after {
left: -30px;
height: 20px;
width: 20px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.checkbox label .checkbox-desc::after {
background-image: url("data:image/svg+xml;utf8,"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Qzg3N0Q3MEY1MjJDMTFFNUFDNkRFRkQ1NzRBRERFOEIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Qzg3N0Q3MTA1MjJDMTFFNUFDNkRFRkQ1NzRBRERFOEIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDODc3RDcwRDUyMkMxMUU1QUM2REVGRDU3NEFEREU4QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDODc3RDcwRTUyMkMxMUU1QUM2REVGRDU3NEFEREU4QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlN28hIAAAKrSURBVHja7JlNSFRRFMdnUqwZF2EfuCgwFCTculA0rDYVlWGSICEDIi6SQAkFXeguIqIIwk30QUShtjGkWhgq6SKDIFCDBDdhRNDGDxAVm/4X/sUg887c9+Y+vQ/egR/DcO7cuefed8//nJloMpmMBNn2RAJuYQBhAFlabiKRCMpai8FDcBqsg5egIzcgiy8EY6CI72OgBeQH4RGKgzcpi0+1K7YHkAMGQbmDf8X2AB6Ai4K/1+YAOsE1wX8P9NsaQAO4I/gHGaCVOnACPBf8E0Dl/qSNAZSCYbDXwT8D6sCGjUp8GLwDBx38i+A8WLKxlFC5foRqm87Uos8xCOtqoRw+8xUOfvW4XAJzthZzd0G9g09d1CbwwdZqtJ042Q3wytZy+jLFSBKq+7b2A5XghfD9/4XKxgBKmHFiOkJlWwAqx78Fh3SFKmNHlpLKyrkrn8GqD4vfB15TbbWFSucE1IRfwTSPb5HFlEmLMtdXuxUqnQCebduV/WAoQ3pza7dV9+RFqHQCqHTwqRR2i7uXjbWBLq9CpRPAvODvBo95R7xYLbsqz0KlE0ArWBPGNPPyxV3OrZLCgJDptIRKJwB1fKfAb2HcBTAKDmjOe4y/JMSzFSpdHfjETui7MLYKTIKjGeYsYF1faEKo3AjZNy5yVhhfBj7yNZ3lsaM6bkqo3CrxD57ElPCZIzyJqjS5/imoMSlUXkoJ9QVnuJNOpu7Ce96Nf3YTXDUtVF5roTUKzyPhszFmp2Zmsh4/hEq3FkpnW1zYT9ArtINPwB+/hMpENdoHrguLlObJWqhMldP9oBFsupjbiFCZ7AfUTp4FyxpjjQmV6YZmHJwEv4QxRoXKj47sC+v6hZ0QKr9aygWW4apvWOfdGGauX4rsoEXDf+rDAMIAwgB21f4KMADWWI+TVoSR8AAAAABJRU5ErkJggg==");
background-size: 14px 14px;
-webkit-transform: translateX(-5px) rotate(-60deg);
-ms-transform: translateX(-5px) rotate(-60deg);
transform: translateX(-5px) rotate(-60deg);
}
.checkbox label input:checked + .checkbox-desc::after {
-webkit-transform: translateX(0px) translateY(0) rotate(0deg);
-ms-transform: translateX(0px) translateY(0) rotate(0deg);
transform: translateX(0px) translateY(0) rotate(0deg);
}
.form-inline .form-control,
.form-control,
input.form-control {
height: 40px;
width: 100%;
}
select.form-control {
padding: 0 30px 0 10px;
}
.select-styler::after {
height: 40px;
width: 40px;
}
body.ie .select-styler::after {
width: 49px;
}
input[type="radio"] {
height: 20px;
width: 20px;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
height: 20px;
width: 20px;
border-radius: 10px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
input[type="radio"]:not([disabled="disabled"]):hover + label::after,
input[type="radio"]:not([disabled="disabled"]):focus + label::after {
left: 5px;
top: 5px;
height: 10px;
width: 10px;
border-radius: 5px;
}
input[type="radio"]:checked + label::after,
input[type="radio"]:checked:hover + label::after,
input[type="radio"]:checked:focus + label::after {
left: 5px;
top: 5px;
height: 10px;
width: 10px;
border-radius: 5px;
background: rgb(0,48,135);
}
.middle-aligned input[type="radio"] + label::after {
top: -webkit-calc( 50% - 10px );
top: calc( 50% - 10px );
}
.middle-aligned input[type="radio"]:not([disabled="disabled"]):hover + label::after,
.middle-aligned input[type="radio"]:not([disabled="disabled"]):focus + label::after {
top: -webkit-calc( 50% - 5px );
top: calc( 50% - 5px );
}
.middle-aligned input[type="radio"]:checked + label::after,
.middle-aligned input[type="radio"]:checked:hover + label::after,
.middle-aligned input[type="radio"]:checked:focus + label::after {
top: -webkit-calc( 50% - 5px );
top: calc( 50% - 5px );
}
textarea.form-control,
.select-styler {
width: 100%;
}
.half {
width: 50% !important;
}
.half:last-child:not(.half-sm) {
padding-bottom: 0;
}
.btn + .btn {
margin-left: 30px;
}
.col-sm-6 .btn-md {
width: 100%;
}
.lightbox-content .btn + .btn {
margin-left: 0;
}
input.form-control.input-xs {
height: 40px;
width: 62px;
min-width: 62px;
}
/* Dropdown */
.dropdown-menu {
right: -6px;
padding: 27px 0 0;
font-size: 14px;
}
.dropdown-menu > li > a {
width: 39px;
margin: 0 3px;
}
.dropdown-menu > li > a:hover::before,
.dropdown-menu > li > a:hover::after {
width: 3px;
}
.dropdown-menu > li > a:hover::before,
.dropdown-menu > li > a:focus::before {
left: -3px;
}
.dropdown-menu > li > a:hover::after,
.dropdown-menu > li > a:focus::after {
right: -3px;
}
.btn-icon-text .btn-text {
max-width: -webkit-calc(100% - 30px);
max-width: calc(100% - 30px);
}
.has-inline-btn .form-control {
width: 100%;
}
/* File Input */
.upload-form .btn {
width: 137px;
}
.form-inline.upload-form #submitbutton {
margin-top: 0;
}
.form-inline.upload-form .form-group {
width: 292px;
}
.form-inline .form-group.form-sm {
width: 225px;
}
/* Download */
.download-link-wrapper {
padding-left: 15px !important;
}
.download-link {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
/* LOGOUT START */
@media (max-width:1200px) {
.icon-logout{
display: inline-block;
width: 35px;
height: 33px;
}
.logout-link {
font-size: 0;
}
.btn-logout {
height: 70px;
width: 60px;
margin-left: 20px;
display: flex;
}
}
/* LOGOUT END */
@media (min-width:1420px) {
.row > .col-lg-8 > .inner-col-row-group > .inner-col-row > .half:first-child,
.row > .col-lg-8 > .inner-col-row > .half:first-child,
.row > .col-lg-8 > .half:first-child {
width: -webkit-calc( 50% - 5px ) !important;
width: calc( 50% - 5px ) !important;
}
.container {
width: 1170px;
}
.left-col {
padding-left: 35px;
}
.right-col {
padding-right: 35px;
}
.col-lg-12 {
padding-right: 35px;
padding-left: 35px;
}
.col-sm-6 .btn-md {
width: 225px;
}
.btn-lg {
width: 262px;
}
/* File Input */
.upload-form .btn {
width: 165px;
}
.form-inline.upload-form .form-group {
width: 360px;
}
.form-inline .form-group.form-sm {
width: 260px;
}
}
/***************************************/
/* INITIAL STYLES */
html {
box-sizing: border-box;
font-size: 24px;
}
html *, html *::before, html *::after {
box-sizing: inherit;
}
body {
font-size: .8333rem;
}
header, nav, section, article, aside, footer, figure, figcaption {
display: block;
}
.left {
float: left;
}
.right {
float: right;
}
.half.left,
.half.right {
float: none;
}
/* Mobile: Wenig Nutzen ("Neue Leistung")
.half {
padding-bottom: 30px;
}
*/
.half:last-child:first-child:not(.half-sm) {
padding: 0 0 15px;
}
.inner-col-row .half:last-child:first-child:not(.half-sm) {
padding-bottom: 0;
}
/*
.inner-col-row:not(:first-child) {
margin-top: 30px;
}
*/
.half-sm.left {
float: left;
}
.half-sm.right {
float: right;
}
.half-sm {
width: 50%;
}
.has-inline-btn .btn-icon {
margin-top: 0;
margin-bottom: 0;
}
/***************************************/
/* COMMON STYLES */
body {
min-width: 600px;
background: rgb(238,238,238);
font-family: 'OpenSans-Regular', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.33333rem;
letter-spacing: .01rem;
color: rgb(93,93,93);
opacity: 1 !important;
}
iframe {
border: none;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-top: 10px;
margin-bottom: 10px;
}
h1,
div.site-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.91666rem;
color: rgb(0,48,135);
}
div.site-title {
color: rgb(93,93,93);
}
h2 {
font-size: 1.33333rem;
font-weight: 400;
line-height: 1.58333rem;
color: rgb(93,93,93);
}
h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5rem;
color: rgb(0,48,135);
}
h4 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5rem;
color: rgb(0,48,135);
}
h5 {
font-size: 1.08333rem;
font-weight: 400;
line-height: 1.41666rem;
color: rgb(93,93,93);
}
h6 {
margin: 0 0 6px 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.33333rem;
color: rgb(0,48,135);
}
h6.wrong-input {
color: rgb(195,26,25);
}
a {
color: rgb(0,48,135);
}
a:hover,
a:focus {
color: rgb(0,48,135);
text-decoration: underline;
}
.success {
color: rgb(115,155,75) !important;
}
.form-control.success {
border-color: rgb(115,155,75) !important;
}
.form-control.success:focus {
-webkit-box-shadow: 0 0 0 1px rgb(115,155,75);
box-shadow: 0 0 0 1px rgb(115,155,75);
}
.info {
color: rgb(0,48,135) !important;
}
.warning {
color: rgb(230,160,0) !important;
}
.form-control.warning {
border-color: rgb(230,160,0) !important;
}
.form-control.warning:focus {
-webkit-box-shadow: 0 0 0 1px rgb(230,160,0);
box-shadow: 0 0 0 1px rgb(230,160,0);
}
.danger {
color: rgb(195,26,25) !important;
}
.form-control.danger {
border-color: rgb(195,26,25) !important;
}
.form-control.danger:focus {
-webkit-box-shadow: 0 0 0 1px rgb(195,26,25);
box-shadow: 0 0 0 1px rgb(195,26,25);
}
hr {
border-color: rgb(238,238,238);
}
hr.no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
hr.dark-hr {
border-color: rgb(93,93,93);
}
ul,
ul.inner-list {
list-style-type: '-';
}
ol.list-letters {
list-style-type: lower-alpha;
}
img[src*="svg"] {
height: 0;
width: 0;
}
.svg-icon {
height: 100%;
width: 100%;
fill: rgb(93,93,93);
}
.svg-icon.positive-icon {
fill: rgb(115,155,75);
}
.svg-icon.negative-icon {
fill: rgb(195,26,25);
}
.table-fixed-width {
table-layout: fixed;
width: 1300px;
max-width: unset;
}
.table-no-break td,
.table-no-break th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: .1 !important;
vertical-align: middle !important;
}
.preview-table th {
padding-top: 0 !important;
padding-bottom: 0 !important;
vertical-align: bottom !important;
line-height: unset !important;
font-size: 1.125rem;
color: rgb(0,48,135);
}
.preview-table td {
font-size: 1.125rem;
}
.table .button-td {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: transparent !important;
text-align: right;
}
.table .checkbox {
margin: 0;
}
.table th .svg-icon {
height: 40px;
width: 40px;
vertical-align: bottom;
}
.table-validation-error-container {
padding: 10px;
border: 1px solid rgb(195,26,25);
}
.validation-message-text-more {
width: 100%;
margin: 20px 0;
}
.validation-message-container {
overflow: hidden;
max-height: 0px;
margin-bottom: 20px;
-webkit-transition: max-height .5s;
transition: max-height .5s;
}
.validation-message-container.open {
max-height: 200px;
}
.validation-message-content {
overflow: auto;
max-height: 200px;
padding: 10px;
border: 1px solid rgb(93,93,93);
}
h6 .svg-icon {
height: 28px;
width: 30px;
}
::-webkit-input-placeholder {
font-style: italic;
}
::-moz-placeholder {
font-style: italic;
}
:-ms-input-placeholder {
font-style: italic;
}
input:-moz-placeholder {
font-style: italic;
}
/***************************************/
/* SECTION STYLES */
.bold-headline {
font-weight: 700;
color: rgb(0,48,135);
}
h6.icon-headline {
margin: -6px 0 4px;
}
.subheadline {
font-size: 1rem;
}
.gray-link,
.edit-link {
color: rgb(93,93,93);
text-decoration: underline;
}
.edit-link {
font-size: 1rem;
}
.positive-highlight {
color: rgb(115,155,75);
}
.sub-section.numbered {
counter-increment: section-number;
}
.sub-section.numbered > h1::before {
content: counter(section-number) ". ";
}
.sub-section.sub-numbered {
counter-increment: section-sub-number;
}
.sub-section.sub-numbered > h1::before {
content: counter(section-number) "." counter(section-sub-number) " ";
}
.inner-col-row-group:not(:first-child) {
margin-top: 30px;
}
/*
.site-content h2 {
font-size: 1.125rem;
}
*/
.site-title-addition {
font-weight: 400;
}
.video-js {
min-width: 100%;
width: 100% !important;
height: 335px !important;
}
.highlight-box {
margin: 0 -15px;
padding: 20px;
border: 15px solid rgb(0,48,135);
}
.header-search {
top: 0;
}
.header-search .search-form {
display: inline-block;
}
.responsive-image {
width: 100%;
}
/***************************************/
/* SITE SECTIONS */
body {
width: 100%;
overflow-x: hidden;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
body.open {
position: fixed;
-webkit-transform: translateX(480px);
-ms-transform: translateX(480px);
transform: translateX(480px);
}
body.toggling {
position: fixed;
}
.main-wrapper {
position: static;
}
.breadcrumbs {
margin: -5px 0 0 0;
padding: 5px 0 0 0;
}
.breadcrumbs li {
display: inline-block;
font-size: .83333rem;
}
.breadcrumbs li:not(:last-child)::after {
content: '';
background: url("data:image/svg+xml;utf8,");
background-size: .75rem .75rem;
background-repeat: no-repeat;
background-position: center bottom;
display: inline-block;
height: .75rem;
width: .75rem;
margin: 0 5px 0 0;
-webkit-transform: translateX(1px);
-ms-transform: translateX(1px);
transform: translateX(1px);
}
body.ie .breadcrumbs li:not(:last-child)::after {
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjEnIHZpZXdCb3g9JzAgMCAxOS43MiA1MS4yMDEnIGNsYXNzPSdzdmctYmFzZSBzdmctaWNvbi1hcnJvdy1yaWdodCc+PGcgdHJhbnNmb3JtPSdtYXRyaXgoNC4yMzY5Nzc3LDAsMCwtNC4yMzY5Nzc3LC0xOC4wNjMzODksMTA3LjgzNzQ3KScgc3R5bGU9J2ZpbGw6ICUyMzVkNWQ1ZDsnPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDkuMTU5MiwxOC42MzI4KSc+PHBhdGggZD0nbTAgMCAwLjc1NCAwLjc1NC02LjAzNSA2LjAzNi0wLjc1NC0wLjc1NCA1LjI4LTUuMjgyLTUuMjU1LTUuMjU2IDAuNzU0LTAuNzU0IDMuMDEzIDMuMDE0eicvPjwvZz48L2c+PC9zdmc+");
}
.breadcrumbs li > * {
display: inline-block;
margin: 0 5px 0 0;
color: rgb(93,93,93);
}
.main-content-header .banner {
margin-top: -15px;
margin-bottom: 5px;
}
.banner-image {
width: 100%;
max-height: 160px;
background: rgb(158,158,158);
}
.breadcrumb-row {
margin-bottom: 10px;
}
.breadcrumb-row > * {
padding: 0;
}
.main {
max-width: 1420px;
padding-left: 0;
}
.main-content {
max-width: 1200px;
}
.main-header {
position: relative;
z-index: 24; /* Fix for stacking error (4.4.16) */
height: 119px;
border-top: 8px solid rgb(191,0,51);
border-bottom: 1px solid rgb(10,58,145);
background: rgb(255,255,255);
}
.main-header-content {
position: relative;
min-width: 600px;
max-width: 1420px;
}
/***************************************/
/* HEADER: System Nav */
.system-nav {
display: none;
float: right;
padding: 0 30px 0 0;
}
.system-nav-mobile {
margin: 0 25px 0 20px;
font-size: 1.25rem;
font-weight: 400;
}
.system-nav-list {
float: right;
margin: 0;
padding: 0;
}
.system-nav-mobile .system-nav-list {
float: none;
}
.system-nav-list-item {
display: inline;
margin: 0 .875rem;
list-style: none;
font-size: .77777rem;
color: rgb(0,48,135);
}
.system-nav-mobile .system-nav-list-item {
display: block;
height: 90px;
margin: 0;
font-size: 1.25rem;
line-height: 1.25rem;
font-weight: 400;
}
.system-nav-mobile .system-nav-list {
padding: 30px 0 0;
}
.system-nav-mobile .system-nav-list-item:nth-last-child(1),
.system-nav-mobile .system-nav-list-item:nth-last-child(2) {
margin-bottom: 65px;
}
.system-nav-mobile .system-nav-list-item:nth-last-child(1) {
float: right;
}
.system-nav-mobile .system-nav-list-item:nth-last-child(2) {
float: left;
}
.system-nav-mobile.left-aligned .system-nav-list-item {
float: none !important;
}
.system-nav-mobile.left-aligned .system-nav-list-item:not(:first-child) {
margin: 0 !important;
}
.system-nav-list-item:first-child {
margin-left: 0;
}
.system-nav-list-item:last-child {
margin-right: 0;
}
.system-nav-current-language {
padding-left: 5px;
margin-left: 5px;
border-left: 1px solid rgb(206,206,206);
font-weight: 600;
}
.system-nav-language.open .system-nav-current-language {
border-color: rgb(0,48,135);
}
.system-nav-language-helper {
display: inline-block;
height: 10px;
width: 13px;
margin-left: 4px;
}
.system-nav-mobile .system-nav-language-helper {
height: 20px;
width: 30px;
}
.system-nav-language-helper svg {
fill: rgb(0,48,135);
}
.system-nav-logout .svg-icon {
position: relative;
top: 7px;
height: 24px;
width: 24px;
margin-left: 5px;
}
.system-nav-mobile .system-nav-logout {
display: block;
position: relative;
top: -7px;
}
.system-nav-mobile .system-nav-logout .svg-icon {
position: relative;
height: 35px;
width: 40px;
margin-left: 13px;
}
/***************************************/
/* HEADER: Customer/User */
.customer-user-data {
float: left;
height: 28px;
margin: 25px 0;
padding: 0 5px 0 15px;
}
.customer-logo-frame {
height: 28px;
line-height: 0;
max-width: 200px;
margin: 0 auto;
width: 100%;
}
.customer-logo-frame > a {
display: block;
height: 100%;
background: url('/images/shop/microsites/gosprint/logo.svg') no-repeat center center;
background-size: contain;
}
.customer-logo {
position: relative;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.current-user {
display: none;
position: absolute;
top: 20px;
right: 122px;
}
.user-pic-frame {
position: relative;
overflow: hidden;
background: rgb(0,48,135);
margin: 5px 0px;
}
.current-user .user-pic-frame {
float: left;
height: 60px;
width: 60px;
border-radius: 30px;
}
.current-user .user-pic-frame.icon-user-pic {
overflow: visible;
background: none;
border-radius: none;
}
.user-pic {
float: left;
position: absolute;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.current-user-mobile .user-name,
.current-user-mobile .user-credits {
display: block;
}
.current-user-mobile .user-credits,
.current-user-mobile .user-credits {
padding-top: 12px;
padding-bottom: 5px;
color: rgb(115,155,75);
}
.current-user-mobile .user-credits-currency {
color: rgb(93,93,93);
}
.current-user-mobile .user-pic-frame {
height: 212px;
width: 212px;
margin: 20px auto;
border-radius: 106px;
}
.current-user-mobile .user-pic {
float: none;
}
.current-user-mobile .user-name {
font-size: 40px;
}
.current-user-mobile .credit-motivation {
font-size: 24px;
}
.current-user-mobile .user-credits,
.current-user-mobile .user-status {
font-size: 30px;
}
.current-user .user-main-info,
.current-user .user-status,
.current-user .credit-motivation {
display: none;
}
.current-user-mobile {
width: 480px;
height: 455px;
border-right: 1px solid rgb(10,58,145);
border-bottom: 1px solid rgb(0,48,135);
text-align: center;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
.user-main-info {
font-size: 1.11111rem;
line-height: 1.22222rem;
}
.user-main-info .user-name {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-status,
.credit-motivation {
font-size: .77777rem;
}
.user-status-current {
font-weight: 600;
}
.credit-motivation-link {
color: rgb(93,93,93);
text-decoration: underline;
}
.notifications-list {
float: right;
height: 70px;
width: 191px;
margin: 20px 0 0 0;
padding: 0 24px 0 0;
text-align: right;
}
.notifications-list-item.notifications-credit,
.notifications-list-item.notifications-cart {
height: 70px;
width: 60px;
margin: 0 0 0 20px;
}
.notifications-list-count {
position: absolute;
display: block;
top: 2px;
left: -12px;
height: 36px;
min-width: 36px;
padding: 3px 3px 3px 1.5px;
border-radius: 18px;
background: rgb(0,48,135);
color: rgb(255,255,255);
text-align: center;
font-size: 1.083333rem;
line-height: 1.2rem;
font-weight: 700;
letter-spacing: -1px;
}
.notifications-list .notifications-messages .notifications-list-count {
background: rgb(230,160,0);
}
.notifications-list .notifications-reminder .notifications-list-count {
background: rgb(195,26,25);
}
.notifications-list .notifications-messages,
.notifications-list .notifications-reminder {
display: none;
}
.notifications-list-item {
position: relative;
display: inline-block;
margin: 0 0 0 30px;
list-style: none;
height: 30px;
width: 30px;
}
.notifications-list-item.open .notifications-list-link .svg-icon {
fill: rgb(0,48,135);
}
.notifications-list-link {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
}
.notifications-list-mobile .notifications-list-item {
display: block;
height: auto;
width: auto;
margin: 0;
}
.notifications-list-mobile .notifications-list-link {
display: block;
height: 100px;
width: 100%;
padding: 25px;
}
.notifications-list-mobile .notifications-list-link svg {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 20px;
vertical-align: middle;
}
.notifications-box {
position: absolute;
display: none;
z-index: 100;
top: 85px;
right: -15px;
max-height: 400px;
width: 505px;
border: 1px solid rgb(0,48,135);
background: rgb(255,255,255);
overflow-y: auto;
}
.notifications-box .btn,
.notifications-box .form-control {
width: 100%;
margin-top: 15px;
}
.notifications-box hr {
margin: 5px 0;
}
.notifications-box li,
.notifications-box div,
.notifications-box h6,
.notifications-box p {
font-size: .75rem;
line-height: 1rem;
}
.notifications-box h6,
.notifications-box p {
margin: 0;
}
.notifications-message-text-more {
font-style: italic;
}
.notifications-list-item.open::after {
content: "";
position: absolute;
display: block;
z-index: 101;
top: 75px;
right: 23px;
height: 20px;
width: 20px;
border-top: 1px solid rgb(0,48,135);
border-left: 1px solid rgb(0,48,135);
border-bottom: 1px solid rgb(255,255,255);
border-right: 1px solid rgb(255,255,255);
background: rgb(255,255,255);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.notifications-box-content {
height: 100%;
width: 100%;
min-height: 30px;
overflow-y: auto;
}
.notifications-box-messages .notifications-box-content {
display: block;
}
.notifications-box-messages .session-required,
.notifications-box-messages ul {
display: block;
padding: 15px;
}
.notifications-box-messages li {
display: block;
padding: 10px 0;
border-bottom: 1px solid rgb(206,206,206);
}
.notifications-box-messages li:first-child {
padding-top: 0;
}
.notifications-box-messages li:last-child {
padding-bottom: 0;
border-bottom: none;
}
.notifications-mobile-box {
display: none;
font-size: 1rem;
line-height: 1.2rem;
}
.notifications-mobile-box.notifications-box-messages ul {
padding-top: 0;
}
.notifications-mobile-box.notifications-box-messages li {
padding: 10px;
border: none;
}
.minibasket-container-active {
margin: 15px 15px 0 15px;
overflow: hidden;
text-align: left;
}
.minibasket-item-list {
margin: 0;
padding: 0;
}
.minibasket-item {
display: block;
list-style: none;
}
.minibasket-item-label {
font-weight: 600;
}
.button-text-separator {
margin: 0 1rem;
border-left: 1px solid rgb(255,255,255);
vertical-align: baseline;
}
/***************************************/
/* HEADER: Main Nav */
.toggle-sub-open ~ .main-nav {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
.main-nav-wrapper {
position: absolute;
z-index: 9;
top: 0px;
width: 480px;
border-top: 8px solid rgb(191,0,51);
-webkit-transform: translate3d(-480px, 0px, 0px);
transform: translate3d(-480px, 0px, 0px);
}
.open .main-nav-wrapper {
z-index: 0;
}
.remove-helper {
position: relative;
background: rgb(238,238,238);
z-index: 22; /* fix for stacking error (4.4.16) */
}
.menu-panel-close {
display: block;
height: 110px;
padding: 25px;
border-bottom: 1px solid rgb(10,58,145);
background: rgb(255,255,255);
line-height: 55px;
font-weight: 400;
color: rgb(93,93,93);
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
.menu-panel-close:hover,
.menu-panel-close:focus {
text-decoration: none;
}
.menu-panel-close svg {
height: 50px;
width: 28px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.menu-panel-close:hover svg,
.menu-panel-close:focus svg {
fill: rgb(0,48,135);
}
.main-nav-sub-toggle.toggle-sub-open {
z-index: 1;
}
.main-nav {
height: -webkit-calc(100vh - 15px);
height: calc(100vh - 15px); margin-left: 0;
background: rgb(255,255,255);
border-right: 1px solid rgb(10,58,145);
font-size: 1.25rem;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
z-index: 11;
}
.main-nav.show {
overflow: hidden;
}
.main-nav-list {
width: -webkit-calc(100% + 1px);
width: calc(100% + 1px);
margin: 0;
padding: 0;
background: rgb(255,255,255);
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
.main-nav-sub-open .main-nav-list-item {
overflow: visible;
}
.slideout-panel {
z-index: 1;
}
.toggle-button {
float: left;
height: 40px !important;
width: 60px !important;
margin: 35px 0 0 24px;
padding: 0;
border: none;
background: none;
}
.toggle-button .svg-icon {
display: block;
fill: rgb(0,48,135);
}
.menu-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: -webkit-calc( 100vh - 8px );
height: calc( 100vh - 8px );
background: rgb(255,255,255);
-webkit-box-shadow: -30px 0px 20px -20px rgba(0,0,0,.3);
box-shadow: -30px 0px 20px -20px rgba(0,0,0,.3);
visibility: visible;
-webkit-transition: left .5s, opacity 0s .5s, visibility 0s .5s;
transition: left .5s, opacity 0s .5s, visibility 0s .5s;
}
.menu-panel.first-level {
border-right: 1px solid rgb(10,58,145);
}
.menu-panel-title {
height: 62px;
padding: 20px 25px;
border-bottom: 1px solid rgb(10,58,145);
background-color: rgb(0,48,135);
line-height: 22px;
font-weight: 600;
color: rgb(255,255,255);
}
.menu-panel.first-level {
z-index: 12;
left: 480px;
overflow-y: auto;
overflow-x: hidden;
}
.menu-panel.second-level {
z-index: 13;
left: 0;
}
.menu-panel:not(.open) {
opacity: 0;
visibility: hidden;
}
.menu-panel.open {
left: 0;
-webkit-transition: left .5s;
transition: left .5s;
}
.menu-panel.first-level.open {
left: 0;
}
body.open .menu-panel.second-level {
left: 480px;
width: -webkit-calc( 100% + 1px );
width: calc( 100% + 1px );
}
body.open .menu-panel.second-level.open {
left: 0;
overflow: visible;
-webkit-box-shadow: 0 -webkit-calc(100vh - 8px) 0 0 rgb(255,255,255), -30px 0px 20px -20px rgba(0,0,0, 0.3);
box-shadow: 0 calc(100vh - 8px) 0 0 rgb(255,255,255), -30px 0px 20px -20px rgba(0,0,0, 0.3);
background: rgb(255,255,255);
}
.main-content-helper {
display: block;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
margin-top: -119px;
background: #a6a6a6;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
-webkit-transition: height 0s .5s, opacity .5s, z-index .5s;
transition: height 0s .5s, opacity .5s, z-index .5s;
}
.open .main-content-helper {
z-index: 1000;
height: 100vh;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity .5s, z-index .5s;
transition: opacity .5s, z-index .5s;
}
.main-nav-list-item,
.main-nav-sub-list-item,
.main-nav-inner-list-item {
list-style: none;
line-height: 1.125;
color: rgb(0,48,135);
}
.main-nav-list-item {
border-bottom: 1px solid rgb(10,58,145);
font-weight: 700;
}
.main-nav-list-item.active {
border-right: none;
border-bottom: none;
}
.main-nav-sub-list-item,
.main-nav-inner-list-item {
font-weight: 400;
}
.main-nav-sub-list-item,
.main-nav-inner-list-item,
.notifications-list-mobile {
border-bottom: 1px solid rgb(10,58,145);
}
.main-nav-link,
.main-nav-sub-link,
.main-nav-inner-link {
display: block;
position: relative;
background: rgb(255,255,255);
}
.main-nav-link {
height: 90px;
}
.main-nav-sub-link,
.main-nav-inner-link {
height: 90px;
line-height: 1.1rem;
}
.main-nav-list-item.active .main-nav-link {
border-bottom: 0 none;
background: rgb(0,48,135);
color: rgb(255,255,255);
}
.main-nav-sub-list-item.active .main-nav-sub-link,
.main-nav-inner-list-item.active .main-nav-inner-link,
.active-category .main-nav-sub-link {
font-weight: 700;
}
.main-nav-link-content,
.main-nav-sub-link-content,
.main-nav-inner-link-content {
position: absolute;
top: 50%;
width: 100%;
padding: 0 40px 0 25px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.main-nav-link .svg-icon {
fill: rgb(0,48,135);
width: 30px;
height: 30px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 20px;
}
.main-nav-list-item.active .svg-icon {
margin-top: -7px;
fill: rgb(255,255,255);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.main-nav-sub-list,
.main-nav-inner-list {
margin: 0;
padding: 0;
}
/***************************************/
/* HOOK */
.row.hook-bottom-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding: 25px;
}
.btn-back.hook {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
margin-top: 10px;
}
.product-cart-button.hook,
.btn-back.hook .product-back-link {
width: 100%;
margin: 0;
}
.order-wrapper-hook {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0;
margin-top: 10px;
}
.product-cart-button .btn.hook {
margin: 0;
width: 100%;
}
/***************************************/
/* FOOTER */
.main-footer {
position: relative;
z-index: 8;
min-width: 600px;
margin-top: 15px;
background: rgb(255,255,255);
}
.main-footer-content {
max-width: 1420px;
padding: 0 30px;
}
.legals-nav-list {
margin: 0;
padding: 0;
text-align: center;
}
.legals-nav-list-item {
display: inline-block;
padding: 30px;
list-style: none;
}
.legals-nav-link {
text-decoration: underline;
font-weight: 400;
color: rgb(93,93,93);
}
.copyright {
background: rgb(158,158,158);
font-size: .875rem;
color: rgb(255,255,255);
}
.copyright-content {
min-width: 572px;
max-width: 1420px;
padding: 10px 30px;
}
.copyright-company {
margin-right: 70px;
}
.copyright-company,
.copyright-addition {
margin-top: 3px;
float: left;
}
.copyright-logo-frame {
float: right;
height: 25px !important;
width: 110px !important;
margin-left: 20px;
}
.copyright-logo {
display: block;
height: 100% !important;
width: 100% !important;
}
/***************************************/
/* TILE DEFINITION */
.tile {
position: relative;
background: rgb(255,255,255);
}
.site {
position: relative;
}
.tile-title,
.site-title {
display: inline-block;
width: 100%;
margin-top: 14px;
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: 1px solid rgb(10,58,145);
color: rgb(0,48,135);
}
.tile-title {
padding-bottom: 7px;
font-size: 1.25rem;
line-height: 1.25rem;
font-weight: 600;
}
.tile-footer,
.site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 15px 15px 15px;
font-size: 1rem;
}
.tile-footer {
padding: 0;
}
.thin-header > .row > div {
padding-top: 0;
padding-bottom: 0;
}
.tile-pagination {
position: absolute;
top: 9px;
right: 0;
padding-left: 0;
}
.content-pagination {
margin-top: 20px;
padding-left: 0;
}
.content-pagination li {
height: 100px;
}
.content-pagination li,
.tile-pagination li,
.table-pagination li {
display: inline-block;
vertical-align: middle;
}
.table-pagination .svg-icon {
padding: 10px;
}
.content-pagination .svg-icon,
.tile-pagination .svg-icon {
height: 30px;
vertical-align: middle;
}
.content-pagination li > *,
.tile-pagination li > *,
.table-pagination li > * {
display: block;
height: 80px;
width: 93px;
margin: 0 0 0 26px;
border: 1px solid rgb(93,93,93);
background: rgb(255,255,255);
line-height: 3rem;
text-align: center;
font-size: 1.25rem;
color: rgb(93,93,93);
}
.content-pagination li:first-child > * {
margin-left: 0;
}
.content-pagination li span.inactive {
border-color: rgb(206,206,206);
}
.content-pagination li span.inactive .svg-icon {
fill: rgb(206,206,206);
}
.content-pagination li .page-gap,
.tile-pagination li .page-gap,
.table-pagination li .page-gap {
display: block;
height: 80px;
width: 93px;
margin: 0 0 0 26px;
border: 1px solid transparent;
line-height: 3rem;
text-align: center;
font-size: 1.25rem;
color: rgb(93,93,93);
}
.content-pagination li:first-child a,
.tile-pagination li:first-child a,
.table-pagination li:first-child a {
margin: 0;
}
.content-pagination li a:hover,
.content-pagination li.active a,
.tile-pagination li a:hover,
.tile-pagination li.active a,
.table-pagination li a:hover,
.table-pagination li.active a {
background: rgb(93,93,93);
text-decoration: none;
color: rgb(255,255,255);
font-weight: 600;
}
.content-pagination li a:hover svg,
.content-pagination li.active a svg,
.tile-pagination li a:hover svg,
.tile-pagination li.active a svg,
.table-pagination li a:hover svg,
.table-pagination li.active a svg {
fill: rgb(255,255,255) !important;
}
.tile-footer-link,
.site-footer-link {
color: rgb(93,93,93);
text-decoration: underline;
}
.tile-footer-link:active,
.site-footer-link:active,
.tile-footer-link:hover,
.site-footer-link:hover {
font-weight: 600;
letter-spacing: -.01em;
}
.member-tile .tile-footer-right {
float: none;
}
.member-tile .tile-footer-link {
display: inline-block;
min-height: 80px;
height: 80px;
min-width: 100%;
padding: 22px 20px;
border: 1px solid rgb(0,48,135);
background: rgb(0,48,135);
font-size: 1.25rem;
text-decoration: none;
text-align: center;
color: rgb(255,255,255);
}
.user-overview {
height: 492px;
}
.awarded-points {
height: 430px;
}
.effort-review {
height: 542px;
}
.points-history {
height: 382px;
}
.media-library {
height: 496px;
}
.my-account {
height: 623px;
}
.member-tile.my-account {
height: 537px;
}
.news {
height: 478px;
}
.status-climb {
height: 431px;
}
.redeem-points {
height: 465px;
}
.reported-benefits {
height: 497px;
}
.web-statistics {
height: 1264px;
}
/***************************************/
/* CUSTOM TILES */
.awarded-points-table thead *,
.effort-review-table thead * {
padding-top: 0 !important;
}
.awarded-points-table-date,
.awarded-points-table-points,
.awarded-points-table-name,
.awarded-points-table-action {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.awarded-points-table-date {
width: 20%;
}
.awarded-points-table-points {
width: 12.5%;
}
.awarded-points-table-name {
width: 22.5%;
}
.awarded-points-table-action {
width: 45%;
}
.user-registrations-data {
margin-top: 35px;
}
.user-registrations-chart {
height: 124px;
width: 169px;
margin-top: 24px;
}
.user-registrations-chart-svg {
height: 100%;
width: 100%;
}
.user-registrations-chart-svg rect {
fill: rgb(0,48,135);
stroke: rgb(0,48,135);
shape-rendering: crispedges;
vector-effect: non-scaling-stroke;
-webkit-transition: height 1s ease 0s;
transition: height 1s ease 0s;
}
.user-registrations-chart-svg rect:hover {
fill: rgb(0,48,135);
stroke: rgb(0,48,135);
}
.site-content h2.user-registrations-title {
height: 56px;
margin-top: 0;
margin-bottom: 0;
font-size: .83333rem;
line-height: 1rem;
}
.user-registrations-new,
.user-registrations-overall,
.user-registrations-online {
float: left;
height: 236px;
width: 33.33333%;
padding: 0 10px;
}
.user-registrations-new,
.user-registrations-overall {
border-right: 1px solid rgb(238,238,238);
}
.user-registrations-new:first-child {
padding-left: 0;
}
.user-registrations-online:last-child {
padding-right: 0;
}
.user-registrations-quantity {
font-size: 1.33333rem;
font-weight: 700;
color: rgb(0,48,135);
}
.effort-review .tile-title {
height: 148px;
}
.effort-review .tile-pagination {
top: 63px;
}
.effort-review-table > thead > tr > th {
height: 44px !important;
}
.effort-review-table-date {
width: 13.5%;
}
.effort-review-table-points {
width: 8.5%;
}
.effort-review-table-name {
width: 18.5%;
}
.effort-review-table-action {
width: 31%;
}
.effort-review-table-check {
width: 16%;
background-color: transparent !important;
}
.effort-review-table-release {
width: 13.5%;
background-color: transparent !important;
text-align: right;
}
.tile .table.effort-review-table th,
.tile .table.effort-review-table td {
height: 50px;
}
.table > thead > tr > th.effort-review-table-check,
.table > tbody > tr > th.effort-review-table-release,
.table > tbody > tr > td.effort-review-table-check {
padding: 4px 2px 5px 30px;
}
.table > tbody > tr > td.effort-review-table-release {
padding: 2px;
}
.media-search .nav-tabs > li {
width: auto !important;
}
.media-search .nav-tabs > li > a {
padding: 0 15px;
}
.media-library .video-js {
margin-top: 5px;
}
.media-library h2 {
margin-bottom: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5rem;
}
.media-library p {
font-size: .83333rem;
line-height: 1rem;
}
.datepicker-title .tile-title {
height: 148px;
}
.datepicker {
position: absolute;
top: 63px;
right: 0;
}
.sub-section .datepicker {
right: auto;
}
.datepicker-view {
display: inline-block;
margin-right: 30px;
vertical-align: top;
}
.datepicker-view label {
font-weight: 400;
}
.datepicker-view-label {
display: none;
}
.datepicker-span {
display: inline-block;
width: 220px;
font-size: 1rem;
font-weight: 700;
}
.datepicker-span-picker {
display: inline-block;
height: 60px;
width: 60px;
margin: 10px 0;
vertical-align: top;
}
.datepicker-trigger {
position: absolute;
right: 0;
top: 10px;
height: 60px;
width: 60px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.datepicker-span-time {
display: inline-block;
vertical-align: top;
width: 153px;
padding: 8px 0;
border: none;
cursor: default;
}
.web-statistics-span-time .datepicker-trigger {
margin-right: 0;
}
.web-statistics-overview-element {
float: left;
height: 170px;
width: 50%;
}
.web-statistics-overview-title {
line-height: 1rem;
font-size: 1rem;
font-weight: 700;
}
.web-statistics-overview-total {
font-size: 1.66666rem;
font-weight: 600;
line-height: 2.25rem;
color: rgb(0,48,135);
}
.web-statistics-overview-info {
display: inline-block;
width: 180px;
font-size: 1rem;
line-height: 1.125rem;
vertical-align: top;
}
.web-statistics-overview-link {
position: relative;
display: inline-block;
top: -10px;
height: 60px;
width: 60px;
vertical-align: top;
}
.web-statistics-table {
table-layout: fixed;
width: 800px;
max-width: 800px;
counter-reset: row-number;
}
.table.web-statistics-table > tbody > tr > th {
padding-top: 0;
line-height: 1rem;
}
.table.web-statistics-table .web-statistics-table-page-mobile th {
padding-bottom: 0;
}
.web-statistics-table-page,
.web-statistics-table-visitors,
.web-statistics-table-duration,
.web-statistics-table-clicks,
.web-statistics-table-exits {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-statistics-table-duration::before,
.web-statistics-table-clicks::before,
.web-statistics-table-exits::before {
content: '';
position: absolute;
left: 0;
height: 38px;
width: 1px;
background: rgb(206,206,206);
}
.web-statistics-table > tbody > tr.web-statistics-table-separator > td {
padding-top: 10px;
padding-bottom: 0;
line-height: 1rem;
}
.web-statistics-table tr:not(.web-statistics-table-separator) > td {
padding-bottom: 10px;
}
.web-statistics-table-page {
width: 33%;
}
.web-statistics-table-visitors,
.web-statistics-table-clicks {
width: 18%;
font-weight: 700;
}
.web-statistics-table-duration {
width: 18%;
}
.web-statistics-table-exits {
width: 13%;
}
.web-statistics-table-visitors-relative,
.web-statistics-table-clicks-relative {
font-weight: 400;
}
.web-statistics-table-page a {
font-weight: 600;
}
.web-statistics-table-total {
font-size: 1.75rem;
font-weight: 600;
color: rgb(0,48,135);
}
.web-statistics-table-info {
font-size: 0.875rem;
font-weight: 400;
}
.web-statistics-table-page {
display: none;
}
.web-statistics-table-total,
.web-statistics-table-info {
display: none;
}
.web-statistics-table tr:nth-child(4n+3),
.web-statistics-table tr:nth-child(4n+3) + tr {
background-color: rgba(0,0,0,.05);
}
.web-statistics-table tr:not(:first-child):not(.web-statistics-table-separator):not(.web-statistics-table-page-header) {
counter-increment: row-number;
}
.web-statistics-table td.web-statistics-table-page::before {
content: counter(row-number) ". ";
font-weight: 700;
}
.web-statistics-table tr.web-statistics-table-separator:not(:first-child) {
counter-increment: row-number-mobile;
}
.web-statistics-table tr.web-statistics-table-separator td::before {
content: counter(row-number-mobile) ". ";
font-weight: 700;
}
.my-accounts-credits {
white-space: normal;
}
.my-account-level {
height: 50px;
width: 44px;
margin-left: 20px;
}
.my-account-level img {
height: 100%;
width: 100%;
}
.my-account-image-frame {
float: left;
position: relative;
height: 96px;
width: 96px;
margin: 0 0 5px 0;
border-radius: 105px;
margin: 0 65px;
overflow: hidden;
background: rgb(0,48,135);
}
.member-tile .my-account-image-frame {
float: left;
margin: 0 20px;
height: 210px;
width: 210px;
margin: 20px;
border-radius: 105px;
}
.my-account-image {
position: absolute;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.my-account-main-info {
height: 190px;
}
.my-account-name {
margin: 0;
line-height: 1.2rem;
}
.my-account-status {
line-height: 1rem;
}
.my-account-status-title,
.my-account-status-current {
font-size: .83333rem;
}
.my-account-status-current {
font-weight: 700;
}
.my-account-info-data {
float: right;
width: 260px;
text-align: center;
}
.my-account-info-data-status-icon {
height: 76px;
}
.my-account-info-data-status-icon img {
width: 100%;
height: 100%;
}
.my-account-info-data-name {
margin: 10px 0 0;
font-size: 1rem;
}
.my-account-info-data-name {
font-size: 1rem;
font-weight: 700;
}
.my-account-info-data-points-title {
font-size: .8333rem;
line-height: 1.25rem;
font-weight: 700;
}
.my-account-info-data-status-title {
font-size: .8333rem;
line-height: 1rem;
}
.my-account-info-data-status {
font-weight: 700;
}
.my-account-info-data-points {
margin-top: 10px;
line-height: 2rem;
font-size: 2.5rem;
font-weight: 700;
}
.my-account-badges {
clear: both;
margin: 68px 0 0 0;
}
.my-account-badge:first-child {
margin-left: 0;
}
.member-tile .my-account-badges {
margin: 20px 0 0 12px;
}
.my-account-badges-header {
float: left;
width: 150px;
margin: 10px 0;
font-size: .83333rem;
line-height: 1rem;
font-weight: 700;
}
.my-account-badges-content {
float: left;
}
.my-account-badge {
float: left;
height: 68px;
width: 68px;
margin: 0 20px;
}
.my-account-credit-view {
margin: 10px 0;
}
.my-account-credit-view > * {
display: inline-blick;
}
.points-history-credit-view-title,
.my-account-credit-view-title {
margin-right: 20px;
font-weight: 600;
}
.points-history .view-selection,
.my-account-credit-view .view-selection {
margin-right: 30px;
}
.tile .news-element {
min-height: 60px;
max-height: 113px;
padding: 20px 0;
overflow: hidden;
}
.tile .news-element:not(:last-child) {
border-bottom: 1px solid rgb(238,238,238);
}
.tile .news-element-content {
float: left;
width: -webkit-calc(100% - 80px - 80px);
width: calc(100% - 80px - 80px);
}
.tile .news-element-content p {
font-size: .83333rem;
line-height: 1rem;
hyphens: auto;
}
.tile .news-element-content h2 {
font-size: .83333rem;
margin: 0;
font-weight: 700;
line-height: 1.22222rem;
}
.tile .news-element-pic-frame {
float: left;
width: 60px;
margin: 0px 20px 0 0;
}
.tile .news-element:first-child {
padding: 12px 0 20px 0;
}
.tile .news-element-pic {
max-height: 60px;
max-width: 60px;
border-radius: 30px;
}
.tile .news-element-icon-frame {
float: right;
width: 60px;
margin: 0 0 0 20px;
}
.tile.redeem-points {
position: relative;
}
.tile.redeem-points header {
z-index: -1;
margin: 0px -15px;
background: none;
}
.tile.redeem-points h1 {
border-color: transparent;
}
.tile.redeem-points .tile-content {
height: -webkit-calc(100% + 30px);
height: calc(100% + 30px);
margin: -15px;
overflow: visible;
}
.redeem-points-teaser-link {
float: left;
width: 50%;
height: 50%;
padding: 15px;
text-align: center;
text-decoration: none;
background: rgb(191,0,51);
}
.redeem-points-teaser-link:first-child {
background: rgb(10,58,145);
}
.redeem-points-teaser-link:hover,
.redeem-points-teaser-link:active,
.redeem-points-teaser-link:focus {
text-decoration: none;
}
.redeem-points .tile-content:hover .redeem-points-teaser-link-text {
font-weight: 600;
}
.redeem-points-teaser-link-text {
position: relative;
display: block;
top: 50%;
margin: 0;
border: none;
font-size: 1.16666rem;
line-height: 1.45rem;
font-weight: 400;
text-transform: uppercase;
color: rgb(255,255,255);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.redeem-points .tile-content {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
}
.redeem-points-teaser {
float: left;
width: 50%;
height: 50%;
text-align: center;
}
.redeem-points-teaser-image {
position: relative;
top: 50%;
max-width: 80%;
max-height: 80%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.status-climb-distance {
height: 120px;
margin-top: 20px;
text-align: center;
}
.status-climb-prev {
float: left;
height: 120px;
width: 80px;
}
.status-climb-next {
float: right;
height: 120px;
width: 80px;
}
.status-climb-prev img,
.status-climb-next img {
width: 100%;
height: 100%;
}
.status-climb-progress {
float: left;
height: 120px;
width: -webkit-calc(100% - 160px);
width: calc(100% - 160px);
margin-top: 5px;
}
.status-climb-progress-points,
.status-climb-progress-currency,
.status-climb-progress-addition {
display: block;
font-size: .83333rem;
line-height: 1rem;
}
.status-climb-progress-points {
line-height: 2rem;
font-size: 2.5rem;
font-weight: 700;
}
.status-climb-progress-currency {
margin-top: 5px;
font-weight: 700;
}
.status-climb-prev-points,
.status-climb-next-points {
font-weight: 700;
font-size: .83333rem;
}
.status-climb-graph {
position: relative;
height: 70px;
background: rgba(115,155,75,.25);
}
.status-climb-graph::before {
content: "";
z-index: 2;
display: block;
position: absolute;
background: rgb(255,255,255);
left: -15px;
height: 100%;
width: 15px;
}
.status-climb-graph::after {
content: "";
z-index: 2;
display: block;
position: absolute;
background: rgb(255,255,255);
top: 0;
right: -15px;
height: 100%;
width: 15px;
}
.status-climb-graph-progress {
position: relative;
height: 100%;
width: 40%;
background: rgb(115,155,75);
-webkit-transition: width .5s;
transition: width .5s;
}
.status-climb-graph-progress::after {
content: "";
z-index: 1;
display: block;
position: absolute;
top: 25.5%;
right: -17px;
height: 34px;
width: 34px;
-webkit-transform: rotate(45deg) skew(25deg, 25deg);
-ms-transform: rotate(45deg) skew(25deg, 25deg);
transform: rotate(45deg) skew(25deg, 25deg);
background: rgb(115,155,75);
}
.reported-benefit-rank {
margin: 11px 0 3px;
}
.reported-benefit-prev-rank,
.reported-benefit-next-rank {
width: 90px;
font-size: .83333rem;
text-align: left;
}
.reported-benefit-prev-rank {
float: left;
text-align: left;
}
.reported-benefit-next-rank {
float: right;
text-align: right;
}
.reported-benefit-title {
float: left;
width: 390px;
font-size: .83333rem;
font-weight: 700;
text-align: center;
}
.reported-benefit-graph {
position: relative;
height: 45px;
width: 100%;
margin-bottom: 28px;
background: #80a6ba;
font-size: .66666rem;
}
.reported-benefit-graph::before {
content: "";
z-index: 2;
display: block;
position: absolute;
background: rgb(255,255,255);
left: -15px;
height: 100%;
width: 15px;
}
.reported-benefit-graph::after {
content: "";
z-index: 2;
display: block;
position: absolute;
background: rgb(255,255,255);
top: 0;
right: -15px;
height: 100%;
width: 15px;
}
.reported-benefit-graph-progress {
position: relative;
height: 100%;
width: 40%;
background: rgb(0,48,135);
-webkit-transition: width .5s;
transition: width .5s;
}
.reported-benefit-graph-progress::after {
content: "";
z-index: 1;
display: block;
position: absolute;
top: 25.5%;
right: -11px;
height: 22px;
width: 22px;
background: rgb(0,48,135);
-webkit-transform: rotate(45deg) skew(25deg, 25deg);
-ms-transform: rotate(45deg) skew(25deg, 25deg);
transform: rotate(45deg) skew(25deg, 25deg);
}
.reported-benefit-progress {
position: absolute;
z-index: 3;
top: 12px;
width: 100%;
text-align: center;
font-weight: 700;
line-height: .66666rem;
color: rgb(255,255,255);
}
.submission-benefit .reported-benefit-graph-progress {
width: 65%;
}
.proposal-benefit .reported-benefit-graph-progress {
width: 55%;
}
.message-benefit .reported-benefit-graph-progress {
width: 80%;
}
/* Site Contents */
.content-site {
margin-top: 10px;
}
.sub-section > h1 .svg-icon {
height: 50px;
width: 50px;
}
.site-subnav-list {
margin: 0;
padding: 0;
}
.site-subnav-list-item {
display: inline-block;
margin: 0 20px 10px 0;
padding: 0px 20px 0 0;
border-right: 1px solid rgb(206,206,206);
line-height: 1.58333rem;
font-size: 1.08333rem;
font-weight: 700;
text-decoration: underline;
}
.site-subnav-list.step-list .site-subnav-list-item {
font-weight: 400;
text-decoration: none;
}
.site-subnav-list.step-list .site-subnav-list-item:not(.active) {
color: rgb(206,206,206);
}
.site-subnav-list-item:first-child {
padding: 0 20px 0 0;
}
.site-subnav-list-item:last-child {
border-right: none;
}
.site-subnav-list-item:not(.active) a {
color: rgb(93,93,93);
font-weight: 400;
}
.site-subnav-list-item.ui-state-active a {
color: rgb(0,48,135) !important;
font-weight: 600;
}
.site-subnav-title {
float: none;
height: 2rem;
margin-top: 1rem;
margin-bottom: 1.25rem;
font-size: 1.25rem;
font-weight: 700;
}
.site-subnav-title-edit {
display: inline-block;
color: rgb(0,48,135);
text-decoration: none;
}
.site-subnav-title .svg-icon {
position: relative;
float: right;
top: -.333rem;
height: 2rem;
width: 2rem;
margin-left: .75rem;
}
.site-disclaimer {
margin-top: 12px;
color: rgb(93,93,93);
opacity: .5;
}
.site-disclaimer p {
margin: 0;
}
.closing-section.separate {
padding-top: 30px;
padding-right: 0;
padding-left: 0;
}
.closing-section.separate > .row > div {
padding-right: 0;
padding-left: 0;
}
.closing-section .btn {
width: 100%;
margin: 20px 0 10px;
}
.properties {
padding: 0 20px;
border: 1px solid rgb(93,93,93);
}
.properties h6 {
margin: 0;
padding: 20px 0;
}
.properties .sub-section-content {
width: -webkit-calc( 100% + 40px ) !important;
width: calc( 100% + 40px ) !important;
margin-bottom: 10px;
margin-left: -20px !important;
padding-bottom: 0;
}
.properties-table > tbody > tr > td {
padding: 6px 20px;
line-height: 1.33333rem;
font-size: 0.83333rem;
font-weight: 700;
vertical-align: middle;
}
.properties-table > tbody > tr > td:last-child {
width: 54px;
padding-left: 0;
}
.properties-table .svg-icon {
display: block;
height: 30px;
width: 40px;
}
.properties.accordion > h6,
.sub-section.accordion > h1 {
position: relative;
padding-right: 50px;
cursor: pointer;
}
.sub-section.accordion > h1 {
width: -webkit-calc( 100% - 55px );
width: calc( 100% - 55px );
margin-bottom: 0;
padding-right: 70px;
}
.properties.accordion > h6::after,
.sub-section.accordion > h1::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
height: 50px;
width: 50px;
display: block;
background-image: url("data:image/svg+xml;utf8,"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0YyNzFEQ0Q1MkZGMTFFNTlDMzhGODM1QUI4MTlEMkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0YyNzFEQ0U1MkZGMTFFNTlDMzhGODM1QUI4MTlEMkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRjI3MURDQjUyRkYxMUU1OUMzOEY4MzVBQjgxOUQyQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRjI3MURDQzUyRkYxMUU1OUMzOEY4MzVBQjgxOUQyQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puc8T9wAAAZmSURBVHja7F07j9w2EB5xpQSO08TABQgQV/kF+cF3zbmz+2sDONW5Se0iTQIXNpBrbB98u9KED+2KT4l6UOSuOIBwPp0skZ8+fjNDUmSBiJCsNfABCPxCfwI/WFGr9m97ehT02LU/G/ibXvtbqlUpkgEa4QlqCmO50P0O/CXs6Uv4LoXqkYjAvqXAYstTpIAsBzKzkjO9Ot2fPYs9czOMbmh1ife1Aqadcu6hpchPp3O1do3PfQkXnItj9DVtxIJZrifW3cs/HQyMnfS7OPeCH/I5/RqAG+2etlpjW6brdVowZXTA4zXu0W1P9KjxPnAZgD/jqaccoozXIcsQTjoYWypHsy0o14pFFXmMbzjQY2dtWQeu7cW5SIeQCDvIX7gcxAJZCFPJy8DKYnOgwJ1mk7YzdDm6Bh7p+R8SjdW/0rI9c76W5IB2SQWs691ntsRgUkIWYMS9IRV7JXo4FxPl3VukZIHIZB6jG/hPiWdFsRoecJ2zIXfWRKvrv/TMyxiMRgPkBt6fPcjQRuasLipSv85xktMYbdfjAi7TUKs769gq1mC0CnJ90SBDG/V3VrXyGBho8+3uLhpkYTvNSRY8Dv8WCug7o2+i2gDIHZNVZhPe/eodjfhrNPKuzOCpavLGEvhyPA5+QJvOb5sg2yTUE2wyGmRbH8HWTMagbDGaBXQDnxWQmbcl8OPmgWYYyJFHxbH6Z4504Nz48aJthKT2AY0bSUiWTWgcOLmk47UmIdnc8jojvKv5GERm8xRWOwZ+iSMTkt/YY8ZxkNWPQxphMloeJdlyYjInkbGoAOlVbZJj5hEh3xd/jZbZHGGSyQVIiD5mWtgZrf72kJEbbQ9Kam6FVp+XJmYDZRsnHy+U1Bzg1pQOOcvJWeAy2aKEI1Hy9S68e5cRm2gydpXdGWJOUIKk5RKj2SRwkOieba58yJHIx47RA8F2thmMbnWaSB4yLMg178FN54OZ5vS1QQi70XX6qNFh9VnupEohEepJLELp9Doz/gspkCfgNfQTNPwiCuirJGZEGYI5BAzk5QpVkcA2xz8fgiVmB4Xbb5l0oNTEw06I0SdFrpkYrQmyLpeca6gE2+FT1BjMXhtkC5Zk9WGqtcGOAbLFLapA40qwrwV2TJBlLBs90MIVh61Cgx2byTKWTcxPlEOCnYJcaFE60VKVZ2cPdiogy1hyoInyR3LWzE6JyTKWhKXgDaIWycZMj1GLu/3TdT2txohf51rqolajjt7VUyjM9k3XbWl1XJBVLBGQ8JVb7Hw6DweZmuOzY/nHOr13odL1VEE2oS7SBXpIs9PT5F6gUyqYIwKVCkwAToMHaYNsfERkG8pCiJ3IDMkIJCsXctsr5FYoAN1Jw4n7BMcLXUAyJqc40UfF8FPHaIumJCkkMrPTZLITS+Ko0H2SxT8CmyqTe7DLU8KWl42BKWEl/KkkCdmmWaX8+5XJaF1b0tZASFQ2Oh+ijb+6gc7yMU82tJV4iCVB6JoA+3I2my+b1a+MtZV48sdCS9mEj4UKyUGKdeGyDbH569D8xfxB59IJysgPOt8YcpLNxWZ0KsIgo800MrPaL9124tTXS2d2smeDAUwKd+9Bf7NQh5QwgVHFdHhca6M77/suH15TyRwueqKv5/uN6/K3dpUw7zB4uIOfZYcH5X+wB9xuGOZbBeTaL9fwX45NDvnycmyjuyn8h6x2XU8Uf9Bhg85Rz/5G9AWNWwRWdJQUkn5vp+Np5tSG8avt6mBvQUZ0Jk8ICMaPdrPJe/ZVw+8uEOI7XrdS8VUwJeqaviK6zmzxpj/RQvx8ISHcR1qXK+3c5NB2+vyNAtR5e+JuVwAX4STRAvJfc/KHeRNlxLZ2Nx6p6fmm1c2JVr/Pue1y24OYHd+D+X9yLDZzh8W+u1x6Cyd0nMVoXxNM8TUBSLJ05QvuMMyzx8mKmBiD0QqyWLZ40ZYYcj9DdEgMa45xNyWraQnKHrIEsJDN2dyp5xh3ixFisQ8bmwsRPlT73HYZIH92aTjArryBLLxuVm0FbCsnlHDcaRNbtcRF5v2xezTSNqsEnlsZfGgBXqEbIcbmvuMeeNwtuXRGO+ruyuNa3GoWIxI4NtE3XgtlVT0gH1tF5fnCgA86R9ksLZ3tqsVqWleLvXqRaCTTJZBObMsAIdomvSjNcMVWJuQDpThdXKtuDJxQv8v/AgwAPSvXz+NjIIIAAAAASUVORK5CYII=");
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: translateY(-50%) rotate(0deg);
-ms-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
.properties.accordion > h6::after {
right: 0;
background-image: url("data:image/svg+xml;utf8,"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0YyNzFEQ0Q1MkZGMTFFNTlDMzhGODM1QUI4MTlEMkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0YyNzFEQ0U1MkZGMTFFNTlDMzhGODM1QUI4MTlEMkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRjI3MURDQjUyRkYxMUU1OUMzOEY4MzVBQjgxOUQyQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRjI3MURDQzUyRkYxMUU1OUMzOEY4MzVBQjgxOUQyQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puc8T9wAAAZmSURBVHja7F07j9w2EB5xpQSO08TABQgQV/kF+cF3zbmz+2sDONW5Se0iTQIXNpBrbB98u9KED+2KT4l6UOSuOIBwPp0skZ8+fjNDUmSBiJCsNfABCPxCfwI/WFGr9m97ehT02LU/G/ibXvtbqlUpkgEa4QlqCmO50P0O/CXs6Uv4LoXqkYjAvqXAYstTpIAsBzKzkjO9Ot2fPYs9czOMbmh1ife1Aqadcu6hpchPp3O1do3PfQkXnItj9DVtxIJZrifW3cs/HQyMnfS7OPeCH/I5/RqAG+2etlpjW6brdVowZXTA4zXu0W1P9KjxPnAZgD/jqaccoozXIcsQTjoYWypHsy0o14pFFXmMbzjQY2dtWQeu7cW5SIeQCDvIX7gcxAJZCFPJy8DKYnOgwJ1mk7YzdDm6Bh7p+R8SjdW/0rI9c76W5IB2SQWs691ntsRgUkIWYMS9IRV7JXo4FxPl3VukZIHIZB6jG/hPiWdFsRoecJ2zIXfWRKvrv/TMyxiMRgPkBt6fPcjQRuasLipSv85xktMYbdfjAi7TUKs769gq1mC0CnJ90SBDG/V3VrXyGBho8+3uLhpkYTvNSRY8Dv8WCug7o2+i2gDIHZNVZhPe/eodjfhrNPKuzOCpavLGEvhyPA5+QJvOb5sg2yTUE2wyGmRbH8HWTMagbDGaBXQDnxWQmbcl8OPmgWYYyJFHxbH6Z4504Nz48aJthKT2AY0bSUiWTWgcOLmk47UmIdnc8jojvKv5GERm8xRWOwZ+iSMTkt/YY8ZxkNWPQxphMloeJdlyYjInkbGoAOlVbZJj5hEh3xd/jZbZHGGSyQVIiD5mWtgZrf72kJEbbQ9Kam6FVp+XJmYDZRsnHy+U1Bzg1pQOOcvJWeAy2aKEI1Hy9S68e5cRm2gydpXdGWJOUIKk5RKj2SRwkOieba58yJHIx47RA8F2thmMbnWaSB4yLMg178FN54OZ5vS1QQi70XX6qNFh9VnupEohEepJLELp9Doz/gspkCfgNfQTNPwiCuirJGZEGYI5BAzk5QpVkcA2xz8fgiVmB4Xbb5l0oNTEw06I0SdFrpkYrQmyLpeca6gE2+FT1BjMXhtkC5Zk9WGqtcGOAbLFLapA40qwrwV2TJBlLBs90MIVh61Cgx2byTKWTcxPlEOCnYJcaFE60VKVZ2cPdiogy1hyoInyR3LWzE6JyTKWhKXgDaIWycZMj1GLu/3TdT2txohf51rqolajjt7VUyjM9k3XbWl1XJBVLBGQ8JVb7Hw6DweZmuOzY/nHOr13odL1VEE2oS7SBXpIs9PT5F6gUyqYIwKVCkwAToMHaYNsfERkG8pCiJ3IDMkIJCsXctsr5FYoAN1Jw4n7BMcLXUAyJqc40UfF8FPHaIumJCkkMrPTZLITS+Ko0H2SxT8CmyqTe7DLU8KWl42BKWEl/KkkCdmmWaX8+5XJaF1b0tZASFQ2Oh+ijb+6gc7yMU82tJV4iCVB6JoA+3I2my+b1a+MtZV48sdCS9mEj4UKyUGKdeGyDbH569D8xfxB59IJysgPOt8YcpLNxWZ0KsIgo800MrPaL9124tTXS2d2smeDAUwKd+9Bf7NQh5QwgVHFdHhca6M77/suH15TyRwueqKv5/uN6/K3dpUw7zB4uIOfZYcH5X+wB9xuGOZbBeTaL9fwX45NDvnycmyjuyn8h6x2XU8Uf9Bhg85Rz/5G9AWNWwRWdJQUkn5vp+Np5tSG8avt6mBvQUZ0Jk8ICMaPdrPJe/ZVw+8uEOI7XrdS8VUwJeqaviK6zmzxpj/RQvx8ISHcR1qXK+3c5NB2+vyNAtR5e+JuVwAX4STRAvJfc/KHeRNlxLZ2Nx6p6fmm1c2JVr/Pue1y24OYHd+D+X9yLDZzh8W+u1x6Cyd0nMVoXxNM8TUBSLJ05QvuMMyzx8mKmBiD0QqyWLZ40ZYYcj9DdEgMa45xNyWraQnKHrIEsJDN2dyp5xh3ixFisQ8bmwsRPlT73HYZIH92aTjArryBLLxuVm0FbCsnlHDcaRNbtcRF5v2xezTSNqsEnlsZfGgBXqEbIcbmvuMeeNwtuXRGO+ruyuNa3GoWIxI4NtE3XgtlVT0gH1tF5fnCgA86R9ksLZ3tqsVqWleLvXqRaCTTJZBObMsAIdomvSjNcMVWJuQDpThdXKtuDJxQv8v/AgwAPSvXz+NjIIIAAAAASUVORK5CYII=");
}
.properties.accordion.closed > h6::after,
.sub-section.accordion.closed > h1::after {
-webkit-transform: translateY(-50%) rotate(-180deg);
-ms-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
}
.sub-section.accordion > *:not(h1):first-of-type {
margin-top: 15px;
}
.sub-section > h1 {
font-size: 1.5rem;
font-weight: 400;
line-height: 1.5rem;
color: rgb(255,255,255);
}
.sub-section.inner-section > h1 {
font-size: 1rem;
}
.sub-section.separate > h1 {
font-size: 1.33333rem;
line-height: 1.44444rem;
}
.sub-section.inner-section.wide > h1 {
padding-top: 25px;
padding-bottom: 25px;
font-size: 1.33333rem;
line-height: 1.44444rem;
}
.sub-section > h1 .svg-icon * {
fill: rgb(255,255,255);
}
.sub-section:not(.separate) {
padding-top: 1px;
}
.sub-section:not(.separate) > h1 {
margin-top: 0;
}
.sub-section-content {
width: 100% !important;
padding-bottom: 15px;
}
.form-section h2 {
margin-top: 0;
font-weight: 700;
color: rgb(0,48,135);
}
.section-main-info {
font-size: 1rem;
}
.section-main-info-highlight {
font-weight: 700;
color: rgb(0,48,135);
}
.form-section > .row-wrapper > .row h6,
.form-section > .row h6,
.form-section .sub-section-content > .row-wrapper > .row h6,
.form-section .sub-section-content > .row h6 {
padding-top: 15px;
}
.form-section-subheader {
font-size: 1.5rem;
font-weight: 700;
}
.quick-functions,
.user-search {
padding-top: 0;
}
.quick-functions h2 {
margin-top: 0;
font-size: 1.25rem;
}
.user-search h2 {
margin-top: 0;
margin-bottom: 26px;
font-weight: 700;
color: rgb(0,48,135);
}
.charged-points {
border: 1px solid rgb(93,93,93);
}
.link-list {
margin: 0;
padding: 0;
font-size: 1rem;
}
.link-list li {
margin: 0;
list-style-type: none;
}
.link-list a {
display: inline-block;
color: rgb(93,93,93);
margin: 15px 0;
text-decoration: underline;
}
.link-list a:hover {
color: rgb(0,48,135);
}
/* Index / Login */
.limit-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2em 0 1em;
}
.limit-title {
padding: .8em 0;
}
.limit-title::after {
content: " ";
height: 0;
width: 0;
font-size: 2px;
border-bottom: 1px solid red;
border-right: 150px solid red;
margin: calc(50% - 75px);
}
.limit-desc {
font-style: italic;
font-size: 80%;
}
.login-banner-image {
max-width: 100%;
}
.login-banner-col,
.login-messages-col {
padding-top: 0;
padding-bottom: 0;
}
.login-link {
display: inline-block;
padding-top: 10px;
text-decoration: underline;
}
.content-site.index-login {
width: 570px;
margin: 0 auto;
}
.content-site.index-login .btn,
.content-site.index-login .form-control {
width: 100% !important;
}
/* Newsfeed */
.newsfeed .sub-section > .row > div {
padding: 0;
}
.newsfeed-header {
border-bottom: 3px solid rgb(238,238,238);
}
.newsfeed-header > .row > div {
padding: 0;
}
.newsfeed-header .site-title {
margin: 5px 0 0 0;
padding-left: 15px;
padding-right: 15px;
border: none;
}
.newsfeed-content {
margin-top: -30px;
}
.newsfeed-content > .sub-section {
margin: 30px 0;
}
.newsfeed-element {
background: rgb(255,255,255);
}
.newsfeed-element.highlighted::after {
content: "";
position: absolute;
display: block;
top: -9px;
right: 8px;
height: 40px;
width: 40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAiCAMAAACQlPJ4AAAAbFBMVEUAAADmoABzUADmoADmoADmoADmoADmoADmoADmoADmoADmoABzUABzUADmoADmoADmoABzUADmoABzUADmoABzUABzUADmoABzUADmoABzUADmoABzUADmoABzUADmoABzUABzUADmoABzUAC9JnjtAAAAInRSTlMA/fflnBbuckELBfrp39HOx8K4sqyXi35lXFA+MCgjIBcMOuO23QAAAHdJREFUOMvt0DcOhTAQRVEb26QfyDkz+98jCIk8TEmBuJWfjtwMm2ujHmnh9KsRXnoA197FGhCe/2AK9zoAoHztducP9/511LkgXZhKEu6q8W1c3l/a08g+6H9uzKvQEdfNdVbi5P9mu5Vz8NBiuyx/5wk7Zks2AIFMUPDzRj7eAAAAAElFTkSuQmCC) no-repeat center center;
}
.newsfeed-element > header,
.news-content {
padding: 1px 15px;
}
.newsfeed-element > header {
height: 130px;
padding-top: 15px;
}
.news-content p:not(.news-reward) {
margin: 0 0 5px;
}
.newsfeed .sub-section.personal {
display: none;
}
.news-footer {
border-top: 2px solid rgb(0,48,135);
}
.news-image {
border-radius: 50px;
}
.news-image.company-pic {
border-radius: 0;
}
.news-image-wrapper {
margin: 0 20px 0 0;
}
.news-image-wrapper,
.news-image-wrapper img {
height: 100px;
width: 100px;
}
.news-title {
margin-bottom: 0;
}
.news-time {
font-size: .83333rem;
font-weight: 700;
color: rgb(206,206,206);
}
.news-actions {
position: relative;
padding: 20px 0;
}
.news-actions-like {
top: -8px;
}
.news-actions-comment {
bottom: -4px;
}
.news-actions > * {
display: inline-block;
width: 33.333%;
text-align: center;
}
.news-actions > * > * {
display: inline-block;
height: 60px;
margin: 0 5px;
line-height: 60px;
vertical-align: middle;
color: rgb(93,93,93);
}
.newsfeed-action-image {
max-width: 100%;
margin: 5px 0;
}
.news-action-link .btn {
width: 100%;
margin-bottom: 20px;
}
.news-action-link .svg-icon {
height: 60px;
width: 66px;
fill: rgb(0,48,135);
}
.news-content-action-duration,
.news-content strong {
font-weight: 600;
}
.news-medal {
height: 170px;
margin: 10px 0 30px;
}
.news-content-badges {
height: 100px;
margin-bottom: 15px;
}
.news-content-badges .svg-icon {
float: left;
height: 100px;
width: 100px;
margin-right: 30px;
}
.news-content-badges .svg-icon:last-child {
margin-right: 0;
}
.news-reward {
margin: 25px 0;
font-size: 1.25rem;
}
.news-reward .news-reward-amount {
font-weight: 600;
color: rgb(115,155,75);
}
.newsfeed-sales-message.sale-successful .news-image-wrapper {
border-radius: 50px;
border: 4px solid rgb(115,155,75);
padding: 19px;
}
.news-sales-motivation {
margin-bottom: 15px;
}
.newsfeed-sales-motivation-link {
font-size: 1.25rem;
font-weight: 600;
text-decoration: underline;
color: rgb(93,93,93);
}
.newsfeed-text-message h2 {
margin: 0 0 5px 0;
font-weight: 600;
}
.newsfeed-action-message > header {
height: auto;
}
/* Leistung überprüfen */
.effort-detail-check h2 {
font-weight: 600;
}
.effort-detail-check h6 {
color: rgb(93,93,93);
}
.effort-decline .radio {
margin-top: 20px;
margin-bottom: 20px;
}
.chosen-efforts {
margin: 0 !important;
}
/* Leistung einreichen */
.status-climb-box {
display: none;
}
.reward-box .reward-status-climb {
position: absolute;
bottom: 20px;
}
.status-climb-box .status-climb-distance {
margin-top: 0;
}
.status-climb-box .status-climb-graph {
height: 95px;
}
.status-climb-box .status-climb-graph-progress::after {
right: -23px;
height: 46px;
width: 46px;
}
.reward-box {
position: relative;
height: 615px;
}
.reward-box > * {
width: 530px;
}
.reward-box .reward-badges {
position: absolute;
top: 75px;
border-bottom: 1px solid rgb(238,238,238);
font-size: 1.25rem;
}
.reward-box .reward-badges-badge {
display: inline-block;
height: 96px;
width: 96px;
margin-top: 12px;
margin-bottom: 17px;
margin-right: 30px;
}
.reward-box .reward-credits {
position: absolute;
top: 15px;
height: 60px;
font-size: 1.25rem;
}
.reward-box .reward-badges strong,
.reward-box .reward-credits strong {
color: rgb(115,155,75);
}
.reward-box .reward-notice {
position: absolute;
top: 250px;
height: 80px;
border-bottom: 1px solid rgb(238,238,238);
}
/* Teilnehmerverwaltung */
.user-search-header {
margin-top: 0 !important;
}
.participant-search {
margin-top: 35px;
}
.participant-search .form-control {
min-width: auto;
}
.participant-search .right-col > h6 {
margin: 20px 0 10px;
}
.participant-search-single-row {
padding: 0 0 15px 0;
}
.participant-search-multiple-inner .row > div {
padding-top: 0;
}
.tabs .search-form .btn {
margin-left: 10px;
}
.result-header-settings {
margin: 0;
padding: 0;
}
.participant-heading > div {
padding-top: 0;
padding-bottom: 0;
}
.participant-heading-separator {
display: none;
}
.result-header-settings-element {
position: relative;
display: inline-block;
margin: 0 10px;
}
.result-header-settings-element {
opacity: .5;
}
.result-header-settings-element.active {
opacity: 1;
}
.result-header-settings-element:last-child {
margin-right: 0;
}
.result-header-settings-element:not(:last-child)::after {
position: absolute;
content: "";
display: block;
right: -10px;
top: 0;
height: 60px;
width: 1px;
background: rgb(206,206,206);
}
.result-header-settings-element:first-child {
margin-left: 0;
}
.result-header-settings-element .btn {
height: 60px;
width: 73px;
margin: 0;
padding: 5px;
}
.result-header-settings-element:first-child .btn {
width: 60px;
margin-left: -5px;
}
.result-header-settings-element.active .svg-icon {
fill: rgb(0,48,135);
}
.profile-preview-link {
display: block;
margin: 2px 0;
padding: 15px;
font-size: 1rem;
text-decoration: none !important;
overflow: hidden;
-webkit-transition: background-color .25s;
transition: background-color .25s;
}
.profile-preview-link:hover,
.profile-preview-link:focus {
background-color: rgba(0,0,0,.05);
}
.profile-preview-image-wrapper {
position: relative;
height: 265px;
width: 265px;
background: rgb(0,48,135);
}
.profile-preview-image {
position: absolute;
top: 50%;
max-height: 100%;
width: auto;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.profile-online-indicator {
position: absolute;
top: 0;
right: 0;
height: 36px;
width: 36px;
border: 18px solid transparent;
}
.profile-online-indicator.user-online {
border-top: 18px solid rgb(115,155,75);
border-right: 18px solid rgb(115,155,75);
}
.profile-online-indicator.user-offline {
border-top: 18px solid rgb(195,26,25);
border-right: 18px solid rgb(195,26,25);
}
.profile-preview-name {
margin: 15px 0 0;
font-size: 1rem;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.profile-preview-name,
.profile-preview-points {
color: rgb(93,93,93);
}
.profile-preview-points {
margin-top: 1px;
}
.profile-preview-points-text {
display: inline-block;
max-width: 100%;
margin-right: .5rem;
vertical-align: top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
img.profile-preview-points-medal {
display: inline-block;
height: 50px;
width: 40px;
}
.participant-top-link {
padding-bottom: 20px;
}
.participant-top-link h6,
.participant-top-link p {
display: none;
}
.participant-top-link button {
margin-bottom: 0;
}
.result-header-highlight {
font-weight: 700;
color: rgb(0,48,135);
}
.participant-results > * {
padding: 0 5px 0 0;
}
.participant-results > *:nth-child(2n) {
padding: 0 0 0 5px;
}
.profile-preview-status {
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.5rem;
}
/* Teilnehmer bearbeiten */
.participant-base-info {
position: relative;
}
.participant-base-info .inner-col-row:not(:first-child) {
margin-top: 20px;
}
.participant-image-wrapper {
position: static;
}
.participant-image {
position: absolute;
top: 100px;
right: 15px;
}
.participant-image-edit {
max-width: 570px;
}
.participant-badge {
display: inline-block;
height: 60px;
width: 60px;
margin-right: 20px;
}
.check-icon {
height: 44px;
width: 100%;
margin: 20px 0;
}
.participant-comment textarea {
height: 220px;
}
.role-name-cell {
text-align: left;
width: 50%;
}
.assigned-group-name {
font-size: 1.11111rem;
line-height: 60px;
}
.assigned-group-name-select {
margin-top: 10px;
}
/* Teilnehmer hinzufügen: Gruppen */
.group-rights-table .checkbox label .checkbox-desc::before,
.group-rights-table .checkbox label .checkbox-desc::after {
left: -40px;
}
.group-rights-table .checkbox label {
height: 60px;
}
.group-rights-table th,
.group-rights-table td {
width: 33.33333%;
text-align: center;
vertical-align: top !important;
}
.group-rights-table .group-rights-table-separator td {
width: 100%;
text-align: left;
}
.group-rights-table-separator td {
font-weight: 700;
}
.group-rights-table-separator th {
padding-left: 0 !important;
font-weight: 400;
text-align: left;
}
.group-rights-table tbody tr:nth-child(4n+1),
.group-rights-table tbody tr:nth-child(4n+1) + tr {
background-color: rgba(0,0,0,.05);
}
.group-rights-table-right {
display: none;
}
/* Teilnehmergruppen */
.participant-groups .inner-section-content > hr {
display: none;
}
/* Leistung prüfen */
.effort-check .site-content > .row > div {
margin-top: 0;
margin-bottom: 0;
}
.effort-check-table {
width: auto;
font-size: .83333rem;
}
.effort-check-table-check {
width: 150px;
}
.effort-check-table-date {
width: 165px;
}
.effort-check-table-points {
width: 115px;
}
.effort-check-table-name {
width: 180px;
}
.effort-check-table-action {
width: 200px;
}
.effort-check-table-check.button-td {
width: 180px;
}
.effort-check-table .checkbox label {
height: 40px;
line-height: 40px;
}
.effort-check-table .checkbox label .checkbox-desc::before,
.effort-check-table .checkbox label .checkbox-desc::after {
height: 40px;
width: 40px;
background-size: 30px 30px;
}
.effort-check-table-check .btn {
height: 40px;
margin: 5px 0px;
line-height: 38px !important;
width: 220px;
font-size: 0.83333rem;
}
.effort-check-button .btn {
width: 100%;
}
/* Leistungsmeldung */
.new-performance-release-settings-wrapper,
.new-performance-background-settings-wrapper {
margin-top: 0;
margin-bottom: 20px;
}
.new-performance-background-choose .btn {
margin-top: 0;
margin-bottom: 0;
}
.new-performance-background-add .btn {
margin-bottom: 0;
}
.new-performance .form-section .row > * > .form-control {
margin-bottom: 20px;
}
/* Setup: Seiten */
.sites .quick-functions > div {
margin-top: 0;
margin-bottom: 0;
}
.site-title-steps .site-title-addition {
display: block;
}
.site-title-steps h1:not(:last-child) {
border-bottom: none;
}
.site-title-steps div.site-title {
margin: 0;
}
.existing-sites > div {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.existing-sites h2 {
font-weight: 700;
}
.sites .has-inline-btn .btn-icon {
margin-left: 10px;
}
.page-linkage {
padding: 10px 15px;
color: rgb(0,48,135);
border: 1px solid rgb(93,93,93);
}
.page-linkage ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: 600;
}
.page-linkage ul ul {
margin: 0;
padding: 0 0 0 20px;
font-weight: 400;
}
.page-linkage .current {
position: relative;
display: block;
}
.page-linkage a {
position: relative;
display: block;
height: 1px;
padding: 8px 0;
font-size: 0;
}
.page-linkage a:hover,
.page-linkage a:active,
.page-linkage a:focus {
text-decoration: none;
outline: none;
}
.page-linkage a::after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
border-bottom: 1px dashed rgb(158,158,158);
transition: border-bottom-color .15s;
}
.page-linkage a:hover::after {
border-bottom: 1px solid rgb(93,93,93);
}
.page-linkage a.selected::after {
border-bottom: 1px solid rgb(0,0,0);
}
.page-linkage .current::before,
.page-linkage a::before {
content: "";
position: absolute;
display: block;
top: calc(50% - 4px);
left: -11px;
height: 8px;
width: 16px;
border-width: 4px 8px;
border-style: solid;
border-color: transparent transparent transparent rgba(158,158,158,0);
transition: border-color .15s;
}
.page-linkage a:hover::before {
border-color: transparent transparent transparent rgba(158,158,158,1);
}
.page-linkage a.selected::before {
border-color: transparent transparent transparent rgba(93,93,93,1);
}
.page-linkage .current::before {
border-color: transparent transparent transparent rgba(0,48,135,1);
}
.template-image {
width: 300px;
height: auto;
border: 1px solid rgb(158,158,158);
}
/* Mediathek */
.media-results > * {
padding: 0 5px 0 0;
}
.media-results > *:nth-child(2n) {
padding: 0 0 0 5px;
}
.media-preview {
display: block;
margin: 2px 0;
padding: 15px;
text-decoration: none !important;
overflow: hidden;
-webkit-transition: background-color .25s;
transition: background-color .25s;
}
.media-preview-image-wrapper {
display: block;
position: relative;
height: 337px;
width: 100%;
background: rgb(0,48,135);
}
.media-preview-image {
position: absolute;
top: 50%;
max-height: 100%;
width: auto;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.media-preview-name {
display: block;
height: 30px;
width: calc(100% - 35px);
padding: 5px 0;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.media-preview-header {
width: 100%;
margin: 0 0 5px 0;
}
.media-preview-link {
display: block;
background: rgb(0,48,135);
}
.btn.media-preview-delete,
.btn.media-preview-edit {
margin: 0;
}
.toggle-favorite {
height: 30px;
width: 30px;
margin: 0px;
opacity: .5;
}
.toggle-favorite.danger {
opacity: 1;
}
.toggle-favorite:focus,
.toggle-favorite:active {
outline: none !important;
}
.toggle-favorite .svg-icon {
display: block;
height: 30px;
width: 30px;
padding: 0px;
}
/**************************************************/
@media (min-width: 768px) {
.highlight-box {
width: 100%;
margin: 0;
padding: 24px;
border: 10px solid rgb(0,48,135);
}
.participant-results > * {
padding: 0;
}
.participant-results > *:nth-child(2n) {
padding: 0;
}
.profile-preview-image-wrapper {
height: 220px;
width: 220px;
}
/***********/
html {
font-size: 20px;
}
body {
font-size: 1rem;
line-height: 1.2rem;
}
h1 {
font-size: 1.6rem;
line-height: 1.8rem;
}
h2 {
font-size: 1.4rem;
line-height: 1.6rem;
}
h3 {
font-size: 1.2rem;
line-height: 1.5rem;
}
h4 {
font-size: 1.2rem;
line-height: 1.5rem;
}
h5 {
font-size: 1.1rem;
line-height: 1.3rem;
}
h6 {
font-size: 1rem;
line-height: 1.2rem;
}
/************************/
.tile {
padding: 0 9px;
}
.notifications-list-count {
font-size: 1.3rem;
line-height: 1.4rem;
}
.video-js {
height: 431px !important;
}
.media-library .video-js {
margin-top: -6px;
}
.header-search {
position: absolute;
right: 0;
padding: 0 15px;
}
.header-search .form-group,
.header-search .form-control {
width: 300px;
}
/************************/
.main-nav {
font-size: 1.5rem;
}
.system-nav-mobile .system-nav-list-item {
font-size: 1.5rem;
line-height: 1.5rem;
}
.open .main-content-helper {
opacity: .5;
}
.banner {
padding: 24px 24px;
background: rgb(255,255,255);
}
.main-content-header .banner {
margin-top: 0;
margin-bottom: -5px;
}
.breadcrumbs {
margin: -8px 0 0;
}
.breadcrumb-row {
margin: 0;
}
.breadcrumbs li > * {
font-size: .8rem;
}
.current-user-mobile .user-name,
.current-user-mobile .user-credits,
.current-user-mobile .credit-motivation,
.current-user-mobile .user-status {
line-height: 1.58333rem;
}
.customer-user-data {
height: 70px;
margin: 17px 0;
}
.customer-logo-frame {
height: 74px;
}
/************************/
.tile-title,
.site-title {
margin-top: 20px;
}
.tile-title {
font-size: 1.2rem;
line-height: 1.25rem;
}
.subheadline {
font-size: .9rem;
line-height: 1.1rem;
}
.site > header > *,
.site > form > header > * {
padding-right: 9px;
padding-left: 9px;
}
.content-pagination li {
height: auto;
}
.content-pagination li > *,
.tile-pagination li > *,
.table-pagination li > *,
.content-pagination li .page-gap,
.tile-pagination li .page-gap,
.table-pagination li .page-gap {
height: 50px;
width: 55px;
margin: 0 0 0 20px;
font-size: .925rem;
line-height: 2.25rem;
}
.content-pagination .svg-icon,
.tile-pagination .svg-icon {
height: 20px;
}
.tile-footer {
padding: 0 9px 9px;
}
.site-footer {
padding: 0 24px 24px;
}
.tile-footer-link {
font-size: .9rem;
line-height: .9rem;
}
.member-tile .tile-footer-link {
line-height: 1.1rem;
}
.member-tile .tile-footer-link {
float: right;
display: inline-block;
min-height: 50px;
height: 50px;
min-width: 283px;
padding: 10px;
}
.site-subnav-list-item {
font-size: 1.1rem;
}
.site-subnav-title {
margin-top: 0;
font-size: 1.2rem;
}
.site-subnav-title .svg-icon {
float: none;
top: .33333rem;
}
.sub-section > h1 {
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
margin: 20px 0 20px -9px;
padding: 31px 24px;
font-size: 1.4rem;
line-height: 1.4rem;
}
.sub-section.accordion > h1 {
width: -webkit-calc(100% - 76px);
width: calc(100% - 76px);
}
.sub-section.inner-section.wide > h1 {
font-size: 1.4rem;
line-height: 2rem;
}
.sub-section > h1 .svg-icon {
height: 40px;
width: 40px;
}
.properties {
padding: 0 10px;
}
.properties.accordion > h6::after {
right: 10px;
height: 30px;
width: 30px;
}
.properties .sub-section-content {
width: -webkit-calc( 100% + 20px ) !important;
width: calc( 100% + 20px ) !important;
margin-left: -10px !important;
}
.properties-table > tbody > tr > td {
padding: 6px 10px;
line-height: 1.9rem;
font-size: .9rem;
}
.properties-table > tbody > tr > td:last-child {
width: 50px;
}
.properties-table .svg-icon {
height: 30px;
width: 30px;
}
.sub-section.accordion > h1::after {
right: 24px;
height: 40px;
width: 40px;
}
.table th .svg-icon {
height: 40px;
width: 40px;
}
.validation-message-text-more {
width: 470px;
}
/**************************/
.user-overview {
height: 275px;
}
.awarded-points {
height: 426px;
}
.media-library {
height: 574px;
}
.my-account {
height: 593px;
}
.effort-review {
height: 457px;
}
.web-statistics {
height: 1022px;
}
.member-tile.my-account {
height: 433px;
}
.news {
height: 462px;
}
.points-history {
height: 366px;
}
.status-climb {
height: 415px;
}
.redeem-points {
height: 596px;
}
.reported-benefits {
height: 470px;
}
/************************/
.tile.effort-review .tile-title {
line-height: 1.5rem;
}
td.awarded-points-table-date,
td.effort-review-table-date {
font-weight: 600;
}
.member-tile .my-account-image-frame {
height: 200px;
width: 200px;
margin: 0 -webkit-calc(50% / 2 - 100px);
margin: 0 calc(50% / 2 - 100px);
}
.my-account-info-data {
width: 50%;
}
.my-account-badges-header {
width: 100%;
margin: 3px 0px 12px;
font-size: 1.2rem;
line-height: 1.3rem;
}
.my-account-badge {
height: 72px;
width: 72px;
}
.member-tile .my-account-badge:first-child {
margin-left: 0;
}
.member-tile .my-account-badges {
margin: 10px 0 0 12px;
}
.my-account-info-data-status-icon {
height: 66px;
}
.my-account-info-data-status-title {
line-height: 1.1rem;
}
.my-account-info-data-name {
font-size: 1.2rem;
}
.my-account-info-data-status-title,
.my-account-info-data-points-title {
font-size: 1rem;
}
.my-account-info-data-points {
font-size: 2.8rem;
line-height: 2.5rem;
}
.tile .news-element-content h2,
.tile .news-element-content p {
font-size: 1.2rem;
line-height: 1.3rem;
}
.tile .news-element:first-child {
padding: 0 0 20px;
}
.status-climb-graph {
height: 100px;
}
.status-climb-graph-progress::after {
right: -24px;
height: 48px;
width: 48px;
}
.status-climb-progress-points {
font-size: 2.8rem;
line-height: 2.4rem;
}
.status-climb-progress-currency,
.status-climb-progress-addition {
font-size: 1rem;
line-height: 1.2rem;
}
.status-climb-prev-points,
.status-climb-next-points {
font-size: 1.2rem;
}
.status-climb-prev-icon,
.status-climb-next-icon {
height: 66px;
width: 80px;
margin: 7px 0 10px;
}
.redeem-points-teaser-link-text {
font-size: 1.4rem;
line-height: 1.6rem;
}
.reported-benefit-rank {
margin: 25px 0 7px;
}
.reported-benefit:first-child .reported-benefit-rank {
margin-top: 10px;
}
.reported-benefit-prev-rank,
.reported-benefit-next-rank {
width: 100px;
font-size: 1rem;
}
.reported-benefit-title {
width: 520px;
font-size: 1rem;
}
.reported-benefit-graph {
font-size: .9rem;
}
.reported-benefit-progress {
line-height: .9rem;
}
.user-overview .tile-title {
margin-bottom: 10px;
}
.user-registrations-data {
margin-top: 20px;
}
.site-content h2.user-registrations-title {
font-size: .9rem;
line-height: 1.7rem;
}
.user-registrations-quantity {
margin-top: 16px;
margin-bottom: 0;
font-size: 1.2rem;
}
.user-registrations-new,
.user-registrations-overall,
.user-registrations-online {
height: 103px;
}
.user-registrations-header {
float: left;
}
.user-registrations-chart {
float: right;
height: 50px;
width: 69px;
margin-top: 43px;
}
.media-library h2,
.media-library p {
font-size: .9rem;
line-height: 1.1rem;
}
.media-library h2 {
margin-top: 10px;
}
.my-account-image-frame {
float: none;
margin: 0 35px;
}
.my-account-credits {
margin: 35px 0 5px;
}
.my-account-name {
font-size: 1.2rem;
line-height: 1.4rem;
}
.my-account-main-info {
height: auto;
}
.my-account-credit-motivation br {
display: none;
}
.my-account-badge {
margin: 0px 15px;
}
.tile .table.effort-review-table th,
.tile .table.effort-review-table td {
height: 46px;
}
.effort-review .tile-title {
height: 70px;
padding-right: 400px;
}
.effort-review .tile-pagination {
top: 23px;
}
.datepicker-title .tile-title {
height: 91px;
}
.datepicker {
top: 60px;
width: 100%;
}
.sub-section .datepicker {
right: 0;
padding: 0px 15px;
}
.datepicker-trigger {
top: -10px;
height: 50px;
width: 50px;
margin-right: 15px;
}
.datepicker-view {
width: 282px;
margin-right: 0;
}
.datepicker-span-time {
width: 360px;
margin-top: -5px;
padding: 0;
}
.datepicker-span {
float: right;
height: 40px;
width: 438px;
line-height: 40px;
text-align: right;
}
.datepicker-span-picker {
height: 50px;
width: 50px;
margin-left: 10px;
margin-top: -10px;
}
.web-statistics-overview-element {
height: 144px;
}
.web-statistics-overview-total {
font-size: 1.8rem;
line-height: 2.5rem;
}
.web-statistics-overview-info {
width: auto;
float: left;
font-size: .9rem;
}
.web-statistics-overview-link {
float: left;
height: 40px;
width: 40px;
margin-left: 10px;
}
.web-statistics-table > tbody > tr > td {
padding: 0 8px;
}
.web-statistics-table-duration::before,
.web-statistics-table-clicks::before,
.web-statistics-table-exits::before {
height: 28px;
}
.web-statistics-table-page-mobile th:first-child,
.web-statistics-table-page-header th.web-statistics-table-visitors {
padding-left: 0;
}
.tile.web-statistics .table th,
.tile.web-statistics .table td {
line-height: 1.2rem;
}
.participant-top-link h2,
.participant-top-link p {
display: none;
}
/* Contents */
.change-points-button-wrapper {
margin-top: 5px;
}
.change-points-button-wrapper button {
height: 40px;
width: 240px;
margin: 20px 25px 0 0;
font-size: .77777rem;
}
.change-points-button-wrapper button:nth-child(3n + 3) {
margin-right: 0;
}
.change-points-user {
width: 264px;
}
.change-points-data {
width: 497px;
}
.change-points-user-image {
height: 180px;
width: 180px;
}
.change-points-data strong {
color: rgb(0,48,135);
}
.change-points-content > div {
margin-bottom: 15px;
}
.change-points-content > div.change-points-user {
margin-bottom: 0px;
}
.change-points-content > div strong {
display: inline;
}
.change-points-data-valid strong {
display: block;
}
/* Leistungsmeldung */
.status-climb-box {
display: block;
}
.reward-box {
height: 185px;
}
.reward-box > * {
height: 100% !important;
width: auto;
}
.reward-box .reward-badges {
position: static;
display: block;
float: left;
top: auto;
width: 215px;
border-bottom: none;
}
.reward-box .reward-badges-badge {
display: inline-block;
height: 69px;
width: 69px;
margin-top: 14px;
}
.reward-box .reward-credits {
position: static;
display: block;
float: left;
top: auto;
height: auto;
width: 236px;
border-right: 1px solid rgb(206,206,206);
}
.reward-box .reward-notice {
position: static;
display: block;
float: left;
top: auto;
height: auto;
width: 185px;
margin-left: 15px;
border-bottom: none;
}
.reward-box .reward-status-climb {
display: none;
}
/* E-Mail Verwaltung */
.e-mail-administration-finalize .btn-default {
display: inline-block;
width: 345px;
}
.e-mail-administration-finalize .btn-default:not(:first-child) {
margin-left: 30px;
}
.e-mail-administration-finalize .btn-success {
width: 100%;
margin-top: 20px;
}
/* Teilnehmerverwaltung */
.participant-search {
margin-top: 20px;
}
.participant-top-link > h6,
.participant-search .right-col > h6 {
height: 40px;
margin-top: 0;
margin-bottom: 5px;
}
.participant-top-link h6,
.participant-top-link p {
display: block;
}
.result-header-settings {
margin: 5px 0;
padding: 0;
}
.result-header-settings-element .btn {
height: 40px;
width: 52px;
margin: 0 -5px 0 0;
padding: 5px;
}
.result-header-settings-element:first-child .btn {
width: 43px;
margin-right: 0;
}
.result-header-settings {
text-align: right;
}
.result-header-settings-element:not(:last-child)::after {
height: 40px;
}
.result-header-settings-element .btn {
height: 40px;
width: 50px;
}
img.profile-preview-points-medal {
height: 40px;
width: 35px;
}
/* Teilnehmer bearbeiten */
.participant-image {
top: 0;
}
.participant-image-edit {
max-width: 470px;
}
.participant-badge {
height: 40px;
width: 40px;
margin-right: 25px;
}
.check-icon {
height: 30px;
}
.participant-comment textarea {
width: 470px;
height: 260px;
}
.participant-quick-functions .btn {
width: 100%;
margin: 10px 0 20px;
}
/* Setup: Seiten */
.sites .quick-functions > div {
padding-top: 0;
padding-bottom: 15px;
}
.sites .quick-functions .btn {
width: 100%;
}
.site-title-steps .site-title-addition {
display: inline;
}
.site-title-steps .half:last-child:not(.half-sm) {
padding-bottom: 0;
}
.sites-buttons .btn {
width: 100%;
}
/* Mediathek */
.media-preview-image-wrapper {
height: 130px;
width: 220px;
}
}
/**************************************************/
@media (min-width: 1200px) {
/***************************************/
/* INITIAL STYLES */
html {
font-size: 18px;
}
.half.left {
float: left;
}
.half.right {
float: right;
}
.half {
padding: unset;
}
.half:first-child:not(.half-sm),
.half:last-child:not(.half-sm) {
padding-bottom: unset;
}
.half:last-child:first-child:not(.half-sm) {
padding: unset;
}
/***************************************/
/* COMMON STYLES */
.table-fixed-width {
width: 100%;
}
.tile .table.effort-review-table th,
.tile .table.effort-review-table td {
height: 36px;
padding-top: 0;
padding-bottom: 0;
}
.content-pagination .svg-icon,
.tile-pagination .svg-icon {
padding: 7px;
}
.tile-content .table .btn {
width: 120px;
}
th {
font-size: 1rem;
}
.closing-section .btn {
width: auto;
margin: 0;
}
.closing-section .btn.btn-lg {
width: 262px;
}
.properties-table .svg-icon {
height: 20px;
width: 20px;
}
.properties-table > tbody > tr > td {
font-size: .77777rem;
line-height: .88888rem;
}
.properties-table > tbody > tr > td:last-child {
width: 47px;
}
.sub-section.accordion > h1::after {
height: 30px;
width: 30px;
}
.table th .svg-icon {
height: 30px;
width: 30px;
}
.validation-message-text-more {
width: auto;
}
.header-search {
padding: 0 25px;
}
.header-search .form-control {
width: 100%;
}
.banner-image {
max-height: 180px;
}
/***************************************/
/* SECTION STYLES */
h6.icon-headline {
margin: -10px 0 6px;
}
.site > header > *,
.site > form > header > * {
padding-right: 1px;
padding-left: 1px;
}
.site-subnav-title {
font-size: 1.11111rem;
}
.site-subnav-title .svg-icon {
height: 31px;
width: 30px;
}
.banner {
margin-bottom: 0;
padding: 0;
}
.main-content-header .banner {
margin-top: -5px;
}
.breadcrumbs li,
.main-footer,
.copyright {
font-size: .77777rem;
}
/***************************************/
/* SITE SECTIONS */
body {
-webkit-transition: none;
transition: none;
}
html {
font-size: 18px;
}
body {
font-size: 1rem;
line-height: 1.22222rem;
}
h1 {
font-size: 1.44444rem;
line-height: 1.66666rem;
}
h2 {
font-size: 1.33333rem;
line-height: 1.44444rem;
}
h3 {
font-size: 1.11111rem;
line-height: 1.33333rem;
}
h4 {
font-size: 1.111111rem;
line-height: 1.33333rem;
}
h5 {
font-size: 1.11111rem;
line-height: 1.33333rem;
}
h6 {
font-size: 1rem;
line-height: 1.22222rem;
}
.subheadline {
font-size: .99999rem;
line-height: 1.11111rem;
}
div.site-title {
font-size: 1.44444rem;
line-height: 1.66666rem;
}
.main-wrapper {
position: relative;
min-height: 100vh;
padding-bottom: 137px;
-webkit-box-shadow: none;
box-shadow: none;
}
.dashboard .main-wrapper {
padding-bottom: 152px;
}
.main-header {
height: 128px;
}
.main {
position: relative;
padding-left: 220px;
-webkit-transition: min-height 1s;
transition: min-height 1s;
}
.dashboard .tiles {
font-size: .88888rem;
line-height: .99999rem;
}
body,
body.open {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.remove-helper {
background: transparent;
}
.main-footer {
position: absolute;
z-index: 0;
width: 100%;
bottom: 0;
}
/***************************************/
/* HEADER: System Nav */
.system-nav {
display: block;
min-width: calc(100% - 720px);
}
.system-nav-list {
padding-top: 9px;
}
.system-nav-mobile {
display: none;
}
.user-pic-frame {
margin: 0 30px;
}
.current-user {
display: block;
}
.current-user .user-pic-frame {
padding: 0 0 20px 20px;
}
.user-credits {
display: block;
}
.current-user-mobile {
display: none;
}
.current-user .user-main-info {
display: block;
white-space: nowrap;
margin-bottom: -.11111rem;
}
.user-main-info > span {
height: 1.33333rem;
}
.current-user .user-status {
display: block;
}
.current-user .credit-motivation {
display: block;
}
.shop-credit {
line-height: 35px;
}
/***************************************/
/* HEADER: Customer/User */
.customer-user-data,
.customer-user-data.logo-only {
height: auto;
width: auto;
margin: 15px 0;
padding: 0;
}
.customer-logo-frame {
float: left;
display: inline-block;
height: 52px;
width: 160px;
max-width: unset;
margin: 20px 25px 20px 35px;
}
.customer-logo {
position: static;
top: 0;
width: auto;
vertical-align: baseline;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.current-user {
display: inline-block;
float: left;
position: static;
right: 0;
width: 340px;
}
.notifications-box {
max-height: 400px;
width: 300px;
}
.notifications-list-item {
float: right;
}
.notifications-list {
height: auto;
width: auto;
min-width: 420px;
padding: 0 30px;
text-align: inherit;
}
.notifications-list-count {
top: -1px;
left: -9px;
height: 20px;
min-width: 20px;
padding: 1px 1px 1px .5px;
border-radius: 10px;
font-size: .77777rem;
line-height: .99999rem;
letter-spacing: 0;
}
.notifications-list .notifications-messages,
.notifications-list .notifications-reminder {
display: inline-block;
}
.notifications-list-item.notifications-credit,
.notifications-list-item.notifications-cart {
height: 30px;
width: 30px;
margin: 0 0 0 30px;
}
.notifications-list-mobile {
display: none;
}
.notifications-box {
top: 50px;
}
.notifications-list-item.open::after {
top: 41px;
right: 5px;
}
.notifications-credit {
display: none !important;
}
/***************************************/
/* HEADER: Main Nav */
.main-nav-wrapper {
position: absolute;
z-index: 1;
left: 220px;
height: auto;
width: 220px;
margin-left: -220px;
border-top: none;
overflow-y: visible;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.main-nav {
height: auto !important;
border-right: none;
font-size: .88888rem;
line-height: 1.05555rem;
overflow-x: unset;
overflow-y: unset;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.main-nav.show {
overflow: unset;
}
.main-nav-link {
height: 60px;
border-right: 1px solid rgb(10,58,145);
border-bottom: 1px solid rgb(10,58,145);
}
.main-nav-link.active {
height: 60px;
border-right: 1px solid rgb(0,48,135);
}
.main-nav-list-item {
border-bottom: none;
}
.main-nav-list-item,
.main-nav-sub-list-item,
.main-nav-inner-list-item {
line-height: 1.5;
}
.main-nav-link-content,
.main-nav-sub-link-content,
.main-nav-inner-link-content {
padding: 0px 35px 0px 25px;
text-overflow: ellipsis;
overflow: hidden;
}
.main-nav-sub-toggle {
display: none;
}
.main-content-helper,
.open .main-content-helper {
position: absolute;
display: none;
left: 0;
height: auto;
width: auto;
background: transparent;
opacity: 1;
z-index: 0;
-webkit-transition: none;
transition: none;
}
.main-nav-inner-link {
line-height: 1.25rem;
color: rgb(93,93,93);
}
.main-nav-sub-list {
position: static;
top: auto;
right: auto;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.main-nav-sub-open .main-nav-list-item {
margin-bottom: 0;
overflow: auto;
}
.main-nav-sub-list-item {
border-bottom: 1px solid rgb(0,48,135);
border-right: 1px solid rgb(0,48,135);
font-size: .77777rem;
line-height: .94444rem;
}
.main-nav-inner-list-item {
border-bottom: none;
}
.main-nav-list,
.main-nav-sub-list {
width: 220px;
}
.main-nav-link.active {
background-color: rgb(0,48,135);
color: rgb(255,255,255);
}
.main-nav-sub-link {
height: 47px;
border: none;
}
.main-nav-sub-link.active {
font-weight: 700;
}
.main-nav-inner-link {
height: 30px;
}
.main-nav-inner-link-content {
padding: 0 40px 0 35px;
}
.main-nav-link .svg-icon {
width: 15px;
height: 15px;
right: 15px;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
-webkit-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}
.main-nav-link.active .svg-icon {
fill: rgb(255,255,255);
-webkit-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.main-nav-sub-list,
.main-nav-inner-list {
max-height: 0px;
-webkit-transition: max-height 1.5s cubic-bezier(0,1.05,0,1.05);
transition: max-height 1.5s cubic-bezier(0,1.05,0,1.05);
}
.first-level.open .main-nav-sub-list,
.second-level.open .main-nav-inner-list {
max-height: 1000px;
-webkit-transition: max-height 1.5s ease;
transition: max-height 1.5s ease;
}
.toggle-button {
display: none;
}
.menu-panel {
position: static;
height: auto !important;
-webkit-box-shadow: none;
box-shadow: none;
overflow: hidden;
}
.menu-panel.first-level {
overflow: hidden;
}
.menu-panel.open .main-nav-sub-list {
padding-bottom: 1px;
}
.menu-panel.first-level.open {
margin-bottom: -1px;
margin-right: -1px;
border-right: none;
}
.main-nav-list,
.main-nav,
.menu-panel {
background: transparent;
-ms-overflow-style: none;
}
.menu-panel-title,
.menu-panel-close {
display: none !important;
}
/***************************************/
/* FOOTER */
.main-footer-content {
max-width: 1420px;
padding-left: 250px;
}
.copyright-content {
padding-left: 250px;
}
.copyright-company,
.copyright-logo-frame {
display: inline-block;
width: 20%;
margin-right: 0;
}
.copyright-addition {
display: inline-block;
width: 60%;
text-align: center;
}
/***************************************/
/* TILE DEFINITION */
.tile {
height: 100% !important;
padding: 0 10px;
background: rgb(255,255,255);
}
.tile-title {
margin-top: 16px;
margin-bottom: 10px;
padding-bottom: 12px;
font-size: 1rem;
line-height: 1.2rem;
}
.tile-footer {
padding: 0 10px 15px 10px;
font-size: inherit;
}
.tile-footer-link {
font-size: .88888rem;
}
.member-tile .tile-footer-link {
height: auto;
min-height: 30px;
min-width: 145px;
padding: 4px 20px;
font-size: .77777rem;
text-align: inherit;
}
.member-tile .tile-footer-right {
float: right;
}
.content-pagination li > *,
.tile-pagination li > *,
.table-pagination li > *,
.content-pagination li .page-gap,
.tile-pagination li .page-gap,
.table-pagination li .page-gap {
height: 30px;
width: 35px;
margin: 0 0 0 10px;
font-size: inherit;
}
.content-pagination li > *,
.tile-pagination li > *,
.content-pagination li .page-gap,
.tile-pagination li .page-gap,
.table-pagination li .page-gap {
line-height: 1.5rem;
}
.table-pagination li > * {
height: 40px;
width: 47px;
line-height: 2.25rem;
font-size: 1rem;
}
.content-pagination li:first-child > *,
.content-pagination li:last-child > *,
.tile-pagination li:first-child > *,
.tile-pagination li:last-child > * {
line-height: 1.33333rem;
}
.content-pagination .svg-icon,
.tile-pagination .svg-icon {
height: 15px;
padding: 0;
}
.tile .table {
font-size: .77777rem;
line-height: 1rem;
}
/***************************************/
/* CUSTOM TILES */
.awarded-points-table {
table-layout: fixed;
}
.user-registrations-data {
margin-top: 0;
}
.user-registrations-chart {
margin-top: 20px;
}
.site-content h2.user-registrations-title {
height: auto;
margin-bottom: 0;
font-size: inherit;
white-space: nowrap;
}
.user-registrations-header {
width: 120px;
}
.user-registrations-quantity {
margin-bottom: 12px;
font-size: 1.22222rem;
}
.user-registrations-new,
.user-registrations-overall,
.user-registrations-online {
float: none;
height: auto;
width: auto;
padding: 0;
}
.user-registrations-new,
.user-registrations-overall {
border-right: none;
border-bottom: 1px solid rgb(238,238,238);
}
.user-registrations-online .user-registrations-quantity {
margin-top: 0;
}
.media-library h2 {
margin-top: 15px;
}
.media-search .nav-tabs > li > a {
padding: 9px 15px;
}
.media-library h2,
.media-library p {
font-size: .88888rem;
line-height: 1.11111rem;
}
.media-library .video-js {
height: 258px !important;
margin-top: 5px;
}
.my-account-credits-wrapper {
width: 160px;
white-space: nowrap;
}
.my-account-image-frame {
height: 76px;
width: 76px;
margin: 0 40px;
border-radius: 38px;
}
.my-account-badge {
height: 50px;
width: 50px;
}
.my-account-name {
max-width: 209px;
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.my-account-status-title,
.my-account-status-current {
font-size: .88888rem;
}
.my-account-remaining-credits,
.my-account-credit-motivation,
.my-account-credit-view {
font-size: .77777rem;
}
.effort-review .tile-title {
height: auto;
}
.effort-review .tile-pagination {
top: 9px;
}
.effort-review-table {
table-layout: fixed;
width: 100%;
max-width: 100%;
}
.web-statistics-table > tbody > tr > td {
padding: 8px;
}
.web-statistics-table-separator,
.web-statistics-table-page-mobile {
display: none;
}
.web-statistics-table-page {
display: table-cell;
}
.effort-review-table-date {
width: 10.5%;
}
.effort-review-table-points {
width: 8%;
}
.effort-review-table-name {
width: 18%;
}
.effort-review-table-action {
width: 30.5%;
}
.effort-review-table-check {
width: 18%;
padding-left: 30px;
background: unset;
}
.effort-review-table-release {
width: 15.5%;
background: unset;
text-align: right;
}
.datepicker-title .tile-title {
height: auto;
}
.datepicker-span-time {
width: 230px;
}
.web-statistics-overview {
display: none;
}
.datepicker {
top: 9px;
width: 60%;
}
.sub-section .datepicker {
padding: 0px 25px;
}
.datepicker-trigger {
top: auto;
height: 35px;
width: 35px;
margin-right: 25px;
}
.datepicker-view {
position: absolute;
right: 283px;
width: auto;
}
.datepicker-view-label {
display: inline-block;
}
.datepicker-span {
font-size: inherit;
width: auto;
}
.datepicker-span-picker {
height: 35px;
width: 35px;
margin: -2px 0 0 15px;
}
.web-statistics-table {
width: 100%;
max-width: 100%;
margin-top: 10px;
}
.web-statistics-table-total,
.web-statistics-table-info {
display: block;
white-space: normal;
}
.tile.web-statistics .table td {
line-height: 1rem;
}
.web-statistics-table-duration::before,
.web-statistics-table-clicks::before,
.web-statistics-table-exits::before {
display: none;
}
.tile.web-statistics .table th:not(:first-child),
.tile.web-statistics .table td:not(:first-child) {
border-left: 1px solid rgb(206,206,206);
}
.web-statistics-table-page-header th.web-statistics-table-visitors {
padding-left: 8px;
}
.web-statistics-table-page-header th {
font-size: .88888rem;
}
.web-statistics-table-total {
font-size: 1.55555rem;
line-height: 2.33333rem;
}
.web-statistics-table-info {
font-size: .77777rem;
}
.my-account-image-frame {
height: 96px;
width: 96px;
border-radius: 48px;
margin: 6px 30px;
}
.my-account-info-data-name {
font-size: 1.11111rem;
}
.my-account-info-data-points-title {
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.my-account-info-data-status-title {
font-size: 1.111111rem;
line-height: inherit;
}
.my-account-info-data-points {
font-size: 2.55555rem;
line-height: 2.33333rem;
}
.tile .news-element-content p {
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.tile .news-element-content h2 {
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.status-climb-graph {
height: 70px;
}
.status-climb-graph-progress::after {
right: -17px;
height: 34px;
width: 34px;
}
.status-climb-graph::before {
left: -10px;
width: 10px;
}
.status-climb-graph::after {
right: -10px;
width: 10px;
}
.status-climb-distance {
margin-top: 63px;
}
.transactions .status-climb-distance {
margin-top: 20px;
}
.status-climb-progress-points {
line-height: 2.77777rem;
font-size: 2.55555rem;
font-weight: 700;
}
.status-climb-prev-points,
.status-climb-next-points,
.status-climb-progress-currency,
.status-climb-progress-addition,
.reported-benefit-prev-rank,
.reported-benefit-title,
.reported-benefit-next-rank {
font-size: 1.11111rem;
}
.status-climb-progress-currency,
.status-climb-progress-addition {
line-height: 1.33333rem;
}
.reported-benefit-prev-rank {
width: 90px;
}
.reported-benefit-title {
width: 253px;
}
.reported-benefit-graph {
font-size: .99999rem;
line-height: 1.11111rem;
}
.reported-benefit-next-rank {
width: 90px;
}
.reported-benefit-graph::before {
left: -10px;
width: 10px;
}
.reported-benefit-graph::after {
right: -10px;
width: 10px;
}
.tile.redeem-points header {
z-index: 2;
margin: 0 -20px;
}
.tile.redeem-points .tile-content {
height: 100%;
width: 100%;
margin: 0;
}
/* Contents */
.inner-section {
padding: 0;
}
.sub-section > h1 {
margin-left: 15px;
margin-right: 15px;
padding: 17px 24px;
box-sizing: border-box;
font-size: 1.33333rem;
}
.sub-section.accordion > h1 {
width: -webkit-calc( 100% - 30px );
width: calc( 100% - 30px );
}
.sub-section.separate > h1 {
margin-top: 0;
}
.sub-section.inner-section > h1 {
width: -webkit-calc( 100% * 0.75 - 30px );
width: calc( 100% * 0.75 - 30px );
padding: 10px 15px;
font-size: 1rem;
}
.sub-section.inner-section.wide > h1 {
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
font-size: 1.33333rem;
padding: 17px 15px;
}
.sub-section > h1 .svg-icon {
height: 32px;
width: 32px;
margin-top: -5px;
}
.separate {
border-top: 20px solid rgb(238,238,238); }
.form-section h2 {
margin-bottom: 0;
}
.form-section > .row-wrapper > .row:not(:last-of-type)::after,
.form-section > .row:not(:last-of-type)::after,
.form-section .sub-section-content > .row-wrapper > .row:not(:last-of-type)::after,
.form-section .sub-section-content > .row:not(:last-of-type)::after {
content: '';
position: relative;
top: 25px;
width: -webkit-calc( 100% - 40px );
width: calc( 100% - 40px );
margin: 0 auto;
border-bottom: 1px solid rgb(238,238,238);
}
.form-section .sub-section-content > .row-wrapper > .row:not(:last-of-type)::after,
.form-section .sub-section-content > .row:not(:last-of-type)::after {
width: -webkit-calc( 100% - 50px );
width: calc( 100% - 50px );
}
.form-section > .row-wrapper > .row h6,
.form-section > .row h6,
.form-section .sub-section-content > .row-wrapper > .row h6,
.form-section .sub-section-content > .row h6 {
padding-top: 0;
}
.site-subnav-list-item {
font-size: 1.11111rem;
line-height: 2.125rem;
}
/* Index / Login */
.content-site.index-login {
width: 600px;
}
/* Leistung überprüfen */
.effort-detail-check textarea {
height: 150px;
width: 443px;
}
.effort-detail-check .radio.left {
margin-left: 1rem;
margin-right: 2rem;
}
.effort-detail-check .btn {
width: 443px;
margin-top: 1rem;
}
/* Teilnehmerverwaltung */
.participant-top-link h2,
.participant-top-link p {
display: block;
}
.participant-top-link p {
height: 72px;
font-size: .88888rem;
line-height: .99999rem;
}
.participant-search-single-row {
padding: 15px 0;
}
.participant-search-single-row:last-child {
padding-top: 0;
}
.participant-search-multiple input,
.participant-search-multiple .select-styler {
max-width: 282px !important;
}
.participant-search-multiple {
height: 352px;
}
.participant-search-multiple-inner {
position: absolute;
top: 121px;
right: 0;
width: 966px;
padding: 20px 10px;
z-index: 2;
}
.participant-search-multiple-inner::before {
content: "";
position: absolute;
top: 0;
left: 15px;
height: 100%;
width: -webkit-calc( 100% - 30px );
width: calc( 100% - 30px );
background: rgb(255,255,255);
z-index: -1;
}
/* Leistungsmeldung */
.highlight-box {
padding: 20px 67px;
}
.reward-box {
height: 178px;
}
.reward-box .reward-badges {
width: 236px;
padding: 5px 0;
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.reward-box .reward-credits {
width: 242px;
padding: 5px 0;
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.reward-box .reward-notice {
width: 264px;
padding: 10px 0;
margin-left: 20px;
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.reward-box .reward-badges strong,
.reward-box .reward-credits strong {
font-size: 1.66666rem;
}
/* Newsfeed */
.newsfeed-content {
margin-top: 0;
}
.newsfeed-content .sub-section.separate {
border: none;
}
.newsfeed-content > .sub-section {
margin: 0;
}
.newsfeed .sub-section > .row > div {
padding: 15px;
}
.newsfeed-header > .row > div:last-child {
margin-bottom: 15px;
}
.newsfeed-header > .row > div {
background: rgb(255,255,255);
width: -webkit-calc(100% - 28px);
width: calc(100% - 28px);
margin: 0 14px;
padding-left: 15px;
padding-right: 15px;
}
.newsfeed .sub-section.personal {
display: block;
float: none;
position: absolute;
right: 0;
width: 50%;
}
.newsfeed-header .site-title {
display: inline-block;
width: 100%;
margin-top: 14px;
margin-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
border-bottom: 1px solid rgb(10,58,145);
color: rgb(0,48,135);
}
.newsfeed-element.highlighted::after {
top: 6px;
right: 30px;
}
.news-actions {
padding: 15px 0;
}
.news-action-link .svg-icon {
height: 40px;
width: 40px;
}
.news-actions > * > * {
height: 40px;
line-height: 40px;
}
/* E-Mail-Admimistration */
.e-mail-administration-finalize .btn-default,
.e-mail-administration-finalize .btn-success {
display: inline-block;
width: 212px;
}
.e-mail-administration-finalize .btn:not(:first-child) {
margin-left: 30px;
}
.e-mail-administration-finalize .btn-success {
margin-top: 0;
}
/* Teilnehmerverwaltung */
.participant-heading > div {
padding-top: 10px;
padding-bottom: 0;
}
.participant-heading-separator {
display: block;
}
.participant-search > [class^="col-"] {
min-height: 12.6875rem;
}
.participant-results {
padding: 0 15px;
}
.participant-results > * {
padding: 0 !important;
}
.result-header-settings {
margin: 3px 0;
}
.result-header-settings-element .svg-icon {
height: 100%;
width: 100%;
padding: 0;
vertical-align: baseline;
}
.profile-preview-link {
padding: 10px;
font-size: 1.125rem;
}
.profile-preview-image-wrapper {
height: 214px;
width: 214px;
}
.profile-online-indicator {
height: 26px;
width: 26px;
border: 13px solid transparent;
}
.profile-online-indicator.user-online {
border-top: 13px solid rgb(115,155,75);
border-right: 13px solid rgb(115,155,75);
}
.profile-online-indicator.user-offline {
border-top: 13px solid rgb(195,26,25);
border-right: 13px solid rgb(195,26,25);
}
.profile-preview-name {
margin: 11px 0 0;
font-size: 1.125rem;
}
img.profile-preview-points-medal {
height: 35px;
width: 30px;
}
/* Teilnehmer bearbeiten */
.participant-quick-functions .btn {
width: -webkit-calc( 33% - 16.66667px );
width: calc( 33% - 16.66667px ); padding: 0;
}
.participant-quick-functions .btn:not(:last-child) {
margin-right: 25px;
}
.participant-image {
position: static;
float: right;
top: unset;
right: unset;
max-height: 262px;
width: 262px;
}
.participant-image-edit {
max-width: 292px;
}
.participant-comment textarea {
width: 100%;
height: 150px;
}
.participant-badge {
height: 68px;
width: 68px;
margin-right: 30px;
}
.check-icon {
height: 20px;
width: 40px;
margin: 0;
}
/* Teilnehmer hinzufügen: Gruppen */
.group-rights-table th:not(:first-child) {
padding-left: 15px;
}
th.group-rights-table-right {
padding-left: 0;
}
.group-rights-table td:not(.button-td):not(:first-child),
.group-rights-table th:not(.button-td):not(:first-child) {
border-left: 1px solid rgb(206,206,206) !important;
}
.table.group-rights-table > tbody > tr > th {
padding-top: 0;
}
.group-rights-table th,
.group-rights-table td {
width: auto;
text-align: left;
font-size: .88888rem;
}
.group-rights-table td:not(:first-child) {
width: 18.75%;
}
.group-rights-table .checkbox label {
height: auto;
}
.group-rights-table .checkbox label .checkbox-desc::before,
.group-rights-table .checkbox label .checkbox-desc::after {
left: -20px;
}
.group-rights-table-separator {
display: none;
}
.group-rights-table-right {
display: table-cell;
}
/* Teilnehmergruppen */
.participant-groups .inner-section-content > hr {
display: block;
}
.new-group-button {
margin-bottom: 20px;
}
/* Leistung prüfen */
.effort-check-table .checkbox label {
height: 20px;
line-height: 20px;
}
.effort-check-table-check {
width: 80px;
}
.effort-check-table-date {
width: 110px;
}
.effort-check-table-points {
width: 85px;
}
.effort-check-table-name {
width: 220px;
}
.effort-check-table-check.button-td {
width: 172px;
}
.effort-check-table .checkbox label .checkbox-desc::before,
.effort-check-table .checkbox label .checkbox-desc::after {
height: 20px;
width: 20px;
background-size: 14px 14px;
}
.effort-check-table-check .btn {
height: 30px;
margin: 5px 0 5px 20px;
line-height: 28px !important;
width: 146px;
}
.effort-decline .radio {
margin-top: 10px;
margin-bottom: 10px;
}
/* Setup: Seiten */
.sites .quick-functions .btn {
width: 320px;
}
.site-title-steps .site-title {
height: 61px;
}
.site-title-steps div.site-title {
margin-top: 20px;
margin-bottom: 20px;
}
.site-title-steps h1:not(:last-child) {
border-bottom: 1px solid rgb(10,58,145);
}
/* Mediathek */
.row.media-results {
padding: 0 15px;
}
.media-results > * {
padding: 0 !important;
}
.media-preview {
padding: 10px;
}
.media-preview-image-wrapper {
height: 128px;
width: 214px;
}
.btn.media-preview-delete,
.btn.media-preview-edit {
margin: 0 0 0 10px;
}
}
@media (min-width: 1420px) {
/* Common Styles */
.header-search {
padding: 0 35px;
}
/* Sections */
.main-header {
height: 115px;
}
.site > header > *,
.site > form > header > * {
padding-right: 0px;
padding-left: 0px;
}
.form-section .sub-section-content > .row-wrapper > .row:not(:last-of-type)::after,
.form-section .sub-section-content > .row:not(:last-of-type)::after {
width: -webkit-calc( 100% - 70px );
width: calc( 100% - 70px );
}
.sub-section-content > hr,
.sub-section-content > .row-wrapper > hr,
.form-section > .row:not(:last-of-type)::after,
.form-section > .row-wrapper > .row:not(:last-of-type)::after {
width: -webkit-calc(100% - 70px);
width: calc(100% - 70px);
}
.current-user {
width: 500px;
}
.customer-logo-frame {
margin: 7px 25px 7px 35px;
}
.user-credits {
display: inline-block;
overflow: hidden;
}
/* Elements */
.nav-tabs > li:nth-child(1),
.nav-tabs > li:nth-child(3) {
width: 80px;
}
.nav-tabs > li:nth-child(2) {
width: 145px;
}
.nav-tabs > li:nth-child(n+4) {
width: auto;
margin-top: 0;
}
.nav-tabs > li:nth-child(n+4) {
width: 230px;
}
.nav-tabs > li:not(:nth-child(n+4)):not(:last-child) > a::after {
content: "";
position: absolute;
display: block;
top: 5px;
right: 0px;
height: 22px;
width: 1px;
background-color: rgb(206,206,206);
}
/**/
.tile {
padding: 0 20px;
}
.tile-title {
padding-bottom: 8px;
font-size: 1.11111rem;
line-height: 1.33333rem;
}
.tile-footer {
padding: 0 20px 15px 20px;
}
.tile-footer-link {
font-size: .77777rem;
}
.sub-section .datepicker {
padding: 0px 35px;
}
.datepicker-trigger {
margin-right: 35px;
}
/* Tiles */
/* HOOK */
.row.hook-bottom-section {
padding: 35px;
}
/* Custom Tiles */
.my-account-image-frame {
height: 96px;
width: 96px;
border-radius: 48px;
}
.my-account-name {
max-width: 276px;
}
.my-account-badge {
height: 72px;
width: 72px;
}
.my-account-credits-wrapper {
width: 175px;
}
.status-climb-graph {
height: 100px;
}
.status-climb-graph-progress::after {
right: -24px;
height: 48px;
width: 48px;
}
.status-climb-graph::before {
left: -20px;
width: 20px;
}
.status-climb-graph::after {
right: -20px;
width: 20px;
}
.reported-benefit-title {
width: 335px;
}
.reported-benefit-graph::before {
left: -20px;
width: 20px;
}
.reported-benefit-graph::after {
right: -20px;
width: 20px;
}
.effort-review .tile-content .table .btn {
width: 145px;
}
/* SITES */
/* Leistung überprüfen */
.effort-detail-check textarea {
width: 455px;
}
.effort-detail-check .btn {
width: 455px;
}
/* Leistungsmeldung */
.status-climb-box {
padding: 30px 67px;
}
.status-climb-box .status-climb-progress,
.status-climb-box .status-climb-prev-icon,
.status-climb-box .status-climb-next-icon {
margin-top: 0;
}
.status-climb-box .status-climb-distance {
margin-bottom: 30px;
}
.highlight-box {
padding: 25px 67px;
}
.reward-box .reward-badges,
.reward-box .reward-credits {
width: 294px;
}
.reward-box .reward-notice {
width: 338px;
}
/* Newsfeed */
.newsfeed-header > .row > div {
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
margin: 0 15px;
padding-left: 20px;
padding-right: 20px;
}
/* E-Mail-Admimistration */
.e-mail-administration-finalize .btn-default,
.e-mail-administration-finalize .btn-success {
width: 262px;
}
/* Teilnehmerverwaltung */
.participant-search-multiple {
height: 389px;
}
.participant-search-multiple-inner {
width: 1170px;
padding: 20px;
}
.participant-search-single-row {
padding: 2px 0;
}
.participant-results {
padding: 0;
}
.participant-results > * {
padding: 0 15px !important;
}
.profile-preview-link {
padding: 15px 20px;
}
.profile-preview-image-wrapper {
height: 222px;
width: 222px;
}
/* Teilnehmer bearbeiten */
.participant-quick-functions .btn {
width: -webkit-calc( 33% - 46.66667px );
width: calc( 33% - 46.66667px ); }
.participant-quick-functions .btn:not(:last-child) {
margin-right: 70px;
}
.participant-comment textarea {
width: 652px;
}
.participant-image {
float: none;
}
.participant-image-edit {
max-width: 360px;
}
/* Mediathek */
.row.media-results {
padding: 0;
}
.media-results > * {
padding: 0 15px !important;
}
.media-preview {
padding: 15px 20px;
}
.media-preview-image-wrapper {
height: 132px;
width: 222px;
}
}
/*********************************************/
/*****************ADDON***********************/
/* Dynatable */
.dynatable_error_oddrow,
.dynatable_error_evenrow {
position: relative;
color: rgb(195,26,25) !important;
}
.dynatable_error_evenrow::before,
.dynatable_error_oddrow::before {
content: "";
display: block;
position: absolute;
top: 0;
left: -1px;
width: 16px;
height: 16px;
border-top: solid 8px rgb(195,26,25);
border-left: solid 8px rgb(195,26,25);
border-right: solid 8px transparent;
border-bottom: solid 8px transparent;
}
td.dynatable_edit_form {
text-align: center !important;
}
.dynatable-btn-sort-descending {
margin: 0px !important;
}
.dynatable-btn-sort-active {
cursor: default;
}
.dynatable-sorted-active-icon {
fill: rgb(0,48,135);
}
.dynatable th {
min-width: 280px;
}
.dynatable th .sort-arrows {
font-size: 0;
}
.dynatable th > .clearfix {
display: block;
width: 100%;
position: relative;
}
.dynatable th .col-title {
max-width: 159px;
margin-right: 70px;
overflow: hidden;
text-overflow: ellipsis;
float: none;
line-height: 1.33333rem;
}
.dynatable th .dynatable_title_link {
display: inline-block;
float: left;
margin-right: 70px;
max-width: 200px;
word-wrap: break-word;
}
.dynatable th .btn-icon {
width: 60px;
height: 40px;
margin: 0;
padding: 5px;
line-height: 40px;
}
.dynatable th .btn-icon .svg-icon {
height: 100%;
width: 100%;
padding: 0;
vertical-align: top;
}
.dynatable th select.form-control,
.dynatable th input.form-control,
.dynatable th .select-styler {
width: 100%;
min-width: 280px;
margin: 5px 0;
}
@media screen and (min-width: 768px) {
.dynatable th {
min-width: 280px;
}
.dynatable th .col-title {
max-width: 180px;
}
.dynatable th .btn-icon {
width: 40px;
height: 30px;
padding: 2px;
line-height: 30px;
}
.dynatable th select.form-control,
.dynatable th input.form-control,
.dynatable th .select-styler {
min-width: 225px;
}
}
@media screen and (min-width: 1200px) {
.dynatable th {
min-width: 200px;
}
.dynatable th .btn-icon {
width: 30px;
height: 20px;
padding: 0;
line-height: 20px;
}
.dynatable th select.form-control,
.dynatable th input.form-control,
.dynatable th .select-styler {
min-width: 175px;
}
}
/* Breakpoint Listener */
.break-listener {
-webkit-animation-name: breaka;
animation-name: breaka;
-webkit-animation-duration: 0.001s;
animation-duration: 0.001s;
}
@media screen and (min-width: 768px) {
.break-listener {
-webkit-animation-name: breakb;
animation-name: breakb;
}
}
@media screen and (min-width: 1200px) {
.break-listener {
-webkit-animation-name: breakc;
animation-name: breakc;
}
}
@media screen and (min-width: 1420px) {
.break-listener {
-webkit-animation-name: breakd;
animation-name: breakd;
}
}
@-webkit-keyframes breaka {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@keyframes breaka {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-webkit-keyframes breakb {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@keyframes breakb {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-webkit-keyframes breakc {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@keyframes breakc {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-webkit-keyframes breakd {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@keyframes breakd {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
.break-listener::before {
content: "600";
display: none;
}
@media (min-width: 768px) {
.break-listener::before {
content: "768";
}
}
@media (min-width: 1200px) {
.break-listener::before {
content: "1200";
}
}
@media (min-width: 1420px) {
.break-listener::before {
content: "1420";
}
}
/* Gridstack */
@media screen and (min-width: 1200px) {
.grid-stack > .grid-stack-item > .grid-stack-item-content {
left: 15px;
right: 15px;
overflow-y: hidden;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content.loading {
border: 1px dashed rgb(206,206,206);
background-image: url("/images/wait.gif");
background-repeat: no-repeat;
background-position: center center;
}
.grid-stack-item-content .tile-title {
cursor: move;
}
}
@media screen and (max-width: 1199px) {
[class*="grid-stack"] {
position: static !important;
height: auto !important;
top: auto !important;
}
.grid-stack {
padding: 0 !important;
}
.grid-stack > div {
margin: 15px 0px !important;
padding: 15px !important;
background: rgb(255,255,255) !important;
}
}
/* Datepicker */
.ui-datepicker {
z-index: 100;
margin-top: 85px;
padding: 5px 10px 10px;
border: 1px solid rgb(0,48,135);
background: rgb(255,255,255);
}
.dashboard .ui-datepicker {
margin-top: 25px;
-webkit-transform: translateX(-webkit-calc((100vw - 600px) / 2 * -1));
-ms-transform: translateX(calc((100vw - 600px) / 2 * -1));
transform: translateX(calc((100vw - 600px) / 2 * -1));
width: 225px;
}
button.ui-datepicker-close {
height: 40px;
width: 100%;
margin: 10px 0 0 0;
line-height: 38px;
border: 1px solid rgb(0,48,135);
background: rgb(0,48,135);
color: rgb(255,255,255);
}
.ui-datepicker-inline {
position: absolute;
}
.ui-datepicker-prev,
.ui-datepicker-next {
position: absolute;
display: block;
height: 40px;
width: 22px;
padding: 10px 5px;
cursor: pointer;
}
.ui-datepicker-prev {
left: 8px;
}
.ui-datepicker-next {
right: 8px;
}
.ui-datepicker-header .ui-icon,
.ui-datepicker-header .svg-icon {
display: block;
height: 100%;
width: 100%;
}
.ui-datepicker-title {
line-height: 40px;
text-align: center;
}
.ui-datepicker-calendar {
width: 300px;
}
.ui-year-picker .ui-datepicker-month {
display: none !important;
}
.ui-month-picker .ui-datepicker-header,
.ui-year-picker .ui-datepicker-header {
margin: 0 20px;
}
.ui-month-picker .ui-datepicker-calendar,
.ui-year-picker .ui-datepicker-calendar {
display: none !important;
}
.ui-datepicker-calendar th span {
display: block;
height: 100%;
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
height: 2rem;
line-height: 2rem;
text-align: center;
}
.ui-datepicker-calendar a {
display: block;
height: 100%;
width: 100%;
font-weight: 600;
}
.ui-datepicker-calendar a:hover {
text-decoration: none;
}
.ui-datepicker-calendar a.ui-state-hover,
.ui-datepicker-calendar a.ui-state-active {
background: rgb(238,238,238);
}
.ui-datepicker-current {
display: none !important;
}
.ui-datepicker-other-month a {
color: rgb(93,93,93);
}
.datepicker-span-picker.open .svg-icon {
fill: rgb(0,48,135);
}
.ui-datepicker::before {
content: "";
position: absolute;
display: block;
z-index: 99;
top: -10px;
right: 35px;
height: 20px;
width: 20px;
border-width: 1px;
border-style: solid;
border-color: rgb(0,48,135) rgb(255,255,255) rgb(255,255,255) rgb(0,48,135);
background: rgb(255,255,255);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
.ui-datepicker {
margin-top: 15px;
}
.dashboard .ui-datepicker {
-webkit-transform: translateX(-webkit-calc((100vw - 768px) / 2 * -1));
-ms-transform: translateX(calc((100vw - 768px) / 2 * -1));
transform: translateX(calc((100vw - 768px) / 2 * -1));
}
.ui-datepicker::before {
right: 39px;
}
}
@media screen and (min-width: 1200px) {
.ui-datepicker {
margin-top: 20px;
}
.dashboard .ui-datepicker {
-webkit-transform: translateX(-webkit-calc((100vw - 1175px) / 2 * -1));
-ms-transform: translateX(calc((100vw - 1175px) / 2 * -1));
transform: translateX(calc((100vw - 1175px) / 2 * -1));
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
height: 1.5rem;
line-height: 1.5rem;
}
.ui-datepicker-calendar {
width: 200px;
}
.ui-datepicker::before {
right: 17px;
}
}
@media screen and (min-width: 1420px) {
.dashboard .ui-datepicker {
-webkit-transform: translateX(-171px);
-ms-transform: translateX(-171px);
transform: translateX(-171px);
}
.ui-datepicker::before {
right: 25px;
}
}
/* Tooltips */
.tooltip::after {
content: " ";
height: 100%;
width: 100%;
position: relative;
display: block;
top: -100%;
opacity: 0;
}
.ui-tooltip {
position: absolute;
z-index: 9999;
max-width: 300px;
padding: 10px;
background: rgb(0,48,135);
cursor: default;
color: rgb(255,255,255) !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ui-tooltip * {
color: rgb(255,255,255) !important;
}
.ui-tooltip::before {
content:" ";
display: block;
position: absolute;
left: 50%;
height: 0;
width: 0;
border-style: solid;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.ui-tooltip.bottom::before {
bottom: -12px;
border-bottom-color: transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid rgb(0,48,135);
}
.ui-tooltip.top::before {
top: -13px;
border-top-color: transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 9px solid rgb(0,48,135);
}
/* TinyMCE */
.mce-window.mce-in {
z-index: 1000 !important;
}
.mce-fade.mce-in {
z-index: 999 !important;
}
/* D3 Charts */
.view-selection-title {
font-weight: 600;
}
.graph-wrapper {
border: 1px solid;
padding: 15px 10px;
}
.view-selection-wrapper {
margin: 20px;
}
.view-selection {
margin-right: 60px;
color: rgb(93,93,93);
text-decoration: underline;
}
.view-selection.active {
color: rgb(0,48,135);
font-weight: 600;
}
.graph-selector {
margin: 0;
padding: 0;
}
.graph-selector li {
display: inline-block;
margin-right: 20px;
}
.graph-selector label::after {
content: "";
display: inline-block;
height: 3px;
width: 1.5rem;
margin-left: .5rem;
vertical-align: middle;
}
.graph-selector label::after,
.graph-selector label.graph1::after {
background: rgb(63,149,195);
}
.graph-selector label.graph2::after {
background: rgb(2,78,118);
}
.graph-selector label.graph3::after {
background: rgb(3,148,136);
}
.graph-selector label.graph4::after {
background: rgb(119,66,128);
}
.graph-selector label.graph5::after {
background: rgb(169,108,70);
}
.graph-selector label.graph6::after {
background: rgb(230,160,0);
}
.graph-selector label.graph7::after {
background: rgb(227,123,64);
}
.graph-selector label.graph8::after {
background: rgb(224,88,50);
}
.graph-selector label.graph9::after {
background: rgb(115,155,75);
}
.graph-selector label.graph10::after {
background: rgb(195,26,25);
}
.graph-selector label .checkbox-desc {
display: inline-block;
}
.multi-line-chart > svg {
width: 100%;
}
.my-account-credit-chart > svg {
width: 570px;
height: 117px;
}
.my-account-credit-chart text.shadow {
stroke: rgb(255,255,255);
stroke-width: 2.5px;
opacity:0.9;
}
.multi-line-chart text,
.my-account-credit-chart text {
font-size: .7rem;
fill: rgb(93,93,93);
}
.multi-line-chart path,
.my-account-credit-chart path {
stroke-width: 3;
fill: none;
}
.my-account-credit-chart path {
stroke: rgb(191,0,51);
}
.multi-line-chart .line,
.multi-line-chart .line.graph1 {
stroke: rgb(63,149,195);
}
.multi-line-chart .line.graph2 {
stroke: rgb(2,78,118);
}
.multi-line-chart .line.graph3 {
stroke: rgb(3,148,136);
}
.multi-line-chart .line.graph4 {
stroke: rgb(119,66,128);
}
.multi-line-chart .line.graph5 {
stroke: rgb(169,108,70);
}
.multi-line-chart .line.graph6 {
stroke: rgb(230,160,0);
}
.multi-line-chart .line.graph7 {
stroke: rgb(227,123,64);
}
.multi-line-chart .line.graph8 {
stroke: rgb(224,88,50);
}
.multi-line-chart .line.graph9 {
stroke: rgb(115,155,75);
}
.multi-line-chart .line.graph10 {
stroke: rgb(195,26,25);
}
.multi-line-chart .axis path,
.multi-line-chart .axis line,
.my-account-credit-chart .axis path,
.my-account-credit-chart .axis line {
display: none;
fill: none;
stroke: rgb(158,158,158);
stroke-width: 1;
shape-rendering: crispEdges;
}
.multi-line-chart .domain,
.my-account-credit-chart .domain {
display: none;
}
.multi-line-chart .grid .tick,
.my-account-credit-chart .grid .tick {
stroke: rgb(238,238,238);
shape-rendering: crispEdges;
}
.multi-line-chart .grid path,
.my-account-credit-chart .grid path {
stroke-width: 0;
}
.multi-line-chart .area,
.my-account-credit-chart .area {
fill: rgb(0,48,135);
stroke-width: 0;
opacity: .5;
}
.multi-line-chart .area {
opacity: .25;
}
.multi-line-chart .area.graph1 {
fill: rgb(63,149,195);
}
.multi-line-chart .area.graph2 {
fill: rgb(2,78,118);
}
.multi-line-chart .area.graph3 {
fill: rgb(3,148,136);
}
.multi-line-chart .area.graph4 {
fill: rgb(119,66,128);
}
.multi-line-chart .area.graph5 {
fill: rgb(169,108,70);
}
.multi-line-chart .area.graph6 {
fill: rgb(230,160,0);
}
.multi-line-chart .area.graph7 {
fill: rgb(227,123,64);
}
.multi-line-chart .area.graph8 {
fill: rgb(224,88,50);
}
.multi-line-chart .area.graph9 {
fill: rgb(115,155,75);
}
.multi-line-chart .area.graph10 {
fill: rgb(195,26,25);
}
.member-tile .my-account-credit-chart > svg {
height: 180px;
margin-top: 10px;
}
@media (min-width: 768px) {
.view-selection-wrapper {
margin: 5px 0 15px;
}
.my-account-credit-chart > svg {
width: 720px;
height: 148px;
}
.member-tile .my-account-credit-chart > svg {
height: 180px;
}
}
@media (min-width: 1200px) {
.my-account-credit-chart > svg {
width: 430px;
height: 105px;
}
.member-tile .my-account-credit-chart > svg {
width: 916px;
height: 200px;
margin-top: 20px;
}
}
@media (min-width: 1420px) {
.my-account-credit-chart > svg {
width: 510px;
height: 105px;
}
.member-tile .my-account-credit-chart > svg {
width: 1100px;
height: 200px;
}
}
/* Circular Progress */
.circular-progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
.circular-progress-value path {
stroke: rgb(0,48,135);
}
.circular-progress > div {
display: inline-block;
position: relative;
text-align: center;
color: #93A2AC;
font-weight: 100;
margin: 10px 17px 10px 3px;
}
.circular-progress > div::before {
content: attr(data-name);
position: absolute;
width: 100%;
bottom: -2rem;
}
.circular-progress > div::after {
content: attr(data-percent)"%";
position: absolute;
width: 100%;
top: 50%;
left: 0;
text-align: center;
font-weight: 700;
font-size: 1.66666rem;
line-height: 1.66666rem;
color: rgb(0,48,135);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.progress-finished,
.circular-progress svg {
width: 136px;
height: 136px;
}
.circular-progress-track {
position: absolute;
left: 0;
top: 0;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circular-progress-track path {
fill: none;
stroke-width: 50;
stroke-dasharray: 629;
stroke: rgba(255,255,255,.75);
-webkit-transition: stroke-dashoffset .1s;
transition: stroke-dashoffset .1s;
}
/* Gridstack */
.grid-stack {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Animations */
.main-nav-wrapper {
-webkit-animation: mymove 1s;
animation: mymove 1s;
}
@-webkit-keyframes mymove {
0% {opacity: 0;}
50% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes mymove {
0% {opacity: 0;}
50% {opacity: 0;}
100% {opacity: 1;}
}
/* Slick Slider */
.special-offer-wrapper {
position: relative;
display: none;
background: rgb(255,255,255);
}
.special-offer-content {
position: relative;
margin: 0 auto;
}
.special-offer {
display: block;
width: 100%;
}
.special-offer[href="#0"] {
cursor: default;
}
.slick-dots {
/* position: absolute; Ticket#2016090110002137 */
bottom: 0px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
.slick-dots li {
display: inline-block;
}
.slick-dots li button {
height: 15px;
width: 15px;
margin: 7px;
padding: 0;
border: none;
border-radius: 100%;
background: #ddd;
font-size: 0;
line-height: 0;
cursor: pointer;
overflow: hidden;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.slick-dots .slick-active button {
background: rgb(0,48,135);
}
.special-offer-desktop,
.special-offer-tablet {
display: none;
position: relative;
background-size: contain;
background-repeat: no-repeat;
background-color: tranparent;
background-position: center top;
margin: 0 auto;
overflow: hidden;
}
.special-offer-desktop img,
.special-offer-tablet img {
height: auto;
visibility: visible !important;
width: 100%;
vertical-align: middle;
border: 0 none;
}
.special-offer-mobile {
display: block;
position: relative;
background-size: contain;
background-repeat: no-repeat;
background-color: tranparent;
background-position: center top;
margin: 0 auto;
overflow: hidden;
}
.special-offer-mobile img {
height: auto;
visibility: visible !important;
width: 100%;
vertical-align: middle;
border: 0 none;
}
.slick-slide img {
margin: 0 auto;
}
.special-offer-image {
position: absolute;
top: 34%;
left: 7%;
width: 20%;
}
.special-offer-image img {
width: 100%;
visibility: visible !important;
}
.special-offer-brand {
position: absolute;
top: 60%;
left: 60%;
}
.special-offer-name {
position: absolute;
top: 30%;
left: 35%;
font-size: 1.7vw;
font-weight: bold;
}
.special-offer-rrp {
position: absolute;
top: 45%;
left: 55%;
text-decoration: line-through;
font-size: 1.2vw;
}
.special-offer-price {
position: absolute;
top: 45%;
left: 35%;
line-height: 1;
font-size: 3.5vw;
font-weight: 800;
font-style: italic;
text-shadow:
5px -5px 0 rgb(255,255,255), 5px -4px 0 rgb(255,255,255), 5px -3px 0 rgb(255,255,255), 5px -2px 0 rgb(255,255,255), 5px -1px 0 rgb(255,255,255), 5px 0 0 rgb(255,255,255), 5px 1px 0 rgb(255,255,255), 5px 2px 0 rgb(255,255,255), 5px 3px 0 rgb(255,255,255), 5px 4px 0 rgb(255,255,255), 5px 5px 0 rgb(255,255,255),
5px -5px 0 rgb(255,255,255), 5px 5px 0 rgb(255,255,255), 4px -5px 0 rgb(255,255,255), 4px 5px 0 rgb(255,255,255), 3px -5px 0 rgb(255,255,255), 3px 5px 0 rgb(255,255,255), 2px -5px 0 rgb(255,255,255), 2px 5px 0 rgb(255,255,255), 1px -5px 0 rgb(255,255,255), 1px 5px 0 rgb(255,255,255), 0px -5px 0 rgb(255,255,255), 0px 5px 0 rgb(255,255,255),
-1px -5px 0 rgb(255,255,255), -1px 5px 0 rgb(255,255,255), -2px -5px 0 rgb(255,255,255), -2px 5px 0 rgb(255,255,255), -3px -5px 0 rgb(255,255,255), -3px 5px 0 rgb(255,255,255), -4px -5px 0 rgb(255,255,255), -4px 5px 0 rgb(255,255,255), -5px -5px 0 rgb(255,255,255), -5px 5px 0 rgb(255,255,255),
-5px -5px 0 rgb(255,255,255), -5px -4px 0 rgb(255,255,255), -5px -3px 0 rgb(255,255,255), -5px -2px 0 rgb(255,255,255), -5px -1px 0 rgb(255,255,255), -5px 0 0 rgb(255,255,255), -5px 1px 0 rgb(255,255,255), -5px 2px 0 rgb(255,255,255), -5px 3px 0 rgb(255,255,255), -5px 4px 0 rgb(255,255,255), -5px 5px 0 rgb(255,255,255),
8px 4px 6px rgb(0,0,0), -2px 4px 6px rgb(0,0,0), -4px -1px 6px rgb(0,0,0), 5px -1px 6px rgb(0,0,0);
}
.special-offer-rrp-adv-bubble {
position: absolute;
top: 40%;
left: 80%;
width: 11%;
font-size: 1.7vw;
font-weight: bold;
color: rgb(255,255,255);
text-align: center;
}
@media screen and (min-width: 768px) {
.special-offer-tablet {
display: block;
}
.special-offer-tablet img {
visibility: hidden !important;
}
.special-offer-image img {
width: 100%;
visibility: visible !important;
}
.special-offer-mobile {
display: none;
}
}
@media screen and (min-width: 1200px) {
.special-offer-desktop {
display: block;
}
.special-offer-desktop img {
visibility: hidden !important;
}
.special-offer-tablet {
display: none;
}
}
.captcha-container {
clear: both;
margin-bottom: 10px;
}
/* Commons */
.quantity-controls button,
.quantity-controls input {
display: inline-block;
width: 80px;
min-width: 0;
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
}
.quantity-controls button {
font-size: 2rem;
font-weight: 700;
}
.quantity-controls button:hover,
.quantity-controls button:active,
.quantity-controls button:focus {
font-weight: 900;
}
.quantity-controls input,
.quantity-controls input:focus {
border-top: 2px solid rgb(0,48,135);
border-bottom: 2px solid rgb(0,48,135);
border-left: none;
border-right: none;
-webkit-box-shadow: none;
box-shadow: none;
font-weight: 600;
font-size: 1.5rem;
color: rgb(0,48,135);
}
.quantity-controls input[type="number"]::-webkit-inner-spin-button,
.quantity-controls input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.quantity-controls input[type="number"] {
-moz-appearance: textfield;
}
.to-catalog {
display: block;
}
.main-wrapper.shop .to-catalog {
display: none;
}
.site-title .catalog-search-form {
position: relative;
float: right;
}
.site-title .search-bar {
position: relative;
}
.site-title .search-bar-input,
.site-title .search-bar-button {
display: inline-block;
}
.site-title .search-bar-input {
width: 442px;
}
.shopitem-list {
padding-bottom: 30px !important;
}
.scroll-up {
position: fixed;
bottom: 50px;
right: 50px;
display: none;
width: 70px;
height: 70px;
background: rgb(0,48,135);
border: 10px solid rgb(0,48,135);
border-radius: 10px;
z-index: 400;
}
.scroll-up:focus {
outline: none;
}
.scroll-up .svg-icon {
display: block;
padding: 10px;
fill: rgb(191,0,51);
background: rgb(255,255,255);
border-radius: 5px;
}
/* Modal */
.shop-modal {
display: none;
position: relative;
z-index: 999;
width: 100%;
min-height: 40px;
min-width: 600px;
margin-bottom: -10px;
padding: 10px 0;
border-bottom: 10px solid rgba(230,160,0,1);
background: rgb(255,255,255);
text-align: center;
}
.modal-wrapper {
position: relative;
max-width: 1390px;
margin: 0 30px;
}
.hidden {
display: none !important;
}
.displayed {
display: block;
}
p.shop-error,
p.shop-info {
display: block;
margin: 0;
}
.shop-modal.with-error {
border-bottom: 8px solid rgba(195,26,25,1);
}
.shop-modal * {
font-size: .88888rem !important;
font-weight: 500 !important;
color: #333 !important;
}
.shop-modal .close {
content: "×";
position: absolute;
right: 0;
top: -.2rem;
color: rgb(230,160,0) !important;
font-size: 1.75rem !important;
display: inline;
font-style: normal;
opacity: 1;
}
.shop-modal.with-error .close {
color: rgb(195,26,25) !important;
}
.shop-modal h1,
.shop-modal h2,
.shop-modal h3,
.shop-modal h4,
.shop-modal h5,
.shop-modal h6 {
margin: 0;
font-weight: 700 !important;
}
.modal-header {
text-align: center;
}
/* Welcome */
.welcome-col {
margin-bottom: 20px;
text-align: center;
}
.welcome-col img {
margin: 30px 0
}
/* Category */
.svg-group {
display: none;
}
.category-list-item {
position: relative;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.category-list-item h3 {
margin: 10px 0 0;
background: rgb(0,48,135);
}
.category-list-item h3 a {
position: relative;
display: block;
z-index: 2;
padding: 22px 0 22px 60px;
text-align: center;
font-size: 1.25rem;
font-weight: 400;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.category-list-item h3 a:hover,
.category-list-item h3 a:active,
.category-list-item h3 a:focus {
text-decoration: none;
font-weight: 600;
letter-spacing: -.3px;
}
.category-icon {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 60px;
width: 60px;
margin: 20px 50px;
}
.category-icon * {
fill: #fff;
}
.category-description {
display: none;
}
/* Initial List */
.initial-nav-wrapper {
overflow-x: scroll;
height: 120px;
padding-top: 0;
}
.initial-nav-outer {
position: relative;
height: 120px;
width: 100%;
}
.initial-nav-outer::before,
.initial-nav-outer::after {
position: absolute;
z-index: 1;
content: "";
top: 0;
left: 0;
height: 100%;
width: 120px;
background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
pointer-events: none;
}
.initial-nav-outer::after {
left: auto;
right: 0;
background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
.initial-nav {
display: table;
width: auto;
max-width: none;
overflow-x: scroll;
}
.initial-nav-list {
margin: 0 -15px;
padding: 0;
white-space: nowrap;
}
.initial-nav-list-item {
display: inline-block;
}
.initial-list-outer {
margin: 0 -15px;
overflow: hidden;
}
.initial-list-wrapper {
position: relative;
display: table;
}
.initial-list {
padding: 0 20px;
display: table-row;
}
.initial {
float: none;
display: table-cell;
list-style: none;
}
.initial-link {
font-size: 2.25rem;
display: inline-block;
width: 80px;
height: 80px;
border: 3px solid transparent;
text-align: center;
line-height: 70px;
}
.initial-link:hover,
.initial-link:focus {
text-decoration: none;
}
.initial-link.active {
border: 3px solid rgb(0,48,135);
}
.initial-header-title {
display: none;
padding: 10px;
background: rgb(0,48,135);
color: #fff;
font-size: 1.5rem;
font-weight: 600;
}
.initial-content {
width: 570px;
padding: 0;
}
.link-item {
display: block;
}
.link-item-name {
display: block;
padding: 5px 0;
font-size: 1.25rem;
line-height: 1.33333rem;
font-weight: 700;
text-decoration: underline;
}
.link-item-name:hover,
.link-item-name:active {
background-color: #f5f5f5;
}
.link-item-price {
padding-left: 5px;
}
.link-item-icon-list {
float: right;
padding: 0;
}
.link-item-icon-list li {
display: inline-block;
font-weight: 400;
}
.link-item-icon-list.vouchericons {
margin-top: -4px;
}
.link-item-icon-list .shopitem-icon {
height: 35px;
width: 35px;
margin-right: 0;
margin-left: 5px;
}
/* Search */
.search-results > h6 {
margin-bottom: 20px !important;
}
.search-result-intro > div {
padding-bottom: 0;
}
.search-result-intro p {
margin: 0;
}
/* Filter */
.voucher-filterbox {
position: relative;
}
.filterbox-label,
.filterbox-label:hover,
.filterbox-label:active,
.filterbox-label:focus {
position: relative;
z-index: 4;
display: block;
height: 80px;
width: 200px;
padding: 16px;
border-width: 1px;
border-style: solid;
border-color: #5d5d5d;
background: #fff;
color: #5d5d5d;
font-weight: 700;
text-decoration: none;
-webkit-transition: background .25s;
transition: background .25s;
}
.filterbox-label.open {
border-style: solid solid none;
border-color: #5d5d5d;
background: #f5f5f5;
outline: none;
}
.filter-icon {
display: block;
float: right;
height: 25px;
width: 25px;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.filterbox-label.open .filter-icon {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.filterbox-wrapper {
position: absolute;
z-index: 3;
display: none;
width: 570px;
margin-top: -1px;
padding: 15px;
border: 1px solid #5d5d5d;
background: #f5f5f5;
}
.filterbox-label.open + .active-filters + .filterbox-wrapper {
border-top: none;
}
.filter-wrapper {
position: relative;
}
.filter-row {
position: relative;
width: 100%;
float: left;
}
.filter {
float: left;
width: 100%;
padding-bottom: 10px;
color: rgb(0,48,135);
opacity: 1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.filter.disabled {
opacity: .33;
}
.filter h6 {
position: relative;
height: 80px;
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
border: 1px solid #666;
margin-top: -3px;
margin-bottom: 0;
padding: 10px 15px;
background: #fff;
font-size: .83333rem;
font-weight: 400;
line-height: 1rem;
cursor: pointer;
}
.filter h6.open {
height: 90px;
border-bottom: none;
}
.filter:nth-child(2n) h6 {
position: absolute;
top: 0;
right: 0;
}
.filter:nth-child(2n) .filter-content {
padding-bottom: 10px;
}
.filter h6 .svg-icon {
margin-left: 6px;
vertical-align: middle;
}
.filter .checkbox label {
min-height: 60px;
}
.filter-value .checkbox label {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.filter-info {
display: none;
}
.mobile-filter-preview {
display: block;
margin-top: 5px;
font-weight: 700;
}
.filter-content {
display: none;
width: 100%;
margin-top: -1px;
padding: 15px;
border: 1px solid #666;
background: #fff;
}
.filter-content > *:first-child {
margin-top: 0;
}
.filter-content > *:last-child {
margin-bottom: 0;
}
.select-checkbox label {
display: block;
line-height: 80px;
}
.select-checkbox label .checkbox-desc::before,
.select-checkbox label .checkbox-desc::after {
top: 22px;
}
.filter-content .select-styler {
float: right;
}
.desktop-reset-filters {
display: none;
}
.show-filtered-results {
width: 100%;
}
.active-filters {
width: 570px;
margin-top: -1px;
border: none;
background: transparent;
padding: 15px 29px 6px 0;
-webkit-transition: padding .33s;
transition: padding .33s;
}
.active-filters > * {
display: inline-block;
}
.mobile-reset-filters {
margin-left: 3px;
font-size: .83333rem;
font-weight: 700;
color: rgb(0,48,135);
text-decoration: underline;
}
.filterbox-label.open + .active-filters {
margin-bottom: -1px;
padding: 14px 14px 6px;
border-width: 1px 1px medium;
border-style: solid solid none;
border-color: #5d5d5d #5d5d5d transparent;
background: #f5f5f5;
}
.active-filter {
display: inline-block;
height: 40px;
margin-bottom: 5px;
padding: 0 30px 0 10px;
border: 1px solid #5d5d5d;
line-height: 38px;
background: #bbb;
color: #fff;
}
.active-filter:hover,
.active-filter:focus,
.active-filter:active {
color: #fff;
text-decoration: none;
}
.active-filter::after {
content: "×";
position: absolute;
margin-top: -1px;
padding: 0 3px 0 6px;
line-height: 38px;
font-size: 1.25rem;
font-weight: 800;
-webkit-transition: all .15s;
transition: all .15s;
}
.active-filter:hover::after,
.active-filter:active::after,
.active-filter:focus::after {
padding: 0 2px 0 4px;
font-size: 1.5rem;
}
/* Index-Seite */
.shop-information p:last-child {
margin-bottom: 0;
}
.instructions {
margin-bottom: 35px;
}
.instruction-steps {
margin: 0;
padding: 0;
}
.instruction-steps li {
display: block;
position: relative;
padding: .75rem 0 .75rem 2.5rem;
list-style: none;
font-weight: 600;
color: rgb(0,48,135);
}
.instruction-step-icon {
z-index: 10;
display: block;
position: absolute;
top: 50%;
left: 0;
height: 2rem;
width: 2rem;
border-radius: 1rem;
background-color: rgb(0,48,135);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.instruction-step-icon .svg-icon {
fill: #fff;
}
.index .prepaid-credit {
margin-bottom: 20px;
}
.voucher-code-input,
.coupon-code-input {
width: 100%;
}
.voucher-check-button,
.coupon-code-button {
margin-bottom: 10px;
max-width: 100%;
}
.voucher-validation-form, .voucher-validation-submit, .voucher-validation-submit button, .voucher-validation-submit a, .voucher-check-button, .welcome-col .btn, .order-preference button, .order-preference a {
max-width: 100%;
}
.voucher-validation-form small,
.coupon-validation-form small {
display: block;
}
.voucher-validation-payment-table {
width: 100%;
}
.voucher-validation-payment-table thead,
.voucher-validation-credit-label {
font-weight: 600;
}
.voucher-validation-payment-table td:last-child {
text-align: right;
}
.coupon-validation-form .voucher-validation-payment-table td:last-child {
text-align: left;
}
.voucher-validation-credit,
.voucher-validation-payment-label {
margin-top: .5rem;
}
/* Katalog Legende */
.catalog-icon-description {
margin-bottom: .75rem;
color: rgb(0,48,135);
font-size: 85%;
}
.icon-description-wrapper {
padding: 10px;
background: #f6f6f6;
}
.icon-description-element {
display: block;
margin: 5px 0;
}
.icon-description-image {
display: inline-block;
vertical-align: middle;
height: 1.5rem;
width: 1.5rem;
}
.icon-description-text {
display: inline-block;
vertical-align: middle;
}
.icon-description-image use {
fill: rgb(0,48,135);
}
.icon-mail .icon-description-image {
margin-bottom: 10px;
}
/* Shopitem */
.shopitem-container {
position: relative;
display: block;
top: 0;
height: 310px;
width: 100%;
padding: 5px 10px;
border: 1px solid #eee;
background: #f5f5f5;
-webkit-transition: border .1s;
transition: border .1s;
}
.shopitem-container:hover,
.shopitem-container:focus {
border: 1px solid #ccc;
text-decoration: none;
}
.shopitem-name {
position: relative;
height: 50px;
margin: 0;
overflow: hidden;
font-weight: 600;
font-size: .58333rem;
line-height: .66666rem;
}
.shopitempic {
position: relative;
height: 156px;
width: 100%;
margin: 0 auto;
padding: 15px;
border-radius: 16px;
background: #fff;
overflow: hidden;
-webkit-box-shadow: 5px 5px 12px rgba(0,0,0,.15);
box-shadow: 5px 5px 12px rgba(0,0,0,.15);
}
.shopitempic.giftcard {
padding: 0;
}
.shopitem-brand {
position: absolute;
bottom: 0px;
left: 0px;
width: 20%;
border-radius: 0 6px 0 14px;
overflow: hidden;
line-height: 0;
z-index: 1;
}
.shopitembrand {
width: 100%;
margin: 0 0 2px 2px;
padding: 2px;
background: #fff;
}
.shopitem-rrp {
font-size: .77777rem;
line-height: 0.88888rem;
text-decoration: line-through;
}
.shopitem-rrp-adv {
position: absolute;
top: 42px;
right: 5px;
height: 3.5rem;
width: 3.5rem;
border-radius: 100%;
background: rgb(0,48,135);
color: #fff;
font-size: .75rem;
line-height: .85rem;
}
.shopitem-rrp-adv-content {
position: absolute;
top: 50%;
width: 100%;
padding: 10px;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.shopitem-icons {
position: absolute;
bottom: 5px;
}
.shopitem-icon {
display: inline-block;
height: 30px;
width: 30px;
margin-right: 5px;
padding: 0;
line-height: 0;
}
.shopitem-icon .svg-icon,
.product-icon .svg-icon {
fill: rgb(0,48,135);
}
.shopitem-discount,
.shopitem-discount-text {
background: rgb(66,160,240);
color: #fff;
font-weight: 500;
line-height: .9rem;
}
.product-discount,
.shopitem-discount {
background: rgb(66,160,240);
color: #fff;
height: 3.5em;
width: 3.5em;
border-radius: 100%;
font-size: .6rem;
}
.shopitem-discount {
position: absolute;
left: 5px;
text-decoration: line-through;
top: 30px;
}
#order-benefits,
#product-discount-bubble
{
visibility: hidden;
}
.order-benefits {
margin-top: 2em;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
padding: .5em 0;
}
.order-saving h6,
.order-advantage h6,
.order-regular-price h6 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: rgb(93,93,93);
}
.order-saving h6 span,
.order-advantage h6 span,
.order-regular-price h6 span {
color: rgb(0,48,135);
}
@media screen and (min-width: 768px) {
.shopitem-discount {
font-size: .8rem;
left: 3px;
top: 30px;
}
}
.shopitem-discount-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 30px;
margin: 15px 0 auto -10px;
padding: 5px 10px;
text-transform: uppercase;
width: 110%;
width: -webkit-calc(100% + 20px);
width: -moz-calc(100% + 20px);
width: calc(100% + 20px);
text-align: center;
}
.shopitem-discount-content{
padding: 0px;
position: absolute;
text-align: center;
top: 50%;
white-space: nowrap;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.shopitem-discount-text-content {
white-space: nowrap;
width: 100%;
}
.product-discount {
position: relative;
font-size: .8rem;
left: -0.8em;
top: -0.8em;
z-index:3;
float: left;
margin-bottom: -30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 1200px) {
.product-discount {
top: -0.4em;
left: -1.2em;
}
}
.product-discount span {
height: auto;
}
.printable-icon,
.mobile-icon,
.warehouse-icon {
padding: 3px !important;
}
.link-item-icon-list .printable-icon,
.link-item-icon-list .mobile-icon,
.link-item-icon-list .warehouse-icon {
padding: 2px !important;
}
.product-barcode-icon,
.product-smartphone-icon {
position: absolute;
z-index: 1;
top: 90px;
right: 0;
height: 46px;
width: 32px;
background: rgb(0,48,135);
}
.shopitem-barcode-icon,
.shopitem-smartphone-icon {
position: absolute;
z-index: 1;
top: 70px;
right: 0;
height: 46px;
width: 32px;
background: rgb(0,48,135);
}
.product-barcode-icon::before,
.product-smartphone-icon::before,
.shopitem-barcode-icon::before,
.shopitem-smartphone-icon::before {
content: "";
position: absolute;
left: -20px;
height: 0;
width: 0;
border-top: 23px solid transparent;
border-right: 10px solid rgb(0,48,135);
border-bottom: 23px solid transparent;
border-left: 10px solid transparent;
}
.product-barcode-icon .svg-icon,
.product-smartphone-icon .svg-icon,
.shopitem-barcode-icon .svg-icon,
.shopitem-smartphone-icon .svg-icon {
padding: 3px 5px 3px 0;
fill: #fff;
}
.product-smartphone-icon:nth-child(2),
.shopitem-smartphone-icon:nth-child(2) {
top: 120px;
}
.product-img {
position: relative;
display: inline-block !important;
top: 50%;
max-width: 100%;
max-height: 100%;
-webkit-transform: translateY(-50%) scale(1.001);
-ms-transform: translateY(-50%) scale(1.001);
transform: translateY(-50%) scale(1.001);
}
.giftcard .product-img {
height: 100%;
width: 100%;
}
.product-img-container {
height: 100%;
text-align: center;
}
.product-variation-price {
display: inline-block;
font-size: 2rem;
font-weight: 800;
line-height: 2rem;
color: rgb(0,48,135);
}
.product-reduced-price {
display: inline;
padding-left: 5px;
vertical-align: top;
text-decoration: line-through;
}
.product-variation-price-symbol {
font-size: 1.16666rem;
font-weight: 800;
line-height: 1.16666rem;
color: rgb(0,48,135);
}
.product-price-addition {
font-size: .83333rem;
font-weight: 600;
line-height: .83333rem;
color: #666;
}
.product-info-price-addon {
display: inline-block;
padding-left: 5px;
vertical-align: top;
text-decoration: line-through;
}
.product-rrp-adv {
position: absolute;
padding: 10px;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 42px;
left: 5px;
height: 3.5rem;
width: 3.5rem;
border-radius: 100%;
background: rgb(0,48,135);
color: #FFF;
font-size: 0.75rem;
line-height: 0.85rem;
}
/* Shopitem */
.shopitemprice {
font-size: 1.25rem;
line-height: 1.5rem;
margin-top: 8px;
font-weight: 700;
color: rgb(0,48,135);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopitem-price-addition {
font-size: .75rem;
line-height: .85rem;
color: rgb(0,48,135);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Product (Copy of D15) */
/*******************/
/* Produkt-Ansicht */
.order-wrapper {
margin: 0 auto;
}
.product-title-name {
font-weight: 600;
color: #014983;
}
.product-image-container,
.article-image-container {
position: relative;
}
.product-image-container {
width: 100%;
}
.product-image,
.article-image {
position: relative;
background: #fff;
overflow: hidden;
-webkit-box-shadow: 5px 5px 12px rgba(0,0,0,.15);
box-shadow: 5px 5px 12px rgba(0,0,0,.15);
}
.product-image {
height: 329px;
width: 522px;
max-width: 100%;
margin: 0 auto;
border-radius: 26px;
}
.physical .product-image {
height: 256px;
width: 407px;
}
.article-image div:before {
content: "";
display: inline-block;
height: 50%;
}
.product-image div,
.article-image div {
z-index: 1;
display: block;
height: 100%;
text-align: center;
font-size: 0;
line-height: 0;
}
.product-image img,
.article-image img {
position: relative;
top: 50%;
left: 50%;
max-height: 90%;
max-width: 90%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.product-giftcard-image img,
.article-giftcard-image img {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.product-icons {
position: absolute;
bottom: 15px;
left: 20px;
padding-left: 5px;
line-height: 0;
}
.product-icon {
display: inline-block;
height: 35px;
width: 35px;
margin: 0 20px 0 0;
padding: 0;
line-height: 0;
}
.product-icon .scaling-svg {
fill: #fff;
}
.voucher hr,
.physical hr {
clear: both;
}
.voucher .product-image-container {
width: 19rem;
margin: 0 auto;
}
.product-infos-desktop {
display: none;
}
.product-cart-button .btn {
margin-bottom: 0;
}
.product-selection {
font-size: .88888rem;
}
.product-selection p {
margin: 0 0 15px;
}
.product-infos h3,
.product-back-link {
margin: 0;
}
.product-back-link {
text-decoration: underline;
}
.availability-status-icon {
display: inline-block;
width: 20px;
height: 15px;
margin: 0 5px -1px 0;
border-radius: 5px;
}
.status-in-stock .availability-status-icon,
.status-foreign-shipping .availability-status-icon {
background: #a3d801;
}
.status-no-active-variation .availability-status-icon {
background: #ec0000;
}
.status-currently-not-notime .availability-status-icon,
.status-currently-not .availability-status-icon,
.status-temporarily-not-available .availability-status-icon,
.status-partly-available .availability-status-icon {
background: #facd18;
}
.product-main-image-wrapper,
.overlay-image-wrapper,
.product-secondary-image-wrapper,
.overlay-secondary-image-wrapper {
background: #fff;
}
.overlay,
.product-gallery {
position: relative;
}
.product-gallery {
height: 460px;
padding: 20px 25px 0;
border: 1px solid #eee;
background: #f5f5f5;
}
.product-gallery .product-icons {
padding-left: 0;
}
.physical .product-gallery {
height: 342px;
padding: 35px 25px;
}
.product-main-image-wrapper {
position: relative;
float: left;
display: block;
width: 73%;
line-height: 0;
}
.product-secondary-image-list {
float: right;
}
.overlay-image-list {
float: left;
display: table;
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);
width: 20%;
margin: 70px 15px;
}
.product-secondary-image-wrapper,
.overlay-secondary-image-wrapper {
position: relative;
display: block;
border: 1px solid #eee;
border-radius: 5px;
text-align: center;
}
.product-secondary-image-wrapper {
height: 65px;
width: 90px;
margin: 0 0 32px;
}
.overlay-secondary-image-wrapper {
float: left;
height: 90px;
width: 100px;
margin: 7px 12px;
}
.product-secondary-image-wrapper:last-child {
margin: 0;
}
.product-main-image,
.product-secondary-image {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
padding: 5px;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.overlay-bg {
position: fixed;
display: none;
z-index: 1001;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
}
.overlay {
position: fixed;
display: none;
background: #fff;
border: medium none;
z-index: 1002;
min-height: 400px;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
height: 300px;
width: 600px;
}
.overlay-image-wrapper {
float: left;
border: none;
line-height: 0;
padding: 40px 20px;
height: 100%;
width: 74%;
position: relative;
}
.overlay-image {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
max-width: -webkit-calc(100% - 40px);
max-width: calc(100% - 40px);
max-height: -webkit-calc(100% - 40px);
max-height: calc(100% - 40px);
}
.overlay-close {
position: absolute;
display: block;
z-index: 1003;
top: 15px;
right: 15px;
}
.overlay-close.btn-icon {
height: 50px;
width: 50px;
margin: 0;
padding: 0;
}
.availability-mobile {
vertical-align: top;
}
.availability-mobile .product-availability {
height: 80px;
}
.availability-mobile,
.product-quantity {
display: inline-block;
width: 50%;
}
.order-preference {
margin-bottom: 15px;
}
.order-preference.physical-value {
margin-bottom: 35px;
}
.product-addition-desktop {
display: none;
}
.product-addition-mobile {
display: block;
}
.product-description {
overflow: hidden;
}
.product-description img {
max-width: 100%;
}
.single-variation-price {
line-height: 40px;
}
/* Warenkorb & Checkout */
.introduction {
font-weight: 600;
color: rgb(0,48,135);
}
.cart-reload,
.checkout-navigation .btn {
width: 100%;
}
.article {
padding: 10px 20px;
background: #f2f2f2;
}
.article-position {
float: left;
height: 135px;
padding: 10px 0;
}
.article-info {
width: 100%;
}
.article-info > div {
width: 100%;
border-top: 1px solid #ccc;
}
.article-info > div:last-child .article-position {
height: 85px;
}
.shipping {
width: 47%;
}
.quantity {
width: 53%;
}
.article-info > div:last-child > :first-child {
width: 33%;
}
.article-info > div:last-child > :nth-child(2) {
width: 53%;
}
.article-info > div:last-child > :nth-child(2):not(:last-child),
.article-info > div:last-child > :nth-child(2):not(:last-child) + * {
width: 33%;
}
.article-info.with-discount > div:last-child > div {
width: 33.33333% !important;
}
.article-basic > h6,
.article-heading {
margin: 0;
}
.article-basic .btn-remove {
height: 30px;
width: 30px;
padding: 0;
}
.article-image {
height: 90px;
width: 140px;
margin: 0 20px 20px 0;
border-radius: 7px;
}
.article-image + div {
width: -webkit-calc( 100% - 160px );
width: calc( 100% - 160px );
}
/*
.basket-coupon td {
white-space: normal !important;
}
.basket-coupon-input-button,
.basket-coupon-position-remove {
padding: .666rem;
min-width: 5.5rem;
}
input.basket-coupon-input {
width: 11.35rem;
}
.basket-coupon-position-code {
margin: 0 .5rem 0 0;
min-width: 10.2rem;
}
*/
.basket-coupon-input-label {
text-align: left;
color: rgb(0,48,135);
font-weight: 700;
}
.basket-coupon-input-button {
width: 540px;
float: left;
margin: 10px 0 20px;
}
.basket-coupon-position-remove {
width: 540px;
}
.calculation {
padding: 10px 15px;
background: #eee;
}
.calculation table {
width: 100%;
}
.calculation table th,
.calculation table .title {
color: rgb(0,48,135);
}
.calculation table td {
float: right;
}
.calculation table .basket-coupon td,
.calculation table .basket-coupon-codes {
float: none;
}
.invoice-separator {
margin-top: 10px;
margin-bottom: 10px;
border-color: #ccc;
}
.address-footer .btn {
width: 100%;
}
/* Payment */
.payment-label {
font-weight: 400 !important;
}
.payment-infos {
width: 100% !important;
}
.payment-label .svg-icon {
height: 25px;
right: -40px;
-webkit-transform: translateY(-50%) rotate(360deg);
-ms-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
width: 25px;
fill: rgb(0,48,135);
position: absolute;
top: 35%;
}
.payment-type.open .svg-icon {
-webkit-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
svg:not(:root) {
overflow: hidden;
}
.payment-type-logo {
overflow-y: visible;
height: 25px !important;
margin-left: 10px;
}
.payment-type-logo-mastercard {
width: 42px !important;
}
.payment-type-logo-visa {
width: 40px !important;
}
.payment-type-logo-amex {
width: 25px !important;
}
.payment-type-logo-bancontact {
width: 40px !important;
}
.payment-type-logo-sofortueberweisung {
width: 65px !important;
height: 20px !important;
margin-top: 3px;
}
.payment-type-logo-paypal {
width: 67px !important;
height: 18px !important;
}
.payment-label h6 {
height:18px;
}
.payment-switch {
margin-bottom: 40px;
}
/* Greeting text container */
#greeting-text {
width: 100%;
height: 200px;
}
/* Shipping data container */
.checkbox-desc {
margin-bottom: 10px;
}
#deliveryTime-trigger {
display: none;
}
/* Confirm */
.your-delivery > div,
.your-delivery > div h6 {
margin-bottom: 0;
padding-bottom: 0;
}
.article-row:first-child > div {
padding-top: 0;
}
.article-row:last-child > div {
padding-bottom: 0;
}
.checkout-address-title,
.checkout-greeting-text-title,
.checkout-shipping-data-title,
.checkout-payment-title {
width: 100%;
}
.checkout-invoice-address,
.checkout-delivery-address,
.greeting-text,
.shipping-data,
.payment {
padding: 0 15px;
}
.checkout-delivery-address h6,
.checkout-invoice-address h6,
.greeting-text h6,
.shipping-data h6,
.payment h6 {
margin: 0 0 0.5rem;;
line-height: 1.5rem;
}
.confirm-order {
font-size: .83333rem;
line-height: 1rem;
}
.checkout-invoice-address p,
.checkout-delivery-address p {
margin: 0;
}
.payment .svg-icon,
.greeting-text .svg-icon,
.shipping-data .svg-icon,
.checkout-invoice-address .svg-icon,
.checkout-delivery-address .svg-icon {
height: 45px;
width: 45px;
}
.payment .modify-link,
.greeting-text .modify-link,
.shipping-data .modify-link,
.checkout-invoice-address .modify-link,
.checkout-delivery-address .modify-link {
display: inline-block;
line-height: 45px;
vertical-align: middle;
}
.confirm-buttons {
padding-bottom: 15px;
}
.confirm-buttons .btn {
width: 100%;
margin: 0;
}
/* Confirmation */
.order-confirmation-image {
display: inline-block;
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: middle;
}
.research-prompt {
padding: .5rem .5rem 1rem;
background: #eee;
}
.research-button {
width: 100%;
}
.research-prompt-image {
float: right;
width: 150px;
height: 92px;
}
.svg-bubble-outline {
fill: rgb(0,48,135);
}
.svg-bubble-text {
fill: rgb(0,48,135);
}
.svg-bubble-bg1 {
fill: #fff;
}
.svg-bubble-bg2 {
fill: #fff;
}
.research-prompt-header {
margin: .25rem 0 .75rem;
line-height: 1.65rem;
}
.continue-shopping-button {
margin: 15px 0 !important;
}
@media (min-width: 768px) {
/* Index */
.index .voucher-validation-payment-table,
.index .voucher-validation-credit {
width: 470px;
}
.site-content > form > .row,
.site-content > .row {
padding: 0 10px;
}
.initial-list-outer {
width: 100%;
margin: 0;
}
.initial-content {
width: 720px;
}
.initial:nth-of-type(2n+1),
.category-list-item:nth-of-type(2n+1) {
clear: both;
}
.category-list-item h3 {
font-size: 1.5rem;
}
.category-icon {
height: 35px;
width: 35px;
margin: 30px;
}
/* Search */
.site-title .search-bar-input {
height: 40px;
width: 310px;
vertical-align: top;
}
.site-title .search-bar-button {
height: 40px;
width: 30px;
margin: 0 0 0 5px;
vertical-align: top;
}
/* Filter */
.filterbox-wrapper {
width: 720px;
}
.show-filtered-results {
float: right;
width: -webkit-calc(50% - 10px);
width: calc(50% - 10px);
margin: 0 0 0 10px;
}
.active-filters {
width: 720px;
}
.active-filter::after {
padding: 1px 3px 0 7px;
}
.active-filter:hover::after,
.active-filter:active::after,
.active-filter:focus::after {
padding: 0 3px 0 5px;
}
.filter .checkbox label {
min-height: 35px;
}
.select-checkbox label {
line-height: 50px;
}
.select-checkbox label .checkbox-desc::before,
.select-checkbox label .checkbox-desc::after {
top: 5px;
}
/* Katalog Legende */
.icon-description-element {
display: inline-block;
width: 50%;
}
/* Shopitem */
.shopitem-container {
height: 355px;
}
.shopitempic {
height: 203px;
border-radius: 20px;
}
.shopitem-name {
font-size: .7rem;
line-height: .8rem;
}
/* Product */
.physical .product-image {
margin: 0 73px;
}
.physical .order-wrapper {
width: auto;
float: none;
}
.voucher .order-wrapper {
width: auto;
float: left;
}
.order-preference {
margin-bottom: 0;
}
.order-preference.physical-value {
margin-bottom: 20px;
}
.product-title,
.product-title-description {
text-align: left;
}
.quantity-controls button,
.quantity-controls input {
width: 50px;
}
/* Basket & Checkout */
.form-control.basket-coupon-input {
float: left;
}
.basket-coupon-input-button {
float: left;
width: 220px;
margin: 0;
}
.basket-coupon-position-code {
float: left;
margin: 10px 0 0 0;
line-height: 50px;
}
.basket-coupon-position-remove {
float: right;
width: 470px;
}
.checkout-delivery-address {
width: 47%;
}
.checkout-invoice-address {
padding: 0px;
width: 53%;
}
/* Shipping data container */
#deliveryTime-trigger {
display: inline-block;
}
/* Payment */
.payment-switch {
margin-bottom: 0px;
}
.payment-label .svg-icon {
height: 15px;
width: 15px;
right: -25px;
top: 45%;
}
}
@media (min-width: 1200px) {
/* Commons */
.quantity-controls button,
.quantity-controls input {
width: 40px;
}
.site-content > form > .row,
.site-content > .row {
margin: 0 10px;
padding: 0;
}
.scroll-up {
height: 40px;
width: 40px;
border: 5px solid rgb(0,48,135);
border-radius: 10px;
}
.scroll-up .svg-icon {
padding: 5px;
}
/* Modal */
.modal-wrapper {
max-width: 1140px;
margin: 0 30px 0 250px;
}
/* Search */
.site-title .search-bar-input {
height: 30px;
width: 200px;
}
.site-title .search-bar-button {
height: 30px;
width: 30px;
margin: 0 0 0 5px;
}
.site-title .search-bar-button .svg-icon {
height: 100%;
width: 100%;
vertical-align: top;
padding: 2px 0;
}
/* Index */
.index .voucher-validation-form,
.index .coupon-validation-form {
width: 400px;
margin-right: 20px;
}
.index .coupon-validation-form {
float: left;
}
.index .voucher-validation .btn,
.index .coupon-validation .btn {
margin: 0;
}
.index .voucher-validation-payment-table,
.index .voucher-validation-credit {
width: 100%;
}
.voucher-code-input,
.coupon-code-input {
width: auto;
margin-bottom: 10px;
}
#bestchoiceform input.voucher-code-input,
#additional-voucher-code {
max-width: 230px;
}
#minibasket-container .voucher-code-input {
margin-bottom: 0;
}
.instructions {
margin-left: 80px;
}
/* Category */
.initial:nth-of-type(2n+1),
.category-list-item:nth-of-type(2n+1) {
clear: none;
}
.initial:nth-of-type(4n+1),
.category-list-item:nth-of-type(4n+1) {
clear: both;
}
.product-smartphone-icon:nth-child(2),
.shopitem-smartphone-icon:nth-child(2) {
top: 102px;
}
.category-list-item h3 a {
padding: 7px 0;
font-size: .77777rem;
font-weight: 700;
}
.category-list-item h3 a:hover,
.category-list-item h3 a:active,
.category-list-item h3 a:focus {
text-decoration: none;
font-weight: 700;
letter-spacing: 0.01rem;
}
.category-icon {
position: static;
float: left;
top: unset;
left: unset;
height: 40px;
width: 40px;
margin: 10px;
}
.category-icon * {
fill: #5d5d5d;
}
.category-description {
display: block;
float: right;
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
margin: 10px 0;
padding: 0 10px 0 0;
word-wrap: break-word;
}
.category-preview-element {
margin-bottom: 5px;
}
.category-preview-element a {
display: block;
width: 100%;
text-decoration: underline;
}
.category-preview-element a:hover,
.category-preview-element a:active,
.category-preview-element a:focus {
font-weight: 600;
letter-spacing: -.1px;
}
.category-preview-element,
.category-preview-footer {
list-style: none;
}
/* Initial */
.initial-list-outer {
width: auto;
overflow-x: auto;
}
.initial-list-wrapper {
display: block;
}
.initial-list {
display: block;
}
.initial {
float: left;
display: block;
}
.initial-content {
width: auto;
}
.initial-header-title {
display: block;
}
.initial-link {
font-size: .88888rem;
width: auto;
height: auto;
margin-right: 10px;
border: none;
text-align: left;
line-height: .99999rem;
}
.initial-link:hover,
.initial-link:active,
.initial-link:focus {
text-decoration: underline;
}
.link-item-name {
padding: 5px;
font-size: .77777rem;
line-height: .88888rem;
font-weight: 600;
text-decoration: underline;
}
.initial-nav {
display: block;
overflow-x: visible;
margin: 5px 0 0;
}
.initial-nav-list {
margin: 0;
white-space: normal;
}
.link-item-icon-list .shopitem-icon {
height: 20px;
width: 20px;
}
.initial-nav-outer {
position: static;
height: auto;
}
.initial-nav-outer::before,
.initial-nav-outer::after {
display: none;
content: none;
}
.initial-nav-wrapper {
overflow-x: auto;
height: auto;
}
/* Filter */
.filterbox-wrapper {
width: 623px;
}
.filterbox-wrapper.wide-filter {
width: 846px;
}
.filterbox-wrapper.one-filter-row {
width: 586px;
}
.filterbox-wrapper.one-filter-row .filter-row {
width: 100%;
}
.filterbox-wrapper.one-filter-row .filter {
width: 50%;
margin: 0;
border: none;
}
.filterbox-label,
.filterbox-label:hover,
.filterbox-label:active,
.filterbox-label:focus {
height: 40px;
padding: 10px;
}
.filter-icon {
height: 20px;
width: 20px;
}
.filter-row {
width: auto;
}
.filter {
display: inline-block;
float: none;
height: 172px;
padding-bottom: 0;
vertical-align: top;
}
.filter.filter-type {
width: 198px;
margin-right: 25px;
border-right: 1px solid #fff;
float: left;
}
.filter.filter-delivery {
width: 153px;
margin-right: 25px;
border-right: 1px solid #fff;
}
.filter.filter-redemption {
width: 168px;
margin-right: 25px;
border-right: 1px solid #fff;
}
.filter.filter-usage-type,
.filter.filter-value {
width: 220px;
}
.filter.filter-value h6 {
margin-bottom: 20px;
}
.filter .checkbox label {
min-height: auto;
}
.filter h6 {
height: auto;
width: auto;
margin-bottom: 30px;
padding: 0;
border: none;
background: none;
font-weight: 700;
cursor: default;
}
.filter h6.open {
height: auto;
}
.filter:nth-child(2n) h6 {
position: static;
top: unset;
right: unset;
}
.filter:nth-child(2n) .filter-content {
padding-bottom: 0;
}
.filter-info {
display: inline-block;
}
.mobile-filter-preview {
display: none;
}
.filter-content {
display: block;
width: auto;
margin: 0;
padding: 0;
border: none;
background: none;
}
.select-checkbox {
margin: 7px 0;
padding: 10px 0;
}
.select-checkbox .select-styler {
margin: -10px 0;
}
.select-checkbox label {
line-height: 20px;
}
.select-checkbox label .checkbox-desc::before,
.select-checkbox label .checkbox-desc::after {
top: 0;
}
.filter-content .form-control {
min-width: 100%;
}
.filter-content .select-styler {
display: inline-block;
width: 122px;
}
.filter-footer {
margin-top: 20px;
text-align: right;
}
.filter-footer.one-filter .btn {
margin-top: 15px;
}
.mobile-reset-filters {
display: none;
}
.desktop-reset-filters,
.show-filtered-results {
display: inline-block;
width: 262px;
margin: 0;
}
.active-filters {
position: absolute;
width: auto;
top: 50%;
left: 220px;
margin: 0;
padding: 0;
background: none;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.active-filter {
margin-bottom: 2px;
padding: 0 25px 0 10px;
}
.active-filter::after {
margin-top: -1px;
padding: 0 5px;
}
.active-filter:hover::after,
.active-filter:active::after,
.active-filter:focus::after {
padding: 0 3px 0 4px;
}
.filterbox-label.open + .active-filters + .filterbox-wrapper {
border-top: 1px solid #5d5d5d;
}
.filterbox-label.open + .active-filters {
padding: 0;
border: none;
background: transparent;
}
/* Katalog Legende */
.icon-description-element {
width: 33.33333%;
}
/* Shopitem */
.shopitem-container {
height: 260px;
}
.shopitempic {
height: 113px;
border-radius: 13px;
}
.shopitem-list {
padding: 0 20px;
}
.shopitem-name {
font-size: .77777rem;
line-height: .88888rem;
}
/* Product */
.label-addition {
display: inline;
}
.product-info-short {
margin: 0;
}
.order-preference.physical-value {
position: relative;
margin-bottom: 0;
}
.physical .order-preference {
display: inline-block;
vertical-align: bottom;
}
.voucher .order-wrapper {
width: auto;
float: none;
clear: both;
}
.order-preference {
display: inline-block;
margin: 20px 20px 0 0;
vertical-align: bottom;
}
.product-barcode-icon,
.product-smartphone-icon,
.shopitem-barcode-icon,
.shopitem-smartphone-icon {
top: 70px;
height: 30px;
width: 25px;
}
.product-barcode-icon::before,
.product-smartphone-icon::before,
.shopitem-barcode-icon::before,
.shopitem-smartphone-icon::before {
left: -10px;
border-top: 15px solid transparent;
border-right: 5px solid rgb(0,48,135);
border-bottom: 15px solid transparent;
border-left: 5px solid transparent;
}
.product-barcode-icon .svg-icon,
.product-smartphone-icon .svg-icon,
.shopitem-barcode-icon .svg-icon,
.shopitem-smartphone-icon .svg-icon {
padding: 3px;
}
.product-image {
height: 151px;
width: 240px;
border-radius: 16px;
}
.physical .product-image {
height: 151px;
width: -webkit-calc( 100% - 90px );
width: calc( 100% - 90px );
margin: 0;
}
.product-quantity,
.product-value {
float: none;
width: auto;
}
.voucher .product-image-container {
width: auto;
float: left;
}
.voucher .product-quantity h3 {
padding-left: 0;
}
.voucher .product-quantity .quantity-controls {
text-align: left;
}
.physical .product-infos-mobile,
.voucher .product-infos-mobile {
display: none;
}
.product-secondary-image-wrapper {
height: 54px;
width: 76px;
margin: 0 0 17px;
}
.product-gallery {
padding: 10px 20px;
}
.physical .product-gallery {
padding: 27px 10px;
}
.product-gallery,
.physical .product-gallery {
height: 270px;
}
.product-icons {
bottom: 10px;
padding-left: 15px;
}
.product-icon {
margin: 0 10px 0 0;
}
.product-infos {
max-width: 38rem;
}
.quantity-controls button {
font-size: 1.5rem;
}
.quantity-controls input,
.quantity-controls input:focus {
font-size: 1rem;
}
.product-addition-desktop {
display: block;
}
.product-addition-mobile {
display: none;
}
.product-infos-desktop,
.availability-desktop {
display: block;
}
.availability-mobile {
display: none;
}
.overlay-secondary-image-wrapper {
margin: 0 12px;
}
.overlay-image-list {
clear: both;
float: none;
height: 20%;
width: auto;
margin: 0 15px;
}
.overlay-image-wrapper {
float: none;
padding: 40px 20px 0;
height: 80%;
width: 100%;
}
.overlay {
height: 600px;
width: 800px;
}
.overlay-close.btn-icon {
height: 40px;
width: 40px;
}
.overlay-close.btn-icon .svg-icon {
height: 100%;
width: 100%;
padding: 0;
}
/* Basket & Checkout */
.article-info {
width: 555px;
border-top: none;
}
.article-info > div:first-child {
width: 54%;
border-top: none;
}
.article-info > div:last-child {
width: 46%;
border-top: none;
}
.article-info > div:last-child .article-position:last-child {
height: 85px;
padding-right: 0;
}
.article-info.with-discount > div:first-child {
width: 52%;
}
.article-info.with-discount > div:last-child {
width: 48%;
}
.article {
padding: 10px 15px;
background: #f2f2f2;
}
.article-basic {
width: 290px;
}
.article-position {
height: 85px;
padding: 0 15px;
border-left: 1px solid #ccc;
}
.article-position:first-child:last-child {
float: right;
}
.article-image {
margin-top: 0;
margin-bottom: 0;
}
.calculation table .title {
float: left;
width: 200px;
}
.basket-coupon-input-label {
width: 30%;
line-height: 40px;
}
div.basket-coupon-input {
width: 70%;
}
.basket-coupon-input .form-control {
float: left;
width: 165px;
min-width: 0;
}
.basket-coupon-input-button {
float: left;
margin: 0 0 0 20px;
}
.basket-coupon-position-remove {
float: none;
}
.basket-coupon-position-code {
width: 30%;
line-height: 40px;
}
.basket-coupon-input-button,
.basket-coupon-position-remove {
width: 165px;
}
.basket-coupon-input-label,
div.basket-coupon-input {
float: left;
}
.checkout-delivery-address h6,
.checkout-invoice-address h6,
.greeting-text h6,
.shipping-data h6,
.payment h6 {
font-size: 1rem;
}
.checkout-address-title,
.checkout-greeting-text-title,
.checkout-shipping-data-title,
.checkout-payment-title {
width: 332px;
}
.confirm-order,
.confirm-order .checkbox label,
.confirm-order .radio label,
.calculation table th,
.calculation table td {
font-size: .88888rem;
line-height: 1.11111rem;
}
.payment .svg-icon,
.greeting-text .svg-icon,
.shipping-data .svg-icon,
.checkout-invoice-address .svg-icon,
.checkout-delivery-address .svg-icon {
height: 28px;
width: 30px;
}
.shipping-data,
.greeting-text {
width: 480px;
}
.payment,
.checkout-delivery-address {
width: 240px;
}
.checkout-invoice-address {
width: 344px;
}
.payment .modify-link,
.greeting-text .modify-link,
.shipping-data .modify-link,
.checkout-invoice-address .modify-link,
.checkout-delivery-address .modify-link {
margin-bottom: -20px;
line-height: auto;
vertical-align: top;
}
.calculation {
padding: 10px;
}
.calculation hr {
float: right;
width: 100%;
}
.calculation table {
float: right;
width: 550px;
}
.invoice-separator {
margin-top: 5px;
margin-bottom: 5px;
}
.order-preference-wrapper {
width: auto;
display: inline;
}
/* Confirmation */
.order-confirmation {
width: -webkit-calc(100% - 300px);
width: calc(100% - 300px);
}
.research-prompt {
position: absolute;
top: 0;
right: 25px;
width: 300px;
}
.research-prompt-image {
width: 84px;
height: 53px;
margin: 5px 0 0 0;
}
}
@media (min-width: 1420px) {
.site-content > form > .row,
.site-content > .row {
margin: 0 20px;
}
.active-filter::after {
padding: 1px 5px;
}
/* Shopitem */
.shopitem-container {
height: 290px;
}
.shopitempic {
height: 145px;
border-radius: 15px;
}
.article-basic {
width: 331px;
}
.article-info {
width: 665px;
}
/* Product */
.product-image {
height: 189px;
width: 300px;
border-radius: 18px;
}
.physical .product-image {
height: 189px;
}
/* Checkout */
.article-info.with-discount > div:first-child {
width: 44%;
}
.article-info.with-discount > div:last-child {
width: 56%;
}
.checkout-address-title,
.checkout-greeting-text-title,
.checkout-shipping-data-title,
.checkout-payment-title {
width: 406px;
}
.shipping-data,
.greeting-text {
width: 530px;
}
.payment,
.checkout-delivery-address {
width: 265px;
}
.checkout-invoice-address {
width: 429px;
}
.calculation table {
width: 670px;
}
/* Confirmation */
.research-prompt {
right: 35px;
}
}
.content-site > .row > .col-xs-12 {
background: rgb(255,255,255);
padding: 1em;
}
.catalog_header {
padding: 0 15px;
}
.country_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.country_item {
width: calc(50% - 1em);
margin: .5em;
padding: .5em;
background: #f5f5f5;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.country_img {
}
.country_name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: calc(100% - 80px);
margin: auto;
line-height: 2em;
}
@media screen and (min-width: 768px) {
.country_item {
width: calc(25% - 1em);
}
}
@media screen and (min-width: 768px) {
.country_item {
width: calc(33.3333% - 1em);
}
}
.customer-logo-frame {
margin: 0px 15px;
height: 64px;
width: 190px;
}