@font-face {
  font-family: 'TypewriterScribbled';
  font-style: normal;
  font-weight: 300;
  src: local('TypewriterScribbled'),
       url('/static/fonts/TypewriterScribbled.woff') format('woff'),
       url('/static/fonts/TypewriterScribbled.ttf') format('truetype');
}

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 300;
  src: local('Oxygen-Light'),
       url('/static/fonts/Oxygen-Light.woff') format('woff'),
       url('/static/fonts/Oxygen-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen-Regular'),
       url('/static/fonts/Oxygen-Regular.woff') format('woff'),
       url('/static/fonts/Oxygen-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  src: local('Oxygen-Bold'),
       url('/static/fonts/Oxygen-Bold.woff') format('woff'),
       url('/static/fonts/Oxygen-Bold.ttf') format('truetype');
}

:root {
  --main-red: #ea0200;
  --main-red-dark: #bd0200;
  --main-red-dark-bg: #600201;
  --blue-primary: #007bff;
  --blue-lidl: #007bff;
  --orange-rp: #ff855d;
  --bg-color: #fff;
  --text-color: #000;
  --text-color-hc: #000;
  --question-text-color: #fff;
  --bg-textarea: #fff;
  --bg-comments: #fee;
  --comment-date-color: #939292;
  --header-bg-color: #fff;
  --header-h: 3.7rem;
  --footer-bar-h: 3.25rem;
  --bg-input: #fff;
  --border-input: #ced4da;
  --placeholder-color: #6c757d;
}

body {
  font-family: 'TypewriterScribbled', -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.form-control,
.form-control:focus,
.form-select,
.input-group-text,
nav.navbar input[type="search"],
nav.navbar input[type="search"]:focus {
  background-color: var(--bg-input);
  color: var(--text-color);
  border-color: var(--border-input);
}
.form-control::placeholder {color: var(--placeholder-color);}

.sans {
  font-family: "Roboto", "Oxygen", "Cantarell",
    sans-serif;
}

[x-cloak] { display: none !important; }

svg {width: 24px; height: 24px}

header svg.logo {width: 10rem; height: 2rem}
footer svg.logo {width: 4.1rem; height: 1.6rem}
header svg.search {width: 1.2rem}
header svg.icon-person {width: 1rem}

svg.logo, svg.logo-mini {
  --color-sfondologo2: var(--text-color);
  --color-scrittalogo1: var(--main-red);
  --color-scrittalogo2: var(--main-red);
}

svg.logo-square {
  --color-scrittalogo1: var(--main-red);
  --color-scrittalogo2: var(--orange-rp);
}

footer svg.logo {
/*  width: 6rem; height: 1rem;*/
  --color-sfondologo2: #000;
  --color-scrittalogo1: #fff;
  --color-scrittalogo2: #fffaaa;
}

main div.container {
  margin-top: var(--header-h) !important;
  padding-bottom: 2.5rem;
}
main div.container:has(.chat-wrapper) {
  padding-bottom: 0;
}

#messages {margin-top: 3.7rem;}

nav.navbar {
  box-shadow: 0 3px 3px rgb(0 0 0 / 0.2);
  color: var(--text-color);
}
nav.navbar .navbar-nav .nav-link {
  color: var(--text-color-hc);
}
header div.container-fluid, header nav.navbar {
  background-color: var(--header-bg-color);
}
footer, footer div.container-fluid {
  background-color: var(--header-bg-color);
}
footer div.container-fluid {box-shadow: 0 -3px 3px rgb(0 0 0 / 0.2);}
footer span.copy {font-size: small;}
footer .nav-item, footer .nav-link {text-align: right; color: var(--text-color)}
footer li.nav-item a.nav-link {text-transform: none}

.btn.btn-vote-red {background-color: var(--main-red); color: var(--text-color); border: 3px solid #fff;}
.btn.btn-vote {
    background-color: #fff;
    color: #000;
    border: 3px solid #f6f6f6;
}
.btn.btn-respop {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--main-red);
  --bs-btn-border-color: var(--main-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--main-red-dark);
  --bs-btn-hover-border-color: var(--main-red-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--main-red-dark-bg);
  --bs-btn-active-border-color: var(--main-red-dark-bg);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--main-red);
  --bs-btn-disabled-border-color: var(--main-red);
  --bs-btn-focus-shadow-rgb: 234, 2, 0;
}

