:root {
  --first-color: rgb(20, 177, 187);
  --first-color: rgb(1, 163, 255);
  --first-color: #0b8fff;
  --first-color-dark: rgb(15, 122, 129);
  --first-color-dark: #028ad9;
  --first-color-dark: #0978d9;
  --second-color: #ff7;
}
.first-color {
  color: var(--first-color);
}
.hidden {
  /* TODO */
  display: none;
  visibility: hidden;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

.articles h3 {
  margin-top: 15px;
}

body {
  height: auto;
  /* font-family: "Roboto", sans-serif; */
  font-size: 0.9rem;
}

section {
  /* border: 1px solid orange; */
  margin: 1rem 0;
  background-color: rgb(245, 249, 250);
  background-color: rgb(248, 249, 249);
  /* TODO */
  background-color: rgb(245, 247, 250);
  /* TODO see column too: */
  padding: 7px;
  border-radius: 9px;
  /* width: 100%; */
}

.subsection {
  padding-top: 7px;
  padding-bottom: 7px;
}

.bg-dark {
  background-color: rgb(4, 34, 100) !important;
  background-color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 255, 255) !important;
  background-color: rgb(75, 75, 75) !important;
}

.navbar {
  border-bottom: 3px solid rgb(255, 153, 0);
  border-bottom: 5px solid var(--first-color);
}

.navbar-brand {
  margin: 2px 0 2px 0;
  display: flex;
  align-items: center;
  padding: 0;
}

.navbar-brand-logo-icon {
  /*  for icon only */
  width: 27px;
}

.navbar-brand-logo {
  color: var(--first-color);
  /* width: 36px; for icon only */
  width: 145px;
}
.navbar-brand-name {
  padding: 1px 8px 1px 8px;
  color: white;
  font-family: Montserrat;
  font-family: "Varela Round";
  font-size: 34px;
  font-weight: 700;
  line-height: 0; /* to not force height */
}

footer {
  background-color: rgb(4, 34, 100) !important;
  background-color: rgb(75, 75, 75) !important;
  color: white;
  padding: 15px;
}

.footer p {
  margin-bottom: 10px;
  line-height: 1.2;
}

#bp-container {
  padding: 15px 15px 0 15px;
  /* центрира уж*/
  margin: 0 auto 0 auto;
  /* отместване под header. Без !important се бъгва при малки екрани.*/
  margin-top: 8vh !important;
  width: 90vw;
  /* Hlm10: max 1000px*/
  /* max-width: 1500px; */
  /*background-color: #F1F2F3;*/
  /* display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center; */
}

h1 {
  font-weight: 300;
  font-size: 2.3rem !important;
  font-family: Montserrat;
  font-weight: 500;
  /* line-height: 0.9; */
  /* color: rgb(184, 140, 31);
  color: rgb(236, 135, 3); */
}

.column h4 {
  color: rgb(86, 89, 89);
  /* border-bottom: 4px solid var(--first-color);
  width: fit-content; */
  /* background-color: #7b96ad; /*4884b8*/
  /* width: fit-content;
  padding: 1px 5px 3px 5px;
  color: white;
  border-radius: 5px; */
}

.subtitle {
  /* font-size: 0.9rem; */
  color: rgb(70, 70, 70);
  /* font-weight: 400; */
  margin-bottom: 1.2rem;
  line-height: 1.35;
}

.lists {
  display: flex;
  flex-direction: row;
  /* wrap, nowrap*/
  flex-wrap: nowrap;
  padding: 0 0;
  gap: 10px;
  height: auto;
  /*height: 60vh;*/
}

select {
  width: 30vw;
  /* height: 30px; */
  padding: 2px 5px 5px 5px;
  margin-right: 5px;
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* stops resizing of textarea */
  /* height: 60vh; */
  padding: 7px;
  border-radius: 9px;
  /* background-color: rgb(244, 244, 243);
  background-color: #fafafa;
  background-color: rgb(245, 249, 250); */
}

.button-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.4rem;
}

textarea,
select {
  border: 1px solid rgb(180, 180, 180);
}

textarea {
  /* width: 400px; */
  /* width: 40vw; */
  /* only the bottom one resizes */
  width: 100%;
  min-width: 100px;
  /* height: 100%; */
  /* height: 50vh;*/
  height: 300px;
  min-height: 100px;
  border-width: 1px;
  border-radius: 5px;
  padding: 10px 15px;
}

textarea:focus {
  border-color: royalblue;
  border-width: 2px;
  outline: none;
}

.btn-primary {
  color: white !important;
  background-color: var(--first-color);
  border: 1px solid var(--first-color);
}

