/* Reset
-------------------------------------------------------------- */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

img {
  border: 0;
  max-width: 100%; }

button::-moz-focus-inner {
  border: 0; }

::selection, ::-moz-selection {
  background: #f9ab53; }

hr {
  border: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  margin: 20px 0; }

body, button, input, textarea, select {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  color: #333; }

h1 {
  font-size: 38px;
  font-weight: 700; }

h2, .h2 {
  font-size: 24px;
  font-weight: normal; }

h3, .h3 {
  font-size: 18px;
  font-weight: normal; }

h4, .h4 {
  font-size: 22px;
  font-weight: 500; }

h5, .h5 {
  font-size: 16px;
  font-weight: 500; }

h6, .h6 {
  font-size: 14px;
  font-weight: normal; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px 0; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none; }

p {
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.5em; }

li {
  font-size: 15px;
  margin-bottom: 10px; }

a {
  text-decoration: none;
  color: #0d7cad; }

a:link, a:visited {
  color: #0d7cad; }

a:hover, a:focus, a:active {
  color: #0d7cad;
  text-decoration: underline; }

a:focus {
  outline: 1px dotted rgba(0, 0, 0, 0.25); }

td {
  font-size: 12px;
  line-height: 1.5em; }

strong {
  color: #444;
  font-weight: bold; }

em {
  color: #555;
  font-style: italic; }

abbr, acronym {
  border-bottom: 1px dotted #666; }

code {
  display: block;
  margin: 1em 0;
  background-color: #fff;
  padding: 1.2em;
  font-family: Courier, monospace;
  font-size: 13px;
  line-height: 20px;
  color: #333; }

code.inline-code {
  display: inline-block;
  padding: 0 10px;
  margin: 0;
  font-size: 100%; }

code.sending-domains {
  display: inline-block;
  background-color: #FFF6BF;
  border: 1px solid rgba(0,0,0,.1);
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  padding: 0 2px;
  margin: 0 0 -6px 0;
  font-size: 100%; }

.clearfix {
  *zoom: 1; }

.clearfix:before, .clearfix:after {
  display: table;
  content: ""; }

.clearfix:after {
  clear: both; }

.imgrpl {
  text-indent: -9999px;
  display: block;
  overflow: hidden; }

.inline {
  display: inline-block; }

#content-main {
  padding-top: 20px; }

.content-pad {
  padding-left: 20px;
  padding-right: 20px; }

.pull-right {
  float: right; }

.pull-left {
  float: left; }

.clear-right {
  clear: right; }

.clear-left {
  clear: left; }

.clear {
  clear: both; }

.no-clear {
  clear: none !important; }

.above-below15 {
  margin-bottom: 15px !important;
  margin-top: 15px !important; }

.above0 {
  margin-top: 0px !important; }

.above5 {
  margin-top: 5px !important; }

.above30 {
  margin-top: 30px !important; }

.above10 {
  margin-top: 10px !important; }

.below0 {
  margin-bottom: 0px !important; }

.below5 {
  margin-bottom: 5px !important; }

.below10 {
  margin-bottom: 10px !important; }

.below30 {
  margin-bottom: 30px !important; }

.alignc {
  text-align: center; }

.alignl {
  text-align: left; }

.alignr {
  text-align: right; }

.alignt {
  vertical-align: top; }

.border-bottom {
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid #cdcdce; }

.panel-block {
  padding: 20px;
  background-color: #fefefe;
  margin-bottom: 20px; }

.rounded {
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box; }

.small-meta {
  font-size: 11px;
  font-weight: normal;
  color: #999; }

.small-meta-list li {
  font-size: 11px;
  font-weight: normal;
  color: #999;
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 5px; }

.hide, .hidden, .print-only {
  display: none !important; }

.y-hidden {
  overflow-y: hidden; }

.absolute {
  position: absolute;
  top: 0;
  left: 0; }

.description {
  max-width: 800px;
  color: #555; }

.template-label {
  display: inline-block;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 20px;
  padding: 3px 15px;
  font-size: 12px;
  margin-right: 5px; }

/* Messaging */
.error, .warning, .success {
  overflow: hidden;
  padding: 15px 20px; }

.error {
  background: #f4cdc6;
  color: #dd624b; }

.warning {
  background: #FFF6BF;
  color: #575757; }

.success, .successMessage {
  background: #E6EFC2;
  color: #529214; }

/*.warning a    {color:#937d2f;}*/
.error a {
  color: #D12F19; }

.notice a {
  color: #575757; }

.success a {
  color: #529214; }

.success strong {
  color: #2a4d09; }

/* Grid
-------------------------------------------------------------- */
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both; }

[class*='col-'] {
  float: left;
  padding-right: 30px; }

.grid [class*='col-']:last-of-type {
  padding-right: 0; }

[class*='col-'].no-pad {
  padding-right: 0; }

.col-1-1 {
  width: 100%; }

.col-1-2 {
  width: 50%; }

.col-1-4 {
  width: 25%; }

.col-3-4 {
  width: 75%; }

.col-1-8 {
  width: 12.5%; }

.col-1-3 {
  width: 33.33%; }

.col-2-3 {
  width: 66.66%; }

.col-1-1 {
  width: 100%; }

.col-1-5 {
  width: 20%; }

.col-2-5 {
  width: 40%; }

.col-3-5 {
  width: 60%; }

.col-4-5 {
  width: 80%; }

.col-1-6 {
  width: 16.666666667%; }

.col-5-6 {
  width: 83.333333333%; }

.module {
  padding: 30px; }

/* Opt-in outside padding */
.grid-pad {
  padding: 30px 0 30px 30px; }

.grid-pad [class*='col-']:last-of-type {
  padding-right: 30px; }

@media screen and (max-width: 960px) {
  .col-1-3, .col-2-3 {
    width: 50%; }
  .col-1-2 {
    width: 99.99999998999999%;
    padding-right: 0; } }

@media screen and (max-width: 860px) {
  .col-3-5 {
    width: 99.99999998999999%;
    padding-right: 0; } }

@media screen and (max-width: 720px) {
  .col-2-5 {
    width: 99.99999998999999%;
    padding-right: 0; } }

@media screen and (max-width: 480px) {
  .col-1-4, .col-1-3, .col-2-3, .col-1-5 {
    width: 99.99999998999999%;
    padding-right: 0; } }

body {
  overflow-x: hidden; }

#content-main {
  position: relative;
  background-color: #f7f7f8;
  padding-top: 20px;
  padding-bottom: 75px;
  margin-bottom: -25px; }

#content {
  width: 100%;
  padding-left: 80px; }

#content header {
  padding: 10px 20px 0 20px;
  height: 70px;
  border-bottom: #ccc;
  width: 100%;
  background-color: #d8d8d9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative; }

#content header.no-secnav {
  padding-top: 22px; }

header[role="banner"] {
  position: fixed;
  width: 80px;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #303030; }

header[role="banner"] h1 {
  margin: 0;
  font-size: 18px;
  color: #fff;
  background: url(/img/mandrill-48px.png) center center no-repeat;
  background-size: 48px 42px;
  width: 80px;
  height: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

.title-page {
  display: none; }

#footer {
  position: relative;
  height: 15px;
  width: 100%;
  text-align: center; }

@media screen and (max-width: 1024px) {
  #content header {
    height: auto; }
  #content-main {
    margin-bottom: -35px; }
  .title-section {
    display: none; }
  .title-page {
    display: block;
    padding-bottom: 7px; } }

label {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
  color: #575757;
  text-transform: capitalize; }

input, textarea, select {
  border: 1px solid #bfbfbf;
  border-radius: 3px;
  font-size: 13px;
  padding: 0 5px;
  height: 32px;
  background: #fff;
  color: #4d4d4d;
  transition: border 0.2s ease-out; }

input[type="text"], input[type="password"], textarea, select {
  width: 100%; }

input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover {
  border: 1px solid rgba(239, 160, 74, 0.5); }

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border: 1px solid #efa04a;
  outline: none; }

select {
  -webkit-appearance: button;
  margin: 0;
  line-height: 22px;
  background-color: #ebebeb;
  background: rgba(0, 0, 0, 0.05) url(/img/form-sprite.png) right -142px no-repeat;
  vertical-align: baseline;
  padding-right: 30px; }

select[disabled="true"] {
  color: #bbb; }

select[disabled="true"]:hover, select[disabled="true"]:focus {
  border: 1px solid #bfbfbf; }

select::-ms-expand {
  display: none; }

input[type=checkbox] {
  -webkit-appearance: push-button;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0;
  border: none;
  background: transparent url(/img/form-sprite.png) left -300px no-repeat;
  position: relative;
  top: 3px; }

td input[type=checkbox] {
  top: -3px; }

input[type=checkbox]::-ms-check, input[type=radio]::-ms-check {
  opacity: 0; }

input[type=checkbox]:checked {
  background-position: left -320px; }

input[type=checkbox]:disabled {
  opacity: .5; }

.checkbox-wrapper {
  position: relative;
  min-height: 32px;
  padding-left: 25px; }

.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0; }

.checkbox-wrapper label {
  padding-top: 2px;
  line-height: 1.4em; }

input[type="radio"] {
  -webkit-appearance: push-button;
  display: inline-block;
  height: 16px;
  width: 16px;
  padding: 0;
  margin: 0 5px 0 0;
  background: transparent url(/img/form-sprite.png) left -345px no-repeat;
  border: none;
  position: relative;
  top: 3px; }

input[type="radio"]:checked {
  background-position: left -365px; }

textarea {
  padding: 5px;
  min-height: 100px; }

@-moz-document url-prefix() {
  select {
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: ''; }
  /*removes default select arrow in firefox*/
  input[type=checkbox] {
    text-indent: 1px;
    text-overflow: '';
    top: 3px; }
  /*removes default checkbox styles in firefox*/
  select, #taskbar select {
    padding: 5px; }
  option {
    padding-right: 30px; }
  /*adds correct padding for select arrow in firefox*/
  input[type="radio"] {
    top: 0; } }

.field-wrapper {
  clear: both;
  margin-bottom: 18px; }

.field-help {
  font-size: 11px;
  color: #999;
  padding: 5px 0 0 0;
  overflow: hidden;
  display: block;
  max-height: 0px;
  -webkit-transition: max-height .2s linear;
  -moz-transition: max-height .2s linear;
  transition: max-height .2s linear; }

.field-help.always-show, input:focus + .field-help {
  max-height: 100px; }

form.slim {
  max-width: 450px; }

#date-range-custom {
  vertical-align: middle; }

#date-range-custom input {
  float: left;
  height: 29px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0; }

#date-range-custom img {
  float: left;
  width: 28px; }

#date-range-custom label {
  float: left; }

#date-range-custom {
  display: inline-block;
  height: 27px;
  line-height: 27px; }

#date-range-custom label {
  margin: 0 5px 0 10px;
  font-size: 12px; }

#date-range-custom input {
  width: 100px;
  border-right: none; }

.adjacent-field-group {
  float: left;
  width: 49%;
  margin-right: 2%; }

.adjacent-field-group:last-child {
  margin-right: 0; }

.adjacent-field-group input, .adjacent-field-group .invalid-error {
  width: 100%; }

.adjacent-field-group input[type="checkbox"] {
  width: 20px; }

.adjacent-fields {
  clear: both; }

.adjacent-fields .field-group {
  float: left;
  clear: none;
  width: 47%;
  margin-right: 15px; }

textarea.readonly {
  width: 100%;
  height: auto;
  padding: 10px;
  height: 150px; }

.placeholder {
  color: #a9a9ab; }

.file-inputs-wrapper {
  position: relative; }

.fake-file-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%; }

.file-inputs-wrapper input[type="file"] {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  opacity: 0;
  z-index: 2;
  width: 100%; }

#fake-file-input {
  width: 70%; }

span.invalid-error {
  display: block;
  padding: 5px;
  color: #c91117;
  font-size: 13px; }

/* Respond */
@media screen and (max-width: 480px) {
  .adjacent-field-group {
    width: 100%;
    margin-right: 0; }
  .adjacent-field-group:first-child {
    margin-bottom: 18px; } }

@media only screen and (max-device-width: 568px) {
  input[type="text"]:focus,
  textarea:focus,
  select:focus {
    font-size: 16px; } }

.button-field input {
  padding-right: 5px;
  float: none; }

.button-field input.col-1-4 {
  width: 25%; }

.button-field input.col-1-2 {
  width: 50%; }

input[type="submit"] {
  -webkit-appearance: none;
  height: auto; }

button, .button, input[type="submit"] {
  display: inline-block;
  padding: 4px 15px 4px 15px;
  font-size: 13px;
  line-height: 18px;
  color: #333;
  text-align: center;
  background-color: #ddd;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer; }

a.button:link, a.button:visited, a.button:hover, a.button:active {
  color: #333;
  text-decoration: none; }

.button:hover, .button:active, button:hover, button:active, input[type="submit"].button:hover, input[type="submit"].button:active {
  background-color: #ccc; }

.button-primary, input[type="submit"].button-primary {
  background-color: #00a2d5;
  color: #fff;
  border-color: #0082b3; }

a.button-primary:link, a.button-primary:visited, a.button-primary:hover, a.button-primary:active {
  color: #fff; }

.button-primary:hover, .button-primary:active, input[type="submit"].button-primary:hover, input[type="submit"].button-primary:active {
  background-color: #0288b4; }

button.disabled, .button.disabled, button[disabled], .button[disabled], input[type="submit"].button.disabled {
  cursor: default;
  opacity: 0.65;
  background-color: #ddd; }

button.button-primary.disabled, .button-primary.disabled, button.button-primary[disabled], .button-primary[disabled], input[type="submit"].button-primary.disabled {
  background-color: #00a2d5; }

.button-support {
  background-color: #efa04a;
  border-color: #ed8600;
  color: #fff;
  padding: 2px 7px;
  font-size: 11px; }

a.button-support:link, a.button-support:visited, a.button-support:hover, a.button-support:active {
  color: #fff; }

.button-support:hover, .button-support:active {
  background-color: #ed8600; }

.button-icon {
  height: 20px;
  width: 20px;
  padding: 0; }

.button-icon span {
  display: block;
  height: 20px;
  width: 20px;
  text-indent: -9999px; }

.linear-list {
  overflow: hidden; }

.linear-list li {
  float: left;
  padding: 0 6px; }

.linear-list li:first-child {
  padding-left: 0; }

td .linear-list, td .linear-list li {
  margin: 0; }

/*Hover Lists --------------------------------------------------*/
.hover-list {
  position: relative; }

.hover-list > li {
  position: relative;
  height: auto;
  padding: 0;
  margin: 0 !important; }

.hover-list > li > ul {
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  right: 0;
  border: 1px solid #ccc;
  background: #fff;
  width: 175px;
  height: auto;
  overflow: hidden; }

.hover-list ul.right-edge {
  left: auto;
  right: 0; }

.hover-list > li:hover > ul,
.hover-list.stayopen > li > ul {
  display: block; }

.hover-list > li:hover a.hover-trigger {
  color: #101010;
  background-position: right -15px; }

.hover-list > li > ul > li {
  display: inline;
  margin: 0;
  padding: 0;
  float: none;
  border: none;
  font-size: 13px; }

.hover-list > li > ul > li > a {
  display: block;
  color: #575757;
  padding: 8px 15px;
  text-decoration: none;
  line-height: 14px; }

.hover-list > li > ul > li > a:hover {
  color: #333;
  background-color: #f1f1f2; }

.hover-list .dwn {
  display: inline-block;
  text-indent: -9999px;
  background: url(/img/main-nav-dropdown.png) left 50% no-repeat;
  width: 7px;
  margin-left: 3px; }

.hover-list .section-head {
  color: #3f3f38;
  font-weight: bold;
  font-size: 13px;
  margin-top: 12px; }

.hover-list ul li:first-child .section-head {
  margin-top: 0;
  line-height: 1em; }

.alignc .hover-list ul {
  left: 40%; }

.button-nav {
  margin: 20px 0 10px 0;
  padding: 0; }

.button-nav li {
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 22px; }

.button-nav li button {
  margin: 0;
  border-radius: 0; }

.button-nav li:first-child button, .button-nav li:first-child .button {
  border-radius: 2px 0 0 2px; }

.button-nav li:last-child button, .button-nav li:last-child .button {
  border-radius: 0 2px 2px 0; }

.button-nav .btn-selected {
  color: #f1f1f2;
  text-decoration: none;
  border-color: #5c5c5c;
  background-color: #6e6e6e; }

.button-nav .btn-selected:hover {
  color: #ffffff; }

.button-split {
  overflow: visible;
  position: relative;
  display: inline-block; }

.button-split .button-group > li {
  padding: 0;
  margin-bottom: 0;
  float: left; }

.button-group li button, .button-group li .button {
  margin: 0; }

.button-group li:first-child button, .button-group li:first-child .button {
  border-radius: 2px 0 0 2px;
  margin-right: 1px; }

.button-group li:last-child button, .button-group li:last-child .button {
  border-radius: 0 2px 2px 0; }

.drop-trigger {
  padding: 4px 10px; }

.drop-trigger .dwn {
  display: inline-block;
  text-indent: -9999px;
  background: url(/img/main-nav-dropdown.png) left 50% no-repeat;
  width: 7px; }

.drop-trigger.active {
  background-color: #ccc; }

.drop-trigger:focus {
  outline: none; }

.dropdown-group {
  position: absolute;
  top: 29px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 150px;
  z-index: 20;
  overflow: hidden;
  display: none; }

.dropdown-group.small {
  width: 110px; }

.dropdown-group.right {
  left: auto;
  right: 0; }

.button-split.drop-show .dropdown-group {
  display: block; }

.dropdown-group li {
  padding: 0;
  margin: 0; }

.dropdown-group a, .dropdown-group button {
  color: #575757;
  background-color: transparent;
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  font-size: 13px;
  text-align: left; }

.dropdown-group a:hover, .dropdown-group button:hover {
  background-color: #eee;
  text-decoration: none; }

.colophon {
  font-size: 12px;
  color: #999; }

/* Flash Block */
#flash {
  margin-top: -10px; }

.flash-block {
  margin: 0 0 20px 0;
  font-size: 14px; }

#content-main .flash-block {
  margin: 0 -10px 10px -10px;
  border-radius: 4px; }

.filter-bar ~ #flash .flash-block:first-child {
  margin-top: -20px; }

.flash-error {
  background: #FBE3E4 none;
  color: #D12F19; }

.flash-success {
  background: #E6EFC2 none;
  color: #529214; }

/* Navigation
---------------------------------------------*/
#main-nav {
  overflow-y: auto;
  overflow-x: hidden; }

#main-nav > li {
  margin-top: 10px;
  position: relative; }

#main-nav > li > a {
  width: 80px;
  font-size: 12px;
  display: block;
  color: #f1f1f2;
  text-align: center;
  padding-top: 42px;
  padding-bottom: 10px;
  background-size: 24px;
  opacity: .8; }

#main-nav > li > a.current {
  opacity: 1; }

.nav-dashboard {
  background: url(/img/icons/nav-dashboard.png) center 10px no-repeat; }

.nav-reports {
  background: url(/img/icons/nav-reports.png) center 10px no-repeat; }

.nav-outbound {
  background: url(/img/icons/nav-outbound.png) center 10px no-repeat; }

.nav-inbound {
  background: url(/img/icons/nav-inbound.png) center 10px no-repeat; }

.nav-settings {
  background: url(/img/icons/nav-settings.png) center 10px no-repeat; }

.nav-account {
  background: url(/img/icons/nav-account.png) center 10px no-repeat; }

.subnav-trigger {
  border: 0;
  padding: 0;
  height: 24px;
  width: 15px;
  position: absolute;
  top: 10px;
  right: 0;
  background: url(../img/icons/arrow-vertical.png) center 9px no-repeat;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  opacity: .5; }

.subnav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 80px;
  width: 240px;
  background-color: #424242;
  transition: left .15s ease-out;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: -1; }

.subnav li {
  margin-bottom: 0; }

.subnav-trigger:hover {
  background-color: rgba(0, 0, 0, 0.25); }

.subnav-trigger:hover, .subnav-trigger:active, .subnav-trigger:focus {
  cursor: pointer;
  opacity: 1;
  outline: none; }

.subnav-heading {
  display: block;
  height: 60px;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 24px;
  color: #f1f1f2;
  padding-left: 15px;
  padding-top: 12px;
  margin-bottom: 15px; }

#content {
  transition: all .15s ease; }

.slide-out #content {
  -webkit-transform: translateX(240px);
  transform: translateX(240px); }

body {
  position: relative;
  z-index: 0; }

.subnav a {
  color: #f1f1f2;
  padding: 15px 15px;
  width: 100%;
  display: block;
  font-size: 14px; }

.subnav a:hover {
  color: #fff;
  background-color: #efa04a;
  text-decoration: none; }

.active + .subnav {
  z-index: 1; }

#nav-trigger {
  display: none; }

#main-nav > li > a:hover, #main-nav > li > a:focus, #main-nav > li > a:active {
  text-decoration: none;
  opacity: 1; }

.secondary-nav {
  position: absolute;
  bottom: 0; }

.secondary-nav li {
  display: inline-block;
  margin-right: 35px;
  margin-bottom: 0; }

.secondary-nav li:last-child {
  margin-right: 0; }

.secondary-nav a {
  padding-bottom: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #575757;
  border-bottom: 3px solid rgba(239, 160, 74, 0);
  transition: all .15s ease; }

.secondary-nav a:hover, .secondary-nav a:active, .secondary-nav a:focus {
  text-decoration: none;
  border-bottom: 3px solid rgba(239, 160, 74, 0.8); }

.secondary-nav a.current {
  border-bottom: 3px solid #efa04a;
  color: #333; }

.secondary-nav .hover-list > li > ul {
  border-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  top: 80%; }

.secondary-nav .hover-list > li > ul > li {
  text-align: right; }

.secondary-nav .hover-list > li > ul > li a {
  border-bottom: none; }

.secondary-nav .hover-list li li .current {
  border-bottom: none; }

#user-nav {
  position: absolute;
  top: 15px;
  right: 20px; }

#user-nav > ul > li > a {
  color: #575757;
  font-size: 14px;
  line-height: 25px; }

#user-nav .hover-list > li > ul {
  border: none;
  border-radius: 4px;
  overflow: hidden; }

#user-nav .hover-list > li > ul a {
  background-color: #303030;
  color: #f1f1f2;
  padding: 15px; }

#user-nav .hover-list > li > ul a:hover {
  background-color: #efa04a; }

.no-secnav #user-nav {
  top: 25px; }

#user-nav .hover-list > li > ul a.logout {
  padding: 15px 15px 15px 30px;
  background-image: url(/img/icons/logout.png) !important;
  background-position: 10px 50% !important;
  background-repeat: no-repeat !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3); }

