html { background: #0b3358; }

body {	
font-family: 'Open Sans', arial, helvetica, sans-serif;
font-size: 90%;
color: #333;
line-height: 1.6em; 
font-weight: 400;
height: auto;
}

a, a:hover { color: #0053a0; }

ul {
margin-left: 0;
margin-bottom: 0;	
}

h1 { 
font-family: 'Open Sans', arial, helvetica, sans-serif;
font-size: 1.8rem; 
line-height: 2rem; 
font-weight: 300; 
margin: 0 0 2rem; 
color: #444;
}

h2 { 
font-family: 'Open Sans', arial, helvetica, sans-serif;
font-size: 1.13rem; 
line-height: 1.2rem; 
font-weight: 400; 
margin: 0 0 1.5rem; 
color: #444;
}

h3 { 
font-family: 'Open Sans', arial, helvetica, sans-serif;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
font-size: 0.85rem; 
line-height: 1.2rem; 
font-weight: 600; 
margin: 2rem 0 1.5rem; 
color: #999;
padding-bottom: 1rem;
letter-spacing: 0.3px;
}

h4 { 
font-family: 'Open Sans', arial, helvetica, sans-serif;
font-size: 0.9rem; 
line-height: 1.4rem; 
font-weight: 600;
margin-bottom: 0;
}

h3:first-child { margin-top: 1rem; }

label { font-weight: 600; }
hr { border-color: #ccc; }
strong { font-weight: 600; }

 
/* ======================================================== Global styles */
#DeleteVCDWizardForm .wizard {
    display:block;
}

#DeleteVCDWizardForm .wizard h1 {
    display:none;
}



.box {
    border: 1px solid #ccc;
    background: #f6f6f6;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    margin-bottom: 2.3rem;
}

.boxoverflow {
    overflow: visible;
}

.box-padding {
    padding: 1.8rem;
}
.box-padding--no-top-bottom-padding {
    padding-bottom: 0;
    padding-top: 0;
}
.box-padding-small { padding: 0.7rem 1rem; }
.no-bottom-margin { margin-bottom: 0; }
.relative { position: relative; }
.hidden { visibility: hidden; }

.dangerzone {
	background-color: #f8dfdf;
	padding:10px 10px 10px 52px;
	position:relative;
}

.dangerzone i {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
} 
.dangerzone p {
	margin-bottom:0;
}

.gradient-header {
	position: relative;
	background: #fbfbfb;
	background: -moz-linear-gradient(top, #fbfbfb 0%, #f8f8f8 100%);
	background: -webkit-linear-gradient(top, #fbfbfb 0%,#f8f8f8 100%);
	background: linear-gradient(to bottom, #fbfbfb 0%,#f8f8f8 100%);
	filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f8f8f8',GradientType=0 )";
	border-bottom: 1px solid #ccc;
	padding: 1.3rem 1.8rem 1.3rem 1.8rem;
}

.checkboxes {
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.checkboxes label { font-weight: 400; }

.air-top {
    margin-top: 1rem;
}

.radiobuttons { margin-bottom: 1rem; }
.radiobuttons label { font-weight: 400; }

.warning { 
color: #7c1615; 
display: inline-block;
}

.warning:hover { 
color: #7c1615; 
text-decoration: underline;
}

input[type="submit"] + .warning { margin-left: 1.8rem; }
.toggle-block { display: none; }

.back-link { 
position:relative;
display: inline-block;
top: -1rem;
margin-bottom: 1rem;	 
}

input.hIghlight {
      //border: 1px solid red;
	  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	  padding: 3px 0px 3px 3px;
	  margin: 5px 1px 3px 0px;
	  border: 1px solid rgba(81, 203, 238, 1);
	}
select.hIghlight {
      //border: 1px solid red;
	  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	  padding: 3px 0px 3px 3px;
	  margin: 5px 1px 3px 0px;
	  border: 1px solid rgba(81, 203, 238, 1);
	}
textarea.hIghlight {
      //border: 1px solid red;
	  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	  padding: 3px 0px 3px 3px;
	  margin: 5px 1px 3px 0px;
	  border: 1px solid rgba(81, 203, 238, 1);
	}

.back-link:hover { text-decoration: underline; }


/* Mulltiple selector*/
.multiple {
    background-color: #fff;
    border: 1px solid #cacaca;
    height: 120px;
    margin-bottom: 16px;
    overflow: auto;
    padding: 4px 12px;
}

.multiple label {
    cursor:pointer;
    padding-bottom:3px;
    padding-top:3px;
}

.multiple h3 {
    margin-bottom: 15px;
    margin-top: 15px;
}

/* ======================================================== Header */
#header-root {
    background-color: #0b3358;
    height: 87px;
    margin-bottom: 36px;
}
#header-root.is-beta-user {
    height: 142px;
}
#header {
    background: #0b3358;
    padding: 1.4rem 1.7rem 1.4rem 1.7rem;
    width: 100%;
    float: left;
    margin-bottom: 3rem;
}

#header .logo { 
max-width: 152px; 
display: block;
float: left;
}

#global-nav {
float: right;
display: block;
}

