/* dashboard content */
/* ================= */

/* general */
/* ======= */

/* getting rid of dotted focus outline */
:focus {outline:none !important;}
::-moz-focus-inner {border:0 !important;}

body {
	background-color:#ffffff;
	color:#222222;
	font-size:10px;
	line-height:1em;
	font-family:'Open Sans', sans-serif;
	padding-top:5.9em;
	padding-bottom:11.8em;

	opacity:0;
	animation: animation_body 0.25s forwards;
	animation-delay: 0.1s;
    animation-iteration-count: 1;
}

@keyframes animation_body {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

a {
	color:inherit;
	text-decoration:none;
	cursor:pointer;
}

strong {
	font-weight:bold;
}

.subtlefade {
	background: linear-gradient(to bottom, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 100%);
}

.boxshadow {
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
}

.greenback {
	background-color:#7bd400;
}

.blueback {
	background-color:#00c1f6;
}

.magentaback {
	background-color:#f40f97;
}

#flashMessage,
p.status {
	padding-left:calc(25% + 10px);
	padding-right:calc(25% + 10px);
	text-align:left;
}

#flashMessage.error,
p.status.error {
	color:#f40f97;
}

p.status .item {
	display:block;
	hyphens:auto;
}

p.status .item .percentage {
	font-weight:bold;
}

.content {
	position:relative;
}

input[type="text"]:not(.dashboard-input),
input[type="date"],
input[type="password"]:not(.dashboard-input),
input[type="tel"],
select,
textarea {
	color:#222222;
	font-family:'Open Sans', sans-serif;
	font-size:1em;
	line-height:2.2857em;
	min-height:1.25em;
	-khtml-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	border-radius:0;
	background-color:#eeeeee;
	padding:0.25em 0.5em;
	display:block;
	width:calc(100% - 1em);
}

select {
	color:#999999;
	width:100%;
	background-size:1em 1em;
	background-position:calc(100% - 0.5em) center;
	background-repeat:no-repeat;
	background-image:url(/media/img/main/dashboard/arrow_grey_down.png);
}

/* firefox */
@-moz-document url-prefix() {
    select {
		line-height:1.75em;
		min-height:1.75em;
		padding:0;
	}
}

textarea {
	height:calc(1.25em * 7);
	resize: none;
}

span.button,
input[type="button"],
input[type="submit"] {
	color:#ffffff;
	font-family:'Open Sans', sans-serif;
	font-size:1em;
	line-height:2.2857em;
	-khtml-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	border-radius:2px;
	padding:0.25em 0.5em;
	display:block;
	width:100%;
	box-sizing:border-box;
	cursor:pointer;
}

input[type="checkbox"]:not(.watson-form__checkbox) {
	font-size:1em;
	-khtml-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color:#999999;
	height:1.4em;
	width:1.4em;
	background-size:90% 90%;
	background-position:49% 49%;
	background-repeat:no-repeat;
	border-radius:50%;
	vertical-align:-0.6em;
	border:4px solid #eeeeee;
}

@-moz-document url-prefix() {
  input[type="checkbox"] {
     vertical-align:-0.2em;
  }
}

input[type="checkbox"]:not(.watson-form__checkbox):checked {
	border:none;
	background-color:#7bd400;
	background-image:url(/media/img/main/dashboard/check.png);
}

input:disabled {
	background-color:transparent;
	color:#999999;
	-webkit-text-fill-color:#999999
}

input[type="file"] {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	cursor:pointer;
}

/* grid */
/* ==== */
.table {
	display:table;
	vertical-align:middle;
	text-align:center;
	width:100%;
}

.table .row {
	display:table-row;
}

.table .row.social-login-row {
    display:none;
}

.table .cell {
	display:table-cell;
	vertical-align:middle;
	padding:0.7em 0;
	position:relative;
}

.table .cell.leftalign {
	text-align:left;
}

.table .cell.hpadding {
	padding-left:1em;
	padding-right:1em;
}

.table .cell.small {
	width:15%;
	background-size:2.2em 2.2em;
	background-position:center center;
	background-repeat:no-repeat;
}

.table .cell.small.arrow:first-child {
	background-image:url(/media/img/main/dashboard/arrow_grey_left.png);
}

.table .cell.small.arrow:last-child,
.table .cell.small.arrow:nth-last-child(2) {
	background-image:url(/media/img/main/dashboard/arrow_grey_right.png);
}

.table .cell.small.delete {
	background-image:url(/media/img/main/dashboard/delete.png);
}

.table .cell.small.config {
	background-image:url(/media/img/main/dashboard/config.png);
	background-position:center 1em;
}

.table .cell.small.border:first-child:after,
.table .cell.small.border:last-child:after {
	content:"";
	width:1px;
	height:calc(100% - 2em);
	background-color:#e4e4e4;
	position:absolute;
	top:1em;
}

.table .cell.small.border:first-child:after {
	right:1em;
}

.table .cell.small.border:last-child:after {
	left:1em;
}

.table .cell a {
	color:#00c1f6;
}

/* header / footer */
/* =============== */
.header,
.footer {
	position:fixed;
	color:#ffffff;
	height:5.9em;
	width:100%;
	z-index:1;
}

.header {
	top:0;
}

.footer {
	bottom:0;
}

.header .cell:not(.small),
.footer .cell:not(.small) {
	font-size:1.8em;
	line-height:1.3em;
	font-weight:bold;
}

.header .cell:first-child {
	background-image:url(/media/img/main/dashboard/arrow_white_left.png);
}

.header .cell.close {
	background-image:url(/media/img/main/dashboard/close.png);
}

.footer .cell:last-child {
	background-image:url(/media/img/main/dashboard/arrow_white_right.png);
}

/* mainsegment */
/* =========== */
.mainsegment {
	height:5em;
	border-bottom:1px solid #cccccc;
}

.mainsegment.empty {
	height:1.4em;
}

.mainsegment .cell:not(.small) {
	font-size:1.8em;
	line-height:1.3em;
}

.mainsegment .cell a {
	font-size:0.888em;
	line-height:1.3em;
}

.mainsegment .title {
	font-weight:bold;
}

.mainsegment .note {
	color:#999999;
	font-size:0.77777em; /* 14px / 18px */
	line-height:1.5em;
	display:block;
}

.mainsegment:last-child {
	border-bottom:none;
}

/* subsegment */
/* ========== */
.subsegment {
	background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0) 9px, rgba(0,0,0,0) calc(100% - 9px), rgba(0,0,0,0.1) 100%);
	background-color:#ffffff;
	margin-top:-1px;
}

