/*
    Document   : style.css
    Created on : 27-12-2011 16:55:00
    Author     : Arjan van den Broek
    Description: Styles of the website
*/
/*==== RESET DO NOT CHANGE!! ====*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, cfigcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

@font-face {
    font-family: 'RijksoverheidSans';
    src: url('/themes/default/fonts/hinted-RijksoverheidSansWebText-Bold.woff2') format('woff2'),
    url('/themes/default/fonts/hinted-RijksoverheidSansWebText-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RijksoverheidSans';
    src: url('/themes/default/fonts/hinted-RijksoverheidSansWebText-Regular.woff2') format('woff2'),
    url('/themes/default/fonts/hinted-RijksoverheidSansWebText-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RijksoverheidSerif';
    src: url('/themes/default/fonts/hinted-RijksoverheidSerifWeb-Bold.woff2') format('woff2'),
    url('/themes/default/fonts/hinted-RijksoverheidSerifWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RijksoverheidSerif';
    src: url('/themes/default/fonts/hinted-RijksoverheidSerifWeb-Regular.woff2') format('woff2'),
    url('/themes/default/fonts/hinted-RijksoverheidSerifWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

.bg-secondary {
    background:#616161;
}


/* default styles */

/* Responsive columns required for responsive*/

.row{
    width: 102.38095238095238%;
    margin: 0 -1.19047619047619%;
}

[class*="col-"] {
    float: left;
    width: 100%;
}

.col-10{
    width: 7.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}
.col-15{width:12.6%;margin:0 1.2% 2.4% 1.2%}



.col-20{
    width: 17.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}


.col-25 {
    width: 22.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}
.col-25-full {
    width: 25%;
    margin: 0 0 2.38095238095238% 0;
}
.col-33{
    width: 30.94904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-40{
    width: 37.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-50 {
    width: 47.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}


.col-50.no-margin-right {
    width: 48.80952380952381%;
    margin: 0 0 2.38095238095238% 1.19047619047619%;
}

.col-50.no-margin-left {
    width: 48.80952380952381%;
    margin: 0 1.19047619047619% 2.38095238095238% 0;
}

.col-50.no-margin-left.no-margin-right {
    width: 50%;
    margin: 0 0 2.38095238095238% 0;
}

.col-60{
    width: 57.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}
.col-70{
    width: 67.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-66{
    width: 64.2904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-75 {
    width: 72.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-80{
    width: 77.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-85{width:82.6%;margin:0 1.2% 2.4% 1.2%}

.col-100{
    width: 97.61904761904762%;
    margin: 0 1.19047619047619% 2.38095238095238% 1.19047619047619%;
}

.col-100.no-margin-left.no-margin-right{
    width: 100%;
    margin: 0 0 2.38095238095238% 0;
}

/* Useful classes */

.float-left{
    float: left;
}

.float-right{
    float: right;
}
.font-small{
    font-size:85%;
}
.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

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

.margin-right-10px{
    margin-right: 10px;
}

.margin-right-20px{
    margin-right: 20px;
}

.margin-left-10px{
    margin-left: 10px;
}

.margin-left-20px{
    margin-left: 20px;
}

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

.margin-top-procent {
    margin-top: 2.38095238095238%;
}

.margin-top-100px{
    margin-top: 100px;
}

.margin-bottom-10px{
    margin-bottom: 10px;
}

.margin-top-20px{
    margin-top: 20px;
}

.margin-bottom-20px{
    margin-bottom: 20px;
}
.margin-bottom-25px{
    margin-bottom: 20px;
}

.box-sizing{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.full-width{
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}



nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*==== CLEARFIX ====*/
/* For modern browsers */
.cf:before,
.cf:after,
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.cf:after, .clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf, .clearfix {
    *zoom:1;
}
.clear { clear: both;}

/*==== Start your styles from here ====*/
html{
    width: 100%;
    height: 100%;
    font: 13px/1.5 Arial, Verdana, sans-serif;
}
html{
    overflow-y: scroll;
}
body{
    position: relative;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    background:#ECEFF4;
    line-height: 1.5;
    color: #454545;
}

.pointer {
    cursor: pointer;
}

p{
    margin: 10px 0;
}

a{
    color: #88BA01;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

h1{
    font-size: 1.5em;
    margin-bottom: 10px;
}
h2{
    font-size: 1.25em;
}

img.selected{
    border: 1px solid red;
}

ul.standard{
    padding-left: 20px;
    margin: 10px 0;
}

fieldset {
    padding: 10px;
    display: block;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #ececec;
}
fieldset.no-border {
    border: 0px;
}
fieldset.filter {
    border: 1px solid #CCC;
    border-bottom: 3px solid #CCC;
    padding: 10px;
    display: block;
    margin-top: 10px;
    background: #e1e1e6;
}
fieldset legend {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0px 0px 10px;
    float: left;
    position: relative;
    display: block;
    width: 100%;
}

fieldset legend span.locale {
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
}

input.withHint{
    color: #999;
}

header{
    position: static;
    min-width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    z-index: 999;
    font-weight: bold;
    color: #fff;

}

header div, header a {
    color: #fff;
    display: inline-block;
    text-shadow: none;
    height:50px;
}
header .toggle-admin-menu {
    cursor:pointer;
}
header .toggle-admin-menu i {
    width: 45px;
    text-align: center;
    line-height: 50px;
}
header i.fa {
    font-size: 20px;
}

.bg-primary{
    background:#222121;
}

.bg-white {
    background: #fff;
}

#main-rightColumn .space > .bg-white {
    border-bottom: 3px solid #ccc;
}

.space {
    padding: 20px;
    box-sizing: border-box;
}


header .header-button i{
    font-size:25px;
    line-height:50px;

}
header .header-button{
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    padding:0 8px;
    box-sizing: border-box;
    min-width:45px;
    line-height:50px;
}

header .user-login{
    margin: 5px auto;
    height: 38px;
    width: 38px;
    display: block;
    text-align: center;
    color: #ccc;
    font-size:30px;
    line-height:48px;
    border-radius:500px;
    background:#fff;
    overflow:hidden;
}


header .user-small{
    margin: 0px auto;
    height: 35px;
    max-width: 35px;
    display: block;
    text-align: center;
    color: #ccc;
    font-size:30px;
    line-height:35px;
    border-radius:500px;
    border:1px solid #ccc;
    background:#fff;
    overflow:hidden;
}

header .user-login i{
    line-height:50px;
    font-size:45px;
    color:#ccc;
}

header #logout a{
    color: #fff;
}

header #statusUpdate{
    display: inline-block;
    padding: 0 20px;
}

#header-pusher{
    height: 43px;
}

#container.no-padding {
    padding-left: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#container.no-padding-important #main-rightColumn {
    padding-left: 0px !important;
}
#container {
    padding: 0px 0px 20px 0px !important;
    min-width: 700px;
    position: relative;
}

/* Main navigation*/
#main-nav ul{
    list-style: none;
    margin:0px;
}

#main-nav ul li{
    float:left;
    width:100%;
    margin:0 0 2px;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    border:0px !important;
}