#global-nav li {
display: block;	
float: left;
}

#global-nav li a {
display: block;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-right: 1em;
color: #fff; 
}

#global-nav li:last-child a { margin-right: 0; }

#global-nav .selected a, #global-nav .selected a:hover {
background: #11263a;
-webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

#global-nav .selected a:hover { text-decoration: underline; }
#global-nav a:hover { background: #234E75; }
#header .login-status { background: #0053a0; }

#header .settings:hover .login-status {
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}

#header .settings { position: relative; }

#header .settings ul { 
display: none; 
position: absolute;
top: 28px;
left: 0;
width: 100%;
background: #0053a0;
margin-left: 0;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}

#header .settings ul li { 
width: 100%;
border-top: 1px solid #2D6FB4; 
}

#header .settings ul li a { width: 100%; }

#header .settings a:hover { 
background: #0053a0;
color: #fff; 
text-shadow: 0 0 15px rgba(255,255,255,0.6);
}

#header .settings:hover ul { display: block; }


/* ======================================================== Search */


.search-box { 
padding-bottom: 0.8rem; 
margin-bottom: 1.8rem;
}

.search-btn { width: 100%; }
.search-input { height: 2.75rem; }

.extended-search { 
margin-top: 0.7rem; 
display: inline-block;
}

.extended-search-form { display: none; }

.filter-buttons { 
border-top: 1px solid #ccc;
padding: 1.5rem 0 1rem; 
margin-top: 0.5rem;
}

/* ======================================================== Active filters box */

.active-filters {
border: 1px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 1em 0 2em 0;
padding: 0.5rem 1.8rem 1rem;
}

.active-filters h3 {
border-bottom: none;
margin-bottom: 0;
}

.active-filters li, .active-filters ul {
list-style: none;
display: inline-block;
margin-bottom: 0;
}

.active-filters li { 
margin-left: 0; 
margin-bottom: 0.8rem; 
}

.active-filters ul { margin-right: 1.5rem; }

.active-filters li.static, .active-filters li a {
border: 1px solid #eaeaea;
background: #eaeaea;
display: inline-block;
padding: 0.1rem 0.5rem 0.1rem 0.5rem;
}

.active-filters li a {
padding-right: 1.7rem;
background: #eaeaea url(../../images/ArticleManager/icon-close.png) 100% 50% no-repeat;
}

.active-filters li a:hover { border: 1px solid #aaa; }


/* ======================================================== Status bar */

.fa { vertical-align: middle; }

.status-bar > ul > li { 
list-style: none; 
display: block; 
border-right: 1px solid rgba(0,0,0,0.08);
padding: 0.8rem 1.6rem;
margin-bottom: 0;
float: left;
}

.status-bar > ul > li:last-child { 
align-items:center;
border: none; 
display:flex;
float: right;
}

#send-vcd-root {
    margin-left:16px;
}

.status-bar i {
    margin-right: 0.5rem;
}

.status-bar a { 
color: #333;
text-decoration: underline;
vertical-align: middle;
}

.status-bar span { 
font-weight: 600; 
vertical-align: middle;
}

.status-bar.positive, .status-message.positive  {
background: #dcedd5;	
border: none;
}

.status-bar.neutral, .status-message.neutral  {
background: #f1f1f1;	
border: none;
}

.status-bar.info, .status-message.info {
    background: #d1ecf1;
    border: none;
}

.status-bar.info i.fa-exclamation-circle {
    /*color: #0053a0;*/
    color: #0c5460;
}


.status-bar.negative, .status-message.negative {
    background: #f8dfdf;
    border: none;
}

