/** Rochen Portal Styles */
/** by: zenelements      */




/* ========================================================================== */

/** Reset */

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications. Removes the default spacing and border for
 * appropriate elements.
 */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre {
  margin: 0;
}

button {
  padding: 0;
  background: transparent;
  border: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

input, input[type=search] {
  border-radius: 0;
  -webkit-appearance: none;
}

iframe {
  border: 0;
}

img {
  vertical-align: middle;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
  outline: none !important;
}




/* ========================================================================== */

/** Site */

body {
  min-height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #00416B;
  background: #00416B url("../images/bg.jpg") 0 0 repeat;
  background-attachment: fixed;
  background-size: 100%;
}

@media (max-width:770px) {
  body {
    background-size: auto;
  }
}

::selection {
  color: #FFFFFF;
  background: #00AAFF;
}

a, a:visited {
  color: #00416B;
  text-decoration: none;
  transition: all .2s ease-in-out;
}
a:hover {
  color: #00AAFF;
}

h1, h2, h3, h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

h1 {
  margin: 20px 0 20px 15px;
  font-size: 22px;
  color: #FFFFFF;
}
h2 {
  margin: 0;
  padding: 0 0 0 60px;
  font-size: 16px;
  color: #FFFFFF;
}
h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #00416B;
}
h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #00416B;
}
h5 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #00416B;
}

p {
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #575756;
}

p strong, strong {
  font-weight: 600;
}
p em, em {
  font-style: italic;
}

small {
  font-size: 70%;
}

sup {
  font-size: 50%;
  vertical-align: super;
}

h1 sup {
  font-size: 60%;
}
p sup {
  color: #777777;
}

sub {
  font-size: 50%;
  vertical-align: sub;
}

hr {
  height: 1px;
  background: none;
  border: none;
  border-top: 1px solid #EEEEEE;
}

ul.list {
  margin: 15px 0 20px 20px;
}
ul.list li {
  margin: 0 100px 20px 0;
  padding: 0 0 0 25px;
  font-size: 12px;
  color: #575756;
  background: url(../images/li-tick.png) 0 2px no-repeat;
  background-size: 10px;
}
ul.list_blue {
  margin: 20px 0 40px 20px;
}
ul.list_blue li {
  margin: 0 0 20px 0;
  padding: 0 0 0 25px;
  font-size: 12px;
  background: url(../images/li-tick.png) 0 2px no-repeat;
}
ul.list li {
  line-height: 1.2;
}

.lead {
  font-size: 21px;
  line-height: 1.3;
}

.ellipsis {
  margin-right: 7px;
  color: #00641B;
}

.textspc {
  margin: 0;
  line-height: 1;
}
.textspc_first {
  margin-top: 18px;
}

@media (max-width:640px) {

  ul.list_standard li {
    margin: 0 0 20px 0;
  }
}




/* ========================================================================== */

/** Layout */

.clearme {
  height: 0;
  clear: both;
  font-size: 1px;
}

#my {
  position: relative;
  padding-right: 220px;
  padding-bottom: 100px;
  overflow: hidden;
}

#sidebar {
  position: relative;
  z-index: 1000;
  float: left;
  width: 220px;
  margin-bottom: -5000px;
  margin-left: 0;
  padding-bottom: 5000px;
  background: #00416B;
  transition: all .3s ease-in-out;
}

#display {
  position: relative;
  float: right;
  width: 100%;
  margin: 0 -220px 0 auto;
  padding-top: 60px;
  transition: all .3s ease-in-out;
}

#displayset {
  width: 90%;
  max-width: 1040px;
  margin: 0 auto 20px auto;
}

@media (min-width:1400px) {

  #displayset {
    width: 90%;
    margin: 0 0 0 40px;
  }
}

@media (max-width:1060px) {

  #my {
    padding-right: 0;
  }

  #sidebar {
    width: 300px;
    margin-left: -300px;
  }

  #sidebar.slidemenu {
    margin-left: 0 !important;
    box-shadow: 0 0 20px rgba(0,0,0,.35);
  }

  #display {
    width: 100%;
    margin: 0;
  }

  #display.slidedisplay {
    position: fixed !important;
    top: 0;
    left: 0;
    opacity: .2;
  }

  #displayset {
    width: 90%;
    max-width: none;
    margin: 0 auto 20px auto;
  }
}

/* ========================================================================== */

/** Grid */

.box_onecol {
  width: 100%;
  padding: 0;
  clear: both;
}

.box_onecol_center {
  width: 50%;
  min-width: 420px;
  margin: 40px 25% 20px 25%;
  clear: both;
}

.box_onecol_center_wider {
  width: 52% !important;
}

.box_twocol {
  float: left;
  width: 48%;
  padding-right: 2%;
}

.box_threecol {
  float: left;
  width: 30%;
  padding-right: 3%;
}

.box_leftnudge {
  width: 46%;
  padding-left: 1%;
}

.box_twocol p.textlabel label {
  float: left;
  width: 110px;
}

.thirty_percent { width: 30%; }
.fifty_percent { width: 50%; }
.seventy_percent { width: 70%; }

@media (max-width:949px) {

  .box_threecol label {
    width: 100%;
  }

  .box_threecol p.formstyle {
    height: inherit;
    margin: 0 0 15px 0;
    line-height: 1.4;
  }
  .box_threecol .stats_bar {
    width: 90%;
  }
}

@media (max-width:866px) {

  .box_onecol_center {
    width: 100%;
    min-width: inherit;
    margin: 0;
  }

  .box_twocol {
    width: 100%;
  }

  .box_threecol {
    width: 100%;
  }

  .box_leftnudge {
    width: 100%;
    padding-left: 0;
  }
}




/* ========================================================================== */

/** Brand */

.rochen_blue {
  color: #00416B;
}
.rochen_cyan {
  color: #00AAFF;
}
.rochen_grey {
  color: #F9F9F9;
}

.bg_green {
  color: #FFFFFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,.05);
  background: #3CD297 !important;
}
.green, .green:visited {
  color: #09C67D;
}
.bg_amber {
  color: #FFFFFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,.05);
  background: #F5C33D !important;
}
.amber, .amber:visited {
  color: #F5C33D;
}
.bg_red {
  color: #FFFFFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,.05);
  background: #FB6969 !important;
}
.red, .red:visited {
  color: #FA4242;
}
.bg_grey {
  color: #FFFFFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,.05);
  background: #BBBBBB !important;
}
.grey, .grey:visited {
  color: #BBBBBB;
}

#brand {
  width: 100%;
  padding: 35px 0 5px 0;
}
#brand a {
  display: block;
  width: 63px;
  height: 63px;
  margin: 0 auto;
  text-indent: -7777px;
  background: url(../images/rochen_r.png) 0 0 no-repeat;
  background-size: 63px;
}
#brand a:hover {
  opacity: .85;
}

.login #brand {
  padding: 42px 0;
}
.login #brand a {
  width: 70px;
  height: 70px;
  background-size: 70px;
}




/* ========================================================================== */

/** Copyright */

.copyright {
  width: 100%;
  margin-top: 50px;
  clear: both;
  font-size: 10px;
  color: #E4E8EA;
}
.login .copyright {
  position: absolute;
  bottom: 10px;
  padding: 0;
}




/* ========================================================================== */

/** Login */

#shade {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  min-height: 100vh;
  background: rgba(0,65,107,.5);
}

.login {
  position: relative;
  z-index: 100;
  display: block;
  width: 460px;
  height: inherit;
  margin: 50px auto 0 auto;
  padding-bottom: 50px;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
}
.login form {
  margin: 0 0 40px 0;
}
.login form input {
  border-radius: 0;
}

.myAccess {
  position: relative;
  width: 460px;
  height: 60px;
  margin: 0 0 1px 0;
  overflow: hidden;
}
.myAccess .myLabel {
  position: absolute;
  top: 22px;
  left: 20px;
  width: 150px;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: #EEEEEE;
  transition: all .2s ease-in-out;
}
.myAccess .myFocus, .myAccess .keepFocus {
  top: 12px;
  font-size: 10px;
}
.myAccess .myInput {
  width: 460px;
  height: 50px;
  padding: 10px 20px 0 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 60px;
  color: #FFFFFF;
  background: rgba(255,255,255,.1);
  border: none;
}
.login form input:required {
  background-image: url(../images/required.png);
  background-repeat: no-repeat;
  background-position: top right;
}
.login form input:focus {
  background-color: rgba(255,255,255,.14);
  outline: none;
}
.login form .onward {
  margin: 20px 5px 10px 5px;
  padding: 14px 40px;
  font-size: 14px;
  line-height: 1;
}
.login a, .login a:visited {
  font-size: 12px;
  color: #00AAFF;
}
.login a:hover {
  color: #00AAFF;
}