#main-nav .main-nav-sub{
    margin:0 0 0px;
    float:left;
    width:100%;
    display:none;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

#main-nav ul li.active{
    margin:0 0 10px;
    border:0px !important;
}
#main-nav ul li.active .main-nav-sub{
    display:block;
}
#main-nav ul li:hover .main-nav-sub{
    display:block;
}
#main-nav ul li.sub{
    margin:0 0 1px;
}



#main-nav ul li a{
    float: left;
    margin-right: 20px;
    display: block;
    padding: 0px 15px;
    color: #222121;
    font-size:13px;
    line-height:36px;
    position:relative;
    background:#e7e7e7;
    width:100%;
    height:auto;
    box-sizing:border-box;
}

#main-nav ul li a i{
    margin:0 10px 0 0;
    font-size:14px;
}

#main-nav ul li.hasChildren a:after {
    content: "\f107";
    font-family: FontAwesome;
    color: #222121; /* or whatever color you prefer */
    margin-right: 15px;
    font-size:14px;
    position:absolute;
    top:0;
    line-height:36px;
    right:0px;
}
#main-nav ul li a:hover:after, #main-nav ul li.no-sub a:after, #main-nav ul li.active a:after {
    content: "\f105";
    font-family: FontAwesome;

    margin-right: 15px;
    font-size:14px;
    position:absolute;
    top:0;
    line-height:36px;
    right:0px;
}


#main-nav ul li.no-sub a:after {
    color: #3C8DBC;
}

#main-nav ul li a:hover:after, #main-nav ul li.no-sub a:hover:after, #main-nav ul li.active a:after {
    color: #fff;
}

#main-nav ul li a:hover, #main-nav ul li.active a{
    text-decoration: none;
    color: #fff;
    background: #616161;
    border:0px !important;
}

#main-nav ul li.sub a{
    color: #222121;
    background:#fff;
}

#main-nav ul li.sub.active a,#main-nav ul li.sub:hover a{
    color: #fff;
    background: #616161;
    font-weight:normal;
}


#fastStartContainer{
    margin-top: 20px;
}
#fastStartContainer .main-box-content{
    padding: 5px;
}

#contentContainer{
}

#main-leftColumn{
    width:250px;
    position:absolute;
    left:0px;
    z-index:999;
    background:#F9FAFC;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    top:0px;
    border-right: 3px solid #ececec;
}

#main-leftColumn.small {
    left: -250px !important;
}

#main-leftColumn.small {
    width: 227px;
    position: absolute;
    top: 0px;
    left: -237px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#main-leftColumn .client-logo img {
    max-width: 100%;
    max-height: 100px;
}

#main-rightColumn.padding {
    padding-left: 250px;

}

#main-rightColumn {
    position: relative;
    background: #ECEFF4;
    transition: padding 0.3s ease-in;
    -webkit-transition: padding 0.3s ease-in;
    -moz-transition: padding 0.3s ease-in;
    -o-transition: padding 0.3s ease-in;
}

#main-rightColumn .right-content-header {
    background:#fff;
    display:table;
    padding:20px 0;
}
#main-rightColumn .right-content-header .block {
    display:table-cell;
    min-height:80px;
    padding:0px 20px 0px 20px;
    margin:20px 0;
    border-right:1px solid #ECEFF4;
    color:#234D63;
    font-size:13px;
}
#main-rightColumn .right-content-header .block p{
    margin:0px;
}
#main-rightColumn .right-content-header .title {
    font-size:28px;
    color:#222121;
    vertical-align:middle;
    padding:0px;
    padding-left:20px;

}
#main-rightColumn .right-content-header .title i {
    margin-right:15px;
}

div.crumblePath, div.crumblePath a{
    color: #FFF;
}

div.crumblePath span.crumbleSep{
    display: inline-block;
    width: 20px;
    background: url('/modules/core/admin/images/crumble_separator.png') no-repeat 10px 8px transparent;
}

div.styled-box{
    background-color: #FFF;
    border: 1px solid #A7A7A7;

    -moz-box-shadow: 0 0 10px #8b8b8b; /* Firefox */
    -webkit-box-shadow: 0 0 10px #8b8b8b; /* Safari and Chrome */
    box-shadow: 0 0 10px #8b8b8b; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div.styled-box div.box-header{
    background: url('/modules/core/admin/images/box-header.jpg') repeat-x 0 0 transparent;

    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;

    height: 34px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #202020;
    text-shadow: 0 1px 1px #FFF;
    line-height: 34px;
    margin: 0;
}

div.styled-box div.box-content{

}

/* Input, select, textarea opmaken */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    padding: 5px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border: 1px solid #ccc;
}

/* submit button style */
input[type="submit"], input[type="button"], .button-submit, .btn-default {
    background: #616161;
    border: 0;
    padding: 9px 10px 9px 10px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #FFF;
    font-size:110%;
    cursor: pointer;
    margin-top:0px !important;
    position:relative;
    text-decoration: none !important;
}

input[type="submit"]:hover, input[type="button"]:hover, .btn-default:hover {
    color: #CF0;
}

a.btn-default[disabled]{
    opacity: .5;
}

