body.action-none, body.action-show, body.action-folders, body.action-identities, body.action-responses,
body.action-preferences, body.action-compose, body.action-login {
  background: #3f709b url('../images/trh2020_clouds_bg.jpg') center no-repeat;
  background-size: cover;
}

#layout {
  padding: 0 2% 0 0;
  /* padding bottom moved to margin-bottom below as it was obstructing the gradient */
}

#layout-sidebar, #layout-list, #layout-content {
  margin-bottom: 2%;
}

#layout > #layout-content {
  margin-top: 45px;
}

.trh-about-modal {
  background: #eeeeee url('../images/trh2020_clouds_bg.jpg') center no-repeat;
  background-size: cover;
  min-height: 400px;
  color: white;
}

#trh_header {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  min-height: 48px;
  background-color: transparent;
  padding-top: 2px;
  z-index: 100;
}

.mailbox {
background-color: #f9f9f9;
}

html.dark-mode .mailbox {
background-color: #111111;
}

#messagelist > tbody > tr:nth-of-type(odd) {
  background-color: #ecf0f2;
}

html.dark-mode #messagelist > tbody > tr:nth-of-type(odd) {
  background-color: #494c63;
}

html.dark-mode #messagelist > tbody > tr:nth-of-type(even) {
  background-color: #323745;
}

.formcontent, .formbuttons {
  border-radius: 10px;
}

html:not(.dark-mode) .formcontent, html:not(.dark-mode) .formbuttons {
  background-color: white;
}

#layout-content {
  /*placeholder if required!*/
  /*background-color: white !important;*/
  /*margin: 10px 10px 10px 10px !important;*/
}

html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar, html.dark-mode #layout > div > .footer {
  background-color: #21292c;
}

@media screen and (min-width: 481px) {


  #taskmenu .action-buttons a, #taskmenu a.logout, #taskmenu span.inner, #taskmenu span.inner:hover {
    /*#taskmenu .action-buttons a, #taskmenu a.logout {*/
    color: #fff !important;
  }

  #taskmenu a.selected, #taskmenu a.selected:hover, #taskmenu a:hover, .compose:hover {
    color: #f57c00 !important;
    background: transparent !important;
  }

  #layout-menu {
    background-color: transparent;
  }

  #layout-menu > .popover-header {
    display: none;
  }

  #trh_close_btn_hack {
    /* content: "\f00d"; */
    /* border: 0; */
    color: #2c363a;
    text-decoration: none;
    left: 0;
    bottom: -5px;
    position: absolute;
    padding: .25rem .5rem;
    margin: 15px .5rem;
  }

  #trh_close_btn_hack:before {
    content: "\f00d";
    line-height: 1.5rem;
    margin: 0 !important;
    width: 1.18em;
    height: 1em;
    font-family: 'Icons';
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    text-align: center;
    speak: none;
  }

}

.trh_heading {
  margin-left: 4px;
  vertical-align: bottom;
}

.trh_header_text {
  color: white;
  margin-left: 0px;
  font-size: 120%;
}

.trh_responsive_header {
  display: none;
}

.toolbar {
  margin-top: 50px;
}

.trh_login_logo {
  width: 160px;
  margin-top: 20px;
  margin-bottom: -60px;
}

/*.compose span.inner {*/
/*color: #eeeeee;*/
/*}*/

.listbox {
  margin-top: 45px;
}

.about {
  background-color: transparent !important;
}

.logout {
  background-color: transparent !important;
}

.special-buttons {
  padding-bottom: 2%; /* needs to match whatever is set for #layout (see above) */
  background-color: transparent !important;
}

@media (min-width: 720px) {
  .trh_responsive_header {
    display: inline-block;
    font-size: 67%;
  }

  .trh_login_logo {
    width: 240px;
    margin-top: 6%;
    margin-bottom: -160px;
  }
}

/* trying to shrink the gap between from and subject */
.messagelist td.subject span {
  line-height: 1.3rem;
  margin-bottom: 2px;
}

.messagelist tr.unread td.subject span.subject,
.messagelist tr.deleted td.subject span.subject,
.messagelist tr.focused td.subject span.subject,
.messagelist tr td.subject span.subject {
  max-height: 18px;
}