#support {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 80px;
  text-align: center;
  color: #f1f1f2;
  font-size: 12px; }

@media screen and (max-width: 1024px) {
  header[role="banner"] {
    position: relative;
    height: 40px;
    width: 100%; }
  #nav-trigger {
    display: inline-block;
    background: url(/img/mandrill-48px.png) center right no-repeat;
    background-size: 34px;
    border: none;
    height: 40px;
    border-radius: 0;
    padding-right: 40px;
    color: #f1f1f2;
    font-size: 16px;
    padding-left: 5px; }
  #logo h1 {
    display: inline-block; }
  #main-nav {
    position: absolute;
    top: 0;
    left: -200px;
    bottom: 0;
    background-color: #424242;
    width: 200px;
    z-index: 20;
    transition: all .15s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
  #content {
    padding-left: 0;
    transition: all .15s ease; }
  header[role="banner"] {
    transition: all .15s ease; }
  .show-mainnav #content, .show-mainnav header[role="banner"] {
    -webkit-transform: translateX(200px);
    transform: translateX(200px); }
  html.show-mainnav, .show-mainnav body {
    overflow: hidden;
    /* prevents scroll bars */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* disable webkit tap highlight */
    height: 100%; }
  #main-nav > li {
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 5px;
    padding-bottom: 5px; }
  #main-nav > li > a {
    width: 100%;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 28px;
    background-position: 5px 5px;
    background-size: 16px;
    font-size: 14px;
    font-weight: normal; }
  .subnav {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    padding: 0; }
  .subnav a {
    font-size: 13px;
    padding: 5px 10px 5px 28px; }
  .subnav-heading, .secondary-nav, .subnav-trigger {
    display: none; }
  #user-nav, .no-secnav #user-nav {
    top: -32px; }
  #user-nav > ul > li > a {
    color: #f1f1f2;
    font-size: 14px; }
  #support {
    display: none; } }