.login p {
  padding: 0 30px;
  color: #E4E8EA;
}
.login p.msg_error {
  font-size: 14px;
  color: #FB6969;
}

@media (max-width:420px) {

  .login {
    width: 100%;
    height: inherit;
    padding-bottom: 50px;
    border-radius: 0;
  }

  .login form {
    margin: 0 0 40px 0;
  }

  .login form input {
    border-radius: 0;
  }

  .myAccess {
    width: 100%;
    margin: 0 0 1px 0;
  }

  .myAccess .myInput {
    width: 100%;
  }

  .login form input:required {
    background-position: 90% 5px;
  }
}




/* ========================================================================== */

/** Sidebar */

.mobile {
  position: absolute;
  top: 0;
  right: -42px;
  z-index: 1000;
  display: none;
  width: 42px;
  height: 42px;
  line-height: 49px;
  text-align: center;
  visibility: hidden;
  background: #00416B;
  border-radius: 0 0 10px 0;
}
.mobile .fa {
  font-size: 28px;
  color: rgba(255,255,255,.77);
  transition: all .2s ease-in-out;
}
.mobile:hover .fa {
  color: rgba(255,255,255,1);
}

@media (max-width:1060px) {
  #mobile_show, .showmobile {
    display: block;
    visibility: visible;
  }
  .hidemobile {
    z-index: 500;
    display: none;
    visibility: hidden;
  }
}

nav#menu {
  position: relative;
  width: 100%;
  margin: 0;
}
.menus {
  margin: 0;
}
.menus li {
  position: relative;
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid #185484;
}
.menus li strong {
  display: block;
  padding: 30px 0 3px 18px;
  font-weight: 400;
  text-transform: uppercase;
}
.menus li a {
  display: block;
  width: inherit;
  height: 38px;
  padding: 0 0 0 15px;
  font-size: 13px;
  font-weight: 400;
  line-height: 38px;
  color: #FFFFFF;
  border-left: 4px solid #00416B;
  transition: none;
}
.menus li a:hover, .menus .active a, .menus .dropme-open a {
  cursor: pointer;
  background-color: #003557;
  border-left: 4px solid #00AAFF;
}
.menus li .highlight {
  right: 10px;
}
.menus .dropme-trigger a {
  background: url(../images/arrow-4px-down.png) 95% 17px no-repeat;
  background-size: 10px;
}
.menus .dropme-open a {
  background-color: #003557;
  background-image: url(../images/arrow-4px-up.png);
}
.menus .dropme-open ul li a {
  height: 30px;
  padding: 0 0 0 17px;
  font-size: 12px;
  line-height: 30px !important;
  color: #FFFFFF;
  background-image: none;
}
.menus .dropme-open ul li a:hover {
  color: #00AAFF;
}
.menus .dropme-open ul li {
  display: block;
  background: none;
  border: none;
}
.menus .dropme-open ul li .highlight {
  top: 4px;
  transform: scale(.75,.75);
}

/* ========================================================================== */

/** Portal Bar */

#bar {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 42px;
  background: #14466C;
}
#alerts {
  float: right;
}
.bar_alerts li {
  position: relative;
  display: inline-block;
  height: 24px;
  width: 38px;
  margin: 4px 15px 0 0;
  color: #FFFFFF;
}
@media (max-width:470px) {
	.bar_alerts li {
	  width: 30px;
	  margin: 4px 0px 0 0;
	}
}
.bar_alerts span.highlight {
  top: 3px;
  right: 4px;
  height: 10px;
  padding: 2px 5px;
  font-size: 8px;
  line-height: 10px;
  border: 1px solid #14466C;
}
.bar_alerts li .fa {
  position: absolute;
  top: 5px;
  left: 0;
  font-size: 24px;
  color: #FFFFFF;
  opacity: .85;
}
.notice_alerts li .fa:hover {
  opacity: 1;
}
.bar_alerts li ul {
  position: absolute;
  top: 37px;
  left: -5px;
  width: 300px;
  background: #14466C;
  border-radius: 0 0 7px 7px;
}
.bar_alerts li ul li {
  display: block;
  width: 270px;
  height: 30px;
  font-size: 12px;
  line-height: 1;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.bar_alerts li ul li:last-child {
  border-bottom: none;
}
.bar_alerts li ul li a {
  display: block;
  padding: 8px 15px;
  color: #FFFFFF;
}
.bar_alerts li ul li a strong {
  margin-right: 5px;
  color: #00AAFF;
}
.bar_alerts li ul li a:hover {
  opacity: .7;
}
.bar_alerts .dropme-trigger, .notice_alerts .dropme-open {
  background-image: none;
}
#profile {
  float: right;
  width: 200px;
  margin: 3px 0 0 0;
  padding: 0 0 0 10px;
  border-left: 1px solid rgba(255,255,255,.1);
}
#profile #profile_trigger {
  position: relative;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  background: url(../images/arrow-4px-down.png) 95% 15px no-repeat;
  background-size: 10px;
}
#profile .dropme-open {
  background-image: url(../images/arrow-4px-up.png) !important;
}
#profile #profile_trigger a {
  color: #FFFFFF;
}
#profile #profile_trigger a:hover {
  color: #00AAFF;
}
#profile #profile_trigger img {
  width: 36px;
  height: 36px;
  border-radius: 2px;
}
#profile #profile_trigger strong {
  position: absolute;
  left: 45px;
  font-weight: 400;
}
#profile #profile_trigger ul {
  position: absolute;
  top: 40px;
  left: -5px;
  width: 220px;
  background: #14466C;
  border-radius: 0 0 0 7px;
}
#profile #profile_trigger ul li {
  font-size: 12px;
  line-height: 1;
}
#profile #profile_trigger ul li a {
  display: block;
  padding: 10px 0 10px 20px;
  font-size: 12px;
}




/* ========================================================================== */

/** Buttons */

.buttons {
  position: relative;
  display: inline-block;
  width: 45%;
  height: 90px;
  margin: 0 7px 10px 0;
  font-size: 12px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #BCC6CC;
  border-radius: 5px;
}

.buttons span {
  top: -3px;
  right: -3px;
  z-index: 500;
}

.btn_img {
  z-index: 300;
  display: block;
  height: 50px;
  padding: 10px 0;
  transition: opacity .2s ease-in-out;
}
.buttons:hover .btn_img {
  opacity: .8;
}

.onward, .onward:visited {
  display: inline-block;
  margin: 10px 0 0 0;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1;
  color: #FFFFFF !important;
  cursor: pointer;
  background: #B3BFC6;
  border: none;
  border-radius: 5px;
  transition: all .3s ease-in-out;
}
.onward:hover {
  background: #00416B !important;
}
.orange, .orange:visited {
  background: #F17D2E;
  border: none;
}
.blue, .blue:visited {
  background: #00416B;
}
.cyan, .cyan:visited {
  background: #00AAFF;
}

.onward.grey {
  position: relative;
  top: -4px;
  padding-top: 0;
}

.onward.orange.onsave5 {
  position: relative;
  top: 59px;
  width: 21%;
  height: 50%;
  margin-left: 62%;
}

.actions, .actions2, .actions3 {
  position: relative;
  display: block;
  width: inherit;
  height: 44px;
  font-size: 15px;
  line-height: 45px;
  text-align: right;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  background: #00AAFF;
  transition: all .3s ease-in-out;
}

a.actions, a.actions2, a.actions3 {
  color: rgba(255,255,255,.6);
}

.actions .fa, .actions2 .fa, .actions3 .fa {
  font-size: 28px;
  color: #FFFFFF;
  opacity: .6;
  transition: all .3s ease-in-out;
}

.actions2_text {
  padding: 0 0 0 26px !important;
}

.actions3_text {
  padding: 0 0 0 26px !important;
}

#action_cancel {
  top: 0;
  right: 0;
  padding: 0 48px 0 20px;
}
#action_cancel .fa {
  top: 7px;
  right: 15px;
}

#action_back {
  top: 0;
  right: 0;
  z-index: 1;
  padding: 0 20px 0 48px;
  min-width: 96px;
}
#action_back .fa {
  top: 7px;
  left: auto;
  right: 65px;
}

#action_back .fa-calendar {
  right: 125px;
}

#action_icon {
  top: 0;
  right: 0;
  padding: 0 28px;
}

#action2_icon {
  top: 0;
  right: 0;
  padding: 0 18px 0 30px;
  border-radius: 0 10px 0 0;
}

#action3_icon {
  top: 0;
  right: 194px;
  padding: 0 12px 0 24px;
}

#action_icon .fa, #action2_icon .fa, #action3_icon .fa {
  top: 7px;
  left: 15px;
}

#action_buy {
  top: 0;
  right: 0;
  padding: 0 52px 0 20px;
}
#action_buy .fa {
  top: 8px;
  left: 150px;
}