.messagelist td.flags > span {
  height: 1em !important;
}

.messagelist span.attachment span, .messagelist span.flagged:before, .messagelist tr.flaggedroot:not(:hover) span.unflagged:before, .messagelist tr:hover span.unflagged:before {
  font-size: 1em;
}

.messagelist td.subject span.fromto,
.messagelist td.subject span.date {
  margin-top: 2px;
}

.messagelist td.flags > span.flag {
  margin-top: -10px;
  margin-bottom: 2px;
}

/**}**/

@media (max-width: 720px) {
  .trh_header_text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  #trh_header {
    text-align: center;
  }

  #trh_header img {
    max-width: 320px;
    height: auto;
  }

  .trh_header_text {
    margin-top: 3px;
  }


  #layout {
    padding-left: 2%;
  }

}

@media (max-width: 320px) {
  #trh_header img {
    max-width: 240px;
    height: auto;
  }

  .trh_header_text {
    margin-top: 7px;
  }

  .trh_heading {
    margin-right: 6px;
  }

}

.messagelist .message .subject {
  font-size: 1rem;
  color: #3f709b;
  line-height: 0.7rem;
}

.messagelist .message.unread .subject {
  font-weight: normal !important;
}

.messagelist .message .adr {
  font-size: 0.9rem;
  color: #333333;
  line-height: 0.6rem;
}

.messagelist .message.unread .adr {
  font-weight: bold;
}

/* Override sender address colour in dark mode */
html.dark-mode .messagelist .message .adr {
  color: #bbbbbb;
}

html:not(.dark-mode) li.selected, html:not(.dark-mode) li.selected > a, html:not(.dark-mode) tr.selected td {
  background-color: #ccd5dc !important;
}

.messagelist tr.flagged td, .messagelist tr.flagged td.subject span.subject a, .messagelist tr.flagged td.subject span.date, .messagelist tr.flagged td.subject span.fromto {
  color: #f57c00 !important;
}

.form-control:focus {
  color: #2c363a;
  border-color: #f57c00;
  box-shadow: 0 0 0 .2rem rgba(245, 124, 0, 0.25);
}

.btn-primary {
  color: #fff !important;
  background: #f57c00 !important;
  border-color: #f57c00 !important;
}

.btn-primary:hover, .btn-primary:focus {
  background: #dc6f00 !important;
  border-color: #d16a00 !important;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  background: #c26200;
  border-color: #b85d00;
}

#login-form {
  top: 25vh;
  max-width: 400px;
}

#login-footer {
  margin-top: 200px;
  color: white !important;
}

a {
  color: #f57c00;
}

/* Switch colours */
.custom-switch .custom-control-input:checked~.custom-control-label::before,
.custom-switch .custom-control-input:checked:disabled~.custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
  border-color: #f57c00;
  background-color: #f57c00;
}

.custom-file-input:focus~.custom-file-label,
.custom-switch .custom-control-input:focus~.custom-control-label:before,
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(245,124,0,0.25);
}

.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #f57c00;
}

/* Dark/Light mode button background when in dark mode */
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background-color: transparent;
}

/* Popup menu header (touch UI) */
.popover-header {
  background-image: url(../images/trh2020_clouds_bg.jpg);
  background-size: cover;
}

/* Compose button (touch UI) */
.floating-action-buttons a.button {
  background: #f57c00;
  box-shadow: 0 0 5px 5px #ffd4a8;
}

/* Override list element colours in dark mode */
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td {
  color: #f57c00;
}
/* Dark mode: Change things in the message list that would have been blue to orange */
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a, html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
  color: #f57c00;
}

/* Message item left border - override to orange */
html:not(.touch) .listing li>a:focus, html:not(.touch) .listing.focus tbody tr.focused>td:first-child, html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td {
  border-left: 2px solid #ffae5c;
}

/* Override colours for HTML emails */
html.dark-mode .message-htmlpart {
  color: #c5d1d3;
  background-color: #21292c;
}

html.dark-mode .message-htmlpart blockquote {
  color: #568ad5;
  border-right: 2px solid #568ad5;
}

html.dark-mode .message-htmlpart a {
  color: #c56200;
}