.fa-check-circle-o, .fa-thumbs-up { color: #5c9f0e; }
.fa-eye-slash { color: #555; }
.fa-exclamation-triangle { color: #f5a623; }
.fa-exclamation-circle { color: #cc1a19; }
.fa-info-circle { color: #2372b2;  }

a.button-small, a.publish-article {
background: #0053a0; 
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.2rem 0.8rem;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
transition: all 0.3s ease;
display: inline-block;
}

a.publish-article  { 
background: #5c9f0e; 
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
from { background-color: #5c9f0e;}
50% { background-color: #4D830D; }
to { background-color: #5c9f0e;}
}

.status-bar a.publish-article, .status-bar a.button-small { 
margin-right: -0.8rem;
margin-left: 0.8rem;
}

a.publish-article:hover {
-webkit-animation-name: none;
-webkit-box-shadow: 0 0 0 1px #5c9f0e;
box-shadow: 0 0 0 1px #5c9f0e;
}

a.button-small:hover {
-webkit-box-shadow: 0 0 0 1px #0053a0;
box-shadow: 0 0 0 1px #0053a0;
}

.status-bar .errors-and-warnings { 
clear: both;
padding: 1rem; 
border-top: 1px solid rgba(0,0,0,0.08);
}

.status-bar table { 
margin-bottom: 0;
border: none; 
}

.status-bar table th { background: none; }
.status-bar table a { color: #0053a0; }
.status-bar table tr:hover td { background: #f9f9f9}

.confirmation-message div { 
padding: 0.7rem 1rem; 
margin: 0.7rem 0 1.2rem;	
border: 1px solid #cde7c3 !important;
}


/* ======================================================== Status messages */

.status-message { padding: 1.8rem; }

.status-message h1 { 
border-bottom: 1px solid #ccc; 
padding-bottom: 1rem;
margin-bottom: 1.8rem;
font-size: 1.4rem;
font-weight: 400;
}

.status-message h1 i { 
position: relative;
top: -1px;
margin-left: 3px;
}

.status-message p { 
border-bottom: 1px solid #ccc; 
padding-bottom: 1.8rem;
margin-bottom: 1.8rem;
}

.status-message p span { 
max-width: 700px;
display: block;
}

.status-message .button {
text-decoration: none;
margin-bottom: 0;
}

/* ======================================================== Article hierarchy */

.article-hierarchy-toolbar { 
position: absolute;
top: 0;
right: 0;
border-left: 1px solid #ccc;
display:flex;
} 

.new-article-level { 
display: none;
padding: 1.2rem;
} 

.article-tools { 
/*border-left: 1px solid #ccc;*/
height:62px;
width: 65px;
display: inline-block;
position:relative;
}

.article-tools--loading {
    background: url(../../images/ArticleManager/icon-tools.png) center center no-repeat;
    background-repeat: no-repeat;
    background-size: 25px 27px;
    display:block;
    position: absolute;
    top: 0;
    background-position: center center;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 1.2rem;
    opacity:0.2;
}
.image-url-text {
    word-break:break-all;
}
.new-article-level:hover, .article-tools:hover {
    background-color: #fff;
} 

.article-hierarchy { 
background: #fff;
border-bottom: 1px solid #ccc; 
padding-bottom: 0.7rem;
}

.article-hierarchy:last-child { border-bottom: none; }

.article-hierarchy, .article-hierarchy  ul {
margin-left: 0;
list-style-position: inside;
}

.article-hierarchy  ul { /* border-top: 1px solid #ccc; */ }

.article-hierarchy li {
/*border-top: 1px solid #ccc;*/	
background: #fff;
list-style: none;
}

.article-hierarchy li:first-child { border-top: none; }

.article-hierarchy li a, .article-hierarchy li span {
padding: 0.3rem 0.5rem 0.3rem 2.4rem;
display: inline-block;
color: #0053a0;
border: 1px solid #fff;
margin: 0.7rem 0.6rem 0 1.3rem;
}
.article-hierarchy li span { color: #333; }
.article-hierarchy li li a, .article-hierarchy li li span { margin-left: 2.5rem; }
.article-hierarchy li li li a, .article-hierarchy li li li span { margin-left: 3.7rem; }
.article-hierarchy li li li li a, .article-hierarchy li li li li span { margin-left: 4.9rem; }

.article-hierarchy a.selected {
background-color: #f4f4f4;
border: 1px solid #ccc;
-webkit-box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,0.05);
box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,0.05);
color: #111;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}

.article-hierarchy li a:hover {text-decoration: underline; }
.article-hierarchy a.selected:hover { text-decoration: none; }

.top-level-icon { 
background: url(../../images/ArticleManager/icon-top-level.png) no-repeat; 
background-size: 20px 16px;
background-position: 6px center;
}

.middle-level-icon { 
background: url(../../images/ArticleManager/icon-middle-level.png) no-repeat; 
background-size: 20px 16px;
background-position: 6px center;
}

.base-level-icon { 
background: url(../../images/ArticleManager/icon-base-level.png) no-repeat; 
background-size: 20px 16px;
background-position: 6px center;
}

.article-hierarchy-confirmation { margin-bottom: 0; }

/* ======================================================== Tab bar */

.tabs-content { 
background: none;
border: none;
}

.tabs-panel { padding: 0; }
.tabs { border: none; }

.tabs-title > a {
padding: 0;
line-height: 1.6em;
font-size: 100%;
color: #0053a0;
}

.tab-bar {
background: #e9f0f6;	
width: 100%;
display: table;
border-bottom: 1px solid #ccc;
margin-left: 0;
}

.tab-bar li {
display: table-cell;
vertical-align: middle;
width: auto;
float: none;
text-align: center;
border-right: 1px solid #ccc;
}

.tab-bar li span {
display: inline-block;	
padding: 0.8rem;
}

.tab-bar li a { display: block;	}
.tab-bar li:last-child { border-right: none; }

.tab-bar li.is-active a, .tab-bar li.is-active a:hover {
background: #fff;
color: #333;
-webkit-box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.2);
box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.2);
}

.tab-bar li a:hover { background: #f0f4f7; }

.tab-bar li a:active { 
-webkit-box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.1);
box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.1);
}


/* ======================================================== Tables */

table { 
width: 100%; 
margin-bottom: 1.5rem;
border: 1px solid #ccc;
}

tbody { border: none; }
tbody th, tbody td { padding: 0.7rem 0.9rem 0.7rem 0.9rem;}

table a:hover { text-decoration: underline; }

th { 
text-align: left; 
border-right: 1px solid #ccc;
font-weight: 600;
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 24%, #f2f2f2 100%);
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 24%,#f2f2f2 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 24%,#f2f2f2 100%);
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 )";
}

td { 
background: #fff; 
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}

tr td:last-child, tr th:last-child:not(.borderRight) { border-right: none; }
.no-data { color: #888; }

th.diettype-code {
	width:20%;
}
th.diettype-sub-code {
	width: 30%;
}
th.diettype-marked-on-package {
    width: 50%;
}

th.malgruppskriterium-code,
th.malgruppskriterium-min,
th.malgruppskriterium-max {
	width:31%;
}
/* Might be used for responsive scrolling in mobiles */
/* 
.table-wrapper { 
overflow: scroll;
border: 1px solid #ccc;
margin-bottom: 1rem;
}

.table-wrapper table { 
margin-bottom: 0; 
border: none;
}
*/
.delete, .edit, .copy {
	width: 30px;
}
table a:hover i { color: #000; }
table a:hover .fa-trash-o { color: #cc1a19; }

.bullet-green, .bullet-red, .bullet-yellow { 
border-radius: 50%;
width: 11px;
height: 11px;
overflow: hidden;
display: inline-block;
background: #5c9f0e; 
cursor: help;
}

.bullet-red { background: #cc1a19; }
.bullet-yellow { background: #ffff00; }

.VCD-status { width: 65px; }
.vcd-status-details { table-layout: fixed; }

.vcd-document-type {
	list-style: none;
}

.vcd-document-type li {
	display: inline-block;
	list-style: none;
}
.vcd-document-type li:before {
	content: '|';
	display: inline-block;
	margin-left: 6px;
	margin-right: 6px;
}
.vcd-document-type li:first-child:before {
	display:none;
}

.vcd-document-type a:hover {
	text-decoration: none;
}

.vcd-document-type a:hover i {
	color: #0053a0;
}

.vcd-document-type a:hover span {
	text-decoration:underline;
}
.vcd-status-details td, .vcd-status-details th {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.image-preview { 
max-width: 45px;
max-height: 45px; 
}

.image-preview-col { width: 70px; }


/* ======================================================== Data box */

.data-box {
background: #fff;
border: 1px solid #ccc;
margin-bottom: 1.5rem;
padding: 1.5rem 1.1rem 1.1rem 1.1rem;
}

.data-box a:hover { text-decoration: underline; }
.data-box table { margin-bottom: 0; }

.empty {
text-align: center;	
padding: 1.8rem 0;
color: #888;
}

.details-list { 
border: 1px solid #ccc;
background: #fafafa; 
margin-bottom: 1.1rem;
padding: 1.2rem 1rem 0 1rem;
}

.packagematerialValue-table th {
    font-size:13px;
}
/* ======================================================== Pagination */
.pagination {
    margin: 2rem 0 2rem 0;
}

.pagination li { 
background: #f1f1f1; 
border: 1px solid #ccc;
}

.pagination li a { 
color: #0053a0;
padding: 0.5rem 0.9rem;
}


.pagination a.current { 
background: #fff; 
color: #333;
padding: 0.5rem 0.9rem;
}


/* ======================================================== Not connected articles */

.not-connected-articles {
position: relative;
top: -0.5rem;
text-decoration: underline;
white-space: nowrap;
} 


/* ======================================================== Forms */

[type='file'], 
[type='checkbox'], 
[type='radio'] {	
margin: 0 0 0.4rem;
}

select { padding: 0 0.5rem; }

.button {
	background: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #0053a0;
	border: 1px solid #0053a0;
}

.button:hover, .button:focus:hover  { 
background: #32748a; 
color: #fff;
}

.button:focus { 
background: none;
color: #0053a0;
}

input[type="submit"], button[type="submit"] {
    cursor: pointer;
    padding: 0.8em 1.8em 0.8em 1.8em;
    font-weight: 600;
    color: #fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #32748a;
    background: -moz-linear-gradient(top, #32748a 0%, #0f5172 100%);
    background: -webkit-linear-gradient(top, #32748a 0%,#0f5172 100%);
    background: linear-gradient(to bottom, #32748a 0%,#0f5172 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#32748a', endColorstr='#0f5172',GradientType=0 )";
    border: 1px solid #32748a;
}

    input[type="submit"]:hover, button[type="submit"]:hover {
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
        border: 1px solid #111;
    }

    input[type="submit"]:active, button[type="submit"]:active {
        -webkit-box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.5);
        box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.5);
        border: 1px solid #111;
    }

    input[type="submit"].delete-button, button[type="submit"].delete-button {
        background: #cc1a19;
        border: 1px solid #cc1a19;
    }

.save-image {
    transition: all 0.3s ease;
    opacity: 1;
    position: relative;
    width:108px;
    text-align:right;
}
.save-image--narrow {
    width:94px;
}
.save-image .spinner-dots {
    visibility: hidden;
}

.save-image--is-loading {
    opacity: 0.5;
    width: 136px;
}

.save-image--is-loading .spinner-dots {
    visibility: visible;
}
textarea { height: 5.5rem!important; }

.label-details { font-weight: 400; }

.form-buttons { 
border-top: 1px solid #ccc; 
background: #f1f1f1;
}

.form-buttons .button { margin-bottom: 0; }

.article-metadata { 
font-size: 90%; 
list-style: none;
color: #777;
float: right;
}

.article-metadata li { 
float: left;
margin-right: 1.8rem;
margin-top: 0.2rem;
line-height: 1.5em;
}

.article-metadata span { 
color: #000;
display: block;
}

.help { 
position: relative;
top: -0.1rem;
left: 0.1rem;	
}

.fa-question-circle {
color: #bbb;
font-size: 17px;
}

.fa-question-circle:hover { 
cursor: pointer;
color: #999;
}

/* ======================================================= Loader */

.loader.loading { display: block; }

.loader { 
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 999998;
}

.sk-circle {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -50px; 
}

.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }

.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }

.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }

.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }

.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }

.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }

.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }

.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }

.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }

.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }

.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }

.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }

.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }

