html {
  font-size: 18px;
  color: black;
}
body {
  overflow-x: hidden;
}
a {
  text-decoration: none;
}
p {
  font-size: 1rem;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #9B9B9B;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFB526;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFB526;
}
.hovermove svg {
  transition-duration: 1s;
}
.hovermove:hover svg {
  translate: 50px;
}
.block-bold-24 {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
}
.header {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: -156px;
  z-index: 100;
  position: relative;
  background-color: white;
}
.header .item {
  color: black;
  margin-left: 3rem;
  padding: 0.25rem 0.5rem;
}
.header .item.black-background {
  color: white;
  background-color: black;
}
.header .logo img {
  height: 100px;
}
.content-font-size-9 {
  font-size: 0.9rem;
}
.block-margin {
  margin-top: 150px;
  margin-bottom: 150px;
}
.level-1 {
  color: white;
  margin-right: 2.5rem;
}
.level-2 {
  color: #2663FF;
  margin-right: 2.5rem;
}
.level-3 {
  color: black;
  margin-right: 2.5rem;
}
.level-gray {
  color: #9B9B9B;
  margin-right: 2.5rem;
}
.icon {
  color: #9B9B9B;
}
.icon svg {
  margin-right: 0.5rem;
}
.icon path {
  fill: #9B9B9B;
}
.icon .stay-white {
  fill: white;
}
.icon.active {
  color: #2663FF;
}
.icon.active path {
  fill: #2663FF;
}
.icon.active .stay-white {
  fill: white;
}
.icon.active {
  color: #2663FF;
}
.icon.active path {
  fill: #2663FF;
}
.icon.active .stay-white {
  fill: white;
}
.icon.icon-white {
  color: white;
}
.icon.icon-white path {
  fill: white;
}
.icon.icon-white .stay-white {
  fill: transparent;
}
.arrow_btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  width: 338px;
}
.arrow_btn svg {
  width: 34px;
  height: 34px;
}
.arrow_btn.prev svg {
  transform: rotate(180deg);
  margin-right: 1rem;
  transition-duration: 1s;
}
.arrow_btn.next svg {
  margin-left: 1rem;
  transition-duration: 1s;
}
.arrow_btn:hover svg {
  margin-left: 1rem;
  translate: 83px;
}
.arrow_btn.prev:hover svg {
  margin-left: 1rem;
  translate: -83px;
}
.banner {
  position: relative;
  overflow: hidden;
}
.banner .banner__image {
  /*
        box-shadow: 0px 34px $main_blue;
        */
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.banner .banner__content .banner__content__title {
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.banner .banner__content .banner__content__login {
  color: white;
  position: absolute;
  display: inline-block;
  right: 0px;
  bottom: 85px;
  background-color: #FFB5267F;
}
.banner .banner__content .banner__content__logout {
  color: white;
  position: absolute;
  display: inline-block;
  right: 0px;
  bottom: 85px;
  background-color: #2663FF7F;
}
.banner .banner__blue {
  height: 34px;
  background-color: #2663FF;
}
.banner .left_top_box {
  position: absolute;
  /*
         top: 50%;
         */
  bottom: 85px;
  left: 0;
  height: 236px;
  width: 60%;
}
.home_block .min-height-75 {
  min-height: 75%;
}
.home_block .home_block__title {
  writing-mode: vertical-rl;
  margin-left: auto;
  margin-right: 0.5rem;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.5rem;
}
.home_block .home-block__content {
  padding: 2.5rem;
}
.home_block .style2 .home-block__content {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.home_block .style2 .home-block__content p {
  margin-bottom: 0px;
}
.home_block .style3 .home-block__style3 {
  filter: drop-shadow(35px 15px 0px #FFB526);
}
.home_block .style3 .home-block__style3 img {
  clip-path: circle(42%);
}
.login .signup__title {
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  color: white;
  font-weight: 700;
  letter-spacing: 0.5rem;
  margin-left: auto;
  text-align: center;
  padding: 0.4rem;
}
.login .signup__title.active {
  background-color: #FFB526;
  filter: drop-shadow(7px 8px 0px rgba(42, 42, 41, 0.5));
}
.login .content {
  background-color: #FFB526;
  filter: drop-shadow(7px 8px 0px rgba(42, 42, 41, 0.5));
  height: 628px;
}
.login .resetpassword_btn {
  font-size: 0.8rem;
  color: #2A2A29;
  text-decoration: underline;
  display: inline-block;
  font-weight: 300;
}
.login .form-group label {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 2.25rem;
  margin-bottom: 0.25rem;
}
.login .form-group .form-control {
  border-width: 0px;
  border-radius: 0px;
  width: 100%;
  width: 350px;
}
.login .sign-up-text {
  font-size: 0.9rem;
  color: #2663FF;
  font-weight: 300;
  line-height: 1;
  margin-top: 1.25rem;
}
.login .sign-up-link {
  color: #2663FF;
  font-size: 0.8rem;
  text-decoration: underline;
  font-weight: 300;
  line-height: 1;
}
.login .btn-login {
  color: white;
  font-weight: 700;
  font-size: 1.8rem;
  border: 0px;
  float: right;
  padding: 0;
  margin-top: 1rem;
}
.login .btn-login:hover {
  border: 0px;
}
.signup {
  min-height: 100vh;
}
.signup .signup__title {
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  color: white;
  font-weight: 700;
  letter-spacing: 0.5rem;
  margin-left: auto;
  text-align: center;
  padding: 0.4rem;
}
.signup .signup__title.active {
  background-color: #2663FF;
  filter: drop-shadow(7px 8px 0px rgba(42, 42, 41, 0.5));
}
.signup .content {
  background-color: #2663FF;
  filter: drop-shadow(7px 8px 0px rgba(42, 42, 41, 0.5));
  height: 628px;
}
.signup .form-group label {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 2.25rem;
  margin-bottom: 0.25rem;
}
.signup .form-group .form-control {
  border-width: 0px;
  border-radius: 0px;
  width: 100%;
  width: 350px;
}
.signup .login-text {
  font-size: 0.9rem;
  color: #FFB526;
  font-weight: 300;
  line-height: 1;
  margin-top: 1.25rem;
}
.signup .login-link {
  color: #FFB526;
  font-size: 0.8rem;
  text-decoration: underline;
  font-weight: 300;
  line-height: 1;
}
.signup .btn-signup {
  color: white;
  font-weight: 700;
  font-size: 1.8rem;
  border: 0px;
  float: right;
  padding: 0;
  margin-top: 1rem;
}
.signup .btn-signup:hover {
  border: 0px;
}
.video .video__search-container {
  width: 100%;
  max-width: 874px;
}
.video .video__search-container .video__search {
  position: relative;
}
.video .video__search-container .video__search input {
  border: 0px solid #ced4da;
  border-radius: 0px;
  border-bottom: 10px solid #2663FF;
}
.video .video__search-container .video__search svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.video .top-bar {
  background-color: #FFB526;
  padding: 0.5rem 8rem;
}
.video .top-bar .arrow_btn {
  color: white;
  width: 260px;
  font-size: 1.8rem;
}
.video .top-bar .arrow_btn svg {
  width: 44px;
  height: 44px;
}
.video .content-container {
  padding: 2rem 8rem;
}
.video .content-container .link-container {
  margin-bottom: 1.5rem;
}
.video .content-container .title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.pagination {
  width: 100%;
  max-width: 874px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 5px solid #2663FF;
}
.pagination .pagenumber {
  color: #9B9B9B;
  position: relative;
}
.pagination .pagenumber.active {
  color: #2663FF;
}
.pagination .pagenumber.active:before {
  content: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8809 0C16.1789 0 14.8 1.38016 14.8 3.08092C14.8 4.78416 16.1789 6.16667 17.8809 6.16667C19.5866 6.16667 20.9667 4.78416 20.9667 3.08092C20.9667 1.38016 19.5866 0 17.8809 0ZM8.01667 7.4C7.24185 7.4 6.5087 7.76778 6.04382 8.38763L2.71237 12.8271C2.6152 12.9568 2.54454 13.1044 2.50441 13.2614C2.46429 13.4184 2.45548 13.5818 2.4785 13.7422C2.50153 13.9026 2.55592 14.0569 2.63859 14.1963C2.72125 14.3357 2.83057 14.4574 2.96029 14.5546C3.09001 14.6517 3.23759 14.7223 3.39461 14.7624C3.55163 14.8025 3.715 14.8112 3.87541 14.7882C4.03581 14.7651 4.1901 14.7107 4.32946 14.628C4.46883 14.5453 4.59053 14.4359 4.68763 14.3062L7.93717 9.97507L10.9121 10.5701L8.79232 16.9053L8.80677 16.9102C8.70375 17.2177 8.63333 17.5389 8.63333 17.8809C8.63333 19.5842 10.0123 20.9667 11.7143 20.9667C11.9808 20.9667 12.2361 20.9217 12.4827 20.8583L18.1314 20.0658L26.3818 22.0169L26.7431 22.1374C26.8968 22.1887 27.0592 22.2092 27.2209 22.1977C27.3825 22.1862 27.5404 22.143 27.6853 22.0706C27.8303 21.9981 27.9596 21.8978 28.0658 21.7753C28.172 21.6529 28.2531 21.5108 28.3043 21.357C28.3556 21.2032 28.376 21.0409 28.3645 20.8792C28.353 20.7175 28.3098 20.5597 28.2373 20.4148C28.1648 20.2698 28.0644 20.1405 27.942 20.0344C27.8195 19.9282 27.6773 19.8472 27.5236 19.796L20.1236 17.3293C20.0383 17.3013 19.9503 17.2828 19.861 17.2739L15.4576 16.4163L16.8066 12.3767L20.2488 14.5663C20.431 14.6975 20.6455 14.7764 20.8692 14.7947C21.0929 14.8129 21.3173 14.7698 21.5183 14.6699L26.4516 12.2033C26.5965 12.1308 26.7258 12.0306 26.8319 11.9082C26.9381 11.7858 27.0191 11.6437 27.0703 11.4901C27.1216 11.3364 27.142 11.1741 27.1306 11.0125C27.1191 10.8509 27.0759 10.6932 27.0034 10.5483C26.931 10.4034 26.8307 10.2742 26.7083 10.168C26.5859 10.0619 26.4438 9.98091 26.2901 9.92969C26.1365 9.87848 25.9742 9.85804 25.8126 9.86954C25.651 9.88105 25.4933 9.92427 25.3484 9.99675L21.21 12.066L17.9893 8.84531C17.0642 7.92014 15.8094 7.4 14.5013 7.4H8.01667ZM7.54935 21.5159C6.97585 22.6049 6.20039 24.0849 6.20039 24.1367C6.20039 24.2181 0.79974 25.9771 0.79974 25.9771V25.9795C0.564918 26.0677 0.362566 26.2254 0.219677 26.4315C0.0767877 26.6377 0.000154886 26.8825 0 27.1333C0 27.4604 0.12994 27.7741 0.361235 28.0054C0.59253 28.2367 0.906233 28.3667 1.23333 28.3667C1.3449 28.3664 1.45592 28.351 1.56335 28.3209C1.56415 28.3209 1.56495 28.3209 1.56576 28.3209L7.21452 27.1791C7.75965 27.0693 8.25035 26.7771 8.60925 26.3529L11.1241 23.3731C9.69959 23.2202 8.44352 22.5408 7.54935 21.5159Z' fill='%232663FF'/%3E%3C/svg%3E%0A");
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: -25px;
}
.watching {
  margin-top: 156px;
  padding-top: 1.75rem;
  padding-bottom: 10rem;
}
.watching .back-btn {
  margin-top: 1.75rem;
  color: white;
}
.watching .back-btn svg {
  margin-right: 1.75rem;
  transition-duration: 1s;
}
.watching .back-btn:hover svg {
  translate: -50px;
}
.watching .watching-nav {
  color: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.watching .watching-nav .item.active {
  border-bottom: 4px solid #FFB526;
}
.watching .watching-nav .item a {
  color: inherit;
}
.watching .watching-nav .item a:hover {
  color: inherit;
}
.watching .underline {
  border-bottom: 1px solid white;
  margin-bottom: 3rem;
}
.watching .arrow_btn {
  width: auto;
}
.watching .next-btn {
  display: block;
  width: 100%;
  color: white;
  background-color: #ffb5267F;
  border: 0px;
}
.watching .next-btn:focus {
  border: 0px;
}
.watching .prev-btn {
  display: block;
  width: 100%;
  color: white;
  background-color: #2663ff7F;
}
.watching-1 .title {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}
.watching-1 iframe {
  /*
        margin-top: 2.25rem;
        */
  /*
        margin-bottom: 2.25rem;
        */
}
.watching-1 .form-select {
  border: 1px solid #FFB526;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background-color: #00000033;
  background-image: url("data:image/svg+xml,%3Csvg width='27' height='16' viewBox='0 0 27 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.37937 8.49669e-07L-5.94586e-07 2.39745L13.5 16L27 2.39745L24.6206 -1.22527e-07L13.5 11.1881L2.37937 8.49669e-07Z' fill='%23FFB526'/%3E%3C/svg%3E%0A");
}
.watching-1 .selectize-input {
  border: 1px solid #FFB526;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #00000033 !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  border-radius: 0.375rem;
  line-height: inherit;
}
.watching-1 .selectize-input.dropdown-active::before {
  background: transparent;
}
.watching-1 .selectize-control.single .selectize-input:after {
  border-width: 0;
}
.watching-1 .selectize-control.single .selectize-input.dropdown-active:after {
  border-width: 0;
}
.watching-1 .selectize-dropdown {
  border: 1px solid #FFB526;
  border-radius: 0.375rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #00000033 !important;
}
.watching-1 .search {
  margin-top: 0.5rem;
  position: relative;
  margin-bottom: 2.25rem;
}
.watching-1 .search input {
  border: 1px solid #FFB526;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #00000033;
}
.watching-1 .search svg {
  position: absolute;
  top: 50%;
  right: 0%;
  translate: -50% -50%;
}
.watching-2 .youtube-video {
  /*
        pointer-events: none;
        */
}
.watching-2 video {
  /*
        pointer-events: none;
        */
  background-color: #000000CC;
}
.watching-2 .progressbar {
  position: relative;
}
.watching-2 .progressbar #custom-seekbar {
  margin-top: 3rem;
  height: 8px;
  width: 100%;
  background-color: #9B9B9B;
}
.watching-2 .progressbar #custom-seekbar span {
  width: calc(100% *  var(--currenttime, 0) / var(--duration, 1));
  display: block;
  height: 8px;
  background-color: #FFB526;
}
.watching-2 .progressbar .progressbar-time {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.watching-2 .progressbar .timeline-pin {
  position: absolute;
  top: 0;
  left: calc(100% * var(--point) / var(--duration));
  translate: -50% -100%;
}
.watching-2 .progressbar .timeline-pin .pin-text {
  font-size: 0.7rem;
  color: white;
  text-align: center;
}
.watching-2 .progressbar .timeline-pin svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.watching-2 .progressbar .timeline-pin svg path:first-child {
  fill: #9B9B9B;
}
.watching-2 .progressbar .timeline-pin.active svg path:first-child {
  fill: #FFB526;
}
.watching-2 .content-container {
  margin-top: 1.1rem;
  background-color: rgba(42, 42, 41, 0.5);
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 1.4rem;
}
.watching-2 .content-container .title {
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
}
.watching-2 .content-container .content {
  color: white;
  font-size: 0.9rem;
}
.watching-2 .control .control-btn {
  margin: 1rem 1rem;
  cursor: pointer;
}
.watching-2 .control .control-btn:hover path {
  fill: white;
}
.watching-2 .title {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}
.watching-2 .title {
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
}
.watching-2 .video-container {
  background-color: rgba(42, 42, 41, 0.5);
  padding-left: 3rem;
  padding-right: 3rem;
}
.watching-2 .form {
  margin-top: 1.1rem;
  background-color: rgba(42, 42, 41, 0.5);
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 1.4rem;
}
.watching-2 .form .timeline-container {
  height: 400px;
  overflow: auto;
}
.watching-2 .form .time-icon {
  margin-right: 0.5rem;
}
.watching-2 .form .time-point {
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
}
.watching-2 .form .movment {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}
.watching-2 .form .form-check {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.watching-2 .form .form-check-label {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.watching-2 .form .form-check-input {
  border-radius: 0px;
  border-color: #FFB526;
}
.watching-2 .form .form-check-input:checked {
  background-color: #FFB526;
}
.watching-2 .form .form-check-input:focus {
  border: 0px;
  box-shadow: none;
}
.watching-2 .form .underline {
  border-color: #9B9B9B;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
.watching-2 .score-container {
  margin-top: 1.1rem;
  background-color: rgba(42, 42, 41, 0.5);
  padding: 3rem;
  margin-bottom: 3rem;
}
.watching-2 .score-container .form-label {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  /*
              margin-top: 1rem;*/
}
.watching-2 .score-container .form-control {
  border: 0px;
  border-radius: 0px;
  margin-bottom: 1rem;
}
.watching-2 .score-container .form-control:hover {
  border: 0px;
}
.watching-2 .btn-upload {
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: var(--bs-btn-hover-bg);
  border-color: white;
  margin-bottom: 0.5rem;
}
.watching-2 .btn-upload h2 {
  margin-bottom: 0px;
}
.watching-2 .btn-upload:hover {
  /*
            h2{
             transition-duration: 1s;
                scale: 1.05;
            }
            */
}
.watching-result .submit .title {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}
.watching-result .submit .blue-background {
  background-color: #2663FF;
  padding: 1.5rem 1rem;
  max-width: 920px;
}
.watching-result .submit .back {
  color: #FFB526;
}
.watching-result .submit .back svg {
  margin-right: 0.5rem;
}
.watching-result .submit .back span {
  transition-duration: 1s;
}
.watching-result .submit .back:hover span {
  display: inline-block;
  translate: 50px;
}
.watching-result .submit .copy-btn {
  color: #FFB526;
  text-decoration: underline;
}
.watching-result .submit .copy-btn svg {
  margin-right: 0.5rem;
}
.watching-result .submit .text {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 700px;
}
.watching-result .submit .try-btn {
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
}
.watching-result .submit .try-btn svg {
  margin-left: 0.5rem;
}
.watching-result .submit .demo-btn {
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
}
.watching-result .submit .demo-btn svg {
  margin-left: 0.5rem;
}
.watching-result .submit .rubrics .timeline-title {
  font-size: 0.9rem;
  color: white;
  font-weight: 500;
}
.watching-result .submit .rubrics .form-check-label {
  font-size: 0.9rem;
  color: white;
  font-weight: 500;
}
.watching-result .submit .form-check-input:checked {
  background-color: #FFB526;
  border-color: #FFB526;
}
.watching-result .submit .score {
  font-weight: bold;
  font-size: 1.8rem;
  color: white;
}
.watching-result .submit .score .blue {
  color: #FFB526;
  font-size: 4.8rem;
}
.watching-result .submit .content {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.watching-result .submit .rubrics-container {
  height: 400px;
  overflow: auto;
}
.level-icon svg {
  margin-right: 0.5rem;
}
.level-icon .vertical svg {
  margin-right: 0;
}
#footer .footer-1 {
  color: white;
  background-color: #2663FF;
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
}
#footer .footer-1 .footer-title {
  text-decoration: underline;
}
#footer .footer-1 a {
  color: white;
  /*
            margin-right: 3rem;
            */
}
#footer .footer-1 .circle-container {
  overflow: hidden;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}
#footer .footer-1 .circle-container .circle {
  position: relative;
  bottom: 0;
  right: -50px;
  background-color: white;
  border-radius: 50%;
  height: 400px;
  width: 400px;
  translate: 0px 50%;
  box-shadow: -10px -10px #FFB526;
  margin-top: -150px;
  overflow: hidden;
}
#footer .footer-1 .padding-right {
  padding-right: 20rem;
}
#footer .footer-2 {
  color: white;
  background-color: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
#footer .footer-2 .left a {
  text-decoration: underline;
  color: white;
  margin-right: 3rem;
}
#footer .footer-2 .right .item {
  color: #2663FF;
  padding-left: 3rem;
}
.my-account .softdelete_btn {
  position: absolute;
  left: -1rem;
  top: 50%;
  translate: -50% -50%;
  flex-shrink: 0;
  width: auto;
  max-width: unset;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}