#action_createaccount {
  top: 0;
  right: 0;
  padding: 0 62px 0 20px;
}
#action_createaccount .fa {
  top: 8px;
  right: 10px;
}

#action_terminateaccount {
  top: 0;
  right: 0;
  padding: 0 64px 0 20px;
}
#action_terminateaccount .fa {
  top: 8px;
  left: 106px;
}
#action_close {
  top: 0;
  right: 0;
  padding: 0 54px 0 20px;
}
#action_close .fa {
  left: 85px;
}
#action_star {
  top: 0;
  right: 158px;
  width: 50px;
}
#action_star .fa {
  top: 8px;
  left: 13px;
}
#action_print {
  top: 0;
  right: 107px;
  width: 50px;
  border-radius: 0;
}
#action_print .fa {
  top: 8px;
  left: 13px;
}

.actions_square {
  border-radius: 0 !important;
}

.actions:hover, .actions2:hover, .actions3:hover {
  color: rgba(255,255,255,1);
  background: #009FE5;
}
.actions:hover .fa, .actions2:hover .fa, .actions3:hover .fa {
  opacity: 1;
}

.action_menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  opacity: 1;
}

.action_menu_plus50 {
  right: 50px !important;
}

.action_menu li {
  position: relative;
  background: #00AAFF;
  transition: all .3s ease-in-out;
}
.action_menu li.navicon {
  display: block;
  width: 50px;
  height: 44px;
  text-align: right;
  border-radius: 0 10px 0 0;
}
.action_menu li.navicon_plus50 {
  border-radius: 0 0 0 0;
}
.action_menu li.navicon a {
  display: block;
}
.action_menu li.navicon .fa {
  position: relative;
  left: -10px;
  color: #FFFFFF;
  opacity: .6;
  transition: opacity .2s ease-in-out;
}
.action_menu li.navicon:hover {
  color: rgba(255,255,255,1);
  background: #009FE5;
}
.action_menu li.navicon:hover .fa {
  opacity: 1;
}
.action_menudrop {
  position: absolute;
  top: 44px;
  right: 0;
}
.action_menudrop li {
  width: 200px;
  padding: 0 10px;
  font-size: 15px;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #0097D3;
  border-radius: 0;
  transition: all .2s ease-in-out;
}
.action_menudrop li a {
  display: block;
  color: #FFFFFF;
}
.action_menudrop li:hover {
  background: #0097D3;
}
.action_menu li.navicon .action_menudrop li .fa {
  top: 2px;
  left: 0;
  display: inline-block;
  width: 34px;
  font-size: 22px;
  opacity: .5;
}
.action_menu_hidden {
  opacity: 0 !important;
}
.action_back_hidden {
  opacity: 0 !important;
}

.monitoring_new {
  position: relative;
  top: -36px;
  right: -110px;
}

.oncancel {
  position: relative;
  right: 20%;
  bottom: 21px;
  display: inline-block;
  float: right;
  width: 17%;
  margin: 10px 0 0;
  padding: 10px 20px;
  padding-bottom: 30px;
  font-size: 14px;
  color: #FFFFFF !important;
  cursor: pointer;
  background: none repeat scroll 0 0 #F17D2E;
  border: medium none;
  border-radius: 5px 5px 5px 5px;
  transition: all .3s ease-in-out 0s;
}
.oncancel:hover {
  background: #00416B !important;
}

@media (max-width: 865px) {

  .onsave {
    float: right;
  }
}

@media (min-width: 866px) {

  .onsave {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}

@media (max-width: 767px) {

  #action_icon.actions {
    position: absolute;
    border-radius: 0 10px 0 0;
  }
}

@media (min-width: 768px) {

  .buttons {
    width: 30%;
  }

  .actions {
    position: absolute;
    border-radius: 0 10px 0 0;
  }

  .actions2 {
    position: absolute;
    border-radius: 0 0 0 0;
  }

  .actions3 {
    position: absolute;
    border-radius: 0 0 0 0;
  }

  #action_createaccount {
    right: 57px;
  }
}

@media (max-width: 480px) {

  .onward {
    padding: 10px 10px !important;
  }
}




/* ========================================================================== */

/** Dashboard */

#dashleft {
  float: left;
  width: 48%;
}
#dashright {
  float: right;
  width: 48%;
}

.box {
  position: relative;
  margin: 0 0 20px 0;
}
.box_title {
  position: relative;
  padding: 0;
  line-height: 45px;
  color: #FFFFFF;
  background-color: #0097D3;
  background-repeat: no-repeat;
  border-radius: 10px 10px 0 0;
}

@media (min-width: 768px) {

  .box_title {
    height: 44px;
  }
}

.title_blue {
  background-color: #00416B;
}
.title_orange {
  text-align: center;
  background-color: #F17D2E;
}
.title_orange h1 {
  margin-left: 0;
}
#announcement h2 {
  padding: 0;
}
.box_title .fa {
  position: absolute;
  top: 6px;
  left: 18px;
  font-size: 32px;
  opacity: .2;
}

#box_manageservices .box_title .fa {
  left: 14px;
}
#box_resources .box_title .fa {
  left: 12px;
}

#box_billing .box_title .fa, #box_invoices .box_title .fa {
  left: 16px;
}
.box_content {
  position: relative;
  padding: 20px 20px 10px 20px;
  overflow: hidden;
  background: rgba(255,255,255,.95);
  border-radius: 0 0 10px 10px;
}

.dashboard-home #box_support .box_content,
.dashboard-home #box_account .box_content,
.dashboard-home #box_addservices .box_content,
.dashboard-home #box_resources .box_content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

#announcement .box_content {
  padding: 20px;
}

.affiliate-banner-html {
  height: 20px;
  margin-top: 15px;
  padding: 10px 0;
  font-size: 18px;
  color: #00416B;
  text-align: center;
  border: 1px solid #00416B;
}

span.highlight {
  position: absolute;
  top: 9px;
  right: 15px;
  height: 20px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 20px;
  color: #FFFFFF;
  background: #F17D2E;
  border-radius: 5px;
}

#ticket_details {
  padding-top: 40px;
}
#ticket_recommend {
  padding-top: 40px;
}
#ticket_attach {
  padding-top: 40px;
}

/* password strength
=================================================================== */
[id*="passwordStrength"]
{
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

[id*="passwordDescription"]
{
  color:rgb(255,255,255);
}

.strength0 [id*="passwordDescription"]
{
  color:rgb(22,22,22);
}

.strength0
{
  width:100%;
  background:#E6E6E6;
}

.strength1
{
  width:30%;
  background:#ff0000;
}

.strength2
{
  width:40%;
  background:#ff5f5f;
}

.strength3
{
  width:60%;
  background:#56e500;
}

.strength4
{
  background:#4dcd00;
  width:80%;
}

.strength5
{
  background:#399800;
  width:100%;
}

/* Animation of dashboard boxes */
.swoosh_box {
  position: relative;
  width: 100%;
  height: 0;
  margin-left: 1100px;
  overflow: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}
form.swoosh_box {
  margin-top: 0;
}
.swoosh_box_active {
  height: inherit !important;
  margin-left: 0 !important;
  opacity: 1;
}
.swoosh_back {
  position: absolute;
  top: 0;
  right: 51px;
  padding: 0 20px 0 48px;
  color: #FFFFFF;
  visibility: hidden;
  border-radius: 0;
  opacity: 0;
}
.swoosh_back .fa {
  top: 7px;
  left: 15px;
}
.show_swoosh_back {
  visibility: visible !important;
  opacity: 1 !important;
}
.swoosh_span {
  color: #00416B;
  cursor: pointer;
  transition: color .2s ease-in-out;
}
.swoosh_span:hover {
  color: #00AAFF;
}
#manage_back {
  top: 0;
  right: 0;
  z-index: 5;
  padding: 0 20px 0 48px;
  visibility: hidden;
  opacity: 0;
}
#manage_back .fa {
  top: 7px;
  left: 15px;
}
.swish {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .2s ease-in-out;
}
.swish_active {
  height: inherit;
  opacity: 1;
}


.list_overview {
  margin: -5px 0 0 0;
}
#list_credit {
	margin: -34px 0px -22px 0px;
}
.list_overview li {
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  border-bottom: 1px solid #D5DDE0;
}
.list_overview li a {
  display: block;
  width: 100%;
}
.list_overview li a label {
  float: left;
  width: 30%;
  padding: 0;
  font-weight: 600;
  color: #00AAFF;
}
.list_overview li a strong {
  white-space: nowrap;
  float: left;
  width: 57%;
  margin-right:10px;
  overflow: hidden;
}
.list_overview li:last-child {
  border: none;
}
.Terminated strong {
	color: #CCCCCC;
}
#list_services li a strong {
  width: 40%;
}
#list_services li a em {
  float: right;
  color: #D5DDE0;
  transition: all .3s ease-in-out;
}
#list_services li a:hover em {
  color: #00AAFF;
}

