@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

:root {
  --white: #ffffff;
  --blue: #0013ff;
  --light-blue: #f2fbff;
  --warm-grey: #4d5b67;
  --light-grey: #abbac7;
  --black: #000000;
  --orange: #ff6700;
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--white);
  font-size: 14px;
}

a:hover {
  cursor: pointer;
}

/********************************/
/*			  ALERT			    */
/********************************/

div#alert {
  height: 40px;
  line-height: 41px;
  border-bottom: 2px solid #d8c684;
  padding-left: 10px;
  color: #3f3921;
  background: #f9ebaa url('/Content/images/dr/warning.png') left center no-repeat;
  background-position-x: 10px;
  text-indent: 25px;
}

div#alert span {
  display: inline-block;
  text-indent: 0;
}

div#alert span.alerttype {
  font-weight: 700;
  margin-right: 10px;
  color: #d8c684;
}

/********************************/
/*		STANDAARD PAGINA    	*/
/********************************/

p.instruction {
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 30px;
  margin-top: 20px;
}

h3.kop {
  font-size: 18px;
  color: var(--blue);
  width: 100%;
  border-bottom: 3px solid var(--blue);
  margin-bottom: 12px;
  text-transform: uppercase;
}

h3.kop--blue-divider {
  padding-bottom: .75rem; /* 12px */
  border-bottom: 2px solid var(--blue);
}

h3.kop.detail {
  border-bottom: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--black);
  padding-top: 1em;
  margin-top: 0;
}

/********************************/
/*			CONTENT				*/
/********************************/

div#titlebar {
  float: right;
  margin-top: 21px;
}

/********************************/
/*			Optionsbar			*/
/********************************/

/* Search */
div#optionsbar span.title {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: #c4c4c4;
  margin-left: 10px;
  margin-bottom: 4px;
}

div#search input[type="submit"] {
  height: 30px;
  width: 50px;
  padding: 0;
  margin: 0;
  border: 0;
  background: #3c6fb1 url(/Content/images/icons/search.png) no-repeat center left;
}

div#search input[type="submit"]:hover {
  background-color: #3c6fb1;
  cursor: pointer;
}

/* Filter */
div#filter {
  float: left;
  margin-right: 30px;
}

div#filter span.filter-option {
  display: inline-block;
  float: left;
  height: 28px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  border: 1px solid #c4c4c4;
  border-right: 0;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-weight: 700;
  color: #c4c4c4;
  width: 100px;
}

div#filter span.filter-option:last-child {
  border-right: 1px solid #c4c4c4;
  border-left: 0;
}

div#filter span.filter-option.selected {
  border-color: #3c6fb1;
  background-color: #3c6fb1;
  color: white;
}

div#filter span.filter-option:hover {
  cursor: pointer;
  border-color: #3c6fb1;
  color: #838383;
}

div#filter span.filter-option.selected:hover {
  border-color: #3c6fb1;
  background-color: #3c6fb1;
  color: white;
  cursor: default;
}

/* View */
div#view {
  float: left;
  margin-right: 30px;
}

div#view span.view-option {
  display: inline-block;
  float: left;
  height: 28px;
  width: 39px;
  background-color: white;
  border: 1px solid #c4c4c4;
  border-right: 0;
}

div#view span.view-option.selected {
  border-color: #3c6fb1;
  background-color: #3c6fb1;
}

div#view span.view-option:hover {
  cursor: pointer;
  border-color: #3c6fb1;
}

span.view-option.list {
  background: #fff url(images/icons/view_list.png) no-repeat center center;
}

span.view-option.detail {
  background: #fff url(images/icons/view_detail.png) no-repeat center center;
}

/* Aantal */

div#items span.items-num {
  display: inline-block;
  float: left;
  height: 28px;
  width: 39px;
  background-color: white;
  border-top: 1px solid #c4c4c4;
  border-bottom: 1px solid #c4c4c4;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-weight: 700;
  color: #c4c4c4;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#items span.items-num:nth-child(2) {
  border-left: 1px solid #c4c4c4;
  border-right: 0;
}

div#items span.items-num:last-child {
  border-right: 1px solid #c4c4c4;
  border-left: 0;
}

div#items span.items-num.selected {
  border-color: #3c6fb1;
  background-color: #3c6fb1;
  color: white;
}

div#items span.items-num:hover {
  cursor: pointer;
  border-color: #3c6fb1;
  color: #838383;
}

div#items span.items-num.selected:hover {
  border-color: #3c6fb1;
  background-color: #3c6fb1;
  color: white;
  cursor: default;
}

/********************************/
/*			Pagination			*/
/********************************/

div.paginationbar {
  height: 28px;
  width: 100%;
  line-height: 30px;
  padding-right: 10px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

div.paginationbar a, div.paginationbar span.pages {
  float: right;
  color: #838383;
  text-decoration: none;
  font-size: 12px;
  height: 3rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

div.paginationbar span.pages span {
  padding-left: .25em;
  padding-right: .25em;
}

div.paginationbar a {
  font-size: 24px;
  height: 2rem;
}

div.paginationbar a.prev {
  padding: 1em;
}

div.paginationbar a.next {
  padding: 1em;
}

div.paginationbar a:hover {
  color: #5586c6;
}

div.paginationbar span.active {
  font-weight: 900;
  color: #5586c6;
}

/********************************/
/*    Contact (Detail Page) 	*/
/********************************/

div#contactroles ul.roles {
  list-style: none;
}

div#contactroles ul.roles li {
  display: inline-block;
  width: 100%;
  background-color: var(--light-blue);
  padding-left: 10px;
  text-align: left;
  list-style: none;
  margin-bottom: 5px;
  position: relative;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
  line-height: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#contactroles ul.roles.primary li {
  pointer-events: none;
}

div#contactroles ul.roles li span.information,
div#contactroles ul.roles li span.options {
  display: block;
  width: 70%;
  float: left;
  padding-top: 12px;
}

