:root {
  --headerblue: rgba(37, 136, 208,1);
  --buttonblue: #2b90d9;
  --filterblue: #bbd0df;
  --filterblueborder: #d4dbe1;
}

/* navpanel */

.navigation-panel__list-panel, .column-link--transparent {
  background:white;
  color: var(--buttonblue);
  font-size:100%;
  margin:10px;
  padding:5px;
  width:90%;
  border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;}

.navigation-panel__logo {display:none;}

.navigation-panel {margin-top:0px;}

.column-link.active {color:black;}

.column-link--transparent > span {padding-right:5px;}

.navigation-panel__menu > hr {border: 1px solid var(--buttonblue); border-radius:1px;}

/* fill space in posting drawer better */

.column .compose-form, .layout-multiple-columns .compose-form {padding: 5px; gap:16px;}

/* custom gradient background */

.columns-area, .public-layout {background: #315a99; /* Old browsers */
background: -moz-linear-gradient(top, #315a99 0%, #315a99 12%, #53cbf1 77%, #d4dbd6 95%, #d4dbd6 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #315a99 0%,#315a99 12%,#53cbf1 77%,#d4dbd6 95%,#d4dbd6 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #315a99 0%,#315a99 12%,#53cbf1 77%,#d4dbd6 95%,#d4dbd6 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#315a99', endColorstr='#d4dbd6',GradientType=0 ); /* IE6-9 */ }

/* hide elephant */
  .drawer__inner__mastodon
  {
    display: none;
  }

/* white column backgrounds */

  .column > .scrollable
  {
    background: rgba(255,255,255,1);
    border-radius: 0 0 0.25rem 0.25rem;
    color: rgba(51, 51, 51,1);
  }

/* headerblue headers */

  .column-header
  {
    background: rgba(37, 136, 208,1);
    border-bottom: 1px solid #ccc;
    border-radius: 0.25rem 0.25rem 0 0;
  }

  .drawer__header
  {
    background: var(--headerblue);
    border-bottom: 1px solid #ccc;
    border-radius: 0.25rem 0.25rem 0 0;
  }

/* honk */

.compose-form__submit > button.button {
  visibility: hidden;
}
.compose-form__submit > button.button:after {
  content:'HONK!'; 
  visibility: visible;
  display: block;
  position: absolute;
align-items: center;
  background-color: var(--headerblue);
    border: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    gap: 6px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    padding: 7px 70px;
    position: relative;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    margin-left: -30px;
}

/* transparent drawer */

.drawer__inner {background: -moz-linear-gradient(top, #315a99 0%, #315a99 12%, #53cbf1 77%, #d4dbd6 95%, #d4dbd6 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #315a99 0%,#315a99 12%,#53cbf1 77%,#d4dbd6 95%,#d4dbd6 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #315a99 0%,#315a99 12%,#53cbf1 77%,#d4dbd6 95%,#d4dbd6 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#315a99', endColorstr='#d4dbd6',GradientType=0 ); /* IE6-9 */ }

/* fuck this ugly border */

.drawer__header, .drawer__pager, .column-header, .scrollable, .account__section-headline, .notification__filter-bar  {border:0 !important;}

/* notification filter bar */
.notification__filter-bar {background:var(--buttonblue);}

/* fix cws */
.content-warning:after, .content-warning:before {background:none !important;}
.content-warning {background:none !important; border:0 !important;}
.content-warning > .link-button {color: #fff; background:var(--headerblue); padding-top: 2px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; border-radius:3px; font-size:0.7em; margin-top:-5px; margin-bottom:-5px;}
.content-warning > .link-button:hover {text-decoration:none; background:var(--buttonblue);}

div.content-warning:not(.content-warning--filter) .link-button span {
    display: none;
}

div.content-warning:not(.content-warning--filter) .link-button::before {
    content: "show/hide"
}

/* context menu */

.dropdown-menu {background:white;}

/* account name in posting drawer */

.navigation-bar .account, .reply-indicator {
        border: 1px solid var(--headerblue);
        border-radius: 10px;
        padding: 10px;
		  background:white;}

/* burger menu next to account name */

.navigation-bar > button.icon-button {background:white; border:1px solid var(--headerblue);}

/* compose form */

.compose-form__highlightable {border: 1px var(--headerblue) solid;}

/* thinner columns */

.column {width:330px;}
.drawer {width:330px;}

.status--in-thread .status__content {
        margin-inline-start: 46px;
        width: calc(100% - 80px);}

.status--in-thread .status__action-bar {width: calc(100% - 80px);}

/* header text colours */

.column-header .column-header__back-button, .column-header__title, .column-header__button , .drawer__tab > .icon {color: #fff}
.column-header .column-header__back-button:hover, .column-header__button:hover, .drawer__tab > .icon:hover  {color:lightblue;}

/* notifications margins */

.notification-ungrouped .status__content{
        margin-inline-start: -3px;
        width: calc(100% - 20px);}

.notification-ungrouped .status__action-bar {
        margin-inline-start: -3px;
        width: calc(100% - 20px);}

.notification-ungrouped .content-warning {
        margin-inline-start:0px;
        width:100%;}

.notification-group, .notification-ungrouped {padding:16px 5px;}

/* more space for replying to toot */

.reply-indicator__content {display:block; max-height: 200px;}

/* compose form buttons */

.compose-form__dropdowns .dropdown-button {border:1px solid var(--buttonblue); color: var(--buttonblue);}
    .compose-form__actions .icon-button {
        color: var(--buttonblue);}

/* column back button */

    .column-back-button {
        background: var(--background-border-color);}

/* make filtered posts look different */

.content-warning--filter {background:azure !important; border:1px var(--buttonblue) solid !important; border-radius:5px; margin:5px;}

.content-warning--filter > p > span {padding-top:25px !important;}

.content-warning--filter > button.link-button:hover {background:red;}

/* status card images */
.status-card__image {width:50px; background: var(--filterblue);}

.status--in-thread .status-card {width:calc(100% - 90px);}

.status-card__content {padding:10px;}