@media screen and (max-width: 480px) {
  #user-nav .dwn {
    background-position: left 3px;
    height: 9px; }
  #user-nav #username {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }

.table-wrapper {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

.table-wrapper.full-width {
  width: auto;
  margin: 0 -20px -20px -20px; }

table {
  width: 100%;
  margin-bottom: 1.4em;
  border-collapse: separate;
  border: 0; }

th {
  font-weight: bold;
  color: #575757;
  background-color: #d8d8d9;
  height: 29px;
  text-transform: capitalize;
  font-size: 13px;
  padding: 0 10px;
  vertical-align: middle;
  text-align: left; }

thead tr, tfoot tr {
  background: none transparent !important; }

thead th {
  border-left: 1px solid transparent; }

thead th:first-child {
  border-left: none; }

th:last-of-type, td:last-of-type {
  border-right: 0; }

td {
  color: #4f4f4f;
  border-bottom: 1px solid rgba(191, 191, 191, 0.5);
  font-size: 12px;
  padding: 9px 10px;
  vertical-align: middle; }

tfoot td {
  font-style: italic; }

caption {
  padding-bottom: 10px;
  color: #333;
  text-transform: capitalize;
  text-align: left; }

tr:last-child td {
  border-bottom: none !important; }

tr:hover {
  background: rgba(0, 0, 0, 0.035) !important;
  color: #333; }

  /* Used to disable hover effect on Tr -- see auth banner on Account Overview (index.html) */
.disable-hover:hover {
  background: none !important; /* remove background color on hover */
  color: inherit !important; /* use the default text color on hover */
}

/*Sortable table headings---------------------------------------------*/
.sort-column span {
  position: relative; }

.sort-column span::after {
  content: '';
  display: none;
  height: 4px;
  width: 7px;
  margin-left: 5px;
  background: url(/img/main-nav-dropdown.png) top left no-repeat;
  position: absolute;
  top: 7px; }

.sort-column:hover {
  cursor: pointer; }

.sort-column:hover span::after, .sorttable_sorted span::after {
  display: inline-block; }

.sorttable_sorted_reverse span::after, .sort-column.sorted-reverse span::after {
  display: inline-block;
  content: '';
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg); }

/* Vertical-table -------------------------------------------------- */
.vertical-table {
  width: 50%;
  margin-top: 1.4em; }

.vertical-table caption {
  font-size: 1.37em;
  font-weight: 500;
  margin-bottom: 0; }

.vertical-table th, .vertical-table td {
  float: left;
  line-height: 1.3em;
  padding: 10px 0;
  vertical-align: baseline; }

.vertical-table th {
  color: #444;
  font-weight: bold;
  font-size: 15px;
  background-color: transparent;
  height: initial;
  width: 33.33%;
  padding-right: 30px; }

.vertical-table td {
  border: none;
  font-size: 15px;
  width: 66.66%; }

.vertical-table tr:hover {
  background: none !important;
  color: #444; }

.vertical-table td[colspan="2"] {
  width: 100%; }

@media screen and (max-width: 960px) {
  .vertical-table th, .vertical-table td {
    width: 50%; }
  .vertical-table {
    width: 99.99999998999999%;
    padding-right: 0; } }

@media screen and (max-width: 480px) {
  .vertical-table, .vertical-table th, .vertical-table td {
    width: 99.99999998999999%;
    padding: 0;
    margin: 0; }
  .vertical-table td {
    margin-bottom: 1.3em; }
  .vertical-table caption {
    margin-top: 1.15em;
    margin-bottom: 0.5em; } }

.pager {
  margin-top: -17px;
  padding: 5px 10px;
  background: #d8d8d9;
  font-size: 12px; }

.pager-size label {
  margin: 0 5px;
  display: inline-block;
  font-size: 12px; }

.pager select {
  background-color: rgba(255, 255, 255, 0.5); }

.pager .prev {
  margin-left: 5px;
  margin-right: 2px; }

#page-size {
  width: 110px; }

.templates-pager .pager {
  background: none; }

/*Stats --------------------------------------------------*/
ul.stats-tabs li {
  float: left;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
  border-right: 1px solid #ddd; }

ul.stats-tabs li:last-child {
  margin: 0;
  padding: 0;
  border: none; }

ul.stats-tabs li a, ul.stats-tabs li strong {
  display: block;
  float: left;
  font-size: 18px;
  font-weight: bold; }

ul.stats-tabs li a span, ul.stats-tabs li strong span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: normal;
  color: #999; }

.stat-block {
  padding: 15px 10px; }

.stat {
  font-weight: bold;
  line-height: 100%; }

.stat-block .stat {
  font-size: 20px;
  font-weight: bold;
  line-height: 100%;
  color: #0d7cad; }

.stat-block .label, .stat-block strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: #424242;
  font-weight: bold; }

.secondary-stat-block {
  background-color: #f3f3f3;
  color: #3f3f38;
  border: 1px solid #ccc;
  padding: 0 10px 25px 10px; }

.secondary-stat-block div.stat-plus-link a {
  background: #fff;
  color: #999; }

.secondary-stat-block .label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: capitalize;
  margin: 0 -10px;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  font-weight: bold;
  background-color: #e7e7e7;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }

.secondary-stat-block.multi-stat-block {
  padding-bottom: 0; }

.secondary-stat-block.multi-stat-block .label {
  text-align: left;
  padding-left: 15px; }

.secondary-stat-block.multi-stat-block li {
  border-right: 1px solid #ccc;
  border-left: 1px solid #fff; }

.secondary-stat-block.multi-stat-block li:first-child {
  border-left: none; }

.secondary-stat-block.multi-stat-block li:last-child {
  border-right: none;
  margin-right: -4px; }

.secondary-stat-block .stat {
  font-size: 40px;
  font-weight: normal;
  margin-top: 20px;
  display: block; }

.secondary-stat-block.multi-stat-block .stat {
  font-size: 30px; }

.secondary-stat-block .small-meta {
  display: block;
  font-size: 13px;
  line-height: 1.3em;
  margin-top: 5px;
  color: #3f3f38; }

.secondary-stat-block tfoot {
  background-color: #e7e7e7 !important; }

.secondary-stat-block tfoot td {
  font-style: normal; }

.stat-heading {
  color: #666; }

.stat-heading .stat {
  font-size: 115%;
  color: #222;
  padding: 0 5px; }

/* empty data blocks */
.no-data-sample {
  padding: 65px 20px 80px 20px;
  margin: 0 auto;
  max-width: 675px; }

.no-data-sample p {
  font-size: 15px;
  color: #959595;
  margin-bottom: 0; }

.no-data-sample p.empty-tagline {
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  color: #636363;
  margin: 30px 0 5px 0; }

.no-data-sample p span {
  line-height: 50px;
  padding: 0 10px; }

#dashboard .no-data-block {
  margin: 0 auto;
  max-width: 675px;
  padding-top: 65px; }

#dashboard .no-data-block .span6 {
  width: 47.5%; }

#dashboard .no-data-block h3 {
  margin-bottom: 40px; }

#dashboard .no-data-block h4 {
  font-size: 20px; }

#dashboard .start-block {
  padding-left: 70px; }

#dashboard .start-block p {
  font-size: 13px; }

#dashboard .span6 div:first-child {
  padding-left: 70px; }

