<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/**
 * Rand: 6883a135a1ebb
 * LastModified: 2025-07-25 17:21:48
 * AppUrl: https://mijn.vdx.nl/
 * PrimColor: #70b743
 * PrimColorInv: #ffffff
 * SecColor: #5a5a5a
 * SecColorInv: #ffffff
 * HighlightColor: #ffc421
 * HighlightColorInv: #000000
 * TextColor: #000000
 * TextColorAlt: #5a5a5a
 * BorderRadius: 3px
 * 
 * All @import rules moved to the top, in order:
 */


@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=swap);

/**
 * Clearlogic B.V. Icon Font
 * @version $Id$
 * @copyright Clearlogic B.V.
 */

@font-face {
	font-family: 'cl-icons';
	src: url('https://mijn.vdx.nl/assets/fonts/cl-icons/icomoon.eot?6883a135a1ebb');
	src: url('https://mijn.vdx.nl/assets/fonts/cl-icons/icomoon.eot?6883a135a1ebb#iefix') format('embedded-opentype'),
		url('https://mijn.vdx.nl/assets/fonts/cl-icons/icomoon.woff?6883a135a1ebb') format('woff'),
		url('https://mijn.vdx.nl/assets/fonts/cl-icons/icomoon.ttf?6883a135a1ebb') format('truetype'),
		url('https://mijn.vdx.nl/assets/fonts/cl-icons/icomoon.svg?6883a135a1ebb#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ------------------------------  */
/* Base */

.cl-icon {
	font-family: 'cl-icons', monospace;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.cl-icon-text-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ------------------------------  */
/* Icons */


/**
 * Common (e0)
 */
.cl-icon.cl-edit-2:after { content: "\e0a6"; }
.cl-icon.cl-archive:after { content: "\e060"; }
.cl-icon.cl-calendar:after { content: "\e061"; }
.cl-icon.cl-cart:after { content: "\e062"; }
.cl-icon.cl-check:after { content: "\e063"; }
.cl-icon.cl-warning:after { content: "\e064"; }
.cl-icon.cl-warning-inverse:after { content: "\e065"; }
.cl-icon.cl-delete:after { content: "\e067"; }
.cl-icon.cl-upload:after { content: "\e06a"; }
.cl-icon.cl-download:after { content: "\e06b"; }
.cl-icon.cl-edit:after { content: "\e06c"; }
.cl-icon.cl-forbidden:after { content: "\e06d"; }
.cl-icon.cl-clock:after { content: "\e06e"; }
.cl-icon.cl-go-back:after { content: "\e06f"; }
.cl-icon.cl-go-forward:after { content: "\e070"; }
.cl-icon.cl-pay-now:after { content: "\e071"; }
.cl-icon.cl-view:after { content: "\e072"; }
.cl-icon.cl-home:after { content: "\e074"; }
.cl-icon.cl-logout:after { content: "\e07c"; }
.cl-icon.cl-message:after { content: "\e07e"; }
.cl-icon.cl-notifications-1:after { content: "\e07f"; }
.cl-icon.cl-notifications-2:after { content: "\e080"; }
.cl-icon.cl-notifications-3:after { content: "\e081"; }
.cl-icon.cl-subarrowright:after { content: "\e082"; }
.cl-icon.cl-questionmark:after { content: "\e083"; }
.cl-icon.cl-star:after { content: "\e084"; }
.cl-icon.cl-star-fill:after { content: "\e085"; }
.cl-icon.cl-phone:after { content: "\e086"; }
.cl-icon.cl-refresh:after { content: "\e089"; }
.cl-icon.cl-resize:after { content: "\e08b"; }
.cl-icon.cl-resize-max-1:after { content: "\e08c"; }
.cl-icon.cl-resize-max-2:after { content: "\e08d"; }
.cl-icon.cl-resize-min-1:after { content: "\e08e"; }
.cl-icon.cl-resize-min-2:after { content: "\e08f"; }
.cl-icon.cl-search-domain:after { content: "\e090"; }
.cl-icon.cl-search:after { content: "\e091"; }
.cl-icon.cl-settings-1:after { content: "\e092"; }
.cl-icon.cl-kill:after { content: "\e094"; }
.cl-icon.cl-on-off:after { content: "\e095"; }
.cl-icon.cl-thumb-down:after { content: "\e097"; }
.cl-icon.cl-thumb-up:after { content: "\e098"; }
.cl-icon.cl-up-download:after { content: "\e09a"; }
.cl-icon.cl-vice-versa:after { content: "\e0a2"; }
.cl-icon.cl-color-picker:after { content: "\e0a3"; }
.cl-icon.cl-shortcut:after { content: "\e0a4"; }
.cl-icon.cl-add:after { content: "\e0a5"; }
.cl-icon.cl-blanco:after { content: "\e0ff"; }

/**
 * Products &amp; Services (e2)
 */
.cl-icon.cl-subscriptions-2:after { content: "\e285"; }
.cl-icon.cl-manage-products:after { content: "\e25f"; }
.cl-icon.cl-cloud-data:after { content: "\e260"; }
.cl-icon.cl-connect:after { content: "\e261"; }
.cl-icon.cl-daas:after { content: "\e262"; }
.cl-icon.cl-domain-general:after { content: "\e263"; }
.cl-icon.cl-domain-registration:after { content: "\e264"; }
.cl-icon.cl-general-product:after { content: "\e265"; }
.cl-icon.cl-hosting:after { content: "\e266"; }
.cl-icon.cl-linux-business-hosting:after { content: "\e267"; }
.cl-icon.cl-linux-hosting:after { content: "\e268"; }
.cl-icon.cl-pass-1:after { content: "\e269"; }
.cl-icon.cl-pass-2:after { content: "\e26a"; }
.cl-icon.cl-products:after { content: "\e26b"; }
.cl-icon.cl-terminate-account:after { content: "\e26c"; }
.cl-icon.cl-reseller:after { content: "\e26d"; }
.cl-icon.cl-ssl:after { content: "\e26e"; }
.cl-icon.cl-tux:after { content: "\e26f"; }
.cl-icon.cl-url-forward:after { content: "\e270"; }
.cl-icon.cl-windows-business-hosting:after { content: "\e271"; }
.cl-icon.cl-windows-hosting:after { content: "\e272"; }
.cl-icon.cl-faq:after { content: "\e273"; }
.cl-icon.cl-windows:after { content: "\e274"; }
.cl-icon.cl-suitcase:after { content: "\e275"; }
.cl-icon.cl-event-queue:after { content: "\e276"; }
.cl-icon.cl-event-settings:after { content: "\e277"; }
.cl-icon.cl-event-history:after { content: "\e278"; }
.cl-icon.cl-event:after { content: "\e279"; }
.cl-icon.cl-queue:after { content: "\e27a"; }
.cl-icon.cl-ordersicon:after { content: "\e27b"; }
.cl-icon.cl-categories:after { content: "\e27c"; }
.cl-icon.cl-plesk:after { content: "\e280"; }
.cl-icon.cl-ordersite:after { content: "\e281"; }
.cl-icon.cl-customerportal:after { content: "\e282"; }
.cl-icon.cl-vps:after { content: "\e283"; }
.cl-icon.cl-subscriptions:after { content: "\e284"; }
.cl-icon.cl-wordpress:after { content: "\e286"; }

/**
 * Administrative (e4)
 */
.cl-icon.cl-dns-management-lock:after { content: "\e450"; }
.cl-icon.cl-dns-management:after { content: "\e460"; }
.cl-icon.cl-handles-add:after { content: "\e461"; }
.cl-icon.cl-handles:after { content: "\e462"; }
.cl-icon.cl-invoices-auto:after { content: "\e463"; }
.cl-icon.cl-invoices-open:after { content: "\e464"; }
.cl-icon.cl-invoices-paid:after { content: "\e465"; }
.cl-icon.cl-invoices-recent:after { content: "\e466"; }
.cl-icon.cl-password-change:after { content: "\e467"; }
.cl-icon.cl-settings:after { content: "\e468"; }
.cl-icon.cl-user:after { content: "\e469"; }
.cl-icon.cl-user-accounts:after { content: "\e46a"; }
.cl-icon.cl-user-password:after { content: "\e46b"; }
.cl-icon.cl-user-pref:after { content: "\e46c"; }
.cl-icon.cl-user-details:after { content: "\e46d"; }
.cl-icon.cl-user-search:after { content: "\e46e"; }
.cl-icon.cl-groups:after { content: "\e46f"; }
.cl-icon.cl-tech-data:after { content: "\e470"; }
.cl-icon.cl-tech-info:after { content: "\e471"; }
.cl-icon.cl-subscription:after { content: "\e472"; }
.cl-icon.cl-nameservers:after { content: "\e473"; }
.cl-icon.cl-e-mail-template:after { content: "\e474"; }
.cl-icon.cl-mail-settings:after { content: "\e475"; }
.cl-icon.cl-unsubscribe:after { content: "\e476"; }
.cl-icon.cl-payment-settings:after { content: "\e477"; }
.cl-icon.cl-manage-text:after { content: "\e478"; }

/* ------------------------------  */
/* End Clearlogic Icon Font */

/* ------------------------------ ERRORS ------------------------------- */

span.translate_error { background-color: #d40000 !important; color: #ffffff !important; font-weight:bold !important; cursor: help !important; padding-left:1px; padding-right:1px; }


/* ------------------------------  */
/* defaults */

html {height:100%;font-family: "Arial", Verdana, Tahoma, sans-serif; font-size: 12px; background-color: #fff; color: #000000; }
body {height:100%; margin: 0;background-color: #fff; }
a { text-decoration: none; outline: 0; color: #70b743;}
hr {  border-width: 1px 0 0 0;}
p + p {	margin-top: 10px; }

abbr[title], acronym[title], .help { cursor: help; text-overflow: ellipsis; }

/* ------------------------------ */
/* font styles &amp; Titels */
h1 { font-size: 20px;font-weight: normal; min-height: 40px; line-height: 40px; padding: 0 0 0 5px; margin: 0 0 20px 0; border-bottom: 1px solid #dfdfdf; color: #5a5a5a; }
h1 a { color: #5a5a5a;  }
h2 { padding: 14px 0 10px 44px; font-size: 18px; }
h2, hr { margin: 0 15px; }
h3 { font-size: 15px; font-weight: bold; color: #5a5a5a; line-height: 26px; padding: 10px 0; }
h4 { font-size: 12px; font-weight: bold;}
hr { clear: both; }

dl &gt; dt { font-weight: bold; }
dl &gt; dd + dt { margin-top: 10px; }

.left { float: left; }
.right { float: right; }
.no-border { border: none !important; }
.nobr { white-space: nowrap; }
.center,.text-center { text-align:center; }
.nomargin { margin: 0 !important; }
.grey-color-bg { background-color: #5e5e5e; }
.grey-color-fg { color: #5e5e5e; }

.prim-color-bg { background-color: #70b743; }
.prim-color-fg { color: #70b743; }
.prim-color-border { border-color: #70b743; }
.sec-color-bg { background-color:#5a5a5a; }
.sec-color-fg { color: #5a5a5a; }
.sec-color-border { border-color: #5a5a5a; }
.highlight-color-bg { background-color: #ffc421; }
.highlight-color-fg { color: #ffc421; }
.highlight-color-border { border-color: #ffc421; }
.text-color { color: #000000;  }
.text-color-alt { color: #5a5a5a; }

.smaller {font-size: 0.8em;}

.rounded {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

.disabled { opacity: 0.6;filter: alpha(opacity=60); /* For IE8 and earlier */}
.forbidden { cursor: no-drop; }

.nowrap { white-space: nowrap; }

#menu &gt; li &gt; a {color:#000;}

/* ------------------------------ */
/* Form elements */
input, select {color: #000;}
label &gt; strong { color: #5a5a5a; }

/* try and fix radio button alignment with text */
input[type="radio"] { margin: 0 0 2px 0; vertical-align: middle; }
input[type="checkbox"] { margin: 0 0 2px 0; vertical-align: middle; }

/** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input */
input[type="tel"],
input[type="url"],
input[type="text"],
input[type="email"],
input[type="range"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"],
select { padding: 1px 5px; height:22px; line-height: 22px; }
select { height:28px; }

input.wide {width:100%;}
input.xmediumwide {width:90%;}
input.mediumwide {width:70%;}
input.medium {width:40%;min-width:120px;}
input.small {width:20%;min-width:70px;}
input.xxsmall {width:5%;min-width:30px;}

select.wide {width:100%;}
select.mediumwide {width:70%;}
select.medium {width:40%;min-width:120px;}
select.small {width:20%;min-width:70px;}

textarea.wide {width:100%; height:65px;}
textarea.medium {width:40%;min-width:120px; height:65px;}
textarea.xmediumwide { width:90%; resize: vertical; }

input.error { border:1px solid red; }
textarea.error { border:1px solid red; }
select.error { border:1px solid red; }
label.error{ color:red; display:block; }
span.error{ color:red; display:block; }

input.readonly, input[readonly] { background-color: #efefef; }

.labelnoblock label.error { display:inline-block; }

.red {color: #CC0000!important;}
.redbg {background-color: #FFC1C1 !important;}
.green {color: #34A753!important;}
.greenbg {background-color: #34A753 !important;}

/* ------------------------------  */
/* Icons */

/* Base */
.cl-icon { color: #70b743; vertical-align: middle; }
.cl-icon.cl-icon-inv { position:relative; display: inline-block; }
.cl-icon.cl-icon-inv:before { content: ''; position:absolute; display: block; left:0; background-color: #70b743; transform: rotate(75deg); }
.cl-icon.cl-icon-inv:after { text-align:center; position:absolute; color: #ffffff; vertical-align: middle; }
.cl-icon.cl-icon-alt { color: #5a5a5a; }
.cl-icon.cl-icon-alt.cl-icon-inv:before { background-color: #5a5a5a; }
.cl-icon.cl-icon-alt.cl-icon-inv:after { color: #ffffff; }
.cl-icon .cl-icon-desc { position: absolute; left: -99999px; }

/* Normal (16x16) */
.cl-icon,
.cl-icon.cl-icon-16 { font-size: 16px; }
.cl-icon.cl-icon-inv,
.cl-icon.cl-icon-16.cl-icon-inv { width:16px; height:16px; }
.cl-icon.cl-icon-inv:before,
.cl-icon.cl-icon-16.cl-icon-inv:before { width: 14px; height: 14px; top:0; border-radius: 2px; }
.cl-icon.cl-icon-inv:after,
.cl-icon.cl-icon-16.cl-icon-inv:after { font-size: 10px; top:2px; left:2px; }

/* Small (12x12) */
.cl-icon.cl-icon-12 { font-size: 12px; vertical-align: baseline; }
.cl-icon.cl-icon-12.cl-icon-inv { width:12px; height:12px; }
.cl-icon.cl-icon-12.cl-icon-inv:before { width: 10px; height: 10px; top:0; border-radius: 2px; }
.cl-icon.cl-icon-12.cl-icon-inv:after { font-size: 8px; top: 1px; left: 1px; }

/* Medium (24x24) */
/* TODO needs aligning */
.cl-icon.cl-icon-24 { font-size: 24px; }
.cl-icon.cl-icon-24.cl-icon-inv { width:24px; height:24px; }
.cl-icon.cl-icon-24.cl-icon-inv:before { width: 20px; height: 20px; top:2px; border-radius: 4px; }
.cl-icon.cl-icon-24.cl-icon-inv:after { font-size: 14px; top: 6px; left: 5px; }

/* Medium (32x32) */
.cl-icon.cl-icon-32 { font-size: 32px; }
.cl-icon.cl-icon-32.cl-icon-inv { width:32px; height:32px; }
.cl-icon.cl-icon-32.cl-icon-inv:before { width: 28px; height: 28px; top:2px; border-radius: 4px; }
.cl-icon.cl-icon-32.cl-icon-inv:after { font-size: 18px; top: 6px; left: 5px; }

/* Large (64x64) */
/* TODO needs aligning */
.cl-icon.cl-icon-64 { font-size: 64px; }
.cl-icon.cl-icon-64.cl-icon-inv { width:64px; height:64px; }
.cl-icon.cl-icon-64.cl-icon-inv:before { width: 56px; height: 56px; top:4px; border-radius: 6px; }
.cl-icon.cl-icon-64.cl-icon-inv:after { font-size: 42px; top: 12px; left: 6px; }

/* XL (128x128) */
.cl-icon.cl-icon-128 { font-size: 128px; }
/* TODO needs aligning */
.cl-icon.cl-icon-128.cl-icon-inv { width:128px; height:128px; }
.cl-icon.cl-icon-128.cl-icon-inv:before { width: 110px; height: 110px; top:8px; border-radius: 6px; }
.cl-icon.cl-icon-128.cl-icon-inv:after { font-size: 100px; top: 6px; left: 8px; }

/* icons in headings */
h1 .cl-icon { margin-right: 5px; }

/* ------------------------------  */
/* Info boxes */
.errorbox {border: 1px solid #cd0a0a; background-color:#fef1ec; padding:10px; display:block;margin-bottom: 20px; }
.errorbox .cl-icon {float:left; margin-right: 25px;}
.errorbox ul {margin:0;  }

.infobox {border: 1px solid #fcefa1; background-color:#FEFFDF; padding:10px; display:block;margin-bottom: 20px; }
.infobox ul {margin:0; padding-left:15px;}
.infobox + .infobox, .errorbox + .infobox, .infobox + .errorbox { margin-top: 10px; }

.succesbox {background-color: #d4edda; border: 1px solid #c3e6cb;  padding:10px; display:block;margin: 20px 0; }
.succesbox ul {margin:0; padding-left:15px;}
.succesbox + .infobox, .errorbox + .infobox, .infobox + .errorbox { margin-top: 10px; }

#page-notifications .notification {z-index:14;  display: none; position: fixed; top: 0; left:50%; width: 550px;margin-left:-225px; min-height: 45px; border: 2px solid #484848; background-color: #4db401; padding:10px 35px; font-size:16px; font-weight: bold; line-height: 24px; color:#fff;}
#page-notifications .notification .cl-icon { color:#fff;}
#page-notifications .notification a { color:#fff; text-decoration: underline;}
#page-notifications .notification.error { padding-left:20px;background-color:#cd0a0a;  }
#page-notifications .notification.notification-info { padding-left:20px; }
#page-notifications .notification .close {cursor: pointer; position: absolute; top:0; right:5px; line-height: 20px; font-size: 14px; }

#page-action  {z-index:10;  position: fixed; top: 0; left:50%; width: 550px;margin-left:-225px; min-height: 45px;
  border: 2px solid #bce8f1; background-color: #d9edf7; padding:10px 35px 10px 15px; font-size:16px;  line-height: 24px; color:#31708f;}

#page-action  .close {cursor: pointer; position: absolute; top:0; right:5px; line-height: 20px; font-size: 14px; }
#page-action  span.cl-icon {color:#31708f;}


.container {min-height:100%; min-width: 1000px;}

/* TOP-BAR */
#top-bar { height:47px; color: #ffffff; background-color: #70b743; }
#top-bar, #top-bar a{ #ffffff; }
#top-bar a:hover { text-decoration: underline; }

#navigation { height: 47px; line-height: 47px; list-style-type: none;margin: 0;  padding: 0 0 0 10px; float:left; }
#navigation, #navigation a { color: #fff; text-decoration: none; font-weight: normal; font-style: normal;font-size: 18px; }
#navigation li { float: left; padding: 0 10px;  margin: 0; }


/* ------------------------------  */
/* Login rechtsboven */
#login { float: right; padding: 15px 10px 0 0; background-color:#70b743; }
#login &gt; a { display: inline-block; }
#login .icon2 {float:right; margin: 15px 0 15px 8px;}
#login .icon2.login {float:left; margin: 15px 5px 15px 0; }
#login .cl-icon { color: #ffffff; margin-left:10px; }
#login .name { vertical-align: middle; display:inline-block;  max-width:100px; overflow:hidden; white-space: nowrap;text-overflow: ellipsis;}


/* ------------------------------  */
/* logo panel */
#logo-panel { overflow: hidden;height: 115px;  }
#logo {float: left;width: 249px;padding: 0 0 0 14px;height: 67px;margin: 30px 0;}

#contact { height: 43px; float: right; padding: 0;margin: 41px 0; }
#contact a { display: block; float: left; margin: 0 10px; line-height: 35px; text-decoration: none; color: #000000;  }
#contact .icon2 { float: left;}

/* ------------------------------  */
/* Breadcrumb / filter panel */
#title-panel {border: none; background-color: #f7f7f7; height:45px;  }
#breadcrumbs { float: right; margin: 0;  padding: 15px 7px 9px 10px; list-style-type: none; }
#breadcrumbs li { float: left; padding: 0 3px 5px 0; }
#breadcrumbs li:last-child a {  color: #70b743; }

/* ------------------------------ */
/* main panel */
#main-panel { display: table; margin: 1px 0 0 0;padding-bottom:300px; }
#menu-panel { min-width: 225px; display: table-cell; border-right: 1px solid #dfdfdf; }
#main-panel.fullwidth {width:100%; margin: 1px 0 0 0; }

/* ------------------------------ */
/* Nieuwe style menu, alles links */
#menu-panel .menu-title {font-size: 18px; font-weight: normal; border-bottom: 1px solid #dfdfdf; margin: 0; padding: 25px 14px 10px; background: #fff; color: #5a5a5a; }

#menu_new { margin: 0; padding: 0; }
#menu_new li { list-style: none; }
#menu_new a {color:#000;}

#menu_new ul { padding: 0; margin: 0; list-style-type: none; }
#menu_new li { background-color: #f7f7f7; border-bottom: 1px dotted #cecece; }
#menu_new li a { display: inline-block; padding: 10px 0 10px 5px; white-space: nowrap; }
#menu_new &gt; li &gt; a &gt; span.cl-icon { margin-right:5px; }
#menu_new  a { padding-left: 40px; }
#menu_new ul li &gt; a { padding-left: 6px; }

#menu_new li.parent-active { background-color: #fff; }
#menu_new li.active { background-color: #fff; color: #70b743;}
#menu_new li.active &gt; a { color: #70b743;}

#menu_new &gt; li ul { }
#menu_new &gt; li ul &gt; li { padding-left:25px;background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png");background-position: -170px -1080px; background-repeat: no-repeat;  }
#menu_new &gt; li ul &gt; li { background-color: #f7f7f7; }
#menu_new &gt; li ul &gt; li.active { background-color: #fff; }
#menu_new &gt; li ul &gt; li a span.cl-icon {margin-right:5px;}
#menu_new &gt; li ul li:first-child {border-top: 1px dotted #cecece;}
#menu_new &gt; li ul li:last-child {border-bottom: none;}

/*---- ACCOUNTS MENU, NET WAT ANDERS ---- */
#menu_new .search { padding: 5px;}
#menu_new .search input { height: 30px;   }

#menu_new.accounts input[type="checkbox"] { margin-left:5px; }
#menu_new.accounts &gt; li ul &gt; li  {background-image: none;}
#menu_new.accounts &gt; li ul &gt; li.package {padding-left:35px;}
#menu_new.accounts &gt; li.close ul {display:none;}
#menu_new.accounts &gt; li.open &gt; a {font-weight: bold;}
#menu_new.accounts &gt; li.open ul{display:block;}

#menu_new.accounts &gt; li ul &gt; li {padding-left: 15px; }
#menu_new.accounts &gt; li ul &gt; li.nicewsp {position: relative; width:210px;}
#menu_new.accounts &gt; li ul &gt; li  a.nicewsp {display:inline-block; width:200px; white-space: nowrap; overflow:hidden !important;text-overflow: ellipsis;}
#menu_new.accounts &gt; li ul &gt; li  a.nicewsp:hover {overflow: visible;width:auto; padding-right: 5px; background-color: #f7f7f7;}
#menu_new.accounts &gt; li ul &gt; li a input {margin-right:5px;}


/* hidden mass update checkboxes */
#menu_new.accounts &gt; li ul &gt; li.package.nomassupdate {padding-left:25px;}
#menu_new.accounts &gt; li.close.nomassupdate, #menu_new.accounts &gt; li.open.nomassupdate {padding-left: 15px;}

/* paging */
#menu_new li:last-child { border: none; }

.paging { line-height: 20px; font-size: 12px; overflow:auto;  margin: 10px 0 0; background: #fff;}
.paging a {
	margin: 0 0 10px 2px; min-width: 19px; height: 20px; padding: 0; display: block; float: left; text-align: center;  background: #70b743; color: #ffffff; text-align: center; border: 1px solid #70b743;
	text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;
}

.paging .pages a.active {  font-weight: normal; color:  #70b743; font-size: 1.0em; text-decoration: none; background: #fff; border: 1px solid  #70b743; }
.paging a.button.first { background-position: 0 0; }
.paging a.button.prev { background-position: 0 -20px; }
.paging a.button.last { background-position: 0 -40px; }
.paging a.button.next { background-position: 0 -60px; }
.paging a.button.first { margin-left: 10px; }

#main .paging { text-align: center; }
#main .paging a { display: inline-block; float: none; }

/* subfilter */
#menu_new .page-filter { width:100%; font-size: 0.8em;  background: #fff; border-bottom: 1px solid #cecece;}
#menu_new .page-filter td:first-child { padding-left: 10px; }
#menu_new .page-filter td { border-top: 1px solid #cecece; }
#menu_new .page-filter select { width:100%; border: none; font-size: 1.0em; font-family: Lato, 'Tahoma',verdana,sans-serif; color: #70b743; }
#menu_new .page-filter option:not(:checked) { color: #000;  }
#menu_new .page-filter input[type="checkbox"] { margin: 12px 0 12px 0 !important; }
span.sicon.message-success { background-position: -506px -267px }


/* ------------------------------ */
/* content container */

#main {	display: table-cell;vertical-align: top; width:100%;padding: 15px 25px 25px; }
#main.nopadding{ padding:0;}

/* ------------------------------ */
/* footer */
/*#footer {
	text-align: center;
	position:relative;
	margin-top:-50px;
	height:50px;
	clear:both;
}*/

#footer-holder { padding-left: 226px; background: #f7f7f7;margin-top:-220px; min-height:220px; min-width:1000px; }
#footer-holder .footer-content { padding: 40px 20px 0 0; border-bottom: 1px solid #dfdfdf; }

#footer-holder .footer-content .footer-title { font-weight: bold; padding-left: 25px; font-size: 1.6em; color: #696969; background: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png") -518px -22px no-repeat; }
#footer-holder .footer-content .col { margin: 15px 10px 5px 0; }
#footer-holder .footer-content .col a { width: 190px; display: block; color: #696969; border-bottom: 1px solid #dfdfdf; padding: 9px 5px;  }
#footer-holder .footer-content .col a+a { border-bottom: none; }

#footer-holder .footer-content .footer-icon { height: 80px; min-width: 45px; margin-left: 8px; display: block; background: url("https://mijn.vdx.nl/assets/images/portal/icons/footer-icon-map.png") 80px 80px no-repeat; }
#footer-holder .footer-content .footer-icon.dekra9001 { background-position: 0 0; }
#footer-holder .footer-content .footer-icon.dekra9001:hover { background-position: 0 -80px; }
#footer-holder .footer-content .footer-icon.dekra27001 { background-position: 0 -160px; }
#footer-holder .footer-content .footer-icon.dekra27001:hover { background-position: 0 -240px; }
#footer-holder .footer-content .footer-icon.iternity { width: 175px; background-position: 0 -320px; }
#footer-holder .footer-content .footer-icon.iternity:hover { background-position: 0 -400px; }
#footer-holder .footer-content .footer-icon.iternity { width: 175px; background-position: 0 -320px; }
#footer-holder .footer-content .footer-icon.iternity:hover { background-position: 0 -400px; }
#footer-holder .footer-content .footer-icon.comodo { width: 165px; background-position: 0 -480px; }
#footer-holder .footer-content .footer-icon.comodo:hover { background-position: 0 -560px; }
#footer-holder  .bottom-line {padding: 25px 0; color: #696969; text-align: center;}

/* ------------------------------ */
/* RESELLER SPECIFIC? */

.reseller-holder { min-height: 20px; padding: 6px 15px 4px; overflow: auto; background-color: #f7f7f7; color:#000000;border-bottom: 1px dotted #cecece; }
.reseller-holder  .reseller-title { padding-bottom: 4px; color:#5a5a5a;  }
.reseller-holder  .progressbar { height:7px; border:1px solid #5a5a5a; padding: 1px; background-color: #fff;  }
.reseller-holder  .progressbar .bar{ background-color:#5a5a5a;  width: 1%; height:7px;  }
.reseller-holder  .progressbar .bar.bar-error { background-color: red; }
.reseller-holder  .note  {text-align: right; padding:5px 0; font-size:0.9em;}
.reseller-holder  .note strong  {color:#5a5a5a; }

.margin-rounding {
	/* TODO fix this styling to something better looking?? */
	border:1px dashed #DFDFDF;
	background-color: #f7f7f7;
	padding: 2px 3px;
}

/* ------------------------------ */
/* Dashboard */

.tiles { margin: 0 0 35px; overflow: auto; }
.tiles .tile { width: 49%; margin: 0 0 20px; border: 1px solid #dfdfdf; background-color: #fff; position: relative;}
.tiles .tile.link { cursor: pointer; }
.tiles .tile.fullwidth { width: 99%;}
.tiles .tile.fullwidth  .tile-content {margin-left:10px;}

.tiles .tile.odd { float: left; }
.tiles .tile.even { float: right; }
.tiles .tile .tile-content { margin-left:94px; }
.tiles .tile &gt; h3 { color: #5a5a5a; font-size: 14px; line-height: 16px; }
.tiles .tile &gt; p { color: #70b743; }
.tiles .tile &gt; .cl-icon { float: left; margin: 15px; }

#recent-invoices, #news { float: left; width: 48%; min-width: 200px; }
#news { padding: 0 0 15px 0; margin-left: 2%; list-style-type: none; }
#news h3 { margin: 0; padding: 15px 0; }
#news ul { margin: 0; padding: 0; list-style: none; }
#news .head { margin: 15px 15px 0 0; border-width: 1px 1px 0 1px;  padding: 10px; overflow: hidden; }
#news .month { float: left; }
#news .day { float: left; width: 46px; height: 29px; padding: 16px 0 0 0; margin: 0 8px 0 0; text-align: right; color: white; font-size: 29px; font-weight: bold; background: url("https://mijn.vdx.nl/assets/images/portal/common/date-bg.png") 0 0 no-repeat; }
#news .text { padding: 10px; margin: 0 15px 20px 0 ; border-style: solid; border-color: #dfdfdf; border-width: 1px; }

.date-month { width: 19px; height: 45px; float: left; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); background-repeat: no-repeat; background-color: #70b743 ; }
.date-month.jan { background-position: -211px 0; }
.date-month.feb { background-position: -211px -45px; }
.date-month.mrt { background-position: -211px -90px; }
.date-month.apr { background-position: -211px -135px; }
.date-month.mei { background-position: -211px -180px; }
.date-month.juni { background-position: -211px -225px; }
.date-month.juli { background-position: -211px -270px; }
.date-month.aug { background-position: -211px -315px; }
.date-month.sep { background-position: -211px -360px; }
.date-month.okt { background-position: -211px -405px; }
.date-month.nov { background-position: -211px -450px; }
.date-month.dec { background-position: -211px -495px; }

/* ------------------------------ */
/* buttons, inputs &amp; submits */

input[type="submit"].button,input[type="button"].button { line-height: 35px; border: none; padding: 0; margin: 0; cursor: pointer; background: magenta; }
input[type="submit"].button:hover,input[type="button"].button:hover { background-color: magenta;text-decoration: underline; }

a.btn,.submit-btn { white-space: nowrap; height: 35px; line-height: 35px; display: block; border: 1px solid #dfdfdf; margin: 5px 0 10px 0; padding: 0 15px 0 0; background-color: magenta; }
a.btn.right,.submit-btn.right {background-color: magenta; float: right; margin-left: 5px; }
a.btn.left,.submit-btn.left {background-color: magenta; float: left; margin-right: 5px; }

a.btn &gt; span,
.submit-btn &gt; span { display: block; float: left; width: 35px; height: 35px; background-color: magenta; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); }
a.btn &gt; span.add,
.submit-btn &gt; span.add { background-position: 0 -70px; }
a.btn &gt; span.accept,
.submit-btn &gt; span.accept { background-position: 0 -105px; }
a.btn &gt; span.cancel,
.submit-btn &gt; span.cancel { background-position: 0 -140px; }
a.btn &gt; span.download,
.submit-btn &gt; span.download{ background-position: 0 -245px; }
a.btn &gt; span.connect,
.submit-btn &gt; span.connect{ background-position: 0 -350px; }
a.btn &gt; span.back-to { background-position: 0 -560px; }

a.btn.del-dns { width: 16px; height: 16px; border: none;background-color: magenta; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); background-position: -35px -414px; }

a.btn span.add-rule { background-position: 0 -70px; }
a.btn span.refresh { background-position: 0 -280px; }
span.download { background-position: 0 -245px !important; }
span.pay-now { background-position: 0 -315px !important; }

.tooltip { cursor: help; }
a.tooltip,
span.btn { width: 16px; height: 16px; display: inline-block; text-indent: -9999px; background-color: magenta; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); background-position:  -35px -384px;}
span.btn.edit { background-position: -35px -400px; cursor: pointer; }
span.btn.expand { background-position: -35px -688px; cursor: pointer; }
span.btn.collapse { background-position: -35px -720px; cursor: pointer; }
/*hover*/
/*span.btn.edit:hover { background-position: -35px -416px; cursor: pointer; }*/
span.btn.expand:hover { background-position: -35px -704px; cursor: pointer; }
span.btn.collapse:hover { background-position: -35px -736px; cursor: pointer; }

/* TODO the below .btn2 class should become default .btn */
.btn2 { display: inline-block; white-space: nowrap; cursor: pointer; height: 35px; line-height: 35px; border: 1px solid #dfdfdf; background-color: #fff; padding: 0 15px 0 5px; color: #5a5a5a; }
.btn2 .cl-icon { color: #5a5a5a; vertical-align: middle; margin: 0 5px; }
.btn2 + .btn2 { margin-left: 10px; }
.btn2.highlight { color: #ffc421; }
button.btn2 { height: 37px; line-height: 37px; vertical-align: bottom; }
.btn2.h30{height: 30px; line-height: 30px;}
.buttons-container { margin: 10px 0; }
.buttons-container.buttons-right { text-align: right; }


/* ------------------------------ */
/* TODO these styles are a mess... needs klantportaal-compatible cleaning
/* List table */
table.list-view {width: 100%;border-collapse: collapse; text-align: left;}
table.list-view tr td.success { background-color: #00FF00 !important; }
table.list-view tr td.error { background-color: #FF0000 !important; }
table.list-view &gt; thead &gt; tr &gt; th,
table.list-view &gt; tbody &gt; tr &gt; * { border: 1px solid #dfdfdf; padding:8px; }
table.list-view .no-border td { border: 0; }
table.list-view &gt; thead &gt; tr &gt; * { background-color:#f8f8f8; }
table.list-view &gt; tbody &gt; th,
table.list-view &gt; thead &gt; tr &gt; th { font-weight: bold; }
table.list-view td.first { font-weight: bold; font-size:14px; color:#000000;}
table.list-view .nopadding{ padding:0; }
table.list-view td.options{ width:175px; padding:0; vertical-align: top; white-space: nowrap; }
table.list-view td.options .option { width: 100%; height: 35px; border-bottom: 1px solid #dfdfdf;}
table.list-view td.options .option.disabled { opacity: 0.4;filter: alpha(opacity=40); /* For IE8 and earlier */}
table.list-view td.options .option:first-child { border-bottom: 1px solid #dfdfdf; }
table.list-view td.options .option:last-child { border: none; }
table.list-view td.options .option:nth-child(even) { background-color:#f7f7f7;}
table.list-view .title { font-weight: bold; line-height: 20px;}

table.list-view &gt; tbody &gt; tr:not(.redbg):hover &gt; * {background-color: #f8f8f8;}
table.list-view &gt; tbody &gt; tr:hover &gt; *[rowspan] {background-color: #fff;}
table.list-view &gt; tbody &gt; tr &gt; .options {background-color: #fff;}
table.list-view &gt; tbody &gt; tr &gt; .options .option &gt; a { color: #000000; line-height: 35px; display: block; }

/* multi-links prefixed with an icon, within an .option, fix */
table.list-view &gt; tbody &gt; tr &gt; .options .option &gt; .cl-icon { margin-left: 10px; }
table.list-view &gt; tbody &gt; tr &gt; .options .option &gt; a + a,
table.list-view &gt; tbody &gt; tr &gt; .options .option &gt; .cl-icon + a { display: inline; padding-left: 0; }

table.list-view &gt; tbody &gt; tr &gt; .options .option span.btn { width: 35px; height: 35px; display: block; float: left; background: magenta; } /* TODO remove me */

table.list-view .sub-txt { font-size: 11px; }

table.list-view &gt; tbody + tbody &gt; tr:first-child &gt; * { border-top-width: 3px; }

.list-view &gt; tbody &gt; tr &gt; *.icon-cell {vertical-align: middle; text-align: center; }
.list-view h2,
.list-view .table-title { display: block; float: none; font-size: 18px; margin: 0; padding: 6px 0; font-weight: bold; color: #70b743; }
.list-view h3,
.list-view .table-subtitle { display: block; float: none; font-size: 16px; margin: 0; padding: 5px 0; color: #5a5a5a; }

.list-view .btn.btn-alt { color: #5a5a5a; }
.list-view .btn .cl-icon { color: #5a5a5a;
	/* TODO remove below */
	background: none;
	margin-left:2px;
	position: relative;
}
.list-view .btn .cl-icon:after { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.list-view .options .option &gt; a { padding-left:10px; }
.list-view .options .option .cl-icon { color: #5a5a5a; }
.list-view .buttons .btn2 { display: block; }
.list-view .spacer { background-color: #f7f7f7; }

.list-view-inner { width: 100%; }
.list-view-inner &gt; * &gt; tr &gt; * { padding: 2px; }
.list-view-inner &gt; * &gt; tr &gt; * { text-align: left; }
.list-view-inner &gt; * &gt; tr &gt; th[colspan] { text-align: center; }
.list-view-inner &gt; thead &gt; tr &gt; th { font-weight: bold; }
.list-view-inner &gt; tfoot &gt; tr:first-child &gt; * { padding-top: 10px; }
.list-view-inner &gt; tbody + tbody &gt; tr:first-child &gt; * { padding-top: 10px; }

.list-view + .list-view { margin-top: 20px; }


.option.suboptionholder {position: relative;}
.option.suboptionholder .suboptions {z-index:99; position: absolute; top:0; background-color: #fff; border: 2px solid #C3C3C3; display: none; width:100%;}
.option.suboptionholder .suboptions .option:hover a {font-weight: bold;}
.option.suboptionholder:hover .suboptions  {display: block;}


.net-price { color: #70b743; }
.sell-price { color: #5a5a5a; }

.order-sum { width: 100%; }
.order-sum &gt; * &gt; tr &gt; * {
	padding: 2px;
}
.order-sum &gt; tfoot &gt; tr &gt; * {
	text-align: right;
}
.order-sum &gt; tfoot &gt; tr &gt; th {
	border-bottom: 2px solid #dfdfdf;
}
.order-sum &gt; tbody &gt; tr &gt; td + td {
	padding-left:20px;
}
.order-sum .order-sum-rowtotal {
	text-align: right;
	white-space: nowrap;
}

/* ------------------------------ */
/* Edit table */
.edit-view { width: 100%; min-width:400px; border-collapse: collapse; border:1px solid #dfdfdf; text-align: left; margin-top: 10px; }
.edit-view &gt; thead &gt; tr &gt; * { height:20px; background-color:#f8f8f8; }
.edit-view &gt; thead &gt; tr &gt; th { border: 1px solid #dfdfdf; padding:8px; font-weight: bold; }
.edit-view &gt; thead &gt; tr &gt; td strong { color: #5a5a5a; }
.edit-view &gt; thead &gt; tr &gt; td,
.edit-view &gt; tbody &gt; tr &gt; td { border-bottom: 1px dotted #dfdfdf; padding:8px; line-height: 16px; }
.edit-view &gt; tbody &gt; tr &gt; th { border-bottom: 1px dotted #dfdfdf; padding:8px; line-height: 16px; vertical-align: top; }
.edit-view &gt; thead &gt; tr &gt; td:last-child,
.edit-view &gt; tfoot &gt; tr &gt; td:last-child,
.edit-view &gt; tbody &gt; tr &gt; td:last-child { padding-right:35px; }
.edit-view &gt; tbody &gt; tr &gt; th h3 { margin-top:15px; }
.edit-view &gt; tbody &gt; tr &gt; th label.required:after { content: ' *'; color: #ff0000; font-weight: bold; }
.edit-view &gt; tfoot &gt; tr &gt; * { padding: 5px; }
.edit-view .title { font-weight: bold; line-height: 20px; }
.edit-view label.error { margin-left: 5px; }
.edit-view .input-cell-heading { vertical-align: middle; }
.edit-view tbody label+input[type="radio"] { margin-left: 15px; }

.edit-view.dns-manager tfoot td {padding:5px;}
.edit-view.dns-manager td:last-child  {text-align: center; }
.edit-view.dns-manager span.cl-icon  {cursor:pointer;}

.edit-view .toggle {display: none;}
.edit-view .show.tonen {cursor:pointer;}
/* ------------------------------ */
/* Zebra table */
table.defaultZebra { line-height: 30px; padding: 0 5px; font-size: 12px; }
table.defaultZebra td:first-child { width: 120px; font-weight: bold; }
table.defaultZebra td { padding: 0 5px;border-bottom: 1px dotted #ccc;}


/* ------------------------------ */
/* Default filter block */
.show-hide-filter {	padding: 10px 5px; margin-bottom: 15px; border-bottom:solid 1px #dfdfdf; cursor: pointer; color: #5a5a5a; font-weight: bold; }
.show-hide-filter:hover { background-color: #f8f8f8; }

.filter { margin: 0 0 35px; border-bottom: 1px solid #dfdfdf; display: none; overflow: auto; }
.filter .searchfield-holder { padding: 0; margin-bottom: 25px; border-width: 0 0 1px 1px; border-style: solid; border-color: #ccc; overflow: auto; }
.filter .searchfield-holder input.inputfield { width: 95%; height: 35px; line-height: 35px; border: none; font-size: 14px; font-weight: bold; }
/* TODO probably only for portal? */
.filter .searchfield-holder span.icon3 { width: 35px; height: 35px; display: block; float: left; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); background-position: 0 -420px; }
.filter .row {  width: 50%; padding: 0; min-width: 300px; float: left; }
.filter .row &gt; table {float:right; border-collapse:collapse; }
.filter .row &gt; table input[type="text"]{ height:28px; padding: 0; margin: 0; border: 1px solid #ccc; }
.filter .row &gt; table select{ height:30px;  margin: 0; border: 1px solid #ccc; }

.filter .row &gt; table tr td { padding: 0 0 5px; }


/* ------------------------------ */
/* Account buttons */

div.hostingbuttons a.tech-btn { color: #5a5a5a; background-color: #70b743;  width: 100px; height: 50px; display: block; filter: alpha(opacity=70); opacity: 0.7; vertical-align: middle; font-size: 14px; float: left; padding-top: 60px; margin: 8px 8px 0 0 ; border: 1px solid #dfdfdf; line-height: 14px; text-align: center; background-image: url("https://mijn.vdx.nl/assets/images/portal/icons/general-icon-map.png"); background-repeat: no-repeat; background-position: 100px 110px; }
div.hostingbuttons a.tech-btn:hover { text-decoration: none !important; filter: alpha(opacity=100); opacity: 1.0; }
div.hostingbuttons a.tech-btn span { width: 100px; height: 50px; display: table-cell; vertical-align: middle; text-align: center; }
div.hostingbuttons a.tech-btn.whois { background-position: -60px 0; }
div.hostingbuttons a.tech-btn.gen-tech { background-position: -60px -120px; }
div.hostingbuttons a.tech-btn.historie { background-position: -60px -240px; }
div.hostingbuttons a.tech-btn.dns { background-position: -60px -360px; }
div.hostingbuttons a.tech-btn.opzeggen { background-position: -60px -480px; }
div.hostingbuttons a.tech-btn.tech-gegev { background-position: -60px -600px; }
div.hostingbuttons a.tech-btn.url-forw { background-position: -60px -720px; }
div.hostingbuttons a.tech-btn.no-dns { background-position: -60px -840px; }
div.hostingbuttons a.tech-btn.pass { background-position: -60px -960px; }
div.hostingbuttons a.tech-btn.ssl { background-position: -60px -1080px; }
div.hostingbuttons a.active { filter: alpha(opacity=100); opacity: 1.0; border-color: #70b743;  }

/* ------------------------------ */
/* Specs table */

.specs .rule {width: 100%;overflow: hidden;}
.specs label {float: left;padding: 3px 2px 0 0; }
.specs .value {float: right;padding: 3px 2px 0 0; color: #5a5a5a; }


/* ------------------------------ */
/* Parking page */
#parking-page {padding-top: 90px; text-align: center; padding-bottom: 150px;}
#parking-page .first-line {font-size: 35px;line-height:50px; text-transform: uppercase;}
#parking-page .second-line {font-size: 75px; line-height: 120px; color: #70b743; text-transform: uppercase;margin-bottom: 25px;
	border-bottom: 1px solid #dfdfdf; padding-bottom: 15px;}


/* ------------------------------ */
/* JQUERY UI OVERRIDE */
.ui-tabs { padding:0; border: none;}
.ui-tabs .ui-widget-header {border-top:0;border-left:0;border-right:0;}
.ui-tabs,
.ui-tabs input,
.ui-tabs select,
.ui-tabs textarea,
.ui-tabs button {font-family: inherit; font-size: inherit; }
.ui-tabs .ui-tabs-nav { padding-left: 18px; margin-bottom: 20px; background: none; border-color: #dfdfdf; }
.ui-tabs-nav .ui-state-default { border: 1px solid #dfdfdf; background-image: none; background-color: #f7f7f7; }
.ui-tabs-nav .ui-state-active { background-color: #fff; }
.ui-tabs-nav .ui-state-default a,
.ui-tabs-nav .ui-state-active a,
.ui-tabs-nav .ui-state-hoven a { color: #000; }
.ui-widget-content a {color:inherit;}

.ui-tooltip { max-width: 600px !important;}
.ui-tooltip-content { max-width: 600px !important; }

.ui-widget-content a { color: #70b743; } /* color of links within widgets fix */
.ui-widget-content .btn2 { color: #70b743; } /* color of buttons within widgets fix */

.ui-selectmenu-button.cl-iconselect { background:none; }
.ui-selectmenu-button.cl-iconselect .ui-selectmenu-text { font-size: 1.1em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item { line-height: 16px; font-size: 1.1em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-state-focus { background: #f7f7f7; border: none; margin: 0; }
.ui-selectmenu-menu.cl-iconselect .ui-selectmenu-optgroup { font-size: 1.1em; color: #70b743; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-menu-optgroup-item { padding-left: 1.4em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-menu-item-select { border-bottom: 1px solid #dfdfdf; padding-bottom: 5px; }

.fancybox-wrap.cl-fancybox-wrap .fancybox-skin { background-color: #fff; }

/* CODEMIRROR */
.cl-codemirror-wrapper.CodeMirror { border: 1px solid #eee; height: auto; }
.cl-codemirror-wrapper .CodeMirror-scroll { min-height: 300px; overflow-y: hidden; overflow-x: auto; }
.cl-codemirror-wrapper.CodeMirror pre.CodeMirror-placeholder { color: #999; }

/* REPLACETAGS */
.cl-re-tag { font-weight: normal; text-decoration: none; font-style: normal; }
.cl-re-tag .cl-re-tag-prefix { font-weight: bold; }
.cl-re-tag .cl-re-tag-name { font-weight: bold; }
.cl-re-tag .cl-re-tag-params-prefix { font-weight: bold; }
.cl-re-tag .cl-re-tag-params-field { text-decoration: underline; }
.cl-re-tag .cl-re-tag-optional { font-style: italic; }
.cl-re-tag .cl-re-tag-params-div { font-weight: bold; }
.cl-re-tag .cl-re-tag-params-alt { text-decoration: underline; }
.cl-re-tag .cl-re-tag-params-suffix { font-weight: bold; }
.cl-re-tag .cl-re-tag-suffix { font-weight: bold; }


/* CKEDITOR */
.cke_combo__cl-replaces .cke_combo_text { width: auto; } /* width fix */


/* PAYMENT */
.payment-list {}
.payment-list .item { background-color: #fff; text-align: center; min-height: 270px; border:1px solid #dfdfdf; float:left; padding:10px; margin:20px; width:200px; cursor: pointer; }
.payment-list .item label {font-size:1.3em; color:  #70b743; font-weight: bold; line-height: 2.2em;}
.payment-list .img {padding: 10px 0; min-height: 70px;}
.payment-list .desc {text-align: left;}


/* UI TOGGLEBUTTON */

.cmn-toggle { position: absolute; margin-left: -9999px;visibility: hidden;}
.cmn-toggle + label {  display: block; position: relative; cursor: pointer;  outline: none;  user-select: none;}
input.cmn-toggle-round + label {  padding: 2px; width: 50px; height: 20px; background-color: #dddddd;  border-radius: 20px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {  display: block; position: absolute; top: 1px;left: 1px; bottom: 1px; content: "";  }
input.cmn-toggle-round + label:before {  right: 1px; background-color: #f1f1f1; border-radius: 20px;  transition: background 0.4s; }
input.cmn-toggle-round + label:after { width: 22px;  background-color: #fff;  border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before { background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {  margin-left: 30px; }

/* SUBSCRIPTIONS */

table.edit-view.vps { margin-bottom: 40px; }

table.edit-view .status-circle { width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; }
table.edit-view .status-circle.up { background-color: #34A753; }
table.edit-view .status-circle.down { background: red; }

table.edit-view .captions { padding: 10px 0 0; }
table.edit-view.vps-buttons-table &gt; tbody &gt; tr &gt; td { padding: 20px; vertical-align: top; text-align: center; }
table.edit-view.vps-buttons-table &gt; tbody &gt; tr &gt; td:last-child { padding-right: 20px; }
table.edit-view .vps-button { cursor: pointer; width: 120px; border-width: 0; border-radius: 5px; font-weight: bold; color: #ffffff; background: #5a5a5a; padding: 10px; transition: all 0.3s ease; text-align: center; }
table.edit-view .vps-button.warning { color: #fff; background-color: #c60909; }
table.edit-view .vps-button &gt; .cl-icon:after { line-height: 40px; }
table.edit-view .vps-button:hover { opacity: 0.8; }
table.edit-view .vps-button .cl-icon { color: #fff; }
table.edit-view .vps-button.disabled { opacity: .4; cursor: not-allowed; }


.custom-combobox {position: relative; display: inline-block;}
.custom-combobox-toggle {position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0;}
.custom-combobox-input {margin: 0; }
.ui-autocomplete {
	z-index: 9999 !important;
	max-height: 200px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}
.ui-autocomplete-input {background: none; background-color: #fff; padding:5px; line-height: 16px;}



.ui-selectmenu-button.cl-iconselect { background:none; }
.ui-selectmenu-button.cl-iconselect .ui-selectmenu-text { font-size: 1.1em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item { line-height: 16px; font-size: 1.1em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-state-focus { background: #f7f7f7; border: none; margin: 0; }
.ui-selectmenu-menu.cl-iconselect .ui-selectmenu-optgroup { font-size: 1.1em; color: #70b743; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-menu-optgroup-item { padding-left: 1.4em; }
.ui-selectmenu-menu.cl-iconselect .ui-menu-item.ui-menu-item-select { border-bottom: 1px solid #dfdfdf; padding-bottom: 5px; }

/* ------------------------------------------------------------------------------------ */
/* ---------------------------- Snel bestellen CSS 2015-11 ---------------------------- */
/* ------------------------------------------------------------------------------------ */

h2 { padding: 35px 0 20px 0; margin: 0; color: #5a5a5a; }

.content-area-dashboard { padding-bottom: 20px; margin-bottom: 30px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #dfdfdf; overflow: auto; }
.content-area-dashboard .floater { float: left; }

/* lekker veel extra css om de jquery css te overschrijven .... */
.content-area-dashboard .custom-combobox,
.content-area-dashboard .ui-selectmenu-button span.ui-selectmenu-text,
.content-area-dashboard .ui-autocomplete-input,
.content-area-dashboard input#domain-action,
.content-area-dashboard .ui-button { height: 30px; padding: 0; border: 0; }
.content-area-dashboard input#domain-action { height: 24px !important; }

/* nog een beetje extra... */
.content-area-dashboard .line { float: left; }
.content-area-dashboard .line.result { float: none; overflow: auto;  }
.content-area-dashboard .line.button { margin-top: 15px; float: right; }

.title-area { padding: 10px 15px; border-style: solid; border-width: 1px 0; border-color: #dfdfdf;  background-color: #f7f7f7; }
.title-area.big { border: none; color: #fff; background-color: #70b743; }
.title-area.big h3 { padding: 0 0 5px 0; margin: 0; line-height: 1.0em; color: #fff; font-size: 1.6em; }

.quickorder-holder h3,
.content-area-dashboard h3 { margin: 0; padding: 0; }
.content-area-dashboard .content-area { padding: 15px; }
.content-area-dashboard .content-area .ui-selectmenu-text { font-size: 1.0em; line-height: 30px !important; padding-left: 10px !important; }
.content-area-dashboard .content-area input[type="text"].error { background-color: rgba(255,0,0,0.05); border-color: rgba(255,0,0,0.4);  }
.content-area-dashboard .content-area input[type="text"],
.content-area-dashboard .ui-selectmenu-text,
.content-area-dashboard .custom-combobox,
.content-area-dashboard .content-area select	{ width: 404px; height: 30px; line-height: 30px; padding-left: 10px;  font-size: 1.0em !important; border: 1px solid #dfdfdf; }
.content-area-dashboard .custom-combobox-toggle { right: -1px; }
.content-area-dashboard .ui-autocomplete-input,
.content-area-dashboard .content-area div &gt; .field { float: left; margin: 0 0 5px; }
.content-area-dashboard .content-area div &gt; .field:first-child { width: 120px; text-align: right; font-weight: bold; padding: 10px 10px 0 0; }

/* divider om content te scheiden.. */
.quickorder-divider { height: 1px; background-color: #dfdfdf }

/*css voor vervolgpagina's..*/
/*.content-area-dashboard .title-area { border-width: 0 0 1px 0; padding: 10px 15px 10px; }*/
.content-area-dashboard .content-area .customer-select { margin-top: 5px; }
.content-area-dashboard .content-area.results { padding: 0; }
.content-area-dashboard .content-area.results .field { padding: 0 10px 0 0 !important; margin: 0;  }
.content-area-dashboard .content-area.results .field.pre-input { margin-top: 9px; }
.content-area-dashboard .content-area.results .line { padding: 10px 0; border-bottom: 1px dotted #dfdfdf; float: none; overflow: auto; }
.content-area-dashboard .content-area.results .line.submit { border: none; text-align: right }
.content-area-dashboard .content-area.results .line.submit .btn.quickorder { font-size: 1.2em; margin: 6px 15px; display: inline-block; background-color: #70b743; border: none; padding: 15px 30px; color: #fff; cursor: pointer;  }
.content-area-dashboard .content-area.results .line.last { border: none; }
.content-area-dashboard .content-area.results .line.attention { background-color: rgba(255,190,0,0.2); }
.content-area-dashboard .content-area.results .line.attention input,
.content-area-dashboard .content-area.results .line.attention select { border-color: rgba(255,190,0,0.8); }
.content-area-dashboard .content-area.results .domain-status { border-radius: 50%; width: 8px; height: 8px; display: inline-block; }

.tiles .tile .content-area-dashboard { margin: 0; border: none; }
.tiles .tile .content-area-dashboard { margin: 0; border: none; }
.tiles .tile .content-area-dashboard .content-area input[type="text"],
.tiles .tile .content-area-dashboard .ui-selectmenu-text,
.tiles .tile .content-area-dashboard .custom-combobox,
.tiles .tile .content-area-dashboard .content-area select { width: 100%; }
.tiles .tile.fullwidth .content-area-dashboard .content-area input[type="text"],
.tiles .tile.fullwidth .content-area-dashboard .ui-selectmenu-text,
.tiles .tile.fullwidth .content-area-dashboard .custom-combobox,
.tiles .tile.fullwidth .content-area-dashboard .content-area select { width: 404px; }

/* productitem */

.product-item { position: relative; float: left; width: 181px;border: 1px solid #dddddd; padding: 10px 10px; margin: 0 0 10px 10px; background-color: #fff; }

.product-item .product-item-title { color: #5a5a5a; padding-top:5px; min-height: 31px; font-size: 14px; border-bottom:1px solid #dcdcdc; margin-bottom:5px; }
.product-item .specs .rule { line-height: 1.8em; font-size: 1.0em; overflow: hidden; }
.product-item .specs .label { float: left; padding: 3px 2px 0 0; }
.product-item .specs .value { float: right; padding: 3px 2px 0 0; color: #5a5a5a; }
.product-item .price .row &gt; span { float: left; display: block; margin:5px 0;}
.product-item .price .row div.pricetxt { color: #70b743; float: right;font-weight: bold; font-size: 28px;}
.product-item .price .row div.pricetxt .light {line-height: 28px; font-size: 18px; vertical-align: top;}
.product-item .price .row div.pricetxt.sec {color: #000000;font-weight: normal; font-size: 18px;}
.product-item .price .row div.pricetxt.sec .light {line-height: 18px; font-size: 12px;}
.product-item .price .row {clear:both;}

/* GDPR popup */

.gdpr-policy-popup {
	position: fixed;
	right: 20px;
	width: 200px;
	bottom: 0;
	padding: 10px;
	background-color: #5a5a5a;
	border:2px solid #70b743;
	color: #ffffff;
	overflow: auto;
}

.gdpr-policy-popup .clear {
	margin-bottom: 10px;
}

.gdpr-policy-popup .btn2 {
	float: right;
}

.row:after {content: "";display: table;clear: both;}
.row .column {	float: left;width: 50%;padding: 0 10px;box-sizing: border-box;}
.row .column:first-child {padding-left: 0;}
input.disabled {background-color: #eee; color:#000; border: 1px solid #eee;}

/* Messages (Tickets) */

.messages__box {
	width: 700px;
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 14px;
}

.message__date-container {
	display: flex;
	padding: 5px;
	background-color: #eee;
	color: #777;
	height: 30px;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	width: 200px;
	position: relative;
	left: 250px;
}

.message__to-end {
	display: flex;
	padding: 5px;
	background-color: #eee;
	color: #777;
	height: 30px;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	width: 200px;
	position: relative;
	left: 250px;
	cursor: pointer;
}

.message__time-container {
	text-align: right;
	width: 100%;
}


.message__from-customer {
	background-color: #e9fef5;
	padding: 20px;
	border-radius: 8px;
	left: 30%;
	width: 400px;
	position: relative;
}

.message__from-vdx {
	background-color: #e9f8ff;
	padding: 20px;
	border-radius: 8px;
	width: 400px;
	left: 10%;
}


.box-container {
	width: 100%;
	margin: 0 auto;
	display:flex;
}

.box100 {
	padding: 15px;
	float: left;
	width: calc(100% - 5px);
}

.box50-1, .box50-2 {
	padding: 15px;
	float: left;
	width: calc(50% - 5px);
}

.box50-1 {
	margin-right: 5px;
}

.ui-widget.ui-widget-content {border:0;}
.no-close .ui-dialog-titlebar-close {
	display: none;
}

.ui-widget-overlay {
	opacity: 0.5;
	filter: Alpha(Opacity=50);
	background-color: black;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
	background: #ffc421;
}
.ui-dialog-titlebar-close{
	display: none;
}

:root {
    --bs-body-font-family: Montserrat, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
}

.btn2 {
    font-family: var(--bs-body-font-family);
    font-weight: bold;
}



ul#navigation li a {
    font-weight: bold;
}


body,html { color: #000; background: #fff; }

#top-bar { font-family: Geogrotesque-Medium, sans-serif; font-weight: normal; font-style: normal;  }
#top-bar a:hover { text-decoration: none; color: #000; }

h1 { color: #000; }
h2 { color: #000; }
h3 { color: #000; }

#menu-panel .menu-title { font-weight: bold; color: #000; }

#menu-panel .menu-title:before {
    content: '/ ';
    color: #70b743;
}

#contact a { font-family: Geogrotesque-Regular, sans-serif; font-weight: normal; color: #000; text-transform: uppercase; }

.filter .buttons-container { margin: 5px 0 10px; }

.btn {
    display: inline-block;
    border:0;
    background: none repeat scroll 0 0 #ffc421;
    font-family: Geogrotesque-Regular, sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #1F1F1F !important; /* sorry for the important, but other styles keep overriding it */
    padding: 0 14px 0 10px;
    height: 37px;
    line-height: 37px;
    position: relative;
    cursor: pointer;
}
.btn .cl-icon {color: #1F1F1F;}
.btn.highlight {
    background-color: #5a5a5a;
    color: #fff !important;
}
.btn.highlight .cl-icon {color: #fff !important;}


.btn.h30 {height:30px; line-height: 30px;}

.btn2  .cl-icon{ display:none; }

.btn2 {
    display: inline-block;
    border:0;
    background: none repeat scroll 0 0 #ffc421;
    font-family: Geogrotesque-Regular, sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #1F1F1F !important; /* sorry for the important, but other styles keep overriding it */
    padding: 0 14px 0 35px;
    height: 37px;
    line-height: 37px;
    position: relative;
}
.btn2:before {
    background: url('https://mijn.vdx.nl/assets/images/vdx/icons-s75988e5446.png') no-repeat;
    background-position: 0 -426px;
    height: 16px;
    width: 10px;
    top: 10px;
    content: '';
    position: absolute;
    left: 14px;
}
.btn2.highlight {
    background-color: #5a5a5a;
    color: #fff !important;
}
.btn2.highlight:before {
    background-position: 0 -520px;
}

.btn2.h30:before { top:8px; }

#recent-invoices .list-view td {padding: 4px;}
#footer {padding: 20px 118px; margin-top:50px; background-color: #fafafa; }
#footer, #footer a { font-family: Geogrotesque-Regular, sans-serif; }

</pre></body></html>