﻿@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_Bold_Italic.ttf');
  font-weight: bold;
  font-style: italic;
}
@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_Light.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face{
  font-family: 'LGSmart';
  src: url('/fonts/LG_Smart_Regular_Italic.ttf');
  font-weight: normal;
  font-style: italic;
}


html {
  font-family: LGSmart;
  font-size: 24px;
}

body {
  font-family: inherit;
}

.form-control, .form-control:focus, .form-control:disabled {
  border-radius: 5px;
  background-color: #c4c4c4;
  color: #000000;
  font-size: 20px;
  border-color: transparent;
}

.form-control:disabled {
  background-color: transparent;
}

.subform .form-control:disabled {
  background-color: #c4c4c4;
}

.form-control::placeholder {
  color: #555655;
}

.subform {
  background-color: #ebebeb;
  font-size: 20px;
  padding: 20px;
}

.subform-header {
  font-size: 24px;
}

.nav-tabs {
  background-color: #c4c4c4;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.nav-tabs .nav-link, .nav-pills .nav-link {
  background-color: transparent;
  color: #a50034;
  border-style: none;
}

.nav-tabs .nav-link {
  padding: .25rem;
  font-size: 36px;
}

.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
  background-color: #a50034;
  color: #ffffff;
  border-style: none;
}

.nav-tabs .nav-link.active {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tab-content {
    background-color: #e5e5e5;
    padding: 1rem;
}

.tab-content-2 {
  background-color: rgba(196, 196, 196, 0.1);
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
}

.table td, .table th {
  text-align: center;
  border: none;
  padding: .25rem;
}

.table thead th {
  font-weight: 600;
}

.table tbody td {
  font-size: 20px;
}

.dropdown-item {
  font-size: 20px;
}

.btn {
  font-size: 22px;
  font-weight: 600;
}

.btn-primary, .btn-secondary {
  color: #ffffff;
  background-color: #a50034;
  border-color: transparent;
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);
}

#solution-button {
    background-color: #333333;
}

.btn-primary:hover, .btn-primary.hover, .btn-secondary:hover, .btn-secondary:hover,
.btn-primary:focus, .btn-primary.focus, .btn-secondary:focus, .btn-secondary:focus,
.btn-primary:disabled, .btn-primary.disabled, .btn-secondary:disabled, .btn-secondary:disabled {
  background-color: #6c757d;
  border-color: transparent;
}

.btn-primary {
  border-radius: 10000px;
}

.btn-secondary {
  border-radius: 10px;
}

#counter {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  text-align: center;

  font-size: 200px;
  color: #333333;
  opacity: 0.9;
}

header#timer_header {
  border-radius: 0 0 30px 30px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  background-color: #ececec;
  color: #333333;
  font-size: 40px;
  text-align: center;
}

.text-primary {
  color: #a50034 !important;
}

.rounded-input, .rounded-input:focus {
    border-radius: 20em !important;
    border: 0 !important;
    background-color: #c4c4c4 !important;
}

.login-input{
    width: 70%;
}

#share-modal-qr img {
  margin: auto;
}

.popover-body {
  font-size: 15px;
  padding: .25rem;
}

.semi-bold {
    font-weight: 600;
}
.table thead th{
    border-bottom: 0;
}

.not-selected-answer-button{
    background-color: #c4c4c4;
}

.selected-answer-button {
    background-color: #a50034;
}

.pink-circle-radius {
    border-radius: 50%;
    border-color: #A30736;
    border-style: solid;
    color: #A30736;
    text-align: center;
    display: inline-block;
}

.vertical-center-table td, .vertical-center-table th{
    vertical-align: middle !important;
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .tab-content {
        margin: 1rem;
    }
}