/* edge hack */
@supports (-ms-ime-align:auto) {
	.subsegment {
		background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0) 9px, rgba(0,0,0,0) 96%, rgba(0,0,0,0.1) 100%);
	}
}

/* ie => 10 hack */
_:-ms-input-placeholder, :root .subsegment {
	background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0) 9px, rgba(0,0,0,0) 96%, rgba(0,0,0,0.1) 100%);
}

.subsegment .row {
	height:5em;
}

.subsegment .row.highlight {
	background-color:rgba(0,193,246,0.08);
}

.subsegment .cell {
	border-bottom:1px solid #e4e4e4;
}

.subsegment .row:last-child .cell {
	border-bottom:none;
}

.subsegment .cell:not(.small) {
	font-size:1.4em;
	line-height:1.3em;
}

.subsegment .cell:not(.small) p.oneliner {
	width:70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.subsegment .cell:not(.small):last-child p.oneliner {
	width:80vw;
}

.subsegment .cell p.title {
	font-weight:bold;
}

.subsegment .cell p.time {
	color:#999999;
}

.subsegment .cell p.note {
	color:#999999;
}

.subsegment .cell p span.form_quarter {
	width:calc(25% - 10px);
	display:inline-block;
	vertical-align:middle;
	padding:0.25em;
}

.subsegment .cell p span.form_half {
	width:calc(50% - 10px);
	display:inline-block;
	vertical-align:middle;
	padding:0.25em;
}

.subsegment .cell p span.form_quarter:first-child {
	text-align:right;
}

.subsegment .cell p span.form_quarter:last-child {
	text-align:left;
}

.subsegment .cell p span.form_quarter.topalign {
	vertical-align:top;
}

.subsegment .cell a {
	font-size:1.142em;
	line-height:1.3em;
}

/* icon */
/* ==== */
.icon {
	display:inline-block;
	width:3.333em;
	height:3.333em;
	background-color:#ffffff;
	border-radius:50%;
	background-size:cover;
	background-position:center center;
	background-image:url(/media/img/main/dashboard/notification/default.png);
}

.icon.reply {
	background-image:url(/media/img/main/dashboard/notification/reply.png);
}

.icon.check {
	background-image:url(/media/img/main/dashboard/notification/check.png);
}

.icon.love {
	background-image:url(/media/img/main/dashboard/notification/love.png);
}

.icon.contest {
	background-image:url(/media/img/main/dashboard/notification/contest.png);
}

/* storyimage */
/* ========== */
.storyimage {
	display:inline-block;
	width:3.333em;
	height:3.333em;
	background-size:cover;
	background-position:center center;
	background-image:url('/media/img/main/icons/teaser_fallback.png');
}

/* number */
/* ====== */
.number {
	display:inline-block;
	color:#ffffff;
	font-size:12px;
	line-height:1.5em;
	height:1.5em;
	padding:0 0.5em;
	border-radius:0.75em;
	vertical-align:top;
}

/* rating */
/* ====== */
.rating {
	display:inline-block;
	vertical-align:middle;
	width:calc(7 * (5px + 2px));
	line-height:5px;
	margin-top:-2px;
}

.mainsegment .rating {
	margin-left:0.5em;
}

.rating .dot {
	float:left;
	width:5px;
	height:5px;
	margin-right:2px;
	border-radius:50%;
	position:relative;
}

.rating .dot.half:after {
	content:"";
	display:block;
	width:5px;
	height:5px;
	background-color:#ffffff;
	position:absolute;
	left:2.5px;
}

/* love / hate */
/* =========== */
.love_hate {
	font-size:1.2em;
	line-height:1.3em;
	text-align:left;
	padding-right:1em;
	display:inline-block;
}

.love_hate .love,
.love_hate .hate {
	background-size:auto 1em;
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:1.5em;
}

.love_hate .love {
	background-image:url(/media/img/main/icons/icon_love_dark.png);
}

.love_hate .hate {
	background-image:url(/media/img/main/icons/icon_hate_dark.png);
}

/* seal */
/* ==== */
.content:after {
	content:"";
	width:1.4em;
	height:1.4em;
	display:block;
	margin-left:calc(50% - (1.4em / 2));
	background-image:url(/media/img/main/logos/logo_watson_w_grey.png);
	background-size:cover;
	clear:both;
	position:absolute;
	bottom:-1.4em;
}

/* mandatory */
/* ========= */
span.mandatory {
	display:inline-block;
	background-image:url(/media/img/main/dashboard/mandatory.png);
	background-size:contain;
	background-position: center center;
	background-repeat:no-repeat;
	width:0.5em;
	height:0.5em;
	vertical-align:middle;
}

/* dropzone */
/* ======== */
.dropzone:hover,
.dropzone.in {
	background-image:url(/media/img/main/dashboard/dropzone.png);
	cursor:pointer;
}

/* messageBox */
/* ========== */
.messageBox {
	font-size:1.4em;
	line-height:1.3em;
	min-height:1.3em;
	padding:0.5em 1em;
	margin:0.5em;
	position:fixed;
	top:calc(5.9em / 1.4);
	left:0;
	background-color:white;
	width:calc(100% - 3em);
	border-radius:2px;
	box-shadow:2px 2px 9px rgba(0,0,0,0.2);
	z-index:2;
	display:none;
	text-align:center;
}

body.mobile .messageBox {
	top:calc(5.9em * 7 / 8 / 1.4);
}

.messageBox.fail {
	background-color:#f40f97;
	color:#ffffff;
}

.messageBox.success {
	background-color:#7bd400;
	color:#ffffff;
}

/* lock screen */
/* =========== */
.lock_screen {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.3);
	z-index:666;
}