div#contactroles ul.roles li span.options {
  width: 28%;
  padding-top: 0;
  float: right;
}

div#contactroles ul.roles.primary li span.rolename {
  color: grey;
}

div#contactroles ul.roles li span.rolename {
  color: var(--blue);
  font-size: 18px;
  display: inline-block;
  width: 100%;
}

div#contactroles ul.roles li span.roledescription {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

div#contactroles ul.roles.primary li span.roledescription {
  display: inline-block;
  margin-top: 10px;
  color: lightgrey;
}

div#contactroles ul.roles li span.options span.roleoption {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 34px;
  text-indent: 10px;
}

div#contactroles ul.roles li span.options span.roleoption i {
  padding-right: 1em;
}

div #contactroles ul.roles li span.options span.roleoption:hover {
  background-color: var(--light-blue);
  cursor: pointer;
}

div#contactroles ul.roles li span.options span.roleoption.last {
  border-bottom: 0;
}

div#contactroles ul.roles li span.options span.roleoption.single {
  height: 69px;
  line-height: 69px;
}

div#contactroles ul.roles li span.roleoption.single span.selection {
  margin-top: 27px;
}


div#contactroles ul.roles li span.roleoption span.selection {
  display: inline-block;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  background: white url(images/icons/power/power_empty.png) no-repeat center left;
  cursor: pointer;
  margin-top: 9px;
}

div#contactroles ul.roles.primary li span.roleoption span.selection.selected {
  background: transparent url(images/icons/power/power_success_disabled.png) no-repeat center left;
}

div#contactroles ul.roles li span.roleoption span.selection.selected {
  background: transparent url(images/icons/power/power_success.png) no-repeat center left;
}

/********************************/
/*			INVOICES			*/
/********************************/

/********************************/
/*		  Invoice Payment		*/
/********************************/
div#paymentresult div.resulttype {
  border-bottom: 2px solid #97be0d;
  margin-top: 16px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 24px;
}

div#paymentresult div.resulttype.red {
  border-color: #c52020;
}

div#paymentresult div.resulttype.yellow {
  border-color: #d8c684;
}

div#paymentresult div.resulttype img {
  margin-right: 5px;
}

div#paymentresult p.resultmessage {
  line-height: 1.6;
  margin-bottom: 10px;
}

div#paymentresult table {
  margin-top: 10px;
}


/********************************/
/*	 Virtual Machine (detail)  	*/
/********************************/

div#network.detail-section,
div#details.detail-secontion,
div#contracts.detail-section,
div#backup.detail-section,
div#capacity.detail-section,
div#servers.detail-section,
div#resources.detail-section,
div#dns.detail-section,
div#nameserver.detail-section,
div#whois.detail-section,
div#configuration.detail-section,
div#iaasboxusers.detail-section,
div#iaasboxusers.detail-section,
div#iaasboxconfig.detail-section,
div#bundles.detail-section {
  display: none;
}

div.detail-section div.success,
div.detail-section div.error,
div.detail-section div.warning {
  margin-top: .75rem;
  margin-bottom: .75rem;
}

div#details table td input {
  border: 0;
  height: 24px;
  width: 100%;
  font-size: 14px;
}


span.loading {
  height: 16px;
  float: right;
  margin-top: 4px;
  background: #fff url(images/dr/loader-transparent.gif) no-repeat center left;
  font-size: 10px;
  text-indent: 20px;
}

span.remove {
  height: 16px;
  width: 16px;
  background: #fff url(images/icons/remove.png) no-repeat center left;
}

span.remove:hover {
  cursor: pointer;
  background: #fff url(images/icons/remove_hover.png) no-repeat center left;
}

span.remove.loading {
  background: #fff url(images/dr/loader-transparent.gif) no-repeat center left;
}


div.specs div.updowngrade {
  height: 100%;
  line-height: 50px;
  padding-bottom: 10px;
}

div.specs div.updowngrade span.status {
  float: left;
  color: #a9a9a9;
  font-size: 12px;
  height: 40px;
}

div#backup,
div#hardware {
  padding-top: 20px;
}

/********************************/
/*	    HOST CAPACITY VIEW   		*/
/********************************/
ul.capacity:first-of-type {
  margin-top: 12px;
}

ul.capacity li {
  display: inline-block;
  height: 112px;
  width: 192px;
  border: 1px solid #eaeaea;
  font-size: 64px;
  line-height: 88px;
  text-align: center;
  list-style: none;
  margin-bottom: 5px;
}

ul.capacity.head li {
  height: 86px;
  width: 48%;
  line-height: 62px;
  font-size: 40px;
}

ul.capacity.wide li {
  height: 86px;
  line-height: 62px;
  font-size: 40px;
  font-weight: 300;
  width: 32%;
}

ul.capacity.wide li.bar {
  background-color: white;
  width: 100%;
  height: 30px;
  line-height: 0;
  border: 0;
  margin-bottom: 0px;
  margin-top: 10px;
}

ul.capacity li span.type,
ul.capacity li span.type-available,
ul.capacity li span.type-capacity,
ul.capacity li span.type-used {
  display: block;
  height: 14px;
  border-bottom: 1px solid #eaeaea;
  line-height: 9px;
  bottom: 0;
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 10px;
}

ul.capacity li span.type-available {
  color: #b5c4cb;
}

ul.capacity li span.type-capacity {
  color: var(--blue);
}

ul.capacity li span.type-used {
  color: var(--orange);
}

ul.capacity li span.title {
  font-size: 18px;
  line-height: 27px;
  height: 27px;
  display: inline-block;
  float: left;
  width: 32%;
  color: black;
  text-align: left;
  font-weight: 600;
  margin-right: 4px;
}

ul.capacity li span.bar-container,
ul.capacity li span.bar-container-half,
ul.capacity li span.bar-container-wide {
  font-size: 12px;
  line-height: 29px;
  height: 29px;
  display: inline-block;
  float: left;
  width: 65%;
  color: white;
  text-align: left;
  text-indent: 20px;
  border: 1px solid #eaeaea;
}