.btn-go {
  width: 100%;
  text-align: left;
  padding: 10px 0 10px 10px !important; }

.start-smtp a span, .start-api a span {
  background: url(/img/button-arrow.png) right 50% no-repeat;
  width: 95%;
  display: inline-block; }

.start-smtp {
  background: url(/img/icons/dashboard-smtp.png) top left no-repeat; }

.start-api {
  background: url(/img/icons/dashboard-api.png) top left no-repeat; }

.document {
  background: url(/img/icons/document.png) left 50% no-repeat;
  padding-left: 20px; }

.document-single {
  background: url(/img/icons/document-single.png) left 50% no-repeat;
  padding-left: 20px; }

#webhook-form.no-data, #app-form.no-data, #field-form.no-data, #group-form.no-data {
  margin: 0 auto;
  padding: 65px 0 80px 0; }

#alert-form.no-data {
  margin-top: 50px; }

.searchform input.searchinput:-moz-placeholder {
  color: #808184; }

.searchform input:-ms-input-placeholder {
  color: #808184; }

.searchform input {
  height: 27px;
  width: 100%;
  font-size: 12px;
  margin-bottom: 17px; }

.searchform .searchinput {
  float: left;
  width: 202px;
  height: 29px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: none;
  margin-bottom: 0; }

.searchform .searchinput:hover {
  border-right-width: 1px; }

.searchform .button {
  width: 28px;
  height: 29px;
  text-align: center;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  text-indent: -9999px;
  background: url(/img/search-icon-@2x.png) right 50% no-repeat;
  background-size: 28px;
  margin-bottom: 0;
  border: none;
  padding: 0; }

#ticket-search-wrapper .searchinput {
  width: 95%; }

.search-select-form {
  position: relative; }

.search-select-form .searchform {
  margin: 0 5px; }

.search-select {
  position: absolute;
  top: 0;
  background-color: #fff;
  padding: 5px 0 5px 0;
  z-index: 1000;
  width: 240px; }

.search-select-options {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  clear: both;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-top: 5px; }

.search-select-options li {
  padding: 0 5px;
  font-size: 12px; }

.search-select-form option {
  display: none; }

.filter-bar .search-select-form .searchform .button, .splittest-details .search-select-form .searchform button, .search-filter .search-select-form .searchform button {
  border: none;
  background: transparent url(/img/search-button-gray.png) right 50% no-repeat; }

.search-select-form .searchform .searchinput, .report-filter .search-select-form .searchform .searchinput, .splittest-details .search-select-form .searchform .searchinput {
  background-color: #eee;
  color: #4f4f4f;
  border-color: #ccc;
  border-bottom: 1px solid #ddd;
  line-height: normal; }

.splittest-details .search-select-form .searchform .searchinput, .search-filter .search-select-form .searchform .searchinput {
  border-right: 0;
  width: 200px; }

.filter-bar .search-select-form {
  display: inline; }

.splittest-details .search-select-form {
  display: inline-block; }

.splittest-details .search-select {
  border: 1px solid #ccc; }

.search-filter {
  overflow-x: visible; }

.filter-bar {
  margin: -20px -20px 30px -20px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 10px; }

.filter-bar label {
  display: inline-block;
  font-size: 12px; }

.filter-bar select {
  width: 150px;
  height: 29px;
  background-color: rgba(255, 255, 255, 0.5); }

.activity-filter {
  position: relative; }

.activity-filter label {
  display: block; }

.activity-filter select {
  width: 100%; }

.activity-filter .checkbox-wrapper {
  min-height: none; }

.activity-filter .searchform {
  position: relative;
  padding-top: 4px; }

.activity-filter .searchinput {
  width: 100%; }

.activity-filter .searchform .button {
  position: absolute;
  top: 4px;
  right: -1px; }

#search-facets span.count {
  display: inline-block;
  padding: 0 6px;
  background-color: #d8d8d9;
  border-radius: 20px;
  font-weight: bold;
  line-height: 14px;
  font-size: 11px;
  margin-left: 5px; }

#date_range {
  width: 150px; }

.activity-filter .toggle {
  position: absolute;
  bottom: 5px;
  right: 10px;
  height: 20px;
  line-height: 11px; }

#filters-extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in; }

#filters-extra.full-height {
  max-height: 200px;
  overflow: visible; }

@media screen and (max-width: 960px) {
  #filters-extra.full-height {
    max-height: 400px; } }

@media screen and (max-width: 480px) {
  #filters-extra.full-height {
    max-height: 800px; } }

/* help bubble */
.help-bubble {
  height: 14px;
  width: 14px;
  margin-left: 7px;
  background: url(/img/icons/help.png) top left; }

th .help-bubble {
  background: url(/img/icons/help-white.png) top left;
  position: relative;
  top: 2px; }

label .help-bubble, #main-narrow .label .help-bubble {
  position: relative;
  top: 2px; }

.rule-count .help-bubble {
  position: relative;
  top: 2px; }

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  width: 260px;
  padding: 1px;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

.popover.top {
  margin-bottom: 10px; }

.popover.right {
  margin-left: 10px; }

.popover.bottom {
  margin-top: 10px; }

.popover.left {
  margin-right: 10px; }

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
  display: none; }

.popover-content {
  padding: 9px 14px; }

.popover-content p, .popover-content ul, .popover-content ol {
  margin-bottom: 0; }

.popover .arrow, .popover .arrow:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.popover .arrow:after {
  content: "";
  z-index: -1; }