.btn-default[disabled]:hover{
    cursor: default;
    color: #fff;
}

input[type="submit"][disabled]{
    background: #e0d1d1;
    color: #969191;
}
input[type="submit"][disabled]:hover{
    cursor: default;
    color: #FFF;
}

select{
    max-width: 328px;
}

input.default, textarea.default, select.default{
    width: 328px;
}

textarea.default{
    height: 100px;
}

textarea.default,
select.default,
input[type="text"].default,
input[type="email"].default,
input[type="password"].default
{
    box-sizing: border-box;
}

.importantMessage {
    font-weight: bold;
    font-style: italic;
    color: #ca1e1e;
}

button.buttonSendTrusted {
    background: url("/modules/core/admin/images/submit_bg.jpg") repeat-x scroll 0 0 transparent;
    border: 0 none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    padding: 5px 7px;
    vertical-align: middle;
}

table.sorted{
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #e1e1e6;
    color: #4F4F4F;
    min-width: 50%;
}
table.sorted th{
    white-space: nowrap;
    background: #e1e1e6;
    color: #1A1A1A;
    height: 30px;
    line-height: 30px;
    padding: 0 5px 0 25px;
    text-align: left;
    vertical-align: middle;

    border-left: 0px none;
}
table.sorted th.onlineOffline{
    width: 30px;
}
table.sorted tbody td{
    padding: 3px 5px;
    line-height: 25px;
    vertical-align: middle;
}
table.sorted tr.even td{
    background-color: #F7FAFE;
}
table.sorted tr.odd td{
    background-color: #FFF;
}
table.sorted tr th.nonSorted{
    padding-left: 5px;
    padding-right: 5px;
}
table.sorted th.header{
    cursor: pointer;

    background: #e1e1e6;

    position: relative;
}
table.sorted th.header:after{
    content: "\f0dc";
    font-family: FontAwesome;
    color: #1A1A1A ; /* or whatever color you prefer */
    margin-right: 7px;
    font-size:16px;
    position:absolute;
    top:5px;
    line-height:22px;
    left:5px;
    z-index:999;
    font-weight:normal;
}

table.sorted th.headerSortUp{
    background:#616161;
    color:#fff;
    position: relative;
}
table.sorted th.headerSortUp:after{
    content: "\f0de";
    font-family: FontAwesome;
    color: #fff ; /* or whatever color you prefer */
    margin-right: 7px;
    font-size:16px;
    position:absolute;
    top:5px;
    line-height:22px;
    left:5px;
    z-index:999;
    font-weight:normal;
}

table.sorted th.headerSortDown{
    background:#616161;
    color:#fff;
    position: relative;
}

table.sorted th.headerSortDown:after{
    content: "\f0dd";
    font-family: FontAwesome;
    color: #fff ; /* or whatever color you prefer */
    margin-right: 7px;
    font-size:16px;
    position:absolute;
    top:5px;
    line-height:22px;
    left:5px;
    z-index:999;
    font-weight:normal;
}
table.sorted tr:hover td {
    background-color: #E5EFFD;
}

table.sorted tfoot td{
    padding: 3px 5px;
    line-height: 22px;
    vertical-align: middle;
    background-image: linear-gradient(bottom, rgb(237,237,237) 0%, rgb(255,255,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(237,237,237) 0%, rgb(255,255,255) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(237,237,237)),
        color-stop(1, rgb(255,255,255))
        );
}

table.sorted tr.topRow td, table.sorted tr.bottomRow td{
    background: none;
    background-color: #FFF;
    padding: 10px;
    vertical-align: middle;
    line-height: 22px;
}
table.sorted tr.topRow td h2, table.sorted tr.bottomRow td h2{
    font-size: 1.2em;
    float: left;
}

.action_icon {
    display: inline-block;
    width: 30px;
    vertical-align: top;
    height: 22px;
    position: relative;
    font-size: 14px;
    text-align: center;
    background: none;
}

.action_icon::before {
    color: #222121;
    font-size: 14px;
    position: absolute;
    top: 0;
    line-height: 22px;
    width: 30px;
    text-align: center;
    left: 0px;
    z-index: 999;
    font-weight:normal;
    font-family: FontAwesome;
    background: none;
}

.action_icon.grey::before {
    color:#999 !important;
}

.action_icon:hover::before {
    color: #616161;

}

/* normal icons */
.action_icon.delete_icon { background: none; }
.action_icon.delete_icon::before{
    content: "\e020";
    font-family: 'Glyphicons Halflings';
    color: #a94442;
}
.action_icon.edit_icon { background: none;}
.action_icon.edit_icon::before{
    content: "\270f";
    font-family: 'Glyphicons Halflings';
}
.action_icon.add_icon { background: none;}
.action_icon.add_icon::before{
    content: "\f067";
    color:#4db34d;
}
.action_icon.magnifying_glass_icon::before{
    content: "\f002";
}
.action_icon.mail_icon::before{
    content: "\f0e0";
}

.action_icon.online_icon::before{
    content: "\f111";
    color:#4db34d;
}

.action_icon.offline_icon::before{
    content: "\f111";
    color: #a94442;
}

.action_icon.crop_icon::before{
    content: "\f125";
}
.action_icon.copy_icon::before{
    content: "\f0c5";
}
.action_icon.present_icon::before{
    content: "\f06b";
}

.action_icon.users_icon::before{
    content: "\f007";
}
.action_icon.unlock_icon::before{
    content: "\f13e";
}
.action_icon.abort_icon::before{
    content: "\f05e";
}
.action_icon.close_icon::before{
    content: "\f00d";
}
.action_icon.change_order_icon { background: none;}
.action_icon.change_order_icon::before{
    content: "\f161";
}

span.fileType{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/modules/core/admin/images/icons/file_types.png) no-repeat 0 0 transparent;
}

