@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

/* Document */

body
{
  background-color: #11131a;
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
}

body > .top
{
  background-color: #161622f2;

  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);

  border-bottom: 2px solid #171724;
  backdrop-filter: blur(2px);
}

body > .top.stick
{
  background-color: #161622f2;

  -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);

  backdrop-filter: blur(2px);
}

body > .top div.links > a
{
  background-color: transparent;
}

body > .top div.links > a:hover
{
  background-color: #0d0d0d52;
}

body > .top div.links > a.selected
{
    border-bottom: 2px solid #0063ff;
}

body > .top div.links > a:not(.selected)
{
    border-bottom: 2px solid transparent;
}

/* Elements */

button:not(.default),
input[type="submit"]:not(.default)
{
  color: #fff;
  background-color: #232639;
  border: 1px solid #1d1d2f;
}

button:not(.default):hover,
input[type="submit"]:not(.default):hover
{
  background-color: #303557;
  border: 1px solid #1d1d2f;
}

input[type="text"]:not(.default),
input[type="password"]:not(.default),
textarea:not(.default)
{
  background-color: #1d2039;
  border: 1px solid #2a2a46;
  color: #fff;
}

file-drop #selection
{
  background-color: #181a2b;
  border: 2px dashed #2a2a46;
  color: white;
  border-radius: 5px;
}

file-drop #selection:hover,
file-drop.drop-valid
{
    background-color: #1c1e2d;
}

textarea
{
  padding: 10px;
}

select
{
    flex-grow: 1;
    margin-right: 10px;
    height: 30px;
    background-color: #1c1f31;
    color: #fff;
    border: 1px solid #111;
    border-radius: 6px;
    padding: 0px 10px 0px 10px;
}

/* Misc */

.login-wrapper #login-error
{
font-size: 0.85em;
text-align: center;
padding: 4px 0px 14px 0px;
margin-bottom: 14px;
color: #c13838;
border-bottom: 1px solid #303030;
}

/** Related tools */

div.toolsRelated
{
  border-top: 1px solid #181a2b;
  margin-top: 24px;
  transition: opacity 0.5s;
  text-align: left;
}

div.toolsRelated > p
{
  font-size: 0.9em;
  color: #9596b9;
  margin-bottom: 18px;
}

div.toolsRelated > a
{
  background-color: #151724;
  border: 1px solid #1e1e31;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  color: #8282ae;
  font-size: 0.9em;
  display: inline-flex;
  margin-bottom: 10px;
}

div.toolsRelated > a:not(:last-of-type)
{
  margin-right: 6px;
}

div.toolsRelated > a:hover
{
  color: #fff;
}

/* Footer */

.footer
{
  background-color: #191d2d;
  border-top: 1px solid #161618;
}

.footer a
{
  color: #fff;
}