#list_tickets li a label {
  width: 20%;
}

#list_invoices li a label {
  width: 20%;
}
#list_invoices li a strong {
  width: 35%;
}
#list_invoices li a em {
  width: 20%;
}
#list_invoices li a span {
  float: right;
  width: 15%;
  min-width: 63px;
  text-align: center;
}
#list_invoices li a span.paid {
  color: #FFFFFF;
  background: #3CD297;
}
#list_invoices li a span.unpaid {
  color: #FFFFFF;
  background: #FB6969;
}

#list_monitoring li {
  float: left;
  width: 14%;
  text-align: center;
}
#list_monitoring li .fa {
  display: block;
  margin: 10px 0 10px 0;
  font-size: 32px;
}

.list_resources {
  margin-top: 20px;
}
.list_resources li {
  display: inline-block;
  float: left;
  width: 30%;
  height: 100px;
  margin-right: 3%;
  padding-bottom: 20px;
}

.list_ticks li {
  margin: 7px 0;
  padding: 0 0 0 25px;
  font-size: 13px;
  line-height: 1.3;
  color: #575756;
  background: url(../images/li-tick.png) 0 4px no-repeat;
}

#articlesTable {
  width: 100% !important;
}
#articlesTable tr th {
  border-radius: 5px 5px 0 0;
}
#articlesTable tr td {
  padding: 10px 10px 0 0;
  line-height: 1.2;
}
#articlesTable tr:hover td {
  background: none;
}
#articlesTable .article_icon {
  display: block;
  float: left;
  width: 30px;
  height: 28px;
  padding: 0 10px 20px 10px;
  font-size: 32px;
  color: #E5E5E5;
  transition: color .2s ease-in-out;
}
#articlesTable strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #00AAFF;
  transition: color .2s ease-in-out;
}
#articlesTable a:hover strong, #articlesTable a:hover .article_icon {
  color: #00416B;
}

@media (max-width:866px) {

  #dashleft, #dashright {
    width: 100%;
  }

  .emptytitle {
    display: none;
  }

  .costadjust {
    margin: 15px 0 20px 0;
  }
}

@media (max-width:770px) {

  .affiliate-banner-html {
    font-size: 12px;
  }

  .list_resources li {
    width: 100%;
    height: inherit;
    margin-right: 0;
  }
}

@media (min-width: 768px) {

  .box_title {
    height: 44px;
  }
}

@media (max-width:640px) {

  .emptylabel {
    display: none;
  }

  .tickets-opened, .tickets-number, .tickets-priority, .tickets-department {
    display: none;
  }

  #list_monitoring li {
    width: 50%;
    height: 42px;
    line-height: 42px;
    text-align: left;
  }

  #list_monitoring li h4 {
    float: left;
    width: 110px;
  }

  #list_monitoring li .fa {
    font-size: 28px;
  }
}

@media (max-width:540px) {

  #articlesTable {
    width: 100% !important;
  }

  #articlesTable .article_icon {
    display: inline-block;
    width: inherit;
    height: inherit;
    padding: 1px 5px 0 0;
    font-size: 15px;
  }
}

@media (max-width:420px) {

  #list_services li a label span {
    display: none;
  }

  #list_services li a strong {
    width: 60%;
  }
}




/* ========================================================================== */

/** Cloudservers **/

#service_jump {
  float: right;
  margin: -50px 15px 0 0;
}
.select_service {
  width: 260px;
  height: 42px;
  padding: 0 20px;
  color: #FFFFFF;
  background: #0097D3 url(../images/ui_select_service.png) 218px 0 no-repeat;
  background-color: #0097D3;
  border: 1px solid #0097D3;
  -webkit-appearance: none;

     -moz-appearance: none;
          appearance: none;
          appearance: none;
}

#service_resourcescaling .swoosh_back {
  border-radius: 0 10px 0 0;
}
#scale_options {
  padding-left: 1%;
}
#scale_options .button_scaling {
  z-index: 1000;
  float: left;
  width: 27%;
  margin: 0 20px 10px 0;
  padding: 15px 2%;
  text-align: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #BCC6CC;
  border-radius: 10px;
  transition: all .3s ease-in-out;
}
#scale_options .button_scaling:hover {
  border: 1px solid #00416B;
}
#scale_options .last {
  margin: 0;
}
.button_scaling h3 {
  display: block;
  width: 120px;
  margin: 10px auto 20px auto;
  padding: 0 0 0 60px;
  font-size: 20px;
  text-align: left;
}
#button_immediatescaling h3 {
  background: url(../images/scaling_immediate.png) 0 0 no-repeat;
}
#button_automaticscaling h3 {
  background: url(../images/scaling_automatic.png) 0 0 no-repeat;
}
#button_scheduledscaling h3 {
  background: url(../images/scaling_scheduled.png) 0 0 no-repeat;
}
.box_scaling_left {
  float: left;
  width: 66%;
  padding-right: 4%;
}
.box_scaling_right {
  float: left;
  width: 28%;
  padding-right: 2%;
}
#button_scaling_set .red {
  margin-right: 20px;
}
#scale_scheduled_overview {
  width: 100%;
  height: 200px;
}
#scheduled_scaling_new {
  z-index: 7000;
}

.calendar-date table thead tr th {
  border-bottom: 1px solid #32547E;
  border-radius: 0 !important;
}
.calendar-date table thead tr .prev {
  border-right: 1px solid #32547E;
  border-radius: 5px 0 0 0 !important;
}
.calendar-date table thead tr .next {
  border-left: 1px solid #32547E;
  border-radius: 0 5px 0 0 !important;
}
.calendar-date table tr td {
  height: inherit;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  margin: 1px 0 0;
  padding: 0 0 6px;
  list-style: outside none none;
  background-color: #FFFFFF;
  background-clip: padding-box;
  border-radius: 0;
}
#ui-datepicker-div {
  background: #00416B;
  border: #00416B;
  z-index: 1000; /* must be > than popup editor (950) */
}
.daterangepicker.dropdown-menu {
  z-index: 3000;
  max-width: none;
}
.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  float: left;
  margin: 4px;
}
.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
  float: right;
  margin: 4px;
}
.daterangepicker .ranges {
  width: 160px;
  text-align: left;
}
.daterangepicker .ranges .range_inputs > div {
  float: left;
}
.daterangepicker .calendar {
  max-width: 270px;
}
.daterangepicker .calendar th, .daterangepicker .calendar td {
  max-width: 5px;
  text-align: center;
  white-space: nowrap;
}
.daterangepicker .ranges label {
  display: block;
  width: 50px;
  height: 20px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  text-shadow: #FFFFFF 1px 1px 0;
  text-transform: uppercase;
}
.daterangepicker .ranges input {
  font-size: 11px;
}
.daterangepicker .ranges .input-mini {
  display: block;
  width: 80px;
  height: 30px;
  margin: 0 0 10px 0;
  padding: 0 6px;
  font-size: 11px;
  line-height: 30px;
  color: #555555;
  vertical-align: middle;
  background-color: #EEEEEE;
  border: 1px solid #F9F9F9;
  border-radius: 4px;
}
.daterangepicker .ranges ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.daterangepicker .ranges li {
  margin-bottom: 7px;
  padding: 7px 14px;
  font-size: 13px;
  color: #00416B;
  cursor: pointer;
  background: #F9F9F9;
  border-radius: 5px;
}
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  color: #FFFFFF;
  background-color: #00416B;
}
.daterangepicker .calendar-date {
  padding: 4px;
  background: #FFFFFF;
  border-radius: 4px;
}
.daterangepicker .calendar-time {
  margin: 8px auto 0 auto;
  line-height: 30px;
  text-align: center;
}
.daterangepicker {
  position: absolute;
  top: 100px;
  left: 20px;
  margin-top: 1px;
  padding: 4px;
  background: #FFFFFF;
  border-radius: 4px;
}
.daterangepicker.opensleft:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  content: "";
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCCCCC;
  border-bottom-color: rgba(0, 0, 0, .2);
  border-left: 7px solid transparent;
}
.daterangepicker.opensleft:after {
  position: absolute;
  top: -6px;
  right: 10px;
  display: inline-block;
  content: "";
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFFFFF;
  border-left: 6px solid transparent;
}
.daterangepicker.opensright:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  content: "";
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCCCCC;
  border-bottom-color: rgba(0, 0, 0, .2);
  border-left: 7px solid transparent;
}
.daterangepicker.opensright:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  content: "";
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFFFFF;
  border-left: 6px solid transparent;
}
.daterangepicker table {
  width: 100%;
  margin: 0;
}
.daterangepicker td, .daterangepicker th {
  width: 20px;
  height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
}
.daterangepicker td.off {
  color: #999999;
}
.daterangepicker td.disabled {
  color: #999999;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background: #91CEF4;
}
.daterangepicker td.in-range {
  background: #E6F3FD;
  border-radius: 0;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  color: #FFFFFF;
  background-color: #00AAFF;
}
.daterangepicker th.available:hover {
  background-color: #1B3351;
}
.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #CCCCCC;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  height: auto;
  margin: 0;
  padding: 1px;
  font-size: 12px;
  cursor: default;
}
.daterangepicker select.monthselect {
  width: 56%;
  margin-right: 2%;
}
.daterangepicker select.yearselect {
  width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0;
}

