/* ************************************************************

Common CSS for some customer-facing pages
Pages currently using this stylesheet: Home, Monitoring, SFTP

************************************************************ */

:root {
  /* THEME */
  --color-primary: #2c5578;
  --color-primary-light: #618ab0;
  --color-primary-dark: #1e3b53;

  --color-secondary: #496e34;
  --color-secondary-light: #6c8f59;
  --color-secondary-dark: #324b24;

  --color-tertiary: #c28c19;
  --color-tertiary-light: #d9b66c;
  --color-tertiary-dark: #956b13;


  /* TEXT */
  --color-text: rgba(0, 0, 0, 1);
  --color-text-medium: rgba(0, 0, 0, 0.55);
  --color-text-light: rgba(0, 0, 0, 0.35);

  --color-text-inverted: rgba(255, 255, 255, 1);
  --color-text-inverted-medium: rgba(255, 255, 255, 0.55);
  --color-text-inverted-light: rgba(255, 255, 255, 0.35);

  --color-link: var(--color-primary);


  /* INFORMATIONAL */
  --color-positive: #496e34;
  --color-positive-light: #6c8f59;
  --color-positive-dark: #3e5d2c;

  --color-negative: #d32823;
  --color-negative-light: #d74d4f;
  --color-negative-dark: #a7201c;

  --color-warning: #c28c19;
  --color-warning-light: #d9b66c;
  --color-warning-dark: #956b13;

  --color-info: #2c5578;
  --color-info-light: #618ab0;
  --color-info-dark: #1e3b53;

  /* BACKGROUNDS */
  --color-background: #f0f0f0;
  --color-background-accent: #F4F8F9;
  --color-background-light: #ffffff;
  --color-border: #bfc8c8;

  --header-height: 60px;
  --footer-height: 50px;
}


html {
  font-size: 12px;
  line-height: 16.8px;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.app__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
  height: var(--header-height);
  padding: 10px 5px;

  background: var(--color-background-light);
}

.app__header--main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.app__header--logo {
  width: 50px;
  height: 50px;
}

.app__header--title {
  font-size: 1.6rem;
  line-height: 1.4rem;
  font-weight: bold;
}

.app__header--instance {
  display: flex;
  flex-direction: column;
}

.app__header--instance-details {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.instance__details--label {
  color: var(--color-text-light);
  font-weight: bold;
}

.instance__details--value {
  color: var(--color-text);
}

.app__content {
  flex: auto;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;

  margin: 5px;
}

.app__footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  height: var(--footer-height);
}

.app__logo--background {
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -100;
  transform: translate(45px, 25px);
}

.card {
  background: var(--color-background-light);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}


/* UTILS */
.shadow --1 {
  box-shadow:
    0px 0.1px 0.6px rgba(0, 0, 0, 0.02),
    0px 0.3px 1.3px rgba(0, 0, 0, 0.028),
    0px 0.6px 2.5px rgba(0, 0, 0, 0.035),
    0px 1.1px 4.5px rgba(0, 0, 0, 0.042),
    0px 2.1px 8.4px rgba(0, 0, 0, 0.05),
    0px 5px 20px rgba(0, 0, 0, 0.07);
}

.shadow--2 {
  box-shadow:
    0px 0.3px 0.7px rgba(0, 0, 0, 0.02),
    0px 0.7px 1.7px rgba(0, 0, 0, 0.028),
    0px 1.3px 3.1px rgba(0, 0, 0, 0.035),
    0px 2.2px 5.6px rgba(0, 0, 0, 0.042),
    0px 4.2px 10.4px rgba(0, 0, 0, 0.05),
    0px 10px 25px rgba(0, 0, 0, 0.07);
}

.shadow--3 {
  box-shadow:
    0px 0.6px 0.8px rgba(0, 0, 0, 0.02),
    0px 1.3px 2px rgba(0, 0, 0, 0.028),
    0px 2.5px 3.8px rgba(0, 0, 0, 0.035),
    0px 4.5px 6.7px rgba(0, 0, 0, 0.042),
    0px 8.4px 12.5px rgba(0, 0, 0, 0.05),
    0px 20px 30px rgba(0, 0, 0, 0.07);
}

.shadow--4 {
  box-shadow:
    0px 0.8px 1.1px rgba(0, 0, 0, 0.014),
    0px 2px 2.7px rgba(0, 0, 0, 0.02),
    0px 3.8px 5px rgba(0, 0, 0, 0.025),
    0px 6.7px 8.9px rgba(0, 0, 0, 0.03),
    0px 12.5px 16.7px rgba(0, 0, 0, 0.036),
    0px 30px 40px rgba(0, 0, 0, 0.05);
}

.shadow--5 {
  box-shadow:
    0px 1.4px 1.5px rgba(0, 0, 0, 0.014),
    0px 3.3px 3.7px rgba(0, 0, 0, 0.02),
    0px 6.3px 6.9px rgba(0, 0, 0, 0.025),
    0px 11.2px 12.3px rgba(0, 0, 0, 0.03),
    0px 20.9px 23px rgba(0, 0, 0, 0.036),
    0px 50px 55px rgba(0, 0, 0, 0.05);
}