/* ==========================================================================
   Base
   ========================================================================== */

body {
    color: #333;
    font-size: 12px;
    font-family: "Helvetica", "OpenSans-Regular", Arial, sans-serif;
}

/* Theo Tol : 2 maart 2020
   Fix voor zoekvelden in de vorm van een dropdown met multi-select functionaliteit */
body > .dropdown-menu {
  width: auto;
}
/* Theo Tol : 2 maart 2020 */

a {
    color: #428bca;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #758ac4;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}

a:hover,
a:focus {
    color: #2a6496;
}

a:focus {
    outline: thin dotted #333333;
    outline-offset: -2px;
}

.mx-datagrid input,
.mx-datagrid select,
.mx-datagrid textarea,
.form-control {
    height: 30px;
    font-size: 14px;
    padding: 5px 5px;
}

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

.mx-fileinput .mx-wrapped-input {
    cursor: pointer;
}

.alert {
    padding: 8px;
}

/* Oude validation class die niet meer werkt in mx9 aangezien dan de feedback ook display:none overneemt
.validation-helper-control label{
    display: none;
}
*/

.validation-helper-control.mx-textbox {
    height:0px;
    min-height: 0px;
    max-height: 0px;
}

.validation-helper-control.mx-textbox.form-group.has-error {
    height:0px;
    margin-bottom: 77px;
    margin-top: -30px;
}

.validationtarget.mx-radiobuttons{
    min-height: auto;
    padding: 0px;
    border-bottom: none;
    margin-top: -29px;
    z-index: -1;
    position: relative;
}

.table th {
    font-family: "OpenSans-Semibold";
    font-weight: 600;
    font-style: normal;
}

.mx-link {
    padding: 6px 0;
}


/* Fonts
   ========================================================================== */

@font-face {
    font-family: "OpenSans-Regular";
    src: url("fonts/OpenSans-Regular.eot");
    /* IE9 Compat Modes */
    src: url("fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Regular.woff") format("woff"), url("fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans-Semibold";
    src: url("fonts/OpenSans-Semibold.eot");
    /* IE9 Compat Modes */
    src: url("fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Semibold.woff") format("woff"), url("fonts/OpenSans-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans-Bold";
    src: url("fonts/OpenSans-Bold.eot");
    /* IE9 Compat Modes */
    src: url("fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Bold.woff") format("woff"), url("fonts/OpenSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}


/* ==========================================================================
   Default Modal
   ========================================================================== */

.mx-window-header {
    background-color: #eeeeee;
}

.mx-window-active .mx-window-header {
    background-color: #758ac4;
    border-radius: 6px 6px 0 0;
}

.mx-window-header h4 {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.mx-window-header .close {
    color: #4d4d4f;
    text-shadow: none;
    opacity: 1;
    margin-top: 8px;
}

.modal-header {
    padding: 5px 15px;
}


/* ==========================================================================
   Default Login Modal
   ========================================================================== */

.mx-login .modal-content {
    border-style: none;
    background: #fff;
    box-shadow: none;
}

.mx-login .modal-body {
    padding: 0 15px;
}

.mx-login .modal-content input {
    font-size: 16px;
    height: 56px;
    padding: 12px 12px;
    border: 1px solid #eee;
    background: #eee;
    box-shadow: none;
}

.mx-login .modal-content input:focus {
    border-color: #66afe9;
}

.mx-login .modal-header,
.mx-login .modal-footer {
    border-style: none;
}

.mx-login button {
    font-size: 16px;
}

.mx-login h4 {
    font-weight: bold;
    font-size: 20px;
    color: #aaa;
}


/* Default Modal Underlay
   ========================================================================== */

.mx-underlay {}


/* ==========================================================================
   Layout Container
   ========================================================================== */

.mx-layoutcontainer-wrapper,
.mx-layoutcontainer-middle .mx-layoutcontainer-wrapper.mx-layoutcontainer-nested,
.mx-layoutcontainer-middle .mx-layoutcontainer-left .mx-layoutcontainer-wrapper {
    padding: 0;
}

.mx-layoutcontainer-middle .mx-layoutcontainer-wrapper {
    padding: 20px 40px 0px;
}

.mx-layoutcontainer-top {
    background: #98cfbc;
}

.mx-table > tbody > tr > th {
    padding: 3px 10px 3px 5px;
    text-align: right;
}

.mx-table td {
    padding: 3px 5px;
}


/* ==========================================================================
   Buttons & Colors
   ========================================================================== */

.light-bg h1 {
    color: #2b2e83;
}

.mx-button {
    background: #758ac4;
}

.btn-default {
    font-size: 14px;
}

.buttonbar .btn-default {
    margin: 5px;
}

.btn-default:hover,
.btn-default:focus {}

.btn-inverse {
    background: #ee7203;
}

.btn-inverse:hover {
    background: #ee7203;
}

.btn-inverse:focus {}

.btn-primary {
    background: #2b2e83;
}

.btn-primary:hover {
    background: #758ac4;
}

.btn-primary:focus {}

.btn-info {}

.btn-info:hover,
.btn-info:focus {}

.btn-success {}

.btn-success:hover,
.btn-success:focus {}

.btn-warning {}

.btn-warning:hover,
.btn-warning:focus {}

.btn-danger {}

.btn-danger:hover,
.btn-danger:focus {}

.btn.disabled,
.btn[disabled] {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.mx-button.mx-fileinput-upload-button {
    background: #2b2e83;
}

.mx-dateinput-select-button,
.mx-listview-clear-button {
    padding: 5px 10px;
}

.light-bg h1 {
    color: #2b2e83;
}

.btn-default:hover,
.btn-success:hover,
.btn-default:visited,
.btn-success:visited,
.btn-default:focus,
.btn-success:focus {
    background: #2b2e83;
}

.light-bg h2 {
    font-size: 16px;
    font-weight: bold;
    color: #2b2e83;
}

.FileDocumentViewer.mx-groupbox.mx-name-fileDocumentViewer1 h2 {
    color: #c1e4f2;
}

.StepErrors h4 {
    color: red;
}


/* ==========================================================================
   Typography
   ========================================================================== */

.mx-title {
    font-size: 24px;
    margin: 15px 0px;
    font-weight: bold;
}

.mendixFormView_headerLabel label {
    padding-bottom: 5px;
    font-size: 18px;
    border-bottom: 1px solid #f4f4f4;
}

.headlabel .control-label {
    text-transform: uppercase;
    text-decoration: underline;
}


/* ==========================================================================
   Grids
   ========================================================================== */

.mx-datagrid-head th {
    background: #eee;
}

.mx-datagrid-head-wrapper {
    cursor: pointer;
}


/* 
.table-striped tbody>tr:nth-child(odd)>td, 
.table-striped tbody>tr:nth-child(odd)>th {
	background: #FFF;
}
 */

.table-striped>tbody>tr:nth-child(2n+1)>td,
.table-striped>tbody>tr:nth-child(2n+1)>th {
    background-color: #f9f9f9;
}

.mx-datagrid-body-table td {
    border-bottom: 1px solid #f1edee;
}

.mx-datagrid-body-table tr:last-child td {
    border-bottom: none;
}

.mx-datagrid .mx-datagrid-body-table .selected td {
    background-color: #e7f1fb;
}

.mx-grid-search-input {
    width: 225px;
}

.mx-grid-search-label {
    width: 125px;
}

.mx-grid-search-message {
    color: #8a0a0a;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
}


/* Show spinner in Search button when the buttons is clicked
*/

.mx-grid-search-controls .mx-grid-search-button[disabled="disabled"] {
    background: url(img/ajax-loader.gif) #eeeeee;
    color: #a0a0a0;
    background-repeat: no-repeat;
    background-position: 8px 8px;
    /* equivalent to 'left top' */
    text-indent: 24px;
}

.mx-grid-pagingbar .mx-button {
    padding: 6px;
    border-style: none;
}

.mx-templategrid-item {
    padding: 0;
    border: 5px solid transparent;
}

.mx-templategrid-item.selected {
    background-color: transparent;
}

.mx-templategrid-item table {
    border: 1px solid #ddd;
}

.mx-templategrid-item.selected table {
    background-color: #f5f5f5;
}


/* ==========================================================================
   Tab Container
   ========================================================================== */

.mx-tabcontainer-tabs {
    margin-bottom: 0;
}

.mx-tabcontainer-tabs>li>a {
    color: #333;
    border-color: #ddd;
    background: #ddd;
}

.mx-tabcontainer-nested ul {
    background: #fafafa;
}

.mx-tabcontainer-nested ul>li>a {
    border-style: none;
    background: none;
}

.mx-tabcontainer-nested ul>li.active>a {
    border-style: none;
    font-weight: bold;
    background: none;
}

.mx-tabcontainer-nested ul>li>a:hover,
.mx-tabcontainer-nested ul>li>a:focus {
    border-style: none;
}

.mx-tabcontainer-nested ul>li.active>a:hover,
.mx-tabcontainer-nested ul>li.active>a:focus {
    border-style: none;
    background: none;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    background-color: #87c2ea;
    border: 1px solid #87c2ea;
}

.tab-content>.tab-pane {
    margin-top: 8px;
}


/* ==========================================================================
   Group Box
   ========================================================================== */

.mx-groupbox-header {
    color: #fff;
    background: #87c2ea;
}


/* ==========================================================================
   Navigation
   ========================================================================== */


/* Navigation Bar
========================================================================== */

.mx-navbar {
    margin: 0;
    min-height: 60px;
    border-style: none;
    background: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.mx-navbar .nav>.mx-navbar-item>a {
    padding: 20px 15px 20px;
    color: #2b2e83;
    font-family: "Helvetica", "OpenSans-Regular", Arial, sans-serif;
    font-size: 13px;
    text-shadow: none;
    font-weight: bold;
}

.mx-navbar .nav>.mx-navbar-item>a:hover,
.mx-navbar .nav>.mx-navbar-item>a:focus {
    background: #fff;
    color: #87c2ea;
}

.mx-navbar .nav li.dropdown.open>.dropdown-toggle,
.mx-navbar .nav li.dropdown.active>.dropdown-toggle,
.mx-navbar .nav li.dropdown.open.active>.dropdown-toggle {
    border-color: #d5dce0;
    color: #3498db;
    background: none;
}

.mx-navbar .nav li.dropdown>.dropdown-toggle .caret {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.mx-navbar-sublist {
    border-color: #368ee0;
}


/* Dropdown */

.mx-navbar .mx-navbar-item .mx-navbar-submenu {}

.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a {}

.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a:hover,
.mx-navbar .mx-navbar-item .mx-navbar-submenu .mx-navbar-subitem a:focus {}


/* Navigation Tree
========================================================================== */

.mx-navigationtree a {
    display: block;
    padding: 5px 10px;
    color: #2b2e83;
}

.mx-navigationtree a.active {
    color: #fff;
    text-shadow: none;
    background: #2b2e83;
    border-radius: 0px;
}

.mx-navigationtree a:focus {
    color: #fff;
    text-shadow: none;
    background: #2b2e83;
    border-radius: 0px;
}

.mx-navigationtree a:hover {
    color: #fff;
    text-shadow: none;
    background: #2b2e83;
    border-radius: 0px;
}

.mx-navigationtree li {
    padding: 5px 0;
    border-bottom: 1px solid #dfe6ea;
}

.mx-navigationtree ul {
    margin: 0;
    padding: 0;
}

.mx-navigationtree ul li {
    padding: 3px 3px;
    margin-left: 5px;
}

.mx-navigationtree ul li ul {
    padding: 0;
    margin-left: 10px;
}

.mx-navigationtree ul li ul li {
    padding: 3px 0px;
    margin-left: 5px;
}

.mx-navigationtree .mx-navigationtree-has-items>a {
    font-weight: normal;
}

.mx-navigationtree .mx-navigationtree-has-items ul li:last-child {
    border-style: none;
}


/* Navigation List
========================================================================== */

.mx-layoutcontainer-left {
    padding-top: 0;
    border-right: 1px solid #f1edee;
    background: #f7f7f7;
}

.mx-layoutcontainer-left td,
.mx-layoutcontainer-left th {
    padding: 0;
}

.mx-layoutcontainer-left label {
    padding: 14px;
    font-size: 16px;
    font-family: "OpenSans-SemiBold", Arial, sans-serif;
}

.mx-layoutcontainer-top .mx-layoutcontainer-left {
    padding-top: 0;
    vertical-align: middle;
    border-style: none;
    background: none;
}

.mx-layoutcontainer-top .mx-layoutcontainer-left img {
    margin-left: 85px;
}

.mx-layoutcontainer-top .mx-layoutcontainer-right {
    vertical-align: middle;
}

.mx-layoutcontainer-top .mx-layoutcontainer-right a {
    color: #fff;
    margin-left: 3px;
}

.mx-layoutcontainer-top .mx-layoutcontainer-right a:hover {
    color: #333;
}

.mx-layoutcontainer-left .mx-navigationlist {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #dedede;
    padding: 0;
}

.mx-layoutcontainer-left .mx-navigationlist>li {
    padding: 0;
    border-style: none;
    background: none;
}

.mx-layoutcontainer-left .mx-navigationlist>li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mx-layoutcontainer-left .mx-navigationlist>li:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mx-layoutcontainer-left .mx-navigationlist>li:nth-child(2n+1) {
    background-color: none;
}

.mx-layoutcontainer-left .mx-navigationlist>li:hover {
    background: none;
}

.mx-layoutcontainer-left .mx-navigationlist>li label {
    border-top: 1px solid #dedede;
    display: block;
    padding: 6px 12px;
    color: #333;
    font-family: "OpenSans-Regular", Arial, sans-serif;
    font-size: 12px;
}

.mx-layoutcontainer-left .mx-navigationlist>li label:hover,
.mx-layoutcontainer-left .mx-navigationlist>li label:focus {
    background: #758ac4;
}

.mx-list>li:nth-child(2n+1) {
    background: none;
}


/* ==========================================================================
   Dijit Widgets
   ========================================================================== */


/* Calendar
========================================================================== */

.dijitCalendarContainer {
    background-color: #eff0f2;
    border-style: solid;
    border-width: 1px;
    box-shadow: 5px 10px 20px #888888;
}

.dijitCalendarContainer tr th,
.dijitCalendarContainer tr td {
    padding: 6px;
    text-align: center;
}

.dijitCalendarContainer tr th {
    text-align: center;
    color: #fff;
    background-color: #34495e;
}

.dijitCalendarContainer tr .dijitCalendarArrow {
    cursor: pointer;
}

.dijitCalendarMonthLabel {
    font-weight: bold;
}

.dijitCalendarContainer .dijitCalendarMonthContainer th:first-child {
    border-top-left-radius: 3px;
}

.dijitCalendarContainer .dijitCalendarMonthContainer th:last-child {
    border-top-right-radius: 3px;
}

.dijitCalendarContainer .dijitButtonNode {
    border-style: none;
}

.dijitCalendarSelectedDate,
.dijitCalendarSelectedDate:hover {
    color: #fff;
    background: #ee7203;
    border-radius: 0px;
}

.dijitCalendarSelectedDate:focus {
    outline-color: transparent;
}

.dijitCalendarHoveredDate,
.dijitCalendarPreviousYearHover,
.dijitCalendarNextYearHover,
.dijitCalendarMonthLabelHover {
    background-color: #dbdcdd;
    border-radius: 0px;
}

.dijitCalendarYearContainer {
    background: #ee7203;
}

.dijitCalendarYearContainer td {
    font-weight: bold;
    border-top: 1px solid #dbdcdd;
    text-align: center;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}


/* Tooltip
========================================================================== */

.dijitTooltipContainer {
    border-width: 1px;
    border-color: #34495e;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.mx-tooltip-content {
    padding: 5px;
}

.dijitTooltipConnector {
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-right-color: #34495e;
    border-width: 10px 10px 10px 0;
    margin-left: -10px;
}


/* Split Container
========================================================================== */

.dijitBorderContainer {
    background-color: #fcfcfc;
    padding: 5px;
}

.dijitSplitContainer-child,
.dijitBorderContainer-child {
    border: 1px #ccc solid;
}

.dijitBorderContainer-dijitTabContainerTop,
.dijitBorderContainer-dijitTabContainerBottom,
.dijitBorderContainer-dijitTabContainerLeft,
.dijitBorderContainer-dijitTabContainerRight {
    border: none;
}

.dijitBorderContainer-dijitBorderContainer {
    border: none;
    padding: 0;
}

.dijitSplitterH,
.tundra .dijitGutterH {
    background: #fcfcfc;
    border: 0;
    height: 5px;
}

.dijitSplitterH .dijitSplitterThumb {
    background: #b0b0b0 none;
    height: 1px;
    top: 2px;
    width: 19px;
}

.dijitSplitterV,
.dijitGutterV {
    background: #fcfcfc;
    border: 0;
    width: 5px;
}

.dijitSplitterV .dijitSplitterThumb {
    background: #b0b0b0 none;
    height: 19px;
    left: 2px;
    width: 1px;
}

.dijitSplitterActive {
    font-size: 1px;
    background-image: none;
    background-color: #aaa;
    -moz-opacity: 0.6;
    opacity: 0.6;
    filter: Alpha(Opacity=60);
    margin: 0;
}

.dijitSplitContainer-dijitContentPane,
.dijitBorderContainer-dijitContentPane {
    background-color: #fff;
    padding: 5px;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

.profile-phone .mx-layoutcontainer-middle .mx-layoutcontainer-wrapper {
    padding: 10px;
}

.mx-header {
    padding: 15px 0;
    border-bottom: 1px solid #00325c;
    background: #368ee0;
}

.mx-header .mx-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: bold;
}

.mx-header .btn {
    font-family: Montserrat, Arial, sans-serif;
    border-style: none;
    text-shadow: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.mx-menubar {
    padding: 0;
}

.profile-phone .mx-layoutcontainer-bottom,
.profile-tablet .mx-layoutcontainer-bottom {
    border-top: 2px solid #2c3e50;
    background: #34495e;
}

.mx-menubar .navbar-inner {
    padding: 0;
    min-height: auto;
    border-radius: 0;
    border-style: none;
    background: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.mx-layoutcontainer-wrapper .mx-menubar ul li {
    border-right: 1px solid #2c3e50;
    background: #34495e;
}

.mx-layoutcontainer-wrapper .mx-menubar ul li a {
    padding: 5px 15px 5px;
    color: #fff;
    font-family: "OpenSans-SemiBold", Arial, sans-serif;
    font-size: 14px;
    text-shadow: none;
}

.mx-layoutcontainer-wrapper .mx-menubar ul li a:hover,
.mx-layoutcontainer-wrapper .mx-menubar ul li a:hover {
    color: #fff;
    background: none;
}

.mx-layoutcontainer-bottom .mx-layoutcontainer-wrapper .mx-menubar ul li.active a {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}

.mx-menubar .mx-menubar-icon {
    display: block;
    margin: auto auto 5px auto;
    width: 25px;
    height: 25px;
}

.profile-phone .alert-danger,
.profile-phone .alert-error {
    padding: 5px 10px 5px 14px;
    font-size: 12px;
}


/* ==========================================================================
   Widgets
   ========================================================================== */

.RadioButtonList input {
    margin: 4px 0 10px;
}

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

input[type="radio"] {
    margin: 2px 0px 0px;
}

input[type="checkbox"] {
    margin: 8px 0px 0px;
}


/* ==========================================================================
   Custom
   ========================================================================== */

.endusername {
    padding-right: 15px;
    text-align: right;
}

.endusername label {
    font-weight: bold;
}

.mandatory {
    color: #87c2ea;
}

.currreg {
    font-weight: bold;
    font-family: Helvetica;
    color: orange;
    font-size: 12px;
}


/* Classes for custom alignment of elements and grid columns
/****************************************/

.int-align-left {
    text-align: left !important;
}

.int-align-center {
    text-align: center !important;
}

.int-align-right {
    text-align: right !important;
}


/* Classes for LoginSystem widget
/****************************************/

.login-container {
    display: table;
    width: 90%;
    max-width: 320px;
    min-width: 320px;
    height: 80%;
    margin: auto;
}

.forgotPwd {
    padding-left: 10px;
}

.login-form {
    display: table-cell;
    padding: 20px 10px 10px;
    vertical-align: middle;
}

.login-logo {
    margin-bottom: 40px;
    background: url(/img/General_Images_General_pass_new_logo.png) no-repeat center;
    height: 127px;
    /* Set the height of the logo here */
}

.login-message h4 {
    font-size: 12px;
    color: red;
    line-height: inherit;
}

.login-form label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.login-form .auto-sign-in {
    margin-left: 8px;
    font-weight: inherit;
    font-size: 12px;
}

.login-form td {
    padding: 0px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
}


/* Button colours identical to Theme .btn-primary
/****************************************/

.login-form input[type="submit"] {
    font-size: 14px;
    margin-top: 4px;
    height: 38px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #068bce;
    color: #000;
}

form a {
    text-decoration: underline;
    color: #7674a4;
}

.listview-no-border .mx-listview-item {
    border: 0;
    margin: 0;
}

.listview-no-select .mx-list li:hover {
    background: transparent;
}


/* Classes for Dropzone widget
/****************************************/

.dropzone {
	border: 0px dashed rgba(0, 0, 0, 0.3);
	background: #F7F7F7;
	margin-bottom: 20px; 
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='rgba(0, 0, 0, 0.3)' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.dz-error-message {
	margin-top: 20px;
}

.dz-preview {
	background: none  !important;
}

.dz-image {
	background: #FFFFFF; 
}

.dz-details {
	padding-top: 15px;
}

.dz-size {
	margin-bottom: 5px;
}

.dz-remove {
	background: none; 
}

.dz-error .dz-error-mark {
	opacity: 0.5 !important;
	background: red;
	border-radius: 100%;
	max-height: 54px;
	overflow: hidden;
}

.dz-error .dz-image {
	border: 1px solid red; 
}

.dz-success .dz-success-mark {
	opacity: 0.5;
	background: #C8EFD4;
	border-radius: 100%;
	max-height: 54px;
	overflow: hidden;
}


/* Widget RichText styling */

.widget-rich-text .ql-toolbar {
	white-space: normal;
}

.widget-rich-text.disabled-text {
	font-size: 14px;
}

.widget-rich-text .ql-editor {
	color: black;
}

.widget-rich-text .ql-editor p {
	font-size: 14px;
}