@import url("/Service/Themes/base-layout.css");

:root {
  --black: #000;
  --white: #fff;
  --gray-border: #35485e;
  --text-color: #004;
  --link-color: #1d71cf;
  --blue-border: #99f;
  --medium-blue: #ccf;
  --light-blue: #e0e0ff;
  --faint-blue: #eef;
  --barely-blue: #f6f6ff;
  --shade: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 5%));
  --header: linear-gradient(to bottom, #424242, #010101);
}

body {
  background: url("img/bg.jpg");
  color: var(--text-color);
}

a {
  &:active,
  &:visited,
  &:link {
    color: var(--link-color);
    text-decoration: none;
  }

  &:hover {
    text-decoration: underline;
  }

  /* Member/Group Specific */
  &.mgroup2 {
    color: #009;
  }

  &.mgroup4 {
    color: #a00;
    text-decoration: line-through;
  }
}

textarea {
  background: var(--white);
  border: 1px solid var(--black);
}

/* Misc (Global) */
.error {
  background: #fcc;
  border: 1px solid #f33;
}

.success {
  background: #cfc;
  border: 1px solid #3f3;
}

/* All windows */
.window {
  & .title {
    background: var(--header);
    color: var(--white);
  }

  & .content {
    background: var(--white);
  }

  & .content,
  & .title {
    border: 1px solid var(--black);
  }
}

/* IM windows */
.im {
  & .ims div {
    background: var(--white);
  }

  & form {
    border-top: 1px solid #555;
  }

  & .you .name {
    color: #f00;
  }

  & .them .name {
    color: #00f;
  }

  & .action {
    color: #522994;
  }

  &.offline .offline {
    color: #600;
    background: #ecc;
  }
}

.immenu,
.emotewin {
  border: 1px solid var(--black);
  background: var(--faint-blue);
}

/* User Control Panel */
#ucp {
  & .leftbar {
    background: var(--medium-blue);

    & h2 {
      background: #ddf;
      border: 1px solid var(--white);
    }
  }
}

#ucppage {
  background: var(--white);
  border-left: 1px solid var(--black);

  & h2 {
    border-bottom: 1px solid var(--blue-border);
  }
}

/* Mod CP */
#modcp {
  & > .content {
    background: var(--medium-blue);
  }

  & .minibox {
    border: 1px solid var(--black);

    & .title {
      background: #cdf;
    }

    & .content {
      background: var(--white);
    }

    & .post {
      border-bottom: 1px solid #ccc;
    }
  }

  & .modcppage {
    border-left: 1px solid var(--black);
    background: var(--white);
  }

  & .onlinesessions {
    & td {
      border: 1px solid var(--black);
    }
  }
}

/* Inbox */
.inbox {
  & .listing {
    border: 1px solid var(--blue-border);

    & td {
      border: 1px solid var(--blue-border);
      border-style: solid none;
      background: var(--faint-blue);
    }

    & tr:hover td {
      background: var(--white);
    }

    & th {
      color: #005;
      background: #ddf;
    }
  }

  & .composeform {
    background: var(--faint-blue);
    border: 1px solid #669;
  }

  & .messageview {
    border: 1px solid var(--black);
    background: var(--faint-blue);
  }

  & .message {
    background: var(--white);
    border: 1px solid #669;
  }

  & .messageinfo {
    background: #f5f5ff;
  }
}

/* Shoutbox */
#shoutbox {
  & .title {
    background: #cdf;
    color: #005;

    & a {
      color: #229;
    }
  }
}

.shouts {
  background: var(--faint-blue);
  border-right: 1px solid var(--blue-border);
}

.shout {
  background: var(--faint-blue);

  &.highlight {
    background: #ff0;
  }
}

#shoutbox .action,
.sbhistory .action {
  color: #f00;
}

#shoutbox .action a,
.sbhistory .action a {
  color: #a00;
}

/* Buddy/Contacts List */
#contacts {
  & .online .name {
    color: var(--link-color);
  }

  & .offline .name {
    color: #ccc;
  }

  & .blocked .name {
    color: #f00;
  }

  & .contact {
    background: var(--white);
    border-bottom: 1px solid var(--blue-border);
  }

  & .contact:hover {
    background: #ddf;
  }

  & .status {
    color: #555;
  }
}

