/*/  BASE  ////////////////////////////////////////////////////////////////*/
@font-face {
    font-family: "Work Sans Light";
    src: local("work-sans-300"), url("https://assets.simplicateapp.com/fonts/work-sans-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Work Sans Regular";
    src: local("work-sans-400"), url("https://assets.simplicateapp.com/fonts/work-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Work Sans Medium";
    src: local("work-sans-500"), url("https://assets.simplicateapp.com/fonts/work-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Work Sans Semibold";
    src: local("work-sans-600"), url("https://assets.simplicateapp.com/fonts/work-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    background: #fff;
    color: #595959;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    height: 100%;
    /*     min-width:1024px; */
    position: absolute;

    --main-color-dashboard: #ef3697;
    --main-color-crm: #8f5ba0;
    --main-color-hrm: #ea5a84;
    --main-color-sales: #e74c3c;
    --main-color-projects: #f29c17;
    --main-color-resourceplanner: #f9c700;
    --main-color-hours: #63b34b;
    --main-color-invoicing: #3996d2;
    --main-color-environmentmanagement: #aaa;
    --main-color-insights: #3175d4;
}

img {
    border: none;
}

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    /*     text-rendering: optimizeLegibility; */
}

h1 {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 20px;
    margin: 0 0 10px;
    padding: 0;
    color: #5d5d5d;
}

h2 {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0 0 10px;
    padding: 0;
    color: #5d5d5d;
}

h3 {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 0;
    color: #5d5d5d;
}

h4 {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.0em;
    margin: 0 0 5px;
    padding: 0;
    color: #5d5d5d;
}

p {
    font-size: 1.0em;
    margin: 0 0 10px;
    padding: 0;
    line-height: 1.7em;
}

b, strong {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
}

a {
    font-size: 1.0em;
    margin: 0;
    padding: 0;
    color: #5d5d5d;
    outline: none;
    text-decoration: none;
    -webkit-transition: color 0.15s ease-out;
    -moz-transition: color 0.15s ease-out;
    -ms-transition: color 0.15s ease-out;
    -o-transition: color 0.15s ease-out;
    transition: color 0.15s ease-out;
    outline: none !important;
}

a:hover {
    color: #5d5d5d;
    text-decoration: none;
    outline: none !important;
}


/*
 * dit conflicteert met ckeditor
 *
    ul {margin:0 0 10px 0;padding:0;}
*/
input {
    outline: none !important;
}


/*/  SELECTIONS  ////////////////////////////////////////////////////////////////*/

p::selection,
h1::selection,
h2::selection,
h3::selection,
a::selection,
ul li::selection,
input::selection,
textarea::selection,
strong::selection.
label::selection {
    background: rgba(93, 93, 93, 0.5);
    color: #fff;
}

p::-moz-selection,
h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
a::-moz-selection,
ul li::-moz-selection,
input::-moz-selection,
textarea::-moz-selection,
strong::-moz-selection,
label::-moz-selection {
    background: rgba(93, 93, 93, 0.5);
    color: #fff;
}

p::-webkit-selection,
h1::-webkit-selection,
h2::-webkit-selection,
h3::-webkit-selection,
a::-webkit-selection,
ul li::-webkit-selection,
input::-webkit-selection,
textarea::-webkit-selection,
strong::-webkit-selection,
label::-webkit-selection {
    background: rgba(93, 93, 93, 0.5);
    color: #fff;
}

.clear {
    clear: both;
}

.white {
    color: #FFF;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

/* LOADER */
.smal_loader {
    float: left;
    width: 24px;
    height: 24px;
    background-image: url(/img/ajax-loader.gif);
    margin: 4px;
}

.spinner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    clip: rect(0, 32px, 32px, 16px);
    animation: loader-1-2 1.2s linear infinite;
    box-sizing: border-box;
}

.spinner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    clip: rect(0, 32px, 32px, 16px);
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    animation: loader-1-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }

@keyframes loader-1-1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes loader-1-2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(220deg); }
}
@keyframes loader-1-3 {
    0% { transform: rotate(-140deg) }
    50% { transform: rotate(-160deg) }
    100% { transform: rotate(140deg) }
}

.loader_overlay {
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.3;
	filter:alpha(opacity=30);
	z-index:9998;
	display:none;
}

.simplicate_loader {
    position:fixed;
    top:50%;
    left:50%;
    margin:-20px 0px 0px -20px;
    height:40px;
    width:40px;
    margin:0 auto;
    animation:loader-1-1 4.8s linear infinite;
    box-sizing: border-box;
    z-index:9999;
    display: none;
}

.iframe .simplicate_loader {
    top: calc(50% - 56px); /** Height of header, 112, divided by 2 */
    left: calc(50% - 36px); /** Width of menu, 72, divided by 2 */
}

.address .block {
    margin: 0 0 20px 0;
}

.address .block .address_change {
    line-height: 22px;
}

.alignright {
    text-align: right;
}

.simplicate-alert {
    width: 154px;
    height: 148px;
    background-image: url(/img/simplicate-alert.png);
    background-repeat: no-repeat;
    margin-right: 20px;
}

/*/  FORMS  ////////////////////////////////////////////////////////////////*/

form .field {
    margin: 0 0 12px 0;
}

form .field label, form .field p.label {
    display: block;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #000;
    margin: 0 0 3px;
}

form.float .field .webaddress {
    float: left;
}

form .field input[type="text"],
form .field input[type="password"],
form .field input[type="number"],
form .field input[type="file"],
form .field textarea,
form .field select,
.filters input[type="text"] {
    background: #fff;
    border: 1px solid #d5d7d8;
    width: 63%;
    padding: 9px 8px 7px;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0 10px 0 0;
    color: #3b3b3b;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: border-color .3s ease;
    -moz-transition: border-color .3s ease;
    -ms-transition: border-color .3s ease;
    -o-transition: border-color .3s ease;
    transition: border-color .3s ease;
}

form .field input[type="text"]:hover,
form .field input[type="text"]:focus {
    border-color: #a8abae;
}