#chartset {
  position: relative;
  display: block;
  width: 100% !important;
}

/*Overlay stuff*/
.ui_overlay{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,.85);
}

.ol_inner{
  background: #fff url('../../images/ajaxloader_content_large.gif') center no-repeat;
  background-size: 30px;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
}

.ol_status {
  position: absolute;
  color: #fff;
  width: 300px;
  text-align: center;
  bottom: -30px;
  left: 50%;
  margin-left: -150px;
}
/*end overlay stuff*/


.box_chart {
  display: none;
}
.show_chart {
  display: block;
}
.highcharts-container {
  width: 100% !important;
}
.highcharts-background {
  fill-opacity: 0;
}
.highcharts-title {
  margin: 0 0 10px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.highcharts-xaxis-labels text {
  font-size: 8px !important;
}

.scaling_costs {
  width: 90%;
  height: inherit;
  margin: 20px 20px 0 0;
  padding: 15px 5% 10px 5%;
  background: #E7EFF1;
  border-radius: 10px;
}
.scaling_costs li {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  vertical-align: middle;
}
.scaling_costs li strong {
  display: block;
  font-size: 17px;
}
.scaling_costs_set1 {
  width: 32%;
}
.scaling_costs_set2 {
  width: 48%;
}
.scaling_costs_confirm {
  width: 10%;
}
.scaling_costs_confirm .onward {
  margin: 0;
  padding: 10px 35px;
}
.scaling_costs_smaller {
  float: none;
  width: 50%;
  margin: 0 auto 40px auto;
}

@media (max-width:980px) {

  #scale_options .button_scaling {
    display: block;
    float: none;
    width: 85%;
    max-width: 460px;
    margin: 0 auto 10px auto;
  }

  .box_scaling_left {
    float: left;
    width: 100%;
    padding-right: 0;
  }

  .box_scaling_right {
    float: left;
    width: 100%;
    padding-top: 20px;
    padding-right: 0;
  }

  .list_scaling {
    display: block;
    margin-bottom: 20px;
  }

  .list_scaling li {
    width: 100%;
  }
}

@media (max-width:768px) {

  #service_resourceusage .pull-right {
    float: none;
  }
}

@media (max-width:640px) {

  .scaling_costs_smaller {
    width: 90%;
  }

  .scaling_costs li {
    width: 100% !important;
    padding-bottom: 10px;
  }

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

@media (max-width:540px) {

  #service_jump {
    margin: 0 0 15px 0;
  }
}




/* ========================================================================== */

/** Premiumshared */

#service_shared_createaccount {
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: all .2s ease-in;
}
.show_box {
  height: inherit !important;
  margin-bottom: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#service_shared_createaccount .box_onecol {
  width: 76%;
  padding: 20px 12%;
}

#domainname {
  margin: 0 0 40px 0;
}
#domainname select {
  width: 90px;
}
#domainname input {
  width: 340px;
}

#domainname_management .checking label {
  margin-bottom: 10px;
}
.domainname_validity {
  width: 440px;
  margin: 10px 0 0 0;
  padding: 8px 12px;
  font-size: 13px;
  color: #FFFFFF;
  border-radius: 3px;
}
#domainname_valid {
  background-color: rgba(79,217,138,.9);
}
#domainname_invalid {
  background-color: rgba(217,79,79,.9);
}

#appset {
  position: relative;
  width: 100%;
  height: 170px;
  padding-top: 0;
}
#appset .apps {
  position: relative;
  display: none;
  float: left;
  width: 140px;
  height: 25px;
  margin-right: 12px;
  padding-top: 115px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center 12px;
  background-size: 70%;
  border: 1px solid #BCBCBC;
  border-radius: 4px;
}
#appset .checkcircle label {
  font-size: 12px !important;
}
#appset .apps:hover {
  border: 1px solid #00416B;
}
#appset #noapp {
  border: 1px solid #00416B;
}
#drupalapp {
  background-image: url(../images/drupal.png);
}
#joomlaapp {
  background-image: url(../images/joomla.png);
}
#wordpressapp {
  background-image: url(../images/wordpress.png);
}
#appset .lightapp {
  display: block;
}
#change_app {
  padding: 4px 0 0 9px;
  clear: both;
  font-size: 12px;
  font-weight: 600;
  color: #00AAFF;
  cursor: pointer;
}
.hide_change_app {
  display: none;
}
#no_app {
  width: 21px;
  visibility: hidden;
}
.app {
  position: absolute;
  top: 20px;
  left: 200px;
  width: 420px;
  height: 70px;
  padding: 0 20px 0 0;
}
.hideapp {
  display: none;
}

.resourceset {
  width: 100%;
  padding-top: 20px;
  overflow: hidden;
}
.resourceset input {
  position: absolute;
  display: block;
  float: left;
  width: 10px;
  visibility: hidden;
}
.resourceset label.resource {
  position: relative;
  display: block;
  float: left;
  width: 152px;
  height: 142px;
  margin-bottom: 20px;
  padding: 15px 20px 15px 20px;
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right top;
  border: 1px solid #BCBCBC;
  border-radius: 4px;
}
.higher {
  height: 265px !important;
}
.wider {
  width: 162px !important;
}
.narrower {
  width: 140px !important;
}
.entry_class {
  background-image: url(../../images/resource-entry.png);
}
.burst-238 {
  background-image: url(../../images/resource-dedicated.png);
}
.burst-239 {
  background-image: url(../../images/resource-vip.png);
}
.burst-240 {
  background-image: url(../../images/resource-burst.png);
}
.burst_checkboxes {
  margin-top: 12px;
  line-height: 24px;
}
.mr-20 {
  margin-right: 20px;
}
.pl-24 {
  padding-left: 24px !important;
}
.resourceset label.resource p.title {
  margin: 0 0 4px 0;
  font-size: 10px;
}
.resourceset label.resource p.title strong {
  display: block;
  font-size: 18px;
}
.resourceset label.resource p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}
.resourceset label.resource ul {
  margin: 5px 0 5px 5px;
  font-size: 13px;
}
.resourceset label.resource ul li {
  padding: 2px 0 5px 20px;
  background: url(../../images/li-tick-small.png) 0 2px no-repeat;
}
.resourceset label.resource p.difference {
  position: absolute;
  right: 7px;
  bottom: 7px;
  font-size: 16px;
  line-height: 10px;
  text-align: right;
}
.resourceset label.resource p.difference small {
  display: block;
  font-size: 10px;
}
.resourceset label.resource p.difference small sup {
  font-size: 8px;
}
.resourceset label.lightresource {
  background-color: #D5E0EB;
  border-color: #00416B;
}
.resourceset .selected {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: none;
  padding: 7px 12px;
  color: #FFFFFF;
  background: #00416B;
  border-radius: 3px;
}
.resourceset .lightresource .selected {
  display: block;
}
.resourceset label:hover {
  border-color: #00416B;
}

@media (max-width:420px) {

  .resourceset label.resource {
    display: block;
    float: none;
    width: 152px;
    height: 142px;
    margin: 0 auto 20px auto;
  }

  .resourceset input {
    position: absolute;
  }
}

#storageallocation {
  padding-top: 40px;
}

#service_shared_createaccount .scaling_costs_set1 {
  width: 55%;
}
#service_shared_createaccount .scaling_costs_set1 li strong {
  display: block;
  font-size: 17px;
}
#service_shared_createaccount .scaling_costs_confirm {
  width: 44%;
  text-align: right;
}


#box_manage_domains #domainname {
  text-align: center;
}
#box_manage_domains #domainname_valid, #box_manage_domains #domainname_invalid {
  margin: 10px auto;
}
#box_manage_domains .checking {
  display: block;
  width: 460px;
  margin: 0 auto 20px auto;
}
#box_manage_domains .scaling_costs {
  margin: 50px 0 10px 0;
  clear: both;
}
#box_manage_domains .scaling_costs_set1 {
  width: 69%;
}
#box_manage_domains .scaling_costs_confirm {
  width: 30%;
  text-align: right;
}

