/*
    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;
}

body {
    line-height : 1;
}

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 : #ffff99;
    color            : #000000;
    text-decoration  : none;
}

/* change colours to suit your needs */
mark {
    background-color : #ffff99;
    color            : #000000;
    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 : #ffffff;
    border     : 1px solid #ececec;
}

fieldset.no-border {
    border : 0px;
}

fieldset.filter {
    border        : 1px solid #cccccc;
    border-bottom : 3px solid #cccccc;
    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 : #999999;
}

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

}

header div, header a {
    color       : #ffffff;
    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 : #ffffff;
}

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

.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         : #cccccc;
    font-size     : 30px;
    line-height   : 48px;
    border-radius : 500px;
    background    : #ffffff;
    overflow      : hidden;
}


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

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

header #logout a {
    color : #ffffff;
}

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 : #ffffff;
}

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

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

#main-nav ul li.sub.active a, #main-nav ul li.sub:hover a {
    color       : #ffffff;
    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 : #ffffff;
    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 : #ffffff;
}

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      : #ffffff;
    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 #ffffff;
    line-height           : 34px;
    margin                : 0;
}

div.styled-box div.box-content {

}

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

/* 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                 : #ffffff;
    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 : #ccff00;
}

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

input[type="submit"][disabled]:hover {
    cursor : default;
    color  : #ffffff;
}

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="date"].default,
input[type="number"].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          : #ffffff;
    cursor         : pointer;
    padding        : 5px 7px;
    vertical-align : middle;
}

table.sorted ul, table.dataTable ul {
    padding-left : 10px;
}

table.sorted, table.dataTable {
    border-collapse  : separate;
    border-spacing   : 1px;
    background-color : #e1e1e6;
    color            : #4f4f4f;
    min-width        : 50%;
}

table.sorted th, table.dataTable 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, table.dataTable tbody td {
    padding        : 3px 5px;
    line-height    : 25px;
    vertical-align : middle;
}

table.dataTable tbody td {
    vertical-align : top;
}

table.table-vertical-align-top tbody td {
    vertical-align : top;
}

table.sorted tr.even td, table.dataTable tr.even td {
    background-color : #f7fafe;
}

table.sorted tr.odd td, table.dataTable tr.odd td {
    background-color : #ffffff;
}

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      : #ffffff;
    position   : relative;
}

table.sorted th.headerSortUp:after {
    content      : "\f0de";
    font-family  : FontAwesome;
    color        : #ffffff; /* 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      : #ffffff;
    position   : relative;
}

table.sorted th.headerSortDown:after {
    content      : "\f0dd";
    font-family  : FontAwesome;
    color        : #ffffff; /* 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, table.dataTable tr.topRow td, table.dataTable tr.bottomRow td {
    background       : none;
    background-color : #ffffff;
    padding          : 10px;
    vertical-align   : middle;
    line-height      : 22px;
}

table.sorted tr.topRow td h2, table.sorted tr.bottomRow td h2, table.dataTable tr.topRow td h2, table.dataTable 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 : #999999 !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.view_icon {
    background : none;
}

.action_icon.view_icon::before {
    content     : "\e105";
    font-family : 'Glyphicons Halflings';
}

.action_icon.download_icon {
    background : none;
}

.action_icon.download_icon::before {
    content     : "\e197";
    font-family : 'Glyphicons Halflings';
    color       : #2b68a5;
}

.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";
}

.action_icon.refresh_icon::before {
    content: "\f021";
}

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 #ffffff;
    padding-left : 25px;
}

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

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        : #ff0000;
    padding-left : 5px;
}

.validColor {
    color : #00930e;
}

.errorColor {
    color : #ff0000;
}

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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    width         : 100%;
    text-align    : center;
    padding       : 20px;
    margin-top    : 10px;
    margin-bottom : 10px;
    box-sizing    : border-box;
}

div.uploadsDropZone.dragover {
    color        : #cccccc;
    border-color : #88ba01;
}

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

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      : #cccccc;
}

/*
    BEGIN SORTABLE (1 level)
*/

div.likeTopRow, div.likeBottomRow {
    background-color : #ffffff;
    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 : #ffffff;
    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            : #ffffff;
}