.popover.top .arrow {
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  border-width: 10px 10px 0;
  border-top-color: #ffffff; }

.popover.top .arrow:after {
  border-width: 11px 11px 0;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -1px;
  left: -11px; }

.popover.right .arrow {
  top: 50%;
  left: -10px;
  margin-top: -10px;
  border-width: 10px 10px 10px 0;
  border-right-color: #ffffff; }

.popover.right .arrow:after {
  border-width: 11px 11px 11px 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  left: -1px; }

.popover.bottom .arrow {
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-width: 0 10px 10px;
  border-bottom-color: #ffffff; }

.popover.bottom .arrow:after {
  border-width: 0 11px 11px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -1px;
  left: -11px; }

.popover.left .arrow {
  top: 50%;
  right: -10px;
  margin-top: -10px;
  border-width: 10px 0 10px 10px;
  border-left-color: #ffffff; }

.popover.left .arrow:after {
  border-width: 11px 0 11px 11px;
  border-left-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
  right: -1px; }

.popover p {
  font-size: 13px; }

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 950;
  background-color: rgba(0, 0, 0, 0.2); }

.ui-dialog {
  position: absolute;
  padding: 0;
  width: 300px;
  overflow: hidden;
  border: none;
  background-color: #e1e1e2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border-radius: 4px; }

.ui-dialog-titlebar {
  background-color: #303030;
  padding: 10px;
  color: #f1f1f2;
  position: relative; }

.ui-dialog-content,
.ui-dialog-buttonpane {
  padding: 20px 10px; }

.ui-dialog-titlebar-close {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 22px;
  margin: -11px -2px 0 0;
  height: 22px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0; }

.ui-dialog-titlebar-close span {
  display: block;
  margin: 1px; }

.ui-dialog-titlebar-close span.ui-button-text {
  display: none; }

.ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
  padding: 0;
  border: 0;
  background: none; }

.ui-dialog-buttonset {
  text-align: right; }

.ui-dialog-buttonset .ui-button {
  margin-right: 15px; }

.ui-dialog-buttonset .ui-button:last-child {
  margin-right: 0px; }

.ui-icon {
  display: block;
  text-indent: -99999px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-repeat: no-repeat; }

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: .35;
  background-image: none; }

.ui-icon.ui-icon-closethick {
  background: url(/img/close-dialog.png) top left no-repeat;
  height: 22px;
  width: 22px;
  padding: 0;
  margin: 0; }

.ui-state-hover .ui-icon.ui-icon-closethick {
  background-position: bottom left; }

.ui-datepicker {
  background-color: #000;
  background-color: rgba(49, 49, 49, 0.95);
  padding: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  display: none; }

.ui-datepicker-header {
  background: #ebebeb;
  color: #575757;
  border: none;
  padding: 5px;
  border-radius: 0; }

.ui-datepicker-prev {
  float: left; }

.ui-datepicker-next {
  float: right; }

.ui-datepicker-title {
  text-align: center; }

.ui-datepicker-calendar {
  margin-bottom: 0;
  border-left: none;
  background-color: #fff; }

.ui-datepicker-calendar th {
  padding: 0;
  width: 30px;
  border-color: transparent;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #d2d2d2;
  background: #e5e5e5;
  text-align: center;
  font-weight: normal;
  color: #9d9d9d; }

.ui-datepicker-calendar td {
  text-align: center;
  border-left: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  height: 30px;
  width: 30px;
  padding: 0;
  vertical-align: middle; }

.ui-datepicker-calendar td a, .ui-datepicker-calendar td a.ui-state-default {
  color: #4d4d4d;
  background: none;
  border: none; }

.ui-datepicker-calendar td.ui-state-disabled {
  background-color: #eee; }

.ui-datepicker-calendar td.ui-state-disabled span {
  background: none;
  border: none;
  color: #333; }

.ui-datepicker-calendar td.ui-datepicker-other-month {
  background-color: #fff; }

.ui-datepicker-current-day {
  background: #35addf url(/img/calendar-current-day.png) top left no-repeat; }

.ui-datepicker-calendar .ui-datepicker-current-day a {
  color: #fff; }

.ui-datepicker-prev .ui-icon-circle-triangle-w {
  background: url(/img/icons/arrow-prev.png) top left no-repeat; }

.ui-datepicker-next .ui-icon-circle-triangle-e {
  background: url(/img/icons/arrow-next.png) top left no-repeat; }

.ui-datepicker-prev.ui-state-hover, .ui-datepicker-next.ui-state-hover {
  background: none;
  border: none; }

/*Test mode changes---------------------------------------------*/
.test-mode header[role="banner"] {
  background: #d87800; }

.test-mode header[role="banner"] nav a {
  color: #fff; }

.test-mode .subnav {
  background-color: #575757; }

.test-mode .subnav-trigger {
  background-image: url(/img/icons/arrow-vertical-test.png);
  opacity: .7; }

.test-mode .current + .subnav-trigger {
  opacity: 1; }

.test-mode #footer-trigger {
  color: rgba(255, 255, 255, 0.7); }

.tab-container {
  position: relative; }

.tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.info-list li {
  padding: 15px 0px;
  line-height: 1.3em; }

@media screen and (max-width: 480px) {
  .info-list li div + div {
    margin-bottom: 1.5em; } }

/*Dashboard---------------------------------------------*/
#dashboard .account .stat-block {
  padding: 15px 0; }

.account-info li {
  padding: 0 20px 15px 20px; }

.account-info li, .account-info li .stat {
  font-size: 15px;
  font-weight: bold; }

.account-info li .stat {
  display: block;
  padding-bottom: 7px; }

.account-info li .label {
  font-size: 13px;
  line-height: 13px;
  font-weight: normal;
  text-transform: capitalize;
  display: block; }

.meter {
  display: block;
  height: 9px;
  width: 100%;
  padding-top: 1px;
  background: #d8d8d9;
  margin: 2px 0 7px 0;
  overflow: hidden; }

.meter-stat {
  display: block;
  text-indent: -9999px;
  height: 7px;
  background: #24a7d7; }

.meter-stat-full {
  background: #f8a140; }

.queue-stat {
  font-size: 13px;
  font-weight: normal;
  color: #f8a140; }

.help-link {
  font-size: 12px;
  font-weight: normal; }

.reputation {
  margin-left: -20px;
  padding-left: 20px;
  background: url(/img/icons/status-success.png) left 2px no-repeat; }

.reputation-unknown {
  background-image: url(/img/icons/status-unknown.png); }

.reputation-poor {
  background-image: url(/img/icons/status-error.png); }

.sending-stats {
  position: relative;
  padding-right: 25px; }

.sending-stats .pause-status {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 18px;
  width: 18px;
  background: url(/img/pause-sending-@2x.png) top left no-repeat;
  text-indent: -9999px;
  background-size: 18px; }

.sending-stats .pause-status.resume-sending {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 18px;
  width: 18px;
  background: url(/img/pause-sending-@2x.png) bottom left no-repeat;
  background-size: 18px; }

.queue-stat {
  position: relative;
  padding-right: 25px;
  display: block;
  margin-top: 5px; }

.queue-stat .backlog-clear {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border: 1px solid #131313;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background: url(/img/jqui/ui-icons_cccccc_256x240.png) -176px -96px no-repeat #474747;
  text-indent: -9999px; }
  .queue-stat .backlog-clear:hover {
    background-color: #222222; }

.queue-stat .backlog-recalculate {
  border: 1px solid #131313;
  background-color: #474747;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  position: absolute;
  right: 26px; }
  .queue-stat .backlog-recalculate:hover {
    background-color: #222222; }
  .queue-stat .backlog-recalculate .ui-icon-refresh {
    background-image: url(/img/jqui/ui-icons_cccccc_256x240.png);
    background-repeat: no-repeat;
    background-position: -63px -79px; }

.stat-row {
  padding-bottom: 30px; }

.report-stat {
  background-color: #d5eaf2;
  padding: 15px 20px 12px 20px; }

.report-stat .stat {
  font-size: 30px; }

.report-stat .label {
  font-size: 20px;
  padding-top: 3px; }

.numerator, .denominator {
  background-color: transparent;
  padding: 15px 10px; }

.numerator .stat {
  background: transparent url(/img/icons/division.png) right 50% no-repeat;
  display: block; }

.denominator .stat {
  background: transparent url(/img/icons/equals.png) right 50% no-repeat;
  display: block; }

.stat-change {
  font-size: 20px;
  padding-top: 5px;
  font-weight: normal; }

.stat-change {
  background: url(/img/icons/stat-change-arrow.png) left 7px no-repeat;
  padding-left: 16px; }

.stat-change-down {
  background-position: left -83px; }

.volume-bounced .stat-change-up {
  background-position: left -54px; }

.volume-bounced .stat-change-down {
  background-position: left -23px; }

#support-dialog {
  max-height: 550px; }

.article-list li {
  margin: 5px 0; }

#ticket-search-results h4 {
  font-size: 18px;
  margin-bottom: 0; }

#help-categories a {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  padding: 15px; }

#support-dialog .stat-block {
  background-color: #fff;
  padding-left: 20px;
  border-radius: 3px; }

#dashboard #support-dialog .span6 div:first-child, #support-dialog .span6 div:first-child {
  padding-left: 20px; }

#support-dialog .stat-block .stat {
  margin-left: 0;
  background-position: left 6px; }

/*Account Review Form---------------------------------*/
#support-review-form textarea {
  min-height: 83px; }

#support-review-form label {
  text-transform: none; }

/*Demographics---------------------------------------------*/
.map-container {
  background-color: #fefefe;
  background-color: rgba(255, 255, 255, 0.75);
  padding: 10px;
  border-radius: 5px; }

.location td {
  padding: 12px 10px 0 10px; }

.location td img {
  position: relative;
  top: -3px;
  margin-right: 5px; }

.location td a {
  vertical-align: top; }

.view-all {
  font-size: 13px;
  letter-spacing: 0;
  margin-top: 10px; }

.icon-client {
  margin-right: 5px; }

.stats-container, .chart-container {
  position: relative; }

.action-bar {
  padding: 15px 10px; }

.search-results td {
  padding-top: 10px; }

.search-results td.status {
  padding: 10px 10px 10px 28px;
  color: #4f4f4f;
  border-radius: 0;
  background: none;
  position: relative; }

.search-results td.status:before {
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 20px;
  position: absolute;
  top: 13px;
  left: 10px; }

.search-results td.success:before {
  background-color: #00ba1e; }

.search-results td.warning:before {
  background-color: #ff9e00; }

.search-results td.error:before {
  background-color: #e10031; }

.search-results .small-meta {
  white-space: nowrap; }

tr.daybreak td {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background-color: #eee; }

.search-tips-dialog.ui-dialog {
  border-radius: 3px;
  background-color: #232324;
  background-color: rgba(0, 0, 0, 0.92);
  color: #f1f1f2;
  color: rgba(241, 241, 242, 0.9); }

.search-tips-dialog.ui-dialog .ui-dialog-titlebar {
  padding: 0; }

.search-tips-dialog.ui-dialog .ui-dialog-title {
  display: none; }

.search-tips-dialog.ui-dialog .ui-dialog-titlebar-close {
  top: 18px;
  z-index: 2000; }

.search-tips-dialog.ui-dialog .ui-dialog-content {
  color: #f1f1f2;
  color: rgba(241, 241, 242, 0.9); }

.search-tips-dialog.ui-dialog .ui-dialog-content li {
  font-size: 13px; }

.search-tips-dialog .ui-widget-header {
  background: transparent;
  border-radius: 0;
  border-width: 0 0 1px 0; }

.search-tips-dialog code.inline-code {
  font-size: 12px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #f1f1f2;
  color: rgba(241, 241, 242, 0.8); }

.search-tips-dialog h5 {
  color: #f1f1f2;
  color: rgba(241, 241, 242, 0.9);
  letter-spacing: 0;
  border-bottom: 1px solid #333; }

.search-tips-dialog ul {
  margin-left: 10px; }

/*Templates---------------------------------------------*/
.template-types {
  width: 40%;
  min-width: 420px;
  margin: 30px auto 0 auto; }

.template-types > li {
  background-color: #fefefe;
  width: 48%;
  margin-left: 1%;
  padding: 20px 10px;
  margin-bottom: 100px;
  overflow: visible;
  height: 245px;
  position: relative;
  float: left;
  min-width: 200px; }

.template-types .hover-list ul {
  text-align: left;
  width: auto;
  left: -10px; }

.template-types li:first-child {
  margin-left: 0; }

.template-types li p {
  line-height: 16px;
  padding: 0 10px; }

.template-types li h4 {
  color: #3f3f38;
  padding: 0 10px;
  margin: 13px 0 5px 0; }

.template-types .select-type {
  width: 70%;
  margin: 0;
  position: absolute;
  bottom: 15px;
  left: 15%; }

.template-types .hover-list {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%; }

.template-types .hover-list .select-type {
  position: static; }

.template-name {
  word-wrap: break-word; }

.template-state {
  text-align: center;
  font-size: 13px;
  margin-right: 30px;
  color: #575757;
  padding: 2px 0 1px 0;
  border-radius: 0 0 3px 3px;
  border: 1px solid #ddd;
  border-top: none; }

.template-info {
  position: relative;
  font-weight: bold;
  height: 136px;
  width: 115px;
  overflow: hidden;
  border: 1px solid #ddd;
  margin: 0 30px 0 0;
  border-radius: 3px 3px 0 0; }

.template-info .template-name {
  line-height: 16px;
  padding-bottom: 5px; }

.template-thumbnail {
  width: auto;
  margin: auto;
  overflow: hidden;
  display: inline-block;
  border: none; }

.template-thumbnail-empty {
  color: #ccc;
  text-align: center;
  padding-top: 50px;
  font-weight: 400;
  line-height: 1.3; }

iframe.template-thumbnail {
  width: 650px;
  height: 768px;
  -webkit-transform: scale(0.174);
  -webkit-transform-origin: top left;
  transform: scale(0.174);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden; }

.thumbnail-disable {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 117px;
  height: 138px; }

.template-actions {
  z-index: 3; }

iframe.template-thumbnail::-webkit-scrollbar {
  display: none; }

.template-date {
  font-size: 13px;
  margin-bottom: 5px; }

.label-list {
  margin-bottom: 10px; }

.CodeMirror {
  background-color: #fff; }

.template-code #tab-text {
  padding: 0; }

.template-code #tab-text textarea {
  height: 600px;
  width: 100%;
  background-color: #fff;
  padding: 15px; }

form fieldset .spam-filter-list label {
  margin-top: 5px; }

.codemirror-header {
  width: 100%;
  background-color: #f7f7f7;
  height: 30px;
  padding: 4px 5px 5px 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 900; }

.codemirror-header label {
  font-weight: normal;
  position: relative;
  top: 1px; }

.fullscreen-mode .template-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f2;
  z-index: 1000;
  height: 40px;
  border-bottom: 0;
  padding: 0 5px; }

.fullscreen-mode .template-header h2 {
  margin-top: 10px !important;
  font-size: 20px;
  line-height: 20px;
  height: 40px; }

.fullscreen-mode .template-header .header-buttons {
  margin-top: 5px !important; }

.fullscreen-mode .template-header .header-buttons .btn {
  font-size: 11px;
  padding: 5px;
  line-height: 12px;
  height: auto; }

.fullscreen-mode .codemirror-header {
  position: fixed;
  top: 40px;
  left: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  z-index: 1000; }

.fullscreen-mode #flash div {
  position: fixed;
  top: 41px;
  left: 0;
  padding: 5px 10px;
  z-index: 2000;
  width: 100%;
  border-radius: 0; }

.fullscreen-mode .flash-block.warning {
  display: none; }

.fullscreen-mode #live-preview {
  position: fixed;
  top: 70px;
  right: 0;
  width: 50%;
  background-color: #f1f1f2; }

.fullscreen-mode.live-preview .CodeMirror-fullscreen {
  width: 50%; }

#enter-fullscreen span {
  background: url(/img/icons/fullscreen.png) 3px 3px no-repeat; }

#quit-fullscreen span {
  background: url(/img/icons/fullscreen-exit.png) 3px 3px no-repeat; }

#select-theme {
  width: 110px;
  height: 20px;
  padding-right: 15px;
  background-position: 85px -147px;
  line-height: 18px; }

@-moz-document url-prefix() {
  #select-theme {
    padding: 1px 5px 1px 0; } }

/* adds correct padding for select arrow in firefox */
#quit-live-preview {
  border-color: #5c5c5c;
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5c5c5c), color-stop(25%, #6e6e6e), to(#848484));
  background-image: -webkit-linear-gradient(#5c5c5c, #6e6e6e 25%, #848484);
  background-image: -moz-linear-gradient(top, #5c5c5c, #6e6e6e 25%, #848484);
  background-image: -ms-linear-gradient(#5c5c5c, #6e6e6e 25%, #848484);
  background-image: -o-linear-gradient(#5c5c5c, #6e6e6e 25%, #848484);
  background-image: linear-gradient(#5c5c5c, #6e6e6e 25%, #848484);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#848484', GradientType=0);
  box-shadow: none; }

#quit-live-preview:hover {
  background-position: 0 0;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none; }

#enter-live-preview span {
  background: url(/img/icons/live-preview.png) 3px 3px no-repeat; }

#quit-live-preview span {
  background: url(/img/icons/live-preview-exit.png) 3px 3px no-repeat; }

.fullscreen-mode #content-main .flash-block {
  margin: 0; }

#template-labels .ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*Template Tests---------------------------------------------*/
#screenshot-tests, #screenshot-test {
  overflow-y: auto;
  height: 1200px; }

#screenshot-tests li {
  margin-bottom: 10px; }

#screenshot-tests li:first-child {
  margin-top: 25px; }

#screenshot-tests a img {
  border: 2px solid #ccc; }

#screenshot-tests a:hover img, #screenshot-tests a:focus img, #screenshot-tests a.selected-test img {
  border: 2px solid #0d7cad;
  box-shadow: 0 0 8px #999; }

#screenshot-tests a:hover, #screenshot-tests a:focus {
  text-decoration: none; }

#screenshot-tests .loading {
  display: inline-block;
  padding-right: 12px;
  background: url(/img/loading.gif) right 20px no-repeat;
  padding-top: 10px;
  position: relative;
  z-index: 2;
  color: #727272;
  opacity: .8; }

.template-processing {
  border: 2px solid #ccc;
  display: block;
  margin: -27px auto 0 auto;
  position: relative;
  z-index: 1; }

.sidebar-scroll {
  position: relative; }

.sidebar-scroll:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: -webkit-linear-gradient(top, #f1f1f2, transparent); }

.sidebar-scroll:after {
  content: ' ';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: -webkit-linear-gradient(top, transparent, #f1f1f2); }

/*Template Preview---------------------------------------------*/
.preview-toggle {
  margin-left: 12px;
  display: none; }

.desktop-toggle, .mobile-toggle {
  text-indent: -9999px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 22px 18px;
  width: 56px; }

.desktop-toggle {
  background-image: url(/img/icons/icon-desktop.png); }
  .desktop-toggle.btn-selected {
    background-image: url(/img/icons/icon-desktop-selected.png); }

.mobile-toggle {
  background-image: url(/img/icons/icon-mobile.png); }
  .mobile-toggle.btn-selected {
    background-image: url(/img/icons/icon-mobile-selected.png); }

#preview-container {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #f1f1f2;
  z-index: 1000;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
  transition: opacity 0.2s, visibility 0s 0.2s; }
  #preview-container.overlay-visible {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s; }
  #preview-container #preview-version {
    width: 145px;
    height: 28px;
    background-position: right -143px; }
  #preview-container .media-container {
    opacity: 1; }
  #preview-container .preview-frame {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    background-color: #fff;
    -webkit-transform-style: preserve-3d; }
    #preview-container .preview-frame.active-frame {
      opacity: 1;
      z-index: 2000; }