ul.capacity li span.bar-container {
  width: 65%;
}

ul.capacity li span.bar-container-half {
  width: 48%;
}

ul.capacity li span.bar-container-wide {
  width: 97%;
}

ul.capacity li span.unit {
  font-size: 16px;
  line-height: 16px;
}

ul.capacity li span.bar.low {
  background-color: #a2cb13;
  height: 100%;
  display: block;
  color: #586272;
}

ul.capacity li span.bar.green {
  background-color: #a2cb13;
  height: 100%;
  display: block;
}

ul.capacity li span.bar.orange {
  background-color: #fbeed6;
  height: 100%;
  display: block;
  color: #ab7e32;
}

ul.capacity li span.bar.red {
  background-color: #f08080;
  height: 100%;
  display: block;
}

/********************************/
/*	    WHOIS   		*/
/********************************/

div.overlay-container.update-whois span.num {
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  padding-left: 4px;
  padding-right: 4px;
  height: 17px;
  color: white;
  text-align: center;
  line-height: 17px;
  font-weight: 700;
  background-color: #5586c6;
  float: left;
  margin-top: 4px;
  margin-left: 5px;
  margin-right: 10px;
}

div.overlay-container.update-whois p.editwhoiscontact {
  font-size: 12px;
  float: right;
}


/********************************/
/*	    UP-/DOWNGRADES   		*/
/********************************/

div.serverconfig div.warning.backupinfo {
  margin-top: 14px;
  width: 537px;
  float: right;
  padding-left: 0;
  padding-top: 0;
  text-indent: 10px !important;
  margin-left: 20px;
  color: #888888;
  border-color: #5286c6;
  background: white;
  margin-bottom: 0;
}

div.serverconfig div.warning.backupinfo span.title {
  display: block;
  background-color: #5286c6;
  padding-top: 3px;
  padding-bottom: 3px;
  color: white;
  margin-bottom: 4px;
}

div.serverconfig div.warning.backupinfo p.capacitycheck {
  border-top: 1px solid #eaeaea;
  margin-top: 3px;
  padding-top: 3px;
}

div.serverconfig div.warning.backupinfo p.capacitycheck input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
}

div.specs.updowngraderesult table {
  background-color: white;
  width: 100%;
  border: 1px solid #eaeaea;
  margin-bottom: 13px;
}

div.specs.updowngraderesult table tr {
  height: 38px;
  line-height: 12px;
}

div.specs.updowngraderesult table tr td {
  border-bottom: 1px solid #eaeaea;
}

div.specs.updowngraderesult table tr td:last-child {
  font-size: 12px;
  text-align: right;
  padding-right: 12px;
  line-height: 3;
  color: #888888;
}

div.specs.updowngraderesult table tr:last-child td {
  border-bottom: 0;
}


/***********************************/
/*  PRIVATE CLOUDSERVER RESOURCES  */
/***********************************/
#resources div.content div.instruction span.locked {
  display: inline-block;
  float: right;
  background: white url('/Content/images/icons/locked.png') center center no-repeat;
  width: 24px;
  height: 24px;
  margin-top: 5px;
}

#resources div.content div.instruction span.locked:hover {
  background: white url('/Content/images/icons/unlocked-hover.png') center center no-repeat;
  cursor: pointer;
}

div#resourcelock {
  float: right;
  width: 634px;
  height: 883px;
  background: #eaeaea;
  position: absolute;
  opacity: 0.5;
  border: 2px solid #888888;
  margin-left: -4px;
  margin-top: 30px;
  z-index: 1000;
}

/********************************/
/*  PUBLIC CLOUDSERVER CONFIG   */
/*  PRIVATE CLOUDSERVER CONFIG  */
/********************************/
div.privatecloudserverconfig {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  box-sizing: border-box;
}

div.privatecloudserverconfig .descriptionbar {
  padding-right: 1em;
}

div .privatecloudserverconfig div.resources {
  height: 100%;
  width: 100%;
  margin-top: 0;
  float: left;
}

div.privatecloudserverconfig div.harddisks {
  float: left;
  width: 100%;
  margin-top: 10px;
}

div.privatecloudserverconfig div.harddisks ul {
  list-style: none;
  width: 100%;
}

div.privatecloudserverconfig div.harddisks ul li {
  height: 70px;
  width: 99%;
  border-bottom: 1px solid #efefef;
}

div.privatecloudserverconfig div.harddisks ul li:first-child {
  border-top: 1px solid #efefef;
}

div.privatecloudserverconfig div.harddisks ul li span.name,
div.privatecloudserverconfig div.harddisks ul li span.current,
div.privatecloudserverconfig div.harddisks ul li span.sliderbox,
div.privatecloudserverconfig div.harddisks ul li span.new {
  float: left;
  display: inline-block;
}

div.privatecloudserverconfig div.harddisks ul li span.current {
  width: 10%;
}

div.privatecloudserverconfig div.harddisks ul li span.name {
  width: 15%;
  font-size: 16px;
  color: #8c8e8c;
  font-weight: 700;
  line-height: 70px;
}

div.privatecloudserverconfig div.harddisks ul li span.current,
div.privatecloudserverconfig div.harddisks ul li span.new {
  width: 10%;
  font-size: 20px;
  line-height: 11px;
  padding-top: 25px;
}

div.privatecloudserverconfig div.harddisks ul li div.removedisk a {
  margin-top: 24px;
  margin-left: 15px;
}

div.privatecloudserverconfig div.harddisks ul li span.sliderbox {
  width: 49%;
  margin-left: 4%;
  margin-right: 4%;
  padding-top: 25px;
}

div.privatecloudserverconfig div.warning.backupinfo {
  margin-top: 14px;
  width: 537px;
  float: right;
  padding-left: 0;
  padding-top: 0;
  text-indent: 10px !important;
  margin-left: 20px;
  color: #888888;
  border-color: #5286c6;
  background: white;
  margin-bottom: 0;
}