.service_shared_accounts .onminute {
  margin-top: -3px;
}

.costadjust {
  margin-top: -15px;
  padding: 12px 8% 15px 8%;
  background: #E7EFF1;
  border-radius: 5px;
}
.costadjust label {
  display: block;
  width: 100%;
  padding-bottom: 8px;
  font-weight: 400;
  text-align: center;
}
.costadjust #adjustment_div {
  display: block;
  text-align: center;
}




/* ========================================================================== */

/** Domains */

#domain_whois .box_threecol {
  padding-top: 10px;
}
#domain_whois .box_threecol label {
  width: 90px;
}
#domain_whois .box_threecol input {
  width: 185px;
}
#domain_whois .box_threecol .selectme {
  width: 207px;
}

@media (max-width:640px) {

  #domain_whois .box_threecol label, #domain_whois .box_threecol input {
    width: 92%;
  }

  #domain_whois .box_threecol .selectme {
    width: 98.5%;
  }
}




/* ========================================================================== */

/** Support */

#conversation {
  margin: 40px 0 40px 0;
}
.convo_box {
  position: relative;
  margin: 0 5% 20px 5%;
}
.convo_profile {
  width: 12%;
}
.convo_pic {
  display: block;
  width: 50px;
  height: 46px;
  margin: 0 auto;
  padding: 4px 0 0 0;
  text-align: center;
  border-radius: 5px;
}

.convo_rating {
  padding: 10px 0 0 0;
  text-align: center;
}
.convo_rating a, .convo_rating a:hover {
  color: #B3BFC6;
}
.convo_rating .rating_active .fa-thumbs-up, .convo_rating a:hover .fa-thumbs-up {
  color: #3CD297;
}
.convo_rating .rating_active .fa-thumbs-down, .convo_rating a:hover .fa-thumbs-down {
  color: #FA4242;
}
.convo_content {
  display: inline-block;
  width: 70%;
  height: inherit;
  padding: 25px 35px 20px 35px;
  background: #FFFFFF;
  border: 1px solid #0097D3;
  border-radius: 10px;
}
.convo_title {
  font-size: 16px;
  font-weight: 500;
}
.convo_title em {
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
}
.convo_content p {
  line-height: 1.8;
  color: #454545;
}
.convo_customer .convo_content {
  float: left;
  border: 1px solid #00416B;
}

.convo_rochen .convo_profile {
  float: left;
}
.convo_customer .convo_profile {
  float: right;
}

.convo_rochen .convo_pic {
  /*background:#00416B;*/
}
.convo_customer .convo_pic img {
  border-radius: 4px;
}

div.convo_box textarea {
  resize: none;
  border-radius: 3px;
  height: 16pt;
  margin-bottom: -7pt;
  padding: 2px 6px;
  width:100px;
  text-align: center;
}




/* ========================================================================== */

/** Profile */

#profile_currentpicture {
  display: block;
  float: left;
  width: 120px;
  height: 120px;
  margin: 0 20px 0 0;
  background: rgba(0,0,0,.1);
  border-radius: 4px;
}
#box_billing_updatecreditcard .box_twocol_one {
  padding-bottom: 40px;
}

#box_password .stats_passwordstrength {
  width: 100%;
}
#box_accountcontact .box_twocol {
  padding-bottom: 60px;
}
#box_accountcontact .stats_passwordstrength {
  width: 324px;
}
#grant_access_set {
  margin: 20px 0 0 115px;
}
#grant_permissions {
  margin: 10px 0 0 115px;
}

#contact_permissions_set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#contact_permissions_wrap {
  width: 400px;
  margin: 20px auto;
  border: 10px solid rgba(255,255,255,.5);
}
#contact_permissions_copy {
  width: inherit;
  height: inherit;
  padding: 40px 40px 20px 40px;
  background: #FFFFFF;
}

#box_cancellations .box_content {
  padding-bottom: 60px;
}
#box_cancellations #cancellation_comments {
  margin-bottom: 20px;
}
#box_cancellations .cancellation_confirm label {
  margin-bottom: 30px;
}

@media (max-width:420px) {

  #box_password .box_content {
    padding-bottom: 20px;
  }

  #box_securityquestion .box_content {
    padding-bottom: 80px;
  }
}




/* ========================================================================== */

/** Referrals */

#referral_join_url {
  width: inherit;
  padding: 0 30%;
  text-align: center;
}
#referral_join_url .checking {
  width: 90%;
  margin-top: 20px;
  margin-left: 53px;
}
#referral_join_url .checksquare input[type=checkbox] + label {
  padding-left: 0;
}
#referral_copy {
  position: absolute;
  top: 10px;
  left: 255px;
  font-size: 16px;
  color: #00AAFF;
}
#referral_join_url .checkcircle {
  text-align: center;
}


#referral_link_create .heading_top_space {
  margin-top: 40px;
}

.referral-banner {
  display: block;
  margin: 0 0 10px 0;
  padding: 10px;
  text-align: center;
  border: 1px solid #E7E7E7;
  border-radius: 3px;
}
.referral-banner:hover {
  background: rgba(255,255,255,.35);
}
.referral-banner img {
  max-width: 100%;
  height: inherit;
}
.referral-banner .referral-banner-html {
  width: 96%;
  height: 50px;
  margin-top: 5px;
  padding: 5px 2%;
  overflow: scroll;
  font-size: 14px;
  text-align: left;
}




/* ========================================================================== */

/** Resources */

.article_rating {
  padding: 30px 0 30px 0;
  text-align: center;
}
.article_rating a, .article_rating a:hover {
  margin-left: 10px;
  font-size: 18px;
  color: #B3BFC6;
}
.article_rating .rating_active .fa-thumbs-up, .article_rating a:hover .fa-thumbs-up {
  color: #3CD297;
}
.article_rating .rating_active .fa-thumbs-down, .article_rating a:hover .fa-thumbs-down {
  color: #FA4242;
}


.alert-block {
  width: 100%;
  height: inherit;
  padding: 10px 0 15px 0;
  font-size: 14px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  color:#fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-left: 10px;
}
.alert-block ul li {
  margin: 0 0 5px 0;
  list-style: none;
}

.alert-success {
  background: #09C67D;
}
.alert-warning {
  background: #F5C33D;
}
.alert-error {
  background: #FB6969;
}
.onmini {
  padding: 7px 15px;
  font-size: 13px;
}
.onminute {
  margin: 0;
  padding: 5px 10px;
  font-size: 10px;
  line-height: 1.4;
}
.onspan {
  color: #00AAFF;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.onspan .fa {
  margin-right: 4px;
  color: #999999;
}
.onspan:hover {
  color: #00416B;
}
.onward .fa {
  margin-right: 5px;
}
.externallink {
  margin-left: 10px;
}
.externallink .fa {
  margin: 0 0 0 5px;
}




/* ========================================================================== */

/** Filter Search */

.filter_search input ::-webkit-input-placeholder {
  color: rgba(255,255,255,.5);
}
.filter_search input :-moz-placeholder {
  color: rgba(255,255,255,.5);
}
.filter_search input ::-moz-placeholder {
  color: rgba(255,255,255,.5);
}
.filter_search input :-ms-input-placeholder {
  color: rgba(255,255,255,.5);
}
#filter_search_accounts {
  text-align: center;
}
#filter_search_accounts input {
  width: 400px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 300;
  color: #FFFFFF;
  background: rgba(255,255,255,.1);
  border: none;
}
#filter_search {
  width: 100%;
  margin: 10px 0;
}
#filter_search input {
  padding: 4px 20px;
  font-size: 12px;
  font-weight: 300;
  color: #FFFFFF;
  background: rgba(255,255,255,.1);
  border: none;
}

@media (max-width: 767px) {

  #filter_search input {
    width: 87%;
  }
}

@media (min-width: 768px) {

  #filter_search {
    width: auto;
    float: right;
    margin: -50px 15px 0 0;
  }

  #filter_search input {
    width: 220px;
  }
}