.my-account .user-container {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px;
  padding: 1rem 3rem;
}
.my-account .user-container .username {
  margin-left: 2rem;
  position: relative;
}
.my-account .user-container .username input {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  border: 0px;
  border-bottom: 3px solid #2663FF;
}
.my-account .user-container .username .edit-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 0;
  font-size: 0.9rem;
  color: #9B9B9B;
  border: 0px;
  padding: 0;
}
.my-account .user-container .username .edit-btn:hover {
  border: 0px;
}
.my-account .demonstrationvideo-container {
  border-bottom: 14px solid #FFB526;
  font-size: 1.8rem;
  color: #2663FF;
  font-weight: bold;
  display: block;
}
.my-account .history {
  padding-bottom: 150px;
}
.my-account .history .content-container {
  max-height: 0px;
  overflow: hidden;
  /*
            transition-duration: 0.5s;
            */
}
.my-account .history .title-bar {
  position: relative;
  background-color: #2663FF;
  color: white;
}
.my-account .history .title-bar.show ~ .content-container {
  max-height: 11000px;
}
.my-account .history .title-bar.show:after {
  rotate: 180deg;
}
.my-account .history .title-bar:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  height: 1rem;
  width: 1rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: -50% -50%;
  color: white;
  transition-duration: 0.5s;
}
.my-account .history .title-bar .form-select {
  background-color: transparent;
  color: white;
  border: 0px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem 0.375rem 2.25rem;
  background-position: left 0.75rem center;
  background-image: url("data:image/svg+xml, %3Csvg width='17' height='18' viewBox='0 0 17 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.19338 1.93231C4.91791 1.93231 4.65372 2.03398 4.45893 2.21494C4.26414 2.39591 4.15471 2.64135 4.15471 2.89728C4.15471 3.15321 4.26414 3.39865 4.45893 3.57962C4.65372 3.76059 4.91791 3.86225 5.19338 3.86225C5.46886 3.86225 5.73305 3.76059 5.92784 3.57962C6.12263 3.39865 6.23206 3.15321 6.23206 2.89728C6.23206 2.64135 6.12263 2.39591 5.92784 2.21494C5.73305 2.03398 5.46886 1.93231 5.19338 1.93231ZM2.25393 1.93231C2.46852 1.36729 2.86648 0.878013 3.39294 0.531931C3.91941 0.18585 4.54846 0 5.19338 0C5.83831 0 6.46736 0.18585 6.99383 0.531931C7.52029 0.878013 7.91825 1.36729 8.13284 1.93231H15.5802C15.8556 1.93231 16.1198 2.03398 16.3146 2.21494C16.5094 2.39591 16.6188 2.64135 16.6188 2.89728C16.6188 3.15321 16.5094 3.39865 16.3146 3.57962C16.1198 3.76059 15.8556 3.86225 15.5802 3.86225H8.13284C7.91825 4.42728 7.52029 4.91655 6.99383 5.26263C6.46736 5.60871 5.83831 5.79456 5.19338 5.79456C4.54846 5.79456 3.91941 5.60871 3.39294 5.26263C2.86648 4.91655 2.46852 4.42728 2.25393 3.86225H1.03868C0.763203 3.86225 0.499011 3.76059 0.304222 3.57962C0.109432 3.39865 0 3.15321 0 2.89728C0 2.64135 0.109432 2.39591 0.304222 2.21494C0.499011 2.03398 0.763203 1.93231 1.03868 1.93231H2.25393ZM11.4254 7.72214C11.15 7.72214 10.8858 7.82381 10.691 8.00477C10.4962 8.18574 10.3868 8.43119 10.3868 8.68711C10.3868 8.94304 10.4962 9.18848 10.691 9.36945C10.8858 9.55042 11.15 9.65209 11.4254 9.65209C11.7009 9.65209 11.9651 9.55042 12.1599 9.36945C12.3547 9.18848 12.4641 8.94304 12.4641 8.68711C12.4641 8.43119 12.3547 8.18574 12.1599 8.00477C11.9651 7.82381 11.7009 7.72214 11.4254 7.72214ZM8.48599 7.72214C8.70058 7.15712 9.09854 6.66784 9.625 6.32176C10.1515 5.97568 10.7805 5.78983 11.4254 5.78983C12.0704 5.78983 12.6994 5.97568 13.2259 6.32176C13.7524 6.66784 14.1503 7.15712 14.3649 7.72214H15.5802C15.8556 7.72214 16.1198 7.82381 16.3146 8.00477C16.5094 8.18574 16.6188 8.43119 16.6188 8.68711C16.6188 8.94304 16.5094 9.18848 16.3146 9.36945C16.1198 9.55042 15.8556 9.65209 15.5802 9.65209H14.3649C14.1503 10.2171 13.7524 10.7064 13.2259 11.0525C12.6994 11.3985 12.0704 11.5844 11.4254 11.5844C10.7805 11.5844 10.1515 11.3985 9.625 11.0525C9.09854 10.7064 8.70058 10.2171 8.48599 9.65209H1.03868C0.763203 9.65209 0.499011 9.55042 0.304222 9.36945C0.109432 9.18848 0 8.94304 0 8.68711C0 8.43119 0.109432 8.18574 0.304222 8.00477C0.499011 7.82381 0.763203 7.72214 1.03868 7.72214H8.48599ZM5.19338 13.512C4.91791 13.512 4.65372 13.6136 4.45893 13.7946C4.26414 13.9756 4.15471 14.221 4.15471 14.4769C4.15471 14.7329 4.26414 14.9783 4.45893 15.1593C4.65372 15.3403 4.91791 15.4419 5.19338 15.4419C5.46886 15.4419 5.73305 15.3403 5.92784 15.1593C6.12263 14.9783 6.23206 14.7329 6.23206 14.4769C6.23206 14.221 6.12263 13.9756 5.92784 13.7946C5.73305 13.6136 5.46886 13.512 5.19338 13.512ZM2.25393 13.512C2.46852 12.947 2.86648 12.4577 3.39294 12.1116C3.91941 11.7655 4.54846 11.5797 5.19338 11.5797C5.83831 11.5797 6.46736 11.7655 6.99383 12.1116C7.52029 12.4577 7.91825 12.947 8.13284 13.512H15.5802C15.8556 13.512 16.1198 13.6136 16.3146 13.7946C16.5094 13.9756 16.6188 14.221 16.6188 14.4769C16.6188 14.7329 16.5094 14.9783 16.3146 15.1593C16.1198 15.3403 15.8556 15.4419 15.5802 15.4419H8.13284C7.91825 16.0069 7.52029 16.4962 6.99383 16.8423C6.46736 17.1884 5.83831 17.3742 5.19338 17.3742C4.54846 17.3742 3.91941 17.1884 3.39294 16.8423C2.86648 16.4962 2.46852 16.0069 2.25393 15.4419H1.03868C0.763203 15.4419 0.499011 15.3403 0.304222 15.1593C0.109432 14.9783 0 14.7329 0 14.4769C0 14.221 0.109432 13.9756 0.304222 13.7946C0.499011 13.6136 0.763203 13.512 1.03868 13.512H2.25393Z' fill='white'/%3E%3C/svg%3E");
}
.my-account .history .title-bar .form-select:focus {
  box-shadow: none;
}
.my-account .history .title-bar .form-select option {
  color: #2663FF;
}
.my-account .history .sub-title-bar {
  color: #9B9B9B;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 3px solid #FFB526;
}
.my-account .history .title {
  font-weight: bold;
  font-size: 1.2rem;
}
.my-account .history .record {
  font-size: 0.9rem;
  font-weight: 500;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.my-account .history .record svg {
  width: 25px;
  height: 25px;
}
.my-account .history .record:nth-child(2n+1) {
  background-color: #F8F8F8;
}
.my-account .history .record .date {
  color: black;
}
.my-account .history .record .sport {
  color: #2663FF;
}
.my-account .history .record .sport svg {
  margin-right: 0.5rem;
}
.my-account .history .record .sport path {
  fill: #2663FF;
}
.my-account .history .record .sport .stay-white {
  fill: white;
}
.my-account .history .record .classification {
  color: #2663FF;
}
.my-account .history .record .classification svg {
  margin-right: 0.5rem;
}
.my-account .history .record .level {
  color: #FFB526;
}
.my-account .history .record .level .level-1 {
  color: #FFB526;
}
.my-account .history .record .level .level-1 ellipse {
  fill: #FFB526;
}
.my-account .history .record .level .level-1 path {
  fill: white;
}
.my-account .history .record .level svg {
  margin-right: 0.5rem;
}
.my-account .history .record .fitness-title {
  color: #2663FF;
  text-decoration: underline;
  text-align: center;
}
.my-account .history .record .rubrics {
  color: #2663FF;
  text-decoration: underline;
}
.my-account .history .record .rubrics svg {
  margin-left: 0.5rem;
}
.my-account .history .record .review {
  color: #2663FF;
  text-decoration: underline;
}
.my-account .history .record .review svg {
  margin-left: 0.5rem;
}
#rubrics .modal-content {
  padding: 3rem;
  position: relative;
}
#rubrics .modal-content .btn-blue-close {
  position: absolute;
  border: 0px solid transparent;
  right: 1rem;
  top: 1rem;
}
#rubrics .modal-content .left .big-title {
  color: #2663FF;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