div.privatecloudserverconfig div.warning.backupinfo span.title {
  display: block;
  background-color: #5286c6;
  padding-top: 3px;
  padding-bottom: 3px;
  color: white;
  margin-bottom: 4px;
}

div.privatecloudserverconfig div.warning.backupinfo p.capacitycheck {
  border-top: 1px solid #eaeaea;
  margin-top: 3px;
  padding-top: 3px;
}

div.privatecloudserverconfig div.warning.backupinfo p.capacitycheck input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 6px;
}

div.publiccloudserverconfig div.servertype div.title,
div.privatecloudserverconfig div.servertype div.title {
  line-height: 30px;
}

div.publiccloudserverconfig div.servertype div.title.poweredon:hover,
div.privatecloudserverconfig div.servertype div.title.poweredon:hover {
  cursor: default;
}

div.publiccloudserverconfig div.servertype div.title span.name,
div.privatecloudserverconfig div.servertype div.title span.name {
  margin-top: 12px;
  display: inline-block;
  width: 80%;
  float: left;
}

div.publiccloudserverconfig div.servertype div.title span.namesub,
div.privatecloudserverconfig div.servertype div.title span.namesub {
  font-size: 15px;
  display: block;
  width: 80%;
  float: left;
}

div.publiccloudserverconfig div.servertype div.title span.num,
div.privatecloudserverconfig div.servertype div.title span.num {
  font-size: 24px;
  font-weight: 700;
  margin-top: 25px;
  margin-left: 10px;
}


/********************/
/*  CONFIGOVERVIEW  */
/********************/
div.confirm-reconfigure div.configoverview,
div.confirm-reconfigure-resources div.configoverview,
div.confirm-reconfigure-storage div.configoverview {
  padding-bottom: .5rem;
  width: 100%;
}

div.confirm-reconfigure div.configoverview table,
div.confirm-reconfigure-resources div.configoverview table,
div.confirm-reconfigure-storage div.configoverview table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
  line-height: 50px;
  text-align: center;
}

div.confirm-reconfigure div.configoverview table tr,
div.confirm-reconfigure-resources div.configoverview table tr,
div.confirm-reconfigure-storage div.configoverview table tr {
  border-bottom: 1px solid #eaeaea;
}

div.confirm-reconfigure div.configoverview table tr.header,
div.confirm-reconfigure-resources div.configoverview table tr.header,
div.confirm-reconfigure-storage div.configoverview table tr.header {
  border-bottom: 3px solid #3c6fb1;
  text-transform: uppercase;
}

div.confirm-reconfigure div.configoverview table tr.header th,
div.confirm-reconfigure-resources div.configoverview table tr.header th,
div.confirm-reconfigure-storage div.configoverview table tr.header th {
  border-right: 1px solid #eaeaea;
}

div.confirm-reconfigure div.configoverview table tr.header th:last-child,
div.confirm-reconfigure-resources div.configoverview table tr.header th:last-child,
div.confirm-reconfigure-storage div.configoverview table tr.header th:last-child {
  border-right: 0;
}

div.confirm-reconfigure div.configoverview table td,
div.confirm-reconfigure-resources div.configoverview table td,
div.confirm-reconfigure-storage div.configoverview table td {
  border-right: 1px solid #eaeaea;
}

div.confirm-reconfigure div.configoverview table td.first,
div.confirm-reconfigure-resources div.configoverview table td.first,
div.confirm-reconfigure-storage div.configoverview table td.first {
  font-weight: bold;
}

div.confirm-reconfigure div.configoverview table td:last-child,
div.confirm-reconfigure-resources div.configoverview table td:last-child,
div.confirm-reconfigure-storage div.configoverview table td:last-child {
  border-right: 0;
}

div.content span.warningtext {
  width: 220px;
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  color: #888888;
  line-height: 14px;
  float: left;
  margin-top: 11px;
  margin-left: 5px;
}

/********************************/
/*	        Case(s)      	    */
/********************************/
div#closed, div#oactive, div#oclosed {
  display: none;
}

div.newcase div.orderstep {
  width: 100%;
  border-bottom: 5px solid #e5e5e5;
  height: 50px;
  margin-bottom: 15px;
  line-height: 50px;
}

div.newcase div.orderstep span {
  font-size: 30px;
  font-weight: 400;
  /* Chrome (Windows) Font Rendering fix */
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: 0.2px unset;
}


div.newcase {
  float: left;
  width: 100%;
}

div.newcase p {
  line-height: 1.8;
}

div.newcase ul.casetype {
  list-style: none;
  width: 100%;
  height: 95px;
}

div.newcase ul.casetype li {
  display: inline-block;
  height: 95px;
  width: 50%;
  margin-bottom: 10px;
  float: left;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  border: 2px solid #e5e5e5;
  box-sizing: border-box;
  cursor: pointer;
}

div.newcase ul.casetype li:first-child {
  border-right: 0;
}

div.newcase ul.casetype li.selected,
div.newcase ul.casetype li:hover {
  background-color: #3c6fb1;
  border: 0;
  color: white;
  line-height: 40px;
}

div.newcase ul.casetype li span.description {
  display: inline-block;
  font-size: 11px;
  width: 90%;
  margin: 0 auto;
  line-height: 14px;
}

div.newcase form input[type="radio"] + label {
  width: 158px;
  margin-bottom: 10px;
}

div.newcase ul.resources li:hover {
  cursor: pointer;
}

div.newcase ul.harddisk {
  list-style: none;
  height: 100%;
  width: 100%;
  margin-bottom: 20px;
}

div.newcase ul.harddisk li {
  height: 30px;
  width: 210px;
  float: left;
  margin-top: 5px;
  margin-right: 5px;
  border: 2px solid #e5e5e5;
  background: #fff url(images/icons/unchecked.png) no-repeat center right;
  background-position-x: 175px;
  text-indent: 10px;
  line-height: 30px;
  cursor: pointer;
}