ol.nestedSortable li div:hover .actionIconsHolder .action_icon::before {
    color : #ffffff !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
*/


.login-box.hide {
    visibility : hidden;
}

#login-box {
    transition         : all 0.6s ease-in;
    -webkit-transition : all 0.6s ease-in;
    -moz-transition    : all 0.6s ease-in;
    -o-transition      : all 0.6s ease-in;
    display            : block;
    height             : auto !important;
    left               : 50%;
    margin-left        : -180px;
    position           : absolute;
    text-align         : center;
    top                : 100px;
    width              : 360px;
    z-index            : 999;
    padding-bottom     : 20px;
    padding-top        : 20px;
    background         : rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    border-radius      : 0px;

}

#login-box .overflow.user {
    background    : rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    border-radius : 500px;
    height        : 150px;

    margin        : 0px auto;
    overflow      : hidden;
    width         : 150px;
}

#login-box #login-form-container {
    padding : 0 20px;
    width   : 320px;
}

#login-box .usernameField {
    height        : 35px;
    margin-bottom : 7px;
    min-width     : 250px;
    width         : 100%;
    border-radius : 0px;
    box-sizing    : border-box;
}

#login-box .passwordField {
    height        : 35px;
    margin-bottom : 20px;
    min-width     : 250px;
    width         : 100%;
    border-radius : 0px;
    box-sizing    : border-box;
}

#login-box .overflow.user i {
    color       : #777777;
    font-size   : 145px;
    line-height : 200px;
}

.backstretch:after {
    position   : absolute;
    width      : 100%;
    height     : 100%;
    background : rgba(0, 0, 0, 0.5);
    z-index    : 999;
    content    : '';
}

.backstretch.focus:after {
    background : rgba(0, 0, 0, 0.1);
}

.backstretch img {
    -webkit-transition : transform 1s ease; /* Safari and Chrome */
    -moz-transition    : transform 1s ease; /* Firefox */
    -ms-transition     : transform 1s ease; /* IE 9 */
    -o-transition      : transform 1s ease; /* Opera */
    transition         : transform 1s ease;
}

.backstretch.focus img {
    -webkit-transform : scale(1.05); /* Safari and Chrome */
    -moz-transform    : scale(1.05); /* Firefox */
    -ms-transform     : scale(1.05); /* IE 9 */
    -o-transform      : scale(1.05); /* Opera */
    transform         : scale(1.05);
}

#login-box h3 {
    font-family : 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size   : 25px;
    color       : #ffffff;
    margin-top  : 5px;
}

/*
    END LOGIN MODULE
*/

/*
    BEGIN PAGE MODULE
*/
form#pageStructureForm {
    margin-top : 10px;
}

div.likeBottomRow.pageModule {
    margin-top : -1px;
}

div.likeSorterTr {
    background-color : #ffffff;
    border           : 1px solid #cccccc;
    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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    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 : #ffffff;
}


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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    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         : #ffffff;
    padding       : 10px;
    border-radius : 5px;
}

#progressBarWidthParent {
    background    : #ffffff;
    border        : 1px solid #cccccc;
    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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    background-color      : #ffffff;
    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 #cccccc;
    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 : #ffffff;
    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            : #ffffff;
    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, span.ajax-loader.hide{
    display : none;
}

.inline-block {
    display : inline-block;
}

/*
    END HANDY CLASSES
*/

.import-messages, .install-messages {
    margin-bottom    : 30px;
    background-color : #ffffff;
    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 #ff0000;
    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 : #dddddd;
}