span.fileType.accdb, span.fileType.mdb, span.fileType.ldb, span.fileType.adp, span.fileType.mde{
    background-position: 0 -20px;
}
span.fileType.psd, span.fileType.psb, span.fileType.pdd{
    background-position: 0 -40px;
}
span.fileType.php{
    background-position: 0 -60px;
}
span.fileType.pps, span.fileType.ppt, span.fileType.pptx{
    background-position: 0 -80px;
}
span.fileType.txt{
    background-position: 0 -100px;
}
span.fileType.csproj, span.fileType.sln, span.fileType.vap, span.fileType.vbg, span.fileType.vdproj{
    background-position: 0 -120px;
}
span.fileType.xls, span.fileType.xlsx, span.fileType.xlr{
    background-position: 0 -140px;
}
span.fileType.csv{
    background-position: 0 -160px;
}
span.fileType.x-3gp, span.fileType.avi, span.fileType.mkb, span.fileType.mp4, span.fileType.mpg, span.fileType.mpeg, span.fileType.mpe, span.fileType.mov, span.fileType.qt, span.fileType.wmv, span.fileType.wmv, span.fileType.wmx, span.fileType.ogm{
    background-position: 0 -180px;
}
span.fileType.fla{
    background-position: 0 -200px;
}
span.fileType.swf, span.fileType.flv{
    background-position: 0 -220px;
}
span.fileType.png, span.fileType.gif, span.fileType.tiff, span.fileType.tif, span.fileType.jpg, span.fileType.jpeg, span.fileType.jpe, span.fileType.bmp{
    background-position: 0 -240px;
}
span.fileType.aif, span.fileType.iff, span.fileType.m3u, span.fileType.m4a, span.fileType.mid, span.fileType.mp3, span.fileType.mpa, span.fileType.ra, span.fileType.wav, span.fileType.wma{
    background-position: 0 -260px;
}
span.fileType.msg, span.fileType.pst, span.fileType.prf, span.fileType.dbx{
    background-position: 0 -280px;
}
span.fileType.pdf{
    background-position: 0 -300px;
}
span.fileType.doc, span.fileType.docx, span.fileType.wpd, span.fileType.wps{
    background-position: 0 -320px;
}
span.fileType.x-7z, span.fileType.deb, span.fileType.gz, span.fileType.pkg, span.fileType.rar, span.fileType.rpm, span.fileType.sit, span.fileType.sitx, span.fileType.tar.gz, span.fileType.zip, span.fileType.zipx{
    background-position: 0 -340px;
}

span.mediaType{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/modules/core/admin/images/icons/media_types.png) no-repeat 0 0 transparent;
}

span.mediaType.link{
    background-position: 0 0;
}
span.mediaType.videoLink{
    background-position: 0 -20px;
}

/* table with form */
table.withForm tr td{
    padding-bottom: 5px;
    vertical-align: top;
}

table.withForm tr td.withLabel{
    padding-top: 6px;
    padding-right: 10px;
}

a.backBtn{
    display: inline-block;
    line-height: 22px;
    padding-left: 20px;
    position:relative;
    color:#222121;
}
a.backBtn:after{
    content: "\f112";
    font-family: FontAwesome;
    color: #222121; /* or whatever color you prefer */
    margin-right: 15px;
    font-size:16px;
    position:absolute;
    top:0;
    line-height:22px;
    left:0px;
    z-index:999;
}

.backBtnInfo{
    font-size: 0.8em;
    line-height: 22px;
}

a.textLeft,a.textRight {
    position: relative;
    color:#222121;
}


a.textLeft{
    display: inline-block;
    line-height: 22px;
    padding-right: 20px;
}

a.textRight{
    display: inline-block;
    line-height: 22px;
    padding-left: 20px;
}

a.textRight:after,a.textLeft:after{
    font-family: FontAwesome;
    color: #222121 ; /* or whatever color you prefer */
    margin-right: 15px;
    font-size:16px;
    position:absolute;
    top:0;
    line-height:22px;
    z-index:999;
}

a.textRight:after{
    left:1px;
}

a.textLeft:after{
    right:-12px;
}

a.addBtn.textRight:after, a.addBtn.textLeft:after{
    content: "\f067";
    color:#4db34d;
}

a.editBtn.textRight:after, a.editBtn.textLeft:after{
    content: "\f040";
}

a.exportExcelBtn.textRight:after, a.exportExcelBtn.textLeft:after{
    content: "\f0ce";
}

a.exportBtn.textRight:after, a.exportBtn.textLeft:after{
    content: "\f0ce";
}

a.bookQuestionBtn.textRight:after, a.bookQuestionBtn.textLeft:after{
    content: "\f02d";
}

a.changeOrderBtn.textRight:after, a.changeOrderBtn.textLeft:after{
    content: "\f161";
}

input.hasDatePicker{
    background: url('/modules/core/admin/images/icons/calendar_icon.png') no-repeat 5px center #FFF;
    padding-left: 25px;
}
input.hasTimePicker{
    background: url('/modules/core/admin/images/icons/clock_icon.png') no-repeat 5px center #FFF;
    padding-left: 25px;
    padding-right: 10px;
}

div#topOptions{
    margin-top: -5px;
    border-bottom: 1px solid #DADDE2;
    margin-bottom: 10px;
    padding-bottom:7px;
    height: 25px;
    clear: both;
}
div#bottomOptions{
    border-top: 1px solid #DADDE2;
    margin-top: 10px;
    margin-bottom: -5px;
    height: 20px;
    padding-top: 5px;
    clear: both;
}

.error{
    color: #F00;
    padding-left: 5px;
}

.validColor{
    color: #00930E;
}
.errorColor{
    color: #F00;
}

input.error{
    background-color: #ff8e8e;
}
div#validationErrors{
    min-width: 450px;
    padding: 10px;
}
div#validationErrors h2{
    font-size: 1.2em;
    margin-bottom: 10px;
}
div#validationErrors ul#errors{
    padding-left: 20px;
}

table.fullWidth{
    width: 100%;
}

input.alignCheckbox, input.alignRadio{
    position: relative;
    top: -2px;
    margin: 0;
    padding: 0;
}
input.alignRadio{
    top: -2px;
}

label:hover{
    cursor: pointer;
}

div.contentColumn{
    float: left;
    width: 47%;
    min-width: 460px;
    margin: 0 1% 0 0;
}