body.desktop .watson_loader,
body.tablet .watson_loader {
	width:60px;
	height:60px;
}

body.mobile .watson_loader {
	width:40px;
	height:40px;
}

/* ========================= */
/* view specific definitions */
/* ========================= */

/* login */
/* ===== */
.content.login_view .subsegment .cell p.title {
	padding:0.25em 0;
}

.content.login_view .subsegment .cell p a {
	padding:0.2em 0 0.2em 0;
	display:inline-block;
}

.content.login_view .social_login {
	padding:1em 3.2em;
	background-size:2.2em 2.2em;
	background-position:right center;
	background-repeat:no-repeat;
	background-image:url(/media/img/main/dashboard/arrow_grey_right.png);
	font-size:calc(1em / 1.4);
	display:inline-block;
}

.content.login_view .social_login .bubble {
	width:2.6em;
	height:2.6em;
	padding:1em;
	border-radius:50%;
	display:inline-block;
	background-size:auto 2.6em;
	margin:0 0.5em;
	background-position:center center;
	background-repeat:no-repeat;
}

.content.login_view .social_login .bubble.facebook {
    background-color:#507be7;
    background-image:url(/media/img/main/socialicons/facebook.png);
}

.content.login_view .social_login .bubble.twitter {
    background-color:#00c1f6;
    background-image:url(/media/img/main/socialicons/twitter.png);
}

