/* -------------------------------------------- */
/* Transity: Contracts */
/* Version: 2.30 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: SHARED COMPONENT DESIGN */
/* Design Scope: Codebox */
/* !-------------------------------------------- */

/* !======================================================================================== */
/* !FONT DECLARATIONS: Font family Cooper Hewitt from FontSquirrel */
/* !======================================================================================== */

@font-face{ 
	font-family: 'Cooper Hewitt';
	src: url('./fonts/cooperhewitt-light-webfont.eot');
	src: url('./fonts/cooperhewitt-light-webfont.eot?#iefix') format('embedded-opentype'),
	     url('./fonts/cooperhewitt-light-webfont.woff') format('woff'),
	     url('./fonts/cooperhewitt-light-webfont.ttf') format('truetype'),
	     url('./fonts/cooperhewitt-light-webfont.svg#webfont') format('svg');
font-weight: normal;
}

@font-face{ 
	font-family: 'Cooper Hewitt';
	src: url('./fonts/cooperhewitt-medium-webfont.eot');
	src: url('./fonts/cooperhewitt-medium-webfont.eot?#iefix') format('embedded-opentype'),
	     url('./fonts/cooperhewitt-medium-webfont.woff') format('woff'),
	     url('./fonts/cooperhewitt-medium-webfont.ttf') format('truetype'),
	     url('./fonts/cooperhewitt-medium-webfont.svg#webfont') format('svg');
font-weight: bold;
}

/* !======================================================================================== */
/* !SUBSTANCE DEFINITIONS: Elements shared across different actors */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !COMPONENT: Inspector actions */
/* !-------------------------------------------- */

/* --- Mode switchers */
.actor .inspector-actions .molecule {
margin-bottom: 5px;
text-align: center;
width: 100%;
overflow: hidden;
position: relative;
-webkit-transition: right 2s ease;
-moz-transition: right 2s ease;
-ms-transition: right 2s ease;
transition: right 2s ease;
}

.actor .inspector-actions .action {
/* background-color set in actors.css */
border-left: 8px solid transparent;
display: block;
height: 100%;
width: 100%;
font-size: 80%;
color: #4CA2A2;
padding: 50px 0 5px 0;
-webkit-hyphens: auto;
-webkit-transition: background 1s ease, border 1s ease;
-moz-hyphens: auto;
-moz-transition: background 1s ease, border 1s ease;
-ms-hyphens: auto;
-ms-transition: background 1s ease, border 1s ease;
hyphens: auto;
transition: background 1s ease, border 1s ease;
}

.actor .inspector-actions .action:before {
background: transparent url("./img/sprite_icons_editors.svg") 0 0 no-repeat;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
}

.actor .inspector-actions .action:hover,
.actor .inspector-actions .action-state-active {
/* background-color & border-color set in actors.css */
-webkit-transition: background 1s ease, border 1s ease;
-moz-transition: background 1s ease, border 1s ease;
-ms-transition: background 1s ease, border 1s ease;
transition: background 1s ease, border 1s ease;
}

/* --- Close button */
.actor .inspector-actions .action-close {
position: absolute;
top: -75px; /* assumes top: -100px for the .inspector-actions container, set in actors.css */
right: 0;
height: 50px;
}

.actor .inspector-actions .action-close .action:before {
display: none;
}

.actor .inspector-actions .action-close .action, 
.actor .inspector-actions .action-close .action:hover {
border: none;
}