.btn-primary:hoover {
  background-color: var(--first-color-dark);
  border: 1px solid var(--first-color-dark);
}

.btn-outline-primary {
  color: var(--first-color) !important;
  /* color: red !important; */
  background-color: white;
  border: 1px solid var(--first-color);
}

.btn-outline-primary:hover {
  color: white !important;
  background-color: var(--first-color);
  border: 1px solid var(--first-color);
}

.button-bar .btn-outline-primary {
  color: #0e0e0e !important;
  background: #e9eff5; /* rgb(228, 234, 240) #dfe8ed;*/
  border-color: #dae3f2; /* rgb(228, 234, 240) #9da9cd;*/
}

.button-bar .btn-outline-primary:hover {
  color: white !important;
  background-color: var(--first-color);
  border: 1px solid var(--first-color);
  /* or */
  color: #0e0e0e !important;
  background-color: #dae3f2; /*rgb(197, 206, 216) rgb(197, 206, 216) #baccd6;*/
  border: 1px solid #dae3f2; /*rgb(197, 206, 216) rgb(197, 206, 216) #baccd6;*/
}

.articles .btn-outline-primary {
  background: #e9eff5; /* rgb(228, 234, 240) #dfe8ed;*/
  border-color: #c1d4fc; /* rgb(228, 234, 240) #9da9cd;*/
}

.articles .btn-outline-primary:hover {
  background-color: #dae3f2; /*rgb(197, 206, 216) rgb(197, 206, 216) #baccd6;*/
  border: 1px solid #dae3f2; /*rgb(197, 206, 216) rgb(197, 206, 216) #baccd6;*/
}

.articles a {
  color: var(--first-color);
}

.articles a:hover {
  color: var(--first-color-dark);
  text-decoration: none;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.buttons .btn {
  width: 90px;
}

.buttons2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: start;
}

#btn-replace-placeholders,
#btn-clear-lists {
  background-color: rgb(75, 75, 75);
  border-color: rgb(75, 75, 75);
}
#btn-replace-placeholders:hover,
#btn-clear-lists:hover {
  background-color: black;
  border-color: black;
}

.placeholder-replacement {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: start;
  /* width: 400px; */
}
.placeholder-replacement-template {
  margin-bottom: 7px;
}

.btn {
  font-size: 0.9rem;
  padding: 0.15rem 0.5rem 0.15rem 0.5rem;
}

.button-bar .btn {
  font-size: 0.73rem;
}

/* ===== On/Off button text, border and fixed width (duplicated style for clarity!) */
.button-bar .text {
  /* alternirane */
  display: none;
}

/* icon */
.button-bar .bi {
  font-size: 0.8rem !important;
  font-size: 0.9rem !important;
  font-size: 1rem !important;
  /* if no borders & text: but on 2 lines on mobile */
  /* font-size: 1.1rem !important; */
  /*color: rgb(85, 85, 85);*/
}

.btn-union,
.btn-intersection,
.btn-difference-a-minus-b,
.btn-difference-b-minus-a,
.btn-difference-symmetrical,
.btn-cartesian-product {
  width: 155px; /*140*/
}

.generation {
  margin-top: 1.5rem;
}

.title {
  font-size: 1.9rem;
  /*line-height: 1.2rem;*/
  margin-bottom: 0.3rem;
  padding-bottom: 0;
}

hr {
  margin: 0.5rem 0;
}

.articles {
  background-color: #e5edfa; /*D2E3FC*/
  border-radius: 0;
  padding-top: 20px;
  margin-bottom: 0;
}

/* ---------- Media Query Code */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* For iPhone 11-12 use 16-32 pixels of padding (while margins can be used to create space between elements or sections within the layout) */
  #bp-container {
    width: 100vw;
    margin: 0;
    padding: 12px 12px 0 12px;
  }

  .lists {
    flex-direction: column;
  }

  textarea {
    width: 100%;
  }

  .buttons {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    align-items: baseline;
  }
  .buttons2 {
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    gap: 7px;
    align-items: baseline;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #bp-container {
    width: 100vw;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #bp-container {
    width: 100vw;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #bp-container {
    width: 100vw;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #bp-container {
    width: 100vw;
  }
}

/* https://stackoverflow.com/questions/42415141/what-is-the-media-query-for-large-desktops */
/* iPhone 11 1792px max - не изпълва докрая!? */
@media only screen and (min-width: 1920pxpx) {
  #bp-container {
    width: 100vw;
  }
}

/* 2000 - for BP monitor */
@media only screen and (min-width: 2000px) {
  #bp-container {
    width: 60vw;
  }
}