#rubrics .modal-content .left .big-title svg {
  margin-right: 1rem;
}
#rubrics .modal-content .left .fitness-data {
  font-weight: 500;
  font-size: 0.9rem;
  color: #9B9B9B;
}
#rubrics .modal-content .left .fitness-data svg {
  width: 19px;
  height: 19px;
}
#rubrics .modal-content .left .fitness-data .sport svg {
  margin-right: 1rem;
}
#rubrics .modal-content .left .fitness-data .classification svg {
  margin-left: 1rem;
  margin-right: 1rem;
}
#rubrics .modal-content .left .fitness-data .classification path {
  fill: #9B9B9B;
}
#rubrics .modal-content .left .fitness-data .level svg {
  margin-left: 1rem;
  margin-right: 1rem;
}
#rubrics .modal-content .left .fitness-data .level ellipse {
  fill: #9B9B9B;
}
#rubrics .modal-content .left .fitness-data .level path {
  fill: white;
}
#rubrics .modal-content .left .fitness-data .level .level-1 {
  color: #9B9B9B;
}
#rubrics .modal-content .left .fitness-data .level .level-2 {
  color: #9B9B9B;
}
#rubrics .modal-content .left .fitness-data .level .level-3 {
  color: #9B9B9B;
}
#rubrics .modal-content .right .score-title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #2A2A29;
}
#rubrics .modal-content .right .score-number {
  font-weight: bold;
  font-size: 1.8rem;
  color: #2A2A29;
}
#rubrics .modal-content .right .score-number .score-number-blue {
  color: #2663FF;
  font-size: 4.8rem;
  line-height: 1;
}
#rubrics .modal-content .title {
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
#rubrics .modal-content .underline {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #F1F1F1;
}
#rubrics .modal-content .timeline-title {
  font-size: 0.9rem;
  color: black;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
