/**
 * Rand: 5e73557dbe5f4
 * LastModified: 2020-03-18 21:46:44
 * AppUrl: /
 * PrimColor: #ec3643
 * 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("/assets/fonts/VDXMyFontsWebfontsKit.css");

@import url(//fonts.googleapis.com/css?family=Lato);

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

@font-face {
	font-family: 'cl-icons';
	src: url('/assets/fonts/cl-icons/icomoon.eot?5e73557dbe5f4');
	src: url('/assets/fonts/cl-icons/icomoon.eot?#iefix5e73557dbe5f4') format('embedded-opentype'),
		url('/assets/fonts/cl-icons/icomoon.woff?5e73557dbe5f4') format('woff'),
		url('/assets/fonts/cl-icons/icomoon.ttf?5e73557dbe5f4') format('truetype'),
		url('/assets/fonts/cl-icons/icomoon.svg?5e73557dbe5f4#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-subarrowright:after { content: "\e082"; }
.cl-icon.cl-questionmark:after { content: "\e083"; }
.cl-icon.cl-phone:after { content: "\e086"; }
.cl-icon.cl-shortcut:after { content: "\e0a4"; }
.cl-icon.cl-color-picker:after { content: "\e0a3"; }
.cl-icon.cl-blanco:after { content: "\e0ff"; }
.cl-icon.cl-calendar:after { content: "\e061"; }
.cl-icon.cl-cart:after { content: "\e062"; }
.cl-icon.cl-check:after { content: "\e063"; }
.cl-icon.cl-delete:after { content: "\e067"; }
.cl-icon.cl-download:after { content: "\e06b"; }
.cl-icon.cl-edit:after { content: "\e06c"; }
.cl-icon.cl-forbidden:after { content: "\e06d"; }
.cl-icon.cl-go-back:after { content: "\e06f"; }
.cl-icon.cl-go-forward:after { content: "\e070"; }
.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-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-archive:after { content: "\e060"; }
.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-add:after { content: "\e0a5"; }
.cl-icon.cl-warning:after { content: "\e064"; }
.cl-icon.cl-warning-inverse:after { content: "\e065"; }

/**
 * Products & Services (e2)
 */
.cl-icon.cl-faq:after { content: "\e273"; }
.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-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-windows:after { content: "\e274"; }
.cl-icon.cl-suitcase:after { content: "\e275"; }

/**
 * Administrative (e4)
 */
.cl-icon.cl-unsubscribe:after { content: "\e476"; }
.cl-icon.cl-user-details:after { content: "\e46d"; }
.cl-icon.cl-user-password:after { content: "\e46b"; }
.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-pref:after { content: "\e46c"; }
.cl-icon.cl-user-search:after { content: "\e46e"; }
.cl-icon.cl-tech-info:after { content: "\e471"; }
.cl-icon.cl-tech-data:after { content: "\e470"; }
.cl-icon.cl-groups:after { content: "\e46f"; }
.cl-icon.cl-subscription:after { content: "\e472"; }
.cl-icon.cl-e-mail-template:after { content: "\e474"; }
.cl-icon.cl-mail-settings:after { content: "\e475"; }

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

/* ------------------------------ XDEBUG AND ERRORS ------------------------------- */