form .field p.input {
    margin: 0 0 0 0;
    float: left;
    background: #f6f6f6;
    border: 1px solid #e2e2e2;
    padding: 8px;
    color: #484848;
    width: 59%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

form .field input[type="number"],
form .field.multi input[type="text"],
form .field.multi input[type="password"],
form .field.multi select {
    width: 110px;
}

form .field.small input[type="text"],
form .field.small input[type="password"],
form .field.small select {
    width: 110px;
}

form .field input[type="checkbox"] {
    margin: 10px 0px 0px 0px;

}

form .field textarea {
    height: 200px;
    resize: none;
    width: 63%;
}

form .field.small textarea {
    height: 100px;
}

form .field.error input[type="text"],
form .field.error input[type="password"],
form .field.error textarea,
form .field.error select,
input.error,
textarea.error {
    border: 1px solid #f29090 !important;
    /*
        -moz-box-shadow: 0 0 3px #ff0000;
        -webkit-box-shadow: 0 0 3px #ff0000;
        box-shadow: 0 0 3px #ff0000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ff0000')";
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ff0000');
     */
}

form .field.error span.error, form .field div.errorMessage,
form .field.error span.error, form .field div.warningMessage {
    font-size: .9em;
    display: block;
    margin: 0 0 0 30%;
    clear: both;
    position: relative;
    padding-top: 5px;
}

form .field.error span.error, form .field div.errorMessage {
    color: #ee0101;
}

form .field.error span.error, form .field div.warningMessage {
    color: blue;
}

form .field input[type="text"]:focus,
form .field textarea:focus,
form .field select:focus {
    color: #000;
}

form .field.radio-check ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

form .field.radio-check ul li {
    list-style: none;
    margin: 0 0 8px 0;
}

form .field.radio-check ul li label {
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
}

form .field.radio-check.hor ul li {
    float: left;
    margin: 0 20px 0 0;
}

form .buttonfield {
    clear: both;
    margin: 10px 0 0 0;
    background: #f2f2f2;
    padding: 10px;
    overflow: hidden;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

form .buttonfield_blank {
    margin: 0px 0 0 0;
    background: none;
    padding: 0px;
    overflow: hidden;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

form .field .button {
    display: block;
    float: right;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .6);
    color: #5D5D5D;
    padding: 6px 16px;
    cursor: pointer;
    min-width: 100px;
    margin: 0 0 0 12px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}


form .field .button.green {
    border-color: #269B00;
    background-color: rgba(38, 155, 0, 0.7);
    color: #FFF;
}

form .field .button.green:hover {
    background-color: rgba(38, 155, 0, 1);
    color: #FFF;
}

form .field .button.blue {
    color: #fff;
    background-color: #4098D1;
    border-color: #4098D1;
    text-decoration: none;
}

form .field .button.blue:hover {
    color: #fff;
    background-color: #3379A7;
    border-color: #3379A7;
    text-decoration: none;
}

form .buttonfield_blank .button {
    float: left;
}

form .field .button.sec {
    background: #dfdfdf;
    color: #5D5D5D;
}

form .field .button.sec.inactive {
    color: #fff;
}

form .field .button.sec:hover {
    background: #aaaaaa;
}

form .field .button.bold {
    font-weight: normal;
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
}

form .field .button.big {
    font-size: 1.3em;
    padding: 10px;
}

form .field .button.inactive, form .field .button.inactive:hover {
    color: #bebebe;
    border: 1px solid #bebebe;
    background: #eee;
    cursor: default;
}

form .field .button:hover {
    background-color: rgba(161, 141, 192, 1.0);
    color: #fff;
}

form .field span.helptext {
    font-size: .85em;
}

form .field span.help {
    background: url(/img/icon-help.png) no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 9px;
    cursor: pointer;
    overflow: hidden;
    float: left;
    z-index: 9;
}

form .field span.help:hover {
    overflow: visible;
}

form .field span.help span.helptext {
    border: 1px solid #d2d2d2;
    position: absolute;
    width: 300px;
    z-index: 10;
    left: 10px;
    bottom: 10px;
    padding: 7px 10px;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 3px #d2d2d2;
    -webkit-box-shadow: 0 0 3px #d2d2d2;
    box-shadow: 0 0 3px #d2d2d2;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d2d2d2')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#d2d2d2");
    opacity: 0.0;
    -moz-opacity: 0.0;
    -khtml-opacity: 0.0;
    filter: alpha(opacity=00);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
}

form .field span.help:hover span.helptext {
    opacity: 1.0;
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

form .field span.agenda-icon {
    background: url(/img/icon-agenda.png) no-repeat;
    width: 23px;
    height: 23px;
    display: inline-block;
    margin: 0;
    position: relative;
    top: 6px;
}

form.float .field {
    float: left;
    width: 100%;
    /*overflow:hidden;*/
}

form.float .field label,
form.float .field p.label {
    float: left;
    width: 30%;
    margin: 10px 0 0 0;
}

form.float .field label + label,
form.float .field p.label + label {
    width: initial;
}

form.float .field input[type="text"], form.float .field textarea, form.float .field select, form.float .field input[type="number"] {
    float: left;
}

form.float .field input[type="text"]:focus,
form.float .field textarea:focus,
form.float .field select:focus,
form.float .field input[type="number"]:focus {
    border-color: #a8abae;
}

form.float .field textarea {
    position: relative;
    width: 63%;
}

#content {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

#content .content-block {
    margin: 120px auto;
    width: 600px;
    border: 1px solid #e8e8e8;
    padding: 15px;
    background-color: #F9F9F9;
    border-radius: 7px;
}

#content .main form.float .col {
    padding: 0px 0px;
}

#content .main form.float .row {
    margin: 0px;
}


/*/  STATIC FORMS  ////////////////////////////////////////////////////////////////*/

.static .field {
    margin: 0;
    overflow: hidden;
}

.static .field label {
    float: left;
    line-height: 20px;
    margin: 0;
    color: #000;
    width: 30%;
    display: block;
    font-weight: normal;
    font-family: "Work Sans Medium", Helvetica, Arial, sans-serif;
}

.static .field p.input {
    float: left;
    line-height: 20px;
    margin: 0;
    margin-right: 5px;
}


/*/  HEADER  ////////////////////////////////////////////////////////////////*/

.header {
    height: 56px;
    position: fixed;
    top: 0;
    left: 72px;
    min-width: 540px;
    width: -moz-calc(100% - 72px);
    width: -webkit-calc(100% - 72px);
    width: -o-calc(100% - 72px);
    width: calc(100% - 72px);
    background: #fff;
    z-index: 1;
}

.header button.buy_now_button {
    margin: 10px 8px 0 8px;

    background-color: #2BCB00 !important;
}

.header button.buy_now_button:hover {
    background-color: #28BC00 !important;
}


.header .breadcrumbs {
    max-width:
}


.header .breadcrumbs span {
    color: rgba(255, 255, 255, 1.0);
    height: 56px;
    line-height: 55px;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: block;
    float: left;
    max-width: 650px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .breadcrumbs span.current {
    padding: 0 40px 0 30px;
    font-weight: normal;
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
}

.header .breadcrumbs span:last-child a {
    background-image: none;
    font-weight: normal;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    color: #fff;
}

.header .breadcrumbs span a {
    padding: 0 40px 0 30px;
    background: url(/img/breadcrumb-arrow.png) no-repeat right -4px;
    display: block;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
    color: rgba(255, 255, 255, .6);
    height: 56px;
}

.header .breadcrumbs span a:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, 1.0);
}


.header-right {
    /* 	float: right; */
    position: absolute;
    top: 0px;
    right: 0px;
    height: 56px;
    width: auto;
}

.header-right .version {
    float: right;
    text-align: center;
    height: 56px;
    line-height: 56px;
    color: #fff;
    font-size: 1.0em;
    word-spacing: 5px;
    text-align: right;
    margin-right: 5px;
}