#serverlocation {
  position: relative;
  width: inherit;
  height: 30px;
  margin: 10px 0 10px 10px;
  font-size: 13px;
}
#currentlocation {
  z-index: 200;
  display: block;
  width: 170px;
  height: 16px;
  padding-left: 25px;
  line-height: 16px;
  cursor: pointer;
  background-image: url(//cdnorigin.rochen.com/images/serverlocation.png);
  background-repeat: no-repeat;
}
.us_server {
  background-position: 0 0;
}
.uk_server {
  background-position: 0 -16px;
}
#currentlocation:hover {
  color: #00AAFF;
}
#changelocation {
  position: absolute;
  top: 16px;
  left: 4px;
  z-index: 100;
  display: block;
  width: 140px;
  padding: 5px 12px;
  visibility: hidden;
  background: #00416B;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.togglechangelocation {
  visibility: visible !important;
  opacity: 1 !important;
}
#changelocation li {
  display: block;
}
#changelocation li .setlocation {
  padding: 7px 10px;
  text-align: left;
}
#changelocation li .setlocation span {
  display: block;
  float: left;
  width: 24px;
  height: 16px;
  margin: 0 5px 0 0;
  overflow: hidden;
  clear: left;
  background: url(//cdnorigin.rochen.com/images/serverlocation.png);
  background-repeat: no-repeat;
}
#changelocation li .setlocation:hover {
  display: block;
  color: #00AAFF;
  cursor: pointer;
}
#serve_US span {
  background-position: 0 0 !important;
}
#serve_UK span {
  background-position: 0 -16px !important;
}

@media (max-width:540px) {

  #search_accounts input {
    width: inherit;
  }
}




/* ========================================================================== */

/** Ordering */

#account, #billing, #application, #configuration, #reseller, #promotioncode, #agreement {
  margin-top: 40px;
  clear: both;
}

#billing {
  margin-top: 15px;
}
#billinginfo {
  margin: 0 0 60px 140px;
}
#billinginfo select {
  width: 90px;
}
#billinginfo input {
  width: 340px;
}
#billinginfo #ccsel {
  margin: 20px 0 20px 0;
}
#billinginfo #ccsel div {
  float: left;
  width: 170px;
  margin: 0;
}
#billinginfo #ccsel input[type=radio] {
  display: none;
}
#billinginfo #ccsel input[type=radio] + label {
  display: inline-block;
  height: 10px;
  padding: 3px 0 3px 24px;
  font-size: 12px;
  line-height: 12px;
  vertical-align: middle;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 0;
}
#billinginfo #ccsel input[type=radio]:checked + label {
  background-position: 0 -16px;
}
#billinginfo #ccsel label {
  float: none;
  width: auto;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: url(../images/ui_radio.png);
  background-size: 16px;

   -khtml-user-select: none;
  -webkit-touch-callout: none;
}
#ccset {
  position: relative;
}
#ccset .cclogos {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  padding-top: 6px;
}

form input#ccnumber {
  width: 62%;
}

.cardRun {
  display: inline;
}
.cardFade {
  opacity: .3;
}

/* credit card logos */
.cclogos div {
  display: inline-block;
}
.cclogos div.inactive {
  background: url(../images/signup/cclogos.png) no-repeat;
}
.cclogos div span {
  display: block;
  width: 52px;
  height: 32px;
  text-indent: -9000em;
  background: url(../images/signup/cclogos.png) no-repeat;
  opacity: 1;
  -webkit-transition: opacity 1500ms ease-in-out;
     -moz-transition: opacity 1500ms ease-in-out;
      -ms-transition: opacity 1500ms ease-in-out;
       -o-transition: opacity 1500ms ease-in-out;
          transition: opacity 1500ms ease-in-out;
}
.cclogos #mastercard_div.inactive {
  background-position: 100% 0;
}
.cclogos #visa_div.inactive {
  background-position: 100% -40px;
}
.cclogos #amex_div.inactive {
  background-position: 100% -80px;
}
.cclogos #mastercard_div span {
  background-position: 0 0;
}
.cclogos #visa_div span {
  background-position: 0 -40px;
}
.cclogos #amex_div span {
  background-position: 0 -80px;
}
.cclogos #mastercard_div.inactive span, .cclogos #visa_div.inactive span, .cclogos #amex_div.inactive span {
  opacity: .1;
}

/* we might need these later
.cclogos #discover_div span     { background-position: 0 -120px; }
.cclogos #jcb_div span          { background-position: 0 -160px; }
.cclogos #dinersclub_div span   { background-position: 0 -200px; }
.cclogos #invalid_card_div span {
  width:  auto;
  height: 26px;
  padding-top:  6px;
  padding-left: 60px;
  font-size: 0.9em;
  font-weight: 600;
  text-indent: 0;
  background-position: 0 -240px;
}
*/


#agreement {
  margin: 60px 0 50px 0;
}
#agreement label {
  width: 90%;
}

.serverconfigs .servertabs {
  margin-top: -67px;
}
.serverconfigs .servertabs nav ul li {
  border-radius: 3px 3px 0 0 !important;
}

div#tabs_account nav {
  margin: 0;
}
#addservers {
  padding: 0 0 60px 0;
}

.tooltip {
  padding: 0 0 4px 0;
  padding: 0 0 0 30px;
  font-size: 12px;
  font-weight: 600;
  color: #00AAFF;
  vertical-align: top;
}

#dashboard > li {
  position: relative;
  top: -10px;
  color: #FF0000;
}
#read_only {
  position: relative;
  bottom: 57px;
  left: 23%;
}
.Cancellation {
  position: relative;
  bottom: 50px;
  width: 33%;
}
.Technical {
  position: relative;
  bottom: 292px;
  float: left;
  width: 33%;
  margin-left: 36%;
}
.Other {
  position: relative;
  bottom: 557px;
  left: 67%;
  float: left;
  width: 34%;
}
.after {
  position: relative;
  right: 32%;
  bottom: 279px;
  float: left;
  width: 22%;
}

.after input {
  position: relative;
  bottom: 46px;
  left: 104%;
  float: left;
}
.Comments {
  position: relative;
  right: 37%!important;
  bottom: 320px;
  float: right;
  width: 60%;
}
.points {
  position: relative;
  top: 19%;
  right: 64%;
  bottom: 46px;
}
.sub {
  position: relative;
  bottom: 310px;
  float: left;
  width: 100%;
}


@media (max-width: 960px) {

  form select#cctype {
    width: 66%;
  }

  form input#ccnumber {
    width: 60%;
  }
}

@media (max-width: 480px) {

  form select#cctype {
    width: 97%;
  }

  form input#ccnumber {
    width: 90%;
  }
}




/* ========================================================================== */

/** Forms */

form {
  position: relative;
  margin: 5px 0 0 0;
  font-size: 16px;
}
form input, form textarea, form select, form select option, form button {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #575756;
  border: 1px solid #D5DDE0;
}
form label, label {
  float: left;
  width: 115px;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #575756;
}
form span {
    font-size: 12px;
    font-weight: 600;
    color: #575756;
}
form input {
  width: 90%;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 34px;
  border-radius: 3px;
}

form input#subject {
  width: 280px;
}

select {
  width: 68%;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 36px;
  color: #777777;
  background: #FFFFFF;
  border-radius: 3px;
}
select option {
  padding: 5px;
  color: #777777;
}
.selectme {
  background: url(../images/arrow-4px-down.png) 97% 50% no-repeat;
  background-color: #FFFFFF;
  background-size: 10px;
  -webkit-appearance: none;

     -moz-appearance: none;
          appearance: none;
          appearance: none;
}
.selectmini {
  width: 100px;
  margin: 0 5px;
  background-position: 90% 50%;
}
.selectminute {
  width: 60px;
  margin: 0 5px;
  background-position: 90% 50%;
}
form input.medium {
  width: 303px;
}
form input.short {
  width: 140px;
}
form input.shorter {
  width: 70px;
}
form input.shortest {
  width: 40px;
  text-align: center;
}
form textarea {
  width: 75%;
  height: 100px;
  padding: 10px;
  font-size: 12px;
  border-radius: 3px;
}
input, textarea, select {
  border: 1px solid #8E8E8E;
}
input:focus, textarea:focus, select:focus {
  /*border:1px solid #00416B;*/
}
form button {
  cursor: pointer;
}
form input[type="text"]:disabled {
  background: rgba(0,0,0,.05);
}