div.newcase ul.harddisk li.selected {
  border-color: #97be0d;
  background: #fff url(images/icons/checked.png) no-repeat center left;
  background-position-x: 175px;
}

div.newcase ul.harddisksize {
  height: 40px;
  list-style: none;
  font-size: 12px;
  font-weight: 400;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

div.newcase ul.harddisksize li {
  height: 38px;
  width: 58px;
  float: left;
  text-align: center;
  padding-top: 2px;
  border: 3px solid #efefef;
  border-right: 0;
}

div.newcase ul.harddisksize li:last-child {
  border-right: 3px solid #efefef;
}

div.newcase ul.harddisksize p.size {
  font-size: 14px;
}

div.newcase ul.harddisksize li:hover,
div.newcase ul.harddisksize li.selected {
  background-color: #efefef;
  cursor: pointer;
}

div.newcase table.caseorderprices {
  border-collapse: collapse;
  margin-top: 10px;
}

div.newcase table.caseorderprices tr {
  text-align: left;
  height: 30px;
  border-bottom: 1px solid #c6ddf1;
  text-indent: 10px;
}

div.newcase table.caseorderprices tr.meta {
  border-bottom: 0;
}

div.newcase table.caseorderprices tr.meta td:first-child {
  border-right: 0;
}

div.newcase table.caseorderprices tr.meta td:nth-child(2),
div.newcase table.caseorderprices tr.meta td:nth-child(3) {
  border-bottom: 1px solid #dedede;
}

div.newcase table.caseorderprices tr th {
  font-weight: 700;
  font-size: 14px;
  background-color: #f0f3f4;
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #cacaca;
}

div.newcase table.caseorderprices tr td {
  border-right: 1px solid #c6ddf1;
}

div.newcase .pika-single {
  margin-top: 10px;
  margin-bottom: 10px;
}

/********************************/
/*	        Case (detail)       */
/********************************/

div#casedetails table.wide tr {
  height: 30px;
}

div#casedetails table.wide tr td:first-child {
  width: 150px;
}

div#casedetails table.wide tr:nth-child(odd) {
  background-color: #f0f3f4;
}

div#casedetails table.wide tr.spacer {
  height: 4px;
  background-color: #5586c6;
}

/********************************/
/*	  Maintenance (detail)      */
/********************************/

div#maintenancedetails p ul,
div#maintenancedetails p ol {
  margin-left: 30px;
}

/********************************/
/*		    ORDER	            */
/********************************/

/********************************/
/*	      Shared Hosting      	*/
/********************************/

div#nospam p {
  line-height: 1.8;
  text-align: justify;
}

div#domain div.domaincheck,
div#nospam div.domaincheck {
  width: 100%;
}


div#domain div.domaincheck span.button-domain,
div#nospam div.domaincheck span.button-domain {
  display: inline-block;
  float: left;
  width: 21%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  /*border: 3px solid #5586c6;*/
  /*border: 3px solid #e4e4e4;*/
  border: 3px solid #5586c6;
  border-left-color: #5586c6;
  background-color: #5586c6;
  color: white;
  cursor: pointer;
}

div#domain div.domaincheck span.button-domain.multiple {
  width: 100%;
  border: 0;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  margin-bottom: 10px;
}

div#domain div.domaincheck span.button-domain:hover,
div#nospam div.domaincheck span.button-domain:hover {
  background-color: #586272;
  border-color: #586272;
}


/* Hosting */
div#hosting div.hosting-switch,
div#vps div.vps-switch {
  margin-bottom: 10px;
  cursor: pointer;
}

div.hosting-switch span.selected,
div.vps-switch span.selected {
  font-weight: bold;
}

div.hosting-switch span:hover,
div.vps-switch span:hover {
  text-decoration: underline;
}

div#sh-steps {
  margin-bottom: 80px;
  margin-top: 15px;
}

div.sh-divider {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #c4c4c4;
  margin-top: 40px;
  margin-bottom: 1px;
}

div#sh-step4 table,
div#sh-step5 table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin-bottom: 20px;
  margin-top: 10px;
}

div#sh-step4 table tr,
div#sh-step5 table tr {
  height: 40px;
  border-bottom: 1px solid #5586c6; /* #c6ddf1; */
  text-indent: 10px;
}

div#sh-step4 table tr th,
div#sh-step5 table tr th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid #cacaca;
  background-color: #f0f3f4;
  line-height: 31px;
  height: 30px;
}

div#sh-step4 table tr th.name,
div#sh-step5 table tr th.name {
  width: 25%;
}

div#sh-step4 table tr th.product,
div#sh-step5 table tr th.product {
  width: 25%;
}

div#sh-step4 table tr th.duration,
div#sh-step5 table tr th.duration {
  width: 25%;
}

div#sh-step4 table tr th.price,
div#sh-step5 table tr th.price {
  width: 130px;
  border-right: 0;
}

div#sh-step4 table tr td,
div#sh-step5 table tr td {
  border-right: 1px solid #5586c6;
}

div#sh-step4 table tr td:nth-child(4),
div#sh-step5 table tr td:nth-child(4) {
  text-align: right;
  padding-right: 10px;
  border-right: 0;
}

div#sh-step4 table tr.meta {
  border-bottom: 0;
}

div#sh-step4 table tr.meta td:nth-child(1) {
  border-bottom: 0;
}

div#sh-step4 table tr.meta td:nth-child(2) {
  border-bottom: 0;
}

div#sh-step4 table tr.meta td {
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

div#sh-step4 table tr.meta td:nth-child(3) {
  border-right: 1px solid #e5e5e5;
}

/* DNS */
div.itemconfig table {
  border-collapse: collapse;
}

div.itemconfig table th {
  height: 30px;
  text-indent: 10px;
}