img.ajax-loader.imageManagement, img.ajax-loader.fileManagement{
    width: 145px;
    height: 19px;
    margin-top: 9px;
    display: none;
}
img.ajax-loader.fileManagement{
    width: 130px;
}

div.progressContainer {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 10px;

    position: relative;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    margin-bottom: 5px;
}

div.progressContainer.clickable:hover {
    cursor: pointer;
}

div.progressContainer .progressThumbHolder {
    width: 20%;
    box-sizing: border-box;
    padding-right: 5px;
    float: left;
}

div.progressContainer .progressThumbHolder .progressThumb {
    max-width: 56px;
    max-height: 31px;
}

div.progressContainer .progressTextHolder {
    width: 100%;
    box-sizing: border-box;
    float: left;
}

div.progressContainer .progressTextHolder.with-thumb {
    width: 80%;
}

div.progressContainer .progressName {
    word-break: break-all;
    padding-right: 30px;
    position: relative;
}

div.progressContainer .progressName .action_icon {
    position: absolute;
    right: -5px;
    top: 0;
}

div.progressContainer .progressStatus {
    font-size: .85em;
}

div.progressContainer .progressStatus.error {
    padding-left: 0;
}

div.progressContainer .progressBar {
    margin-top: 5px;
    height: 8px;
    background-color: #88BA01;
    width: 1%;
}

div.progressContainer .progressBar.aborted {
    background-color: #f93a3a;
}

div.uploadsDropZone {
    border: 2px dashed #CCC;
    width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

div.uploadsDropZone.dragover {
    color: #CCC;
    border-color: #88BA01;
}

div.uploadsDropZone.dragover .dropZoneBrowseHolder a {
    color: #CCC;
    border-color: #CCC;
}

div.uploadsDropZone .dropZoneBrowseHolder {
    margin-top: 10px;
    font-size: 1.3em;
}

div.uploadsDropZone .dropZoneBrowseHolder a {
    border: 1px solid #88BA01;
    padding: 7px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div.uploadsDropZone .dropZoneBrowseHolder a:hover {
    text-decoration: none;
}

div.uploadsDropZone .dropZoneTextHolder {
    margin-top: 15px;
    color: #CCC;
}

/*
    BEGIN SORTABLE (1 level)
*/

div.likeTopRow, div.likeBottomRow{
    background-color: #FFF;
    padding: 10px;
    line-height: 22px;
    border: 1px solid #CDD0D5;
}
div.likeTopRow h2{
    font-size: 1.2em;
    float: left;
}

div#sortableContainer{
    width: 100%;
    overflow: hidden;
}

ol.sortable li{
    list-style: none;
    min-height: 25px;
}

ol.sortable li > div{
    height: 28px;
    line-height: 28px;
    border: 1px solid #CDD0D5;
    margin-top: -1px;
    padding-left: 10px;
}
ol.sortable > li:first-child > div{
    margin: 0px;
}

ol.sortable li.placeholder{
    background-color: #D7ED44;
    border: 1px dashed #AAC017;
    margin-top: 0px;
    margin-bottom: 1px;
}

/* level 0 */
ol.sortable > li > div{
    background-color: #FFF;
    font-weight: bold;
}

ol.sortable > li.odd > div{
    background-color: #F7FAFE;
}

ol.sortable li div:hover{
    background-color: #E5EFFD;
}
ol.sortable ol li > div:hover{
    background-color: #E5EFFD;
}
ol.sortable.cursorMove li div:hover{
    cursor: move;
}

span.brackedComment{
    font-size: .8em;
}
/*
    END SORTABLE (1 level)
*/



/*
    BEGIN NESTED SORTABLE (extends sortable partly)
*/

div#nestedSortableContainer{
    width: 100%;
    overflow: hidden;
}

/* all levels */
ol.nestedSortable li{
    list-style: none;
}
ol.nestedSortable ol{
    padding-left: 25px;
}
ol.nestedSortable li{
    min-height: 25px;
}

ol.nestedSortable li > div{
    height: 35px;
    line-height: 35px;
    border: 1px solid #cdd0d5;
    margin-top: -1px;
    position: relative;
}
ol.nestedSortable li > div .actionIconsHolder{
    position: absolute;
    top:0;
    right:0;
}
ol.nestedSortable > li:first-child > div{
    margin: 0px;
}
ol.nestedSortable li div .action_icon{
    height: 22px;
    margin: 5px 2px 5px 0;
}
ol.nestedSortable li div.no-action-icons{
    padding-left: 10px;
}

ol.nestedSortable li.placeholder{
    background-color: #D7ED44;
    border: 1px dashed #AAC017;
    margin-top: 0px;
    margin-bottom: 1px;
}

ol.nestedSortable li.placeholder.ui-sortable-error{
    background-color: #fedfdf;
    border: 1px dashed #ff8e8e;
}

ol.nestedSortable li > div > .action_icon{
    margin-left: 2px;
}

/* level 0 */
ol.nestedSortable > li > div{
    background-color: #E1E1E6;
    color: #222121;
    font-weight: bold;
}
/* level 1 */
ol.nestedSortable > li > ol > li > div{
    background-color: #ECEFF4;
}
/* level 2 */
ol.nestedSortable > li > ol > li > ol > li > div{
    background-color: #e7ebf3;
}
/* level 3 */
ol.nestedSortable > li > ol > li > ol > li > ol > li > div{
    background-color: #e7ebf3;
}

ol.nestedSortable ol{
    background: url('/modules/core/admin/images/icons/sub_icon.png') no-repeat 5px 7px transparent;
}

ol.nestedSortable li div:hover{
    background-color: #616161;
    color: #fff;
}

ol.nestedSortable li div:hover .actionIconsHolder .action_icon::before{
    color: #fff !important;
}
ol.nestedSortable ol li > div:hover{
    background-color: #616161;
}
ol.nestedSortable.cursorMove li div:hover{
    cursor: move;
}


/*
    END NESTED SORTABLE (extends sortable partly)
*/

form#changeOrderForm{
    margin-top: 10px;
}

ul.nestedCheckboxes {
    list-style: none;
    margin-bottom: 10px;
}
ul.nestedCheckboxes ul {
    padding-left: 20px;
    margin: 0;
}