.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }

.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }

.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }

.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }

.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }

.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }

.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }

.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }

.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


.spinner-dots {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.spinner-dots span {
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s ease-in-out infinite both;
}

.spinner-dots .dot1 {
    animation-delay: -.32s;
}

.spinner-dots .dot2 {
    animation-delay: -.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}


/* ======================================================= Article type */

.article-type {
display: block;
text-align: center;
color: #444;
border: 1px solid #d4d4d4;
padding: 2.5rem 3rem 1rem 3rem;
height: 220px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
margin-bottom: 1.6rem;
margin-top: 0.2rem;
font-weight: 400;
}

.article-type input { margin-right: 0.1rem; }

.article-type:hover { border: 1px solid #999; }
.article-type:hover img { opacity: 0.6; }
.article-type.selected img { opacity: 0.6; }

.article-type.selected {
background: #fff;
color: #000;
border: 1px solid #999;
-webkit-box-shadow: inset 0 0 0 2px #999;
box-shadow: inset 0 0 0 2px #999;
cursor: auto;
}

.article-type img { 
max-width: 85px; 
opacity: 0.3;
margin-bottom: 1rem;
}

.article-type span { 
line-height: 1rem;
display: block;
}

/* ======================================================= Popup */

.popup-block {
position: relative;
background: #f6f6f6;
max-width: 800px;
margin: 40px auto;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}
.popup-block.medium { max-width: 900px; }
.popup-block.wide { max-width: 1100px; }
.popup-block.extraWide { max-width: 1200px; }
.popup-block h2 { margin-top: 2rem;  }
.popup-block a:hover { text-decoration: underline; }
.popup-block p { padding-right: 5rem; }

#change-password-popup-failure h1 { color:red; }

input[type="submit"] + .cancel { margin-left: 1.8rem; }

.nutritionvalue-ener + .nutritionvalue-ener td {
    border-top:none;
}

.popup-form-table {
    border: none;
    margin-bottom: 0;
}

.popup-form-table th, .popup-form-table td {
border: none;
padding: 0; 
background: #f6f6f6;
padding: 0.8rem 0;
padding-right: 0.8rem;
border-top: 1px solid #ccc; 
}

.popup-form-table tr td:last-child { padding-right: 0; }
.popup-form-table input, .popup-form-table select { margin-bottom: 0; }
.popup-form-table input + .field-validation-error,
.popup-form-table select + .field-validation-error,
.nutritionValue-ener--error {
        top: 0;
}
.popup-form-table--valign td {
    vertical-align:top;
}

.popup-block .tab-bar {
    position: relative;
    margin-top: -2rem;
    border-top: 1px solid #ccc;
}

.popup-block a:hover { text-decoration: none; }
.lbl-t-code {
	color: #999;
	font-size: 11px;
	display: inline-block;
	margin-left: 6px;
}
.current-level-info {
	margin: 0;
	padding: 0.8rem;
	border: none;
	border-bottom: none;
	background: #e9e9e9;
	color: #000;
	text-align: center;
	border-radius: 5px 5px 0 0;
	-webkit-box-shadow: inset 0 0 15px 0 rgba(00,00,00,0.08);
	box-shadow: inset 0 0 15px 0 rgba(00,00,00,0.08);
}

.search-article-levels { margin-top: 1rem; }

.search-article-levels-link { 
padding-top: 1rem;
display: block;
border-top: 1px solid #ccc; 
}
.modal-panel {
	display: none;
}

.modal-panel--visible {
	display:block;
}
/* ======================================================= Startpage */
.help-and-support {
	width: 100%;
	font-weight: 600;
	font-size: 110%;
	text-align: left;
	padding: 1.2em 1.8em;
	position: relative;
	margin-bottom: 1.8em;
}

.help-and-support span { 
display: block;
width: 16px;
height: 16px;
position: absolute;
right: 1.4em;
top: 50%;
margin-top: -8px;
}


.dabas-news { 
border: none; 
border-radius: 0;
-webkit-border-radius: 0;
}

.dabas-news li {
list-style: none;
margin-bottom: 1.8rem;
}

.dabas-news li:last-child { margin-bottom: 0; }

.dabas-news h2 {
font-weight: 600;
font-size: 100%;
margin-bottom: 0;
}

.dabas-news .news-publish-date {
color: #999;
font-size: 90%;
}

.dashboard a h2 { 
color: #fff; 
font-size: 1.5rem;
font-weight: 300;
line-height: 1.8rem;
}

.dashboard a  { 
color: #fff; 
height: 13rem;
display: block;
}

.dashboard a:hover h2 { text-decoration: underline; }

.dashboard span.number,
.dashboard span.link {
    position: absolute;
    right: 1.8rem;
    bottom: 2.5rem;
}

.dashboard span.link i { 
position: relative;
top: 0.8rem;
}

.my-articles, .my-media-files, .my-details, .my-trademarks, .my-manufacturers, .support-link, .companypage-link, .my-watched-searches {
    margin-bottom: 1.8rem;
    padding: 1.8rem;
    position: relative;
}

.number { 
font-size: 2.8rem;
font-weight: 600; 
letter-spacing: -0.1rem;
}

.my-articles, .my-watched-searches {
    float: left;
    width: 100%;
    padding: 0;
    position: relative;
}

.no-of-articles {
display: block; 
width: 50%;
float: left;
border-right: 1px solid rgba(255,255,255,0.15);
padding: 1.8rem;
position: relative;
}

.create-new-article { 
display: block; 
width: 50%;
float: left;
text-align: center;
padding: 5rem 1.8rem 1.8rem;
}

.my-articles { background: #0050A4;	}
.my-media-files { background: #7A170F; }
.my-details { background: #eaa200; }
.my-trademarks { background: #EAA200; }
.my-manufacturers { background: #444; }
.support-link { background: #3B8541; }
.companypage-link {background: #503D60; }
.my-watched-searches { background: #3B8541;}

.support-link p { 
font-size: 1.1rem; 
font-weight: 300;
margin-top: -0.8rem;
}

.companypage-link p, .my-watched-searches p {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: -0.8rem;
}

.companypage-link em, .my-watched-searches em {
    text-transform: uppercase;
    font-style: normal;
    color: #eaa200;
}


/* ======================================================= Watched Searches */

.notification-active, .notification-inactive {
    font-weight: 600;	
    color: #fff;
    display: block;
    padding: 2px 5px;
    text-align: center;
}

.notification-active { background: #ef0000;	}
.notification-inactive { background: #9b9b9b; }
.watch-notifications { width: 110px; }
.watch-change { width: 8%; }
.watch-settings { width: 12%; }


/* ======================================================= Footer */

#footer {
background: #0b3358;	
color: #fff;	
text-align: center;
padding: 5rem 2.5rem 6rem 2.5rem;
margin-top: 4rem;
}

#footer a { color: #79bafa; }
#footer a:hover { text-decoration: underline; }

#footer-navigation { 
line-height: 0.8rem; 
margin-bottom: 0.5rem;
}

#footer-navigation li {
border-right: 1px solid #788796;
padding-right: 1em;
margin-right: 0.8em;
margin-bottom: 1rem;
}

#footer-navigation li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}

#footer ul li {
display: inline-block;
list-style: none;
}

#footer ul li span {
padding-left: 0.6rem;
padding-right: 0.6rem;
}

.checkbox-label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0.5rem;
    margin-right: 1rem;
    vertical-align: baseline;
}

.field-validation-error{
    color: #cc1a19;
    font-size: 90%;
    position: relative;
    top: -1rem;
}

.ms-options-wrap + .field-validation-error {
	top:0;
}

.input-validation-error {
	background: #f8dfdf none repeat scroll 0 0;
	border: 1px solid #cc1a19;
}

.input-uppercase {
    text-transform:uppercase;
}

.negative-msg {
    background: #f8dfdf none repeat scroll 0 0;
}

.validation-summary-errors {
    background: #f8dfdf none repeat scroll 0 0;
    border: 1px solid #cc1a19;
    border-radius: 5px;
    margin-bottom: 1.8rem;
    padding: 0.7rem 1rem;
}

.validation-summary-errors ul {
    padding-left: 1rem;
}

.toast-top-right-custom {
  top: 76px;
  right: 12px;
}
.toast-top-center-custom {
  top: 0;
  right: 0;
  width: 100%;
}

#toast-container.toast-top-center-custom > div {
  width: 300px;
  top: 76px;
  margin: auto;
}

/* ======================================================= Wizard */

.wizard { 
position: relative;
margin-top: -2rem;
}

.wizard-info {
    background: #d4e7f2;
    border-radius: 5px;
    margin-bottom: 22px;
    padding: 16px 16px 1px 46px;
    position: relative;
}

.wizard-info i {
    position: absolute;
    top: 18px;
    left: 15px;
    font-size: 22px;
}

.wizard-info p {
    padding-right:0;
}

    .wizard .steps ul {
        background: #e9f0f6;
        width: 100%;
        display: table;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        margin-left: 0;
    }
/*
.wizard h1 { display: none; }
*/
.wizard .steps ul li {
display: table-cell;
vertical-align: middle;
width: auto;
float: none;
text-align: center;
border-right: 1px solid #ccc;
font-size: 100%;
}

.wizard .steps a {
padding: 0.85rem;
display: block;
color: #333;
}

.wizard .steps ul li span { font-size: 100%; }
.wizard .done a { color: #0053a0; }

.steps .current a {
background: #fff;
color: #333;
-webkit-box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.2);
box-shadow:inset 0 0 6px 0 rgba(0,0,0,0.2);
outline: none;
}

.wizard .actions {
border-top: 1px solid #ccc; 
background: #f1f1f1;
padding: 1.8rem;
}

.wizard .actions ul { list-style: none; }

.wizard .actions ul li:first-child a {
float: left; 
background: none;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #0053a0;
border: 1px solid #0053a0;
text-align: center;
line-height: 1;
cursor: pointer;
transition: all 0.25s ease-out;
vertical-align: middle;
padding: 0.85em 1em;
font-size: 0.9rem;
}
    
.wizard .disabled a { cursor: default; }

.wizard .actions ul li:last-child a, .wizard .actions ul li:nth-child(2) a {
padding: 0.6em 1.8em 0.6em 1.8em;
float: right;
font-weight: normal;
color: #fff;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #32748a;
background: -moz-linear-gradient(top,  #32748a 0%, #0f5172 100%);
background: -webkit-linear-gradient(top,  #32748a 0%,#0f5172 100%);
background: linear-gradient(to bottom,  #32748a 0%,#0f5172 100%);
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#32748a', endColorstr='#0f5172',GradientType=0 )";
border: 1px solid #32748a;
}    
    
.wizard .actions ul li:nth-child(2), .wizard .actions ul li:last-child { float: right; }
.wizard .actions .disabled { display: none; }

.wizard .actions ul li:first-child a:hover { 
background: #32748a; 
color: #fff;
}

.wizard .actions ul li:nth-child(2):hover, .wizard .actions ul li:last-child:hover {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}


#vcd-mottagare-message {
    margin:16px 0;
}

#vcd-mottagare-message em {
    font-style:italic;
}

.recipient-list {
    transition: opacity 0.3s ease;
}

.recipient-list--is-loading {
    opacity:0.5;
}
    /* ======================================================= Error page */
    .error-page {
    background: #0b3358;
}
.error-page-logo { padding: 2rem 0 3rem; }
.error-page-logo img { height: 75px; }

.error-page-box { 
text-align: center;
border: 1px solid rgba(255,255,255,0.15);
background: none;
padding: 3rem;
color: #fff;
border-left: none;
border-right: none;
 }

.error-page-box h1 { 
color: #fff; 
font-size: 220%;
line-height: 130%;
}

.error-page-buttons { padding-top: 1rem; }

.error-page-buttons .button { 
color: #79bafa;	
border: 1px solid #79bafa; 
}

.error-page-buttons .button:hover { 
background: #0b3358;	
color: #fff; 
border: 1px solid #fff;
}

/* ======================================================= Knowit */
.search-t-tool:hover, .search-t-tool:hover {
    /*background-color: #fff;*/
 
}

.hideElement {
    display: none !important;
}

.search-t-tool {
    border-left: 1px solid #ccc;
    margin-left: 5px;
   height:100%;
}

.search-t-tool-btn{
}

.centerContent {
    margin: 0 auto;
    text-align: center;
}
.popup-form-table th.addAll {
    padding-right: 0;
}
.articleReference div:not(:first-child){
    padding-top: 10px;
}

#tableMediaTbody .tableImage {
    background-size: cover;
    max-width: 130px;
    max-height: 130px;
}

.mediaGridSystem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 4px
}

.mediaGridItem {
    flex: 15%;
    max-width: 15%;
    padding: 0 4px;
    margin-right: 1.2em;
}

.mediaGridItem img {
    margin-top: 8px;
    vertical-align: middle;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .mediaGridItem {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .mediaGridItem {
      flex: 100%;
      max-width: 100%;
    }
  }
.mediaImageEditItem {
    flex: 65%;
    max-width: 65%;
    padding: 0 4px;
    margin-right: 1.2em;

    display: flex;
    flex-direction: column;
}

    .mediaImageEditItem img {
        margin-top: 8px;
        vertical-align: middle;
    }

  /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .mediaImageEditItem {
        flex: 50%;
        max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .mediaImageEditItem {
        flex: 100%;
        max-width: 100%;
    }
  }

.paddingLeft_10 {
    padding-left: 10px;
}

.paddingRight_5 {
    padding-right: 5px;
}

.paddingTop_15{
    padding-top: 15px;
}

.mediaFormatButton{
    color:#999;
}

.mediaFormatButtonActive{   
    color: #0053a0;
}

.mediaLink {
    font-weight: 600;
}

input[type="button"] + .cancel, button[type="submit"] + .cancel {
    margin-left: 1.8rem;
}

.dropzone {
    text-align: center;
    font-size: 18px;
}
  
.dropzoneIcon {
font-size: 1.5em;
}

#dropzoneDiv {
cursor: pointer;
padding: 30px 0;
border: 1px solid #ccc;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
}

.mediaFileMissingSource{
    font-size:80px; 
    color: #9c2626;
}

.inlineHeader{
    display:flex;
}

.inlineHeader a{
    margin-left: 5px;
}

#btnCancelChangeMediaType {
    float: right;
    padding-right: 15px;
}

body {
	position:relative;
}

.mandatory-fields-text {
	margin-bottom:80px;
}

.article-footer {
	bottom: 0;
	left: 0;
	position: fixed;
	width: 100%;
    z-index:1000;
}

.article-footer.static {
	position:absolute;
	bottom: 199px;
}

.article-footer .container {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.article-footer .container-inner {
	padding:1.8rem;
}

.article-footer .form-buttons {
	box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.27);
}

.multi-delete--disabled {
    opacity:0.2;
}

.multi-delete--disabled:hover,
.multi-delete--disabled:focus,
.multi-delete--disabled:focus:hover {
    background: #fff;
    color: #0053a0;
}

.button.open-popup:focus {
    outline: solid 3px rgba(0, 83, 160, 0.19);
}
.repeatable-values {
    margin-top: 20px;
}