.btn.btn-default {
  --bs-btn-color: var(--text-color);
  --bs-btn-border-color: var(--text-color);
  --bs-btn-hover-color: var(--bg-color);
  --bs-btn-hover-bg: var(--text-color);
  --bs-btn-hover-border-color: var(--text-color);
  --bs-btn-active-color: var(--bg-color);
  --bs-btn-active-bg: var(--text-color);
  --bs-btn-active-border-color: var(--text-color);
}

.profile-attr + .profile-attr {
  border-top: 1px solid rgba(128, 128, 128, .25);
}

@media (max-width: 575.98px) {
  body {
    padding-bottom: calc(var(--footer-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  header svg.logo {
    width: 7rem; height: 1.8rem;
    }
  div.modal-header {color: #000; background-color: #fff; height: 1rem}
}

/* DARK MODE */
body.dark-theme {
    --bg-color: #262624;
    --header-bg-color: var(--main-red-dark);
    --text-color: #faf9f5;
    --text-color-hc: #fff;
    --color-scrittalogo1: #fff;
    --color-scrittalogo2: #fffaaa;
    --bg-textarea: #30302e;
    --bg-comments: #30302e;
    --bg-chat-mine: #30302e;
    --bg-input: #30302e;
    --border-input: #4a4a48;
    --placeholder-color: #8a8a86;
}
body.dark-theme svg.logo,
body.dark-theme svg.logo-mini,
body.dark-theme footer svg.logo {
  --color-scrittalogo1: #fff;
  --color-scrittalogo2: #fffaaa;
}
body.dark-theme button.rp-search,
body.dark-theme button.chat-menu {
  background: var(--bg-color); border: 1px solid var(--text-color)
}
body.dark-theme button.chat-menu {color: var(--text-color)}
body.dark-theme .btn.btn-vote {
  background-color: var(--main-red-dark);
  color: var(--text-color);
  border: 3px solid var(--text-color);
}
body.dark-theme div.modal-content {background: #3c3c3c}
body.dark-theme .dropdown-menu {
  --bs-dropdown-bg: #30302e;
  --bs-dropdown-color: var(--text-color);
  --bs-dropdown-border-color: #4a4a48;
  --bs-dropdown-link-color: var(--text-color);
  --bs-dropdown-link-hover-color: var(--text-color);
  --bs-dropdown-link-hover-bg: #3c3c3a;
  --bs-dropdown-link-active-bg: var(--main-red-dark);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg: #4a4a48;
  --bs-dropdown-header-color: var(--placeholder-color);
}
body.dark-theme .dropdown-menu .dropdown-item.text-danger {
  color: #ff9ca6 !important;
}
body.dark-theme .dropdown-menu .dropdown-item.text-danger:hover,
body.dark-theme .dropdown-menu .dropdown-item.text-danger:focus {
  color: #ffc2c8 !important;
}
body.dark-theme .text-muted,
body.dark-theme .text-secondary,
body.dark-theme small.text-muted {color: var(--placeholder-color) !important;}

body.dark-theme #add-contact-results.list-group {
  --bs-list-group-bg: var(--bg-input);
  --bs-list-group-color: var(--text-color);
  --bs-list-group-border-color: var(--border-input);
  --bs-list-group-action-color: var(--text-color);
  --bs-list-group-action-hover-color: var(--text-color);
  --bs-list-group-action-hover-bg: #3c3c3a;
  --bs-list-group-action-active-bg: var(--main-red-dark);
  --bs-list-group-action-active-color: #fff;
  --bs-list-group-active-bg: var(--main-red-dark);
  --bs-list-group-active-border-color: var(--main-red-dark);
  --bs-list-group-active-color: #fff;
}