/*
    START LOGIN MODULE
*/

body.login-page {
    background-color: #222121;
    font-family: 'RijksoverheidSans', sans-serif;
}

.login-logo {
    text-align: center;
}

.login-header {
    height: 60px;
    background : #333;
}

#login-box {
    width: 100%;
    display: flex;
    margin-top : 150px;
    justify-content: center;
}

#login-form-container {
    background: #333;
    width: 400px;
    padding: 30px;
    color: #FFF;
}
#login-form-container input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    margin-bottom: 20px;
    font-family: 'RijksoverheidSans', sans-serif;
    font-size: 16px;
    padding: 12px;
    color: #000;
    outline: none;
    border: 2px solid transparent;
    transition: all .2s ease-out;
}
#login-form-container input:hover {
    border-color: #ccc;
}
#login-form-container input:focus {
    border-color: #8fcae7;
}

#login-form-container input:-webkit-autofill,
#login-form-container input:-webkit-autofill:hover,
#login-form-container input:-webkit-autofill:focus {
    border: 2px solid #fff;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

#login-form-container input[type="submit"] {
    margin: 0;
    border-radius: 0;
    width: auto;
    background-color: #f2de00;
    color: #222121;
}
#login-form-container input[type="submit"]:hover {
    background-color: #f2de00;
    border-color: #f2de00;
}

#login-form-container label {
    font-weight: bold;
    font-size: 16px;
    color: #FFF;
    margin-bottom: 5px;
    display: inline-block;
}
#login-form-container p {
    color: #FFF;
}

/*
    END LOGIN MODULE
*/

/*
    BEGIN PAGE MODULE
*/
form#pageStructureForm{
    margin-top: 10px;
}
div.likeBottomRow.pageModule{
    margin-top: -1px;
}
div.likeSorterTr{
    background-color: #FFF;
    border: 1px solid #CCC;
    border-top: 0 none;
    padding: 0 5px;
    line-height: 28px;
}
/*
    END PAGE MODULE
*/

/*
    BEGIN IMAGE DISPLAYING
*/

div.images{
    margin-top: 10px;
}
div.images.sortable .imagePlaceholder:hover{
    cursor: move;
}
div.images .placeholder, div.coverImageContainer .placeholder{
    width: 130px;
    border: 2px solid #CCC;
    background-color: #FFF;
    position: relative;
    display: block;

    float: left;
    margin-right: 10px;
    margin-bottom: 10px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div.images .placeholder .imagePlaceholder, div.coverImageContainer .placeholder .imagePlaceholder{
    height: 100px;
    width: 100px;
    margin: 15px;
}
div.coverImageContainer .placeholder .imagePlaceholder{
    margin-top: 5px;
}
div.coverImageContainer .placeholder .placeholderTitle{
    margin-top: 5px;
    margin-left: 15px;
}

div.images .placeholder .imagePlaceholder .centered, div.coverImageContainer .imagePlaceholder .placeholder .centered{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100px;
    width: 100px;
}

div.images .placeholder .imagePlaceholder .centered img, div.coverImageContainer .imagePlaceholder .placeholder .centered img{
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
    vertical-align: top; /* sort of hack for bottom white-space to be removed */
}

div.images .placeholder .actionsPlaceholder{
    text-align: right;
    border-top: 1px solid #CCC;
    padding: 3px 2px 3px 0;
    margin: 0 3px;
}

div#editImageForm input[type="text"]{
    margin-bottom: 5px;
}

img.notAllCrops{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #FFF;
}


div.images .placeholder .imagePlaceholder .centered, div.coverImageContainer .imagePlaceholder .placeholder .centered{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100px;
    width: 100px;
}

div.images .placeholder .imagePlaceholder .centered img, div.coverImageContainer .imagePlaceholder .placeholder .centered img{
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
    vertical-align: top; /* sort of hack for bottom white-space to be removed */
}

/* Specific classes for Product-Image-Color Management in the Catalog Product */
div.images-50 .placeholder-50{
    width: 66px;
    border: 2px solid #CCC;
    background-color: #FFF;
    position: relative;
    display: block;

    float: left;
    margin-right: 5px;
    margin-bottom: 5px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div.images-50 .placeholder-50 .imagePlaceholder-50{
    height: 50px;
    width: 50px;
    margin: 7px;
}

div.coverImageContainer-50 .placeholder-50 .imagePlaceholder-50{
    margin-top: 5px;
}

div.images-50 .placeholder-50 .actionsPlaceholder{
    text-align: right;
    border-top: 1px solid #CCC;
    padding: 3px 2px 3px 0;
    margin: 0 3px;
}

div.images-50 .placeholder-50 .imagePlaceholder-50 .centered-50{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 50px;
    width: 50px;
}

div.images-50 .placeholder-50 .imagePlaceholder-50 .centered-50 img{
    max-height: 50px;
    max-width: 50px;
    display: inline-block;
    vertical-align: top; /* sort of hack for bottom white-space to be removed */
}

div.catalogProductImagePlaceHolder .images .placeholder .imagePlaceholder .centered img{
    cursor: pointer;
}

div.catalogProductImagePlaceHolder div.placeholder.selected {
    border-color: #88BA01;
}

/*
    END IMAGE DISPLAYING
*/

/*
    COMMUNICATION
*/

#sendedMessage {
    background: #454545;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#progressBarWidthParent {
    background: #fff;
    border: 1px solid #ccc;
    width: 100%;
    height: 15px;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
}

#progressBarWidth {
    background: #cdeb8e; /* Old browsers */
    background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
    width: 0%;
    height: 15px;
    line-height: 15px;
    text-align: right;
}

/*
    BEGIN FILE DISPLAYING
*/
ul.files{
    margin-top: 10px;
}
ul.files.sortable .filePlaceholder:hover{
    cursor: move;
}
ul.files .placeholder{
    border: 2px solid #CCC;
    background-color: #FFF;
    position: relative;
    display: block;
    line-height: 28px;
    padding: 0 7px;

    margin-bottom: 5px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul.files .placeholder .actionsPlaceholder{
    margin: 0 3px;
    position: absolute;
    top: 3px;
    right: 0;
}

div#editFileForm input[type="text"]{
    margin-bottom: 5px;
}
div.filePlaceholder{
    position: relative;
    padding-left: 20px;
}
div.filePlaceholder span.fileType{
    position: absolute;
    left: 0;
    top: 6px;
}