div.itemconfig form.dns input[type="text"] {
  width: 347px;
  margin-left: 3px;
}

div.itemconfig form.dns select,
div.itemconfig form.dns input[type="text"].pref {
  width: 73px;
  margin-left: 3px;
}

div.itemconfig form.dns input.src {
  margin-left: 0;
}


div.itemconfig form.nameservers input[type="radio"] + label {
  width: 140px;
}


/* WHOIS */
div.itemconfig div.whoiscontact {
  float: left;
  width: 49%;
  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-right: 3px solid #d3d9e0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div.itemconfig div.whoiscontact h3 {
  margin-bottom: 10px;
  text-transform: capitalize;
}

div.itemconfig div.whoiscontact.right {
  float: right;
  border-right: 0;
}

div.itemconfig div.whoiscontact p.editwhoiscontact {
  font-size: 12px !important;
  border-bottom: 1px dashed #5586c6;
  text-align: right !important;
  width: 100% !important;
}

div.itemconfig div.whoiscontact p.editwhoiscontact:hover {
  color: #5586c6;
}

/********************************/
/*		    ACCOUNT	            */
/********************************/

div#address, div#billing {
  display: none;
}


/********************************/
/*			LOGIN				*/
/********************************/
div#login-form,
div#reset-form {
  padding-top: 20px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

div#login-form p,
div#reset-form p {
  font-size: 12px;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.6em;
  margin-bottom: 10px;
  margin-top: 20px;
}

div#login-wrapper p.forgotpassword,
div#login-wrapper p.multipleaccounts,
div#login-wrapper p.reset-multipleaccounts,
div#login-wrapper p.resendcode {
  font-size: 16px;
  margin-bottom: 15px;
  margin-top: 15px;
}

div#login-multipleaccounts {
  margin-bottom: 12px;
}