#rubrics .modal-content .form-check-input {
  border-radius: 0px;
  border: 1px solid black;
}
#rubrics .modal-content .form-check-input:checked {
  border: 1px solid white;
  background-color: black;
  box-shadow: 0 0 0px 2px black;
}
#rubrics .modal-content .form-check-input::focus {
  box-shadow: 0 0 0px 2px black;
}
#rubrics .modal-content .form-check-label {
  font-size: 0.9rem;
  color: black;
  font-weight: 500;
}
#rubrics .modal-content .comment-container {
  min-height: 50px;
  max-height: 200px;
  overflow: auto;
}
#rubrics .modal-content .comment-container .comment-content {
  font-weight: 500;
  font-size: 0.9rem;
  color: black;
}
#rubrics .rubrics-container {
  height: 400px;
  overflow: auto;
}
.contact_us {
  padding-top: 5.5rem;
  padding-bottom: 9rem;
}
.contact_us .title {
  font-weight: bold;
  color: black;
  font-size: 1.2rem;
}
.contact_us form {
  background-color: #FFB526;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.contact_us form .underline {
  border-bottom: 1px solid white;
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
}
.contact_us form .form-label {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}
.contact_us form .form-control {
  border: 0px;
}
.contact_us form .form-control:hover {
  border: 0px;
}
.contact_us form .send-btn {
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
}
.contact_us .image-container {
  /*
        background: rgba(217, 217, 217, 0.5); 
        */
}
.contact_us .image-container img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.contact_us .text-container {
  background-color: white;
}
.contact_us .text-container p {
  margin-bottom: 0px;
}
.contact_us .text-container .content {
  font-size: 0.9rem;
  font-weight: 500;
}
.contact_us .text-container .row > * {
  margin-top: 3rem;
}
.demonstration-video {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.demonstration-video .search-bar .title {
  color: #2663FF;
  font-weight: 500;
  margin-bottom: 0.8rem;
  margin-top: 0.8rem;
}
.demonstration-video .search-bar .form-select {
  color: #2663FF;
  font-size: 0.9rem;
  border: 0px;
  border-bottom: 3px solid #2663FF;
  border-radius: 0px;
  background-image: url("data:image/svg+xml,%3Csvg width='27' height='16' viewBox='0 0 27 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.37937 8.49669e-07L-5.94586e-07 2.39745L13.5 16L27 2.39745L24.6206 -1.22527e-07L13.5 11.1881L2.37937 8.49669e-07Z' fill='%232663FF'/%3E%3C/svg%3E%0A");
}
.demonstration-video .search-bar .form-select:focus {
  box-shadow: none;
}
.demonstration-video .search-bar .form-control {
  color: #2663FF;
  font-size: 0.9rem;
  border: 0px;
  border-bottom: 3px solid #2663FF;
  border-radius: 0px;
}
.demonstration-video .search-bar .form-control:focus {
  box-shadow: none;
}
.demonstration-video .search-bar .search {
  position: relative;
}
.demonstration-video .search-bar .search svg {
  position: absolute;
  top: 50%;
  right: 0;
  translate: -50% 0;
}
.demonstration-video .fitness-container {
  background-color: #F8F8F8;
  padding: 2.5rem 5rem;
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.demonstration-video .fitness-container .title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.demonstration-video .fitness-container .content {
  font-weight: 500;
  font-size: 0.9rm;
}
.demonstration-video .fitness-container .try-btn {
  color: #FFB526;
  font-weight: bold;
  font-size: 1.8rem;
}
.review-page {
  margin-top: 156px;
  padding-top: 1.75rem;
  padding-bottom: 10rem;
  background-color: #FFB526;
}
.review-page .back-btn {
  margin-top: 1.75rem;
  color: #2663FF;
}
.review-page .back-btn svg {
  margin-right: 1.75rem;
  transition-duration: 1s;
}
.review-page .back-btn svg path {
  fill: #2663FF;
}
.review-page .back-btn:hover svg {
  translate: -50px;
}
.review-page .title {
  color: #2663FF;
  font-size: 1.8rem;
  font-weight: bold;
}
.review-page .title svg {
  margin-right: 1rem;
}
.review-page .detail-bar {
  background-color: #ECECEC;
  padding: 1rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-page .detail-bar svg {
  height: 30px;
  width: 30px;
}
.review-page .detail-bar .sport {
  color: #2663FF;
}
.review-page .detail-bar .sport svg {
  margin-right: 0.5rem;
}
.review-page .detail-bar .sport path {
  fill: #2663FF;
}
.review-page .detail-bar .sport .stay-white {
  fill: white;
}
.review-page .detail-bar .classification {
  color: #2663FF;
  margin-left: 1rem;
}
.review-page .detail-bar .classification svg {
  margin-right: 0.5rem;
}
.review-page .detail-bar .level {
  color: #FFB526;
  margin-left: 1rem;
}
.review-page .detail-bar .level .level-1 {
  color: #FFB526;
}
.review-page .detail-bar .level .level-1 ellipse {
  fill: #FFB526;
}
.review-page .detail-bar .level .level-1 path {
  fill: white;
}
.review-page .detail-bar .level svg {
  margin-right: 0.5rem;
}
.review-page .detail-bar .fitness-title {
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
}
.review-page .video-container {
  background-color: #ECECEC;
  padding: 1rem 3rem;
}
.review-page .video-container .control .control-btn {
  margin: 1rem 1rem;
  cursor: pointer;
}
.review-page .video-container .control .control-btn path {
  fill: #2A2A29;
}
.review-page .video-container .control .control-btn:hover path {
  fill: white;
}
.review-page .title {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  margin-bottom: 1rem;
}
.review-page .rubrics {
  background-color: #ECECEC;
  padding: 1rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-page .rubrics .timeline-title {
  font-size: 0.9rem;
  color: black;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.review-page .rubrics .form-check-input {
  border-radius: 0px;
  border: 1px solid black;
}
.review-page .rubrics .form-check-input:checked {
  border: 1px solid white;
  background-color: black;
  box-shadow: 0 0 0px 2px black;
}
.review-page .rubrics .form-check-input::focus {
  box-shadow: 0 0 0px 2px black;
}
.review-page .rubrics .form-check-label {
  font-size: 0.9rem;
  color: black;
  font-weight: 500;
}
.review-page .rubrics .comment-content {
  font-weight: 500;
  font-size: 0.9rem;
  color: black;
}
.review-page .rubrics .rubrics-container {
  height: 400px;
  overflow: auto;
}
.review-page .teacher-comment {
  background-color: #ECECEC;
  padding: 1rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-page .teacher-comment .form-label {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  margin-bottom: 1rem;
}
.review-page .teacher-comment .form-control {
  border: 0px;
  border-radius: 0px;
  margin-bottom: 1rem;
}
.review-page .teacher-comment .btn-comment {
  background-color: #2663FF;
  color: white;
}
.review-page .student-comment {
  background-color: #ECECEC;
  padding: 1rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.review-page .student-comment .title {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  margin-bottom: 1rem;
}
.review-page .student-comment .comment-container {
  overflow: auto;
  min-height: 50px;
  max-height: 400px;
}
.review-page .student-comment .comment-container .comment {
  font-size: 0.9rem;
  color: black;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.review-page .student-comment .btn-edit {
  background-color: #FFB526;
  color: white;
}
.review-page .student-comment textarea {
  margin-bottom: 1rem;
}
.review-page .student-comment .btn-submit {
  background-color: #2663FF;
  color: white;
}
.review-page .underline {
  border-bottom: 1px solid black;
  opacity: 0.5;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#navmodal .modal-body {
  position: relative;
}
#navmodal .modal-body .btn-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
#navmodal .modal-body .item {
  color: black;
  padding: 0.25rem 0.5rem;
}
#navmodal .modal-body .item.black-background {
  color: white;
  background-color: black;
}

@media (max-width: 1200px) {
  .header {
    padding: 0rem;
  }
  .header .logo {
    padding-left: 2rem;
  }
  .header .logo img {
    height: 80px;
  }
  .header .nav-btn {
    width: 80px;
    height: 80px;
    background-color: black;
    border-radius: 0px;
  }
  .header .nav-btn svg {
    fill: white;
    width: 40px;
    height: 40px;
  }
  #footer .footer-2 .left a {
    margin-right: 0px;
  }
  #footer .footer-2 .right .item {
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #footer .footer-1 .padding-right {
    padding-right: 0;
    padding-bottom: 10rem;
  }
  #footer .footer-1 .item {
    margin-bottom: 1rem;
  }
  #footer .footer-1 .footer-title {
    margin-bottom: 1rem;
  }
}
@media (max-width: 991px) {
  .demonstration-video .fitness-container {
    padding: 2rem;
  }
  .my-account .demonstrationvideo-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .my-account .history .record .level-3 {
    margin-right: 0rem;
  }
  .my-account .history .record .level-2 {
    margin-right: 0rem;
  }
  .my-account .history .record .level-1 {
    margin-right: 0rem;
  }
  .my-account .history .record .fitness-title {
    text-align: start;
  }
  #rubrics .modal-content .left .fitness-data .classification svg {
    margin-left: 0rem;
  }
  #rubrics .modal-content .left .fitness-data .level svg {
    margin-left: 0rem;
  }
  .my-account .demonstrationvideo-container {
    border-bottom: 6px solid #FFB526;
  }
  .banner .left_top_box {
    bottom: 30%;
    width: 80%;
    height: 160px;
  }
}
@media (max-width: 768px) {
  .banner .banner__content .banner__content__title {
    font-size: 2rem;
  }
  .block-margin {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .watching iframe {
    height: 60vw;
  }
  .watching video {
    height: 60vw;
  }
  .review-page iframe {
    height: 60vw;
  }
  .review-page video {
    height: 60vw;
  }
  .review-page .detail-bar svg {
    height: 20px;
    width: 20px;
  }
  .review-page .detail-bar .classification {
    margin-left: 0;
  }
  .review-page .detail-bar .level {
    margin-left: 0;
  }
  #comment {
    height: 15rem;
  }
  #rubrics .modal-content .left .fitness-data {
    display: none !important;
  }
  .login .signup__title {
    writing-mode: initial;
  }
  .signup .signup__title {
    writing-mode: initial;
  }
  .login .form-group .form-control {
    width: 100%;
    max-width: 350px;
    margin-bottom: 1rem;
  }
  .login .content {
    height: unset;
  }
  .login .form-group label {
    margin-top: 0px;
  }
  .signup .form-group .form-control {
    width: 100%;
    max-width: 350px;
    margin-bottom: 1rem;
  }
  .signup .content {
    height: unset;
  }
  .signup .form-group label {
    margin-top: 0px;
  }
}
@media (max-width: 576px) {
  .watching-2 .progressbar .timeline-pin svg {
    width: 22px;
    height: 26px;
  }
  html {
    font-size: 15px;
  }
  .reset-padding {
    padding-left: 0;
    padding-right: 0;
  }
  .reset-margin {
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
  }
  .text-container {
    padding: 1.5rem;
  }
  #footer .footer-1 .circle-container .circle {
    height: 300px;
    width: 300px;
    margin-top: -130px;
  }
  .header .logo img {
    height: 60px;
  }
  .my-account .history .record svg {
    width: 20px;
    height: 20px;
  }
  #rubrics .modal-content .left .big-title {
    font-size: 1.2rem;
  }
  #rubrics .modal-content .left .big-title svg {
    width: 22px;
    height: 22px;
    margin-right: 0.5rem;
  }
  #rubrics .modal-content .btn-blue-close svg {
    width: 22px;
    height: 22px;
  }
  .my-account .user-container .icon {
    width: 100px;
    height: 100px;
  }
  .my-account .user-container .username {
    margin-left: 1rem;
  }
}