@keyframes border-pulsate {
    0% {
        border-color: rgba(39, 174, 96, 1);
    }
    8% {
        border-color: rgba(39, 174, 96, 0);
    }
    16% {
        border-color: rgba(230, 126, 34, 1);
    }
    24% {
        border-color: rgba(230, 126, 34, 0);
    }
    32% {
        border-color: rgba(231, 76, 60, 1);
    }
    40% {
        border-color: rgba(231, 76, 60, 0);
    }
    48% {
        border-color: rgba(52, 152, 219, 1);
    }
    56% {
        border-color: rgba(52, 152, 219, 0);
    }
    64% {
        border-color: rgba(155, 89, 182, 1);
    }
    72% {
        border-color: rgba(155, 89, 182, 0);
    }
    80% {
        border-color: rgba(244, 90, 134, 1);
    }
    86% {
        border-color: rgba(244, 90, 134, 0);
    }
    94% {
        border-color: rgba(39, 174, 96, 1);
    }
    100% {
        border-color: rgba(39, 174, 96, 1);
    }
}

.header-right .version .env-blocked {
    margin: 4px auto;
    border: 4px solid #e33b2a;
    padding: 2px;
    animation: border-pulsate 6s infinite;
}

.header-right .export {
    display: none;
    position: relative;
    float: right;
    text-align: center;
    height: 56px;
    width: 56px;
    line-height: 56px;
    color: #FFF;
}

.header-right .export.active {
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.header-right .export.active:hover {
    background-color: rgba(0, 0, 0, .3)
}

.header-right .export a {
    cursor: pointer;
}

.header-right .export a span {
    color: #FFFFFF;
    opacity: .9;
    font-size: 1.7em;
    height: 56px;
    width: 56px;
    line-height: 56px;
}

.header-right .export a:hover span {
    opacity: 1;
}

.header-right .export .count {
    position: absolute;
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    top: 6px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    color: #FFFFFF;
    line-height: 19px;
    font-size: 11px;
    background-color: rgba(231, 76, 60, .9);
}

.header-right .export .count.progress {
    color: rgba(255, 255, 255, .8);;
    font-size: 11px;
    line-height: 22px;
    text-align: center;
}

.header-right .export .count.progress:before {
    font-family: "icomoon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e654";
}

.header-right .help {
    float: right;
    width: 56px;
    height: 56px;
    line-height: 56px;
    display: inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);

}

.header-right .help a {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    opacity: .8;
    text-decoration: none;
    text-indent: -99999px;
    overflow: hidden;
    display: block;
    background: url(/img/help.png) no-repeat center center;
    background-size: 40%;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
    cursor: pointer;
}

.header-right .help a:active,
.header-right .help a:focus,
.header-right .help a:hover {
    background-color: rgba(0, 0, 0, .3)
}


/* !account menu */

.header-right .account {
    z-index: 99999;
    /* background:url(/img/icon-account.png) no-repeat 0 0; */
    padding: 0;
    float: right;
    margin: 0;
    width: 56px;
    height: 56px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    background: none;
}

.header .account:hover {
    background-color: rgba(0, 0, 0, .2);
}