form .slider {
  position: relative;
  margin: 1px 0;
  padding: 7px 0;
}
form input[type=range] {
  height: 16px;
  margin: 0;
  padding: 0;
  background: url(../images/ui_slider.gif) 0 9px repeat-x;
  -webkit-appearance: none;
}
form input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  border: none;
}
form input[type=range]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: #00AAFF;
  border: none;
  border: 2px solid #001678;
  border-radius: 16px;
  box-shadow: inset 0 0 3px #FFFFFF;
  -webkit-appearance: none;
}
form input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFFFFF;
}
form input[type=range] {
  width: 100%;
  border: none;
}
form input[type=range]:focus {
  outline: none;
}
form input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  background: #00416B;
  border: none;
}
form input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #00AAFF;
  border: none;
  border-radius: 16px;
}
form input[type=range]::-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}
form input[type=range]::-ms-track {
  width: 100%;
  color: transparent;
  background: none;
  border: none;
}
form input[type=range]::-ms-fill-lower {
  background: none;
  outline: none;
}
form input[type=range]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #00AAFF;
  border: none;
  border: 2px solid #001678;
  border-radius: 16px;
  box-shadow: inset 0 0 3px #FFFFFF;
}
form .checking {
  position: relative;
  display: inline-table;
  width: 100%;
  margin: 0 0 15px 0;
}
form .checking input {
  float: left;
  width: 60px;
}
form .checking label {
  width: 90%;
  padding: 0;
  font-size: 12px;
}
form .checksquare input[type=checkbox] {
  display: none;
}
form .checksquare input[type=checkbox] + label {
  display: inline-block;
  height: 16px;
  padding-left: 37px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  vertical-align: middle;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 0;
}
form .checksquare input[type=checkbox]:checked + label {
  background-position: 0 -16px;
}
form .checksquare label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: url(../images/ui_checkbox.png);
  background-size: 16px;

   -khtml-user-select: none;
  -webkit-touch-callout: none;
}
form .checkcircle input[type=radio] {
  display: none;
}
form .checkcircle input[type=radio] + label {
  display: inline-block;
  height: 16px;
  padding-left: 37px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  vertical-align: middle;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: 0 0;
}
form .checkcircle input[type=radio]:checked + label {
  background-position: 0 -16px;
}
form .checkcircle label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: url(../images/ui_radio.png);
  background-size: 16px;

   -khtml-user-select: none;
  -webkit-touch-callout: none;
}

.stats_bar {
  position: relative;
  display: block;
  float: left;
  height: 30px;
  margin: 0 10px 0 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 30px;
  background: #D5DDE0;
  border: none;
  border-radius: 5px;
}
.box_twocol .stats_bar {
  width: 60%;
}
.box_threecol .stats_bar {
  width: 50%;
}
.stats_value {
  position: absolute;
  left: 0;
  height: 30px;
  text-indent: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.10);
  background: #00AAFF;
  border-right: 1px solid #FFFFFF;
}
.stats_total {
  position: absolute;
  right: 0;
  padding: 0 10px;
}
.stats_passwordstrength {
  margin: 0;
}

.formstyle {
  position: relative;
  height: inherit;
  clear: both;
  line-height: 36px;
}
.formstyle label {
  padding: 0;
}

.filtering {
  width: 100%;
  float: left;
  margin: 15px 10px 10px 10px;
}
.filtering p {
  margin: 0;
}
.leftfilter {
  float: left;
}
.rightfilter {
  float: right;
}
.filtering label {
  width: inherit;
  margin-right: 5px;
  font-weight: 400;
  color: #00416B;
  text-align: right;
}
.filtering .selectminute {
  width: 60px;
  height: 32px;
  margin: 0 5px;
  padding: 0 10px;
  line-height: 32px;
  background-position: 88% 50%;
}
.filtering form {
  margin: 0;
  padding: 0;
  color: #00416B;
}

.formupload {
  display: inline;
}

.uploadme {
  position: relative;
  display: inline-block;
  width: 190px;
  height: 34px;
  padding: 0 0 0 40px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 300;
  line-height: 34px;
  color: #FFFFFF;
  cursor: pointer;
  background: #B3BFC6;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}
.uploadme .fa {
  position: absolute;
  top: 8px;
  left: 15px;
  font-size: 18px;
  color: #FFFFFF;
}
.uploadname {color:#FFF; font-weight:400;}
.uploadme:hover {
  background: #00416B;
}
.uploadfile {
  position: relative;
  display: none;
  overflow: hidden;
}
#addfileupload {
  font-weight: 300;
}

@media (max-width:949px) {

  .stats_bar {
    margin-bottom: 10px;
  }
}

@media (max-width:866px) {

  select {
    width: 93%;
  }

  form input#subject,
  form textarea {
    width: 90%;
  }

  .selectmini {
    width: 93%;
    display: block;
    margin: 5px 0;
  }
}

@media (min-width: 768px) {
  #addfileupload {
    position: absolute;
    margin: 0 0 0 10px;
  }
}

@media (max-width:420px) {

  #domainname input {
    width: 90%;
  }
}

/* ========================================================================== */

/** Tables */

table {
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
}
table.dataTable {
  border-spacing: 0;
  border-collapse: separate;
}

table thead tr th {
  height: 26px;
  padding: 0 15px;
  color: #FFFFFF;
  text-align: left;
  vertical-align: middle;
  background-color: #00416B;
  border-bottom: 1px solid #D5DDE0;
}

table thead tr th:first-child { border-top-left-radius: 5px; }
table thead tr th:last-child  { border-top-right-radius: 5px; }

table tbody tr td {
  padding: 0 15px;
  word-wrap: break-word;
  border: 0;
  border-bottom: 1px solid #D5DDE0;
}

table thead tr th,
table tbody tr td {
  line-height: 36px;
}

table tbody tr td a,
table tbody tr td a:visited {
  color: #00AAFF;
}

table tbody tr td a:hover {
  color: #00416B;
}

table tbody tr:hover td {
  background-color: rgba(0,0,0,.03);
}

table .onward {
  margin: 0;
}

/**
 * Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px
 * and also iPads specifically.
 */

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top:  -9999px;
    left: -9999px;
  }

  tr {
    margin-top: 10px;
    border: 1px solid #ccc;
  }

  td {
    /* Behave like a "row" */
    position: relative;
    padding-left: 50% !important;
    border: none;
    border-bottom: 1px solid #eee;
  }

  td:last-child {
    border-bottom: none;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top:  0;
    left: 0;
    width:  45%;
    height: 100%;
    padding-left:  10px;
    padding-right: 10px;
    line-height: 36px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    color: #FFF;
    background-color: #00416B;
  }

  /* Label the data */
  td:before {
    content: attr(data-type);
  }
}

@media (min-device-width: 320px) and (max-device-width: 768px)  {

  td {
    padding-left: 55% !important;
  }
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 5px 18px 5px 10px;
  border-bottom: 1px solid #111111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111111;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-position: center right;
  background-repeat: no-repeat;
}
table.dataTable thead .sorting               { background-image: url(../images/sort_both.png); }
table.dataTable thead .sorting_asc           { background-image: url(../images/sort_asc.png); }
table.dataTable thead .sorting_desc          { background-image: url(../images/sort_desc.png); }
table.dataTable thead .sorting_asc_disabled  { background-image: url(../images/sort_asc_disabled.png); }
table.dataTable thead .sorting_desc_disabled { background-image: url(../images/sort_desc_disabled.png); }

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 0 10px;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #111111;
}


#ticketsTable tr td .fa {
  font-size: 14px;
}
#ticketsTable tbody tr td.tickets-status {
  text-align: center;
}


#domainsTable tbody tr td.domains-status,
#domainsTable tbody tr td.domains-actions {
  text-align: center;
}


#invoicesTable tbody tr td.invoices-status,
#invoicesTable tbody tr td.invoices-actions {
  text-align: center;
}

#contactsTable tbody tr td.contacts-access,
#contactsTable tbody tr td.contacts-actions {
  text-align: center;
}


#payoutsTable tbody tr td.payout-status {
  text-align: center;
}


#linksTable {
  margin-top: 20px;
}
#linksTable tbody tr td.links-actions {
  text-align: right;
}

@media (max-width:770px) {

  #linksTable tbody tr td.links-actions .onward {
    margin-bottom: 4px;
  }
}

@media (min-width: 768px) {

  .table-legend {
    text-align: right;
  }

  .table-legend br {
    display: none;
  }
}




/* ========================================================================== */

/** Pagination */

.paginate_button {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  font-size: 12px;
  line-height: 24px;
  color: #00416B;
  text-align: center;
  cursor: pointer;
  border: 1px solid #00416B;
  border-radius: 3px;
}
.paginate_button:hover, .current {
  color: #FFFFFF;
  background: #00AAFF;
  border-color: #00AAFF;
}

@media (max-width: 640px) {

  .paginate_button {
    display: none;
  }

  .paginate_button.first, .paginate_button.last, .paginate_button.current {
    display: inline-block;
  }
}




/* ========================================================================== */

/** Utils */

.textleft {
  text-align: left;
}
.textright {
  text-align: right;
}
.textcenter {
  text-align: center;
}

.ontop {
  z-index: 1400;
}

.right {
  float: right;
}

.pull-right {
  margin-top: -5px;
}

.onleft {
  float: left;
  margin: 0 20px 0 0;
}
.onright {
  float: right;
  margin: 0 0 10px 10px;
}

.imageleft {
  float: left;
  margin: 10px 40px 40px 0;
}
.imageright {
  float: right;
  margin: 10px 0 40px 40px;
}

.top_space_20 {
  margin-top: 20px;
}
.top_space_40 {
  margin-top: 40px;
}
.top_space_50 {
  margin-top: 50px;
}

@media (max-width:540px) {

  .hideme {
    display: none;
  }
}