span.button-login {
  display: inline-block;
  width: 340px;
  height: 48px;
  background-color: #ea8a01;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 48px;
  margin-top: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

span.button-login:hover {
  cursor: pointer;
  background-color: #da8000;
}

span.button-login img {
  margin-top: 17px;
}

.uppercase {
  text-transform: uppercase;
}

/********************************/
/*			GLOBAL				*/
/********************************/

.hidden {
  display: none;
}

.clear {
  clear: both;
}

/********************************/
/*		    BUTTONS 			*/
/********************************/
span.button,
span.button-flat {
  display: inline-block;
  height: 30px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #97be0d;
  min-width: 74px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border-bottom: 2px solid #627c06;
  color: white;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  line-height: 32px;
  margin-top: 9px;
  margin-right: 9px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/********************************/
/*    Button Flat -> OPTIONS    */
/********************************/
span.button-flat {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-right: 0;
  padding-left: 10px;
  padding-right: 10px;
  border-color: #97be0d;
  border-bottom: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: all .2s ease;
}

span.button-flat.small {
  width: auto;
  float: right;
  margin-right: 0;
}

span.button-flat.gray {
  background-color: #e1e1e1;
  color: #999999;
}

span.button-flat.blue {
  background-color: #3c6fb1;
  color: white;
}

span.button-flat.highlight {
  transition: all .2s ease;
  background-color: #ea8a01;
}

span.button-flat.red {
  background-color: #c52020;
}

span.button-flat.red:hover {
  background-color: #d82222;
}

span.button-flat.blue:hover {
  background-color: #6792cb;
  color: white;
}

span.button-flat:hover {
  background-color: #a2cb13;
}

span.button-flat.gray:hover {
  background-color: #e1e1e1;
  color: #999999;
  cursor: default;
}

span.button-flat.left {
  float: left;
}

span.button-flat a {
  color: white;
  text-decoration: none;
}

/********************************/
/*       Button -> OPTIONS      */
/********************************/
span.button.shoppingcart {
  border-bottom-color: #c67501;
  background: #ea8a01 url(/Content/images/icons/cart_white.png) no-repeat left center;
  padding-left: 35px;
  background-position: 10px 8px;
  color: white;
  margin-right: 0;
}

span.button.shoppingcart:hover {
  background: #ffba58 url(/Content/images/icons/cart_white.png) no-repeat left center;
  padding-left: 35px;
  background-position: 10px 8px;
}

span.button.shoppingcart.green {
  background-color: #97be0d;
  border-bottom: 2px solid #627c06;
}

span.button.shoppingcart.green:hover {
  border-bottom: 2px solid #627c06;
}

span.button.green:hover {
  background-color: #a2cb13;
}

span.button:active {
  cursor: pointer;
  border-top: 2px solid #627c06;
  border-bottom: 0;
  background-color: #97be0d;
}

span.button.gray {
  background-color: #e1e1e1;
  border-bottom: 2px solid #afafaf;
  color: #999999;
}

span.button.gray:hover {
  background-color: #ecebeb;
}

span.button.gray:active {
  border-top: 2px solid #afafaf;
  border-bottom: 0;
}

span.button.red {
  background-color: #c52020;
  border-bottom: 2px solid #8e0a0a;
  color: white;
}

span.button.red:hover {
  background-color: #d82222;
}

span.button.red:active {
  border-top: 2px solid #8e0a0a;
  border-bottom: 0;
}

span.button.right {
  float: right;
}

span.button.left {
  float: left;
}

span.button span.loader {
  display: inline-block;
  margin-top: 3px;
}


/*********************************/
/*      MESSAGES                 */
/*********************************/

div.result {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 35px;
  line-height: 1.6;
  margin-bottom: 10px;
  display: none;
}

div.result span {
  display: none;
}

div.result.success {
  border-bottom: 2px solid #627c06;
  color: white;
  background: #97be0d url('/Content/images/icons/result/success.png') left center no-repeat;
  background-position-x: 10px;
}

div.result.warning {
  border-bottom: 2px solid #d8c684;
  color: #3f3921;
  background: #f9ebaa url('/Content/images/icons/result/warning.png') left center no-repeat;
  background-position-x: 10px;
}

div.result.error {
  border-bottom: 2px solid #8e0a0a;
  color: white;
  background: #c52020 url('/Content/images/icons/result/error.png') left center no-repeat;
  background-position-x: 10px;
}

/********************************/
/*		USER (Overlay)			*/
/********************************/

div.default div.validation {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  padding-top: 5px;
  background-color: #c52020;
}

div.default div.validation p {
  font-weight: 700;
  line-height: 24px;
  color: white;
  text-indent: 10px;
  padding-left: 0;
  padding-right: 0;
}


/* OPTIONS */
div.options li.disabled {
  cursor: default !important;
}

div.options a.disabled {
  cursor: default !important;
  color: #c1c1c1;
  font-weight: normal;
}

a.detail {
  background: url(/Content/images/icons/option/detail.png) no-repeat center left;
}

a.detail:hover, a.detail:focus {
  background: url(/Content/images/icons/option/detail_hover.png) no-repeat center left;
}

a.sub {
  background: url(/Content/images/icons/option/sub.png) no-repeat center left;
}

a.sub:hover, a.sub:focus {
  background: url(/Content/images/icons/option/sub_hover.png) no-repeat center left;
}

a.sub.minus {
  float: left;
  background: url(/Content/images/icons/option/sub_minus.png) no-repeat center left;
  margin-top: 0;
}

a.sub.minus:hover, a.sub.minus:focus {
  background: url(/Content/images/icons/option/sub_minus_hover.png) no-repeat center left;
}

a.pdf {
  background: url(/Content/images/icons/option/download.png) no-repeat center left;
}

a.pdf:hover, a.pdf:focus {
  background: url(/Content/images/icons/option/download_hover.png) no-repeat center left;
}

a.csv {
  background: url(/Content/images/icons/option/downloadcsv.png) no-repeat center left;
}

a.csv:hover, a.csv:focus {
  background: url(/Content/images/icons/option/downloadcsv_hover.png) no-repeat center left;
}

a.view {
  background: url(/Content/images/icons/option/view.png) no-repeat center left;
}

a.view:hover, a.view:focus {
  background: url(/Content/images/icons/option/view_hover.png) no-repeat center left;
}

a.pay {
  background: url(/Content/images/icons/option/pay.png) no-repeat center left;
}

a.pay:hover, a.pay:focus {
  background: url(/Content/images/icons/option/pay_hover.png) no-repeat center left;
}

a.convert {
  background: url(/Content/images/icons/sidemenu/configuration.png) no-repeat center left;
}

a.convert:hover, a.convert:focus {
  background: url(/Content/images/icons/sidemenu/configuration_hover.png) no-repeat center left;
}

a.case {
  background: url(/Content/images/icons/option/case.png) no-repeat center left;
}

a.case:hover, a.case:focus {
  background: url(/Content/images/icons/option/case_hover.png) no-repeat center left;
}

a.order {
  background: url(/Content/images/icons/option/sub.png) no-repeat center left;
}

a.order:hover, a.order:focus {
  background: url(/Content/images/icons/option/sub_hover.png) no-repeat center left;
}

a.edit {
  height: 16px;
  width: 16px;
  background: url(/Content/images/icons/edit.png) no-repeat center left;
}

a.edit:hover, a.edit:focus {
  background: url(/Content/images/icons/edit_hover.png) no-repeat center left;
}

a.remove {
  background: url(/Content/images/icons/remove.png) no-repeat center left;
}

a.remove:hover, a.remove:focus {
  background: url(/Content/images/icons/remove_hover.png) no-repeat center left;
}

a.service {
  padding-left: 23px;
}

a.plus {
  width: 100%;
  height: 16px;
  padding-left: 21px;
  font-size: 12px;
  text-transform: uppercase;
  vertical-align: top;
  color: #adadad;
  background: url(/Content/images/icons/option/sub.png) no-repeat center left;
}

a.plus:hover, a.plus:focus {
  background: url(/Content/images/icons/option/sub_hover.png) no-repeat center left;
}

/* TOOLTIP */
.tooltip {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.tooltip:hover:after {
  display: inline-block;
  background-color: #F2FBFF;
  opacity: 1.0;
  border: 1px solid #4D5B67;
  border-radius: 2px;
  bottom: 26px;
  color: #4D5B67;
  content: attr(title);
  left: -100%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 6px;
  position: absolute;
  z-index: 98;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/********************************/
/*	    RESULT MESSAGES			*/
/********************************/

div.warning, div.success, div.error, div.betawarning, div.bigloader {
  line-height: 20px;
  font-size: 13px;
  font-weight: 400;
  padding: .5rem .5rem .5rem 3rem;
}

div.warning, div.success, div.error, div.betawarning {  
  color: var(--blue);
  background: var(--light-blue) url('/Content/images/dr/warning.png') left center no-repeat;
  background-position: 1rem center;    
  border: 1px solid var(--blue);
}

div.bigloader {
  background: none;
  background-color: var(--light-blue);
  border: none;
  margin-top: 16px;
  padding-left: 10px;
}

div.bigloader {  
  border-color: #dbebff;
  color: var(--warm-grey);        
}

div.bigloader span.loader {
  float: left;
  margin-top: 2px;
  margin-right: 5px;
}

div.success, div.error {
  display: none;
}

div.success span, div.error span {
  display: none;
}

div.error.visible {
  display: block !important;
}

div.info {
  border-color: #3c6fb1;
  color: #3c6fb1;
}

div.error {
  border: 0;
  background: var(--orange) url('/Content/images/icons/error_white.png') left center no-repeat;
  margin-bottom: 0;
  background-position: 1rem center;
  color: white;
}

div.success {
  border: 0;
  background: var(--light-blue) url('/Content/images/icons/success_dark.png') left center no-repeat;
  margin-bottom: 0;
  background-position: 1rem center;
  color: var(--warm-grey);
}

div.warning {
  border: 0;
  background: var(--blue) url('/Content/images/icons/error_white.png') left center no-repeat;
  margin-bottom: 0;
  background-position: 1rem center;
  color: white;
}

div.betawarning {
  background: #fbeed6 url('/Content/images/dr/warning.png') left center no-repeat;
  background-position: 19px;
  padding-left: 45px;
  border: 0;
  border-bottom: 1px solid #fddfa8;
  border-color: #fddfa8;
  margin-bottom: 0;
}

div.betawarning a {
  color: #ab7e32;
}

/********************************/
/*		    DASHBOARD			*/
/********************************/

div.dashboard span.num {
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  padding-left: 4px;
  padding-right: 4px;
  height: 17px;
  color: white;
  text-align: center;
  line-height: 17px;
  font-weight: 700;
  background-color: var(--orange);
  float: left;
  margin-top: 1px;
  margin-left: 5px;
}

div.dashboard-block.last {
  border-right: 0;
  padding-right: 0;
}

div.dashboard-block p {
  line-height: 1.6;
}

div.dashboard-block p.description {
  margin-top: 10px;
  padding-bottom: 1em;
  border-bottom: 1px dashed var(--white);
}

div.dashboard-block > a {
  margin-top: 1em;
}

div.dashboard-block ul.cases {
  list-style: none;
  padding-bottom: 5px;
}

div.dashboard-block ul.cases li {
  width: 100%;
  border-bottom: 1px solid var(--white);
  line-height: 1.5;
  padding-top: 10px;
  padding-left: 5px;
  padding-bottom: 10px;
  box-sizing: border-box;
  height: 75px;
}

div.dashboard-block ul.cases li a {
  border: 0;
  text-decoration: none;
  color: var(--black);
}

div.dashboard-block ul.cases li div.detail {
  float: left;
  width: 85%;
}

div.dashboard-block ul.cases li div.option {
  float: right;
  width: 10%;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
}

div.dashboard-block ul.cases li:hover {
  background-color: #f0f3f4;
}

div.dashboard-block ul.cases li:hover div.option {
  color: var(--orange);
}

div.dashboard-block ul.cases li span {
  font-size: 11px;
  font-weight: 400;
  float: left;
  display: block;
  margin-right: 10px;
}

div.dashboard-block ul.dashboardmessages {
  list-style: none;
  padding-bottom: 5px;
}

div.dashboard-block ul.dashboardmessages li {
  width: 100%;
  display: block;
  padding: 10px 0 10px 5px;
  box-sizing: border-box;
  line-height: 1.5;
  border-bottom: 1px solid var(--white);
}

div.dashboard-block ul.dashboardmessages li a {
  display: block;
  border: 0;
  text-decoration: none;
  color: var(--black);
}

div.dashboard-block ul.dashboardmessages li div.option {
  color: var(--blue);
}

div.dashboard-block ul.dashboardmessages li div.detail {
  width: 85%;
  display: inline-block;
  vertical-align: middle;
}

div.dashboard-block ul.dashboardmessages li div.detail em {
  color: var(--blue);
  display: block;
  width: 100%;
}

div.dashboard-block ul.dashboardmessages li div.detail p {
  line-height: 1.1;
}

div.dashboard-block ul.dashboardmessages li div.detail p.date {
  display: block;
  width: 100%;
}

div.dashboard-block ul.dashboardmessages li div.detail li p.date span {
  float: none;
  display: inline;
}

div.dashboard-block ul.dashboardmessages li div.detail p.date span.label {
  display: inline-block;
  width: 50px;
}

div.dashboard-block ul.dashboardmessages li div.option {
  width: 10%;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
}

div.dashboard-block ul.dashboardmessages li:hover {
  background-color: var(--white);
}

div.dashboard-block ul.dashboardmessages li span {
  font-size: 11px;
  font-weight: 400;
  margin-right: 10px;
}

ul.status {
  list-style: none;
  margin-top: 5px;
}

ul.status li {
  height: 30px;
  border-bottom: 4px solid #97be0d;
  line-height: 30px;
  margin-bottom: 5px;
  text-indent: 5px;
}

ul.status li.ok {
  border-color: #97be0d;
}

ul.status li.warning {
  border-color: #f9ebaa;
}

ul.status li.error {
  border-color: #c52020;
}

ul.status span {
  float: right;
  text-align: right;
  font-weight: 600;
}

/*************************/
/*  MAINTENANCE MESSAGE  */
/*************************/
div.maintenance-module {
  background-color: #f0f3f4;
  box-sizing: border-box;
  margin-bottom: 17px;
  margin-top: 17px;
  padding-bottom: 20px;
  padding-top: 20px;
}

div.maintenance-module h3 {
  border-bottom: 3px solid #e4e4e4;
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

div.maintenance-module p {
  font-size: 12px;
  line-height: 1.6em;
  margin-bottom: 10px;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

/* TEST */
ul.controlpanel li {
  display: inline-block;
  height: 75px;
  background-color: white;
  border: 1px solid #eaeaea;
  color: #5586c6;
  font-weight: bold;
  font-size: 18px;
  line-height: 10px;
  text-align: center;
  list-style: none;
  margin-bottom: 5px;
  padding-top: 25px;
  width: 100%;
}

ul.controlpanel li:hover {
  background-color: #5586c6;
  color: white;
  cursor: pointer;
}

ul.controlpanel li:hover span.type {
  color: #f0f3f4;
}

ul.controlpanel.wide li {
  height: 80px;
  width: 310px;
  line-height: 62px;
  font-size: 43px;
}

ul.controlpanel li span.type {
  line-height: 9px;
  display: block;
  font-size: 14px;
  color: #888888;
  font-weight: 400;
  width: 100%;
  margin-top: 10px;
  text-indent: 10px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.feedbackWrapper .success {
  padding: 10px 30px !important;
}

.feedbackWrapper .error {
  padding: 10px 30px !important;
}