/* 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       : #000000;
    float       : right;
    font-size   : 21px;
    font-weight : 700;
    line-height : 1;
    opacity     : 0.2;
    text-shadow : 0 1px 0 #ffffff;
}

.alert .close:focus, .close:hover {
    color           : #000000;
    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            : #ffffff;
    background-color : #898987;
    border-right     : 1px solid #ffffff;
}

.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 #000000;
    transition : background 0.3s ease-in 0s;
    color      : #ffffff;
}

.tabs .tabsHolder ul li.active span.label {
    background-color : #000000;
    color            : #ffffff;
}

.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 #cccccc;
    background : #ffffff;
}

.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;
}

.dataTable ul.files-list {
    padding         : 0;
    list-style-type : none;
}

.dataTable ul.files-list div.filePlaceholder span.fileType {
    top : 3px;
}

.ui-autocomplete {
    z-index : 999999 !important;
}

.ui-autocomplete-optgroup .ui-autocomplete-optgroup-wrapper {
    position    : relative;
    padding     : 3px 1em 3px .4em;
    font-weight : bold;
}

input.default.ui-autocomplete-loading, input.default.ajax-loader {
    padding-right : 30px;
    background    : url('/modules/core/admin/images/ajax-loader-small.gif') no-repeat right center #ffffff;
}

span.tag, a.add-tag {
    display          : inline-block;
    padding          : 2px 5px;
    border-radius    : 5px;
    background-color : #454545;
    color            : #ffffff;
    margin-left      : 5px;
    line-height      : 1.5;
}

.created_modified {
    font-size     : 10px;
    font-style    : italic;
    padding-top   : 5px;
    margin-top    : 5px;
    margin-bottom : 5px;
    border-top    : 1px solid #cccccc;
}

span.ajax-loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/modules/core/admin/images/ajax-loader-small.gif') no-repeat left center transparent;
}

span.ajax-loader.after-select, span.ajax-loader.after-input {
    position: relative;
    top: 5px;
}

a.action_icon.after-select, a.action_icon.after-input {
    position: relative;
    top: 5px;
    width: 18px;
}

a.action_icon.after-select::before, a.action_icon.after-input::before {
    width: 18px;
}

.text-after-input {
    position: relative;
    top: 3px;
}

/*
    BEGIN PRODUCT PROPERTY TYPES
*/
ul.sortable, ul.non-sortable {
    margin-top : 10px;
}

ul.sortable .placeholder-inner:hover {
    cursor : move;
}

ul.sortable .placeholder, ul.non-sortable .placeholder {
    border                : 2px solid #cccccc;
    background-color      : #ffffff;
    position              : relative;
    display               : block;
    border-radius         : 5px;
    -moz-border-radius    : 5px;
    -webkit-border-radius : 5px;

    line-height           : 28px;
    padding               : 0 7px;
    margin-bottom         : 5px;
}

ul.sortable .placeholder .placeholder-inner div.value, ul.non-sortable .placeholder .placeholder-inner div.value {
    float   : left;
    width   : 30%;
    padding : 0 5px 0 0;
}


ul.sortable .placeholder .placeholder-inner div.setting, ul.non-sortable .placeholder .placeholder-inner div.setting {
    float   : left;
    width   : 30%;
    padding : 0 5px 0 0;
}

ul.sortable .placeholder .actionsPlaceholder, ul.non-sortable .placeholder .actionsPlaceholder {
    margin   : 0 3px;
    position : absolute;
    top      : 3px;
    right    : 0;
}

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

div.placeholder-inner {
    position : relative;
}

select.chosen.error + div.chosen-container a.chosen-single {
    border     : 1px solid #f93a3a !important;
    background : #fedfdf !important;
}

select.chosen.error + div.chosen-container div.chosen-drop {
    border : 1px solid #f93a3a !important;
}

input[type=checkbox].error + label {
    color : #f93a3a;
}

.chosen-category .chosen-results li.disabled-result {
    color       : #000000 !important;
    font-weight : 800;
}

/* Nested checkboxes */
ul.nestedCheckboxes > li {
    padding        : 5px 0;
    position       : relative;
    vertical-align : top;
    border-bottom  : 1px solid #cccccc;
}

ul.nestedCheckboxes li.has-sub ul li:last-child {
    border-bottom : 0;
}

ul.nestedCheckboxes li.has-sub .dropdown {
    right    : 0;
    position : absolute;
    display  : inline-block;
}

ul.nestedCheckboxes li.has-sub ul {
    margin-left : 15px;
}

ul.nestedCheckboxes li.has-sub ul li input {
    font-size : 15px;
}

ul.nestedCheckboxes li input {
    color           : #ffffff;
    padding         : 5px 0;
    font-size       : 18px;
    font-weight     : 500;
    display         : inline-block;
    text-decoration : none;
}

ul.nestedCheckboxes li .dropdown {
    float               : right;
    display             : none;
    position            : relative;
    user-select         : none;
    -moz-user-select    : none;
    -webkit-user-select : none;
}

ul.nestedCheckboxes li .dropdown:after {
    font-size   : 14px;
    cursor      : pointer;
    content     : "\f055";
    padding     : 5px 10px;
    font-family : FontAwesome;
    transition  : all 0.15s ease-in-out;
}

ul.nestedCheckboxes li .dropdown.is-active:after {
    content : "\f056";
}


/*
    END PRODUCT PROPERTY TYPES
*/