.header-right .account {
    z-index: 99999;
    /* background:url(/img/icon-account.png) no-repeat 0 0; */
    padding: 0;
    float: right;
    margin: 0;
    width: 56px;
    height: 56px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.header .account .picture:hover {
    filter: brightness(60%);
}

.header .account ul {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 56px;
    right: 0px;
    display: none;
}

.dossier_right.extended_filter {
    background: #f7f7f7;
    border-left: 1px solid #e5e5e5;
    padding: 16px 24px;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    overflow: auto;
    width: 320px;
}

.header .account ul li {
    position: relative;
    line-height: 54px;
    color: #fff;
    list-style: none;
    background: #595959;
    white-space: nowrap;
}

.header .account ul li a {
    color: #fff;
    line-height: 54px;
    display: block;
    padding: 0 74px 0 20px;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.header .account ul li:first-child a {
    border-top: none;
}

.header .account ul li a:hover {
    background: rgba(0, 0, 0, 0.4);
}

.header .account ul li a span {
    width: 56px;
    height: 54px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: #3b3b3b;
}

.header .account ul li a.my-account span {
    background: url(/img/icon-user-sm.png) no-repeat center center;
}

.header .account ul li a.help span {
    background: url(/img/icon-help-sm.png) no-repeat center center;
}

.header .account ul li a.logout span {
    background: url(/img/icon-logoff.png) no-repeat center center;
}

.header .account ul li a.my-password span {
    background: url(/img/password-icon-white.png) no-repeat center center;
}


.header .account span.account_arrow_container {
    height: 56px;
    width: 20px;
    display: inline-block;
    float: left;
    padding-top: 30px;
    padding-left: 4px;

}

.header .account span.account_arrow {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
}

.header .account .picture {
    float: left
}


/* !elevio */

.elevio-menu-right {
    display: none;
}

.elevio-menu-right.expanded {
    display: block;
}

input.elevio-search div {
    height: 40px !important;
}


.header .search {
    z-index: 9999;
    background: url(/img/icon-search.png) no-repeat 0 0;
    position: relative;
    float: right;
    margin: 0;
    width: 56px;
    height: 56px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.header .search:hover {
    background-color: #595959;
}

.header .search form {
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
    width: 0px;
    opacity: 0.0;
    -moz-opacity: 0.0;
    -khtml-opacity: 0.0;
    filter: alpha(opacity=00);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.header .search:hover form {
    width: 288px;
    opacity: 1.0;
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.header .search form .field {
    margin: 0;
    height: 56px;
    overflow: hidden;
}

.header .search form .field input[type="text"] {
    border: none;
    background: #595959;
    color: #fff;
    height: 56px;
    width: 231px;
    line-height: 56px;
    margin: 0;
    float: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.header .search form .field button {
    position: relative;
    background: #595959 url(/img/icon-search.png) no-repeat;
    width: 56px;
    height: 56px;
    text-indent: -9999px;
    float: left;
    padding: 0;
    min-width: inherit;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-top: none;
    border-right: none;
    border-bottom: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-left: 0;
}

.header .search form .field button:hover {
    background-color: #3b3b3b;
}


/*/  SUBNAV  ////////////////////////////////////////////////////////////////*/

.subnav {
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #FFFFFF;
    border-bottom: 1px solid #e5e5e5;

}

.subnav ul.tabs {
    padding: 0;
    margin: 0 0 0 32px;
    height: 48px;
}

.subnav ul.tabs li {
    list-style: none;
    float: left;
    height: 48px;
}

.subnav ul.tabs li a {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #595959;
    padding: 0px;
    margin: 0 12px;
    outline: none;
    color: #3b3b3b;
    text-decoration: none;
}

.subnav ul.tabs li.document a {
    border: 1px dotted #d0d0d0;
    border-bottom: none;
    background-color: #E8E8E8;
}

.subnav ul.tabs li.document a.close, .subnav ul.tabs li.document a.close:hover,
.subnav ul.tabs li.document a.active.close, .subnav ul.tabs li.document a.active.close:hover {
    float: right;
    padding: 0px;
    margin: -50px 5px 0px 0px;
    border: 0px;
    background: none;
    position: relative;
}

.subnav ul.tabs li.document {
    margin: 0px 2px;
}

.subnav ul.tabs li a:hover {

}

.subnav ul.tabs li a.active, .subnav ul.tabs li a.active:hover {
    font-weight: normal;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
}

.tabs .actions {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 9px;
    margin-right: 7px;
    display: none;
    z-index: 1000;
}

.tabs .actions.active {
    display: block;
}


button.add.button:hover, form .field button.add.button:hover {
    background-color: #478F47;
    color: #FFFFFF;
}

button.add.button, form .field button.add.button .icon-add {
    margin-right: 5px;
    top: 1px;
    position: relative;
}

.subnav .actions .masterEdit {
    border-color: #FF7E00;
    background: url(/img/icon-edit.png) no-repeat;
    background-color: #FF7E00;
}

.subnav .actions .masterEdit:hover {
    color: #FF7E00;
}


.subnav .actions form .buttonfield {
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    clear: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.row.tab {
    display: none;
}

.row.tab.active {
    display: block;
}

.underactions {
    background: #f7f7f7;
    border-top: 1px solid #d0d0d0;
    height: 56px;
    position: fixed;
    left: 0px;
    z-index: 199;
    bottom: 0px;
    width: 100%;
    padding: 18px 0 0 0;
}

.underactions .actions form .buttonfield {
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    clear: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.underactions .actions {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    width: 600px;
}

.underactions .actions.active {
    display: block;
}

.underactions .actions a, .underactions .actions button {
    float: right;
    display: block;
    text-indent: 0px;
    margin: 11px 13px 0 0;
    padding: 0 20px;
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 32px;
    width: auto;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .6);
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    -webkit-transition: background 0.15s ease;
    -moz-transition: background 0.15s ease;
    -ms-transition: background 0.15s ease;
    -o-transition: background 0.15s ease;
    transition: background 0.15s ease;
}


/* masterReset */
.underactions .actions .masterReset.active,
.underactions .actions .masterReset,
.underactions .actions .masterFlush.active,
.underactions .actions .masterFlush {
    font-weight: 500;
    border: transparent;
    background: transparent;
    color: #595959;
}

.underactions .actions .masterReset:hover,
.underactions .actions .masterReset.active:hover,
.underactions .actions .masterFlush:hover,
.underactions .actions .masterFlush.active:hover {
    border: transparent;
    background: transparent;
    color: #595959;
}

/* masterSave     */

.underactions .actions .masterSave {
    font-weight: 500;
    border-color: #63b349;
    background: #63b349;
    color: #FFF;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.underactions .actions .masterSave.active {
    border-color: #63b349;
    background: #63b349;
    color: #FFF;
    opacity: 1;
    filter: alpha(opacity=1);
}

.underactions .actions .masterSave.active:hover {
    border-color: #54983f;
    background: #54983f;
    color: #FFF;
    opacity: 1;
    filter: alpha(opacity=1);
}

/* masterBack */

.underactions .actions .masterBack {
    font-weight: 500;
    border-color: #3996d2;
    background: #3996d2;
    color: #FFFFFF;
    opacity: 0.3;
    filter: alpha(opacity=30);
}


.underactions .actions .masterBack.active {
    border-color: #3996d2;
    background: #3996d2;
    opacity: 1;
    filter: alpha(opacity=1);
}


.underactions .actions .masterBack.active:hover {
    border-color: #2a80b8;
    background: #2a80b8;
    color: #FFF;
    opacity: 1;
    filter: alpha(opacity=1);
}

/*/  CONTENT > MAIN  ////////////////////////////////////////////////////////////////*/

#content {
    position: relative;
    top: 0;
}

#content.nav-open {
    transform: translateX(175px);
}

#content .main {
    margin: 15px;
    margin-top: 24px;
    margin-bottom: 36px;
}


.secondary-root-container .subnav {
    top: 56px;
    left: 72px;
}

.secondary-root-container #main_content {
    margin-top: 65px;
}


#content .main .row {
    clear: both;
    height: 40px;
}

#content .main .row .row {
    margin: -15px;
    /*overflow:hidden;*/
}

#content .main .col {
    float: left;
    padding: 12px;
}

#content .main .col .col {
}

#content .main .col .col .col {
}

#content .main .size1of2 {
    width: 50%;
}

#content .main .size2of2 {
    width: 100%;
}

#content .main .size1of3 {
    width: 33.33%;
}

#content .main .size2of3 {
    width: 66.66%;
}

#content .main .size3of3 {
    width: 100%;
}

#content .main .size1of4 {
    width: 25%;
}

#content .main .size2of4 {
    width: 50%;
}

#content .main .size3of4 {
    width: 75%;
}

#content .main .size4of4 {
    width: 100%;
}

#content .main .size1of5 {
    width: 20%;
}

#content .main .size2of5 {
    width: 40%;
}

#content .main .size3of5 {
    width: 60%;
}

#content .main .size4of5 {
    width: 80%;
}

#content .main .size5of5 {
    width: 100%;
}

#content .main .full_width_minus_side_panel {
    width: calc(100% - 340px);
}


#content .main .block {
    background: #fff;
    /* overflow:hidden;*/
    position: relative;
}


#content .main .page_content_tabs {
    text-align: left;
    width: 100%;
    margin-bottom: 40px;
    font-family: "Work Sans Medium", Helvetica, Arial, sans-serif;
}

#content .main .page_content_tabs .ContentTabs_tab {
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #D5D7D8;
    color: #3B3B3B;
}

#content .main .page_content_tabs .ContentTabs_tab:not(.active) {
    background-color: #FFFFFF;
}

#content .main .page_content_tabs .ContentTabs_tab .nav_arrow,
#content .main .page_content_tabs .ContentTabs_tab .nav_arrow {
    display: none;
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    border-top: none;
    border-left: none;
    background-color: #FFF;
}

#content .main .page_content_tabs .ContentTabs_tab.active .nav_arrow {
    display: block;
    background-color: #999;
}

#content .main .page_content_tabs .ContentTabs_tab:hover:not(.active) {
    background: #FAFAFA;
    color: #3B3B3B;
}

#content .main .page_content_tabs .ContentTabs_tab:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-right: none;
}

#content .main .page_content_tabs .ContentTabs_tab.active:first-child {
    border-right: 1px solid var(--primary-light);
    margin-right: -1px;
    z-index: 1;
}

#content .main .page_content_tabs .ContentTabs_tab.active:last-child {
    border-left: 1px solid var(--primary-light);
    margin-left: -1px;
}

#content .main .page_content_tabs .ContentTabs_tab:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    border-left: none;
}

#content .main .page_content_tabs .ContentTabs_tab:hover,
#content .main .page_content_tabs .ContentTabs_tab.active {
    background-color: #FFFFFF;
    color: #3b3b3b;
    cursor: pointer;
}

#content .main .page_content_content .ContentTabs_content {
    display: none;
}

#content .main .page_content_content .ContentTabs_content.active {
    display: block;
}