/* User profiles */
.userprofile {
  & .leftbar {
    border: 1px solid var(--black);
    background: #ddf;
  }

  & .leftbar .username {
    background: var(--faint-blue);
    border-bottom: 1px solid var(--blue-border);
  }

  & .leftbar .avatar img {
    border: 1px solid var(--black);
  }

  & .infobox {
    background: #ddd;
    border: 1px solid var(--gray-border);
  }

  & .rightbar {
    & .post {
      border-bottom: 1px solid var(--gray-border);
    }

    & .postdate {
      background: var(--medium-blue);
      border: 1px solid #339;
    }

    & .signature {
      border-top: 1px dashed #ccc;
    }
  }

  & #pfbox {
    border: 1px solid var(--black);
  }

  & .pftabs a {
    border: 1px solid var(--black);
    border-bottom: none;
    background: var(--gray-border);
    color: var(--white);

    &.active {
      background: var(--white);
      color: var(--black);
    }
  }

  & .comment {
    border-bottom: 1px solid var(--gray-border);

    & .date {
      color: var(--blue-border);
    }
  }

  & .contacts {
    & .contact {
      background: var(--white);
      border: 1px solid var(--white);
    }

    & .contact:hover {
      background: #ddf;
      border: 1px solid var(--gray-border);
    }
  }
}

/* Badges */
.badges {
  & .badge {
    border-bottom: 1px solid var(--black);
  }
}

/* Surrounding Container/Template for Board */
#container {
  background: var(--white);
  box-shadow:
    rgb(0 0 0 / 20%) -5px 0 2px,
    rgb(0 0 0 / 20%) 5px 0 2px;
}

/* Header */
.head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 158px;
  background: #1d72d0;
  background-image: linear-gradient(#1d72d0, #2c476d, #1d72d0);
  box-sizing: border-box;
  padding: 10px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 3px;
    background-image: linear-gradient(
      #75a7e0 5%,
      #3f5677 50%,
      #275690 70%,
      #1d72d0 85%
    );
    filter: blur(1px);
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#2c476d 50%, rgb(29 114 208 / 50%));
    clip-path: ellipse(60% 50% at 50% 100%);
  }
}

/* Navigation */
.navigation {
  & ul {
    & li {
      background: linear-gradient(#2f2f2f, black);
      border-width: 1px;
      border-style: solid;
      border-image: linear-gradient(var(--white), #393939) 1;
      border-bottom: 0;

      &.active {
        background: linear-gradient(#384b61, #22354b);
      }
    }
  }

  & a {
    color: var(--white);
  }
}

/* UserBox */
#userbox {
  background: rgb(27 46 79 / 50%);
  border-image: linear-gradient(#435f80 20%, #7eaee4) 1;
  border-style: solid;
  border-width: 3px;
  box-shadow: 2px 2px 5px rgb(0 0 0 / 40%);
  box-sizing: border-box;
  color: var(--white);

  & .logout,
  & .register {
    color: #0ff;
  }

  & a:first-child {
    color: var(--white);
  }

  & .lastvisit {
    color: #cfc;
  }

  & .controls {
    & a {
      color: var(--white);
    }
  }

  & .forgot {
    color: var(--white);
  }
}

/* Breadcrumbs */
#path {
  background: var(--faint-blue);
  border: 1px solid var(--blue-border);
  border-style: solid none;

  & a {
    color: var(--black);
  }
}

/* Board Index */
.boardindex {
  & td {
    background: var(--shade);
    border: 1px solid var(--blue-border);
  }

  & .f_icon {
    border-style: solid none;
    background-color: var(--barely-blue);
  }

  & .last_post {
    background: var(--light-blue);

    & a {
      color: #e77700;
    }
  }

  & .forum {
    background-color: var(--barely-blue);
  }

  & .item_1,
  & .item_2 {
    background: var(--white);
  }
}

/* Forum Listings */
.forumindex {
  & td {
    background: var(--shade);
    border: 1px solid var(--blue-border);
  }

  & .f_icon {
    background: var(--white);
  }

  & .topic {
    background-color: var(--white);
  }

  & .last_post {
    background-color: var(--medium-blue);
  }

  & .item_1,
  & .item_2 {
    background-color: #ececff;
  }
}

/* Subforums (in forum listings) */
.subindex {
  & td {
    background: var(--shade);
    border: 1px solid var(--blue-border);
  }

  & .last_post {
    background-color: var(--medium-blue);

    & a {
      color: #e77700;
    }
  }

  & .f_icon {
    background-color: var(--barely-blue);
  }

  & .forum {
    background-color: var(--barely-blue);
  }

  & .item_1,
  & .item_2 {
    background: var(--white);
  }
}

/* Topic View */
#intopic {
  & td {
    border: 1px solid var(--black);
  }

  & .userdata {
    background: var(--light-blue) var(--shade);
  }

  & .avatar {
    & img {
      border: 1px solid var(--black);
    }
  }

  & .username {
    background: var(--faint-blue);
    border-bottom: 1px solid var(--blue-border);
  }

  & .signature {
    border-top: 1px dashed #ccc;
  }

  & .modpost.selected {
    color: #090;
  }

  & .post {
    background: var(--white);
  }

  & .post_info {
    color: #55c;
  }

  & .postbottom {
    background: var(--white);
  }

  & .opengraph {
    border: 1px solid #192c44;
    background: var(--faint-blue);
  }

  & .userstats {
    background: var(--medium-blue);
    border: 1px solid var(--blue-border);
  }
}

.postrating_list {
  background: var(--faint-blue);
  border: 1px solid var(--blue-border);

  & ul {
    border: 1px dashed var(--blue-border);
  }
}

#poll {
  & .content {
    background: var(--faint-blue);
  }

  & .choice {
    background: var(--white);
    border: 1px solid var(--blue-border);
  }

  & .choice:hover {
    background: #ddf;
    border: 1px solid var(--black);
  }

  & table {
    background: var(--white);
  }

  & td {
    border: 1px solid var(--blue-border);
  }

  & .bar {
    background: linear-gradient(to bottom, #5180e1, #355d7b);
    border: 1px solid #1234b4;
  }
}

/* New Topic Form */
.topicform {
  border: 1px solid var(--black);
  background: var(--faint-blue);
}

#polloptions {
  background: #ddf;
  border: 1px solid var(--blue-border);
}

