@charset "UTF-8";

:root {
  --white: #fff;
  --gray: #444444;
  --gray-dark: #303030;
  --gray-light: #bdbdbd;
  /* --gray-light: #999999; */
  --gray-xlight: #f2f2f2;
  --primary: #356864;
  --primary: #16658a;
  /* --primary: #31a6d8; */
  /* --primary: #17a2b8; */
  --secondary: #444;
  --success: #28a745;
  /* --info: #17a2b8; */
  /* --info: #25A1D7; */
  /* --info: green; */
  --info: #28a745;
  /* --info: #e41d24; */
  /* --info: #FFC107; */
  /* --info: #ec5d5d; */
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  /* --light: #faf8f8; */
  --dark: #303030;
  --black: #000000;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-button: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Fonts */

body {
  font-family: var(--font-family-sans-serif);
}

.brand {
  font-family: 'Londrina Shadow', cursive;
  /* color: var(--success); */
  /* font-family: 'Fredericka the Great', cursive; */
  /* font-family: 'Pacifico', cursive; */
  /* font-family: 'Bad Script', cursive; */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-button);
}





/* for theme-switch */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition-property: background-image, background-color;
  transition-duration: 450ms;
  transition-delay: 0 !important;
}

/* Background */

body.whitesand {
  /* background: url(../img/white_sand.png); */
  background: var(--gray-xlight);
  /* background-image: url(../img/pattern-stroke-204.svg); */
  /* background-size: 1000px; */
  color: var(--dark);
}

body.greysand {
  background: url(../img/gray_sand.png);
  color: var(--light);
}

/* for sticky footer */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.flexible {
  flex: 1 0 auto;
}

footer{
  flex-shrink: 0;
}

/* Font colors */

a.title-link {
  text-decoration: none;
}

body.greysand span a {
  color: var(--light) !important;
}

body.whitesand span a {
  color: var(--dark) !important;
}

body.greysand .text-theme {
  color: var(--light) !important;
}

body.greysand a.text-theme,
body.greysand a.text-theme:hover,
body.greysand a.text-theme:focus {
  color: var(--light) !important;
}

body.whitesand .text-theme {
  color: var(--dark) !important;
}

body.whitesand a.text-theme,
body.whitesand a.text-theme:hover,
body.whitesand a.text-theme:focus {
  color: var(--dark) !important;
}

body.whitesand .alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

body.whitesand .alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

body.greysand .alert-danger {
  color: black;
  background-color: #e77e89;
  border-color: #dc3545;
}

body.greysand .alert-success {
  color: white;
  border-color: #28a745;
  background-color: #53b86a;
}


body.whitesand .bg-theme {
  background-color: var(--light) !important;
  color: inherit;
}

body.whitesand .page-item .page-link {
  border-color: var(--light) !important;
}

body.whitesand .active .bg-theme {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: inherit;
}

body.greysand .bg-theme {
  background-color: var(--dark) !important;
  color: var(--light);
}

body.greysand .page-item .page-link {
  border-color: rgba(0, 0, 0, 0.25);
  background: var(--dark);
}

body.greysand .active .bg-theme {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--light);
}

body.whitesand a.bg-theme:hover,
body.whitesand a.bg-theme:focus{
  background-color: #dae0e5 !important;
}

body.greysand a.bg-theme:hover,
body.greysand a.bg-theme:focus{
  background-color: #444 !important;
}

body.whitesand .text-inverse {
  color: #000 !important;
}

body.greysand .text-inverse {
  color: #fff !important;
}

body.whitesand .text-inverse-50 {
  color: #000 !important;
}

body.greysand .text-inverse-50 {
  color: #989898 !important;
}

.text-info {
  color: var(--info) !important;
}


/* ----- Badges ----- */
/* ------------------ */

body.greysand .badge-inverse {
  color: #212529;
  background-color: var(--light);
}

body.whitesand .badge-inverse {
  color: #fff;
  background-color: var(--dark);
}

/* ----- Cards ----- */
/* ----------------- */

body.whitesand .card-theme {
  background-color: var(--light);
}

body.greysand .card-theme {
  background-color: var(--dark);
}