#content .main .dashboardblocks .block {
    padding: 0;
}

.moduleblock.crm-small:after,
.moduleblock.hrm-small:after,
.moduleblock.acquisition-small:after,
.moduleblock.projects-small:after,
.moduleblock.subscriptions-small:after,
.moduleblock.hours-small:after,
.moduleblock.invoices-small:after,
.moduleblock.environmentmanagement-small:after,
.moduleblock.product-small:after,
.moduleblock.financials-small:after {
    content: "";
    display: table;
    clear: both;
}

.moduleblock.crm-small, .moduleblock.crm-small a {
    color: #8f5ba0 !important;
}

.moduleblock.hrm-small, .moduleblock.hrm-small a {
    color: #f45a86 !important;
}

.moduleblock.acquisition-small, .moduleblock.acquisition-small a {
    color: #e33b2a !important;
}

.moduleblock.projects-small, .moduleblock.projects-small a {
    color: #f29c17 !important;
}

.moduleblock.subscriptions-small, .moduleblock.subscriptions-small a {
    color: #f1b30f !important;
}

.moduleblock.hours-small, .moduleblock.hours-small a {
    color: #63b349 !important;
}

.moduleblock.invoices-small, .moduleblock.invoices-small a {
    color: #3996d2 !important;
}

.moduleblock.environmentmanagement-small,
.moduleblock.environmentmanagement-small a,
.moduleblock.product-small, .moduleblock.product-small a {
    color: #838383 !important;
}

.moduleblock.financials-small, .moduleblock.financials-small a {
    color: #5cb7b1 !important;
}

#content .main .dashboardblocks .product-block {
    background: none;
}

#content .main .dashboardblocks .block .heading {
    margin: 0 0 0px 0;
    padding: 0px;
}

#content .main .dashboardblocks .block .heading h1 {
    padding: 7px 16px;
    line-height: 25px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#content .main .dashboardblocks .block .heading h1 * {
    display: inline-block;
    vertical-align: middle;
}

#content .main .dashboardblocks .block .heading h1 div[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    font-size: 25px;
    margin-right: 5px;
}

#content .main .dashboardblocks .block .heading h1 div.icon-simplicate {
    background-image: url("/img/simplicate-logo-s-nocircle.png");
    width: 25px;
    height: 25px;
    background-size: 25px;
    background-repeat: no-repeat;
}

#content .main .dashboardblocks .block .heading h1 div.icon-resourceplanner {
    background-image: url("/img/icon-planning.svg");
    width: 25px;
    height: 25px;
    background-size: 25px;
    background-repeat: no-repeat;
}

#content .main .dashboardblocks .block {
    --block-heading-color: var(--main-color-environmentmanagement);
}

#content .main .dashboardblocks .crm-block {
    --block-heading-color: var(--main-color-crm);
}

#content .main .dashboardblocks .hrm-block {
    --block-heading-color: var(--main-color-hrm);
}

#content .main .dashboardblocks .acquisition-block {
    --block-heading-color: var(--main-color-sales);
}

#content .main .dashboardblocks .projects-block {
    --block-heading-color: var(--main-color-projects);
}

#content .main .dashboardblocks .hours-block {
    --block-heading-color: var(--main-color-hours);
}

#content .main .dashboardblocks .invoices-block {
    --block-heading-color: var(--main-color-invoicing);
}

#content .main .dashboardblocks .resourceplanner-block {
    --block-heading-color: var(--main-color-resourceplanner);
}

#content .main .dashboardblocks .insights-block {
    --block-heading-color: var(--main-color-insights);
}

#content .main .dashboardblocks .environmentmanagement-block {
    --block-heading-color: var(--main-color-environmentmanagement);
}

#content .main .dashboardblocks .block ul {
    border-left: 2px solid var(--block-heading-color);
    border-bottom-left-radius: 4px;
}

#content .main .dashboardblocks .block .heading h1 {
    background-color: var(--block-heading-color);
    color: #fff;
    font-size: 14px;
}

#content .main .dashboardblocks ul:not(.selectpicker) {
    padding: 0;
    margin: 0 0 40px;
}

#content .main .dashboardblocks ul:not(.selectpicker) li {
    list-style-type: none;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-left: none;
}

#content .main .dashboardblocks ul:not(.selectpicker) li:hover {
    background-color: #f9f9f9;
}

#content .main .dashboardblocks ul:not(.selectpicker) li:hover:before {
    opacity: 1;
}

#content .main .dashboardblocks ul:not(.selectpicker) li:before {
    font-family: "icomoon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    opacity: .8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e606";
    position: relative;
    float: right;
    margin: 11px 13px 0px 0px;
}

#content .main .dashboardblocks ul:not(.selectpicker) li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#content .main .dashboardblocks ul:not(.selectpicker) li a {
    display: block;
    padding: 10px 13px;
    text-decoration: none;
}

#content .main .dashboardblocks ul:not(.selectpicker) li a:hover {
    text-decoration: none !important;
}

.environmentmanagement #content {
    /*padding-top:60px;*/
}


#content .main .block .heading {
    padding: 0 0 5px 0;
    margin: 0 0 15px 0;
}

#content .main .block .heading h1,
#content .main .block .heading h2,
#content .main .block .heading h3,
#content .main .block .heading h4 {
    margin: 0;
}


/* !buttons */

.button,
.btn {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    display: inline-block;
    padding: 4px 16px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}


.button span.icon-add {
    display: inline-block;
    margin: 2px 4px 0 0;
    float: left;
}

/* !succes */
/* !buttons */

button.add.button, form .field button.add.button,
.btn-success,
.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #11884C;
    border-color: #11884C;
}

/* !buttons */

button.add.button:hover, form .field button.add.button:hover,
.btn-success:hover {
    color: #fff;
    background-color: #0f7b45;
    border-color: #0f7b45;
}

button.button.add:active,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
    color: #fff;
    background-color: #0d683b;
    border-color: #0d683b;
}


button.buttondisabled:hover,
button.buttondisabled[disabled]:hover,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
    color: #fff;
    background-color: #11884C;
    border-color: #11884C;
    cursor: not-allowed;
    filter: alpha(opacity=30);
}

.buy_now_button {
    float: right;
}

/* !primary */

#content a.button.export,
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #3996d2;
    border-color: #3996d2;
    text-decoration: none;
}

#content a.button.export:hover,
.btn-primary:hover {
    color: #fff;
    text-decoration: none;
}


#content a.button.export:active
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #3379A7;
    border-color: #3379A7;
    text-decoration: none;
}


#content a.button.export.disabled:hover,
#content a.button.export[disabled]:hover,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-success.primary.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    color: #fff;
    background-color: #3379A7;
    border-color: #3379A7;
    filter: alpha(opacity=30);
    text-decoration: none;
}


#content a.button.export span {
    margin-top: 1px;
    font-size: 16px;
    float: left;
}