.actor .inspector-actions .action-close .action {
background: #fff url("./img/sprite_buttons_action.svg") center -104px no-repeat;
color: #000;
text-indent: -1000em;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .inspector-actions .action-close .action:hover {
background-color: #EFE5CB;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}


/* !-------------------------------------------- */
/* !COMPONENT: Editor subnavigation */
/* !-------------------------------------------- */

.actor .editor-choices .molecule {
margin-bottom: 5px;
position: relative;
}

/* --- Prepare for adding icons via actor-related CSS */
.actor .editor-choices .action {
border: 1px solid transparent;
display: block;
height: 100%;
width: 100%;
padding: 5px 5px 5px 35px;
color: #000;
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

/* Colors are for contracts, may be overridden by actor-related CSS */
.actor .editor-choices .action:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 100%;
background: #80BCBC;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

.actor .editor-choices .action-state-active, 
.actor .editor-choices .action:hover {
border-color: #B2D7D7;
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
} 

.actor .editor-choices .action-state-active {
font-weight: bold;
}

.actor .editor-choices .action-state-active:before {
background: #007A7A;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

/* --- Minor options which are depending on a parent */
.actor .editor-choices .molecule.choice-minor {
margin-left: 10px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Monetary amounts */
/* !Deprecated for some time */
/* !-------------------------------------------- */

.actor .result-amount {
font-weight: bold;
font-size: 120%;
margin-bottom: 5px;
}

.actor .result-amount:before {
content: "x";
display: inline-block;
border: 1px solid #000;
margin-right: 5px;
padding: 0 5px 0 5px;
text-align: center;
width: 15px;
font-weight: normal;
}

.actor .amount-incoming:before {
content: "+";
}

.actor .amount-outgoing:before {
content: "–";
}

.actor .amount-balance:before {
content: "=";
}

.actor .amount-estimate:before {
content: "~";
}

.actor .amount-deviation:before {
content: "+-";
}

/* !-------------------------------------------- */
/* !COMPONENT: Value origins */
/* !-------------------------------------------- */

.actor .app-content-system {
background-color: rgba(255,255,255,0.4);
}

.actor .app-content-user {
}

.actor input.app-content-system, 
.actor textarea.app-content-system {
background-color: #f2f2f2;
}

.actor input.app-content-user {
}

/* !-------------------------------------------- */
/* !COMPONENT: File lists */
/* !-------------------------------------------- */

/* --- File box with download link */
.actor .file-item {
background: #fff;
border-left: 2px solid #fff;
float: left;
width: calc(50% - 5px);
margin: 0 5px 5px 0;
font-size: 80%;
height: 30px;
overflow: hidden;
position: relative;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .file-item.item-overridden {
border-left: 2px solid #003672;
}

.actor .file-item:last-child {
margin-right: 0;
}

.actor .file-item:before {
background: #fff url("./img/sprite_buttons_action.svg") 0 -286px no-repeat;
background-size: 30px;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 30px;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .file-item:hover, 
.actor .file-item:hover:before {
background-color: #EFE5CB;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .file-item .action-download {
display: block;
width: 100%;
height: 100%;
color: #000;
}

/* --- Title of file's meaning */
.actor .file-item .file-title {
font-weight: bold;
word-break: break-all;
position: absolute;
top: 5px;
left: 0;
padding-left: 30px;
width: 100%;
height: 25px;
overflow: hidden;
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
transition: top 0.5s ease;
}

.actor .file-item:hover .file-title {
top: -50px;
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
transition: top 0.5s ease;
}

/* --- Actual file name */
.actor .file-item .file-object {
background: transparent url("./img/icon_file.svg") 30px 1px no-repeat;
background-size: 18px;
word-break: break-all;
position: absolute;
top: 50px;
left: 0;
padding-left: 50px;
width: 100%;
height: 25px;
overflow: hidden;
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
transition: top 0.5s ease;
}

.actor .file-item:hover .file-object {
top: 5px;
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
transition: top 0.5s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Form actions */
/* !-------------------------------------------- */

.actor .editor-actions .action-state-active {
background: #ccc;
}

.actor .editor-actions .molecule {
font-weight: bold;
height: 50px;
margin-bottom: 10px;
}

.actor .editor-actions .action {
background: #fff url("./img/sprite_buttons_action.svg") center 0 no-repeat;
display: block;
height: 100%;
width: 100%;
padding: 10px;
color: #000;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-actions .action:hover {
background-color: #EFE5CB;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-actions .action-cancel:hover {
background-color: #f1f1f1;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-actions .action-delete:hover, 
.actor .editor-actions .action-protected-delete .action-confirm:hover {
background-color: #DBB6B5;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

/* --- Assign icons to action buttons */
.actor .editor-actions .action-submit-final, 
.actor .editor-actions .action-commented-submit .action-confirm {
background-position: center 0;
}
.actor .editor-actions .action-cancel {
background-position: center -360px;
}
.actor .editor-actions .action-export {
background-position: center -514px;
}
.actor .editor-actions .action-add, 
.actor .editor-actions .action-forked-add .action-add-new {
background-position: center -308px;
}
.actor .editor-actions .action-forked-add .action-add-inherit {
background-position: center -410px;
}
.actor .editor-actions .action-submit-test {
background-position: center -154px;
}
.actor .editor-actions .action-back, 
.actor .editor-actions .action-edit {
background-position: center -206px;
}
.actor .editor-actions .action-copy {
background-position: center -774px;
}
.actor .editor-actions .action-delete, 
.actor .editor-actions .action-protected-delete .action-confirm {
background-position: center -257px;
}

/* --- Two-step deletion procedure, forked object addition, commented submit */
/* Setting up the wrapper and trigger button */
.actor .editor-actions .action-commented-submit, 
.actor .editor-actions .action-commented-submit .action-submit-final, 
.actor .editor-actions .action-forked-add, 
.actor .editor-actions .action-forked-add .action-add, 
.actor .editor-actions .action-protected-delete, 
.actor .editor-actions .action-protected-delete .action-delete {
position: relative;
}

/* Put the cancellation buttons first */
.actor .editor-actions .action-commented-submit .action-cancel, 
.actor .editor-actions .action-forked-add .action-cancel, 
.actor .editor-actions .action-protected-delete .action-cancel {
position: absolute;
top: 0;
left: 200%;
width: 100%;
z-index: 50;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.actor.expression-modal.modal-commented-submit .editor-actions .action-commented-submit .action-cancel, 
.actor.expression-modal.modal-forked-add .editor-actions .action-forked-add .action-cancel, 
.actor.expression-modal.modal-protected-delete .editor-actions .action-protected-delete .action-cancel {
left: calc(-100% - 10px);
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

/* Put the actual confirmation action second */
.actor .editor-actions .action-commented-submit .action-confirm, 
.actor .editor-actions .action-forked-add .action-add-new, 
.actor .editor-actions .action-protected-delete .action-confirm {
position: absolute;
top: 0;
left: 100%;
width: 200%;
z-index: 50;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.actor.expression-modal.modal-commented-submit .editor-actions .action-commented-submit .action-confirm, 
.actor.expression-modal.modal-forked-add .editor-actions .action-forked-add .action-add-new, 
.actor.expression-modal.modal-protected-delete .editor-actions .action-protected-delete .action-confirm {
left: calc(-300% - 20px);
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

/* Put a second confirmation option to last if existing */
.actor .editor-actions .action-commented-submit .action-comment-container, 
.actor .editor-actions .action-forked-add .action-add-inherit {
position: absolute;
top: 0;
left: 300%;
width: 200%;
z-index: 50;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.actor.expression-modal.modal-forked-add .editor-actions .action-forked-add .action-add-inherit {
left: calc(-500% - 30px);
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.actor.expression-modal.modal-commented-submit .editor-actions .action-commented-submit .action-comment-container {
    background: #fff;
    width: 500%;
    left: calc(-800% - 30px);
    padding: 2px;
    height: 100%;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.actor.expression-modal.modal-commented-submit .editor-actions .action-commented-submit .action-comment-container textarea {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* !-------------------------------------------- */
/* !COMPONENT: On/Off switch */
/* !-------------------------------------------- */

.actor .action-toggle-switch {
display: block;
width: 60px;
height: 30px;
overflow: hidden;
border: 1px solid #fff;
}

.actor .action-toggle-switch .action {
background: transparent url("./img/sprite_buttons_action.svg") center 0 no-repeat;
background-size: 100%;
display: block;
height: 100%;
width: 29px;
float: left;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .action-toggle-switch .action-switch-off {
background-position: center -304px;
}

.actor .action-toggle-switch .action-switch-on {
background-position: center -332px;
}

.actor .action-toggle-switch .action:hover {
background-color: #EFE5CB;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .action-toggle-switch.switch-state-off .action-switch-off, 
.actor .action-toggle-switch.switch-state-on .action-switch-on {
background-color: #fff;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Field-related actions within forms */
/* !-------------------------------------------- */

/* --- Setup action buttons as linear series */
.actor .editor-subactions .molecule {
font-weight: bold;
margin-right: 10px;
float: left;
position: relative;
padding-left: 25px;
height: 25px;
}

.actor .editor-subactions .action {
background: #fff;
display: block;
height: 100%;
width: auto;
padding: 5px 5px 5px 5px;
font-size: 80%;
color: #000;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-subactions .action:before {
background: #fff url("./img/sprite_buttons_action.svg") center 0 no-repeat;
background-size: 100%;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 25px;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-subactions .action:hover:before, 
.actor .editor-subactions .action:hover {
background-color: #EFE5CB;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

.actor .editor-subactions .action-delete:hover:before, 
.actor .editor-subactions .action-delete:hover {
background-color: #DBB6B5;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

/* --- Icons */
.actor .editor-subactions .action-submit-final:before {
background-position: center 0px;
}
.actor .editor-subactions .action-upload:before {
background-position: center -215px;
}
.actor .editor-subactions .action-delete:before {
background-position: center -119px;
}
/* Disabled because so far this is not a sanctioned use case 
.actor .editor-subactions .action-export:before {
background-position: center -239px;
}
*/


/* --- Take care of placements without a wrapping container */
/* Probably deprecated already */
.actor .editor-subactions:after {
content: "";
display: block;
clear: both;
}

.actor * + .editor-subactions {
margin-top: 10px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Form elements */
/* !-------------------------------------------- */

/* --- Separating multiple formparts */
.actor .editor-formpart + .editor-formpart {
margin-top: 20px;
}

.actor .editor-formpart:after {
content: "";
display: block;
clear: both;
}

/* --- Subheadlines for multiple formparts */
.actor .formpart-headline {
background: rgba(0, 0, 0, 0.1);
padding: 5px 0 5px 5px;
}

.actor .formpart-headline + .formpart-label, 
.actor .formpart-headline + .formpart-label + .formpart-input {
border-top-width: 2px;
}

/* --- Basic key/value pair (label + input container) */
.actor .formpart-label {
border-top: 1px solid #fff;
clear: both;
float: left;
width: 30%;
padding: 10px 20px 10px 0;
font-weight: bold;
}

.actor .formpart-input {
border-top: 1px solid #fff;
float: right;
width: 70%;
padding: 10px 0 10px 0;
position: relative;
}

.actor .formpart-input + .formpart-input {
border-top: none;
padding-top: 0;
}

/* --- Mandatory fields */
.actor .formpart-input.input-mandatory:before {
content: "";
position: absolute;
display: block;
height: calc(100% - 20px);
width: 4px;
background: #fff;
left: -10px;
top: 10px;
}

.actor .formpart-input + .formpart-input.input-mandatory:before {
height: calc(100% - 10px);
top: 0;
}

/* --- Field labels (side-by-side radios + checkboxes, inline multi-fields) */
.actor .formpart-input label {
display: block;
margin-bottom: 10px;
}

.actor .formpart-input label + input {
margin-top: -5px;
}

/* --- Particular form elements */
.actor .formpart-input select, 
.actor .formpart-input input, 
.actor .formpart-input textarea {
margin: 0;
width: 100%;
}

.actor .formpart-input input[type="checkbox"], 
.actor .formpart-input input[type="radio"] { 
width: auto;
margin-right: 10px;
}

/* Labels for checkboxes and radios */
.actor .formpart-input input + label {
display: inline-block;
}

.actor .formpart-input input[checked="checked"] + label {
font-weight: bold;
}

/* --- Field-related comments and messages */
.actor .formpart-input .input-comment {
margin-top: 10px;
}

.actor .formpart-input .input-comment:first-child {
margin-top: 0;
}

.actor .formpart-label.label-message {
}

.actor .formpart-input .input-message {
position: relative;
padding-left: 15px;
}

.actor .formpart-input .input-message:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
}

.actor .formpart-input .message-level-error:before {
background: #BC8E0F;
}

.actor .formpart-input .message-level-error {
font-weight: bold;
}

.actor .formpart-input .message-level-info:before {
background: #fff;
}

.actor .formpart-input .message-level-info {
}

/* !-------------------------------------------- */
/* !COMPONENT: Multi-value form input entry */
/* !e.g. for line categorization */
/* !-------------------------------------------- */

/* --- In case we have a comment _before_ the legend */
.actor .formpart-input .input-comment + .categorization-legend {
    margin-top: 10px;
}

/* --- Legend for provided input fields per item */
.actor .formpart-input .categorization-legend.category-number-2 {
width: 30%;
}
.actor .formpart-input .categorization-legend.category-number-3 {
width: 50%;
}
.actor .formpart-input .categorization-legend.category-number-4 {
width: 100%;
}
.actor .formpart-input .categorization-legend.category-number-5 {
width: 100%;
}

.actor .formpart-input .categorization-legend:after {
content: "";
display: block;
clear: both;
}

.actor .formpart-input .categorization-legend .atom {
float: left;
padding: 5px;
text-align: center;
font-weight: bold;
}

.actor .formpart-input .categorization-legend.category-number-2 .atom {
width: 50%;
}
.actor .formpart-input .categorization-legend.category-number-3 .atom {
width: 33.3%;
}
.actor .formpart-input .categorization-legend.category-number-4 .atom {
width: 25%;
}
.actor .formpart-input .categorization-legend.category-number-5 .atom {
width: 20%;
}

/* --- Container for line item */
.actor .formpart-input .categorization-item {
margin-bottom: 5px;
position: relative;
border-top: 1px solid #fff;
}

/* --- Input fields array */
.actor .formpart-input .category-number-2 .categorization-choice {
width: 30%;
}
.actor .formpart-input .category-number-3 .categorization-choice {
width: 50%;
}
.actor .formpart-input .category-number-4 .categorization-choice {
width: 100%;
}
.actor .formpart-input .category-number-5 .categorization-choice {
width: 100%;
}

.actor .formpart-input .categorization-choice .atom {
float: left;
text-align: center;
padding: 5px;
position: relative;
}

.actor .formpart-input .category-number-2 .categorization-choice .atom {
width: 50%;
}
.actor .formpart-input .category-number-3 .categorization-choice .atom {
width: 33.3%;
}
.actor .formpart-input .category-number-4 .categorization-choice .atom {
width: 25%;
}
.actor .formpart-input .category-number-5 .categorization-choice .atom {
width: 20%;
}

.actor .formpart-input .categorization-choice.input-array input[checked="checked"]:before {
background: rgba(255,255,255,0.3);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.actor .formpart-input .categorization-choice input {
margin: 0;
display: inline-block;
}

.actor .formpart-input .categorization-choice label {
display: none;
}

/* --- Actual label for one line item */
.actor .formpart-input .categorization-element {
width: 42.86%; /* results in 30% for the entire key/value line */
position: absolute;
padding: 5px 20px 5px 0;
font-weight: bold;
top: 0;
left: -42.86%; /* Move into label column */
}

.actor .formpart-input .item-assigned .categorization-element {
font-weight: normal;
}

.actor .formpart-input .categorization-item:after {
content: "";
display: block;
clear: both;
}

/* !-------------------------------------------- */
/* !COMPONENT: Simple crosslinks */
/* !-------------------------------------------- */

.actor .action-link {
border-bottom: 1px solid #fff;
padding: 5px 0 5px 5px;
margin-bottom: 5px;
display: block;
color: #003672;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

.actor .action-link:before {
content: "→ ";
display: inline-block;
margin-right: 5px;
}

.actor .action-link:hover {
color: #000;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Form overlay blocker for modal dialogs */
/* !-------------------------------------------- */

.actor.expression-modal:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(239,229,203,0.7);
top: 0;
left: 0;
z-index: 10;
-webkit-animation: fade-in 1s ease-in-out forwards;
-moz-animation: fade-in 1s ease-in-out forwards;
-ms-animation: fade-in 1s ease-in-out forwards;
animation: fade-in 1s ease-in-out forwards;
}

@-webkit-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-moz-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-ms-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}


/* !======================================================================================== */
/* !DEVELOPER SECTION: Temporary styles which need to be reviewed and cleaned */
/* !======================================================================================== */