/*
    END FILE DISPLAYING
*/

/*
    BEGIN LINK DISPLAYING
*/
ul.links{
    margin-top: 10px;
}
ul.links.sortable .linkPlaceholder:hover{
    cursor: move;
}
ul.links .placeholder{
    border: 2px solid #CCC;
    background-color: #FFF;
    position: relative;
    display: block;
    line-height: 28px;
    padding: 0 7px;

    margin-bottom: 5px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul.links .placeholder .actionsPlaceholder{
    margin: 0 3px;
    position: absolute;
    top: 3px;
    right: 0;
}

div#editLinkForm input[type="text"]{
    margin-bottom: 5px;
}
div.linkPlaceholder{
    position: relative;
    padding-left: 20px;
}

div.linkPlaceholder span.mediaType{
    position: absolute;
    left: 0;
    top: 6px;
}

/*
    END LINK DISPLAYING
*/

/*
    BEGIN VIDEOLINK DISPLAYING
*/
ul.videoLinks{
    margin-top: 10px;
}
ul.videoLinks.sortable .placeholder:hover{
    cursor: move;
}
ul.videoLinks .placeholder{
    border: 2px solid #CCC;
    background-color: #FFF;
    position: relative;
    display: block;
    line-height: 28px;

    margin-bottom: 5px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul.videoLinks .placeholder .actionsPlaceholder{
    margin: 0 3px;
    position: absolute;
    top: 3px;
    right: 0;
}

div#editVideoLinkForm input[type="text"]{
    margin-bottom: 5px;
}
div.videoLinkPlaceholder{
    position: relative;
}
div.videoLinkPlaceholder a{
    padding-left: 27px;
}

div.videoLinkPlaceholder span.mediaType{
    position: absolute;
    left: 7px;
    top: 6px;
}
div.videoThumbsPlaceholder{
    border-top: 1px solid #CCC;
    padding: 10px 0;
    text-align: center;
}
div.videoThumbsPlaceholder img{
    display: inline-block;
    vertical-align: top;
    width: 130px;
    height: 97px;
}
div.videoThumbsPlaceholder img.thumb2{
    margin: 0 10px;
}

/*
    END VIDEOLINK DISPLAYING
*/

/*
    BEGIN CROP
*/
div#crops2Go{
    margin-top: 10px;
    font-style: italic;
}
div#cropboxPreviewPlaceholder{
    position: relative;
}

img#image2Crop{
    max-width: 100%;
    min-width: 50px;
    min-height: 50px;
}

div#cropPreviewPlaceholder{
    position: absolute;
    min-width: 150px;
    padding-left: 25px;
    top: 0;
}
div#cropBoxPlaceholder{
    padding-right: 175px;
}
div#cropPreview{
    overflow: hidden;
    height: 150px;
}

form#crop_form{
    margin-top: 10px;
}
#imageCrops{
    margin-top: 10px;
}
#imageCrops img{
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}
hr.cropSeperator{
    margin: 10px 0;
}

/*
    SORTABLE TABLE
*/
ul.sortable tr.placeholder td{
    background-color: #88BA01;
}
/*
    END SORTABLE TABLE
*/
/*
    END CROP
*/

/*
    BEGIN TOOLTIP
*/
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #454545;
    background-color: #FFF;
    padding: 5px;
    opacity: 1;
}
#tooltip h3, #tooltip div { margin: 0; }
.hasTooltip{
    width: 16px;
    position: relative;
    display: inline-block;
}
.hasTooltip:before{
    content: "\f05a";
    font-family: FontAwesome;
    color: #222121 ; /* or whatever color you prefer */
    margin-right: 15px;
    font-size:16px;
    position:absolute;
    top:0;
    line-height:22px;
    left:3px;
    z-index:999;
}
.hasTooltip:hover{
    cursor: default;
}
.hasTooltip:hover{
    cursor: default;
}
/*
    END TOOLTIP
*/

/*
    BEGIN PAGINATION
*/
.pagination {
    display: inline-block;
}
.pagination a, .pagination span{
    display: inline-block;
    padding: 2px 2px;
    text-align: center;
    width: 24px;
    color: #616161;
}
.pagination a.is-current {
    color: #fff;
    background-color: #616161;
}
.pagination a.pagination-next {
    width: auto;
    float: right;
    margin-left: 7px;
}
.pagination a.pagination-previous {
    width: auto;
    float: left;
    margin-right: 7px;
}
.pagination ul {
    display: inline-block;
}
.pagination ul li {
    display: inline-block;
}
select[name="perPage"]{
    margin-left: 7px;
}


/*
    END PAGINATION
*/
/*
    BEGIN HANDY CLASSES
*/
.no-margin {
    margin: 0px;
}
.no-padding {
    padding: 0px;
}
.left{
    float: left;
}
.right{
    float: right;
}
a.action_icon.hide, .hide{
    display: none;
}
.inline-block{
    display: inline-block;
}
/*
    END HANDY CLASSES
*/

.import-messages, .install-messages{
    margin-bottom: 30px;
    background-color: #FFF;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
}

.install-messages{
    margin-bottom: 0;
}

.import-messages .row.first, .install-messages .row.first{
    border-top: 1px solid #cdcdcd;
    margin-top: 10px;
}
.import-messages .row, .install-messages .row{
    border-bottom: 1px solid #cdcdcd;
    padding: 10px 0;
}

.import-messages .row .msg, .install-messages .row .msg{
    padding-left: 20px;
}

.import-messages .row .type-warnings .msg, .install-messages .row .type-warnings .msg{
    background: url('/modules/core/admin/images/icons/exclamation.png') no-repeat 0 0 transparent;
}