/*
Button remove Danny

button.add.button, form .field button.add.button  {
	border-radius:2px;
	border:1px solid #59B359;
	background-color:#59B359;
	color:#FFF;
	margin-right: 4px;
}
button.button.add:hover,#add_line_button_hours:hover, form.float .field button.add.button:hover {
	background-color:#478F47;
	border-color:#478F47;
}
*/


/*/  CONTENT > Pagination  ////////////////////////////////////////////////////////////////*/

.pagination {
    position: relative;
    clear: both;
    margin: 0;
    background: #f2f2f2;
    padding: 10px;
    overflow: hidden;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination ul {
    padding: 0;
    margin: 0;
    left: 50%;
    position: relative;
    float: left;
}

.pagination ul li {
    float: left;
    list-style: none;
    right: 50%;
    position: relative;
}

.pagination ul li a {
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
}

.pagination ul li a.pag-nav {
    overflow: hidden;
}


.pagination ul li a.pag-nav img {
    width: 22%;
    display: block;
    margin: 9px auto 0;
}

.pagination ul li a:hover {
    background-color: #DEDEDE;
}

.pagination ul li a.active {
    color: #fff;
}

.grid-view {

}

.grid-view .summary {
    margin: 10px 0 0 0;
    color: #999;
}

/*/  CONTENT > Tabel styling  ////////////////////////////////////////////////////////////////*/

table.layout {
    width: 100%;
    border-collapse: collapse;
    border: none;
    clear: both;
}

table.layout.fixed {
    top: 0px;
    position: sticky;
    width: auto;
    display: none;
    border-top: 23px solid #FFF;
    z-index: 49; /** Must be under the React overlay + React profile menu */
}

.secondary-root-container table.layout.fixed {
    top: 49px;
}

table.layout a {
    text-decoration: none;
}

table.layout .check {
    width: 36px;
}

table.layout th {
    text-align: left;
    font-weight: normal;
    font-family: "Work Sans Medium", Helvetica, Arial, sans-serif;
    padding: 12px 7px;
    border-left: none;
    color: #fff;
    white-space: nowrap;
}

table.layout th.resultcount {
    text-align: right;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    padding: 12px 7px;
    border-left: none;
    color: #595959;
    white-space: nowrap;
    border: none !important;
    background-color: #FFF;
!important;
}


table.layout th a {
    display: block;
    padding: 12px 7px;
    margin: -12px -7px;
}

table.layout th a:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.10);
}

table.layout th span.toggle {
    background: url(/img/table-sort.png) no-repeat;
    width: 6px;
    height: 13px;
    float: right;
    display: block;
    margin: 2px 0 0 0;
}

table.layout th span.toggle.up {
    background-position: -6px 0;
}

table.layout th span.toggle.down {
    background-position: -12px 0;
}

table.layout td {
    padding: 15px 7px;
    border-bottom: 1px solid #E0E0E0;
    line-height: 22px;
    position: relative;
}

table.layout td:last-child {
    padding-right: 50px;
}

table.layout.narrow td:last-child,
table.layout.narrow th + th:last-child {
    padding-right: 20px;
    padding-left: 20px;
}

table.layout.narrow td:last-child {
    position: relative;
}

table.layout.narrow.no-padding td:last-child {
    padding-right: 7px;
    position: relative;
}

table.layout.narrow td {
    padding: 12px 6px;
    border-bottom: 1px solid #E0E0E0;
    line-height: 19px;
    word-break: normal;
}

table.layout.narrow tr.noborder td {
    border: none;
}

table.layout.narrow tr.noborder td:hover {
    background: none;
}

table.layout.narrow tr.total td {
    padding: 5px 7px;
    font-weight: normal;
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    text-align: right;
    border-bottom: none;
    line-height: 22px;
}

table.layout tr.total:hover {
    background: none;
}

table.layout tr.ar_module {
    background-color: #F4F4F4;
}

table.layout td .static p {
    margin: 0px;

}