.preview-frame {
  display: none; }

/* This rule and the next fix overlay issue in iOS that prevents any buttons or links from being clickable */
.overlay-visible .preview-frame {
  display: block; }

#desktop-preview {
  position: relative;
  height: 700px; }
  #desktop-preview .preview-frame {
    border: 1px solid #ccc;
    border-radius: 4px; }

#mobile-preview {
  border: 1px solid #aaa;
  border-radius: 30px;
  width: 340px;
  margin: 0 auto;
  position: relative;
  height: 610px;
  background-color: rgba(226, 223, 223, 0.48); }
  #mobile-preview .preview-frame {
    overflow: hidden;
    margin: 60px 10px;
    border: 1px solid #aaa; }

#mobile-preview:before {
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 100px;
  border: 1px solid #aaa;
  content: ' ';
  position: absolute;
  bottom: 14px;
  left: 145px; }

#mobile-preview:after {
  display: block;
  height: 10px;
  width: 40px;
  border-radius: 100px;
  border: 1px solid #aaa;
  content: ' ';
  position: absolute;
  top: 25px;
  left: 145px; }

@media screen and (max-width: 1100px) {
  #mobile-preview {
    margin-top: 50px; }
  .preview-toggle {
    display: inline-block; }
  .preview-content .col-2-3, .preview-content .col-1-3 {
    width: 100%; }
  #preview-container .media-container {
    opacity: 0;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms; }
    #preview-container .media-container.active-media {
      opacity: 1;
      z-index: 1050; }
  #desktop-preview {
    position: absolute;
    width: 100%; } }

/*Template Tests---------------------------------------------*/
#screenshot-tests, #screenshot-test {
  overflow-y: auto;
  height: 1200px; }

#screenshot-tests li {
  margin-bottom: 10px; }

#screenshot-tests li:first-child {
  margin-top: 25px; }

#screenshot-tests a img {
  border: 2px solid #ccc; }

#screenshot-tests a:hover img, #screenshot-tests a:focus img, #screenshot-tests a.selected-test img {
  border: 2px solid #0d7cad;
  box-shadow: 0 0 8px #999; }

#screenshot-tests a:hover, #screenshot-tests a:focus {
  text-decoration: none; }

#screenshot-tests .loading {
  display: inline-block;
  padding-right: 12px;
  background: url(/img/loading.gif) right 20px no-repeat;
  padding-top: 10px;
  position: relative;
  z-index: 2;
  color: #727272;
  opacity: .8; }

.template-processing {
  border: 2px solid #ccc;
  display: block;
  margin: -27px auto 0 auto;
  position: relative;
  z-index: 1; }

.sidebar-scroll {
  position: relative; }