.import-messages .row .type-errors, .install-messages .row .type-errors {
    max-height: 200px;
    overflow: scroll;
    border: 1px dotted #F00;
    padding: 0 15px;
    margin-top: 10px;
    max-width: 800px;
}

.import-messages .row .type-errors .msg, .install-messages .row .type-errors .msg{
    background: url('/modules/core/admin/images/icons/cross.png') no-repeat 0 0 transparent;
}

.import-messages .row .type-saved .msg, .install-messages .row .type-ok .msg{
    background: url('/modules/core/admin/images/icons/tick.png') no-repeat 0 0 transparent;
}

/*==== VALIDATE ERRORS ====*/
.errorBox {
    display: none;
    margin-bottom: 20px;
    padding: 5px 10px;
    background: #FEF0DF;
    border: 1px solid #FFDDB7;
    color: #4E4E4E;
}

.errorBox .title{
    color: #f93a3a;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.errorBox label {
    float: none;
    width: 100%;
    height: auto;
}

.errorBox ul {
    margin-left: 15px;
}

.errorBox ul li {
    background: none !important;
    list-style: disc;
    padding: 0;
}

.accordion h2.accordion-title {
    cursor: pointer;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

.accordion h2.accordion-title.red {
    color: #f93a3a;
    background-color: #FFF7F7;
}

.accordion h2.accordion-title.green {
    color: #88BA01;
    background-color: #F3F8E6;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion h2.accordion-title.is-active, .accordion h2.accordion-title:hover {
    background-color: #ddd;
}

/* Style the accordion panel. Note: hidden by default */
.accordion .accordion-panel {
    padding: 10px;
    background-color: white;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
.accordion .accordion-panel.is-opened {
    display: block;
}

/* alerts */

.alert {
    border: 1px solid transparent;
    margin-bottom: 0px;
    padding: 15px;
    width:100%;
    z-index:9999;
    box-sizing: border-box;
}
.alert h4 {
    color: inherit;
    margin-top: 0;
}
.alert .alert-link {
    font-weight: 700;
}
.alert > p, .alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}
.alert-dismissable, .alert-dismissible {
    padding-right: 35px;
}
.alert-dismissable .close, .alert-dismissible .close {
    color: inherit;
    position: relative;
    right: -21px;
    top: -2px;
}
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
    color: #843534;
}
.alert .close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}
.alert .close:focus, .close:hover {
    color: #000;
    cursor: pointer;
    opacity: 0.5;
    text-decoration: none;
}

.alert i{
    font-size:20px;
    margin-right:10px;
}

/* Tabs*/
.tabs {
    position: relative;
    width: 100%;
}

.tabs .tabsHolder ul {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    background: #898987;
}

.tabs .tabsHolder ul li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    color: #fff;
    background-color: #898987;
    border-right: 1px solid #fff;
}

.tabs .tabsHolder ul li:hover {
    cursor: pointer;
}

.tabs .tabsHolder ul li span.label {
    display: block;
    padding: 5px 10px;
}

.tabs .tabsHolder ul li span.label:hover {
    background: none repeat scroll 0 0 #000;
    transition: background 0.3s ease-in 0s;
    color: #fff;
}
.tabs .tabsHolder ul li.active span.label {
    background-color: #000;
    color: #fff;
}

.tabs .tabsHolder ul li span.label i.fa {
    font-size: 23px;
    text-align: center;
    width: 100%;
    line-height: 30px;
}

.tabs .tabDetails .tabContent {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.tabs .tabDetails .tabContent.opened {
    color: #000000;
    opacity: 1;
    height: auto;
    visibility: visible;
    padding: 10px 10px 20px 10px;
    border: 1px solid #ccc;
    background: #fff;
}

.tabs .tabDetails .tabLabel {
    display: none;
}


.no-label .language{
    display: none;
}

div.styled-box#login-container{
    width: 566px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    margin-top: 60px;
}

div.styled-box#login-container #leftColumn, div.styled-box#login-container #rightColumn{
    height: 100%;
}
div.styled-box#login-container #leftColumn{
    float: left;
    text-align: center;
    border-right: 1px solid #C5C5C5;
    width: 280px;
}
div.styled-box#login-container #rightColumn{
    float: right;
    width: 283px;
}


div.styled-box#login-container #leftColumn, div.styled-box#login-container #rightColumn{
    height: 100%;
}
div.styled-box#login-container #leftColumn{
    float: left;
    text-align: center;
    border-right: 1px solid #C5C5C5;
    width: 280px;
}
div.styled-box#login-container #rightColumn{
    float: right;
    width: 283px;
}

div.styled-box#login-container #rightColumn div#login-form-container{
    text-align: right;
    margin: 0 auto;
    width: 200px;
}

div.styled-box#login-container #rightColumn div#login-form-container input[type="text"], div.styled-box#login-container #rightColumn div#login-form-container input[type="password"]{
    width: 92%;
    margin-bottom: 10px;
}

div.styled-box#login-container #rightColumn div#login-form-container input.usernameField{
    margin-top: 20px;
}
div.styled-box#login-container #rightColumn div#login-form-container input.passwordField{
    margin-bottom: 20px;
}

div.styled-box#login-container #leftColumn div#logo-positioner{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 159px;
    width: 283px;
}
div.styled-box#login-container #leftColumn div.logo-positioner img{
    width: 228px;
    height: 135px;
}

div.styled-box#login-container footer{
    text-align: right;
    margin-top: 10px;
    color: #6a6e76;
    font-size: 11px;
    padding: 10px;
}

.cc-preview {
    width: 385px;
    font-size: 17px;
    cursor: not-allowed;
    margin: 1em;
}

.cc-preview-container {
    color: white;
    padding: 1.5em;
}

.cc-preview-buttons {
    width: 100%;
    text-align: center;
    color: white;
}

.cc-preview-button{
    padding: .5em 0;
}

.cc-warningtext{
    color: red;
}

.cc-table {
    width: 100%;
}

.cc-save-button{
    margin: 1em 0;
}

.module-selector{
    column-count: 5;
}

.copy-url {
    cursor: pointer;
}
.copy-url i {
    margin: 0 7px;
}
.copy-url:hover {
    color: #000;
}