#main {
  margin-bottom: 20px;
}

#main::after {
  content: "";
  display: block;
  clear: both;
}

@media only screen and (max-width: 920px) {
  #main {
    padding-top: 20px;
  }
}

small {font-size: 16px; line-height:10px; }

.sub {font-size: 16px; line-height: 1.4; }

.sub2 {font-size: 14px; line-height: 1.4; color:#37afff; margin-bottom:5px;}

.sub3 {font-size: 14px; line-height: 1.4; color:#444; margin-bottom:5px;}

.sub4 {font-size: 14px; line-height: 1; color:#444; margin-top:10px; margin-bottom:5px;}

.sub5 {font-size: 15px; line-height: 1; font-size:16px; color:#0078c8; margin-top:10px; margin-bottom:15px; font-family: "Red Hat Display";}

.sub6 {font-size: 14px; line-height: 1.4; color:#888; margin-bottom:5px;}

	/* SZÍNES DOBOZOK */

	.card {
	  border-radius: 10px;
	  width: 100%;
	}

	.card-header {
	  padding: 20px;
	  color: white;
	  border-radius: 10px 10px 0 0;
	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 21px;
	  text-align: center;
	}

	.card-body {
	  border-radius: 0 0 10px 10px;
	  padding:15px;
	}

	.promo {
	  color: black;
	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 20px;
	  font-weight: 500;
	  line-height: 1.5;
	}

	.card--blue .card-header { background: #3463e0; }
	.card--blue .card-body { border: 1px solid #3463e0; }

	.card--blue2 .card-header { background: #0099ff; text-align: left; text-shadow: 2px 2px 5px #555; }
	.card--blue2 .card-body { border: 1px solid #0099ff; }

	.card--links .card-header { background: #0099ff; }
	.card--links .card-body { border: 1px solid #0099ff; }

	.card--purple .card-header { background: #6600ff; }
	.card--purple .card-body { border: 1px solid #6600ff; }

	.card--purple2 .card-header { background: #8957ff; }
	.card--purple2 .card-body { border: 1px solid #8957ff; }

	.card--red .card-header { background: #f44336; }
	.card--red .card-body { border: 1px solid #f44336; }

	.card--green .card-header { background: #00a000; }
	.card--green .card-body { background: #c5ffc5; border: 1px solid #00a000; }

	.card--orange .card-header { background: #ff6600; text-shadow: 2px 2px 5px #555; text-align: left; font-size: 19px; padding: 15px; margin-top: 4px;}
	.card--orange .card-body { border: 1px solid #ff6600; color:#333;}

	.card--yellow .card-header { background: #ffbb00; color: #222; }
	.card--yellow .card-body { background: #ffe7a4; color: #444 }

	.card--magenta .card-header { background: #e500ff; }
	.card--magenta .card-body { border: 1px solid #e500ff; }

	.card--red2 .card-header { background: #ff1100; }
	.card--red2 .card-body { border: 1px solid #ff1100; }

	.card--orange2 .card-header { background: #ff6600; }
	.card--orange2 .card-body { border: 1px solid #ff6600; }

	.card--darkblue .card-header { background: #1100ff; }
	.card--darkblue .card-body { border: 1px solid #1100ff; }

	.card--pink1 .card-header { background: #ff579a; }
	.card--pink1 .card-body { border: 1px solid #ff579a; }

	.card--pink2 .card-header { background: #ff3366; }
	.card--pink2 .card-body { border: 1px solid #ff3366; }

	.card--gr1 .card-header { background: #00bbff; text-shadow: 2px 2px 5px #555; }
	.card--gr1 .card-body { border: 1px solid #00bbff; }

	.card--gr2 .card-header { background: #22dddd; text-shadow: 2px 2px 5px #555; }
	.card--gr2 .card-body { border: 1px solid #22dddd; }

	.card--gr3 .card-header { background: #00cc88; text-shadow: 2px 2px 5px #555; }
	.card--gr3 .card-body { border: 1px solid #00cc88; }

	.card--gr4 .card-header { background: #ffbb00; text-shadow: 2px 2px 5px #555; }
	.card--gr4 .card-body { border: 1px solid #ffbb00; }

	.card--gr5 .card-header { background: #ff8c00; text-shadow: 2px 2px 5px #555; }
	.card--gr5 .card-body { border: 1px solid #ff8c00; }

	.card--ecs .card-header { background: #8957ff; }
	.card--ecs .card-body { border: 1px solid #8957ff; }

	.card--ecs2 .card-header { background: #ffbb00; color: black; }
	.card--ecs2 .card-body { border: 1px solid #ffbb00; }

	.card--rec .card-header { background: #cc0066; }
	.card--rec .card-body { border: 1px solid #cc0066; }

	.card--vocab .card-header { background: #32759f; }
	.card--vocab .card-body { border: 1px solid #32759f;}

	.spacer { height: 25px; }
	.spacer2 { height: 15px; }
	.spacer3 { height: 8px; }
	.spacer4 { height: 21px; }
	.spacer5 { height: 1px; }
	.spacer6 { height: 27px; }
	.spacer-10 { height: 10px; }
	.spacer-6 { height: 6px; }

	.frame {
	  border-radius: 10px;
	  width: 100%;
	  border: 1px solid #80ccff;
	  padding: 15px;
	}

	.frame:hover {
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

	.frame2 {
	  border-radius: 10px;
	  width: 100%;
	  background-color:#eee;
	  border: 1px solid #ddd;
	  padding: 15px;
	  font-size: 16px;
	  line-height: 1.35em;
	  color: #444;
	  margin-top: 4px;
	}

	.frame3 {
	  border-radius: 25px;
	  width: 100%;
	  background: linear-gradient(90deg, #ffcbc7, #cdffc7);
	  padding: 10px;
	  font-size: 15px;
	  line-height: 1.4em;
	  color: #333;
	  margin-top: 10px;
	}

	.frame4 {
	  border-radius: 10px;
	  border: 1px solid #ff6600;
	  width: 100%;
	  padding: 15px;
	  font-size: 15px;
	  line-height: 1.4em;
	  color: #333;
	  margin-top: 5px;
	}

	.frame5 {
	  border-radius: 10px;
	  width: 100%;
	  border: 1px solid #80ccff;
	  padding: 5px;
	}

	.frame5:hover {
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

	.frame6 {
	  border-radius: 10px;
	  width: 100%;
	  border: 1px solid #ccc;
	  padding: 15px;
	  max-width: 360px;
	  color: #666;
	  background: white;
	}

	.frame6:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #0099ff;
	  background: white;
	  color: #004c80;
	}

	.frame6 i {
      color: #666;
      
      display: inline-block;
      line-height: 1;
      padding-top: 2px;
	}

	.frame6:hover i {
	    background: linear-gradient(200deg, #0099ff, #004c80);

	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;

	    background-clip: text;
	    color: transparent;
	}

	.frame7 {
	  border-radius: 10px;
	  border: 1px solid #ff6600;
	  width: 100%;
	  padding: 15px;
	  color: #ff6600;
	  margin-top: 5px;
	}

	.frame8 {
	  border-radius: 10px;
	  width: 100%;
	  border: 1px solid #ccc;
	  padding: 15px;
	  max-width: 400px;
	  background: white;
	}

	.frame8:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #00a000;
	}

	.frame9 {
	  border-radius: 10px;
	  width: 100%;
	  border: 1px solid #ccc;
	  padding: 15px;
	  max-width: 400px;
	  background: white;
	}

	.frame9:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #ff6600;
	}

	.frame10 {
	  border-radius: 10px;
	  border: 1px solid #ccc;
	  width: 100%;
	  padding: 20px;
	  background: white;
	  margin-top: 5px;
	  max-width: 600px;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

	.frame11 {
	  border-radius: 10px;
	  border: 1px solid #c8e9ff;
	  width: 100%;
	  padding: 20px;
	  background: #dbf0ff; 
	}

	.frame11:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #a4dbff;
	}

	.frame12 {
	  border-radius: 10px;
	  border: 1px solid #eee;
	  width: 100%;
	  padding: 20px;
	  max-width: 400px;
	}

	.frame12:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #ddd;
	}

	.frame13 {
	  border-radius: 10px;
	  border: 1px solid #eee;
	  width: 100%;
	  padding: 20px;
	}

	.frame13:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #ddd;
	}

	.frame14 {
	  border-radius: 10px;
	  width: 100%;
	  background-color:#edf8ff;
	  border: 1px solid #a4dbff;
	  padding: 15px;
	  color: #444;
	  margin-bottom: 10px;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

	.frame15 {
	  border-radius: 10px;
	  border: 1px solid #a4dbff;
	  padding: 20px;
	  max-width: 300px;
	  margin-top: 15px;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	}

	.frame15:hover {
	  box-shadow: 3px 6px 18px rgba(0,0,0,0.15);
	  border: 1px solid #0099ff;
	}

	.copy {
	  font-size: 14px;
	}

	.rht {
	  /* font-family: "red hat display"; */
	  font-weight: 600;
	  font-size: 18px;
	}

	.tan1 {
	  border-radius: 10px;
	  border: 1px solid #0099ff;
	  padding: 15px;
	}

	.tan2 {
	  border-radius: 10px;
	  border: 1px solid #00A86B;
	  padding: 15px;
	}

	.tan3 {
	  border-radius: 10px;
	  border: 1px solid #CC6600;
	  padding: 15px;
	}

	.tan4 {
	  border-radius: 10px;
	  border: 1px solid #6A3D9A;
	  padding: 15px;
	}

	.tan5 {
	  border-radius: 10px;
	  border: 1px solid #ff6600;
	  padding: 15px;
	}

	/* LENYÍLÓ */

	.toggle-link {
	  display: inline-flex;
	  align-items: center;
	  gap: 3px;
	  cursor: pointer;
	  color: #3b82f6;
	  font-size: 15px;
	  font-weight: 600;
	  user-select: none;
	  margin-top: 10px;
	  margin-bottom: 5px;
	}

	.arrow {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;

	  width: 18px;
	  height: 18px;

	  line-height: 1;
	  transform-origin: center;
	  transition: transform 0.3s ease;
	}

	.toggle-content {
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.4s ease;
	}

	.toggle-link.open .arrow {
	  transform: scaleY(-1);
	}

	/* ACCORDION */

	.accordion {
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	  margin-top: 10px;
	  margin-bottom: 10px;

	  margin: 10px auto;

	  width: 100%;
	  max-width: 800px;
	}

	.accordion-item {
	  border-radius: 10px;
	  overflow: hidden;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	  background: #fff;
	  border: 1px solid #0099ff;
	}

	.accordion-header {
	  padding: 15px 15px;
	  background: #0099ff;
	  color: white;
	  text-shadow: 1px 1px 3px #555;
	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;

	  display: flex;
	  justify-content: space-between;
	  align-items: center;

	  cursor: pointer;
	  user-select: none;
	}

	.accordion-header .arrow {
	  transition: transform 0.3s ease;
	  text-shadow: none;
	}

	.accordion-content {
	  max-height: 0;
	  transition: max-height 0.4s ease;
	}

	.accordion-inner {
	  padding: 15px;
	  background: transparent;
	}

	.accordion-item.open .accordion-header .arrow {
	  transform: rotate(180deg);
	}

	/*

	.accordion {
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	  margin-top: 10px;
	  margin-bottom: 10px;
	}

	.accordion-item {
	  border-radius: 10px;
	  overflow: hidden;
	  
	  background: #fff;
	  border: 1px solid #0099ff;
	}

	.accordion-header {
	  padding: 15px 15px;
	  color: #0099ff;
	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  cursor: pointer;
	  user-select: none;

	}

	.accordion-header .arrow {
	  transition: transform 0.3s ease;
	  text-shadow: none;
	}

	.accordion-content {
	  max-height: 0;
	  transition: max-height 0.4s ease;
	}

	.accordion-inner {
	  padding: 15px;
	  background: transparent;
	}

	.accordion-item.open .accordion-header .arrow {
	  transform: rotate(180deg);
	}

	*/

	/* PÉLDAMONDATOK DOBOZ */

	.sentence-card {
	  border: 1px solid #a4dbff;
	  border-radius: 10px;
	  overflow: hidden;
	  background: #EDF8FF;
	}

	.sentence-card2 {
	  border: 1px solid #ccc;
	  border-radius: 10px;
	  overflow: hidden;
	}

	.sentence-card3 {
	  border: 1px solid #bad7e9;
	  border-radius: 10px;
	  overflow: hidden;
	}

	.sentence-card4 {
	  border: 1px solid #ccc;
	  border-radius: 10px;
	  overflow: hidden;
	  margin-bottom: 10px;
	}

	.sentence-card-header {
	  background: #a4dbff;
	  padding: 15px 15px;

	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;
	  text-align: left;
	  color: #004c80;
	}

	.sentence-card-header2 {
	  background: #ccc;
	  padding: 15px 15px;

	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;
	  text-align: left;
	  color: #333;
	}

	.sentence-card-header3 {
	  background: #bad7e9;
	  padding: 15px 15px;

	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;
	  text-align: left;
	  color: #1d435b;
	}

	.important-card {
	  border: 1px solid #ff6600;
	  border-radius: 10px;
	  overflow: hidden;
	  background: transparent;
	  color: #444;
	}

	.important-card-header {
	  background: #ff6600;
	  padding: 15px 15px;

	  font-family: "Ubuntu Condensed", sans-serif;
	  font-size: 19px;
	  text-align: left;
	  color: white;
	}

	.important-card-inner {
	  padding: 15px 15px 0;
	}

	.navi {
	  padding: 10px;
	  border-radius: 10px;
	  background: #edf8ff;
	  border: 1px solid #dbf0ff;
	  margin-top: 5px;
	  margin-bottom: 5px;
	}

	.sentence-row {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 15px;

	  padding: 12px 15px;
	  background: transparent;

	  position: relative;

	  align-items: center;
	}

	.sentence-row2 {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 15px;

	  padding: 12px 15px;
	  background: #fff;

	  position: relative;

	  align-items: center;
	}

	/*

	.sentence-row:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  height: 1px;
	  background: #ddd;
	}

	*/

	.sentence-row:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  border-bottom: 1px solid #d1edff;
	}

	.sentence-row2:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  height: 1px;
	  background: #ccc;
	}

	.en, .hu {
	  display: flex;
	  align-items: flex-start;
	  gap: 6px;

	  font-family: "Ubuntu", sans-serif;
	  line-height: 1.4;
	  text-align: left;
	  align-self: start;
	}

	.flag{
	    width: 15px;
	    height: auto;
	    flex-shrink: 0;
	    margin-top: 4px;
	}

	.flag2{
	    width: 16px;
	    height: auto;
	    flex-shrink: 0;
	    margin-top: 4px;
	}

	@media (max-width: 768px) {
	  .sentence-row {
	    grid-template-columns: 1fr;
	    gap: 6px;
	  }
	}

	.vocab-row {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 15px;

	  padding: 12px 15px;
	  background: #eee;

	  position: relative;

	  align-items: center;
	}

	.vocab-row:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  border-bottom: 1px solid #ddd;
	}

	.vocab-row2 {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 15px;

	  padding: 12px 15px;

	  position: relative;

	  align-items: center;
	}

	.vocab-row2:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  border-bottom: 1px solid #bad7e9;
	}

	/*

	.vocab-row:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  right: 15px;
	  bottom: 0;
	  height: 1px;
	  background: #ddd;
	}

	*/

	.my-grid {
	    display: grid;
	    grid-template-columns: 3fr 4fr;
	    gap: 25px;

	    margin-top: 40px;
	    margin-bottom: 20px;
	}

	.my-grid > div {
	    min-width: 0;
	}

	@media (max-width: 1100px) {

	    .my-grid {
	        grid-template-columns: 1fr;
	        margin-top: 10px;
	    }

    }

    .my-grid2 {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    gap: 15px;

	    margin-top: 0px;
	    margin-bottom: 0px;
	}

	@media (max-width: 768px) {

	    .my-grid2 {
	        grid-template-columns: 1fr;
	        margin-top: 0px;
	        gap: 0px;
	    }

    }

    .my-grid3 {
	    display: grid;
	    grid-template-columns: repeat(6, 1fr);
	    gap: 20px;
	}

	@media (max-width: 1400px) {
	    .my-grid3 {
	        grid-template-columns: repeat(4, 1fr);
	    }
	}

	@media (max-width: 1000px) {
	    .my-grid3 {
	        grid-template-columns: repeat(3, 1fr);
	    }
	}

	@media (max-width: 700px) {
	    .my-grid3 {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

	.my-grid4 {
	    display: grid;
	    grid-template-columns: repeat(6, 1fr);
	    gap: 20px;
	}

	@media (max-width: 1000px) {
	    .my-grid4 {
	        grid-template-columns: repeat(3, 1fr);
	    }
	}

	@media (max-width: 700px) {
	    .my-grid4 {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

	.two-column-grid {
	    display: grid;
	    grid-template-columns: 2fr 3fr;
	    align-items: center;
	    gap: 30px;
	}

	@media (max-width: 1000px) {
	    .two-column-grid {
	        grid-template-columns: 1fr;
	    }
	}

    .divider {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin: 10px 0;
	    margin-bottom: 30px;
	    color: #ff6600;
	    font-size: 20px;
	    font-family: "Ubuntu Condensed", sans-serif;
	}

	.divider::before,
	.divider::after {
	    content: "";
	    flex: 1;
	    height: 1px;
	    background: #ff6600;
	}

	.divider span {
	    padding: 0 10px;
	    white-space: nowrap;
	}

	.divider2 {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin: 15px 0;
	    margin-bottom: 20px;
	    color: #0099ff;
	    font-size: 20px;
	    font-family: "Ubuntu Condensed", sans-serif;
	}

	.divider2::before,
	.divider2::after {
	    content: "";
	    flex: 1;
	    height: 1px;
	    background: #0099ff;
	}

	.divider2 span {
	    padding: 0 10px;
	    white-space: nowrap;
	}

	.divider3 {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin: 15px 0;
	    margin-bottom: 11px;
	    color: #3463e0;
	    font-size: 20px;
	    font-family: "Ubuntu Condensed", sans-serif;
	}

	.divider3::before,
	.divider3::after {
	    content: "";
	    flex: 1;
	    height: 1px;
	    background: #3463e0;
	}

	.divider4 {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    margin: 15px 0;
	    margin-bottom: 15px;
	    color: #ddd;
	    font-size: 20px;
	    font-family: "Ubuntu Condensed", sans-serif;
	}

	.divider4::before,
	.divider4::after {
	    content: "";
	    flex: 1;
	    height: 1px;
	    background: #ddd;
	}

	/* TTS FELOLVASÓ */

	.tts-text {
	  color: #004c80;
	  transition: color 0.2s ease, text-decoration 0.2s ease;
	  display: inline;
	}

	.tts-link {
	  display: inline-flex;
	  align-items: center;
	  gap: 5px;
	  text-decoration: none;
	  color: #004c80;
	}

	.tts-link,
	.tts-link:visited {
	    color: #004c80;
	    text-decoration: none;
	}

	.tts-link:hover {
	    color: #0099ff;
	}

	.tts-icon-wrap {
	  white-space: nowrap;
	  display: inline-flex;
	  align-items: center;
	  margin-left: 5px;
	}

	.speaker {
	  font-size: 14px;
	  color: #555;
	  transition: color 0.2s ease;
	}

	.eng:hover {
	  color: #004c80;
	}

	/* PÁRBESZÉDEK*/

	.dialog-card-body {
	  padding: 0 15px;
	  padding-bottom: 5px;
	}

	.dialog-row {
	  display: flex;
	  margin: 20px 0;
	  align-items: center;
	}

	.dialog-row.left {
	  justify-content: flex-start;
	}

	.dialog-row.right {
	  justify-content: flex-end;
	}

	.bubble {
	  position: relative;
	  display: inline-block;
	  max-width: 75%;
	  padding: 15px 15px;
	  border-radius: 10px;
	  font-family: "Ubuntu", sans-serif;
	  line-height: 1.4;
	}

	.dialog-row.left .bubble::after {
	  content: "";
	  position: absolute;

	  left: 15px;
	  top: 100%;
	  transform: translateY(-50%) rotate(45deg);

	  width: 12px;
	  height: 12px;

	  background: #0062A4;
	  border-radius: 1px;
	}

	.dialog-row.right .bubble::after {
	  content: "";
	  position: absolute;

	  right: 15px;
	  top: 100%;
	  transform: translateY(-50%) rotate(45deg);

	  width: 12px;
	  height: 12px;

	  background: #A4DBFF;
	  border-radius: 1px;
	}

	.dialog-row.left .bubble {
	  background: #0062A4;
	}

	.dialog-row.right .bubble {
	  background: #A4DBFF;
	}

	.dialog-text {
	  color: white;
	}

	.dialog-text2 {
	  color: #444;
	}

	.dialog-row.left .bubble .speaker {
	  color: white;
	  font-size: 14px;
	}

	.dialog-row.right .bubble .speaker {
	  color: #444;
	  font-size: 14px;
	}

	.hu-translation {
	  font-size: 0.9em;
	  color: #666;
	  line-height: 1.2;
	}

	.bubble.show-hu .hu-translation {
	  margin-top: 20px;
	}

	.bubble-left .hu-translation {
	  color: #bbb;
	}

	.bubble-right .hu-translation {
	  color: #666;
	}

	/* FORDÍTÁS KAPCSOLÓ */

	.lang-switch {
	  display: inline-flex;
	  align-items: center;
	  gap: 5px;
	  margin: 20px 0;
	  font-family: "Ubuntu", sans-serif;
	  user-select: none;
	  margin-bottom: 0px;
	}

	.lang-label {
	  font-size: 13px;
	  color: #666;
	}

	/* switch keret */
	.switch {
	  position: relative;
	  display: inline-block;
	  width: 44px;
	  height: 24px;
	}

	/* checkbox elrejtése */
	.switch input {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}

	/* slider háttér */
	.slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #d1d5db;
	  transition: 0.3s;
	  border-radius: 34px;
	}

	/* pöcök */
	.slider:before {
	  position: absolute;
	  content: "";
	  height: 18px;
	  width: 18px;
	  left: 3px;
	  bottom: 3px;
	  background-color: white;
	  transition: 0.3s;
	  border-radius: 50%;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}

	/* aktív állapot */
	.switch input:checked + .slider {
	  background-color: #0099ff;
	}

	.switch input:checked + .slider:before {
	  transform: translateX(20px);
	}

	/* KÉK GOMB */

	.btn-primary {
	  background: #0099ff;
	  color: #fff;
	  border: none;
	  border-radius: 10px;

	  padding: 14px 16px 16px;
	  font-size: 21px;
	  font-family: "Ubuntu Condensed", sans-serif;
	  font-weight: 400;

	  cursor: pointer;

	  transition: all 0.2s ease;

	  margin-top: 2px;
	  margin-bottom: 10px;
	}

	.btn-primary:hover {
	  background: #0083db;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.btn-primary:active {
	  background: #24a8ff;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.fa-house {
	  font-size: 15px;
	  vertical-align: 0px;
	}

	.small-box {
	    width: 100%;
	    max-width: 650px;
	    margin: 0 auto;
	}

	/* NYELVTANI TÁBLÁZATOK */

	.grammar-table {
	    border-collapse: collapse;
	    width: fit-content;
	    margin: 0 auto;
	    white-space: nowrap;
	}

	.grammar-table2 {
	    border-collapse: collapse;
	    width: fit-content;
	    margin: 0 auto;
	    white-space: nowrap;
	}

	.grammar-table3 {
	    border-collapse: collapse;
	    width: fit-content;
	    margin: 0 auto;
	    white-space: nowrap;
	}

	.grammar-table td {
	    border: 1px solid #c8e3bc;
	    padding: 8px 10px;
	    text-align: center;
	    vertical-align: middle;
	    white-space: nowrap;
	    background: #edf9e8;
	}

	.grammar-table2 td {
	    border: 1px solid #b8def2;
	    padding: 8px 10px;
	    text-align: center;
	    vertical-align: middle;
	    white-space: nowrap;
	    background: #e5f5ff;
	}

	.grammar-table3 td {
	    border: 1px solid #ddc8ff;
	    padding: 8px 10px;
	    text-align: center;
	    vertical-align: middle;
	    white-space: nowrap;
	    background: #f4edff;
	}

	@media (max-width: 768px) {
	  .grammar-table td {
	    font-size: 15px;
	    padding: 4px 6px;
	  }
	}

	@media (max-width: 768px) {
	  .grammar-table2 td {
	    font-size: 15px;
	    padding: 4px 6px;
	  }
	}

	@media (max-width: 768px) {
	  .grammar-table3 td {
	    font-size: 15px;
	    padding: 4px 6px;
	  }
	}

	.grammar-table td:last-child {
	    vertical-align: middle;
	}

	.grammar-table2 td:last-child {
	    vertical-align: middle;
	}

	.grammar-table3 td:last-child {
	    vertical-align: middle;
	}

	.grammar-table td.translation {
	    text-align: left;
	}

	.grammar-table2 td.translation {
	    text-align: left;
	}

	.grammar-table3 td.translation {
	    text-align: left;
	}

	.table-scroll {
	    overflow-x: auto;
	    width: 100%;
	    -webkit-overflow-scrolling: touch;
	    margin-top: 20px;
	}

	.grammar-content[hidden] {
	    display: none;
	}

	.grammar-select {
	    width: content;
	    padding: 12px;

	    font-size: 16px;
	    font-family: inherit;

	    border: 1px solid #d8d8d8;
	    border-radius: 5px;

	    background-color: #fff;
	    cursor: pointer;

	    transition: .2s;
	}

	.grammar-select:hover {
	    border-color: #bbb;
	    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.grammar-select:focus {
	    outline: none;
	    border-color: #0099ff;
	    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.grammar-select {
	    appearance: none;
	    -webkit-appearance: none;
	    -moz-appearance: none;

	    padding: 12px 36px 12px 12px;

	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	    background-repeat: no-repeat;
	    background-position: right 10px center;
	    background-size: 16px;
	}

	#contracted-label {
	    display: inline-flex;
	    align-items: center;
	    gap: 6px;
	}

	#contracted:disabled {
	    opacity: 0.4;
	    cursor: not-allowed;
	}

	/* EZ A LÉNYEG */
	#contracted:disabled + span {
	    opacity: 0.4;
	}