.sidebar-scroll:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: -webkit-linear-gradient(top, #f1f1f2, transparent); }

.sidebar-scroll:after {
  content: ' ';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: -webkit-linear-gradient(top, transparent, #f1f1f2); }

/*Rules---------------------------------------------*/
.item-block {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 10px; }

.item-block-header {
  background-color: #eaeaeb;
  padding: 10px;
  border-top: 1px solid #e8e8e9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0; }

.item-block-content {
  padding: 10px;
  border-radius: 0 0 5px 5px; }

.item-block-header p {
  font-size: 12px; }

.item-block .report-stat {
  background: transparent;
  padding: 0; }

.drag-block {
  padding: 10px 10px 10px 30px;
  position: relative;
  overflow: hidden; }

.drag-handle {
  display: block;
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #d6d6d6 url(/img/icons/drag-handle.png) 50% 50% no-repeat;
  border-right: 1px solid #ccc;
  cursor: move; }

.rule-name {
  margin-left: 0 !important; }

.rule-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0; }

.rule-details p {
  margin-bottom: 10px; }

.rule-details .statement {
  font-size: 18px;
  font-weight: bold; }

.rule-details .conditions {
  margin-bottom: 10px; }

.rule-details .rule-options {
  float: left;
  margin-right: 10px; }

.rule-details .rule-options:last-child {
  margin-right: 0; }

.rules-list .ui-state-highlight {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  height: 71px;
  border: 1px solid #ddd; }

.rules-list .drag-block {
  overflow: visible; }

.rules-list .show-details, .rules-list .hide-details {
  position: relative;
  top: -9px;
  margin-top: 8px;
  display: inline-block; }

.rules-list .button-split {
  margin-left: 15px; }

.rule-details select {
  width: 150px; }

.rule-details .if-statement select {
  width: 120px;
  margin-left: 2px;
  position: relative;
  top: -3px; }

.rule-details .conditions fieldset {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative; }

.rule-details .conditions fieldset:last-child {
  border-bottom: none; }

.rule-details .actions fieldset {
  position: relative; }

.rule-details .actions fieldset + fieldset {
  margin-top: 10px; }

.rule-details .add-remove {
  position: absolute;
  right: 0;
  top: 7px; }

.rule-details .add-remove button {
  height: 20px;
  width: 20px;
  border-radius: 20px;
  padding: 0; }

.add-remove button .icon {
  width: 0.6em;
  fill: #666;
  stroke: #666; }

.add-remove button:hover .icon {
  fill: #333;
  stroke: #333; }

.rule-details .condition-value input[type="text"] {
  width: 325px; }

.add-remove .remove-rule {
  top: 0;
  right: -50px; }

.add-remove .add-rule {
  top: 0;
  right: -20px; }

.rule-count {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px; }

.rule-count span, .rule-match-count {
  font-size: 16px;
  font-weight: bold; }

input.sendto-arg-sms {
  width: auto; }

h4 .small-meta {
  letter-spacing: 0; }

/* Alerts---------------------------------------*/
.rule-details .sendto-arg-email select {
  width: 312px; }

.rule-details input[type="text"] {
  width: inherit; }

.rule-details label, .rule-details .alert-unit {
  font-weight: normal;
  color: #333;
  font-size: 15px; }

.rule-details .row[style="display: block;"] + .row[style="display: block;"] {
  margin-top: 10px; }

/* for send limit - percent alert */
select#create-alert {
  margin-top: 0; }

.alert-label {
  text-transform: none; }

.actions {
  text-transform: lowercase; }

@media screen and (max-width: 780px) {
  #alert-form select, #alert-form input {
    margin-top: 5px; } }

/*AB Test---------------------------------------------*/
.splittest-name {
  margin-left: 0 !important; }

.splittest-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0; }

.splittest-details select {
  width: 150px; }

.splittest-details .test-percentage {
  width: 75px; }

.splittest-details #group-number {
  width: 60px; }

.splittest-details .splittest-groups select {
  width: 350px; }

.splittest-groups {
  margin-left: 30px; }

.steps {
  font-size: 15px;
  margin-bottom: 20px; }

.numbered-step {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #575757;
  color: #f1f1f2;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  margin-right: 5px; }

.best-stat {
  background: url(/img/icons/star.png) -2px 50% no-repeat;
  padding-left: 24px; }

.chart.no-data {
  background: url(/img/no-data-graph.png) 50% 50% no-repeat; }

#open-chart.no-data, #click-chart.no-data {
  width: 85%;
  background-position: 50% 40%; }

/*Account---------------------------------------------*/
#reputation-history {
  position: relative;
  width: 100%; }

#reputation-history .x-axis {
  margin-top: -30px; }

#reputation-history .y-axis {
  position: absolute;
  top: 0;
  right: 0;
  width: 55px; }

#reputation-history .y-axis-label {
  display: block;
  font-size: 11px;
  border-left: 5px solid #4ad32e;
  margin-bottom: 1px;
  padding-left: 4px; }

#reputation-history .label-poor {
  border-color: #e82054;
  line-height: 23px; }

#reputation-history .label-good {
  line-height: 24px; }

#reputation-history .label-excellent {
  line-height: 19px; }

#reputation-history .chart-outer {
  margin-right: 55px; }

#reputation-history .chart {
  height: 103px;
  width: 100%; }

.company-info {
  font-size: 0.8em;
  line-height: 1.25em; }

#cc-expiry {
  margin-bottom: 25px; }

#cc-expiry select {
  width: 95px; }

.credit-cards {
  margin: 20px 10px 0 0; }

#account-stats {
  overflow: auto; }

.plan-info {
  overflow: auto; }

.pricing-info {
  border-top: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  padding: 10px 0; }

.pricing-info td {
  padding: 5px 0;
  vertical-align: baseline;
  border-bottom: none !important; }

.pricing-info tr:hover {
  background-color: transparent !important; }

.price .amount {
  font-size: 20px; }

.email-amount, .price {
  font-size: 15px; }

.email-amount span {
  font-weight: bold; }

.account .stat-block {
  padding: 0; }

.account .account-info {
  background: none;
  padding: 0;
  margin: 0; }

.account .account-info li {
  background: none;
  padding-left: 0; }

.account .account-info li, .account .account-info li .stat, .account .account-info li .label {
  color: #575757; }

.account .account-info li .label {
  font-size: 15px; }

.account .account-info .reputation {
  margin-left: 0; }

.account .meter {
  background: #d9dada;
  height: 7px;
  padding-top: 0; }

.account-balance .stat-block {
  padding: 15px 20px 10px 0; }

.account .stat {
  margin-bottom: 0; }

.account .reputation {
  margin-left: 0;
  background-position: left 50%; }

.account .sending-stats {
  display: block;
  margin-bottom: 10px; }

.account .meter {
  margin-top: 8px; }

.account-balance .stat {
  font-size: 30px; }

.account-balance label {
  width: 210px;
  float: none;
  display: inline-block; }

.account-balance .sublabel {
  padding-left: 10px;
  font-weight: normal;
  text-transform: none; }

.account-balance select {
  width: 100px; }

.account-balance p {
  color: #575757; }

.add-funds {
  margin-left: 10px; }

#store_contentdays {
  width: 75px; }

#neighborhood .neighborhood-meter {
  width: 15px;
  height: 65px;
  margin: 0 auto;
  position: relative; }

.neighborhood-meter:before {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 15px;
  height: 13px;
  background-color: #4ad32e; }

.neighborhood-meter.top20:before {
  top: 0; }

.neighborhood-meter.uppermid20:before {
  top: 13px; }

.neighborhood-meter.mid20:before {
  top: 26px; }

.neighborhood-meter.lowermid20:before {
  top: 39px;
  background-color: #e82054; }

.neighborhood-meter.bottom20:before {
  top: 52px;
  background-color: #e82054; }

input[type="text"].yubikey-field {
  width: 500px; }

.sending-costs {
  margin: 0 -12px -12px -12px;
  padding-bottom: 15px;
  background-color: #008cc0;
  border-top: 1px solid #929293; }

.sending-costs table {
  border-top: 1px solid #4dafd3;
  padding-top: 9px;
  padding-bottom: 10; }

.sending-costs td {
  border: none;
  font-size: 15px;
  line-height: 20px;
  color: #fbfbff;
  padding: 0 15px 9px 15px;
  vertical-align: baseline; }

.sending-costs td.cost {
  font-size: 20px; }

.sending-costs .total {
  border-top: 1px solid #00709a; }

.sending-costs .total td {
  line-height: 30px;
  border-top: 1px solid #4dafd3;
  padding-top: 15px; }

.sending-costs .total td.cost {
  font-size: 30px; }

.sending-costs tr:hover {
  background: transparent !important; }

#sign-up {
  margin: 0 auto;
  display: block;
  width: 300px; }

.label-detail {
  text-transform: none;
  font-weight: normal; }

.print-button {
  text-indent: -9999px;
  padding-left: 20px;
  background: url(/img/icons/print.png) left 50% no-repeat; }

.ip-list li {
  margin-top: 8px; }

.ip-list li:last-child {
  border-bottom: 0; }

.ip-list li p {
  font-size: 13px; }

.ip-list li p.dedicated-ip {
  padding-top: 5px;
  font-size: 15px; }

.ip-list .batch-error {
  word-break: normal; }

#pool-name {
  width: 50%; }

/* Billing Info/Add Funds */
.cc-icon {
  background-image: url("/img/creditcards.svg");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  width: 31px;
  height: 20px;
  margin-left: 5px;
  position: absolute; }

/* icons for static info view */
.visa .cc-icon {
  background-position: 0px 0px; }

.mastercard .cc-icon {
  background-position: -42px 0px; }

.amex .cc-icon {
  background-position: -85px 0px; }

.discover .cc-icon {
  background-position: -128px 0px; }

/* icons for cc input box */
.cc-wrap {
  position: relative; }

#cc-icon {
  position: absolute;
  right: 5px;
  top: 6px;
  background-image: url("/img/creditcards.svg");
  background-repeat: no-repeat;
  display: none;
  width: 31px;
  height: 20px;
  background-size: cover;
  background-position: -1000px 0px; }

#cc-icon.visa {
  background-position: 0px 0px; }

#cc-icon.mastercard {
  background-position: -42px 0px; }

#cc-icon.amex {
  background-position: -85px 0px; }

#cc-icon.discover {
  background-position: -128px 0px; }

@media screen and (max-width: 1230px) {
  .pricing-info {
    -webkit-transform: scale(0.85);
    -webkit-transform-origin: top left;
    -moz-transform: scale(0.85);
    -moz-transform-origin: top left;
    transform: scale(0.85);
    transform-origin: top left; }
  .how-billing .below30 {
    margin-bottom: 0 !important; } }