.content.login_view .social_login .bubble.google {
    background-color:#db3236;
    background-image:url(/media/img/main/socialicons/google.png);
}

.content.login_view .social_login .bubble.apple {
    background-color:#000000;
    background-image:url(/media/img/main/icons/apple_1.svg);
    background-size: auto 2.2em;
    background-position: center top 1.1em;
}

.content.login_view .mainsegment.hide,
.content.login_view .subsegment.hide {
	display:none;
}

/* main_view */
/* ========= */
/* profile */
.content.main_view .mainsegment.profile .portrait {
	display:inline-block;
	width:4.816em;
	height:4.816em;
	background-size:3.9em 3.9em;
	background-position:center center;
	margin-bottom:-0.3em;

	opacity:0;
	animation: animation_portrait 0.5s forwards;
	animation-delay: 0.25s;
    animation-iteration-count: 1;
}

@keyframes animation_portrait {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.content.main_view .mainsegment.profile .portrait .mask {
	width:4.816em;
	height:4.816em;
	background-size:100% 100%;
	background-position:center center;
	background-image:url(/media/img/main/dashboard/portrait_mask.png);
}

.content.main_view .mainsegment.profile .title {
	display:block;
}

/* notifications */
.content.main_view .subsegment.notifications {
	overflow:hidden;

	max-height:0;
	opacity:0;
	animation: animation_notifications 1s forwards;
	animation-delay: 0.25s;
    animation-iteration-count: 1;
}

@keyframes animation_notifications {
    0%   {max-height: 0; opacity:0;}
    100% {max-height: 25em; opacity:1;}
}

/* activity */
.content.main_view .subsegment.activity .row ul {
	vertical-align:top;
	display:inline-block;
	width:42%;
}

.content.main_view .subsegment.activity .row ul:first-child {
	margin-right:14%;
}

.content.main_view .subsegment.activity .row ul li:not(.inactive) {
	width:100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content.main_view .subsegment.activity .row ul li.inactive {
	color:#999999;
	hyphens:auto;
}

.content.main_view .subsegment.activity .row ul li:nth-child(odd):not(:last-child) {
	margin-bottom:0.4em;
}

/* profile view */
/* ============ */
.content.profile_view .portrait {
	display:inline-block;
	width:5em;
	height:5em;
	background-size:cover;
	background-position:center center;
}

/* breakpoints don't work because of iframing the dashboard */
/* on certain mobile devices document width will be wider than on desktop for example */
/* hence we work with classes in order to secure proper display */

/* tablet */
/* ====== */
body.tablet {
	font-size:9px;
}

body.tablet .number {
	font-size:calc(12px * 0.9);
}

body.tablet input[type="text"]:not(.dashboard-input),
body.tablet input[type="password"]:not(.dashboard-input) {
	font-size:16px; /* 16px to prevent ios zoom-in on focus */
}

/* mobile */
/* ====== */
body.mobile {
	font-size:8px; /* standard 7px as on regular frontend too small for mobile */
	padding-top:calc(5.9em * 7 / 8);
	padding-bottom:calc(11.8em * 7 / 8);
}

body.mobile .number {
	font-size:calc(12px * 0.8);
}

body.mobile .header,
body.mobile .footer {
	height:calc(5.9em * 7 / 8);
}

body.mobile input[type="text"],
body.mobile input[type="password"] {
	/*font-size:16px;*/ /* 16px to prevent ios zoom-in on focus */
}

/* mobile */
/* ====== */
@media screen and (max-width: 591px) {

	body.mobile .boxshadow {
		box-shadow: none;
	}
	body.mobile .header.subtlefade {
		background: none;
		background-color: #222222 !important
	}
	body.mobile .footer.subtlefade {
		background: none;
		background-color: #7bd400 !important
	}
	body.mobile .login.subsegment .table,
	body.mobile .lostpassword.subsegment .table,
	body.mobile .register.subsegment .table,
	body.mobile .userinput.subsegment .table {
		font-size: 1.25em;
	}

	body.mobile .mainsegment .cell a {
		font-size: 1.142em !important;
	}

	body.mobile .register.subsegment p.title.mobile {
		display:none;
	}

	body.mobile .register.subsegment .agb {
		text-align: left;
	}

	body.mobile .register.subsegment .note {
		margin-top: 0px;
	}

	body.mobile .register.subsegment .lostpassword {
		display:none !important;
	}

	body.mobile .marginBottom0 {
		margin-bottom: 0px;
	}

	body.mobile p {
		margin: 5px;
	}
	body.mobile .left_block {
		text-align: left;
    margin-left: 97px;
	}
	body.mobile .left_block2 {
		text-align: left;
    margin-left: 110px;
	}
	body.mobile .content.login_view .subsegment .cell p.title {
    padding: 0px;
	}

	body.mobile .subsegment .cell p span.form_half {
    width: calc(70% - 10px);
		text-align: left;
	}
	body.mobile .subsegment .cell p span.form_quarter:first-child {
    width: calc(20% - 10px);
	}
	body.mobile .subsegment .cell p span.form_quarter {
    width: calc(10% - 10px);
	}

	body.mobile .userinput.subsegment .cell p span.form_quarter:first-child {
    width: calc(23% - 10px);
	}
	body.mobile .userinput.subsegment .cell p span.form_quarter {
    width: 0px;
	}

	/* body.mobile input[type="text"], body.mobile input[type="date"], body.mobile input[type="password"], body.mobile input[type="tel"], body.mobile select, body.mobile textarea {
		padding: 0.7em 0.5em;
	} */

	/* body.mobile span.button, body.mobile input[type="button"], body.mobile input[type="submit"] {
		padding: 0.75em 0.5em;
	} */

	body.mobile .content.login_view .social_login {
		background-image: none;
	}

	body.mobile .content.login_view .social_login .bubble.google {
		background-color: #db3236;
	}

	body.mobile .footer.hide {
		display:none;
	}

	body.mobile .header .cell.close, body.tablet .header .cell.close {
		visibility:visible;
	}

	body.mobile .notifications.subsegment p {
		margin: 0px;
	}

	body.mobile .comments.subsegment p,
	body.mobile .stories.subsegment p {
		margin: 5px;
	}

    .userinput_view .comments {
        text-align: left;
    }

}

/* mobile Iphone8 */
@media screen and (max-width: 376px) {
	body.mobile .left_block {
		margin-left: 89px;
	}

	body.mobile .left_block2 {
        margin-left: 100px;
	}
}

/* mobile 320 x 552 */
/* ====== */
@media screen and (max-width: 321px) {

	body.mobile .login.subsegment .table,
	body.mobile .lostpassword.subsegment .table,
	body.mobile .register.subsegment .table,
	body.mobile .userinput.subsegment .table {
		   font-size: 1.05em;
	}

	body.mobile .left_block {
		margin-left: 79px;
	}

	body.mobile .left_block2 {
    margin-left: 88px;
	}
}