/*
 * Additional styles for the messageheader component.
 *
 */

.indent-right {
  margin-left: 40px;
}

.mh-foot-warning {
  color: #388e3c;
  font-size: 12px;
}

.mh-oauth-warning {
  font-size: 1.3em;
  width: 600px;
}

.mh-table {
  width: 100%;
  margin-bottom: 35px;
}

.mh-summary-table th {
  background-color: inherit;
  text-align: right;
}

.mh-lineno {
  color: #ccc;
  padding:0.3em;
  font-size: 0.9em;
}

.mh-dim {
  color: #888;
  font-weight: bold;
  font-size: 0.9em;
}

.mh-google {
  color: #060;
}

.mh-note {
  color: green;
  margin: 0.25em;
}

.mh-arrow {
  color: gray;
  font-size: 1.6em;
  line-height: 85%;
}

.mh-arrow-black {
  color: black;
}

.mh-tables {
  margin-bottom: 35px;
  overflow-x: auto;
}

/*
 * Needed to make scrollbars appear on webkit browsers for trackpad users
 */

.mh-tables::-webkit-scrollbar {
  -webkit-appearance: none;
}

.mh-tables::-webkit-scrollbar:horizontal {
    height: 12px;
}

.mh-tables::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}

.mh-auth-pass, .mh-auth-success {
  color: green;
  font-weight: bold;
}

.mh-auth-permfail, .mh-auth-hardfail, .mh-auth-softfail, .mh-auth-fail {
  color: red;
  font-weight: bold;
}

.mh-auth-tempfail, .mh-auth-neutral {
  color: #a50;
  font-weight: bold;
}

.raw-header-input {
  width: 100%;
}

.show-input-grid {
  background-color: #fafafa;
  padding: 8px;
}

.help-aside, .help-aside ul {
  font-size: 13px;
}

#raw_msgs {
  font-size: 13px;
}

.mh-table td {
  padding: 12px 8px 0;
}

.mh-first-col {
  font-weight: bold;
}

.mh-attachment-filename {
  font-weight: bold;
}

.mdl-data-table th {
  padding-left: 8px;
}

.raw-message-wrapper {
  background-color: #fafafa;
  color: #1b5e20;
  font-family: 'courier';
  overflow-x: auto;
  padding: 8px 15px;
}

.mh-feedback {
  font-size: 13px;
}

#toggle-raw {
  margin-bottom: 8px;
}

td.mdl-data-table__cell--non-numeric pre {
  margin: 0;
}


.custom-page-content {
  margin: auto;
  max-width: 90vw;
  padding-bottom: 100px;
}

.raw-displayed #show-raw, #hide-raw {
  display: none;
}

.raw-displayed #hide-raw, #show-raw {
  display: inline-block;
}

#back-button {
  text-decoration: none;
}

.analyze-button {
  margin-bottom: 8px;
}

#example-screen {
  background-image: url('/apps/messageheader/static/example_2.png');
  background-position-y: -145px;
  background-repeat: no-repeat;
  background-size: 734px 550px;
  border-left: 3px solid rgba(120,144,156, 0.57);
  border-right: 3px solid rgba(120,144,156, 0.57);
  height: 400px;
  margin-top: 20px;
  overflow-x: visible;
  width: 734px;
}

#example-gradient-top {
  background: -webkit-linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.1));
  background: -o-linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.1));
  background: -moz-linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.1));
  background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.1));
  height: 230px;
}
#example-gradient-bot {
    background: -webkit-linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.5));
    background: -o-linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.5));
    background: -moz-linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.5));
    background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.5));
    height: 90px;
    margin-top: 80px;
}

.mdl-grid--nesting{
  margin: 0 -8px;
  padding: 0;
}