.xdebug-error td, .xdebug-error th { border-collapse: collapse; border:1px solid black; padding:1px; }
pre > pre.xdebug-var-dump { font-family: monospace; border:1px dashed black; background-color: #dfdfdf; }
span.translate_error { background-color: #d40000 !important; color: #ffffff !important; font-weight:bold !important; cursor: help !important; padding-left:1px; padding-right:1px; }
abbr[title], acronym[title] { cursor: help; }
abbr[title]:after, acronym[title]:after { content: '\2026'; }

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

/* ------------------------------ */
/* font styles & 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; }
h2 { /* TODO [ppostma@20141020] can this be left out?: "float: left;"*/ padding: 14px 0 10px 44px; font-size: 18px; }
h2, hr { margin: 0 15px; }
h3 { font-size: 13px; font-weight: bold; color: #5a5a5a; }
h4 { font-size: 12px; font-weight: bold;}
hr { clear: both; }


.left { float: left; }
.right { float: right; }
.no-border { border: none !important; }
.nobr { white-space: nowrap; }
.center { text-align:center; }
.nomargin { margin: 0 !important; }
.grey-color-bg { background-color: #5e5e5e; }
.prim-color-bg { background-color: #ec3643 !important; }
.prim-color-fg { color:  #ec3643 !important; }
.prim-color-border { border-color:  #ec3643 !important; }
.sec-color-bg { background-color:#5a5a5a !important; }
.sec-color-fg { color: #5a5a5a !important; }
.sec-color-border { border-color: #5a5a5a !important; }
.highlight-color-bg { background-color: #ffc421 !important; }
.highlight-color-fg { color: #ffc421 !important; }
.highlight-color-border { border-color: #ffc421 !important; }
.text-color { color: #000000 !important; }
.text-color-alt { color: #000000 !important; }

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

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

/* Base */
.cl-icon { color: #ec3643; 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: #ec3643; 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; }

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


/* TOP-BAR */
#top-bar { height:47px; color: #ffffff; background-color: #ec3643; }
#top-bar, #top-bar a{color:#fff;}
#top-bar a:hover{color:#000;}

#title-panel {border: none; background-color: #f7f7f7; height:45px;  }

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

/* ------------------------------  */
/* logo panel */
#logo-panel { overflow: hidden;height: 115px;  }
#logo {float: left;width: 249px;padding: 0;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;}

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

/* ------------------------------ */
/* footer */
#footer {clear: both; padding: 12px 12px 28px 12px; text-align: center;}

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

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

/* ------------------------------ */
/* 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: #ec3643; text-transform: uppercase;margin-bottom: 25px;
    border-bottom: 1px solid #dfdfdf; padding-bottom: 15px;}




.container {max-width:1100px; min-width:400px; margin: 0 auto; }

body,html { font-family: Lato, 'Tahoma',verdana,sans-serif; color: #000; font-size: 14px; line-height:17px; background: #fff; }

#main { font-size: 16px; line-height:24px;}
#logo { padding-left:20px; width:140px;}
button{font-size: 16px;}
#main-panel { font-size: 16px; line-height:24px;}
#top-bar { font-family: Geogrotesque-Medium, sans-serif; font-weight: normal; font-style: normal;  }
#navigation, #navigation a{font-size: 19px;}
#login{font-size: 14px;}

h1 { font-weight: bold; font-size:22px; line-height:40px; color: #000; }
h2 { font-weight: bold; font-size:22px; line-height: 20px; color: #000; }
h3 { font-size: 16px; color: #000; }

#menu-panel .menu-title { font-weight: bold; font-size: 22px; line-height: 20px; color: #000; }

#contact a { font-family: Geogrotesque-Regular, sans-serif; font-size: 16px; font-weight: normal; color: #000; text-transform: uppercase; }
#recent-invoices.dashboard-column {font-size:14px;}

#menu_new.accounts {font-size:14px;line-height: 16px;}

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


.btn-vdx {

    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #ffc421;
    color: #1f1f1f;
    width:100%;
    text-align: center;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 14px 6px;
    font-family: Geogrotesque-Medium;
    font-size: 18px;
}
.btn-vdx:before {
    background: url(/assets/images/vdx/icons-s75988e5446.png) no-repeat;
    background-position: 0 -426px;
    height: 16px;
    width: 10px;
    top: 18px;
    content: '';
    position: absolute;
    left: 14px;
}

@media only screen and (max-width: 890px) {
    .btn-vdx:before {
        display: none;
    }
}

.btn2  .cl-icon{ display:none; }
.btn2 {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #ffc421;
    color: #1f1f1f;
    width:100%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 14px 6px 9px 33px;
    font-family: Geogrotesque-Medium;
    line-height: 18px;
    font-size: 18px;
    height: auto;
}
.btn2:before {
    background: url(/assets/images/vdx/icons-s75988e5446.png) no-repeat;
    background-position: 0 -426px;
    height: 16px;
    width: 10px;
    top: 15px;
    content: '';
    position: absolute;
    left: 14px;
}

input.text2 {
    width:100%;
    display: inline-block;
    padding: 6px;
    box-sizing: border-box;
}



.btn3 {
    display: inline-block;
    border:0;
    background: none repeat scroll 0 0 #ffc421;
    font-family: Geogrotesque-Medium;
    font-size: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #1F1F1F;
    padding: 0 14px 0 35px;
    height: 37px;
    line-height: 37px;
    position: relative;
}

.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; font-size: 16px;line-height: 24px; }

#page-notifications .notification {background-color: #FCF3D9;}


.column {
    float: left;
    text-align: left;
    width: 33.33%;
}
.column .inner {padding:0 15px 10px 15px}
.row:after {
    content: "";
    display: table;
    clear: both;
}


@media only screen and (max-width: 1030px) {
    h1 {
        height: 80px;
    }
}

@media only screen and (max-width: 700px) {
    .column {
        width: 100%;
        margin-top:20px;
    }
    h1 {height: auto;}
}

@media only screen and (max-width: 700px) {
    #contact {width: 220px; margin-top:20px;}
}