@media screen and (max-width: 1060px) {
  .pricing-info {
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75); }
  .how-billing .below30 {
    margin-bottom: -15px !important; } }

/*Settings---------------------------------------------*/
.smtp-settings li span {
  text-align: left;
  display: inline-block;
  font-size: 15px;
  line-height: 34px;
  font-weight: bold;
  color: #333;
  padding-left: 10px;
  margin-left: 5px; }

.smtp-settings li span:first-child {
  text-align: right;
  width: 130px;
  color: #737373;
  padding-left: 0;
  margin-left: 0; }

.smtp-settings li button {
  display: inline-block;
  opacity: 0;
  margin-bottom: 0;
  padding: 6px 10px;
  position: relative;
  top: -2px; }

.smtp-settings li:hover button, .copybtn.zeroclipboard-is-hover {
  opacity: 1; }

#create-alert {
  width: 48.93617020799999%;
  margin-top: -4px;
  text-align: left; }

.details-visible td {
  border-bottom: transparent; }

.api-keys h5 {
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.api-keys p {
  font-size: 12px; }

.api-keys > li li {
  margin: 0; }

.allowed-calls ul li {
  margin: 0 0 0 10px;
  font-size: 12px; }

p.limited-key {
  background: url(/img/icons/lock-16.png) top left no-repeat;
  padding-left: 20px; }

.notice {
  background: #ddd;
  color: #575757;
  overflow: hidden;
  padding: 15px;
  margin-bottom: 1em;
  border-radius: 4px; }

.dkim-status, .spf-status, .dkim2-status, .verified-status, .dmarc-status {
  margin-bottom: 10px;
  display: block;
  line-height: 16px;
  padding-top: 2px; }

.dns-valid {
  background: url(/img/valid.png) left 50% no-repeat;
  padding-left: 20px; }

.dns-missing {
  background: url(/img/missing.png) left 50% no-repeat;
  padding-left: 20px; }

.dns-error {
  background: url(/img/error.png) left 50% no-repeat;
  padding-left: 20px; }

.dns-help {
  text-align: center; }

.dns-testing {
  display: inline-block;
  padding-right: 12px;
  background: url(/img/loading.gif) right 12px no-repeat; }

#dns-error {
  background: url(/img/error.png) left 2px no-repeat;
  padding-left: 25px;
  padding-top: 0;
  font-size: 14px; }

code.dns-txt {
  white-space: nowrap; }

code.dns-txt-current {
  white-space: nowrap; }

code.vanilla {
  border: none;
  background-color: rgba(255, 255, 255, 0.3); }

#domains td {
  padding-bottom: 20px; }

#verified-domains .small-meta {
  margin-top: 5px; }

#verified-domains td {
  padding-bottom: 20px; }

input#verify-localpart {
  width: 50%; }

.apikey {
  white-space: nowrap; }

.auth-valid {
  background-color: #88d391;
  padding: 5px;
  border-radius: 5px; };

.auth-legacy {
  background-color: #eae8a8;
  padding: 5px;
  border-radius: 5px; };

.auth-missing {
  background-color: #f9939c;
  padding: 5px;
  border-radius: 5px; };

.auth-status {
  margin-top: 10px; };

/*Subaccounts---------------------------------------------*/
.subaccount-details h3 {
  font-size: 24px; }

.subaccount-details .stat-block {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px; }

.subaccount-details .sending-stats .stat-block {
  min-height: 120px; }

.subaccount-details .account-status span, .subaccount-details .account-status a, .subaccount-details .user-actions {
  margin-left: 10px; }

.subaccount-details .account-status a {
  position: relative;
  top: -4px; }

.subaccount-details .sending-stats {
  padding-right: 0; }

.subaccount-details .sending-stats .stat {
  font-size: 24px;
  color: #333; }

.subaccount-details .reputation {
  background-position: left 50%;
  margin-left: 0; }

tr.status-paused {
  background-color: #ffc; }

tr.status-disabled {
  background-color: #fcc; }

#webhooks-data {
  overflow: auto; }

.hook-error td {
  padding-bottom: 0;
  border-bottom: 0; }

.hook-error + tr td {
  padding-top: 0; }

.batch-error {
  background: url(/img/error.png) top left no-repeat;
  padding-left: 25px;
  color: #DD624B;
  font-size: 13px;
  margin-bottom: 5px;
  word-break: break-all; }

.webhook-details {
  border-radius: 5px;
  border: 1px solid #ccc; }

.webhook-details p {
  font-size: 13px; }

.webhook-details .linear-list {
  padding-left: 5px; }

.webhook-details .linear-list li {
  background-color: #f2f2f2;
  border: 1px solid #c3c3c3;
  border-top: 1px solid #d4d4d4;
  box-shadow: inset 0 1px 0 #fff;
  padding: 0 8px 1px 8px;
  position: relative;
  height: 21px;
  margin: 0 10px 5px 0; }

.webhook-details .small-meta {
  font-size: 11px; }

.webhooks-titlebar {
  background-color: #eaeaeb;
  padding: 5px 10px;
  border-top: 1px solid #e8e8e9;
  border-radius: 5px 5px 0 0; }

.webhooks-titlebar h5 {
  font-size: 14px;
  margin-top: 5px;
  letter-spacing: 0; }

.webhooks-info {
  padding: 10px;
  border-radius: 0 0 5px 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid #ccc; }

.webhooks-info .stat {
  font-size: 18px;
  line-height: 18px; }

#webhooks-data .button-group li {
  float: left; }

/*Error Pages---------------------------------------------*/
html.error-page {
  background: #3F3E40; }

.error-page body {
  background-color: transparent;
  max-width: 550px;
  margin: 0 auto;
  color: #f1f1f2;
  text-align: center; }

.error-page h1 {
  background: url(/img/mark-errorpage.png) top left no-repeat;
  height: 58px;
  width: 66px;
  margin: 35px auto 30px auto; }

.error-page h2 {
  color: #f1f1f2;
  font-size: 36px;
  margin: 10px 0 15px 0; }

.error-page p {
  color: #f1f1f2;
  font-size: 18px;
  margin-bottom: 25px; }

.icon__information {
  background-image: url("/img/icons/info.svg");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle; }

.icon__information:hover {
  cursor: pointer; }

/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
  border-radius: 5px;
  background: #4c4c4c;
  background: rgba(0, 0, 0, 0.85);
  color: #fff; }

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  padding: 8px 10px;
  overflow: hidden;
  max-width: 400px; }

.tooltipster-default .tooltipster-content p {
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 0; }

.tooltipster-content hr {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin: 5px 0; }

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
  /* border-color: ... !important; */ }

/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
  cursor: help;
  margin-left: 4px; }

/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
  padding: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  z-index: 9999999;
  pointer-events: none;
  width: auto;
  overflow: visible; }

.tooltipster-base .tooltipster-content {
  overflow: hidden; }

/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; }

.tooltipster-arrow span, .tooltipster-arrow-border {
  display: block;
  width: 0;
  height: 0;
  position: absolute; }

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid;
  bottom: -8px; }

.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-top: 9px solid;
  bottom: -8px; }

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid;
  top: -8px; }

.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 9px solid;
  top: -8px; }

.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
  left: 0;
  right: 0;
  margin: 0 auto; }

.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
  left: 6px; }

.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  left: 5px; }

.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
  right: 6px; }

.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
  right: 5px; }

.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 8px solid;
  top: 50%;
  margin-top: -7px;
  right: -8px; }

.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 9px solid;
  margin-top: -8px; }

.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 8px solid;
  top: 50%;
  margin-top: -7px;
  left: -8px; }

.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-right: 9px solid;
  margin-top: -8px; }

/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -ms-transition-property: opacity;
  transition-property: opacity; }

.tooltipster-fade-show {
  opacity: 1; }

.tooltipster-grow {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-backface-visibility: hidden; }

.tooltipster-grow-show {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-swing {
  opacity: 0;
  -webkit-transform: rotateZ(4deg);
  -moz-transform: rotateZ(4deg);
  -o-transform: rotateZ(4deg);
  -ms-transform: rotateZ(4deg);
  transform: rotateZ(4deg);
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform; }

.tooltipster-swing-show {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); }

.tooltipster-fall {
  top: 0;
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  transition-property: top;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-fall.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  top: 0px !important;
  opacity: 0; }

.tooltipster-slide {
  left: -40px;
  -webkit-transition-property: left;
  -moz-transition-property: left;
  -o-transition-property: left;
  -ms-transition-property: left;
  transition-property: left;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); }

.tooltipster-slide.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  left: 0px !important;
  opacity: 0; }

/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
  opacity: 0.5;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1); }

.tipsy {
  font-size: 10px;
  position: absolute;
  padding: 5px;
  z-index: 100000; }

.tipsy-inner {
  background-color: #000;
  color: #FFF;
  max-width: 200px;
  padding: 5px 8px 4px 8px;
  text-align: center; }

/* Rounded corners */
.tipsy-inner {
  border-radius: 3px; }

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
.tipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border: 5px dashed #000; }

/* Rules to colour arrows */
.tipsy-arrow-n {
  border-bottom-color: #000; }

.tipsy-arrow-s {
  border-top-color: #000; }

.tipsy-arrow-e {
  border-left-color: #000; }

.tipsy-arrow-w {
  border-right-color: #000; }

.tipsy-n .tipsy-arrow {
  top: 0px;
  left: 50%;
  margin-left: -5px;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-nw .tipsy-arrow {
  top: 0;
  left: 10px;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-ne .tipsy-arrow {
  top: 0;
  right: 10px;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-s .tipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 10px;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-se .tipsy-arrow {
  bottom: 0;
  right: 10px;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent; }

.tipsy-e .tipsy-arrow {
  right: 0;
  top: 50%;
  margin-top: -5px;
  border-left-style: solid;
  border-right: none;
  border-top-color: transparent;
  border-bottom-color: transparent; }

.tipsy-w .tipsy-arrow {
  left: 0;
  top: 50%;
  margin-top: -5px;
  border-right-style: solid;
  border-left: none;
  border-top-color: transparent;
  border-bottom-color: transparent; }