table.layout td input, table.layout td select, table.layout td textarea {
    background: #fff;
    border: 1px solid #e5e5e5;
    width: 98%;
    padding: 8px;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 13px;
    margin: 0 10px 0 0;
    color: #484848;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

table.layout td form input[type="text"] {
    padding: 8px 10px;
    width: 97%;
}

table.layout td form select {
    width: 97%;
}

table.layout.narrow td input, table.layout.narrow td select, table.layout.narrow td textarea {
    padding: 4px;
}

table.layout.narrow td input[type="file"] {
    padding: 0px;
    background: none;
    border: none;
    width: auto;
}

table.layout.narrow td form div.select2-container {
    float: left;
    width: 33%;
    margin: 2px 0px;
}

table.layout.narrow td form .field {
    margin: 0px;
    float: left;
    clear: none;
}

table.layout.narrow td form .field .button {
    float: left;
}

table.layout.narrow tr.refine_button_row td {
    margin: 0px;
    padding: 0px;
    border: none;
}

table.layout.narrow tr.refine_button_row div {
    width: 100%;
    height: 10px;
    cursor: pointer;
    position: relative;
    margin-top: -10px;
}

table.layout.cursor td {
    cursor: pointer;
}

table.layout tr.filters td {
    padding: 10px 7px;
}

table.layout th a, table.layout th a:hover {
    display: block;
    padding: 12px 7px;
    margin: -12px -7px;
    background-position: center right;
    background-repeat: no-repeat;
}

table.layout th a.sort-link {
    background-image: url(/img/table-sort-nor.png);
}

table.layout th a.sort-link.asc {
    background-image: url(/img/table-sort-asc.png);
}

table.layout th a.sort-link.desc {
    background-image: url(/img/table-sort-desc.png);
}

table.layout td a {
}

table.layout td input[type="text"] {
    width: 100%;
    padding: 6px;
}


/*/  CONTENT > HOME ////////////////////////////////////////////////////////////////*/

.home body, .home h1, .home h2, .home h3, .home h4, .home a {
    color: #fff;
}


/*/  DOSIER /////////////////////////////////////////////////////////////////////////*/

.dossier a {
    display: block;
    float: left;
    padding: 0px 15px;
    cursor: pointer;
}

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

.dossierItem span {
    width: 24px;
    height: 24px;
    display: block;
    float: left;
    margin: 2px 10px 0px -5px;
    background-repeat: no-repeat;
}

.dossierItem.log span {
    background-image: url(/img/updated.png);
}

.dossierItem.text span {
    background-image: url(/img/person.png);
}

.dossierItem .text {
    padding: 0px 10px 10px 10px;
    font-size: 12px;
}

.dossier .dossierItem .heading .dossierItemAction {
    color: #FFF;
}


.select2-no-results {
    padding: 5px;
}

.ui-widget {
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

.ui-dialog-content form .field label {
    display: block;
}

.ui-dialog-content form .field select {
}

.ui-dialog-content form .field {
    margin-bottom: 5px;
}

.ui-dialog-content .sdatePicker {
}

.ui-dialog-content .precentage_wrapper {
    float: left;
}


#dossierview a.download {
    display: block;
    width: 300px;
    padding: 5px 0px 5px 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    background-repeat: no-repeat;
    background-position: left center;
    color: #333;
    text-decoration: none;
}

a.download.gif {
    background-image: url(/img/icons/24/gif.png);
}

a.download.pmg {
    background-image: url(/img/icons/24/png.png);
}

a.download.docx {
    background-image: url(/img/icons/24/docx.png);
}

a.download.doc {
    background-image: url(/img/icons/24/doc.png);
}

a.download.pdf {
    background-image: url(/img/icons/24/pdf.png);
}

a.download.txt {
    background-image: url(/img/icons/24/txt.png);
}

a.download.xlsx {
    background-image: url(/img/icons/24/xlsx.png);
}

.info_tooltip {
    display: inline-block;
    width: 20px;
    padding: 5px;
    height: 20px;
    font-size: 16px;

}

.info_tooltip span {
    cursor: pointer;
    color: #CECECE;
}

form .field .info_tooltip span {
    position: relative;
    top: 5px;
}

.subnav .info_tooltip {
    float: left;
    top: 11px;
    position: relative;
    left: -10px;
}

h1 .info_tooltip {
    color: #CECECE;
}

.info_tooltip .popup {
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    display: none;
    position: absolute;
    width: 300px;
    z-index: 1003;
    margin: -30px 0px 0px 30px;
    border: 1px solid #CECECE;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    line-height: 16px;
    background-color: #FFF;
    white-space: normal !important;
}

.info_tooltip .popup .tooltip-arrow {
    border: 1px solid #CECECE;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 10px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    background-color: #FFF;
}

.info_tooltip .popup .tooltip-arrow.right {
    left: -7px;
    border-top: none;
    border-right: none;
}

.info_tooltip .popup .tooltip-arrow.left {
    right: -7px;
    border-bottom: none;
    border-left: none;
}

.info_tooltip .popup .close {
    width: 16px;
    height: 16px;
    position: absolute;
    margin: 0;
    top: -8px;
    right: -8px;
    background-color: #CECECE;
    border-radius: 10.5px;
    color: #FFF;
    font-size: 0.6em;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
}

.info_tooltip .popup .close.left {
    right: auto;
    left: -8px;
}


.tooltip {
    display: block;
    position: absolute;
    z-index: 8888;
    min-width: 100px;
    background: #fff;
    border: 1px solid #c6c6c6;
    padding: 8px;
    color: #484848;
    outline: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    min-height: 40px;
}

.tooltip .tooltip_arrow.left {
    position: absolute;
    top: 10px;
    left: -10px;
    background-image: url(/img/block-arrow.png);
    width: 10px;
    height: 15px;
}

.tooltip .tooltip_arrow.right {
    position: absolute;
    top: 10px;
    right: -10px;
    background-image: url(/img/block-arrow-right.png);
    width: 10px;
    height: 15px;
}

.tooltip .tooltip_arrow.topright, .tooltip .arrow.topleft {
    position: absolute;
    top: -10px;
    background-image: url(/img/block-arrow-top.png);
    width: 15px;
    height: 10px;
}

.tooltip .tooltip_arrow.topright {
    right: 10px;
}

.tooltip .tooltip_arrow.topleft {
    left: 30px;
}

.tooltip .tooltip_arrow.bottomleft, .tooltip .arrow.bottomright {
    position: absolute;
    bottom: -10px;

    background-image: url(/img/block-arrow-bottom.png);
    width: 15px;
    height: 10px;
}

.tooltip .tooltip_arrow.bottom {
    left: 20px;
}

.tooltip .tooltip_arrow.bottomright {
    right: 20px;
}


#colorPicker .color_select {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    color: #FFF;
    padding: 5px 5px 5px 5px;
    font-size: 9px;
    text-align: center;
    cursor: pointer;
}

#colorPicker .color_select:hover {
    border: 1px solid #FEFEFE;
    width: 40px;
    height: 40px;
}

form .field input[type="text"].input_colorpicker {
    width: 35px;
    cursor: pointer;
    text-indent: -9999px;
}

.datepicker_preview {
    float: left;
    width: 25px;
    cursor: pointer;
    height: 24px;
    margin: 5px 0px 0px -40px;
}

.input-icon {
    margin: 0 0 0 -45px;
    color: #FFF;
    line-height: 34px;
    text-align: center;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    height: 34px;
    width: 34px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: none;
    float: left;
    color: #d2d2d2;
}

.input-icon.email {
    background-image: url(/img/email-icon.png);
}

.input-icon.email a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.input-icon.phone {
    background-image: url(/img/phone-icon.png);
}

.input-icon.url {
    background-image: url(/img/web-icon.png);
}

.input-icon.twitter_url {
    background-image: url(/img/twitter-icon.png);
    background-size: 35px;
}

.input-icon.linkedin_url {
    background-image: url(/img/linkedin-icon.png);
    background-size: 35px;
}

.input-icon.facebook_url {
    background-image: url(/img/facebook-icon.png);
    background-size: 35px;
}

.input-icon.search {
    background-image: url(/img/search-icon.png);
}

div.radioOption {
    display: block;
    float: left;
    line-height: 20px;
    width: auto;
    min-width: 100px;
    padding-right: 20px;
}

div.radioOption input, div.radioOption label {
    float: left;
}

form.float .field div.radioOption label {
    /* Firefox */
    width: -moz-calc(100% - 30px);
    /* WebKit */
    width: -webkit-calc(100% - 30px);
    /* Opera */
    width: -o-calc(100% - 30px);
    /* Standard */
    width: calc(100% - 30px);
}

/* SIMPLICATE CHECK AND RADIO BOX //////////////////////////////////////////////////*/
input[type="checkbox"]:not(.transformed):not(.no-transform) {
    visibility: hidden;
    position: absolute;
}

div.simplicate-checkbox {
    float: left;
    width: 16px;
    height: 16px;
    padding-top: 2px;
    padding-left: 5px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #D5D7D8;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
}

div.simplicate-checkbox:hover {
    background-color: #f5f5f5;
    border-color: #CACCCE;
}

div.simplicate-checkbox.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

div.simplicate-checkbox[isChecked="1"] .check-icon {
    visibility: visible;
}

div.simplicate-checkbox .check-icon {
    visibility: hidden;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 2px solid #3b3b3b;
    width: 6px;
    height: 10px;
    border-top: none;
    border-left: none;
    position: absolute;
    top: 1px;
    left: 4px;
}

div.simplicate-radio {
    width: 20px;
    height: 20px;
    float: left;
    margin: 10px 10px 0px 0px;
    border-radius: 10px;
    border: 1px solid #D5D7D8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

div.simplicate-radio.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

div.simplicate-radio[ischecked="1"], div.simplicate-radio[ischecked="1"] div.inner-dot {
    border-color: #3B3B3B;
    border-width: 4px;
}

/* IE9 */
.ie9 form.float .field input[type="text"], form.float .field select, form.float .field input[type="number"] {
    height: 40px;
    padding-top: 6px;
}


/*/ CONTACTS //////////////////////////////////////////////////////////////*/
div.contact_content {
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    padding: 10px 0px;
    margin-top: -1px;
    cursor: pointer;
}

div.contact_content:last-child {

}

#content .main div.contact_content h1 {
    font-weight: normal;
    font-size: 1.4em;
    color: #595959;
}