body.whitesand .card-theme-50 {
  background-color: var(--light);
}

body.greysand .card-theme-50 {
  background-color: #303030;
}

body.greysand .card-header-theme {
  background-color: var(--primary);
  color: white;
}

body.whitesand .card-header-theme {
  background-color: var(--info);
  color: white;
}

body.greysand .card-header-theme a,
body.whitesand .card-header-theme a {
  text-decoration: none;
  color: white;
}

body.greysand .card-display-theme {
  background-color: var(--primary);
  color: white;
}

body.whitesand .card-display-theme {
  background-color: var(--success);
  color: white;
}

body.greysand .card-display-theme a {
  text-decoration: none;
  color: white;
}
body.whitesand .card-display-theme a {
  text-decoration: none;
  color: white;
}

body.greysand .card-label-theme {
  color: var(--warning);
}

body.whitesand .card-label-theme {
  color: var(--dark);
}

body.greysand .i-theme {
  color: var(--primary);
}

body.whitesand .i-theme {
  color: var(--info);
}

.card-header h3,
.card-header h4 {
  margin-bottom: 0;
}

/* ----- Tables ----- */
/* ------------------ */

body.greysand .table-theme,
body.greysand .table-theme>th,
body.greysand .table-theme>td,
body.greysand .table-theme.table-hover tr:hover>td {
  color: var(--light);
}

body.greysand .table-theme th {
  border-color: #303030;
}

body.greysand .table-striped tbody tr:nth-of-type(odd) {
  background-color:#3d3d3d;
}

body.greysand .table-striped tbody tr:nth-of-type(even) {
  background-color: #333333;
}

/* ----- Navigation ----- */
/* ---------------------- */

body.whitesand .navbar-theme .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

body.whitesand .navbar-theme .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

body.whitesand .navbar-theme .navbar-nav .nav-link:hover,
body.whitesand .navbar-theme .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

body.whitesand .navbar-theme .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

body.whitesand .navbar-theme .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.greysand .navbar-theme .navbar-brand {
  color: #fff;
}

body.greysand .navbar-theme .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

body.greysand .navbar-theme .navbar-nav .nav-link:hover,
body.greysand .navbar-theme .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

body.greysand .navbar-theme .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

body.greysand .navbar-theme .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* for theme-switch */
body.greysand .custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--primary);
  background-color: var(--primary);
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(100, 161, 157, 0.25);
}

/* ----- Deco ----- */
/* ---------------- */

.nav-decoration {
  height: 10px;
  background: transparent;
  /* background: var(--danger); */
}

body.whitesand .footer-decoration {
  height: 10px;
  background: var(--info);
}

body.greysand .footer-decoration {
  height: 10px;
  background: var(--primary);
}

/* ----- Buttons ----- */
/* ------------------- */

.btn {
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1rem 1.5rem;
  font-family: var(--font-family-button);
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  border: 0;
}

body.whitesand .btn-theme {
  color: black;
  background: var(--gray-light);
}

body.whitesand .btn-theme:hover {
  background: var(--gray-xlight);
}

body.greysand .btn-theme {
  color: white;
  background: var(--primary);
  border-color: var(--primary);
}

.animated-btn {
  padding: 0;
  border: none;
  background: transparent;
}

/* ----- Images ----- */
/* ------------------ */

.banner-img {
  max-height: 450px;
}

.thumbnail {
  width: 100px;
}

.avatar {
  width: 110px;
}

.magyelogo {
  width: 35px;
}

.logos {
  width: 55px;
}

/* ----- Other  ----- */
/* ------------------ */

.hidden {
  display: none;
}

/* ---- 404 Page p5js Canvas---- */

#canvas {
  display:flex;
  justify-content: center;
}

/* ---- 403 Page Googly Eyes ---- */

.eye {
  background-color: white;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 38%;
  overflow: hidden;
}

.eye1 {
  margin-left: -125px;
}

.eye2 {
  margin-left: 25px;
}
.pupil {
  background-color: black;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -30px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 150px;
  top: 400px;
  background-color: var(--danger);
  cursor: grab;
  z-index: 1000;
}

/* ---- Billing comments ---- */

.bill-comment {
  border: 2px solid gray;
}