/* New Post Form */
.postform {
  background: var(--faint-blue);
}

/* Search */
.searchresult {
  border-bottom: 1px solid var(--blue-border);

  & .highlight {
    background: #ffa;
    color: #f00;
  }
}

#searchadvanced {
  & td {
    border-right: 1px solid var(--black);
  }
}

/* Ticker */
#ticker {
  & .tick {
    border-bottom: 1px solid #ccc;
  }
}

/* Calendar */
.calendar {
  & td {
    border: 1px solid var(--black);
  }

  & .today {
    background: #cdf;
  }
}

/* Boxes/Collapse Boxes (Global) */
.box {
  margin: 10px 5px;
  background: linear-gradient(to bottom, var(--white), #333);
  background-size: 100% 50px;
  border: 1px solid var(--black);

  & > .title {
    margin: 1px 1px 0;
    background: var(--header);
    color: var(--white);
  }

  & .content {
    background: var(--white);
  }

  .content_bottom {
    display: block;
    height: 5px;
    background: #bbd;
    border-top: 3px solid #ddf;
  }
}

/* Function-Specific */
#notification,
#modbox {
  background: var(--white);
  border: 1px solid var(--black);
}

#notification.newmessage {
  background-color: var(--white);
}

.pages .active {
  color: #f55;
}

#stats {
  & .content {
    background: var(--white) var(--shade);
  }

  & .userstoday {
    border-top: 1px solid var(--blue-border);
  }
}

/* Member List */
#memberlist {
  & td {
    border-top: 1px solid #ccc;
  }
}

/* BBcodes */
.quote {
  border: 1px solid var(--blue-border);
  background-color: var(--medium-blue);

  & .quote,
  & .code {
    background-color: var(--white);
  }
}

.code {
  border: 1px solid var(--blue-border);
  background: var(--medium-blue);
}

.spoilertext {
  background: var(--white);
  color: var(--white);
  border: 1px solid var(--blue-border);

  &:hover,
  &.spoiled {
    background: var(--white);
    color: var(--black);
  }
}

/* AutoComplete */
#autocomplete {
  border: 1px solid var(--black);
  background: var(--faint-blue);

  & div:hover,
  & div.selected {
    color: #00f;
    background: #f5f5ff;
    border: 1px solid #669;
  }
}