#content .main div.contact_content h1 a {
    color: #595959;
    text-decoration: underline;
}

#content .main div.contact_content .row {
    height: 30px;
}

#content .main div.contact_content .field {
    margin: 0 0 5px 0;
}

div.contact_content div[class^="icon-"], [class*=" icon-"] {
    color: #aaaaaa;
    font-size: 16px;
}


/*/ DASHBOARD CHARTS //////////////////////////////////////////////////////////////*/

a.manage_charts {
    position: absolute;
    right: 20px;
    cursor: pointer;
    opacity: 0.7;
    font-size: 1.2em;
    margin-top: -15px;
}

a.manage_charts:hover {
    opacity: 1;
    text-decoration: underline;
}

div.chartcollection {
    background-color: #FFFFFF;
    margin-top: 8px;
    margin-bottom: 15px;
}

.ui-dialog div.chartcollection {
    background-color: transparent;
    border: none;
}

div.chartcollection div.chartcollection_chart {
    float: left;
    padding: 0px 10px 10px 10px;
    position: relative;
    background-color: #FFFFFF;
    margin: 0px 10px 20px 10px;
    /*border: 1px solid #dcdcdc;*/
}

.ui-dialog div.chartcollection div.chartcollection_chart {
    background-color: transparent;
    padding: 10px;
    margin: 5px 10px;
}

.ui-dialog div.chartcollection div.clear {
    border-bottom: 1px solid #dcdcdc;
    padding-top: 15px;
    margin-bottom: 15 p
}

.ui-dialog div.chartcollection div.simplicate-checkbox {
    position: relative;
    top: 10px;
}

.ui-dialog div.chartcollection div.chartcollection_chart_info {
    padding: 10px;
}

div.chartcollection div.chartcollection_chart .chartcollection_chart_title {
    font-family: "Work Sans Medium", Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    margin-top: -5px;
    padding-bottom: 5px;
}

.ui-dialog div.chartcollection div.chartcollection_chart .chartcollection_chart_title {
    text-align: left;
}

div.chartcollection div.chartcollection_chart .chart_loader {
    display: none;
    background-image: url(/img/chart-loader.gif);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0px 0px -12px;
}

div.chartcollection div.chartcollection_chart.loading {
    opacity: 0.5;
}

div.chartcollection div.chartcollection_chart.loading .chart_loader {
    display: block;
}

div.input.cke_editable h1,
div.input.cke_editable h2,
div.input.cke_editable h3,
div.input.cke_editable h4,
div.input.cke_editable h5 {
    font-family: "Work Sans Semibold", Helvetica, Arial, sans-serif;
    font-weight: normal;
}

.select2-container-multi .select2-choices {
    background-image: none !important;
    border-radius: 4px;
    border-color: #e5e5e5;
}


/* !error */


.error-holder img {
    border: 1px solid #E0E0E0;
    background: #fff;
    display: block;
    height: auto;
    max-width: 100%
}


.chartcollection_chart .error-holder img {
    height: auto;
    overflow: hidden;
}


/*/  MEDIA SCREENS  ////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1500px) {
}

@media screen and (max-width: 1400px) {

}


/*/  MEDIA SCREENS  ////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1500px) {
}

@media screen and (max-width: 1400px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1100px) {

    #content .main .block .tabbed a {
        padding: 13px 15px;
    }
}

@media screen and (max-width: 1000px) {

    #content .main .block .tabbed a {
        padding: 11px 12px;
    }

    table.layout td {
        padding: 10px 7px;
    }

    #content .main .block .actions a.button {
        height: 30px;
        line-height: 30px;
    }

    #content .main .block .actions a span {
        top: 10px;
    }

    #content .main .block .actions a.button.add span {
        top: 9px;
    }
}

@media screen and (max-width: 950px) {
    #content .main .block .tabbed a {
        padding: 9px 8px;
    }
}


@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


form .field .button.cancel,
.cancel {
    background-color: transparent;
    border-color: transparent;
    color: #595959;
    transition: .2s;
    font-family: "Work Sans Regular", Helvetica, Arial, sans-serif;
    padding: 0 20px;
}

form .field .button.cancel:hover,
.cancel:hover {
    color: #595959;
}

/* Can't clear field through 'x' on entitylist inputs */
.s_value::-ms-clear {
    display: none;
    height: 0;
    width: 0;
}

form .field .button.cancel.twofa-button-revoke {
    margin: -9px 16px 0 16px;
}

.crm #table_relationprojects tbody tr td,
.crm #table_relationservice tbody tr td,
.projects table[id^="table_Project"] tbody tr td,
.hours table[id^="table_projectaccepthours"] tbody tr td {
    vertical-align: top;
}

.projects-table.font-small {
    font-size: 0.8em;
    vertical-align: top;
}

#table_relationprojects tbody tr td.valign-middle,
.projects table[id^="table_Project"] tbody tr td.valign-middle {
    vertical-align: middle;
}

#main_content .select2-container-multi .select2-choices {
    border-color: #e5e5e5;
}

.select2-drop.select2-drop-active {
    margin-top: -3px;
}

.select2-drop.select2-drop-above.select2-drop-active {
    margin-top: 3px;
}

form .field .select2-choices input[type="text"]:focus {
    border: none;
    box-shadow: none;
}

#content:has(.row.tab.active .extended-filter-overview-wrapper.with-filters) {
    overflow: visible;
    --body-padding: 48px;
    --sidebar-width: 320px;
    --sidebar-offset: calc(var(--body-padding) + var(--sidebar-width));
    --dropdown-height: 230px;
    --min-width: 974px;
    --max-width: 1800px;

    & .tab > .col {
        padding-right: var(--sidebar-offset);
        width: 100%;
        max-width: calc(var(--max-width) + var(--sidebar-offset));
        min-width: calc(var(--min-width) + var(--sidebar-offset));
    }
}

.extended-filter-overview-wrapper.with-filters {
    width: auto;
    overflow: visible;
    padding-bottom: var(--dropdown-height);
    isolation: isolate;
}

.extended-filter-overview-wrapper.with-filters thead {
    position:sticky;
    top:0;
    z-index:2;
}

#content .main .dashboardblocks.customfieldMapping .block {
    --block-heading-color: #e7e8e9;
}
#content .main .dashboardblocks.customfieldMapping .block h1 {
    color: #595959;
}

#content .main .dashboardblocks.customfieldMapping .icon-crm {
    color: var(--main-color-crm);
}

#content .main .dashboardblocks.customfieldMapping .icon-hrm {
    color: var(--main-color-hrm);
}

#content .main .dashboardblocks.customfieldMapping .icon-acquisition {
    color: var(--main-color-sales);
}
#content .main .dashboardblocks.customfieldMapping .icon-projects {
    color: var(--main-color-projects);
}

#content .main .dashboardblocks.customfieldMapping .bootstrap-select {
    float:right
}