@charset "UTF-8";
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@font-face {
  font-family: "SohoGothicPro";
  src: url("../fonts/SohoGothicPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SohoGothicPro-Regular.otf") format("opentype"), url("../fonts/SohoGothicPro-Regular.woff") format("woff"), url("../fonts/SohoGothicPro-Regular.ttf") format("truetype"), url("../fonts/SohoGothicPro-Regular.svg#SohoGothicPro-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SohoGothicPro";
  src: url("../fonts/SohoGothicPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SohoGothicPro-Bold.otf") format("opentype"), url("../fonts/SohoGothicPro-Bold.woff") format("woff"), url("../fonts/SohoGothicPro-Bold.ttf") format("truetype"), url("../fonts/SohoGothicPro-Bold.svg#SohoGothicPro-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SohoGothicPro";
  src: url("../fonts/SohoGothicPro-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/SohoGothicPro-Light.otf") format("opentype"), url("../fonts/SohoGothicPro-Light.woff") format("woff"), url("../fonts/SohoGothicPro-Light.ttf") format("truetype"), url("../fonts/SohoGothicPro-Light.svg#SohoGothicPro-Light") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "SohoGothicPro";
  src: url("../fonts/SohoGothicPro-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SohoGothicPro-Medium.otf") format("opentype"), url("../fonts/SohoGothicPro-Medium.woff") format("woff"), url("../fonts/SohoGothicPro-Medium.ttf") format("truetype"), url("../fonts/SohoGothicPro-Medium.svg#SohoGothicPro-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/SourceSansPro-Bold.eot");
  src: url("../fonts/SourceSansPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-Bold.woff2") format("woff2"), url("../fonts/SourceSansPro-Bold.woff") format("woff"), url("../fonts/SourceSansPro-Bold.ttf") format("truetype"), url("../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SourceSansPro";
  src: url("../fonts/SourceSansPro-Regular.eot");
  src: url("../fonts/SourceSansPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-Regular.woff2") format("woff2"), url("../fonts/SourceSansPro-Regular.woff") format("woff"), url("../fonts/SourceSansPro-Regular.ttf") format("truetype"), url("../fonts/SourceSansPro-Regular.svg#SourceSansPro-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.bg-white {
  background: white;
}

.f-13 {
  font-size: 13px;
  line-height: 1.333;
}
@media (max-width: 1699px) {
  .f-13 {
    font-size: 13px;
  }
}
@media (max-width: 1199px) {
  .f-13 {
    font-size: 13px;
  }
}
@media (max-width: 991px) {
  .f-13 {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .f-13 {
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .f-13 {
    font-size: 11px;
  }
}

.f-16 {
  font-size: 16px;
  line-height: 1.375;
}
@media (max-width: 1699px) {
  .f-16 {
    font-size: 16px;
  }
}
@media (max-width: 1199px) {
  .f-16 {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .f-16 {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .f-16 {
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  .f-16 {
    font-size: 14px;
  }
}

.f-20 {
  font-size: 20px;
  line-height: 1.333;
}
@media (max-width: 1699px) {
  .f-20 {
    font-size: 20px;
  }
}
@media (max-width: 1199px) {
  .f-20 {
    font-size: 18px;
  }
}
@media (max-width: 991px) {
  .f-20 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .f-20 {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .f-20 {
    font-size: 16px;
  }
}

.f-24 {
  font-size: 24px;
  line-height: 1.333;
}
@media (max-width: 1699px) {
  .f-24 {
    font-size: 22px;
  }
}
@media (max-width: 1199px) {
  .f-24 {
    font-size: 22px;
  }
}
@media (max-width: 991px) {
  .f-24 {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .f-24 {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .f-24 {
    font-size: 18px;
  }
}

.f-32 {
  font-size: 32px;
  line-height: 1.375;
}
@media (max-width: 1699px) {
  .f-32 {
    font-size: 30px;
  }
}
@media (max-width: 1199px) {
  .f-32 {
    font-size: 28px;
  }
}
@media (max-width: 991px) {
  .f-32 {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .f-32 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .f-32 {
    font-size: 20px;
  }
}

.f-45 {
  font-size: 45px;
  line-height: 1.36;
}
@media (max-width: 1699px) {
  .f-45 {
    font-size: 42px;
  }
}
@media (max-width: 1199px) {
  .f-45 {
    font-size: 36px;
  }
}
@media (max-width: 991px) {
  .f-45 {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .f-45 {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .f-45 {
    font-size: 26px;
  }
}

.f-w-light {
  font-weight: 200;
}

@media (max-width: 1121px) {
  .hide-to-1121 {
    display: none;
  }
}

.italic {
  font-style: italic;
}

.mb-40 {
  margin-bottom: 40px;
}
@media (max-width: 1199px) {
  .mb-40 {
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .mb-40 {
    margin-bottom: 25px;
  }
}
@media (max-width: 767px) {
  .mb-40 {
    margin-bottom: 20px;
  }
}

.mb-60 {
  margin-bottom: 60px !important;
}
@media (max-width: 1199px) {
  .mb-60 {
    margin-bottom: 45px !important;
  }
}
@media (max-width: 991px) {
  .mb-60 {
    margin-bottom: 40px !important;
  }
}
@media (max-width: 767px) {
  .mb-60 {
    margin-bottom: 30px !important;
  }
}

.ml-0 {
  margin-left: 0px !important;
}

.mt-70 {
  margin-top: 70px;
}
@media (max-width: 1199px) {
  .mt-70 {
    margin-top: 55px;
  }
}
@media (max-width: 991px) {
  .mt-70 {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .mt-70 {
    margin-top: 35px;
  }
}

.w-100 {
  width: 100%;
}

.zoom {
  background-size: 0px 0px;
  background-repeat: no-repeat;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
.zoom:hover {
  background-size: auto auto;
}
.zoom:hover img {
  opacity: 0;
}
.zoomimg:hover {
  opacity: 0;
}
.zoom img {
  transition: opacity 0.5s;
  display: block;
  margin: auto;
  width: 100%;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: SourceSansPro;
  font-size: 17px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
  background-color: #f7f9fa;
}

.radius {
  border-radius: 4px;
}

.no-padding {
  padding: 0;
}

@media all and (max-width: 767px) {
  .no-padding-mobile {
    padding: 0;
  }
}

@media all and (min-width: 768px) {
  .no-padding-desktop {
    padding: 0;
  }
}

@media all and (max-width: 768px) {
  .d-mobile-none {
    display: none;
  }
}

.header-1 {
  font-family: SohoGothicPro;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  margin-top: 4rem;
  margin-bottom: 2.5rem;
}

.header-2 {
  font-family: SohoGothicPro;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  font-size: 20px;
  margin-bottom: 1rem;
}

.site-text {
  font-size: 14px;
}

a {
  color: #848b93;
  transition: color 0.2s;
}
a:hover {
  color: #424d5a;
  text-decoration: none;
}

.red-color {
  color: #2f368e;
}

.green-color {
  color: #7BA51C;
}

.box {
  width: 100%;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
}

.bg-gray-image {
  background: #F2F3F5;
}

.border-bottom {
  border-bottom: 1px solid #848B9314;
}

.divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #848b93;
  opacity: 0.25;
}

.navbar-default {
  background-color: transparent;
  border: 0;
}

.title {
  font-family: SohoGothicPro;
  font-size: 32px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.03;
  letter-spacing: normal;
  text-align: left;
  color: #424d5a;
}

.title-dark {
  font-family: SohoGothicPro;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.03;
  text-align: left;
  color: #ffffff;
}

.caption {
  font-family: SourceSansPro;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
}

.description-body {
  font-family: SourceSansPro;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #424d5a;
}

.bold {
  font-weight: bold;
}

.gallery-close-button {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background-image: url("../images/training-icon/ICO_Close.png");
  background-repeat: no-repeat;
}

.gallery-previous-button {
  display: inline-block;
  width: 1.5rem;
  height: 3rem;
  background-image: url("../images/training-icon/arrow-left.png");
  background-repeat: no-repeat;
}

.gallery-next-button {
  display: inline-block;
  width: 1.5rem;
  height: 3rem;
  background-image: url("../images/training-icon/arrow-right.png");
  background-repeat: no-repeat;
}

.gallery-play-button {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("../images/training-icon/Play.png");
  background-repeat: no-repeat;
}

.gallery-download-button {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background-image: url("../images/training-icon/ICO_download.png");
  background-repeat: no-repeat;
}

.gallery-zoom-in-button {
  display: inline-block;
  width: 1.15625rem;
  height: 1.15625rem;
  background-image: url("../images/training-icon/ICO_zoomIn.png");
  background-repeat: no-repeat;
}

.gallery-zoom-out-button {
  display: inline-block;
  width: 1.15625rem;
  height: 1.15625rem;
  background-image: url("../images/training-icon/ICO_zoomOut.png");
  background-repeat: no-repeat;
}

.nGY2ViewerAreaPrevious, .nGY2ViewerAreaNext {
  width: 1.5rem;
  height: 3rem;
}

.nGY2ViewerAreaPrevious {
  left: 2rem;
}

.nGY2ViewerAreaNext {
  right: 2rem;
}

.nGY2 .nGY2Viewer .nGY2viewerToolAction {
  width: 1.5rem;
  height: 3rem;
}
.nGY2 .nGY2Viewer .nGY2viewerToolAction.nGY2ViewerAreaNext {
  margin-right: 2rem;
  padding: 0;
}
.nGY2 .nGY2Viewer .nGY2viewerToolAction.nGY2ViewerAreaNext > i {
  margin-right: 2rem;
}
.nGY2 .nGY2Viewer .nGY2viewerToolAction.nGY2ViewerAreaPrevious {
  margin-left: 2rem;
  padding: 0;
}
.nGY2 .nGY2Viewer .nGY2viewerToolAction.nGY2ViewerAreaPrevious > i {
  margin-left: 2rem;
}

.download-button, .preview-button {
  width: 2.25rem;
  height: 2.125rem;
  border-radius: 0.25rem;
  background-color: #2f368e;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  color: white;
  text-align: center;
  line-height: 2.125rem;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.download-button:hover, .preview-button:hover {
  background-color: #2f368e;
  box-shadow: 0 20px 30px 0 rgba(66, 77, 90, 0.2);
}
.download-button:focus, .preview-button:focus {
  background-color: #1a0b78;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
}

.preview-button {
  background-color: #424d5a;
}
.preview-button:hover, .preview-button:disabled {
  background-color: #5b6a7c;
}
.preview-button:focus {
  background-color: #272d34;
}

.checkmark {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  border: 2px solid white;
  transition: background-color 0.2s;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  background-image: url("../images/training-icon/checkmark.svg");
  background-repeat: no-repeat;
  width: 14px;
  height: 12px;
  background-position: center center;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -6px;
}
.checkmark:hover {
  opacity: 1;
}
.checkmark:hover input ~ .checkmark {
  background-color: #848b93;
}
.checkmark.checked {
  opacity: 1;
  background-color: #2f368e;
  border: none;
}
.checkmark.checked:after {
  display: block;
}

.btn-s {
  padding: 0rem 0.625rem;
  display: inline-block;
  font-size: 0.875rem;
  font-family: "SourceSansPro";
  font-weight: bold;
  color: white;
  line-height: 2.125rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  text-align: center;
  transition: background-color 0.2s, box-shadow 0.2s;
  border: none;
  max-height: 2.125rem;
  margin-right: 0.5rem;
}
.btn-s i {
  font-size: 0.75rem;
  margin-right: 0.25rem;
}
.btn-s:hover {
  box-shadow: 0 20px 30px 0 rgba(66, 77, 90, 0.2);
  color: white;
}
.btn-s:focus {
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  color: white;
  text-decoration: none;
}

.btn-l {
  padding: 0rem 1rem;
  display: inline-block;
  font-size: 1rem;
  font-family: "SourceSansPro";
  font-weight: bold;
  color: white;
  line-height: 2.75rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  text-align: center;
  transition: background-color 0.2s, box-shadow 0.2s;
  border: none;
  max-height: 2.75rem;
}
.btn-l i {
  font-size: 0.875rem;
  margin-right: 0.25rem;
}
.btn-l:hover {
  box-shadow: 0 20px 30px 0 rgba(66, 77, 90, 0.2);
  color: white;
}
.btn-l:focus {
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  color: white;
  text-decoration: none;
}

.btn-2 {
  background-color: #2f368e;
}
.btn-2:hover {
  background-color: #2f368e;
}
.btn-2:focus {
  background-color: #1a0b78;
  outline: none !important;
}
.btn-2.like-button {
  background-color: transparent;
  border: 2px solid white;
}
.btn-2.like-button:hover {
  background-color: #2f368e;
}
.btn-2.like-button.clicked {
  background-color: #2f368e;
  border: none;
}
.btn-2.like-button.clicked:hover {
  background-color: #2f368e;
}
.btn-2.like-button.clicked:focus {
  background-color: #1a0b78;
}

.btn-green {
  background-color: #7BA51C;
}
.btn-green:focus {
  background-color: #7BA51C;
}

.btn-1 {
  background-color: #424d5a;
}
.btn-1:hover, .btn-1:disabled {
  background-color: #5b6a7c;
}
.btn-1:focus {
  background-color: #272d34;
}

.btn-white {
  background-color: white;
  color: #2f368e;
}
.btn-white:hover {
  background-color: #fefefe;
  color: #2f368e;
}
.btn-white:focus {
  background-color: #fefefe;
  color: #2f368e;
}

.red-checkboxes {
  padding: 1.5rem;
}
.red-checkboxes p {
  margin-bottom: 1rem;
}
.red-checkboxes .checkbox-container {
  font-family: SourceSansPro;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  font-weight: normal;
  opacity: 0.5;
}
.red-checkboxes .checkbox-container.small {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
}

.red-checkboxes .checkbox-container,
.red-checkboxes-surveys .checkbox-container {
  display: block;
  position: relative;
  padding-left: 2rem;
  transition: opacity 0.2s;
  margin-bottom: 0.75rem;
}
.red-checkboxes .checkbox-container label,
.red-checkboxes-surveys .checkbox-container label {
  margin-bottom: 0px;
  margin-top: 0px;
}
.red-checkboxes .checkbox-container input,
.red-checkboxes-surveys .checkbox-container input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  margin-top: 0;
  cursor: pointer;
}
.red-checkboxes .checkbox-container input:checked ~ .checkmark,
.red-checkboxes-surveys .checkbox-container input:checked ~ .checkmark {
  background-color: #2f368e;
  border: none;
}
.red-checkboxes .checkbox-container input:checked ~ .checkmark:after,
.red-checkboxes-surveys .checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
.red-checkboxes .checkbox-container .checkmark,
.red-checkboxes-surveys .checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #f2f3f5;
  border-radius: 4px;
  transition: background-color 0.2s;
  border: 1px solid #848b9380;
}
.red-checkboxes .checkbox-container .checkmark:after,
.red-checkboxes-surveys .checkbox-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  background-image: url("../images/training-icon/checkmark.svg");
  background-repeat: no-repeat;
  width: 14px;
  height: 12px;
  background-position: center center;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -6px;
}
.red-checkboxes .checkbox-container:hover,
.red-checkboxes-surveys .checkbox-container:hover {
  opacity: 1;
}
.red-checkboxes .checkbox-container:hover input ~ .checkmark:after,
.red-checkboxes-surveys .checkbox-container:hover input ~ .checkmark:after {
  display: block;
}
.red-checkboxes .checkbox-container.checked,
.red-checkboxes-surveys .checkbox-container.checked {
  opacity: 1;
}

.red-checkboxes-surveys .checkbox-container .checkmark {
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}

.red-radio .radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
  /* Style the indicator (dot/circle) */
}
.red-radio .radio-container label {
  margin-bottom: 0px;
  margin-top: 0px;
}
.red-radio .radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0px;
  margin: 0;
  width: 100%;
  height: 100%;
}
.red-radio .radio-container .radiobtn {
  position: absolute;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #eee;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  border: 1px solid #848b9380;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
}
.red-radio .radio-container input:checked ~ .radiobtn {
  background-color: #2f368e;
}
.red-radio .radio-container .radiobtn:after {
  content: "";
  position: absolute;
  display: none;
}
.red-radio .radio-container input:checked ~ .radiobtn:after {
  display: block;
}
.red-radio .radio-container .radiobtn:after {
  top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.small-box-prize {
  border: 1px solid #848b93;
  border-radius: 0.25rem 2.625rem 2.625rem 2.625rem;
  padding: 0.375rem;
  text-align: center;
  font-size: 1rem;
  font-family: "SourceSansPro";
  font-weight: bold;
  max-width: 5.625rem;
}

.small-info-status {
  position: absolute;
  top: 0;
  right: 0;
}
.small-info-status .small-info-status-tag {
  font-size: 0.75rem;
  font-family: "SourceSansPro";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.875rem;
  letter-spacing: 0.01em;
  text-align: center;
  color: #272d34;
  text-transform: uppercase;
  padding: 0 0.75rem 0 0.75rem;
  margin-left: 1rem;
  opacity: 0.7;
  display: inline-block;
  transition: opacity 0.2s;
}
.small-info-status .small-info-status-tag:hover {
  opacity: 1;
}
.small-info-status .small-info-status-tag i {
  margin-right: 0.5rem;
}
.small-info-status .small-info-status-tag.live {
  background-color: #2f368e;
  color: white;
}
.small-info-status .small-info-status-tag.points {
  text-transform: none;
}
.small-info-status .small-info-status-tag.points-added {
  background-color: #7ba51c;
  color: white;
}

.player-bg {
  position: relative;
  display: block;
  border-radius: 4px;
  width: 100%;
  padding-top: 56.25%;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  background-size: cover;
  background-position: center center;
}
.player-bg:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 74%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
  opacity: 0.7;
  border-radius: 0 0 4px 4px;
}

.planned .player-bg {
  background-color: #424d5a;
}
.planned .player-bg:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 67.55%;
  height: 81.307%;
  background-image: linear-gradient(rgba(0, 0, 0, 0), black);
  opacity: 0.3;
}
.planned .player-bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 63.47%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0), black);
  opacity: 0.3;
}

#wrapper {
  width: 100%;
  overflow-x: hidden;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.navbar-static-side {
  position: absolute;
  z-index: 2001;
  width: 268px;
  height: 100%;
}
@media all and (max-width: 1330px) {
  .navbar-static-side {
    width: 6rem;
  }
}
.navbar-static-side:after {
  content: "";
  position: absolute;
  top: 0;
  right: -40px;
  width: 40px;
  height: 100%;
  background: -moz-linear-gradient(left, rgba(44, 51, 59, 0.05) 0%, rgba(44, 51, 59, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(44, 51, 59, 0.05) 0%, rgba(44, 51, 59, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(44, 51, 59, 0.05)), to(rgba(44, 51, 59, 0)));
  background: -moz-linear-gradient(left, rgba(44, 51, 59, 0.05) 0%, rgba(44, 51, 59, 0) 100%);
  background: -o-linear-gradient(left, rgba(44, 51, 59, 0.05) 0%, rgba(44, 51, 59, 0) 100%);
  background: linear-gradient(to right, rgba(44, 51, 59, 0.05) 0%, rgba(44, 51, 59, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0d2c333b", endColorstr="#002c333b", GradientType=1);
}
.navbar-static-side .content {
  padding: 2rem 2rem 0 2rem;
}
.navbar-static-side .content .logo {
  margin-bottom: 2.5rem;
}
.navbar-static-side .content .sidebar-progress-box .caption {
  margin-bottom: 0.875rem;
}
.navbar-static-side .content .sidebar-progress-box .sidebar-badge {
  margin-bottom: 0.75rem;
}
.navbar-static-side .content .sidebar-progress-box .sidebar-badge p {
  font-family: SourceSansPro;
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  display: inline;
}
.navbar-static-side .content .sidebar-progress-box .sidebar-badge .badge-brown {
  display: inline-block;
  width: 0.9375rem;
  height: 1.125rem;
  background-image: url("../images/training-icon/brown-shield.svg");
  margin-right: 0.5rem;
  vertical-align: bottom;
}
.navbar-static-side .content .sidebar-progress-box .progress-points {
  margin-bottom: 0.25rem;
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-now {
  font-family: "SohoGothicPro";
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: #2f368e;
  display: inline;
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-now span {
  font-size: 2rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.75;
  letter-spacing: normal;
  text-align: left;
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-change {
  color: #848b93;
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: normal;
  text-align: right;
  vertical-align: bottom;
  display: inline;
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-change .arrow {
  font-size: 0.5rem;
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-change .arrow.arrow-up:before {
  content: "\f062";
}
.navbar-static-side .content .sidebar-progress-box .progress-points .progress-points-change .arrow.arrow-down:before {
  content: "\f063";
}
.navbar-static-side .content .sidebar-progress-box .progress {
  height: 0.375rem;
  border-radius: 0.3125rem;
  background-color: rgba(66, 77, 90, 0.1);
  margin-bottom: 2.25rem;
  clear: both;
}
.navbar-static-side .content .sidebar-progress-box .progress .progress-bar {
  border-radius: 0.3125rem;
  background-color: #2f368e;
}
.navbar-static-side .content.small {
  position: absolute;
  bottom: 1rem;
}
.navbar-static-side .content.small p {
  font-size: 0.75rem;
  font-family: "SourceSansPro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
  text-shadow: 0 1px 0 #ffffff;
}
@media all and (max-height: 768px) {
  .navbar-static-side .content.small p {
    line-height: 1.5;
  }
}
.navbar-static-side .content.small p .a-icon.a-contact {
  display: none;
  opacity: 0.5;
  padding-left: 18px;
  transition: opacity 0.2s;
}
.navbar-static-side .content.small p .a-icon.a-contact svg {
  margin: 0 auto;
  width: 1.5rem;
  display: block;
}
.navbar-static-side .content.small p .a-icon.a-contact svg .cls-1 {
  fill: #424d5a;
}
.navbar-static-side .content.small p .a-icon.a-contact svg .cls-2 {
  fill: none;
}
@media all and (max-width: 1330px) {
  .navbar-static-side .content.small p .menu-label {
    display: none;
  }
  .navbar-static-side .content.small p .a-icon.a-contact {
    display: inline-block;
  }
  .navbar-static-side .content.small p a:hover .a-contact {
    opacity: 1;
  }
}
.navbar-static-side .content.small small {
  font-size: 0.625rem;
  font-family: "SourceSansPro";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
  text-shadow: 0 1px 0 #ffffff;
}
@media all and (max-width: 1330px) {
  .navbar-static-side .content.small {
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .navbar-static-side .content.small * {
    text-align: center;
  }
}

#navbar-mobile {
  width: 15rem;
  border: none;
  margin-bottom: 0;
  position: absolute;
  background-color: #f7f9fa;
  z-index: 3;
  left: 0;
  top: 90px;
  bottom: 0;
  box-shadow: 9px 3px 10px 0 rgba(44, 51, 59, 0.1);
  overflow-y: visible;
}
@media all and (max-width: 767px) {
  #navbar-mobile {
    overflow-y: auto;
  }
}
#navbar-mobile.collapse {
  width: 0;
  transition: width 0.2s ease;
}
#navbar-mobile.collapse.in {
  width: 15rem;
}
#navbar-mobile .navbar-nav {
  max-height: calc(100% - 85px);
  overflow-y: visible;
}
@media all and (max-width: 767px) {
  #navbar-mobile .navbar-nav {
    overflow-y: auto;
  }
}
#navbar-mobile .navbar-nav li .menu-label {
  display: inline-block;
}
#navbar-mobile .navbar-nav li a svg {
  display: inline-block;
}
#navbar-mobile .navbar-nav li.active a {
  background-color: transparent;
}
#navbar-mobile .footer_links {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 0px 30px 3px;
}
#navbar-mobile .footer_links a {
  font-size: 12px;
  line-height: 1.35em;
}
#navbar-mobile .a-icon.a-contact svg .cls-1 {
  fill: #424d5a;
}
#navbar-mobile .a-icon.a-contact svg .cls-2 {
  fill: none;
}
@media all and (min-width: 768px) {
  #navbar-mobile {
    opacity: 0;
    z-index: 0;
  }
}

@media (max-width: 767px) {
  .hidden-xs-fix {
    display: none !important;
  }
}
#page-wrapper {
  min-height: auto;
  position: relative !important;
  padding: 0 40px;
  margin: 0 0 0 268px;
}
@media all and (max-width: 1330px) {
  #page-wrapper {
    margin-left: 6rem;
  }
}
@media all and (max-width: 767px) {
  #page-wrapper {
    margin-left: 0;
    padding: 0 5px;
  }
}
#page-wrapper .navbar {
  position: relative;
}
#page-wrapper .navbar .navbar-toggle {
  float: none;
  z-index: 2;
  width: 24px;
  height: 24px;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
#page-wrapper .navbar .navbar-toggle.am-active .icon-bar:first-child {
  top: 8px;
  transform: rotate(135deg);
}
#page-wrapper .navbar .navbar-toggle.am-active .icon-bar:nth-child(2) {
  opacity: 0;
  left: -60px;
}
#page-wrapper .navbar .navbar-toggle.am-active .icon-bar:nth-child(3) {
  top: 8px;
  transform: rotate(-135deg);
}
#page-wrapper .navbar .navbar-toggle .icon-bar {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #424d5a;
  border-radius: 50px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#page-wrapper .navbar .navbar-toggle .icon-bar:first-child {
  top: 1px;
}
#page-wrapper .navbar .navbar-toggle .icon-bar:nth-child(2) {
  top: 9px;
  margin-top: 0;
}
#page-wrapper .navbar .navbar-toggle .icon-bar:nth-child(3) {
  top: 17px;
  margin-top: 0;
}

.fixed-sidebar .navbar-static-side {
  position: fixed;
}

.nav-box {
  margin-bottom: 11rem;
}
@media all and (max-width: 1330px) {
  .nav-box .nav-box-title {
    display: none;
  }
}
.nav-box p {
  padding-left: 2rem;
}
.nav-box .nav > li {
  opacity: 0.5;
  transition: opacity 0.2s, border-left 0.2s;
  border-left: 2px solid transparent;
  padding-left: 2rem;
}
.nav-box .nav > li .a-icon {
  margin-right: 1rem;
  width: 1.5rem;
  vertical-align: middle;
}
.nav-box .nav > li .a-icon svg {
  width: 1.5rem;
  fill: #424d5a;
  transition: fill 0.2s;
  max-height: 2rem;
  vertical-align: middle;
}
.nav-box .nav > li .a-icon svg line, .nav-box .nav > li .a-icon svg circle, .nav-box .nav > li .a-icon svg path {
  stroke: #424d5a;
}
.nav-box .nav > li > a {
  font-family: SourceSansPro;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  padding-left: 0px;
}
@media all and (max-width: 767px) {
  .nav-box .nav > li > a {
    font-size: 17px;
  }
}
.nav-box .nav > li > a.active, .nav-box .nav > li > a:hover {
  background-color: transparent;
}
@media all and (max-width: 1330px) {
  .nav-box .nav > li > a .menu-label {
    display: none;
  }
}
.nav-box .nav > li:hover, .nav-box .nav > li:focus {
  opacity: 1;
  text-decoration: none;
}
.nav-box .nav > li.active {
  opacity: 1;
  border-left: 2px solid #2f368e;
}
.nav-box .nav > li.active .a-icon svg {
  color: #2f368e;
  fill: #2f368e;
}
.nav-box .nav > li.active .a-icon svg line, .nav-box .nav > li.active .a-icon svg circle, .nav-box .nav > li.active .a-icon svg path {
  stroke: #2f368e;
}

.profile-pic {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.boxBG {
  padding: 24px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
}

.floatingBoxBG {
  padding: 24px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 20px 40px 0 rgba(66, 77, 90, 0.3);
}

#page-wrapper .container {
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 100%;
}
@media all and (max-width: 480px) {
  #page-wrapper .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
#page-wrapper .container .search-form .input-group {
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.15);
  border-radius: 0.25rem;
  border: none;
  height: 3rem;
}
#page-wrapper .container .search-form .form-control, #page-wrapper .container .search-form .input-group-addon {
  height: 3rem;
  border: none;
}
#page-wrapper .container .search-form .form-control {
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.15);
}
#page-wrapper .container .search-form .input-group-addon {
  width: 6rem;
  background-color: #2f368e;
  cursor: pointer;
}
#page-wrapper .container .search-form .input-group-addon i {
  font-size: 1.4375rem;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
#page-wrapper .container .search-form .input-group-addon:hover i {
  transform: scale(1.1);
}
@media all and (max-width: 767px) {
  #page-wrapper .container .search-form .input-group-addon {
    width: 3rem;
  }
}
#page-wrapper .container .title-row {
  margin-bottom: 4rem;
}
@media all and (max-width: 1121px) {
  #page-wrapper .container .title-row {
    margin-bottom: 3rem;
  }
}
@media all and (max-width: 767px) {
  #page-wrapper .container .title-row {
    margin-bottom: 3rem;
  }
}
@media all and (max-width: 480px) {
  #page-wrapper .container .title-row {
    margin-bottom: 1rem;
  }
}
#page-wrapper .container .title-row .large-body {
  line-height: 3rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}
#page-wrapper .container .title-row .large-body:hover {
  opacity: 1;
}
@media all and (max-width: 1121px) {
  #page-wrapper .container .title-row .large-body {
    display: block;
    margin-top: 2rem;
  }
}
#page-wrapper .container .title-row .a-icon {
  width: 2rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;
}
#page-wrapper .container .title-row .a-icon svg {
  fill: #424d5a;
  max-height: 2rem;
  vertical-align: middle;
}
#page-wrapper .container .title-row .a-icon svg line, #page-wrapper .container .title-row .a-icon svg circle, #page-wrapper .container .title-row .a-icon svg path {
  stroke: #424d5a;
}
#page-wrapper .container .title-row .icon-back {
  width: 0.5rem;
  vertical-align: 0px;
}
#page-wrapper .container .title-row .icon-back svg {
  fill: none;
  stroke: #424d5a;
  stroke-width: 2px;
}
#page-wrapper .container .title-row .large-body {
  font-size: 1.125rem;
}
#page-wrapper .container .title-row .search-form .input-group-addon {
  width: 3.3125rem;
}
#page-wrapper .container .icon-expand {
  display: inline-block;
  width: 1rem;
  position: absolute;
  right: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s;
}
#page-wrapper .container .icon-expand.expanded {
  transform: rotate(-180deg);
}
#page-wrapper .container .dropdown {
  position: relative;
}
#page-wrapper .container .dropdown #profile-dropdown img {
  margin: 0 auto;
}
#page-wrapper .container .dropdown #notification-dropdown {
  font-size: 23px;
  line-height: 1.5em;
  position: relative;
  cursor: pointer;
}
#page-wrapper .container .dropdown #notification-dropdown svg {
  width: 26px;
  max-height: 40px;
  padding: 10px 0 0;
}
#page-wrapper .container .dropdown #notification-dropdown .notifications-counter {
  display: block;
  background: #2f368e;
  color: white;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0px;
  right: -4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.85em;
}
#page-wrapper .container .dropdown .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 20rem;
  box-shadow: 0 20px 40px 0 rgba(66, 77, 90, 0.3);
  z-index: 90002;
}
#page-wrapper .container .dropdown .profile-name, #page-wrapper .container .dropdown .notifications-label {
  margin-top: 1rem;
  margin-bottom: 0.125rem;
  font-family: "SourceSansPro";
  font-size: 1.25rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: left;
  color: #424d5a;
}
#page-wrapper .container .dropdown .profile-position {
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: left;
  color: #848b93;
  display: inline;
}
#page-wrapper .container .dropdown .profile-accounts {
  display: none;
  margin-top: 1rem;
}
#page-wrapper .container .dropdown .profile-accounts p {
  margin-bottom: 0.5rem;
}
#page-wrapper .container .dropdown .profile-accounts.visible {
  display: block;
}
#page-wrapper .container .dropdown .profile-accounts ul {
  list-style: none;
}
#page-wrapper .container .dropdown .profile-accounts ul li {
  margin-bottom: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.2s;
  height: initial;
}
#page-wrapper .container .dropdown .profile-accounts ul li a {
  font-family: "SourceSansPro";
  font-size: 0.875rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: left;
  color: #424d5a;
}
#page-wrapper .container .dropdown .profile-accounts ul li:hover, #page-wrapper .container .dropdown .profile-accounts ul li.active {
  opacity: 1;
}
#page-wrapper .container .dropdown .profile-info, #page-wrapper .container .dropdown ul .menu-item, #page-wrapper .container .dropdown .notification-info {
  padding: 0.5rem 1.5rem;
}
#page-wrapper .container .dropdown ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#page-wrapper .container .dropdown ul > .menu-item {
  opacity: 0.5;
  transition: opacity 0.2s;
}
#page-wrapper .container .dropdown ul > .menu-item .a-icon {
  margin-right: 1rem;
  width: 1.5rem;
  vertical-align: middle;
}
#page-wrapper .container .dropdown ul > .menu-item .a-icon svg {
  width: 1.5rem;
  fill: #424d5a;
  transition: fill 0.2s;
}
#page-wrapper .container .dropdown ul > .menu-item > a {
  font-family: SourceSansPro;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  padding-left: 0px;
}
#page-wrapper .container .dropdown ul > .menu-item > a.active, #page-wrapper .container .dropdown ul > .menu-item > a:hover {
  background-color: transparent;
}
#page-wrapper .container .dropdown ul > .menu-item:hover, #page-wrapper .container .dropdown ul > .menu-item:focus {
  opacity: 1;
  text-decoration: none;
}
#page-wrapper .container .dropdown ul > .menu-item.active {
  opacity: 1;
  border-left: 2px solid #2f368e;
}
#page-wrapper .container .dropdown ul > .menu-item.active .a-icon svg {
  fill: #2f368e;
}
#page-wrapper .container .notifications-header .notifications-label {
  color: #2f368e;
}
#page-wrapper .container .notifications-header ul li.menu-item {
  opacity: 1;
}
#page-wrapper .container .notifications-header ul li.menu-item.notification a {
  display: block;
  position: relative;
  font-size: 14px;
  padding-left: 1.5em;
  padding-right: 42px;
  min-height: 35px;
}
#page-wrapper .container .notifications-header ul li.menu-item.notification a::before {
  display: block;
  content: "";
  background: #e1e6ff;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 6px;
  left: 0;
  border-radius: 10px;
}
#page-wrapper .container .notifications-header ul li.menu-item.notification .divider {
  margin: 5px 0;
}
#page-wrapper .container .notifications-header ul li.menu-item small {
  font-weight: bold;
  margin-left: 1.5em;
}
#page-wrapper .container .notifications-header ul li.menu-item .right-button {
  background: #2f368e;
  color: white;
  width: 32px;
  line-height: 32px;
  display: inline-block;
  text-align: center;
  position: absolute;
  right: 0px;
  top: 0;
  border-radius: 4px;
}
#page-wrapper .container .grid {
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
}
#page-wrapper .container .feed-box {
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  position: relative;
  padding: 0 4px;
  margin-bottom: 2.5rem;
}
@media all and (max-width: 1121px) {
  #page-wrapper .container .feed-box {
    width: 330px;
  }
}
@media all and (max-width: 767px) {
  #page-wrapper .container .feed-box {
    width: 460px;
  }
}
@media all and (max-width: 569px) {
  #page-wrapper .container .feed-box {
    width: 360px;
  }
}
@media all and (max-width: 469px) {
  #page-wrapper .container .feed-box {
    width: 310px;
  }
}
@media all and (max-width: 389px) {
  #page-wrapper .container .feed-box {
    width: 260px;
  }
}
@media all and (max-width: 349px) {
  #page-wrapper .container .feed-box {
    width: 210px;
  }
}
#page-wrapper .container .feed-box p {
  font-size: 1em;
  color: #848B93;
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 400;
}
#page-wrapper .container .feed-box p.caption {
  font-size: 0.8125em;
  font-weight: bold;
}
#page-wrapper .container .feed-box p a {
  font-weight: bold;
  color: #2f368e;
  text-decoration: none;
}
#page-wrapper .container .feed-box .row-extend {
  margin: 0 -4px;
}
#page-wrapper .container .feed-box .status-tag {
  padding: 0.375em 0.75em;
  border-radius: 50px;
  font-weight: bold;
  float: right;
  user-select: none;
}
#page-wrapper .container .feed-box .status-tag-points-available {
  background-color: #F2F3F5;
  color: #A0A5AC;
}
#page-wrapper .container .feed-box .status-tag-points-received {
  background-color: #7ba51c;
  color: white;
}
#page-wrapper .container .feed-box .cat-ico {
  width: 3em;
  height: 3em;
  display: inline-block;
  padding: 0.75em;
  background-color: #424D5A;
  border-radius: 30px;
  position: absolute;
  top: -1.5em;
  box-shadow: 0 10px 20px rgba(66, 77, 90, 0.3);
  transition: all 0.2s ease;
}
#page-wrapper .container .feed-box .cat-ico:hover {
  cursor: pointer;
  background-color: #5F6873;
  transform: scale(1.05);
}
#page-wrapper .container .feed-box .cat-ico svg {
  fill: white;
  width: 1.5em;
  height: 1.5em;
}
#page-wrapper .container .feed-box .feed-box-header {
  position: relative;
  padding: 2em 1.5em 1.5em;
  background: white;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 2px rgba(66, 77, 90, 0.2);
  border-bottom: solid 1px #F2F3F5;
}
#page-wrapper .container .feed-box .feed-box-header p:first-of-type {
  margin-bottom: 0.25em;
  width: 80%;
}
#page-wrapper .container .feed-box .feed-box-main {
  position: relative;
  border-radius: 0 0 4px 4px;
  background: white;
  box-shadow: 0 1px 2px rgba(65, 87, 113, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}
#page-wrapper .container .feed-box .feed-box-main:hover .course-thmb {
  box-shadow: 0 20px 30px -5px rgba(65, 87, 113, 0.3);
  transform: translateY(-2px);
}
#page-wrapper .container .feed-box .feed-box-main .course-thmb {
  display: block;
  margin: 0 -4px;
  box-shadow: 0 1px 2px rgba(65, 87, 113, 0.2);
  transition: all 0.2s ease;
  transform: translateY(0px);
}
#page-wrapper .container .feed-box .feed-box-main .course-thmb img {
  width: 100%;
  display: block;
  border-radius: 4px;
}
#page-wrapper .container .feed-box .feed-box-main-content {
  position: relative;
  padding: 1.25em 2em 2em 2em;
}
#page-wrapper .container .feed-box .feed-box-main-content p i {
  margin-right: 0.5rem;
}
#page-wrapper .container .feed-box .feed-box-main-content .training-number {
  font-family: "SohoGothicPro";
  font-weight: 300;
  color: #2f368e;
  display: inline-block;
  margin-right: 1rem;
  font-size: 2rem;
  letter-spacing: 0.01em;
  line-height: 0.75;
  vertical-align: top;
  margin-top: 1.375rem;
}
#page-wrapper .container .feed-box .feed-box-main-content .training-title {
  display: inline-block;
  max-width: 80%;
}
#page-wrapper .container .feed-box h2 {
  font-family: "SohoGothicPro", sans-serif;
  font-size: 1.25em;
  letter-spacing: 0.02em;
  font-weight: 100;
  color: #424D5A;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main, #page-wrapper .container .feed-box.feed-box-start .feed-box-main, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main {
  padding: 2em 1.5em 1.5em;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .file-info, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .file-info, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .file-info {
  display: inline-block;
  margin-right: 2rem;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .file-info .file-icon, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .file-info .file-icon, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .file-info .file-icon {
  position: relative;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .file-info .file-icon .file-ext, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .file-info .file-icon .file-ext, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .file-info .file-icon .file-ext {
  font-family: "SourceSansPro";
  font-weight: bold;
  font-size: 0.8125rem;
  position: absolute;
  width: 100%;
  height: 33%;
  background-color: #2f368e;
  padding: 0.5rem;
  color: white;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  text-align: center;
  padding-top: 2px;
  border-radius: 0 0 0.25rem 0.25rem;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .file-info .file-icon img, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .file-info .file-icon img, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .file-info .file-icon img {
  display: block;
  height: 4rem;
  position: relative;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .reward-img, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .reward-img, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .reward-img {
  width: 10rem;
  display: inline-block;
  border-radius: 0.25rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  margin-right: 2rem;
  vertical-align: middle;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .reward-img img, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .reward-img img, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .reward-img img {
  margin: 1rem auto 1rem auto;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .feed-box-main-content, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .feed-box-main-content, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .feed-box-main-content {
  display: inline-block;
  padding: 0;
  max-width: 78%;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .feed-box-main-content p.large-body, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .feed-box-main-content p.large-body, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .feed-box-main-content p.large-body {
  font-family: SourceSansPro;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
}
#page-wrapper .container .feed-box.feed-box-knowledge-base .feed-box-main .feed-box-main-content p.file-name, #page-wrapper .container .feed-box.feed-box-start .feed-box-main .feed-box-main-content p.file-name, #page-wrapper .container .feed-box.feed-box-reward .feed-box-main .feed-box-main-content p.file-name {
  word-wrap: break-word;
}
#page-wrapper .container .feed-box.feed-box-reward .feed-box-main h2 {
  margin-top: 0;
}
#page-wrapper .container .feed-box.feed-box-reward .feed-box-main .small-box-prize {
  margin-bottom: 1.875rem;
}
#page-wrapper .container .feed-box.feed-box-reward .feed-box-main .feed-box-main-content {
  max-width: 50%;
  vertical-align: middle;
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb {
  border: none;
  box-shadow: none;
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span {
  display: inline-block;
  height: auto;
  width: 32.7%;
  padding-top: 32.7%;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.2s;
}
@media all and (max-width: 469px) {
  #page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span {
    width: 32%;
    padding-top: 32%;
  }
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span:hover {
  transform: translateY(-0.25rem);
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span.feed-box-gallery-img-1 {
  background-image: url("../images/start/1.png");
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span.feed-box-gallery-img-2 {
  background-image: url("../images/start/2.png");
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span.feed-box-gallery-img-3 {
  position: relative;
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span.feed-box-gallery-img-3:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10rem;
  border-radius: 4px;
  background-color: black;
  opacity: 0.5;
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main .course-thmb span.feed-box-gallery-img-3 span {
  content: "+11";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2rem;
  margin-top: -2rem;
  font-family: "SourceSansPro";
  font-size: 1.25rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  color: #424d5a;
  width: 4rem;
  height: 4rem;
  padding-top: 1.2rem;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgba(66, 77, 90, 0.25);
}
#page-wrapper .container .feed-box.feed-box-gallery .feed-box-main:hover .course-thmb {
  transform: translateY(0px);
}
@media all and (max-width: 1121px) {
  #page-wrapper .container .gallery {
    margin-left: auto;
    margin-right: auto;
  }
  #page-wrapper .container .gallery .header-1 {
    margin-top: 2rem;
  }
}
#page-wrapper .container .flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}
@media all and (max-width: 1121px) {
  #page-wrapper .container .flex-container {
    justify-content: center;
    align-items: center;
    align-content: center;
  }
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery {
  margin-top: 0;
  margin-bottom: 2.5rem;
  margin-left: 0;
  flex-shrink: 1;
  flex-basis: 18.75rem;
  cursor: auto;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main {
  cursor: auto;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main:hover .gallery-info {
  transform: translateY(0);
  opacity: 1;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main:hover .gallery-info p {
  opacity: 1;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main:hover .download-button {
  opacity: 1;
  transform: translateY(0);
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .player-bg {
  background-size: cover;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .player-bg .download-button {
  opacity: 0;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transform: translateY(2rem);
}
@media all and (max-width: 767px) {
  #page-wrapper .container .flex-container .feed-box.feed-box-gallery .player-bg .download-button {
    transform: translateY(0);
    opacity: 1;
  }
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.5rem;
  color: white;
  transform: translateY(2rem);
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.5;
  z-index: 1;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info h2 {
  color: white !important;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info p {
  opacity: 0;
  color: white !important;
  transition: opacity 0.2s;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info p i {
  margin-right: 0.5rem;
}
@media all and (max-width: 767px) {
  #page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info {
    transform: translateY(0);
    opacity: 1;
  }
  #page-wrapper .container .flex-container .feed-box.feed-box-gallery .gallery-info p {
    opacity: 1;
  }
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main-content {
  padding: 0.8125rem 1rem !important;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main-content .tags {
  vertical-align: middle;
  display: inline-block;
}
#page-wrapper .container .flex-container .feed-box.feed-box-gallery .feed-box-main-content .download-button {
  vertical-align: middle;
  display: inline-block;
  width: 2.25rem;
  height: 2.125rem;
}

#page-wrapper .container.webinar-container .title-row {
  margin-bottom: 2rem;
}

.webinar-survey .question-image img {
  max-width: 100%;
}

.webinar-row:first-of-type {
  margin-top: 4rem;
}
.webinar-row .webinar-general-info {
  margin-top: 0.75rem;
}
.webinar-row .webinar-general-info .divider {
  margin: 5px 0;
}
.webinar-row iframe {
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
}
@media all and (max-width: 767px) {
  .webinar-row .feed-box-webinar .player-bg {
    padding-top: 1rem;
    height: auto;
  }
}
.webinar-row .feed-box-webinar .feed-box-main {
  cursor: auto;
  border-bottom: 4px solid white;
  height: 100%;
}
.webinar-row .feed-box-webinar .feed-box-main:hover .webinar-info {
  transform: translateY(0px);
  background: #020024;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0508404045) 10%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2021009087) 70%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.0480392841) 90%, rgba(0, 0, 0, 0) 100%);
}
.webinar-row .feed-box-webinar .feed-box-main:hover .webinar-info h2 {
  opacity: 1;
}
.webinar-row .feed-box-webinar .feed-box-main:hover .webinar-info p {
  opacity: 1;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .feed-box-webinar .feed-box-main:hover .webinar-info {
    transform: translateY(-2rem);
  }
}
.webinar-row .feed-box-webinar.live .feed-box-main {
  border-bottom: 4px solid #2f368e;
}
.webinar-row .feed-box-webinar .webinar-info {
  padding: 3.5rem 3rem 1.5rem 1.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  transform: translateY(6.25rem);
  background: transparent;
  width: 100%;
  transition: background 0.2s ease 0s;
  transition: transform 0.2s ease-out;
  color: white;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .feed-box-webinar .webinar-info {
    transform: translateY(1rem);
  }
}
@media all and (max-width: 569px) {
  .webinar-row .feed-box-webinar .webinar-info {
    transform: translateY(1rem);
  }
}
.webinar-row .feed-box-webinar .webinar-info h2 {
  font-family: SohoGothicPro;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #ffffff;
  max-width: 70%;
  margin-bottom: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
  color: #eeeeee !important;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .feed-box-webinar .webinar-info h2 {
    font-size: 16px;
  }
}
.webinar-row .feed-box-webinar .webinar-info p {
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #D2D2D2 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: opacity 0.2s;
  height: 6.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .feed-box-webinar .webinar-info p {
    font-size: 12px;
    height: 3rem;
  }
}
@media all and (max-width: 569px) {
  .webinar-row .feed-box-webinar .webinar-info p {
    font-size: 12px;
    height: 3rem;
  }
}
@media all and (max-width: 767px) {
  .webinar-row .feed-box-webinar .webinar-info {
    position: static;
  }
}
@media all and (max-width: 569px) {
  .webinar-row .feed-box-webinar .webinar-info h2 {
    opacity: 1;
  }
  .webinar-row .feed-box-webinar .webinar-info p {
    opacity: 1;
  }
}
.webinar-row .feed-box-webinar .feed-box-main-content p {
  display: inline-block;
  max-width: 48%;
  vertical-align: middle;
  line-height: 2.125rem;
}
.webinar-row .feed-box-webinar .feed-box-main-content a {
  display: inline-block;
  float: right;
}
.webinar-row .feed-box-webinar .feed-box-main-content .fa-circle {
  color: #2f368e;
  font-size: 0.5rem;
  vertical-align: middle;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .feed-box-webinar .feed-box-main-content p {
    display: block;
    max-width: 100%;
  }
  .webinar-row .feed-box-webinar .feed-box-main-content a {
    display: block;
    max-width: 100%;
    float: none;
  }
}
@media all and (max-width: 569px) {
  .webinar-row .feed-box-webinar .feed-box-main-content p {
    display: block;
    max-width: 100%;
  }
  .webinar-row .feed-box-webinar .feed-box-main-content a {
    display: block;
    max-width: 100%;
    float: none;
  }
}
.webinar-row .big-player {
  padding-top: 2.25rem;
}
.webinar-row .big-player .planned-info {
  position: absolute;
  left: 3rem;
  top: 50%;
  margin-top: -1.5rem;
}
.webinar-row .big-player .planned-info .a-icon {
  display: inline-block;
  width: 3rem;
  margin-right: 1.5rem;
}
.webinar-row .big-player .planned-info .a-icon svg {
  fill: white;
}
.webinar-row .big-player .planned-info .planned-date {
  display: inline-block;
}
.webinar-row .big-player .planned-info .planned-date p {
  font-size: 0.8125rem;
  font-family: "SourceSansPro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
}
.webinar-row .big-player .planned-info .planned-date h2 {
  font-family: SohoGothicPro;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.03;
  text-align: left;
  color: #ffffff;
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .webinar-row .big-player .planned-info {
    left: 1rem;
  }
  .webinar-row .big-player .planned-info .a-icon {
    width: 1.5rem;
  }
  .webinar-row .big-player .planned-info .planned-date {
    display: inline-block;
  }
  .webinar-row .big-player .planned-info .planned-date h2 {
    font-size: 1.5rem;
  }
}
@media all and (max-width: 320px) {
  .webinar-row .big-player .planned-info {
    top: 1rem;
    margin-top: 0;
  }
}
.webinar-row .webinar-box {
  margin-bottom: 1rem;
}
.webinar-row .webinar-box .webinar-title {
  position: relative;
  padding-right: 110px;
}
.webinar-row .webinar-box .webinar-title h2 {
  margin-top: 5px;
  margin-bottom: 0px;
  font-family: SohoGothicPro;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #424d5a;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .webinar-row .webinar-box .webinar-title h2 {
    font-size: 16px;
  }
}
.webinar-row .webinar-box .webinar-title p {
  margin-bottom: 0px;
  font-size: 14px;
}
.webinar-row .webinar-box .webinar-description {
  font-size: 14px;
}
.webinar-row .webinar-box .webinar-description p {
  display: inline-block;
  margin: 0;
  font-size: 14px;
}
.webinar-row .webinar-box .messages-control--select {
  float: right;
}
.webinar-row .webinar-box .messages-control--select.active {
  color: #2f368e;
}

.jspContainer {
  overflow: hidden;
  position: relative;
  height: 100% !important;
  width: 100% !important;
}
.jspContainer .jspVerticalBar {
  background: transparent;
}
.jspContainer .jspVerticalBar .jspTrack {
  background: transparent;
}
.jspContainer .jspVerticalBar .jspTrack .jspDrag {
  left: 8px;
  width: 4px;
  border-radius: 3px;
  background: #e4e4e4;
}
.jspContainer .jspPane {
  position: absolute;
  width: 100% !important;
  padding-top: 31px !important;
}
.jspContainer .jspHorizontalBar {
  display: none !important;
}

.left-side-column {
  height: calc(100vh - 280px);
}
@media all and (max-height: 768px) {
  .left-side-column {
    height: calc(100vh - 265px);
  }
}

.collpaser {
  text-align: right;
}

.chat .message a {
  text-decoration: underline;
  color: #2f368e;
}

.chat-box {
  height: 25rem;
  height: 22rem;
}
.chat-box .chat-content {
  height: 18.1rem;
  height: 15.1rem;
}
.chat-box.moderator-version {
  height: 21.5rem;
  min-height: auto !important;
}
.chat-box.moderator-version .chat-content {
  height: 14.6rem;
  min-height: auto !important;
}
.chat-box .divider {
  border-bottom: 1px solid #848b93;
  background: white;
  height: 16px;
}
.chat-box #chatLineHolder, .chat-box #messages-control--block {
  outline: none;
  overflow: hidden;
  width: 100% !important;
  max-width: 100%;
}
.chat-box #chatLineHolder .chat, .chat-box #messages-control--block .chat {
  padding: 0 16px;
  float: left;
  width: 100%;
  position: relative;
}
.chat-box #chatLineHolder .chat.waiting, .chat-box #chatLineHolder .chat.rejected, .chat-box #messages-control--block .chat.waiting, .chat-box #messages-control--block .chat.rejected {
  opacity: 0.4;
}
.chat-box #chatLineHolder .chat.waiting:after, .chat-box #chatLineHolder .chat.rejected:after, .chat-box #messages-control--block .chat.waiting:after, .chat-box #messages-control--block .chat.rejected:after {
  content: "Oczekująca";
  position: absolute;
  font-size: 10px;
  top: 3px;
  color: white;
  border-radius: 3px;
  padding: 1px 4px;
  right: 70px;
  background: #424d5a;
}
.chat-box #chatLineHolder .chat.waiting .actions, .chat-box #chatLineHolder .chat.rejected .actions, .chat-box #messages-control--block .chat.waiting .actions, .chat-box #messages-control--block .chat.rejected .actions {
  pointer-events: none;
}
.chat-box #chatLineHolder .chat.rejected, .chat-box #messages-control--block .chat.rejected {
  opacity: 0.4;
}
.chat-box #chatLineHolder .chat.rejected:after, .chat-box #messages-control--block .chat.rejected:after {
  content: "Odrzucona";
  background: #2f368e;
}
.chat-box #chatLineHolder .chat .channel-activity, .chat-box #messages-control--block .chat .channel-activity {
  margin-top: 4px;
  float: left;
  width: 10px;
  height: 10px;
  background: #d1d4d6;
  margin-right: 5px;
  border-radius: 50%;
  border: 1px solid #f7f9fa;
}
.chat-box #chatLineHolder .chat .channel-activity.active, .chat-box #messages-control--block .chat .channel-activity.active {
  background: #4ba82e;
}
.chat-box #chatLineHolder .chat .author, .chat-box #messages-control--block .chat .author {
  font-family: SourceSansPro;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.51;
  text-align: left;
  color: #848b93;
  float: left;
}
.chat-box #chatLineHolder .chat .time, .chat-box #messages-control--block .chat .time {
  font-family: SourceSansPro;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.51;
  text-align: left;
  color: #848b93;
  float: right;
}
.chat-box #chatLineHolder .chat .message, .chat-box #messages-control--block .chat .message {
  font-family: SourceSansPro;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.21;
  letter-spacing: normal;
  text-align: left;
  color: #424d5a;
  display: block;
  width: 100%;
  float: left;
  word-break: break-word;
  padding-bottom: 10px;
  padding-right: 38px;
}
.chat-box #chatLineHolder .chat .message img, .chat-box #messages-control--block .chat .message img {
  height: 35px;
}
.chat-box #chatLineHolder .chat .actions, .chat-box #messages-control--block .chat .actions {
  position: absolute;
  top: 1em;
  right: 0.85em;
  width: 18px;
}
.chat-box #chatLineHolder .chat .actions .likes, .chat-box #messages-control--block .chat .actions .likes {
  margin: 0;
  cursor: pointer;
  display: inline-block;
}
.chat-box #chatLineHolder .chat .actions .likes .badge, .chat-box #messages-control--block .chat .actions .likes .badge {
  padding: 3px 5px;
  margin-top: 10px;
  margin-left: -6px;
  border-radius: 50%;
  min-width: unset;
  font-size: 10px;
}
.chat-box #chatLineHolder .chat .gratification-wrapper, .chat-box #messages-control--block .chat .gratification-wrapper {
  display: inline-block;
  position: relative;
  float: right;
  padding-right: 10px;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed, .chat-box #messages-control--block .chat .gratification-wrapper .gratification {
  position: absolute;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed .gratification-icon, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification .gratification-icon, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed .gratification-icon, .chat-box #messages-control--block .chat .gratification-wrapper .gratification .gratification-icon {
  cursor: pointer;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  overflow: visible;
  margin-right: 5px;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed .gratification-icon .counterBadge, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification .gratification-icon .counterBadge, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed .gratification-icon .counterBadge, .chat-box #messages-control--block .chat .gratification-wrapper .gratification .gratification-icon .counterBadge {
  position: absolute;
  background: #848b93;
  color: white;
  display: block;
  text-align: center;
  right: -5px;
  border: 1px solid #777777;
  font-size: 11px;
  height: 14px;
  width: 14px;
  line-height: 1em;
  border-radius: 15px;
  bottom: -3px;
  font-weight: bold;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed .gratification-icon.user-own .counterBadge, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification .gratification-icon.user-own .counterBadge, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed .gratification-icon.user-own .counterBadge, .chat-box #messages-control--block .chat .gratification-wrapper .gratification .gratification-icon.user-own .counterBadge {
  background: #2f368e;
  border-color: #2f368e;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed .gratification-icon img, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification .gratification-icon img, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed .gratification-icon img, .chat-box #messages-control--block .chat .gratification-wrapper .gratification .gratification-icon img {
  position: absolute;
  height: 28px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed .gratification-icon:hover > div.icon-members-list, .chat-box #chatLineHolder .chat .gratification-wrapper .gratification .gratification-icon:hover > div.icon-members-list, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed .gratification-icon:hover > div.icon-members-list, .chat-box #messages-control--block .chat .gratification-wrapper .gratification .gratification-icon:hover > div.icon-members-list {
  display: block;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification-fixed, .chat-box #chatLineHolder .chat .gratification-wrapper .icon-members-list, .chat-box #messages-control--block .chat .gratification-wrapper .gratification-fixed, .chat-box #messages-control--block .chat .gratification-wrapper .icon-members-list {
  display: none;
  width: 172px;
  padding: 3px 5px;
  right: 5px;
  top: -28px;
  transition: all 300ms ease 0s;
  box-shadow: 0 0px 2px 0 rgba(66, 77, 90, 0.2);
  background: white;
  height: 28px;
  border-radius: 4px;
  z-index: 10;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .icon-members-list, .chat-box #messages-control--block .chat .gratification-wrapper .icon-members-list {
  position: absolute;
  top: 30px;
  font-size: 14px;
  min-width: 180px;
  width: unset;
  height: unset;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .icon-members-list > ul, .chat-box #messages-control--block .chat .gratification-wrapper .icon-members-list > ul {
  padding: 0;
  list-style-position: inside;
}
.chat-box #chatLineHolder .chat .gratification-wrapper .gratification, .chat-box #messages-control--block .chat .gratification-wrapper .gratification {
  position: relative;
  display: inline-block;
  top: auto;
  right: auto;
}
.chat-box #chatLineHolder .chat:hover, .chat-box #messages-control--block .chat:hover {
  background: #f7f7f7;
}
.chat-box #chatLineHolder .chat:hover .gratification-fixed, .chat-box #messages-control--block .chat:hover .gratification-fixed {
  display: block;
}
.chat-box #chatLineHolder .chat.waiting:hover .gratification-fixed, .chat-box #chatLineHolder .chat.rejected:hover .gratification-fixed, .chat-box #messages-control--block .chat.waiting:hover .gratification-fixed, .chat-box #messages-control--block .chat.rejected:hover .gratification-fixed {
  display: none;
}
.chat-box #chatLineHolder.moderator .chat .message, .chat-box #messages-control--block.moderator .chat .message {
  padding-right: 54px;
}
.chat-box #chatLineHolder.moderator .actions, .chat-box #messages-control--block.moderator .actions {
  width: 18px;
}
.chat-box #chatLineHolder.chat-expired .chat .likes, .chat-box #messages-control--block.chat-expired .chat .likes {
  cursor: not-allowed;
}
.chat-box #messages-control--block {
  height: 6.25rem;
  max-height: 6.25rem;
  overflow: auto;
  box-shadow: 0 1px 2px rgba(66, 77, 90, 0.2);
  background: #848B930A;
  border-radius: 0 0 4px 4px;
  padding-top: 16px;
}
.chat-box #messages-control--block .message-control--actions .btn:not(:first-child) {
  margin-left: 8px;
}
.chat-box #messages-control--block .message-control--actions a {
  font-size: 14px;
}
.chat-box #messages-control--block .message-control--actions .type-accept {
  color: #29A1F7;
}
.chat-box #messages-control--block .message-control--actions .type-eject {
  color: #2f368e;
}
.chat-box .chat-write #chat-icons {
  padding: 4px 0;
}
.chat-box .chat-write #chat-icons img {
  height: 35px;
  margin-left: 0px;
  cursor: pointer;
}
.chat-box .chat-write div[contenteditable=true] {
  outline: none;
  overflow: auto;
  padding: 8px 12px 0 12px;
  height: 50px;
  font-family: SourceSansPro;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.31;
  text-align: left;
  color: #424d5a;
}
.chat-box .chat-write div[contenteditable=true] img {
  height: 35px;
}
.chat-box .chat-write div[contenteditable=true]:empty::before {
  content: attr(data-placeholder);
}
.chat-box .chat-write div[contenteditable=true]:empty:focus::before {
  content: "";
}
.chat-box .chat-write input {
  border: none;
  box-shadow: none;
  margin-top: 10px;
  font-family: SourceSansPro;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.31;
  text-align: left;
  color: #424d5a;
}

.moderator-box {
  margin-bottom: 2rem;
}
.moderator-box .chat-box {
  height: 8rem;
}
.moderator-box .main-label {
  background: #848B930A;
  width: 100%;
  box-shadow: 0px -1px 2px #dedede;
  padding: 20px 0 3px;
}
.moderator-box .main-label p {
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 0px;
}

.switchWrapper {
  position: relative;
  z-index: 1;
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
.switchWrapper.disabled {
  opacity: 0.2;
}
.switchWrapper .switch {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 30px;
  height: 17px;
}
.switchWrapper .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switchWrapper .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switchWrapper .slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switchWrapper input:checked + .slider {
  background-color: #2f368e;
}
.switchWrapper input:focus + .slider {
  box-shadow: 0 0 1px #2f368e;
}
.switchWrapper input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}
.switchWrapper .slider.round {
  border-radius: 17px;
}
.switchWrapper .slider.round:before {
  border-radius: 50%;
}

.tag {
  border-radius: 44px;
  height: 1.5625rem;
  background-color: #f2f3f5;
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5625rem;
  letter-spacing: 0.01em;
  text-align: center;
  color: #848b93;
  margin-right: 0.25rem;
  padding: 0.25rem 0.5rem;
  transition: background-color 0.2s, color 0.2s;
}
.tag:hover {
  background-color: #848b93;
  color: #424d5a;
}

.tag-more {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
  border-radius: 50%;
  padding: 0.25rem;
  margin-right: 0.5rem;
  transition: background-color 0.2s, color 0.2s;
}
.tag-more:hover {
  background-color: #848b93;
  color: #424d5a;
}

@media all and (min-width: 1122px) {
  .gallery-container .filter-box {
    margin-top: 4.35rem;
  }
}

.gallery-big-box {
  margin-top: 4rem;
  margin-left: 0;
  margin-right: 0;
}
.gallery-big-box .gallery-jumbotron {
  width: 100%;
  height: 25rem;
  background-image: url("../images/gallery/gallery-thumbnail-big-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.gallery-big-box .gallery-jumbotron:after {
  content: "";
  width: 100%;
  height: 40%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
}
.gallery-big-box .gallery-jumbotron .jumbotron-title {
  position: absolute;
  left: 3rem;
  bottom: 2rem;
  z-index: 1;
}
.gallery-big-box .gallery-jumbotron .jumbotron-title p {
  font-family: SourceSansPro;
  font-size: 1.25rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: left;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  margin-bottom: 0;
  margin-top: 1rem;
}
.gallery-big-box .gallery-jumbotron .jumbotron-title p i {
  margin-right: 1rem;
}
.gallery-big-box .gallery-jumbotron .jumbotron-title p span {
  margin-right: 1.5rem;
}
.gallery-big-box .gallery-jumbotron .button-box {
  position: absolute;
  right: 3rem;
  bottom: 2rem;
  z-index: 1;
}
.gallery-big-box .gallery-jumbotron .button-box a {
  margin-left: 1rem;
}
.gallery-big-box .gallery-jumbotron .button-box #cancel-button, .gallery-big-box .gallery-jumbotron .button-box #download-selected-button {
  display: none;
}
.gallery-big-box .gallery-jumbotron .button-box #cancel-button {
  background-color: #f7f9fa;
  color: #424d5a;
}
.gallery-big-box .gallery-jumbotron .button-box #cancel-button:hover, .gallery-big-box .gallery-jumbotron .button-box #cancel-button:focus {
  background-color: #f2f3f5;
}
.gallery-big-box .gallery-description {
  margin: 3rem;
  max-width: 38rem;
}
.gallery-big-box #nanogallery2 {
  padding: 1.5rem;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail {
  box-shadow: 0 15px 25px 0 rgba(66, 77, 90, 0.4);
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 25.8%;
  width: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), #000000);
  opacity: 0.5;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 51.61%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
  opacity: 0.75;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail:hover .gallery-select {
  opacity: 1;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail:hover .gallery-likes {
  opacity: 1;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select {
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 1rem;
  top: 1rem;
  transition: opacity 0.2s;
  display: none;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container {
  display: block;
  position: relative;
  font-family: SourceSansPro;
  font-size: 18px;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  font-weight: normal;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  margin-top: 0;
  cursor: pointer;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container input:checked ~ .checkmark {
  background-color: #2f368e;
  border: none;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.25);
  border: 2px solid white;
  transition: background-color 0.2s;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  background-image: url("../images/training-icon/checkmark.svg");
  background-repeat: no-repeat;
  width: 14px;
  height: 12px;
  background-position: center center;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -6px;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container:hover {
  opacity: 1;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container:hover input ~ .checkmark {
  background-color: #848b93;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-select .checkbox-container.checked {
  opacity: 1;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-likes {
  z-index: 1;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: "SourceSansPro";
  font-size: 1.25rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.2s;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail .gallery-likes a {
  vertical-align: middle;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail.gallery-more {
  text-align: center;
  position: relative;
}
.gallery-big-box #nanogallery2 .nGY2GThumbnail.gallery-more .more {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  margin-top: -2rem;
  width: 100%;
  font-family: "SohoGothicPro";
  font-size: 3.0625rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.51;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(32, 51, 74, 0.2);
}
.gallery-big-box.selection-mode .button-box #cancel-button, .gallery-big-box.selection-mode .button-box #download-selected-button {
  display: inline-block;
}
.gallery-big-box.selection-mode .button-box #download-all-button {
  display: none;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail {
  box-shadow: 0 15px 25px 0 rgba(66, 77, 90, 0.4);
  opacity: 0.25;
  transition: opacity 0.2s;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:after {
  background-image: none;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:hover, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.selected, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.nGY2GThumbnail {
  opacity: 1;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:hover .gallery-select, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.selected .gallery-select, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.nGY2GThumbnail .gallery-select {
  opacity: 1;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:hover .gallery-likes, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.selected .gallery-likes, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.nGY2GThumbnail .gallery-likes {
  opacity: 0;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:hover img, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.selected img, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.nGY2GThumbnail img {
  opacity: 1;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail:hover .nGY2GThumbnailIcons, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.selected .nGY2GThumbnailIcons, .gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail.nGY2GThumbnail .nGY2GThumbnailIcons {
  filter: opacity(1);
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail img {
  box-shadow: 0 15px 25px 0 rgba(66, 77, 90, 0.4);
  opacity: 0.25;
  transition: opacity 0.2s;
}
.gallery-big-box.selection-mode #nanogallery2 .nGY2GThumbnail img:after {
  background-image: none;
}

.knowledge-base-main-container {
  margin-top: 4rem;
  padding: 1.5rem 0 1.5rem 1.5rem;
  margin-left: 0;
  margin-right: 0;
}
.knowledge-base-main-container .folderBox img {
  margin-top: 1em;
}
.knowledge-base-main-container .fileBox {
  cursor: pointer;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 4px;
  text-align: center;
  margin-right: 1.5rem;
  float: left;
  position: relative;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.knowledge-base-main-container .fileBox:hover, .knowledge-base-main-container .fileBox:focus, .knowledge-base-main-container .fileBox.is_selected {
  background-color: #f7f9fa;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
}
.knowledge-base-main-container .fileBox:hover > .button-box, .knowledge-base-main-container .fileBox:focus > .button-box, .knowledge-base-main-container .fileBox.is_selected > .button-box {
  opacity: 1;
}
.knowledge-base-main-container .fileBox:hover .file-box-title-inner, .knowledge-base-main-container .fileBox:focus .file-box-title-inner, .knowledge-base-main-container .fileBox.is_selected .file-box-title-inner {
  color: #424d5a;
}
.knowledge-base-main-container .fileBox.pdf > .button-box .preview-button {
  display: block;
}
.knowledge-base-main-container .fileBox .image-wrap {
  margin: 1.5rem auto 0 auto;
  position: relative;
  text-align: center;
  width: 5rem;
}
.knowledge-base-main-container .fileBox img {
  display: inline-block;
  max-height: 6rem;
}
.knowledge-base-main-container .fileBox .button-box {
  position: absolute;
  display: block;
  bottom: 1rem;
  right: 1rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.knowledge-base-main-container .fileBox .button-box .preview-button {
  margin-top: 1rem;
  display: none;
}
.knowledge-base-main-container .fileBox .button-box-bottom {
  display: none;
}
.knowledge-base-main-container .fileBox .file-box-title {
  display: table;
  width: 100%;
  height: 2.5rem;
  padding: 1rem;
  max-width: 100%;
  text-align: center;
}
.knowledge-base-main-container .fileBox .file-box-title .file-box-title-inner {
  display: table-cell;
  vertical-align: bottom;
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  color: #848b93;
  transition: color 0.2s;
}
.knowledge-base-main-container .fileBox .file-box-subtitle {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: center;
  color: #848b93;
}
.knowledge-base-main-container .fileBox > .button-box-bottom {
  padding: 1.5rem;
}
@media all and (max-width: 1121px) {
  .knowledge-base-main-container .fileBox {
    width: 45%;
  }
}
@media all and (max-width: 623px) {
  .knowledge-base-main-container {
    padding-right: 1.5rem;
  }
  .knowledge-base-main-container .fileBox {
    width: 100%;
    height: initial;
    min-height: 12.8rem;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0;
  }
  .knowledge-base-main-container .fileBox:last-child {
    border-bottom: none;
  }
  .knowledge-base-main-container .fileBox .button-box {
    display: none;
  }
  .knowledge-base-main-container .fileBox .button-box-bottom {
    display: block;
  }
  .knowledge-base-main-container .fileBox .button-box-bottom .download-button, .knowledge-base-main-container .fileBox .button-box-bottom .preview-button {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
  }
  .knowledge-base-main-container .fileBox .button-box-bottom .download-button i, .knowledge-base-main-container .fileBox .button-box-bottom .preview-button i {
    font-size: 1.25rem;
  }
  .knowledge-base-main-container .fileBox .button-box-bottom .download-button {
    display: inline-block;
  }
  .knowledge-base-main-container .fileBox .button-box-bottom .preview-button {
    display: none;
  }
  .knowledge-base-main-container .fileBox.pdf .preview-button {
    display: inline-block;
  }
}

.nGY2GThumbnail.nGY2GThumbnailSubSelected {
  opacity: 1;
  box-shadow: 0 15px 25px 0 rgba(66, 77, 90, 0.4);
}
.nGY2GThumbnail.nGY2GThumbnailSubSelected .gallery-select {
  opacity: 1;
}
.nGY2GThumbnail.nGY2GThumbnailSubSelected .gallery-likes {
  opacity: 0;
}
.nGY2GThumbnail.nGY2GThumbnailSubSelected img {
  opacity: 1;
}
.nGY2GThumbnail.nGY2GThumbnailSubSelected .nGY2GThumbnailIcons {
  filter: opacity(1) !important;
}

.container .title-row .breadcrumb {
  background-color: transparent;
}
.container .title-row .breadcrumb > li + li:before {
  content: url("../images/training-icon/Arrow_Back.svg");
  transform: rotate(180deg);
  width: 0.5rem;
  display: inline-block;
  padding: 0;
  margin-right: 1rem;
}
.container .knowledge-base-main-container .pdf-viewer {
  height: 40rem;
}
@media all and (max-width: 440px) {
  .container .col-mobile-100 {
    width: 100%;
  }
}
.container.training-container .filter-box, .container.lessons_index_container .filter-box, .container.home-container .timeline-items .filter-box {
  position: sticky;
}
@media all and (max-width: 1121px) {
  .container.training-container .filter-box, .container.lessons_index_container .filter-box, .container.home-container .timeline-items .filter-box {
    position: static;
    margin-bottom: 1.5rem;
  }
}
.container.training-container .fa-check, .container.training-container .fa-graduation-cap, .container.lessons_index_container .fa-check, .container.lessons_index_container .fa-graduation-cap, .container.home-container .timeline-items .fa-check, .container.home-container .timeline-items .fa-graduation-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container.training-container .btn-lessons, .container.lessons_index_container .btn-lessons, .container.home-container .timeline-items .btn-lessons {
  position: relative;
  bottom: 0;
  max-height: 1.75rem;
  line-height: 1.75rem;
  min-width: 130px;
}
.container.training-container .training-description, .container.lessons_index_container .training-description, .container.home-container .timeline-items .training-description {
  min-height: 180px;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-description, .container.lessons_index_container .training-description, .container.home-container .timeline-items .training-description {
    min-height: 155px;
  }
}
.container.training-container .training-box, .container.lessons_index_container .training-box, .container.home-container .timeline-items .training-box {
  margin-bottom: 2rem;
  position: relative;
  min-height: 14.5em;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box, .container.lessons_index_container .training-box, .container.home-container .timeline-items .training-box {
    padding: 0px !important;
    min-height: auto;
  }
}
.container.training-container .training-box .row, .container.lessons_index_container .training-box .row, .container.home-container .timeline-items .training-box .row {
  position: relative;
}
.container.training-container .training-box:hover, .container.lessons_index_container .training-box:hover, .container.home-container .timeline-items .training-box:hover {
  box-shadow: 5px 5px 15px rgba(66, 77, 90, 0.2);
}
.container.training-container .training-box:hover .training-thumbnail, .container.lessons_index_container .training-box:hover .training-thumbnail, .container.home-container .timeline-items .training-box:hover .training-thumbnail {
  transform: translate(-50%, -50.5%);
}
.container.training-container .training-box .is-in-timeline, .container.lessons_index_container .training-box .is-in-timeline, .container.home-container .timeline-items .training-box .is-in-timeline {
  right: 35px;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .is-in-timeline, .container.lessons_index_container .training-box .is-in-timeline, .container.home-container .timeline-items .training-box .is-in-timeline {
    right: 40px;
  }
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .col-lg-6-lesson-thumbnail, .container.lessons_index_container .training-box .col-lg-6-lesson-thumbnail, .container.home-container .timeline-items .training-box .col-lg-6-lesson-thumbnail {
    padding-right: 15px;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .training-box .col-lg-6-lesson-thumbnail, .container.lessons_index_container .training-box .col-lg-6-lesson-thumbnail, .container.home-container .timeline-items .training-box .col-lg-6-lesson-thumbnail {
    width: 100%;
    padding-right: 20px;
  }
}
.container.training-container .training-box .col-lg-6-lesson-content, .container.lessons_index_container .training-box .col-lg-6-lesson-content, .container.home-container .timeline-items .training-box .col-lg-6-lesson-content {
  padding-left: 0px;
  height: 18rem;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .col-lg-6-lesson-content, .container.lessons_index_container .training-box .col-lg-6-lesson-content, .container.home-container .timeline-items .training-box .col-lg-6-lesson-content {
    height: 12rem;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .training-box .col-lg-6-lesson-content, .container.lessons_index_container .training-box .col-lg-6-lesson-content, .container.home-container .timeline-items .training-box .col-lg-6-lesson-content {
    width: 100%;
    padding-left: 20px;
    height: auto;
  }
}
.container.training-container .training-box .col-lg-6-lesson-content.has_notification::before, .container.lessons_index_container .training-box .col-lg-6-lesson-content.has_notification::before, .container.home-container .timeline-items .training-box .col-lg-6-lesson-content.has_notification::before {
  right: 30px;
}
.container.training-container .training-box .btn, .container.lessons_index_container .training-box .btn, .container.home-container .timeline-items .training-box .btn {
  position: absolute;
  right: 40px;
  bottom: 0;
}
.container.training-container .training-box .btn i, .container.lessons_index_container .training-box .btn i, .container.home-container .timeline-items .training-box .btn i {
  margin-right: 5px;
}
.container.training-container .training-box .training-thumbail-wrapper, .container.lessons_index_container .training-box .training-thumbail-wrapper, .container.home-container .timeline-items .training-box .training-thumbail-wrapper {
  position: relative;
  border-radius: 4px;
  width: 13.5rem;
  height: 18rem;
  display: block;
  overflow: hidden;
  max-width: 100%;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .training-thumbail-wrapper, .container.lessons_index_container .training-box .training-thumbail-wrapper, .container.home-container .timeline-items .training-box .training-thumbail-wrapper {
    width: 12rem;
    height: 12rem;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .training-box .training-thumbail-wrapper, .container.lessons_index_container .training-box .training-thumbail-wrapper, .container.home-container .timeline-items .training-box .training-thumbail-wrapper {
    margin: auto;
    width: 100%;
  }
}
.container.training-container .training-box .training-thumbail-wrapper .videoLayer, .container.lessons_index_container .training-box .training-thumbail-wrapper .videoLayer, .container.home-container .timeline-items .training-box .training-thumbail-wrapper .videoLayer {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #ffffffdd;
}
.container.training-container .training-box .training-thumbail-wrapper .videoLayer i, .container.lessons_index_container .training-box .training-thumbail-wrapper .videoLayer i, .container.home-container .timeline-items .training-box .training-thumbail-wrapper .videoLayer i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0px 0px 30px #00000077;
  font-size: 72px;
  transition: transform 0.3s ease;
}
.container.training-container .training-box .training-thumbail-wrapper:hover .videoLayer i, .container.lessons_index_container .training-box .training-thumbail-wrapper:hover .videoLayer i, .container.home-container .timeline-items .training-box .training-thumbail-wrapper:hover .videoLayer i {
  transform: translate(-50%, -50.5%);
}
.container.training-container .training-box .training-thumbnail, .container.lessons_index_container .training-box .training-thumbnail, .container.home-container .timeline-items .training-box .training-thumbnail {
  box-shadow: 0 1px 2px 0 rgba(39, 45, 52, 0.4);
  border-radius: 4px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  position: absolute;
  width: 18rem;
  height: 18rem;
  top: 50%;
  left: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .training-thumbnail, .container.lessons_index_container .training-box .training-thumbnail, .container.home-container .timeline-items .training-box .training-thumbnail {
    width: 12rem;
    height: 12rem;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .training-box .training-thumbnail, .container.lessons_index_container .training-box .training-thumbnail, .container.home-container .timeline-items .training-box .training-thumbnail {
    width: 280px;
    height: 280px;
  }
}
@media all and (max-width: 440px) {
  .container.training-container .training-box .training-thumbnail, .container.lessons_index_container .training-box .training-thumbnail, .container.home-container .timeline-items .training-box .training-thumbnail {
    width: 420px;
    height: 420px;
  }
}
.container.training-container .training-box .training-number, .container.lessons_index_container .training-box .training-number, .container.home-container .timeline-items .training-box .training-number {
  text-align: center;
  font-family: "SohoGothicPro";
  font-size: 2.625rem;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.62;
  letter-spacing: 0.01em;
  color: #424d5a;
  width: 88px;
  position: absolute;
  top: 49%;
  transform: translateY(-50%);
}
.container.training-container .training-box .training-number.mobile-show, .container.lessons_index_container .training-box .training-number.mobile-show, .container.home-container .timeline-items .training-box .training-number.mobile-show {
  display: none;
  font-size: 1.5em;
  font-weight: 500;
  top: unset;
  bottom: 0;
  position: absolute;
}
.container.training-container .training-box .training-description, .container.lessons_index_container .training-box .training-description, .container.home-container .timeline-items .training-box .training-description {
  padding-right: 1.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .training-description, .container.lessons_index_container .training-box .training-description, .container.home-container .timeline-items .training-box .training-description {
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .training-box .training-description, .container.lessons_index_container .training-box .training-description, .container.home-container .timeline-items .training-box .training-description {
    padding: 2rem 1.25rem 1.75rem;
    position: relative;
    top: unset;
    transform: none;
    margin-bottom: 1rem;
  }
}
.container.training-container .training-box .training-description h2, .container.lessons_index_container .training-box .training-description h2, .container.home-container .timeline-items .training-box .training-description h2 {
  font-family: SohoGothicPro;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #424d5a;
  margin-top: 0;
  font-weight: 300;
}
@media all and (min-width: 768px) and (max-width: 1121px) {
  .container.training-container .training-box .training-description h2, .container.lessons_index_container .training-box .training-description h2, .container.home-container .timeline-items .training-box .training-description h2 {
    font-size: 16px;
  }
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .training-description h2, .container.lessons_index_container .training-box .training-description h2, .container.home-container .timeline-items .training-box .training-description h2 {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.container.training-container .training-box .training-description h2 a, .container.lessons_index_container .training-box .training-description h2 a, .container.home-container .timeline-items .training-box .training-description h2 a {
  color: #424D5A;
}
.container.training-container .training-box .training-description p, .container.lessons_index_container .training-box .training-description p, .container.home-container .timeline-items .training-box .training-description p {
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box .training-description p, .container.lessons_index_container .training-box .training-description p, .container.home-container .timeline-items .training-box .training-description p {
    font-size: 14px;
  }
}
.container.training-container .training-box .training-description .btn, .container.lessons_index_container .training-box .training-description .btn, .container.home-container .timeline-items .training-box .training-description .btn {
  float: right;
  margin-bottom: 1rem;
}
.container.training-container .training-box.active .training-number, .container.lessons_index_container .training-box.active .training-number, .container.home-container .timeline-items .training-box.active .training-number {
  color: #2f368e;
}
.container.training-container .training-box.done .btn-l, .container.lessons_index_container .training-box.done .btn-l, .container.home-container .timeline-items .training-box.done .btn-l {
  background-color: #848b93;
}
@media all and (max-width: 1121px) {
  .container.training-container .training-box, .container.lessons_index_container .training-box, .container.home-container .timeline-items .training-box {
    padding: 1rem;
  }
  .container.training-container .training-box .training-number, .container.lessons_index_container .training-box .training-number, .container.home-container .timeline-items .training-box .training-number {
    padding-top: 0;
    padding-bottom: 3rem;
  }
  .container.training-container .training-box .training-thumbnail, .container.lessons_index_container .training-box .training-thumbnail, .container.home-container .timeline-items .training-box .training-thumbnail {
    margin: 0 auto;
  }
}
@media all and (max-width: 680px) {
  .container.training-container .training-box .training-number, .container.lessons_index_container .training-box .training-number, .container.home-container .timeline-items .training-box .training-number {
    text-align: left;
  }
}
@media all and (max-width: 610px) {
  .container.training-container .training-box .training-number, .container.lessons_index_container .training-box .training-number, .container.home-container .timeline-items .training-box .training-number {
    display: none;
    padding: 0;
    position: relative;
    top: 50px;
    z-index: 4;
  }
  .container.training-container .training-box .training-number.mobile-show, .container.lessons_index_container .training-box .training-number.mobile-show, .container.home-container .timeline-items .training-box .training-number.mobile-show {
    display: block;
  }
}
@media all and (max-width: 539px) {
  .container.training-container .training-box .btn.btn-l, .container.lessons_index_container .training-box .btn.btn-l, .container.home-container .timeline-items .training-box .btn.btn-l {
    right: 20px;
  }
}
.container.training-container .lesson-legend, .container.lessons_index_container .lesson-legend, .container.home-container .timeline-items .lesson-legend {
  font-family: "SourceSansPro";
  font-size: 14px;
  height: 32px;
  color: #848b93;
  position: absolute;
  bottom: -40px;
  right: 40px;
}
@media all and (max-width: 1121px) {
  .container.training-container .lesson-legend, .container.lessons_index_container .lesson-legend, .container.home-container .timeline-items .lesson-legend {
    font-size: 12px;
    bottom: -20px;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .lesson-legend, .container.lessons_index_container .lesson-legend, .container.home-container .timeline-items .lesson-legend {
    right: 15px;
    bottom: -15px;
  }
}
.container.training-container .lesson-legend .legend-item, .container.training-container .lesson-legend .lessonLabel, .container.lessons_index_container .lesson-legend .legend-item, .container.lessons_index_container .lesson-legend .lessonLabel, .container.home-container .timeline-items .lesson-legend .legend-item, .container.home-container .timeline-items .lesson-legend .lessonLabel {
  display: inline-block;
  height: 32px;
  line-height: 2em;
  border-radius: 42px;
  background: #f2f3f5;
  color: #848b93;
  text-align: center;
  position: relative;
  margin-left: 8px;
}
@media all and (max-width: 1121px) {
  .container.training-container .lesson-legend .legend-item, .container.training-container .lesson-legend .lessonLabel, .container.lessons_index_container .lesson-legend .legend-item, .container.lessons_index_container .lesson-legend .lessonLabel, .container.home-container .timeline-items .lesson-legend .legend-item, .container.home-container .timeline-items .lesson-legend .lessonLabel {
    height: 24px;
  }
}
.container.training-container .lesson-legend .lessonLabel, .container.lessons_index_container .lesson-legend .lessonLabel, .container.home-container .timeline-items .lesson-legend .lessonLabel {
  min-width: 60px;
  padding: 0px 15px;
  font-family: SourceSansPro;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: normal;
}
.container.training-container .lesson-legend .legend-item, .container.lessons_index_container .lesson-legend .legend-item, .container.home-container .timeline-items .lesson-legend .legend-item {
  width: 32px;
}
@media all and (max-width: 1121px) {
  .container.training-container .lesson-legend .legend-item, .container.lessons_index_container .lesson-legend .legend-item, .container.home-container .timeline-items .lesson-legend .legend-item {
    width: 24px;
  }
}
.container.training-container .lesson-legend .legend-item a .iconWrapper, .container.lessons_index_container .lesson-legend .legend-item a .iconWrapper, .container.home-container .timeline-items .lesson-legend .legend-item a .iconWrapper {
  color: #848b93;
}
.container.training-container .lesson-legend .legend-item span.iconWrapper, .container.lessons_index_container .lesson-legend .legend-item span.iconWrapper, .container.home-container .timeline-items .lesson-legend .legend-item span.iconWrapper {
  opacity: 0.3;
  transition: opacity 300ms ease 0s;
  display: block;
  line-height: 2.2em;
  width: 100%;
  height: 100%;
  padding-left: 2px;
}
.container.training-container .lesson-legend .legend-item.checked_begin, .container.lessons_index_container .lesson-legend .legend-item.checked_begin, .container.home-container .timeline-items .lesson-legend .legend-item.checked_begin {
  /* 						color: #7ba51c; */
}
.container.training-container .lesson-legend .legend-item.checked_end, .container.lessons_index_container .lesson-legend .legend-item.checked_end, .container.home-container .timeline-items .lesson-legend .legend-item.checked_end {
  background: #7ba51c;
}
.container.training-container .lesson-legend .legend-item.checked_end a span.iconWrapper, .container.lessons_index_container .lesson-legend .legend-item.checked_end a span.iconWrapper, .container.home-container .timeline-items .lesson-legend .legend-item.checked_end a span.iconWrapper {
  color: white;
}
.container.training-container .lesson-legend .legend-item.checked_end span.iconWrapper, .container.lessons_index_container .lesson-legend .legend-item.checked_end span.iconWrapper, .container.home-container .timeline-items .lesson-legend .legend-item.checked_end span.iconWrapper {
  opacity: 1;
}
.container.training-container .lesson-legend .legend-item:hover span.iconWrapper, .container.lessons_index_container .lesson-legend .legend-item:hover span.iconWrapper, .container.home-container .timeline-items .lesson-legend .legend-item:hover span.iconWrapper {
  opacity: 1;
}
.container.training-container .lesson-legend .legend-item .legend-content, .container.lessons_index_container .lesson-legend .legend-item .legend-content, .container.home-container .timeline-items .lesson-legend .legend-item .legend-content {
  display: none;
  position: absolute;
  bottom: 40px;
  right: -20px;
  background: white;
  color: #424d5a;
  padding: 10px 15px 10px 15px;
  border: 0px solid;
  font-size: 16px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 20px 20px 0 rgba(66, 77, 90, 0.15);
  z-index: 2;
}
@media all and (max-width: 1121px) {
  .container.training-container .lesson-legend .legend-item .legend-content, .container.lessons_index_container .lesson-legend .legend-item .legend-content, .container.home-container .timeline-items .lesson-legend .legend-item .legend-content {
    font-size: 14px;
    bottom: 30px;
  }
}
@media all and (max-width: 1024px) {
  .container.training-container .lesson-legend .legend-item .legend-content, .container.lessons_index_container .lesson-legend .legend-item .legend-content, .container.home-container .timeline-items .lesson-legend .legend-item .legend-content {
    white-space: normal;
    width: 100vw;
    max-width: calc(50vw - 60px);
  }
}
@media all and (max-width: 440px) {
  .container.training-container .lesson-legend .legend-item .legend-content, .container.lessons_index_container .lesson-legend .legend-item .legend-content, .container.home-container .timeline-items .lesson-legend .legend-item .legend-content {
    max-width: calc(100vw - 70px);
  }
}
.container.training-container .lesson-legend .legend-item .legend-content i, .container.lessons_index_container .lesson-legend .legend-item .legend-content i, .container.home-container .timeline-items .lesson-legend .legend-item .legend-content i {
  margin-right: 5px;
}
.container.training-container .header-1 {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
@media all and (max-width: 767px) {
  .container.training-container .header-1 {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}
@media all and (max-width: 640px) {
  .container.training-container .header-1 {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
}
.container .mb-40 {
  margin-bottom: 40px;
}
.container #lesson-container {
  height: 640px;
  position: relative;
  overflow: hidden;
}
.container #lesson-container iframe {
  width: 100%;
  height: 640px;
  border: none;
}
@media all and (max-width: 1121px) {
  .container #lesson-container {
    overflow-x: scroll;
    height: 630px;
  }
}

@media all and (min-width: 1122px) {
  .lessons_section #page-wrapper .container .title-row {
    margin-bottom: 3rem;
  }
}
.lessons_section #page-wrapper .container .header-1 {
  margin-top: 0;
}

.logo-row {
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: right;
}
.logo-row img {
  display: block;
  max-height: 3rem;
  float: right;
}

.welcome-message {
  padding: 2rem;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #2f368e;
  background-image: url("../images/login/welcome-message-clouds.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.1);
}
@media all and (max-width: 1122px) {
  .welcome-message {
    background-image: none;
  }
}
@media all and (max-width: 767px) {
  .welcome-message {
    padding: 1rem;
  }
}
.welcome-message h1 {
  font-family: "SohoGothicPro";
  font-size: 2rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.regulations-form .red-checkboxes, .contact-main-container .red-checkboxes {
  padding-top: 0px;
}
.regulations-form form .error-message, .contact-main-container form .error-message {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #2f368e;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.regulations-form form.alert-success, .contact-main-container form.alert-success {
  background-color: transparent;
}
.regulations-form form.alert-success:after, .contact-main-container form.alert-success:after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #7ba51c;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.form-wrapper {
  padding: 4rem;
  background-color: white;
  border-radius: 4px;
}
@media all and (max-width: 767px) {
  .form-wrapper {
    padding: 4rem 1rem;
  }
}
.form-wrapper p {
  font-size: 1rem;
  line-height: 1.25;
  font-family: "SourceSansPro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: #848b93;
  text-shadow: 0 1px 0 #ffffff;
}
.form-wrapper p a {
  color: #424d5a;
}
.form-wrapper p a:hover, .form-wrapper p a:focus {
  text-decoration: underline;
}
.form-wrapper p.login-register-info {
  margin-bottom: 2rem;
  text-align: right;
}
.form-wrapper p.help-block {
  font-size: 0.8125rem;
}
.form-wrapper form .form-group {
  position: relative;
  transition: opacity 0.2s ease;
  margin-bottom: 1.875rem;
}
.form-wrapper form .form-group .error-message {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #2f368e;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.form-wrapper form .form-group.alert-success {
  background-color: transparent;
}
.form-wrapper form .form-group.alert-success:after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #7ba51c;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.form-wrapper form .form-group.alert-danger {
  background-color: transparent;
}
.form-wrapper form .form-group.alert-danger .form-control {
  border: 1px solid #2f368e;
}
.form-wrapper form .form-group.alert-danger:after {
  content: "\f06a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2f368e;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.form-wrapper form .form-group.alert-danger .error-message {
  display: block;
}
.form-wrapper form .form-group:hover label {
  opacity: 1;
}
.form-wrapper form .form-group:hover input {
  opacity: 1;
}
.form-wrapper form .form-group label {
  font-size: 1rem;
  opacity: 0.5;
  transition: font-size 0.2s ease, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s, color 0.2s, font-weight 0.2s, opacity 0.2s;
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  color: #424d5a;
  font-weight: normal;
}
.form-wrapper form .form-group input {
  height: 3rem;
}
.form-wrapper form .form-group input, .form-wrapper form .form-group textarea {
  position: relative;
  opacity: 0.5;
  top: 0;
  left: 0;
  border-radius: 4px;
  border: 1px solid #848b93;
  background: transparent;
}
.form-wrapper form .form-group input:valid, .form-wrapper form .form-group textarea:valid {
  background: white;
  opacity: 1;
  border: 1px solid rgba(132, 139, 147, 0.5);
}
.form-wrapper form .form-group input:valid:hover, .form-wrapper form .form-group textarea:valid:hover {
  border: 1px solid #848b93;
}
.form-wrapper form .form-group input:valid:required ~ label, .form-wrapper form .form-group input:not([required]):not(.empty) ~ label, .form-wrapper form .form-group textarea:valid:required ~ label, .form-wrapper form .form-group textarea:not([required]):not(.empty) ~ label {
  font-size: 0.8125rem;
  top: -1.25rem;
  font-weight: bold;
}
.form-wrapper form .form-group input:focus, .form-wrapper form .form-group textarea:focus {
  box-shadow: none;
  opacity: 1;
}
.form-wrapper form .form-group input:focus + label, .form-wrapper form .form-group textarea:focus + label {
  opacity: 1;
}
.form-wrapper form .form-group input:disabled {
  opacity: 0.5;
}
.form-wrapper form .form-group input:disabled + label {
  font-size: 0.8125rem;
  top: -1.25rem;
  font-weight: bold;
}
.form-wrapper form .form-group input:disabled:valid {
  opacity: 0.5;
}
.form-wrapper form .form-group input:disabled:valid + label {
  opacity: 0.5;
}
.form-wrapper form .form-group p a {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.form-wrapper form .form-group p a:hover {
  opacity: 1;
}
.form-wrapper form .form-group select {
  height: 3rem;
  border-radius: 4px;
  background-color: white;
  border: solid 1px rgba(132, 139, 147, 0.5);
  transition: border 0.2s;
}
.form-wrapper form .form-group select + label {
  font-size: 0.8125rem;
  top: -1.25rem;
  font-weight: bold;
}
.form-wrapper form .form-group select:hover {
  border: solid 1px #848b93;
}
.form-wrapper form .form-group select:focus {
  box-shadow: none;
  border: solid 1px #848b93;
}
.form-wrapper form .chosen-container {
  width: 100%;
}
.form-wrapper form .chosen-container .chosen-choices {
  min-height: 3rem;
  border-radius: 4px;
  background-color: white;
  border: solid 1px rgba(132, 139, 147, 0.5);
  transition: border 0.2s;
  padding: 0.5rem;
  background-image: none;
}
.form-wrapper form .chosen-container .chosen-choices:hover {
  border: solid 1px #848b93;
}
.form-wrapper form .chosen-container .chosen-choices:focus {
  box-shadow: none;
  border: solid 1px #848b93;
}
.form-wrapper form .chosen-container .chosen-choices .search-choice {
  font-family: "SourceSansPro";
  font-size: 1rem;
  padding: 0.5rem;
  background-color: #f7f9fa;
  background-image: none;
  transition: background-color 0.2s;
}
.form-wrapper form .chosen-container .chosen-choices .search-choice span {
  display: inline-block;
  vertical-align: middle;
}
.form-wrapper form .chosen-container .chosen-choices .search-choice:hover {
  background-color: #f2f3f5;
}
.form-wrapper form .chosen-container .chosen-choices .search-choice .search-choice-close {
  background-image: url("../images/chosen-sprite.png");
  display: inline-block;
  vertical-align: middle;
  position: static;
  margin-left: 0.5rem;
}
.form-wrapper form .input-group {
  margin-bottom: 1.875rem;
}
.form-wrapper form .input-group:hover .btn-file + label {
  opacity: 1;
}
.form-wrapper form .input-group input {
  border: none;
  background-color: transparent;
  box-shadow: none;
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
}
.form-wrapper form .input-group .btn-file {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.form-wrapper form .input-group .btn-file + label {
  font-size: 0.8125rem;
  top: -1.25rem;
  font-weight: bold;
  position: absolute;
  transition: font-size 0.2s ease, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s, color 0.2s, font-weight 0.2s, opacity 0.2s;
  position: absolute;
  left: 0.875rem;
  color: #424d5a;
  opacity: 0.5;
}
.form-wrapper form .input-group .btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
.form-wrapper form .red-checkboxes.checkbox {
  padding: 0;
}
.form-wrapper form .red-checkboxes.checkbox .checkbox-container {
  color: #424d5a;
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
}
.form-wrapper form .red-checkboxes.checkbox .checkbox-container.small {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
}
.form-wrapper form .red-checkboxes.checkbox .error-message {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.31;
  letter-spacing: 0.01em;
  text-align: left;
  color: #2f368e;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.login-help .caption {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0 1.5rem;
}
.login-help .caption a {
  font-weight: bold;
}
.login-help .caption a:hover {
  text-decoration: underline;
}

.users_register .login-help .caption {
  text-align: right;
}

.contact-red-box {
  width: 100%;
  background-color: #2f368e;
  background-image: url("../images/contact/clouds.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  padding: 3rem;
  border-radius: 4px;
  margin: 1rem 0 2.5rem 0;
  position: relative;
}
.contact-red-box .contact-img {
  position: absolute;
  top: -3.625rem;
  right: 1rem;
}
@media all and (max-width: 767px) {
  .contact-red-box .contact-img {
    display: none;
  }
}
.contact-red-box .text-box {
  width: 21.5rem;
  margin: 0;
}
.contact-red-box .text-box h1 {
  margin-top: 0;
  font-family: "Uni Neue", Arial;
  font-size: 1.625rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.contact-red-box .text-box p {
  font-family: "SourceSansPro";
  font-size: 1.125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.d-inblock {
  display: inline-block;
}

.pt-5px {
  padding-top: 5px;
}

.font-smaller {
  font-size: 0.85em;
}

.settings-main-container .box.info-box {
  padding: 3rem 5.3125rem 4rem 5.3125rem;
}
@media all and (max-width: 767px) {
  .settings-main-container .box.info-box {
    padding: 1.5rem 1.5rem 4rem 1.5rem;
  }
}
.settings-main-container .box.info-box.points-list {
  padding: 3rem 2.3125rem 4rem 2.3125rem;
}
@media all and (max-width: 767px) {
  .settings-main-container .box.info-box.points-list {
    padding: 1.5rem 0.5rem 4rem 0.5rem;
  }
}
.settings-main-container .box.info-box .bordered-label {
  border-bottom: 1px solid #848b933d;
  padding-bottom: 10px;
}
.settings-main-container .box.info-box h1 {
  margin-top: 0;
  font-family: "SohoGothicPro";
  font-size: 1.25rem;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #424d5a;
  margin-bottom: 2rem;
}
.settings-main-container .box.info-box .form-wrapper {
  padding: 0;
}
.settings-main-container .box.profile-box {
  margin-bottom: 2rem;
}
.settings-main-container .box.profile-box .profile-info {
  padding: 1.5rem;
}
.settings-main-container .box.profile-box .profile-info .profile-pic {
  margin-bottom: 1rem;
}
.settings-main-container .box.profile-box .profile-info .profile-name {
  font-family: "SourceSansPro";
  font-size: 1.25rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: left;
  color: #424d5a;
}
.settings-main-container .box.profile-box .profile-info .profile-position {
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: left;
  color: #848b93;
}
.settings-main-container .box.profile-box .menu {
  padding: 1.5rem 0;
}
.settings-main-container .box.profile-box .menu p {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.85;
  letter-spacing: normal;
  text-align: left;
  color: #848b93;
  padding: 0 1.5rem;
}
.settings-main-container .box.profile-box .menu .nav {
  padding: 0;
}
.settings-main-container .box.profile-box .menu .nav li {
  margin: 0.5rem 0;
  border-left: 2px solid transparent;
  transition: border-left 0.2s;
}
.settings-main-container .box.profile-box .menu .nav li a {
  padding: 0 1.5rem;
  font-family: "SourceSansPro";
  font-size: 1.125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.settings-main-container .box.profile-box .menu .nav li a:hover, .settings-main-container .box.profile-box .menu .nav li a:focus {
  background-color: transparent;
}
.settings-main-container .box.profile-box .menu .nav li:hover a {
  opacity: 1;
}
.settings-main-container .box.profile-box .menu .nav li.active {
  border-left: 2px solid #2f368e;
}
.settings-main-container .box.profile-box .menu .nav li.active a {
  opacity: 1;
}

.alert {
  text-shadow: none !important;
  position: relative;
  margin-bottom: 1.875rem;
  border: none;
}
.alert.alert-success {
  color: white !important;
  background-color: #7ba51c;
}
.alert.alert-success:after {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: white;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.alert.alert-danger {
  color: white !important;
  background-color: #2f368e;
}
.alert.alert-danger:after {
  content: "\f06a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: white;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

#file-modal.modaloverlay {
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(11.7px);
  backdrop-filter: blur(11.7px);
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  z-index: -1;
  display: none;
}
#file-modal.modaloverlay:target {
  display: block;
  opacity: 1;
  pointer-events: auto;
  z-index: 9999999;
}
#file-modal.modaloverlay .modal {
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 20px 40px 0 rgba(66, 77, 90, 0.3);
  position: relative;
  margin: 0 auto;
  display: block;
  max-width: 40rem;
  max-height: 100vh;
  overflow-y: scroll;
}
#file-modal.modaloverlay .modal > iframe, #file-modal.modaloverlay .modal > div {
  border: none;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  #file-modal.modaloverlay .modal {
    top: 50%;
    margin-top: -10rem;
    max-width: 40rem;
    max-height: 21.875rem;
    overflow-y: hidden;
  }
}
#file-modal.modaloverlay .close {
  position: absolute;
  background-image: url("../../../training-icon/ICO_Close.svg");
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1;
}

#file-modal.modaloverlay .modal .title, #file-modal.modaloverlay .file-box .title, .materials-knowledge-base .modal .title, .materials-knowledge-base .file-box .title {
  padding: 1.5rem;
  font-size: 1rem;
  font-family: "SourceSansPro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #848b93;
  margin: 0;
}
#file-modal.modaloverlay .modal .title i, #file-modal.modaloverlay .file-box .title i, .materials-knowledge-base .modal .title i, .materials-knowledge-base .file-box .title i {
  margin-right: 1rem;
  font-size: 1.375rem;
}
#file-modal.modaloverlay .modal .modal-body, #file-modal.modaloverlay .modal .file-box-body, #file-modal.modaloverlay .file-box .modal-body, #file-modal.modaloverlay .file-box .file-box-body, .materials-knowledge-base .modal .modal-body, .materials-knowledge-base .modal .file-box-body, .materials-knowledge-base .file-box .modal-body, .materials-knowledge-base .file-box .file-box-body {
  padding: 1.5rem;
}
#file-modal.modaloverlay .modal .modal-body .icon, #file-modal.modaloverlay .modal .file-box-body .icon, #file-modal.modaloverlay .file-box .modal-body .icon, #file-modal.modaloverlay .file-box .file-box-body .icon, .materials-knowledge-base .modal .modal-body .icon, .materials-knowledge-base .modal .file-box-body .icon, .materials-knowledge-base .file-box .modal-body .icon, .materials-knowledge-base .file-box .file-box-body .icon {
  position: relative;
  width: 8rem;
  height: 8rem;
  float: none;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 5px 30px 0 rgba(66, 77, 90, 0.1);
  margin: 0 auto;
}
#file-modal.modaloverlay .modal .modal-body .icon img, #file-modal.modaloverlay .modal .file-box-body .icon img, #file-modal.modaloverlay .file-box .modal-body .icon img, #file-modal.modaloverlay .file-box .file-box-body .icon img, .materials-knowledge-base .modal .modal-body .icon img, .materials-knowledge-base .modal .file-box-body .icon img, .materials-knowledge-base .file-box .modal-body .icon img, .materials-knowledge-base .file-box .file-box-body .icon img {
  padding: 1.125rem 2.125rem;
}
#file-modal.modaloverlay .modal .modal-body .file-info, #file-modal.modaloverlay .modal .file-box-body .file-info, #file-modal.modaloverlay .file-box .modal-body .file-info, #file-modal.modaloverlay .file-box .file-box-body .file-info, .materials-knowledge-base .modal .modal-body .file-info, .materials-knowledge-base .modal .file-box-body .file-info, .materials-knowledge-base .file-box .modal-body .file-info, .materials-knowledge-base .file-box .file-box-body .file-info {
  margin-top: 1.5rem;
}
#file-modal.modaloverlay .modal .modal-body .file-info p, #file-modal.modaloverlay .modal .file-box-body .file-info p, #file-modal.modaloverlay .file-box .modal-body .file-info p, #file-modal.modaloverlay .file-box .file-box-body .file-info p, .materials-knowledge-base .modal .modal-body .file-info p, .materials-knowledge-base .modal .file-box-body .file-info p, .materials-knowledge-base .file-box .modal-body .file-info p, .materials-knowledge-base .file-box .file-box-body .file-info p {
  font-family: "SourceSansPro";
  font-size: 1.125rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.01em;
  color: #424d5a;
  margin-bottom: 0;
}
#file-modal.modaloverlay .modal .modal-body .file-info small, #file-modal.modaloverlay .modal .file-box-body .file-info small, #file-modal.modaloverlay .file-box .modal-body .file-info small, #file-modal.modaloverlay .file-box .file-box-body .file-info small, .materials-knowledge-base .modal .modal-body .file-info small, .materials-knowledge-base .modal .file-box-body .file-info small, .materials-knowledge-base .file-box .modal-body .file-info small, .materials-knowledge-base .file-box .file-box-body .file-info small {
  font-family: "SourceSansPro";
  font-size: 0.8125rem;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.85;
  letter-spacing: normal;
  color: #848b93;
}
#file-modal.modaloverlay .modal .modal-body .file-info .file-title, #file-modal.modaloverlay .modal .file-box-body .file-info .file-title, #file-modal.modaloverlay .file-box .modal-body .file-info .file-title, #file-modal.modaloverlay .file-box .file-box-body .file-info .file-title, .materials-knowledge-base .modal .modal-body .file-info .file-title, .materials-knowledge-base .modal .file-box-body .file-info .file-title, .materials-knowledge-base .file-box .modal-body .file-info .file-title, .materials-knowledge-base .file-box .file-box-body .file-info .file-title {
  margin-bottom: 1.5rem;
  word-break: break-all;
}
#file-modal.modaloverlay .modal .modal-body .file-info .file-properties, #file-modal.modaloverlay .modal .file-box-body .file-info .file-properties, #file-modal.modaloverlay .file-box .modal-body .file-info .file-properties, #file-modal.modaloverlay .file-box .file-box-body .file-info .file-properties, .materials-knowledge-base .modal .modal-body .file-info .file-properties, .materials-knowledge-base .modal .file-box-body .file-info .file-properties, .materials-knowledge-base .file-box .modal-body .file-info .file-properties, .materials-knowledge-base .file-box .file-box-body .file-info .file-properties {
  margin-bottom: 3.1875rem;
}
#file-modal.modaloverlay .modal .modal-body .file-info span, #file-modal.modaloverlay .modal .file-box-body .file-info span, #file-modal.modaloverlay .file-box .modal-body .file-info span, #file-modal.modaloverlay .file-box .file-box-body .file-info span, .materials-knowledge-base .modal .modal-body .file-info span, .materials-knowledge-base .modal .file-box-body .file-info span, .materials-knowledge-base .file-box .modal-body .file-info span, .materials-knowledge-base .file-box .file-box-body .file-info span {
  display: inline-block;
  margin-right: 2rem;
}
#file-modal.modaloverlay .modal .modal-body .btn-holder, #file-modal.modaloverlay .modal .file-box-body .btn-holder, #file-modal.modaloverlay .file-box .modal-body .btn-holder, #file-modal.modaloverlay .file-box .file-box-body .btn-holder, .materials-knowledge-base .modal .modal-body .btn-holder, .materials-knowledge-base .modal .file-box-body .btn-holder, .materials-knowledge-base .file-box .modal-body .btn-holder, .materials-knowledge-base .file-box .file-box-body .btn-holder {
  padding-bottom: 1.5rem;
  margin: 0 auto;
  float: none;
  text-align: center;
}
#file-modal.modaloverlay .modal .modal-body .btn-holder .btn, #file-modal.modaloverlay .modal .file-box-body .btn-holder .btn, #file-modal.modaloverlay .file-box .modal-body .btn-holder .btn, #file-modal.modaloverlay .file-box .file-box-body .btn-holder .btn, .materials-knowledge-base .modal .modal-body .btn-holder .btn, .materials-knowledge-base .modal .file-box-body .btn-holder .btn, .materials-knowledge-base .file-box .modal-body .btn-holder .btn, .materials-knowledge-base .file-box .file-box-body .btn-holder .btn {
  margin-left: 0.5rem;
}
#file-modal.modaloverlay .modal .modal-body .btn-holder .btn i, #file-modal.modaloverlay .modal .file-box-body .btn-holder .btn i, #file-modal.modaloverlay .file-box .modal-body .btn-holder .btn i, #file-modal.modaloverlay .file-box .file-box-body .btn-holder .btn i, .materials-knowledge-base .modal .modal-body .btn-holder .btn i, .materials-knowledge-base .modal .file-box-body .btn-holder .btn i, .materials-knowledge-base .file-box .modal-body .btn-holder .btn i, .materials-knowledge-base .file-box .file-box-body .btn-holder .btn i {
  margin-right: 0;
}
@media (min-width: 768px) {
  #file-modal.modaloverlay .modal .modal-body .icon, #file-modal.modaloverlay .modal .file-box-body .icon, #file-modal.modaloverlay .file-box .modal-body .icon, #file-modal.modaloverlay .file-box .file-box-body .icon, .materials-knowledge-base .modal .modal-body .icon, .materials-knowledge-base .modal .file-box-body .icon, .materials-knowledge-base .file-box .modal-body .icon, .materials-knowledge-base .file-box .file-box-body .icon {
    float: left;
    margin-right: 1.5rem;
    width: 10.25rem;
    height: 10.25rem;
  }
  #file-modal.modaloverlay .modal .modal-body .file-info .file-title, #file-modal.modaloverlay .modal .file-box-body .file-info .file-title, #file-modal.modaloverlay .file-box .modal-body .file-info .file-title, #file-modal.modaloverlay .file-box .file-box-body .file-info .file-title, .materials-knowledge-base .modal .modal-body .file-info .file-title, .materials-knowledge-base .modal .file-box-body .file-info .file-title, .materials-knowledge-base .file-box .modal-body .file-info .file-title, .materials-knowledge-base .file-box .file-box-body .file-info .file-title {
    word-break: normal;
  }
  #file-modal.modaloverlay .modal .modal-body .btn-holder, #file-modal.modaloverlay .modal .file-box-body .btn-holder, #file-modal.modaloverlay .file-box .modal-body .btn-holder, #file-modal.modaloverlay .file-box .file-box-body .btn-holder, .materials-knowledge-base .modal .modal-body .btn-holder, .materials-knowledge-base .modal .file-box-body .btn-holder, .materials-knowledge-base .file-box .modal-body .btn-holder, .materials-knowledge-base .file-box .file-box-body .btn-holder {
    float: right;
  }
  #file-modal.modaloverlay .modal .modal-body .btn-holder .btn i, #file-modal.modaloverlay .modal .file-box-body .btn-holder .btn i, #file-modal.modaloverlay .file-box .modal-body .btn-holder .btn i, #file-modal.modaloverlay .file-box .file-box-body .btn-holder .btn i, .materials-knowledge-base .modal .modal-body .btn-holder .btn i, .materials-knowledge-base .modal .file-box-body .btn-holder .btn i, .materials-knowledge-base .file-box .modal-body .btn-holder .btn i, .materials-knowledge-base .file-box .file-box-body .btn-holder .btn i {
    margin-right: 0.25rem;
  }
}

.materials-knowledge-base .file-box {
  float: left;
  min-height: 19.5rem !important;
}
@media all and (max-width: 1121px) {
  .materials-knowledge-base .file-box {
    min-height: 26rem !important;
  }
}
.materials-knowledge-base .file-box .is-in-timeline {
  right: 35px;
}
.materials-knowledge-base .file-box.has_notification:before {
  right: 30px;
}
.materials-knowledge-base .file-box .title {
  font-size: 13px;
  padding: 1rem;
}
.materials-knowledge-base .file-box .file-box-body {
  padding: 1rem 1rem 0;
}
.materials-knowledge-base .file-box .file-box-body .icon {
  width: 7.25rem;
  height: 7.25rem;
  margin-right: 1rem;
}
@media all and (max-width: 767px) {
  .materials-knowledge-base .file-box .file-box-body .icon {
    margin: auto;
  }
}
.materials-knowledge-base .file-box .file-box-body .file-info {
  max-width: calc(100% - 8.25rem) !important;
}
@media all and (max-width: 767px) {
  .materials-knowledge-base .file-box .file-box-body .file-info {
    max-width: 100% !important;
  }
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-title p {
  font-size: 13px;
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-title i {
  font-size: 1.1rem;
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-properties {
  margin-bottom: 1.75rem;
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-properties p {
  font-size: 12.5px;
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-properties span {
  margin-right: 1rem;
}
.materials-knowledge-base .file-box .file-box-body .file-info .file-properties span.publication-date {
  margin-right: 0;
}
.materials-knowledge-base .file-box .file-box-body .file-info small {
  font-size: 11px;
  line-height: 1.35em;
  display: inline-block;
}
.materials-knowledge-base .file-box .file-box-body .btn-holder a.btn {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0.5rem;
}
.materials-knowledge-base .file-box .file-box-body .btn-holder a.pdf-prev {
  margin-right: 0.25rem;
}

.loyalty-program {
  display: none !important;
}

#test-container, #test-result-container {
  position: relative;
  width: 980px;
  height: 550px;
  overflow: hidden;
  max-width: 100%;
  background: white url("../images/background.png") top center repeat-y;
}
@media (max-width: 768px) {
  #test-container, #test-result-container {
    min-height: 400px;
  }
}
#test-container .test-board, #test-result-container .test-board {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px dashed;
}
#test-container .test-board .test-content, #test-result-container .test-board .test-content {
  padding: 40px;
}
@media (max-width: 768px) {
  #test-container .test-board .test-content, #test-result-container .test-board .test-content {
    width: 100%;
    padding: 10px;
  }
}
#test-container .test-board .test-content .choose, #test-result-container .test-board .test-content .choose {
  font-size: 14px;
}
#test-container .test-board .test-content .question, #test-result-container .test-board .test-content .question {
  font-family: SohoGothicPro;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
  color: #424d5a;
}
@media (max-width: 768px) {
  #test-container .test-board .test-content .question, #test-result-container .test-board .test-content .question {
    font-size: 16px;
  }
}
#test-container .test-board .test-content .answers, #test-result-container .test-board .test-content .answers {
  margin-bottom: 20px;
}
#test-container .test-board .test-content .answers label, #test-container .test-board .test-content .answers p.answerLabel, #test-result-container .test-board .test-content .answers label, #test-result-container .test-board .test-content .answers p.answerLabel {
  font-family: "SourceSansPro";
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #848b93;
  cursor: pointer;
  margin-bottom: 20px;
  display: inline-block;
  max-width: calc(100% - 40px);
}
#test-container .test-board .test-content .answers .radioHolder, #test-result-container .test-board .test-content .answers .radioHolder {
  background: none;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  outline: none;
  display: inline-block;
  position: relative;
  width: 19px;
  height: 19px;
  border: 2px solid #2f368e;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
  margin-left: 0px;
  margin-right: 20px;
  float: left;
}
#test-container .test-board .test-content .answers .radioHolder label, #test-result-container .test-board .test-content .answers .radioHolder label {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0px;
  top: 0px;
  background: #fff;
  cursor: pointer;
}
#test-container .test-board .test-content .answers .radioHolder label::after, #test-result-container .test-board .test-content .answers .radioHolder label::after {
  content: "";
  display: block;
  position: relative;
  top: -3px;
  left: 0px;
  width: 24px;
  height: 19px;
  border: none;
  border-radius: 0;
  background: url("../images/img_checked.png") 0 0 no-repeat;
  opacity: 0;
}
#test-container .test-board .test-content .answers .radioHolder input, #test-result-container .test-board .test-content .answers .radioHolder input {
  opacity: 0;
}
#test-container .test-board .test-content .answers .radioHolder input:checked + label::after, #test-result-container .test-board .test-content .answers .radioHolder input:checked + label::after {
  opacity: 1;
}
#test-container .test-board .test-content .buttons, #test-result-container .test-board .test-content .buttons {
  margin: auto;
  position: relative;
}
#test-container .test-board .test-content .buttons .btn-test-prev, #test-result-container .test-board .test-content .buttons .btn-test-prev {
  margin-right: 40px;
}
@media (max-width: 768px) {
  #test-container .test-board .test-content .buttons .btn-test-prev, #test-result-container .test-board .test-content .buttons .btn-test-prev {
    margin-right: 20px;
  }
}
#test-container .test-board#tb0, #test-container .centered-content, #test-result-container .test-board#tb0, #test-result-container .centered-content {
  display: block;
}
#test-container .test-board#tb0 .test-content, #test-container .centered-content .test-content, #test-result-container .test-board#tb0 .test-content, #test-result-container .centered-content .test-content {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 45%;
  width: 75%;
  transform: translate(-50%, -50%);
}
#test-container .test-board#tb0 .test-content h1, #test-container .centered-content .test-content h1, #test-result-container .test-board#tb0 .test-content h1, #test-result-container .centered-content .test-content h1 {
  margin-bottom: 30px;
}
#test-container .test-board#tb0 .test-content p, #test-container .centered-content .test-content p, #test-result-container .test-board#tb0 .test-content p, #test-result-container .centered-content .test-content p {
  margin-bottom: 20px;
}

#tb0 .test-intro h1, #tb0 .test-intro h2, #tb0 .test-intro h3 {
  margin-bottom: 40px !important;
  position: relative;
}
#tb0 .test-intro h1:after, #tb0 .test-intro h2:after, #tb0 .test-intro h3:after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -45px;
  margin: 9px auto 25px;
  display: block;
  width: 194px;
  height: 12px;
  background-image: url("https://training.af.agency/webroot/files/lessons/lekcja_master_lodowki/img/schema/a13/divider.png");
}

#test-container .test-board {
  position: absolute;
  display: none;
}

#test-result-container .test-board table {
  width: 100%;
}
#test-result-container #tb_result {
  display: block;
}
#test-result-container #tb_result .test-content {
  position: relative;
  text-align: center;
}
#test-result-container #tb_result .test-content p {
  margin-bottom: 20px;
}
#test-result-container #tb_result .test-content span.result {
  font-size: 36px;
}

.container {
  position: relative;
}
.container .leftTimeAlert {
  display: none;
  background: white none repeat scroll 0 0;
  border: 1px solid #2f368e;
  color: #2f368e;
  /*     display: block; */
  font-size: 16px;
  left: 50%;
  padding: 15px 5px;
  position: absolute;
  text-align: center;
  bottom: 485px;
  transform: translateX(-50%);
  width: 60%;
}
.container .leftTimeAlert span {
  animation-name: blinker;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  animation-duration: 1s;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  -webkit-animation-duration: 1s;
}
@-webkit-keyframes blinker {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blinker {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.container #defaultCountdownChart {
  background: white none repeat scroll 0 0;
  border: 1px solid #2f368e;
  height: 8px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  bottom: 543px;
  width: 980px;
  display: none;
}
.container #defaultCountdownChart .chartValue {
  width: 0%;
  background: #2f368e;
  height: 100%;
  transition: width 1s linear 0s;
}
.container #defaultCountdown:before {
  content: "Pozostały czas: ";
  float: left;
}
.container #defaultCountdown {
  display: none;
  font-size: 14px;
  position: absolute;
  right: 0px;
  bottom: 561px;
}
.container #defaultCountdown .countdown-period {
  display: none;
}
.container #defaultCountdown .countdown-row {
  float: left;
}
.container #defaultCountdown .countdown-section {
  padding: 0 3px;
  float: left;
  position: relative;
}
.container #defaultCountdown .countdown-section:first-child:after {
  content: ":";
  position: absolute;
  right: -1.5px;
  top: 0;
}

#lessonIframe {
  position: relative;
}
#lessonIframe.fullscreen iframe {
  background: white;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 90000;
}

.toggleFullscreen, .testAgain, .progressNotice {
  position: absolute;
  top: 0;
  left: 80%;
  transform: translate(-50%, -100%);
  padding: 0.75em 1.25em 0.75em 3.25em;
  border: none;
  background-color: #2f368e;
  z-index: 90001;
  color: white;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 6px 21px rgba(0, 0, 0, 0.17);
  font-weight: bold;
  display: inline-block;
  align-content: center;
}
@media (max-width: 1121px) {
  .toggleFullscreen, .testAgain, .progressNotice {
    padding: 0.5em 1em 0.5em 2.75em;
  }
  .toggleFullscreen:not(.fixed), .testAgain:not(.fixed), .progressNotice:not(.fixed) {
    left: 76%;
  }
}
@media (max-width: 980px) {
  .toggleFullscreen, .testAgain, .progressNotice {
    font-size: 15px;
  }
}
@media (max-width: 530px) {
  .toggleFullscreen, .testAgain, .progressNotice {
    font-weight: normal;
    font-size: 14px;
  }
}
.toggleFullscreen span, .testAgain span, .progressNotice span {
  white-space: nowrap;
}
.toggleFullscreen:focus, .testAgain:focus, .progressNotice:focus {
  outline: none;
}
.toggleFullscreen:before, .testAgain:before, .progressNotice:before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  margin-left: -2em;
  background-image: url("../images/fs.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
@media (max-width: 1121px) {
  .toggleFullscreen:before, .testAgain:before, .progressNotice:before {
    width: 1.25em;
    height: 1.25em;
  }
}
.toggleFullscreen.fixed, .testAgain.fixed, .progressNotice.fixed {
  position: fixed;
  border-radius: 0 0 10px 10px;
  background-color: white;
  color: #2f368e;
  top: 0;
  transform: translate(-50%, 0);
}
.toggleFullscreen.fixed span, .testAgain.fixed span, .progressNotice.fixed span {
  white-space: nowrap;
}
.toggleFullscreen.fixed:before, .testAgain.fixed:before, .progressNotice.fixed:before {
  background-image: url("../images/fs-inv.svg");
}

@media (max-width: 768px) {
  .toggleFullscreen {
    padding-right: 0;
  }
}
@media (max-width: 530px) {
  .toggleFullscreen {
    left: auto;
    right: 0px;
  }
}
@media (max-width: 768px) {
  .toggleFullscreen:not(.fixed) {
    left: auto;
    right: 0px;
  }
}
@media (max-width: 768px) {
  .toggleFullscreen span {
    visibility: hidden;
    display: inline-block;
    width: 0px;
  }
}

.testAgain {
  left: 55%;
}
@media (max-width: 1121px) {
  .testAgain {
    left: 50%;
  }
}
@media (max-width: 768px) {
  .testAgain {
    display: block;
    padding: 0.5em 1em 0.5em 1em !important;
    left: 57%;
  }
}
@media (max-width: 530px) {
  .testAgain {
    left: 62%;
  }
}
.testAgain:before {
  background-image: url("../images/icon_test_white1.svg");
}
@media (max-width: 768px) {
  .testAgain:before {
    display: none;
  }
}
.testAgain:hover {
  color: white;
}
.testAgain.fixed:before {
  background-image: url("../images/icon_test_red.svg");
}
.testAgain.fixed:hover {
  color: #2f368e;
}
@media (max-width: 1121px) {
  .testAgain:not(.fixed) {
    left: 44%;
  }
}
@media (max-width: 768px) {
  .testAgain:not(.fixed) {
    left: 63.5%;
  }
}

.progressNoticeWrapper {
  top: -156px;
  width: 300px;
  transition: all 500ms ease 0s;
  transform: translateX(-50%);
  position: absolute;
  left: 33.3%;
  z-index: 9;
}
@media (max-width: 1121px) {
  .progressNoticeWrapper {
    left: 17%;
    top: -145px;
  }
}
@media (max-width: 768px) {
  .progressNoticeWrapper {
    display: block;
  }
}
@media (max-width: 600px) {
  .progressNoticeWrapper {
    left: 30px;
  }
}
@media (max-width: 530px) {
  .progressNoticeWrapper {
    top: -148px;
    left: 10px;
  }
}
@media (max-width: 360px) {
  .progressNoticeWrapper {
    left: 0px;
  }
}
.progressNoticeWrapper .progressNoticeWrapperContent {
  padding: 20px;
  transition: all 500ms ease 0s;
  font-size: 14px;
  background: white;
  opacity: 0;
  height: 108px;
  pointer-events: none;
}
.progressNoticeWrapper.open .progressNoticeWrapperContent {
  opacity: 1;
  box-shadow: 0px 0px 10px #00000044;
  pointer-events: auto;
}
.progressNoticeWrapper .progressNotice {
  position: absolute;
  left: 50%;
  bottom: -95px;
  top: auto;
  color: white;
  text-decoration: none;
}
.progressNoticeWrapper .progressNotice:before {
  background-image: url("../images/icon_test_white1.svg");
}
@media (max-width: 768px) {
  .progressNoticeWrapper .progressNotice:before {
    display: none;
  }
}
.progressNoticeWrapper .progressNotice:hover {
  color: white;
}
@media (max-width: 768px) {
  .progressNoticeWrapper:not(.fixed) {
    transform: translateX(0%);
  }
}
@media (max-width: 530px) {
  .progressNoticeWrapper:not(.fixed) {
    left: 20px;
  }
}
@media (max-width: 1121px) {
  .progressNoticeWrapper:not(.fixed) .progressNotice {
    bottom: -75px;
  }
}
@media (max-width: 980px) {
  .progressNoticeWrapper:not(.fixed) .progressNotice {
    bottom: -71px;
  }
}
@media (max-width: 768px) {
  .progressNoticeWrapper:not(.fixed) .progressNotice {
    left: 25%;
    bottom: -71px;
    display: block;
    padding: 0.5em 1em 0.5em 1em !important;
  }
}
@media (max-width: 530px) {
  .progressNoticeWrapper:not(.fixed) .progressNotice {
    transform: translateX(0%);
    bottom: -39px;
    left: 0px;
  }
}
.progressNoticeWrapper.fixed {
  position: fixed;
  z-index: 90000;
  top: -110px;
  border-radius: 0 0 10px 10px;
}
@media (max-width: 1121px) {
  .progressNoticeWrapper.fixed {
    left: 24%;
  }
}
@media (max-width: 980px) {
  .progressNoticeWrapper.fixed {
    left: 25%;
  }
}
@media (max-width: 600px) {
  .progressNoticeWrapper.fixed {
    top: -130px;
    left: 20px;
    transform: translateX(0%);
  }
}
@media (max-width: 530px) {
  .progressNoticeWrapper.fixed {
    left: 10px;
  }
}
.progressNoticeWrapper.fixed.open {
  top: 0px;
}
.progressNoticeWrapper.fixed .progressNoticeWrapperContent {
  opacity: 1;
}
@media (max-width: 600px) {
  .progressNoticeWrapper.fixed .progressNoticeWrapperContent {
    padding: 40px 20px 20px;
    height: 128px;
  }
}
.progressNoticeWrapper.fixed .progressNotice {
  border-radius: 0 0 10px 10px;
  background-color: white;
  color: #2f368e;
  bottom: -94px;
}
@media (max-width: 1121px) {
  .progressNoticeWrapper.fixed .progressNotice {
    bottom: -76px;
  }
}
@media (max-width: 980px) {
  .progressNoticeWrapper.fixed .progressNotice {
    bottom: -68px;
  }
}
@media (max-width: 768px) {
  .progressNoticeWrapper.fixed .progressNotice {
    bottom: -73px;
    display: block;
    padding: 0.6em 1em 0.6em 1em !important;
  }
}
@media (max-width: 600px) {
  .progressNoticeWrapper.fixed .progressNotice {
    bottom: -37px;
    left: 30px;
    transform: translateX(0);
  }
}
@media (max-width: 530px) {
  .progressNoticeWrapper.fixed .progressNotice {
    transform: translateX(0%);
    bottom: -34px;
    left: 0px;
  }
}
.progressNoticeWrapper.fixed .progressNotice:before {
  background-image: url("../images/icon_test_red.svg");
}
.progressNoticeWrapper.fixed .progressNotice:hover {
  color: #2f368e;
}

.points {
  color: #848b93;
}
.points .a-icon svg {
  width: 25px;
}

a:focus .points {
  color: #424d5a;
}

.uline {
  text-decoration: underline;
}

.mr-20 {
  margin-right: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.points-list .row {
  padding-top: 5px;
  padding-bottom: 5px;
}
@media all and (max-width: 600px) {
  .points-list .row .col-xs-3 {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  .points-list .row .col-xs-2 {
    width: 100%;
  }
}
.points-list .row:nth-child(even) {
  background: #F2F2F2;
}
.points-list .row:nth-child(3) .points_after {
  font-weight: bold;
}
.points-list .header {
  background: #9B9B9C !important;
  color: white;
}

.points-details svg {
  width: 15px;
}

.alert-wrapper .alert {
  width: 100%;
  margin-left: 1em;
}

span.a-icon.mini {
  display: inline !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
span.a-icon.mini svg {
  position: relative;
  top: -3px;
  width: 15px !important;
  color: #1a0b78;
}

.popup-overlay {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  rigth: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}
.popup-overlay .popup {
  padding: 20px;
  display: inline-block;
  width: 400px;
  min-height: 200px;
  background-color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.underline {
  text-decoration: underline;
}
.underline:hover {
  text-decoration: underline;
}

.cookie-h1 {
  margin-bottom: 50px;
}

.table-pretty {
  margin: 20px 0;
}
.table-pretty th, .table-pretty td {
  padding: 10px;
}
.table-pretty th {
  background: #848B93;
  color: white;
  text-align: center;
}
.table-pretty td {
  border-bottom: 1px solid;
}

.popup-bar {
  position: fixed;
  bottom: 0px;
  background: #2f368e;
  color: #ffffff;
  width: 100%;
  line-height: 1.35em;
  padding: 40px 0;
  z-index: 9999;
  left: 0px;
}
.popup-bar a {
  color: white;
}
.popup-bar .btn {
  background: white;
  color: #2f368e;
  float: right;
  margin-left: 5px;
  margin-bottom: 5px;
}

.rules label a, .contact-main-container label a {
  position: relative;
  z-index: 2;
  text-decoration: underline;
}

.contact-main-container .file-tip {
  font-size: 0.8125rem;
  color: #A0A6AD;
  margin: 2rem 0;
}
.contact-main-container .file-upload {
  display: block;
}
.contact-main-container .file-upload .input-group-btn {
  width: 100%;
  display: block;
}
.contact-main-container .file-upload .input-group-btn .btn-file {
  border-radius: 4px !important;
  width: 100%;
  text-align: left;
}
.contact-main-container .file-upload .placeholder-file {
  margin: 0;
  color: #A0A6AD;
  font-size: 0.875rem;
  display: none;
}
.contact-main-container .file-upload .placeholder-file ul {
  margin: 0;
}
.contact-main-container .red-checkboxes {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.footer-links-horizontal {
  display: none;
}
@media all and (max-width: 1330px) {
  .footer-links-horizontal {
    display: block;
  }
}
@media all and (max-width: 767px) {
  .footer-links-horizontal {
    display: none;
  }
}
.footer-links-horizontal .caption {
  text-align: center;
}

.login-box {
  max-width: 1520px;
  margin: auto;
  display: flex;
  margin-top: 30px;
  position: relative;
  margin-left: -40px;
  margin-right: -40px;
}
@media all and (max-width: 1000px) {
  .login-box {
    flex-wrap: wrap;
  }
}
@media all and (max-width: 767px) {
  .login-box .col-xs-7, .login-box .col-xs-5 {
    width: 100.1%;
  }
}
@media all and (max-width: 767px) {
  .login-box {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.login-box .login-left-box, .login-box .login-right-box,
.login-box .login-left-box-expand, .login-box .login-right-box-expand {
  margin-bottom: 1rem;
}
.login-box .login-left-box h2, .login-box .login-right-box h2,
.login-box .login-left-box-expand h2, .login-box .login-right-box-expand h2 {
  transition: all 500ms ease 0s;
  font-family: "SohoGothicPro";
  font-weight: 100;
  margin-top: 0;
  font-size: 26px;
  margin-bottom: 2.5rem;
  line-height: 1.35;
}
.login-box .login-left-box .btn-2:focus, .login-box .login-right-box .btn-2:focus,
.login-box .login-left-box-expand .btn-2:focus, .login-box .login-right-box-expand .btn-2:focus {
  outline: none;
}
.login-box .login-left-box .alert, .login-box .login-right-box .alert,
.login-box .login-left-box-expand .alert, .login-box .login-right-box-expand .alert {
  padding-right: 35px;
}
.login-box .login-left-box, .login-box .login-right-box {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: 540px;
  padding-top: 5.5rem;
  border-radius: 5px;
}
.login-box .login-left-box h2, .login-box .login-right-box h2 {
  font-size: 32px;
}
.login-box .login-left-box {
  background-color: #2f368e;
  background-image: url("../images/login-left-clouds.png");
  color: white;
}
.login-box .login-right-box {
  background-color: white;
  background-image: url("../images/login-right-clouds.png");
  transition: all 500ms ease 0s;
  color: #424d5a;
}
.login-box .login-right-box.red-theme {
  background-color: #2f368e;
}
.login-box .login-right-box.red-theme h2 {
  color: white;
}
.login-box .login-right-box h2 {
  margin-bottom: 3.25rem;
}
.login-box .login-left-box-expand, .login-box .login-right-box-expand {
  padding: 2.5rem;
  min-height: 540px;
}
.login-box .login-left-box-expand .form-group input, .login-box .login-right-box-expand .form-group input {
  width: 100%;
}
.login-box .login-right-box-expand h2 {
  margin-bottom: 2rem;
}
.login-box .login-right-box-expand form .red-checkboxes.checkbox .checkbox-container {
  font-size: 16px;
}
.login-box .first-box {
  background-color: #2f368e;
  width: 50%;
  padding: 50px 60px;
  border-radius: 20px 0px 0px 20px;
}
@media all and (max-width: 1250px) {
  .login-box .first-box {
    padding: 40px 40px;
  }
}
@media all and (max-width: 1000px) {
  .login-box .first-box {
    width: 100%;
    order: 1;
    border-radius: 20px 20px 0px 0px;
  }
}
.login-box .first-box .l-ng {
  font-size: 38px;
  color: white;
  font-family: SourceSansPro;
  font-weight: bold;
  height: 106px;
}
@media all and (max-width: 1250px) {
  .login-box .first-box .l-ng {
    font-size: 36px;
    height: auto;
  }
}
.login-box .first-box .l-box {
  max-width: 60%;
  padding-top: 85px;
}
@media all and (max-width: 1000px) {
  .login-box .first-box .l-box {
    max-width: 90%;
    padding-top: 25px;
  }
}
.login-box .first-box .l-box .l-box-title {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  color: white;
}
@media all and (max-width: 1250px) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 26px;
    line-height: 1.13;
  }
}
.login-box .first-box .l-box .l-box-content {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  padding: 30px 0px;
  color: white;
}
.login-box .first-box .l-box .l-select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.login-box .first-box .l-box .l-select select {
  font-family: "Arial";
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 2px solid #ffffff;
  border-radius: 5px;
  background: #2f368e;
  color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.login-box .first-box .l-box .l-select select:hover,
.login-box .first-box .l-box .l-select select:focus {
  background: #2f368e;
  color: #ffffff;
}
.login-box .first-box .l-box .l-select select:active, .login-box .first-box .l-box .l-select select:hover {
  outline-color: #1a0b78;
}
.login-box .first-box .l-box .l-select .select_arrow {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 13px;
  height: 13px;
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.login-box .first-box .l-reg {
  margin-top: 90px;
  color: white;
}
@media all and (max-width: 1000px) {
  .login-box .first-box .l-reg {
    margin-top: 20px;
  }
}
.login-box .first-box .l-reg a {
  font-weight: bold;
  color: white;
}
.login-box .second-box {
  background-color: white;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
  width: 50%;
  padding: 55px 64px;
  border-radius: 0px 20px 20px 0px;
}
@media all and (max-width: 1000px) {
  .login-box .second-box {
    width: 100%;
    order: 3;
    border-radius: 0px 0px 20px 20px;
    padding: 40px 40px;
  }
}
.login-box .second-box .s-logo-box {
  text-align: right;
  height: 106px;
}
@media all and (max-width: 1000px) {
  .login-box .second-box .s-logo-box {
    height: auto;
    text-align: left;
  }
}
.login-box .second-box .s-logo-box .s-logo {
  width: 270px;
}
@media all and (max-width: 1000px) {
  .login-box .second-box .s-logo-box .s-logo {
    max-width: 270px;
    width: 90%;
  }
}
.login-box .second-box .second-login {
  padding-top: 85px;
  width: 60%;
  float: right;
}
@media all and (max-width: 1000px) {
  .login-box .second-box .second-login {
    width: 100%;
    padding-top: 25px;
  }
}
.login-box .second-box .second-login .s-ng {
  font-size: 28px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  color: #363636;
  padding-bottom: 30px;
}
.login-box .second-box .second-login .form-group label {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
  color: #363636;
  padding-bottom: 10px;
}
.login-box .second-box .second-login .form-group .form-control-3 {
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 2px solid #363636;
}
.login-box .second-box .second-login .form-group .help-block {
  padding-top: 10px;
}
.login-box .second-box .second-login .form-group .help-block a {
  color: #363636;
  font-size: 16px;
}
.login-box .second-box .second-login .btn-l {
  line-height: 2.35rem;
}
.login-box .second-box .second-login .login-register-info {
  color: #363636;
  font-size: 16px;
  padding-top: 30px;
}
.login-box .second-box .second-login .login-register-info a {
  color: #363636;
  font-weight: bold;
}
.login-box .black-box {
  max-width: 504px;
  position: absolute;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: #363636;
  border-radius: 20px;
  top: 180px;
  left: 0px;
  right: 0px;
  padding: 70px 60px;
  margin: auto;
}
@media all and (max-width: 1450px) {
  .login-box .black-box {
    width: 45%;
  }
}
@media all and (max-width: 1350px) {
  .login-box .black-box {
    width: 40%;
    padding: 60px 70px;
  }
}
@media all and (max-width: 1250px) {
  .login-box .black-box {
    width: 30%;
    padding: 40px 50px;
  }
}
@media all and (max-width: 1000px) {
  .login-box .black-box {
    position: relative;
    width: 100%;
    max-width: unset;
    order: 2;
    top: unset;
    border-radius: 0px;
  }
}
.login-box .black-box.show_form {
  padding: 18px 34px;
  top: -20px;
}
@media all and (max-width: 1000px) {
  .login-box .black-box.show_form {
    top: unset;
  }
}
.login-box .black-box .b-register {
  max-width: 380px;
  width: 90%;
  margin: auto;
  display: none;
}
.login-box .black-box .b-register .form-group label {
  display: block;
  width: 100%;
  font-size: 17px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: left;
  color: white;
  padding-bottom: 10px;
}
.login-box .black-box .b-register .form-group .form-control-4 {
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #f7f9fa;
  background-color: #363636;
}
.login-box .black-box .b-register .form-group .error-message {
  font-size: 14px;
  color: #1a0b78;
}
.login-box .black-box .b-register .btn-reg {
  border-radius: 5px;
  border: 2px solid white;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  padding: 10px 10px;
  width: 100%;
  background-color: #363636;
}
.login-box .black-box .b-register .btn-reg a {
  font-weight: bold;
  color: white;
}
.login-box .black-box .b-register .b-reg {
  margin-top: 90px;
  color: white;
  font-size: 15px;
  padding: 0px 20px 20px 20px;
}
.login-box .black-box .b-register .red-checkboxes {
  padding: 0;
}
.login-box .black-box .b-register .red-checkboxes .checkbox-container {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.36;
  color: white;
  opacity: 1;
}
.login-box .black-box .b-register .red-checkboxes .checkbox-container .checkmark {
  background-color: #363636;
  border: 1px solid #f7f9fa;
  border-radius: 5px;
}
.login-box .black-box .b-ng {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: white;
  padding-bottom: 20px;
}
.login-box .black-box .b-content {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  color: white;
  padding-top: 40px;
  padding-bottom: 50px;
  text-align: center;
}
.login-box .black-box .b-btn {
  border-radius: 5px;
  border: 2px solid white;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  padding: 10px 10px;
  cursor: pointer;
}

@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box {
    max-width: 1520px;
    margin: auto;
    display: flex;
    margin-top: 20px;
    position: relative;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box {
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box {
    background-color: #2f368e;
    width: 50%;
    padding: 30px 40px;
    border-radius: 20px 0px 0px 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box {
    width: 100%;
    order: 1;
    border-radius: 20px 20px 0px 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-ng {
    font-size: 36px;
    color: white;
    font-family: SourceSansPro;
    font-weight: bold;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .first-box .l-ng {
    font-size: 36px;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box {
    max-width: 60%;
    padding-top: 85px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box .l-box {
    max-width: 90%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 26px;
    line-height: 1.13;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-box-content {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    padding: 30px 0px;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }
  .login-box .first-box .l-box .l-select select {
    font-family: "Arial";
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 2px solid #ffffff;
    border-radius: 5px;
    background: #2f368e;
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  .login-box .first-box .l-box .l-select select:hover,
.login-box .first-box .l-box .l-select select:focus {
    background: #2f368e;
    color: #ffffff;
  }
  .login-box .first-box .l-box .l-select select:active, .login-box .first-box .l-box .l-select select:hover {
    outline-color: #1a0b78;
  }
  .login-box .first-box .l-box .l-select .select_arrow {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 13px;
    height: 13px;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-reg {
    margin-top: 90px;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box .l-reg {
    margin-top: 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-reg a {
    font-weight: bold;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box {
    background-color: white;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    width: 50%;
    padding: 55px 64px;
    border-radius: 0px 20px 20px 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box {
    width: 100%;
    order: 3;
    border-radius: 0px 0px 20px 20px;
    padding: 40px 40px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .s-logo-box {
    text-align: right;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box {
    height: auto;
    text-align: left;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .s-logo-box .s-logo {
    width: 270px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box .s-logo {
    max-width: 270px;
    width: 90%;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login {
    padding-top: 85px;
    width: 60%;
    float: right;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .second-login {
    width: 100%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .s-ng {
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .form-group label {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 10px;
  }
  .login-box .second-box .second-login .form-group .form-control-3 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #363636;
  }
  .login-box .second-box .second-login .form-group .help-block {
    padding-top: 10px;
  }
  .login-box .second-box .second-login .form-group .help-block a {
    color: #363636;
    font-size: 16px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .btn-l {
    line-height: 2.35rem;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .login-register-info {
    color: #363636;
    font-size: 16px;
    padding-top: 30px;
  }
  .login-box .second-box .second-login .login-register-info a {
    color: #363636;
    font-weight: bold;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box {
    max-width: 504px;
    position: absolute;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    background-color: #363636;
    border-radius: 20px;
    top: 180px;
    left: 0px;
    right: 0px;
    padding: 70px 60px;
    margin: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1350px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1350px) {
  .login-box .black-box {
    width: 35%;
    padding: 40px 60px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .black-box {
    width: 30%;
    padding: 40px 50px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .black-box {
    position: relative;
    width: 100%;
    max-width: unset;
    order: 2;
    top: unset;
    border-radius: 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box.show_form {
    padding: 18px 34px;
    top: -20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .black-box.show_form {
    top: unset;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-register {
    max-width: 380px;
    width: 90%;
    margin: auto;
    display: none;
  }
  .login-box .black-box .b-register .form-group label {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: normal;
    text-align: left;
    color: white;
    padding-bottom: 0px;
  }
  .login-box .black-box .b-register .form-group .form-control-4 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #f7f9fa;
    background-color: #363636;
  }
  .login-box .black-box .b-register .form-group .error-message {
    font-size: 14px;
    color: #1a0b78;
  }
  .login-box .black-box .b-register .btn-reg {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    padding: 9px 10px;
    width: 100%;
    background-color: #363636;
  }
  .login-box .black-box .b-register .btn-reg a {
    font-weight: bold;
    color: white;
  }
  .login-box .black-box .b-register .b-reg {
    margin-top: 90px;
    color: white;
    font-size: 14px;
    padding: 0px 20px 10px 20px;
  }
  .login-box .black-box .b-register .red-checkboxes {
    padding: 0;
    margin-top: 0px;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    color: white;
    opacity: 1;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container .checkmark {
    background-color: #363636;
    border: 1px solid #f7f9fa;
    border-radius: 5px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-ng {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: white;
    padding-bottom: 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-content {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    color: white;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.2), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-btn {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    padding: 10px 10px;
    cursor: pointer;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box {
    max-width: 1520px;
    margin: auto;
    display: flex;
    margin-top: 20px;
    position: relative;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box {
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box {
    background-color: #2f368e;
    width: 50%;
    padding: 30px 40px;
    border-radius: 20px 0px 0px 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box {
    width: 100%;
    order: 1;
    border-radius: 20px 20px 0px 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-ng {
    font-size: 36px;
    color: white;
    font-family: SourceSansPro;
    font-weight: bold;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .first-box .l-ng {
    font-size: 36px;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box {
    max-width: 60%;
    padding-top: 85px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box .l-box {
    max-width: 90%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 26px;
    line-height: 1.13;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-box-content {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    padding: 30px 0px;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-box .l-select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }
  .login-box .first-box .l-box .l-select select {
    font-family: "Arial";
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 2px solid #ffffff;
    border-radius: 5px;
    background: #2f368e;
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  .login-box .first-box .l-box .l-select select:hover,
.login-box .first-box .l-box .l-select select:focus {
    background: #2f368e;
    color: #ffffff;
  }
  .login-box .first-box .l-box .l-select select:active, .login-box .first-box .l-box .l-select select:hover {
    outline-color: #1a0b78;
  }
  .login-box .first-box .l-box .l-select .select_arrow {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 13px;
    height: 13px;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-reg {
    margin-top: 90px;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .first-box .l-reg {
    margin-top: 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .first-box .l-reg a {
    font-weight: bold;
    color: white;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box {
    background-color: white;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    width: 50%;
    padding: 55px 64px;
    border-radius: 0px 20px 20px 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box {
    width: 100%;
    order: 3;
    border-radius: 0px 0px 20px 20px;
    padding: 40px 40px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .s-logo-box {
    text-align: right;
    height: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box {
    height: auto;
    text-align: left;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .s-logo-box .s-logo {
    width: 270px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box .s-logo {
    max-width: 270px;
    width: 90%;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login {
    padding-top: 85px;
    width: 60%;
    float: right;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .second-box .second-login {
    width: 100%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .s-ng {
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .form-group label {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 10px;
  }
  .login-box .second-box .second-login .form-group .form-control-3 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #363636;
  }
  .login-box .second-box .second-login .form-group .help-block {
    padding-top: 10px;
  }
  .login-box .second-box .second-login .form-group .help-block a {
    color: #363636;
    font-size: 16px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .btn-l {
    line-height: 2.35rem;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .second-box .second-login .login-register-info {
    color: #363636;
    font-size: 16px;
    padding-top: 30px;
  }
  .login-box .second-box .second-login .login-register-info a {
    color: #363636;
    font-weight: bold;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box {
    max-width: 504px;
    position: absolute;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    background-color: #363636;
    border-radius: 20px;
    top: 180px;
    left: 0px;
    right: 0px;
    padding: 70px 60px;
    margin: auto;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1350px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1350px) {
  .login-box .black-box {
    width: 35%;
    padding: 40px 60px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1250px) {
  .login-box .black-box {
    width: 30%;
    padding: 40px 50px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .black-box {
    position: relative;
    width: 100%;
    max-width: unset;
    order: 2;
    top: unset;
    border-radius: 0px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box.show_form {
    padding: 18px 34px;
    top: -20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) and (max-width: 1000px) {
  .login-box .black-box.show_form {
    top: unset;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-register {
    max-width: 380px;
    width: 90%;
    margin: auto;
    display: none;
  }
  .login-box .black-box .b-register .form-group label {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: normal;
    text-align: left;
    color: white;
    padding-bottom: 0px;
  }
  .login-box .black-box .b-register .form-group .form-control-4 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #f7f9fa;
    background-color: #363636;
  }
  .login-box .black-box .b-register .form-group .error-message {
    font-size: 14px;
    color: #1a0b78;
  }
  .login-box .black-box .b-register .btn-reg {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    padding: 9px 10px;
    width: 100%;
    background-color: #363636;
  }
  .login-box .black-box .b-register .btn-reg a {
    font-weight: bold;
    color: white;
  }
  .login-box .black-box .b-register .b-reg {
    margin-top: 90px;
    color: white;
    font-size: 14px;
    padding: 0px 20px 10px 20px;
  }
  .login-box .black-box .b-register .red-checkboxes {
    padding: 0;
    margin-top: 0px;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    color: white;
    opacity: 1;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container .checkmark {
    background-color: #363636;
    border: 1px solid #f7f9fa;
    border-radius: 5px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-ng {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: white;
    padding-bottom: 20px;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-content {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    color: white;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
  }
}
@media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-o-min-device-pixel-ratio: 5/4) {
  .login-box .black-box .b-btn {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    padding: 10px 10px;
    cursor: pointer;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box {
    max-width: 1520px;
    margin: auto;
    display: flex;
    margin-top: 10px;
    position: relative;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box {
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box {
    background-color: #2f368e;
    width: 50%;
    padding: 20px 30px;
    border-radius: 20px 0px 0px 20px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .first-box {
    width: 100%;
    order: 1;
    border-radius: 20px 20px 0px 0px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-ng {
    font-size: 26px;
    color: white;
    font-family: SourceSansPro;
    font-weight: bold;
    height: auto;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1250px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1250px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1250px) {
  .login-box .first-box .l-ng {
    font-size: 26px;
    height: auto;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-box {
    max-width: 60%;
    padding-top: 60px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .first-box .l-box {
    max-width: 90%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 19px;
    font-weight: bold;
    line-height: 1.2;
    color: white;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1250px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1250px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1250px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1250px) {
  .login-box .first-box .l-box .l-box-title {
    font-size: 22px;
    line-height: 1.13;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-box .l-box-content {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    padding: 30px 0px;
    color: white;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-box .l-select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }
  .login-box .first-box .l-box .l-select select {
    font-family: "Arial";
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 6px 10px;
    outline: 0;
    border: 2px solid #ffffff;
    border-radius: 5px;
    background: #2f368e;
    color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
  }
  .login-box .first-box .l-box .l-select select:hover,
.login-box .first-box .l-box .l-select select:focus {
    background: #2f368e;
    color: #ffffff;
  }
  .login-box .first-box .l-box .l-select select:active, .login-box .first-box .l-box .l-select select:hover {
    outline-color: #1a0b78;
  }
  .login-box .first-box .l-box .l-select .select_arrow {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 11px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-reg {
    margin-top: 50px;
    color: white;
    font-size: 14px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .first-box .l-reg {
    margin-top: 20px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .first-box .l-reg a {
    font-weight: bold;
    color: white;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box {
    background-color: white;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    width: 50%;
    padding: 25px 40px;
    border-radius: 0px 20px 20px 0px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .second-box {
    width: 100%;
    order: 3;
    border-radius: 0px 0px 20px 20px;
    padding: 40px 40px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .s-logo-box {
    text-align: right;
    height: auto;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box {
    height: auto;
    text-align: left;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .s-logo-box .s-logo {
    width: 220px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .second-box .s-logo-box .s-logo {
    max-width: 270px;
    width: 90%;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .second-login {
    padding-top: 60px;
    width: 60%;
    float: right;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .second-box .second-login {
    width: 100%;
    padding-top: 25px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .second-login .s-ng {
    font-size: 19px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 20px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .second-login .form-group label {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: left;
    color: #363636;
    padding-bottom: 8px;
  }
  .login-box .second-box .second-login .form-group .form-control-3 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #363636;
  }
  .login-box .second-box .second-login .form-group .help-block {
    padding-top: 10px;
  }
  .login-box .second-box .second-login .form-group .help-block a {
    color: #363636;
    font-size: 16px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .second-login .btn-l {
    line-height: 2.15rem;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .second-box .second-login .login-register-info {
    color: #363636;
    font-size: 14px;
    padding-top: 14px;
  }
  .login-box .second-box .second-login .login-register-info a {
    color: #363636;
    font-weight: bold;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box {
    max-width: 504px;
    position: absolute;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.16);
    background-color: #363636;
    border-radius: 20px;
    top: 80px;
    left: 0px;
    right: 0px;
    margin: auto;
    padding: 40px 30px;
    width: 34%;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .black-box {
    position: relative;
    width: 100%;
    max-width: unset;
    order: 2;
    top: unset;
    border-radius: 0px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box.show_form {
    padding: 18px 24px;
    top: -10px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx) and (max-width: 1000px), (min-width: 992px) and (min-resolution: 144dpi) and (max-width: 1000px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1000px), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) and (max-width: 1000px) {
  .login-box .black-box.show_form {
    top: unset;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box .b-register {
    max-width: 380px;
    width: 90%;
    margin: auto;
    display: none;
  }
  .login-box .black-box .b-register .form-group {
    margin-bottom: 5px;
  }
  .login-box .black-box .b-register .form-group label {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: normal;
    text-align: left;
    color: white;
    padding-bottom: 0px;
  }
  .login-box .black-box .b-register .form-group .form-control-4 {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #f7f9fa;
    background-color: #363636;
    font-size: 11px;
  }
  .login-box .black-box .b-register .form-group .error-message {
    font-size: 10px;
    color: #1a0b78;
  }
  .login-box .black-box .b-register .btn-reg {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    padding: 6px 10px;
    width: 100%;
    background-color: #363636;
  }
  .login-box .black-box .b-register .btn-reg a {
    font-weight: bold;
    color: white;
  }
  .login-box .black-box .b-register .b-reg {
    margin-top: 0px;
    color: white;
    font-size: 11px;
    padding: 0px 20px 10px 20px;
  }
  .login-box .black-box .b-register .red-checkboxes {
    padding: 0;
    margin-top: 6px;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container {
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    color: white;
    opacity: 1;
  }
  .login-box .black-box .b-register .red-checkboxes .checkbox-container .checkmark {
    background-color: #363636;
    border: 1px solid #f7f9fa;
    border-radius: 5px;
    width: 1rem;
    height: 1rem;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box .b-ng {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: white;
    padding-bottom: 10px;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box .b-content {
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    color: white;
    padding-top: 40px;
    padding-bottom: 50px;
    text-align: center;
  }
}
@media (min-width: 992px) and (min-resolution: 1.5dppx), (min-width: 992px) and (min-resolution: 144dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 992px) and (-o-min-device-pixel-ratio: 3/2) {
  .login-box .black-box .b-btn {
    border-radius: 5px;
    border: 2px solid white;
    color: white;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    padding: 7px 4px;
    cursor: pointer;
  }
}
.popup-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
@media all and (max-width: 600px) {
  .popup-bg {
    display: block;
    padding-top: 20px;
  }
}
.popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
  width: 600px;
  height: 600px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
  background-image: url("../images/bg_popup.jpg");
  position: relative;
  color: white;
  padding: 10px 42px;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
    padding-bottom: 100px;
  }
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
    width: 90% !important;
    height: auto !important;
    background-size: cover;
  }
}
.popup-bg .popup-regulations .popup-r-close,
.popup-bg .popup-privacy-policy .popup-r-close,
.popup-bg .popup-profile .popup-r-close,
.popup-bg .popup-regulations-optional .popup-r-close,
.popup-bg .popup-cancel-regulations-optional .popup-r-close,
.popup-bg .popup-general-regulations-optional .popup-r-close,
.popup-bg .popup-webinar-regulations-optional .popup-r-close,
.popup-bg .popup-gamification-regulation .popup-r-close,
.popup-bg .popup-universal .popup-r-close {
  position: absolute;
  right: 42px;
  top: 42px;
  cursor: pointer;
}
.popup-bg .popup-regulations .popup-r-title,
.popup-bg .popup-privacy-policy .popup-r-title,
.popup-bg .popup-profile .popup-r-title,
.popup-bg .popup-regulations-optional .popup-r-title,
.popup-bg .popup-cancel-regulations-optional .popup-r-title,
.popup-bg .popup-general-regulations-optional .popup-r-title,
.popup-bg .popup-webinar-regulations-optional .popup-r-title,
.popup-bg .popup-gamification-regulation .popup-r-title,
.popup-bg .popup-universal .popup-r-title {
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  color: white;
  padding-bottom: 20px;
  font-family: SourceSansPro;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations .popup-r-title,
.popup-bg .popup-privacy-policy .popup-r-title,
.popup-bg .popup-profile .popup-r-title,
.popup-bg .popup-regulations-optional .popup-r-title,
.popup-bg .popup-cancel-regulations-optional .popup-r-title,
.popup-bg .popup-general-regulations-optional .popup-r-title,
.popup-bg .popup-webinar-regulations-optional .popup-r-title,
.popup-bg .popup-gamification-regulation .popup-r-title,
.popup-bg .popup-universal .popup-r-title {
    padding-top: 50px;
  }
}
.popup-bg .popup-regulations .popup-r-content,
.popup-bg .popup-privacy-policy .popup-r-content,
.popup-bg .popup-profile .popup-r-content,
.popup-bg .popup-regulations-optional .popup-r-content,
.popup-bg .popup-cancel-regulations-optional .popup-r-content,
.popup-bg .popup-general-regulations-optional .popup-r-content,
.popup-bg .popup-webinar-regulations-optional .popup-r-content,
.popup-bg .popup-gamification-regulation .popup-r-content,
.popup-bg .popup-universal .popup-r-content {
  padding-bottom: 15px;
}
.popup-bg .popup-regulations .popup-r-content p,
.popup-bg .popup-privacy-policy .popup-r-content p,
.popup-bg .popup-profile .popup-r-content p,
.popup-bg .popup-regulations-optional .popup-r-content p,
.popup-bg .popup-cancel-regulations-optional .popup-r-content p,
.popup-bg .popup-general-regulations-optional .popup-r-content p,
.popup-bg .popup-webinar-regulations-optional .popup-r-content p,
.popup-bg .popup-gamification-regulation .popup-r-content p,
.popup-bg .popup-universal .popup-r-content p {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.15;
  color: white;
}
.popup-bg .popup-regulations .popup-r-content p span,
.popup-bg .popup-privacy-policy .popup-r-content p span,
.popup-bg .popup-profile .popup-r-content p span,
.popup-bg .popup-regulations-optional .popup-r-content p span,
.popup-bg .popup-cancel-regulations-optional .popup-r-content p span,
.popup-bg .popup-general-regulations-optional .popup-r-content p span,
.popup-bg .popup-webinar-regulations-optional .popup-r-content p span,
.popup-bg .popup-gamification-regulation .popup-r-content p span,
.popup-bg .popup-universal .popup-r-content p span {
  font-weight: bold;
}
.popup-bg .popup-regulations .popup-r-content p a,
.popup-bg .popup-privacy-policy .popup-r-content p a,
.popup-bg .popup-profile .popup-r-content p a,
.popup-bg .popup-regulations-optional .popup-r-content p a,
.popup-bg .popup-cancel-regulations-optional .popup-r-content p a,
.popup-bg .popup-general-regulations-optional .popup-r-content p a,
.popup-bg .popup-webinar-regulations-optional .popup-r-content p a,
.popup-bg .popup-gamification-regulation .popup-r-content p a,
.popup-bg .popup-universal .popup-r-content p a {
  font-weight: bold;
  color: white;
}
.popup-bg .popup-regulations .red-checkboxes,
.popup-bg .popup-privacy-policy .red-checkboxes,
.popup-bg .popup-profile .red-checkboxes,
.popup-bg .popup-regulations-optional .red-checkboxes,
.popup-bg .popup-cancel-regulations-optional .red-checkboxes,
.popup-bg .popup-general-regulations-optional .red-checkboxes,
.popup-bg .popup-webinar-regulations-optional .red-checkboxes,
.popup-bg .popup-gamification-regulation .red-checkboxes,
.popup-bg .popup-universal .red-checkboxes {
  padding: 0px;
}
.popup-bg .popup-regulations .red-checkboxes .checkbox-container,
.popup-bg .popup-privacy-policy .red-checkboxes .checkbox-container,
.popup-bg .popup-profile .red-checkboxes .checkbox-container,
.popup-bg .popup-regulations-optional .red-checkboxes .checkbox-container,
.popup-bg .popup-cancel-regulations-optional .red-checkboxes .checkbox-container,
.popup-bg .popup-general-regulations-optional .red-checkboxes .checkbox-container,
.popup-bg .popup-webinar-regulations-optional .red-checkboxes .checkbox-container,
.popup-bg .popup-gamification-regulation .red-checkboxes .checkbox-container,
.popup-bg .popup-universal .red-checkboxes .checkbox-container {
  color: white;
  font-size: 16px;
  line-height: 1.13;
  opacity: 1;
}
.popup-bg .popup-regulations .red-checkboxes .checkbox-container a,
.popup-bg .popup-privacy-policy .red-checkboxes .checkbox-container a,
.popup-bg .popup-profile .red-checkboxes .checkbox-container a,
.popup-bg .popup-regulations-optional .red-checkboxes .checkbox-container a,
.popup-bg .popup-cancel-regulations-optional .red-checkboxes .checkbox-container a,
.popup-bg .popup-general-regulations-optional .red-checkboxes .checkbox-container a,
.popup-bg .popup-webinar-regulations-optional .red-checkboxes .checkbox-container a,
.popup-bg .popup-gamification-regulation .red-checkboxes .checkbox-container a,
.popup-bg .popup-universal .red-checkboxes .checkbox-container a {
  color: white;
  text-decoration: underline;
}
.popup-bg .popup-regulations .radio, .popup-bg .popup-regulations .checkbox,
.popup-bg .popup-privacy-policy .radio,
.popup-bg .popup-privacy-policy .checkbox,
.popup-bg .popup-profile .radio,
.popup-bg .popup-profile .checkbox,
.popup-bg .popup-regulations-optional .radio,
.popup-bg .popup-regulations-optional .checkbox,
.popup-bg .popup-cancel-regulations-optional .radio,
.popup-bg .popup-cancel-regulations-optional .checkbox,
.popup-bg .popup-general-regulations-optional .radio,
.popup-bg .popup-general-regulations-optional .checkbox,
.popup-bg .popup-webinar-regulations-optional .radio,
.popup-bg .popup-webinar-regulations-optional .checkbox,
.popup-bg .popup-gamification-regulation .radio,
.popup-bg .popup-gamification-regulation .checkbox,
.popup-bg .popup-universal .radio,
.popup-bg .popup-universal .checkbox {
  position: relative;
  display: block;
  margin-top: 5px;
}
.popup-bg .popup-regulations .popup-r-btn,
.popup-bg .popup-privacy-policy .popup-r-btn,
.popup-bg .popup-profile .popup-r-btn,
.popup-bg .popup-regulations-optional .popup-r-btn,
.popup-bg .popup-cancel-regulations-optional .popup-r-btn,
.popup-bg .popup-general-regulations-optional .popup-r-btn,
.popup-bg .popup-webinar-regulations-optional .popup-r-btn,
.popup-bg .popup-gamification-regulation .popup-r-btn,
.popup-bg .popup-universal .popup-r-btn {
  padding: 10px 31px;
  background-color: white;
  border-radius: 5px;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  color: #2f368e;
  cursor: pointer;
  margin-top: 10px;
  width: 240px;
}
.popup-bg .popup-regulations .agreement_error,
.popup-bg .popup-privacy-policy .agreement_error,
.popup-bg .popup-profile .agreement_error,
.popup-bg .popup-regulations-optional .agreement_error,
.popup-bg .popup-cancel-regulations-optional .agreement_error,
.popup-bg .popup-general-regulations-optional .agreement_error,
.popup-bg .popup-webinar-regulations-optional .agreement_error,
.popup-bg .popup-gamification-regulation .agreement_error,
.popup-bg .popup-universal .agreement_error {
  padding: 5px;
  background-color: white;
  color: #1a0b78;
  border: 1px solid #1a0b78;
  display: none;
}
.popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
  width: 640px;
  height: 564px;
  background-size: cover;
  background-position: bottom;
  padding: 3.5rem 5.5rem;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
    padding: 2.5rem 3.5rem;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-regulations,
.popup-bg .popup-privacy-policy,
.popup-bg .popup-profile,
.popup-bg .popup-regulations-optional,
.popup-bg .popup-cancel-regulations-optional,
.popup-bg .popup-general-regulations-optional,
.popup-bg .popup-webinar-regulations-optional,
.popup-bg .popup-gamification-regulation,
.popup-bg .popup-universal {
    padding: 1.5rem 1.5rem;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-regulations .popup-r-close,
.popup-bg .popup-privacy-policy .popup-r-close,
.popup-bg .popup-profile .popup-r-close,
.popup-bg .popup-regulations-optional .popup-r-close,
.popup-bg .popup-cancel-regulations-optional .popup-r-close,
.popup-bg .popup-general-regulations-optional .popup-r-close,
.popup-bg .popup-webinar-regulations-optional .popup-r-close,
.popup-bg .popup-gamification-regulation .popup-r-close,
.popup-bg .popup-universal .popup-r-close {
    right: 20px;
    top: 20px;
  }
}
.popup-bg .popup-regulations .popup-r-title,
.popup-bg .popup-privacy-policy .popup-r-title,
.popup-bg .popup-profile .popup-r-title,
.popup-bg .popup-regulations-optional .popup-r-title,
.popup-bg .popup-cancel-regulations-optional .popup-r-title,
.popup-bg .popup-general-regulations-optional .popup-r-title,
.popup-bg .popup-webinar-regulations-optional .popup-r-title,
.popup-bg .popup-gamification-regulation .popup-r-title,
.popup-bg .popup-universal .popup-r-title {
  font-family: "SohoGothicPro";
  font-size: 32px;
  padding-bottom: 40px;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations .popup-r-title,
.popup-bg .popup-privacy-policy .popup-r-title,
.popup-bg .popup-profile .popup-r-title,
.popup-bg .popup-regulations-optional .popup-r-title,
.popup-bg .popup-cancel-regulations-optional .popup-r-title,
.popup-bg .popup-general-regulations-optional .popup-r-title,
.popup-bg .popup-webinar-regulations-optional .popup-r-title,
.popup-bg .popup-gamification-regulation .popup-r-title,
.popup-bg .popup-universal .popup-r-title {
    padding-top: 30px;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-regulations .popup-r-title,
.popup-bg .popup-privacy-policy .popup-r-title,
.popup-bg .popup-profile .popup-r-title,
.popup-bg .popup-regulations-optional .popup-r-title,
.popup-bg .popup-cancel-regulations-optional .popup-r-title,
.popup-bg .popup-general-regulations-optional .popup-r-title,
.popup-bg .popup-webinar-regulations-optional .popup-r-title,
.popup-bg .popup-gamification-regulation .popup-r-title,
.popup-bg .popup-universal .popup-r-title {
    font-size: 24px;
    padding-bottom: 20px;
  }
}
.popup-bg .popup-regulations .popup-r-content p,
.popup-bg .popup-privacy-policy .popup-r-content p,
.popup-bg .popup-profile .popup-r-content p,
.popup-bg .popup-regulations-optional .popup-r-content p,
.popup-bg .popup-cancel-regulations-optional .popup-r-content p,
.popup-bg .popup-general-regulations-optional .popup-r-content p,
.popup-bg .popup-webinar-regulations-optional .popup-r-content p,
.popup-bg .popup-gamification-regulation .popup-r-content p,
.popup-bg .popup-universal .popup-r-content p {
  font-size: 20px;
}
@media all and (max-width: 480px) {
  .popup-bg .popup-regulations .popup-r-content p,
.popup-bg .popup-privacy-policy .popup-r-content p,
.popup-bg .popup-profile .popup-r-content p,
.popup-bg .popup-regulations-optional .popup-r-content p,
.popup-bg .popup-cancel-regulations-optional .popup-r-content p,
.popup-bg .popup-general-regulations-optional .popup-r-content p,
.popup-bg .popup-webinar-regulations-optional .popup-r-content p,
.popup-bg .popup-gamification-regulation .popup-r-content p,
.popup-bg .popup-universal .popup-r-content p {
    font-size: 18px;
  }
}
.popup-bg .popup-regulations .popup-r-btn,
.popup-bg .popup-privacy-policy .popup-r-btn,
.popup-bg .popup-profile .popup-r-btn,
.popup-bg .popup-regulations-optional .popup-r-btn,
.popup-bg .popup-cancel-regulations-optional .popup-r-btn,
.popup-bg .popup-general-regulations-optional .popup-r-btn,
.popup-bg .popup-webinar-regulations-optional .popup-r-btn,
.popup-bg .popup-gamification-regulation .popup-r-btn,
.popup-bg .popup-universal .popup-r-btn {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
}
.popup-bg .popup-regulations .btn-cancel,
.popup-bg .popup-privacy-policy .btn-cancel,
.popup-bg .popup-profile .btn-cancel,
.popup-bg .popup-regulations-optional .btn-cancel,
.popup-bg .popup-cancel-regulations-optional .btn-cancel,
.popup-bg .popup-general-regulations-optional .btn-cancel,
.popup-bg .popup-webinar-regulations-optional .btn-cancel,
.popup-bg .popup-gamification-regulation .btn-cancel,
.popup-bg .popup-universal .btn-cancel {
  color: white !important;
  text-decoration: underline !important;
  font-weight: bold;
  text-shadow: 0px 0px 30px #00000091, 0px 0px 3px #00000091;
  margin-bottom: 75px;
}
.popup-bg .popup-regulations {
  height: auto;
  padding: 2.5rem 5.5rem 8rem;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-regulations {
    padding: 1.5rem 3.5rem 5.5rem;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-regulations {
    padding: 1.5rem 3.5rem 5.5rem;
  }
}
.popup-bg .popup-regulations .popup-r-content ul li a, .popup-bg .popup-regulations .popup-r-content p a {
  font-weight: normal;
  color: white;
  text-decoration: underline;
}
.popup-bg .popup-privacy-policy {
  height: auto;
  padding: 2.5rem 5.5rem 8rem;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-privacy-policy {
    padding: 1.5rem 3.5rem 5.5rem;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-privacy-policy {
    padding: 1.5rem 3.5rem 5.5rem;
  }
}
.popup-bg .popup-privacy-policy .popup-r-content ul li a, .popup-bg .popup-privacy-policy .popup-r-content p a {
  font-weight: normal;
  color: white;
  text-decoration: underline;
}
.popup-bg .popup-privacy-policy .popup-r-btn {
  float: left;
  display: inline;
  width: auto;
}
.popup-bg .popup-regulations-optional {
  width: 640px;
  height: 888px;
}
.popup-bg .popup-regulations-optional .popup-r-title {
  padding-bottom: 20px;
}
.popup-bg .popup-general-regulations-optional {
  width: 640px;
  height: 788px;
  padding: 2.5rem 3.5rem;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-general-regulations-optional {
    padding: 2.5rem 3.5rem;
  }
}
@media all and (max-width: 480px) {
  .popup-bg .popup-general-regulations-optional {
    padding: 1.5rem 1.5rem;
  }
}
.popup-bg .popup-general-regulations-optional .popup-r-title {
  padding-bottom: 20px;
}
.popup-bg .popup-general-regulations-optional .red-checkboxes label.checkbox-container {
  font-size: 14px;
}
.popup-bg .popup-cancel-regulations-optional .popup-r-btn {
  padding: 10px 10px;
  width: 250px;
}
.popup-bg .popup-gamification-regulation {
  height: 688px;
}
.popup-bg .popup-universal {
  padding-top: 56px;
  width: 600px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding-bottom: 80px;
  background-position: center 90%;
}
@media all and (max-width: 600px) {
  .popup-bg .popup-universal {
    padding-top: 16px;
  }
}
.popup-bg .popup-universal .popup-r-content p {
  line-height: 1.3em;
}
.popup-bg .popup-universal-big {
  height: 470px;
}

.gunmetal-color {
  color: #424d5a;
}
.gunmetal-color:focus {
  color: #424d5a;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-0_5em {
  margin-bottom: 0.5em;
}

.mb-0_75em {
  margin-bottom: 0.75em;
}

.mb-1em {
  margin-bottom: 1em;
}

.mb-1_5em {
  margin-bottom: 1.5em;
}

.mb-2em {
  margin-bottom: 2em;
}

.mt-0 {
  margin-top: 0px;
}

.mt-1em {
  margin-top: 1em;
}

.mt-2em {
  margin-top: 2em;
}

.pb-1em {
  padding-bottom: 1rem;
}

.pl-4em {
  padding-left: 4em;
}

.lh-1_5 {
  line-height: 1.75em !important;
}

@media all and (max-width: 480px) {
  .pl-2em-480 {
    padding-left: 2em;
  }
}
.regulations-form .disclaimer {
  font-size: 0.8125rem;
}

.bannerMobile {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 672px;
}
@media all and (max-width: 590px) {
  .bannerMobile .bannerMobileCol {
    padding-left: 0;
    padding-right: 0;
    height: 40vw;
    overflow: hidden;
  }
}
@media all and (max-width: 590px) {
  .bannerMobile .bannerMobileCol img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 330px;
  }
}

.d-1121-and-less {
  display: none;
}
@media all and (max-width: 1121px) {
  .d-1121-and-less {
    display: block;
  }
}

.d-1122-and-more {
  display: none;
}
@media all and (min-width: 1122px) {
  .d-1122-and-more {
    display: block;
  }
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(228, 20, 41, 0.5);
}

@media all and (min-width: 768px) {
  .displayFields .col-sm-4:first-child, .displayFields .col-sm-6:first-child, .displayFields .col-sm-8:first-child {
    padding-right: 10px;
  }
}
@media all and (min-width: 768px) {
  .displayFields .col-sm-4:last-child, .displayFields .col-sm-6:last-child, .displayFields .col-sm-8:last-child {
    padding-left: 10px;
  }
}

/*** ANKIETY ***/
.surveys_display,
.surveys_thanks,
.webinar-survey {
  color: #424D5A;
  font-size: 13px;
}
@media all and (max-width: 600px) {
  .surveys_display .container,
.surveys_thanks .container,
.webinar-survey .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media all and (max-width: 480px) {
  .surveys_display .container,
.surveys_thanks .container,
.webinar-survey .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.surveys_display .trainingQuestionSingle.multiType .answer, .surveys_display .trainingQuestionSingle.oneType .answer,
.surveys_thanks .trainingQuestionSingle.multiType .answer,
.surveys_thanks .trainingQuestionSingle.oneType .answer,
.webinar-survey .trainingQuestionSingle.multiType .answer,
.webinar-survey .trainingQuestionSingle.oneType .answer {
  text-align: left;
}
.surveys_display .trainingCount,
.surveys_thanks .trainingCount,
.webinar-survey .trainingCount {
  margin-bottom: 1.5rem;
  text-align: center;
}
.surveys_display .trainingCount .counterValue,
.surveys_thanks .trainingCount .counterValue,
.webinar-survey .trainingCount .counterValue {
  display: inline-block;
}
.surveys_display .trainingCount .counterValue.rightSpace,
.surveys_thanks .trainingCount .counterValue.rightSpace,
.webinar-survey .trainingCount .counterValue.rightSpace {
  margin-right: 50px;
}
.surveys_display .trainingNext,
.surveys_thanks .trainingNext,
.webinar-survey .trainingNext {
  text-align: center;
  margin-bottom: 1.5rem;
}
.surveys_display .trainingPrev,
.surveys_thanks .trainingPrev,
.webinar-survey .trainingPrev {
  float: left;
}
.surveys_display textarea,
.surveys_thanks textarea,
.webinar-survey textarea {
  width: 100%;
  max-width: 100%;
  resize: vertical;
  border: none;
  border-bottom: 1px solid #848B93;
  padding: 5px 0;
  line-height: 1.5em;
}
.surveys_display textarea:focus-visible,
.surveys_thanks textarea:focus-visible,
.webinar-survey textarea:focus-visible {
  outline: none;
}
.surveys_display .training,
.surveys_thanks .training,
.webinar-survey .training {
  max-width: 640px;
  margin: auto;
  position: relative;
}
.surveys_display .training img,
.surveys_thanks .training img,
.webinar-survey .training img {
  width: auto;
  max-width: 100%;
  border-radius: 4px;
}
.surveys_display .training label,
.surveys_thanks .training label,
.webinar-survey .training label {
  padding-left: 0px;
}
.surveys_display.default .topBar,
.surveys_display.default .ngQuestion,
.surveys_display.default .button,
.surveys_thanks.default .topBar,
.surveys_thanks.default .ngQuestion,
.surveys_thanks.default .button,
.webinar-survey.default .topBar,
.webinar-survey.default .ngQuestion,
.webinar-survey.default .button {
  background: #2f368e;
}
.surveys_display.alternative .topBar,
.surveys_display.alternative .ngQuestion,
.surveys_display.alternative .button,
.surveys_thanks.alternative .topBar,
.surveys_thanks.alternative .ngQuestion,
.surveys_thanks.alternative .button,
.webinar-survey.alternative .topBar,
.webinar-survey.alternative .ngQuestion,
.webinar-survey.alternative .button {
  background: black;
}
.surveys_display .noBorder,
.surveys_thanks .noBorder,
.webinar-survey .noBorder {
  border: none;
  margin-bottom: 0;
}
.surveys_display .radios-to-slider,
.surveys_thanks .radios-to-slider,
.webinar-survey .radios-to-slider {
  background: transparent;
  margin-top: 1.5rem;
  margin-bottom: 0;
}
.surveys_display .radios-to-slider .slider-bar,
.surveys_thanks .radios-to-slider .slider-bar,
.webinar-survey .radios-to-slider .slider-bar {
  background: transparent;
}
.surveys_display .radios-to-slider .slider-level,
.surveys_thanks .radios-to-slider .slider-level,
.webinar-survey .radios-to-slider .slider-level {
  border: 1px solid;
}
.surveys_display .radios-to-slider .slider-level.slider-lower-level,
.surveys_thanks .radios-to-slider .slider-level.slider-lower-level,
.webinar-survey .radios-to-slider .slider-level.slider-lower-level {
  opacity: 1;
}
.surveys_display .radios-to-slider .slider-label,
.surveys_thanks .radios-to-slider .slider-label,
.webinar-survey .radios-to-slider .slider-label {
  top: 8px !important;
  z-index: 5;
}
.surveys_display .radios-to-slider .slider-label.slider-label-active,
.surveys_thanks .radios-to-slider .slider-label.slider-label-active,
.webinar-survey .radios-to-slider .slider-label.slider-label-active {
  color: white;
}
.surveys_display .radios-to-slider .slider-knob,
.surveys_thanks .radios-to-slider .slider-knob,
.webinar-survey .radios-to-slider .slider-knob {
  background: #2f368e;
  width: 22px !important;
  height: 22px !important;
}
.surveys_display .radios-to-slider .slider-bar,
.surveys_thanks .radios-to-slider .slider-bar,
.webinar-survey .radios-to-slider .slider-bar {
  top: 5px;
  left: -5px;
}
.surveys_display .radios-to-slider .slider-bar.transition-enabled,
.surveys_thanks .radios-to-slider .slider-bar.transition-enabled,
.webinar-survey .radios-to-slider .slider-bar.transition-enabled {
  transition: 0ms;
}
.surveys_display .radioSliderWrapper,
.surveys_thanks .radioSliderWrapper,
.webinar-survey .radioSliderWrapper {
  position: relative;
}
.surveys_display .radioSliderWrapper .radioSlider,
.surveys_thanks .radioSliderWrapper .radioSlider,
.webinar-survey .radioSliderWrapper .radioSlider {
  max-width: 60%;
  margin: auto;
}
.surveys_display .radioSliderWrapper .firstAnswer, .surveys_display .radioSliderWrapper .lastAnswer,
.surveys_thanks .radioSliderWrapper .firstAnswer,
.surveys_thanks .radioSliderWrapper .lastAnswer,
.webinar-survey .radioSliderWrapper .firstAnswer,
.webinar-survey .radioSliderWrapper .lastAnswer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(20% - 10px);
}
.surveys_display .radioSliderWrapper .firstAnswer,
.surveys_thanks .radioSliderWrapper .firstAnswer,
.webinar-survey .radioSliderWrapper .firstAnswer {
  left: 0px;
}
.surveys_display .radioSliderWrapper .lastAnswer,
.surveys_thanks .radioSliderWrapper .lastAnswer,
.webinar-survey .radioSliderWrapper .lastAnswer {
  right: 0px;
}
.surveys_display .buttonsDisplay, .surveys_display .yes_noDisplay,
.surveys_thanks .buttonsDisplay,
.surveys_thanks .yes_noDisplay,
.webinar-survey .buttonsDisplay,
.webinar-survey .yes_noDisplay {
  text-align: center;
}
.surveys_display .buttonsDisplay .radio-button-container, .surveys_display .yes_noDisplay .radio-button-container,
.surveys_thanks .buttonsDisplay .radio-button-container,
.surveys_thanks .yes_noDisplay .radio-button-container,
.webinar-survey .buttonsDisplay .radio-button-container,
.webinar-survey .yes_noDisplay .radio-button-container {
  display: inline-block;
}
.surveys_display .buttonsDisplay .radio-button-container input, .surveys_display .yes_noDisplay .radio-button-container input,
.surveys_thanks .buttonsDisplay .radio-button-container input,
.surveys_thanks .yes_noDisplay .radio-button-container input,
.webinar-survey .buttonsDisplay .radio-button-container input,
.webinar-survey .yes_noDisplay .radio-button-container input {
  opacity: 0;
  display: none;
}
.surveys_display .buttonsDisplay .radio-button-container input:checked + label, .surveys_display .yes_noDisplay .radio-button-container input:checked + label,
.surveys_thanks .buttonsDisplay .radio-button-container input:checked + label,
.surveys_thanks .yes_noDisplay .radio-button-container input:checked + label,
.webinar-survey .buttonsDisplay .radio-button-container input:checked + label,
.webinar-survey .yes_noDisplay .radio-button-container input:checked + label {
  opacity: 1;
}
.surveys_display .buttonsDisplay .radio-button-container input:checked + label.btn-1, .surveys_display .yes_noDisplay .radio-button-container input:checked + label.btn-1,
.surveys_thanks .buttonsDisplay .radio-button-container input:checked + label.btn-1,
.surveys_thanks .yes_noDisplay .radio-button-container input:checked + label.btn-1,
.webinar-survey .buttonsDisplay .radio-button-container input:checked + label.btn-1,
.webinar-survey .yes_noDisplay .radio-button-container input:checked + label.btn-1 {
  background: #2f368e;
}
.surveys_display .buttonsDisplay .radio-button-container label, .surveys_display .yes_noDisplay .radio-button-container label,
.surveys_thanks .buttonsDisplay .radio-button-container label,
.surveys_thanks .yes_noDisplay .radio-button-container label,
.webinar-survey .buttonsDisplay .radio-button-container label,
.webinar-survey .yes_noDisplay .radio-button-container label {
  font-weight: bold;
  padding: 0 1rem;
  margin: 0.75rem;
  opacity: 0.5;
}
@media all and (max-width: 600px) {
  .surveys_display .buttonsDisplay .radio-button-container label, .surveys_display .yes_noDisplay .radio-button-container label,
.surveys_thanks .buttonsDisplay .radio-button-container label,
.surveys_thanks .yes_noDisplay .radio-button-container label,
.webinar-survey .buttonsDisplay .radio-button-container label,
.webinar-survey .yes_noDisplay .radio-button-container label {
    margin: 0.5rem;
  }
}
.surveys_display .buttonsDisplay .radio-button-container label:hover, .surveys_display .yes_noDisplay .radio-button-container label:hover,
.surveys_thanks .buttonsDisplay .radio-button-container label:hover,
.surveys_thanks .yes_noDisplay .radio-button-container label:hover,
.webinar-survey .buttonsDisplay .radio-button-container label:hover,
.webinar-survey .yes_noDisplay .radio-button-container label:hover {
  opacity: 1;
}
.surveys_display .h2,
.surveys_thanks .h2,
.webinar-survey .h2 {
  font-family: "SohoGothicPro";
  font-size: 20px;
  font-weight: 100;
  margin-top: 0px;
  border-bottom: 1px solid #848B93AA;
  padding-bottom: 1.75rem;
  margin-bottom: 0.75rem;
}
.surveys_display h3,
.surveys_thanks h3,
.webinar-survey h3 {
  margin-top: 0px;
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: normal;
}
.surveys_display .answer label,
.surveys_thanks .answer label,
.webinar-survey .answer label {
  font-weight: normal;
}
.surveys_display .surver-main-img,
.surveys_thanks .surver-main-img,
.webinar-survey .surver-main-img {
  margin-bottom: 1.5rem;
}
.surveys_display .logo-row,
.surveys_thanks .logo-row,
.webinar-survey .logo-row {
  margin-bottom: 0px;
}
.surveys_display .logo-row div,
.surveys_thanks .logo-row div,
.webinar-survey .logo-row div {
  display: none;
}
.surveys_display .display-box,
.surveys_thanks .display-box,
.webinar-survey .display-box {
  background: white;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  padding: 2.5rem 3.5rem;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
}
@media all and (max-width: 600px) {
  .surveys_display .display-box,
.surveys_thanks .display-box,
.webinar-survey .display-box {
    padding: 1.75rem 2rem;
  }
}
@media all and (max-width: 480px) {
  .surveys_display .display-box,
.surveys_thanks .display-box,
.webinar-survey .display-box {
    padding: 1.5rem 1rem;
  }
}
.surveys_display .main-title-box,
.surveys_thanks .main-title-box,
.webinar-survey .main-title-box {
  padding-top: 2rem;
  border-top: 8px solid #848B9328;
}
.surveys_display .theme2 .main-title-box, .surveys_display .theme3 .main-title-box,
.surveys_thanks .theme2 .main-title-box,
.surveys_thanks .theme3 .main-title-box,
.webinar-survey .theme2 .main-title-box,
.webinar-survey .theme3 .main-title-box {
  border-top: 8px solid #2f368e;
}
.surveys_display .main-title-box-row,
.surveys_thanks .main-title-box-row,
.webinar-survey .main-title-box-row {
  margin-left: 0;
  margin-right: 0;
}
.surveys_display .main-title-box-row div,
.surveys_thanks .main-title-box-row div,
.webinar-survey .main-title-box-row div {
  padding-left: 0px;
  padding-right: 0px;
}
.surveys_display .centerImageAlign .question-image,
.surveys_thanks .centerImageAlign .question-image,
.webinar-survey .centerImageAlign .question-image {
  margin: 1.5rem 0 1.5rem;
}
.surveys_display .leftImageAlign,
.surveys_thanks .leftImageAlign,
.webinar-survey .leftImageAlign {
  text-align: left;
}
.surveys_display .leftImageAlign .question-image,
.surveys_thanks .leftImageAlign .question-image,
.webinar-survey .leftImageAlign .question-image {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}
.surveys_display .leftImageAlign .question-answers,
.surveys_thanks .leftImageAlign .question-answers,
.webinar-survey .leftImageAlign .question-answers {
  float: left;
}
.surveys_display .rightImageAlign,
.surveys_thanks .rightImageAlign,
.webinar-survey .rightImageAlign {
  text-align: left;
}
.surveys_display .rightImageAlign .question-image,
.surveys_thanks .rightImageAlign .question-image,
.webinar-survey .rightImageAlign .question-image {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}
.surveys_display .rightImageAlign .question-answers,
.surveys_thanks .rightImageAlign .question-answers,
.webinar-survey .rightImageAlign .question-answers {
  float: left;
}
@media all and (max-width: 600px) {
  .surveys_display .leftImageAlign, .surveys_display .rightImageAlign,
.surveys_thanks .leftImageAlign,
.surveys_thanks .rightImageAlign,
.webinar-survey .leftImageAlign,
.webinar-survey .rightImageAlign {
    text-align: center;
  }
}
.surveys_display .leftImageAlign .question-image, .surveys_display .rightImageAlign .question-image,
.surveys_thanks .leftImageAlign .question-image,
.surveys_thanks .rightImageAlign .question-image,
.webinar-survey .leftImageAlign .question-image,
.webinar-survey .rightImageAlign .question-image {
  width: 200px;
}
@media all and (max-width: 600px) {
  .surveys_display .leftImageAlign .question-image, .surveys_display .rightImageAlign .question-image,
.surveys_thanks .leftImageAlign .question-image,
.surveys_thanks .rightImageAlign .question-image,
.webinar-survey .leftImageAlign .question-image,
.webinar-survey .rightImageAlign .question-image {
    margin: 0 0 1.5rem 0;
    width: auto;
    float: none;
  }
}
.surveys_display .leftImageAlign .question-image img, .surveys_display .rightImageAlign .question-image img,
.surveys_thanks .leftImageAlign .question-image img,
.surveys_thanks .rightImageAlign .question-image img,
.webinar-survey .leftImageAlign .question-image img,
.webinar-survey .rightImageAlign .question-image img {
  max-width: 100%;
}
.surveys_display .leftImageAlign .question-answers, .surveys_display .rightImageAlign .question-answers,
.surveys_thanks .leftImageAlign .question-answers,
.surveys_thanks .rightImageAlign .question-answers,
.webinar-survey .leftImageAlign .question-answers,
.webinar-survey .rightImageAlign .question-answers {
  width: calc(100% - 200px - 1.5rem);
}
@media all and (max-width: 600px) {
  .surveys_display .leftImageAlign .question-answers, .surveys_display .rightImageAlign .question-answers,
.surveys_thanks .leftImageAlign .question-answers,
.surveys_thanks .rightImageAlign .question-answers,
.webinar-survey .leftImageAlign .question-answers,
.webinar-survey .rightImageAlign .question-answers {
    float: none;
    width: 100%;
  }
}
.surveys_display .leftImageAlign.buttonsDisplay .radio-button-container label, .surveys_display .leftImageAlign.yes_noDisplay .radio-button-container label, .surveys_display .rightImageAlign.buttonsDisplay .radio-button-container label, .surveys_display .rightImageAlign.yes_noDisplay .radio-button-container label,
.surveys_thanks .leftImageAlign.buttonsDisplay .radio-button-container label,
.surveys_thanks .leftImageAlign.yes_noDisplay .radio-button-container label,
.surveys_thanks .rightImageAlign.buttonsDisplay .radio-button-container label,
.surveys_thanks .rightImageAlign.yes_noDisplay .radio-button-container label,
.webinar-survey .leftImageAlign.buttonsDisplay .radio-button-container label,
.webinar-survey .leftImageAlign.yes_noDisplay .radio-button-container label,
.webinar-survey .rightImageAlign.buttonsDisplay .radio-button-container label,
.webinar-survey .rightImageAlign.yes_noDisplay .radio-button-container label {
  margin: 0.5rem 1.5rem 0.5rem 0;
}
@media all and (max-width: 600px) {
  .surveys_display .leftImageAlign.buttonsDisplay .radio-button-container label, .surveys_display .leftImageAlign.yes_noDisplay .radio-button-container label, .surveys_display .rightImageAlign.buttonsDisplay .radio-button-container label, .surveys_display .rightImageAlign.yes_noDisplay .radio-button-container label,
.surveys_thanks .leftImageAlign.buttonsDisplay .radio-button-container label,
.surveys_thanks .leftImageAlign.yes_noDisplay .radio-button-container label,
.surveys_thanks .rightImageAlign.buttonsDisplay .radio-button-container label,
.surveys_thanks .rightImageAlign.yes_noDisplay .radio-button-container label,
.webinar-survey .leftImageAlign.buttonsDisplay .radio-button-container label,
.webinar-survey .leftImageAlign.yes_noDisplay .radio-button-container label,
.webinar-survey .rightImageAlign.buttonsDisplay .radio-button-container label,
.webinar-survey .rightImageAlign.yes_noDisplay .radio-button-container label {
    margin: 0.5rem;
  }
}
.surveys_display .trainingError,
.surveys_thanks .trainingError,
.webinar-survey .trainingError {
  clear: both;
  color: #1a0b78;
  text-align: center;
  width: 100%;
  float: left;
}
.surveys_display .trainingErrorMain,
.surveys_thanks .trainingErrorMain,
.webinar-survey .trainingErrorMain {
  float: none;
}
.surveys_display .btn-submit,
.surveys_thanks .btn-submit,
.webinar-survey .btn-submit {
  padding: 0 2.5rem;
}

.webinar-survey-control {
  background: #848B930A;
}

.borderBottom {
  border-bottom: 1px solid #848B937D;
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.surveyThanks p {
  font-size: 1.25em;
  line-height: 1.25em;
  margin: 0 0 20px;
}

.surveyTitle {
  font-family: arial;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.25em;
  margin-top: 40px;
}

/*** ANKIETY ***/
.note-color {
  color: #848B93;
}

/*** WEBINARY ANKIETY ***/
.webinar-survey {
  position: relative;
  padding: 4rem 1.2rem 1.5rem;
}
.webinar-survey .webinar-survey-content {
  position: relative;
  margin: auto;
  max-width: 100%;
  width: 620px;
}
.webinar-survey .display-box {
  border-radius: unset;
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
}
.webinar-survey .questionContent {
  margin-bottom: 1rem;
}

.time-over {
  text-decoration: line-through;
}

.pe-none {
  cursor: not-allowed;
}
.pe-none .answer, .pe-none .radioSliderWrapper {
  pointer-events: none;
}
.answer-result {
  display: inline-block;
  margin: 10px 10px;
}
.answer-result .percent {
  font-weight: bold;
}

.trainingQuestionSingle.buttonsDisplay .answer-result {
  font-size: 18px;
  font-weight: bold;
}

.trainingQuestionSingle.yes_noDisplay .answer-result {
  font-size: 22px;
  font-weight: bold;
}

.trainingQuestionSingle.defaultDisplay .answer-result {
  width: 100%;
  text-align: left;
}

.survey-name, .select-survey-name {
  color: #848B93;
}

.questionPagination {
  padding-left: 0;
  list-style: none;
  font-size: 12px;
}
.questionPagination li {
  display: inline-block;
  padding: 2px;
}
.questionPagination li.active {
  font-weight: bold;
}
.questionPagination li a:focus {
  color: inherit;
  text-decoration: none;
}
.questionPagination .prev, .questionPagination .next {
  font-weight: bold;
  font-size: 16px;
}
.questionPagination .prev {
  margin-right: 1.5rem;
}
.questionPagination .next {
  margin-left: 1.5rem;
}

.questionPaginationWrapper .webinar-survey {
  display: none !important;
}
.questionPaginationWrapper .webinar-survey.active {
  display: block !important;
}

.survey-name {
  background: #2f368e;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1rem;
  border-radius: 4px 4px 0 0;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/*** WEBINARY ANKIETY ***/
/** Sekcje kursów */
@media all and (max-width: 1121px) {
  .sections .col-sm-6:first-child {
    padding-right: 15px;
  }
  .sections .col-sm-6:last-child {
    padding-left: 15px;
  }
}
.sections .section {
  display: block;
  position: relative;
  min-height: 320px;
  padding: 3.5rem 5.25rem 2rem;
  margin-bottom: 2.5rem;
  transition: all 300ms ease 0s;
}
@media all and (max-width: 1121px) {
  .sections .section {
    min-height: 270px;
    padding: 2rem 3rem 1rem;
    margin-bottom: 1.5rem;
  }
}
@media all and (max-width: 767px) {
  .sections .section {
    min-height: auto;
    padding: 3rem 3rem;
  }
}
@media all and (max-width: 480px) {
  .sections .section {
    padding: 1rem 2rem 1rem;
    margin-bottom: 1rem;
  }
}
.sections .section .section_image_hover {
  opacity: 0;
}
.sections .section:focus {
  text-decoration: none;
}
.sections .section:hover {
  box-shadow: 5px 5px 15px rgba(66, 77, 90, 0.2);
}
.sections .section:hover img {
  transform: translate(-50%, 50%) scale(1.2);
}
.sections .section:hover .section_image {
  opacity: 0;
}
.sections .section:hover .section_image_hover {
  opacity: 1;
}
.sections .section .header-3 {
  display: block;
  margin: 2rem 0 1rem;
  font-family: "SohoGothicPro";
  font-weight: 300;
  color: #424D5A;
}
@media all and (max-width: 480px) {
  .sections .section .header-3 {
    margin: 0.5rem 0 0.5rem;
  }
}
.sections .section .section_content {
  display: block;
  font-size: 14px;
}
.sections .section img {
  transition: all 300ms ease 0s;
  transform-origin: bottom;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  max-width: 100%;
  max-height: 100%;
}
.sections .section .section_image_wrapper {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
}
@media all and (max-width: 1121px) {
  .sections .section .section_image_wrapper {
    width: 64px;
    height: 64px;
  }
}
@media all and (max-width: 480px) {
  .sections .section .section_image_wrapper {
    width: 42px;
    height: 42px;
  }
}

.filtersBox {
  position: relative;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 2.5rem;
  z-index: 3;
}
.filtersBox .filterLabelWrapper {
  border-right: 1px solid #848B9332;
}
@media all and (max-width: 1121px) {
  .filtersBox .filterLabelWrapper {
    border-right: none;
  }
}
.filtersBox .filterLabelWrapper .filterLabel {
  width: 100%;
}
.filtersBox .filterLabelWrapper .filterLabel sup {
  background: #2f368e;
  color: white;
  border-radius: 15px;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 1.2em;
  top: -0.75em;
  font-weight: bold;
}
.filtersBox .toggleNext, .filtersBox .fadeNext {
  text-align: center;
  cursor: pointer;
  padding: 0.75rem 0rem;
  display: inline-block;
  border-radius: 4px;
  margin: 0.5rem 0;
}
.filtersBox .toggleNext img, .filtersBox .toggleNext svg, .filtersBox .fadeNext img, .filtersBox .fadeNext svg {
  margin: 0 5px;
}
.filtersBox .toggleNext {
  padding: 0.75rem 1rem;
  width: 210px;
  margin-left: 20px;
}
.filtersBox .toggleNext.open {
  color: white;
  background: #2f368e;
}
.filtersBox .toggleNext.open svg path {
  fill: white;
  stroke: white;
}
@media all and (max-width: 1121px) {
  .filtersBox .filtersWrapper {
    text-align: center;
  }
}
@media all and (max-width: 1121px) {
  .filtersBox .filtersWrapper .toggleNext {
    margin-left: auto;
    margin-right: auto;
  }
}
.filtersBox .helpBox {
  background: #fffffff5;
  padding: 1.5rem;
  width: 544px;
  position: absolute;
  top: 60px;
  box-shadow: 0px 0px 30px #424D5A32;
  z-index: 1;
  border-radius: 4px;
}
@media all and (max-width: 1121px) {
  .filtersBox .helpBox {
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 30px);
  }
}
.filtersBox .helpBox:before {
  display: block;
  position: absolute;
  top: -11px;
  left: 16%;
  width: 11px;
  height: 11px;
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
@media all and (max-width: 1121px) {
  .filtersBox .helpBox:before {
    left: 50%;
  }
}
.filtersBox .filter-list {
  position: relative;
  display: inline-block;
  text-align: center;
}
@media all and (max-width: 480px) {
  .filtersBox .filter-list {
    width: 100%;
  }
}
.filtersBox .filter-list.red-checkboxes {
  padding: 0;
}
.filtersBox .filter-list .toggleThis:before {
  left: 50%;
  transform: translateX(-50%);
}
.filtersBox .filter-list .helpBox {
  width: 300px;
}
.filtersBox .filter-list .helpBox:before {
  left: 50%;
}
.filtersBox .arrowToggle {
  transform: rotateZ(180deg);
}

.h100 {
  height: 100%;
}

.paginationWrapper {
  text-align: center;
}
.paginationWrapper .pagination .number {
  display: inline-block;
  padding: 2px 5px;
  color: #424d5a;
}
.paginationWrapper .pagination .number a {
  color: #424d5a;
}
.paginationWrapper .pagination .number.current {
  color: #2f368e;
  text-decoration: underline;
}
.paginationWrapper .pagination .next, .paginationWrapper .pagination .prev {
  display: inline-block;
  padding: 2px 5px;
  margin: 0 10px;
  color: #424d5a;
}
.paginationWrapper .pagination .next.disabled, .paginationWrapper .pagination .prev.disabled {
  opacity: 0.5;
}
.paginationWrapper .pagination .next a, .paginationWrapper .pagination .prev a {
  color: #424d5a;
}

.kindVideo {
  font-size: 16px;
  color: #424D5A;
}
.kindVideo h1 {
  font-weight: normal;
  font-family: "SohoGothicPro";
  margin-bottom: 2rem;
  color: #424D5A;
}
.kindVideo h2 {
  font-weight: normal;
  color: #424D5A;
}
.kindVideo .videoLearning .videoLearningRow {
  margin-bottom: 2rem;
}
@media all and (max-width: 767px) {
  .kindVideo .videoLearning .videoLearningRow {
    margin-bottom: 0rem;
  }
}
.kindVideo .videoLearning .videoLearningRow .col-sm-6 {
  margin-bottom: 1rem;
}
.kindVideo .videoLearning .videoLearningImage {
  padding-right: 0;
  text-align: right;
}
.kindVideo .videoLearning .videoLearningImage img {
  max-width: 56px;
  max-height: 56px;
}
@media all and (max-width: 1121px) {
  .kindVideo .videoLearning .videoLearningImage img {
    max-width: 42px;
    max-height: 42px;
  }
}
@media all and (max-width: 767px) {
  .kindVideo .videoLearning .videoLearningImage img {
    max-width: 56px;
    max-height: 56px;
  }
}
@media all and (max-width: 480px) {
  .kindVideo .videoLearning .videoLearningImage img {
    max-width: 42px;
    max-height: 42px;
  }
}
@media all and (max-width: 1121px) {
  .kindVideo .videoLearning .videoLearningContent {
    font-size: 14px;
  }
}
@media all and (max-width: 767px) {
  .kindVideo .videoLearning .videoLearningContent {
    font-size: 16px;
  }
}
@media all and (max-width: 480px) {
  .kindVideo .videoLearning .videoLearningContent {
    font-size: 14px;
  }
}
.kindVideo .videoPlayer {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.kindVideo .videoPlayer video {
  min-height: 330px;
}
@media all and (max-width: 1121px) {
  .kindVideo .videoPlayer video {
    min-height: 230px;
  }
}
@media all and (max-width: 980px) {
  .kindVideo .videoPlayer video {
    min-height: 200px;
  }
}
@media all and (max-width: 600px) {
  .kindVideo .videoPlayer video {
    min-height: 160px;
  }
}
.kindVideo .videoPlayer .videoLayer {
  color: #ffffffdd;
  position: absolute;
  background: rgba(47, 54, 142, 0.5);
  transition: all 300ms ease 0s;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.kindVideo .videoPlayer .videoLayer .fa-play-circle {
  cursor: pointer;
  font-size: 88px;
  text-shadow: 0px 0px 30px #00000077;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.kindVideo .videoPlayer .volume {
  position: absolute;
  bottom: 25px;
  right: 20px;
  width: 60px;
  /* Input Thumb */
  /* Input Track */
}
.kindVideo .videoPlayer .volume input[type=range] {
  cursor: pointer;
  pointer-events: all;
  max-width: 100%;
}
.kindVideo .videoPlayer .volume input {
  display: inline-block;
  vertical-align: middle;
  font-size: 1em;
  font-family: Arial, sans-serif;
}
.kindVideo .videoPlayer .volume input[type=range]:focus {
  outline: none;
}
.kindVideo .videoPlayer .volume input[type=range] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 200px;
  height: 7px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background-image: linear-gradient(#e1e6ff, #2f368e, #1a0b78);
  background-size: 70% 100%;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 100px #ffffff77, 0px 0px 100px #ffffff77;
}
.kindVideo .videoPlayer .volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #2f368e;
  transition: all 0.2s ease-in-out;
  border: 2px solid white;
}
.kindVideo .videoPlayer .volume input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #2f368e;
  transition: all 0.2s ease-in-out;
  border: 2px solid white;
}
.kindVideo .videoPlayer .volume input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #2f368e;
  transition: all 0.2s ease-in-out;
  border: 2px solid white;
}
.kindVideo .videoPlayer .volume input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.kindVideo .videoPlayer .volume input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.kindVideo .videoPlayer .volume input[type=range]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.kindVideo .videoPlayer .button {
  pointer-events: all;
}
.kindVideo .videoPlayer .button:after {
  position: absolute;
  left: 51%;
  top: 50%;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2f368e;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.kindVideo .videoPlayer .button:hover:after {
  color: white;
}
.kindVideo .videoPlayer .button.play:after {
  content: "\f04b";
}
.kindVideo .videoPlayer .button.stop:after {
  content: "\f04d";
}
.kindVideo .videoPlayer .button.pause:after {
  content: "\f04c";
}
.kindVideo .videoPlayer .button.fullscreen:after {
  content: "\f066";
}
.kindVideo .videoPlayer .videoControls {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(transparent, transparent, #000a);
}
.kindVideo .videoPlayer .videoControls .button {
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  position: absolute;
  bottom: 5px;
  transition: all 0.5s ease;
  cursor: pointer;
  width: 30px;
  height: 30px;
  pointer-events: all;
}
.kindVideo .videoPlayer .videoControls .button:hover {
  background-color: #2f368e;
}
.kindVideo .videoPlayer .videoControls .button.play {
  left: 24px;
}
.kindVideo .videoPlayer .videoControls .button.pause {
  left: 24px;
}
.kindVideo .videoPlayer .videoControls .button.stop {
  left: 62px;
}
.kindVideo .videoPlayer .videoControls .button.fullscreen {
  left: 100px;
}
.kindVideo .videoPlayer .videoControls .loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: #1a0b78;
  z-index: 1000;
}
.kindVideo .videoPlayer .progress {
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0em;
  left: 50%;
  transform: translate(-50%, 0%);
  border-radius: 0;
  margin-bottom: 0px;
}
.kindVideo .videoPlayer .progress progress {
  width: 100%;
  height: 100%;
  opacity: 0;
  float: left;
  cursor: pointer;
  pointer-events: all;
}
.kindVideo .videoPlayer .progress .progressBar {
  background-color: #2f368e;
  left: 0;
  top: 0;
  height: 20px;
  position: absolute;
  transition: all 0.25s linear;
  pointer-events: none;
}
.kindVideo .videoPlayer .progress .bufferBar {
  pointer-events: none;
  position: absolute;
  height: 20px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .kindVideo .videoPlayer .progress {
    bottom: 0;
  }
}
.kindVideo .videoPlayer.controlsOnHover:hover .videoControls {
  opacity: 1;
}
.video-right-column .h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.video-right-column .box {
  overflow: hidden;
}
@media all and (max-width: 480px) {
  .video-right-column .row .col-xs-6 {
    width: 100%;
  }
}
.video-right-column .related-items .item-box img {
  mix-blend-mode: multiply;
}
.video-right-column .item-box-wrapper {
  position: relative;
}
.video-right-column .item-box-wrapper .item-box {
  border-radius: 4px 4px 0 0;
  height: 236px;
  background: #00000044;
  background: linear-gradient(0deg, black 0%, #3a3a3b 35%, #dfdede 100%);
  display: block;
  position: relative;
  overflow: hidden;
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-wrapper .item-box {
    height: 230px;
  }
}
@media all and (max-width: 767px) {
  .video-right-column .item-box-wrapper .item-box {
    height: 28vw;
  }
}
@media all and (max-width: 480px) {
  .video-right-column .item-box-wrapper .item-box {
    height: 56vw;
  }
}
.video-right-column .item-box-wrapper .item-box img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-wrapper .item-box img {
    max-width: none;
    height: 100%;
    width: auto;
  }
}
@media all and (max-width: 767px) {
  .video-right-column .item-box-wrapper .item-box img {
    width: 100%;
    height: auto;
  }
}
.video-right-column .item-box-wrapper .item-box .item-box-data {
  display: block;
  padding: 25px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  color: white;
  text-shadow: 0px 0px 20px #000000a3;
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-wrapper .item-box .item-box-data {
    padding: 1rem;
  }
}
.video-right-column .item-box-wrapper .item-box .item-box-data .h4 {
  font-size: 20px;
  font-family: "SohoGothicPro";
  font-weight: normal;
  display: block;
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-wrapper .item-box .item-box-data .h4 {
    font-size: 18px;
  }
}
.video-right-column .item-box-wrapper .item-box .item-box-data .publish-date {
  display: block;
}
.video-right-column .item-box-bottom {
  position: relative;
  width: 100%;
  margin: 0;
}
.video-right-column .item-box-bottom .dottes {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 10px;
  transform: translate(-50%, -50%);
  line-height: 10px;
  width: 65%;
  text-align: center;
}
.video-right-column .item-box-bottom .dottes .dot {
  border: 1px solid #2f368e;
  width: 10px;
  height: 100%;
  border-radius: 10px;
  display: inline-block;
  margin: 0 3px;
  transition: all 100ms ease 0s;
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-bottom .dottes .dot {
    margin: 0 0.2px;
  }
}
@media all and (max-width: 767px) {
  .video-right-column .item-box-bottom .dottes .dot {
    margin: 0 3px;
  }
}
@media all and (max-width: 600px) {
  .video-right-column .item-box-bottom .dottes .dot {
    margin: 0 2px;
  }
}
@media all and (max-width: 480px) {
  .video-right-column .item-box-bottom .dottes .dot {
    margin: 0 4px;
  }
}
.video-right-column .item-box-bottom .dottes .dot.tns-nav-active, .video-right-column .item-box-bottom .dottes .dot:hover {
  background: #2f368e;
}
.video-right-column .item-box-bottom .item-box-bottom-item {
  padding: 1rem;
  display: inline-block;
}
.video-right-column .item-box-bottom .item-box-bottom-item:focus {
  outline: none;
  text-decoration: none;
}
.video-right-column .item-box-bottom .item-box-bottom-item.prev:before, .video-right-column .item-box-bottom .item-box-bottom-item.next:before {
  border-left: 2px solid #2f368e;
  border-bottom: 2px solid #2f368e;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
@media all and (max-width: 1121px) {
  .video-right-column .item-box-bottom .item-box-bottom-item.prev span, .video-right-column .item-box-bottom .item-box-bottom-item.next span {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .video-right-column .item-box-bottom .item-box-bottom-item.prev span, .video-right-column .item-box-bottom .item-box-bottom-item.next span {
    display: none;
  }
}
.video-right-column .item-box-bottom .item-box-bottom-item.prev {
  padding-left: 2rem;
  float: left;
}
.video-right-column .item-box-bottom .item-box-bottom-item.next {
  padding-right: 2rem;
  float: right;
  text-align: right;
}
.video-right-column .item-box-bottom .item-box-bottom-item.next:before {
  left: auto;
  right: 1rem;
  transform: translateY(-50%) rotate(225deg);
}
.video-right-column .test-in-video {
  overflow: visible;
}
.video-right-column .test-in-video .item-box-bottom {
  position: relative;
}
.video-right-column .test-in-video .item-box-bottom .item-box-bottom-item {
  padding-right: 3.5rem;
}
.video-right-column .test-in-video .item-box-bottom .lesson-legend {
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.home-main-box {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  padding: 1.25em;
}
@media all and (max-width: 1121px) {
  .home-main-box {
    margin-bottom: 1.5rem;
  }
}
.home-main-box .result-board {
  min-height: 168px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: white;
  background: radial-gradient(#2f368e, #1a0b78);
  border-radius: 4px;
  margin: 4rem 0 2rem 0;
  position: relative;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board {
    min-height: auto;
    margin-top: 5rem;
  }
}
.home-main-box .result-board .result-board-text {
  padding: 1rem 0 1rem 1rem;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .result-board-text {
    padding: 0rem 4rem 0 4rem;
    text-align: center;
  }
}
@media all and (max-width: 480px) {
  .home-main-box .result-board .result-board-text {
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .result-board-image {
    height: 220px;
  }
}
.home-main-box .result-board .result-board-image img {
  position: absolute;
  max-width: 300px;
  top: -70px;
  left: -5%;
  opacity: 0;
  transition: all 300ms ease 0s;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .result-board-image img {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.home-main-box .result-board .result-board-image img.active {
  opacity: 1;
}
.home-main-box .result-board .progress-ring {
  position: absolute;
  z-index: 0;
  top: -90px;
}
.home-main-box .result-board .progress-100 .progress-ring::before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  content: "&nbsp;";
  background: url("../img/progress_100_bg.png") no-repeat;
  background-position: top left;
  z-index: -1;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .progress-100 .progress-ring::before {
    background-position: top center;
  }
}
.home-main-box .result-board .percent-value {
  display: none;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .progress-ring-wrapper-desktop {
    display: none;
  }
}
.home-main-box .result-board .progress-ring-wrapper-mobile {
  display: none;
  height: 140px;
}
@media all and (max-width: 1121px) {
  .home-main-box .result-board .progress-ring-wrapper-mobile {
    display: block;
  }
}
.home-main-box .result-board .progress-ring-wrapper-mobile .progress-ring {
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
}
.home-main-box .help-popup-activator {
  text-decoration: none !important;
  font-weight: bold;
  display: block;
  background: #2f368e;
  color: white;
  float: right;
  width: 34px;
  line-height: 34px;
  border-radius: 4px;
  text-align: center;
  font-size: 22px;
}

.help-sign {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1rem;
}

@media all and (min-width: 1122px) {
  .modal-help .modal-dialog {
    top: 50%;
    transform: translateY(-50%) !important;
    margin: auto;
  }
}
.modal-help .modal-body {
  padding: 2rem 2.5rem 1rem;
}
@media all and (max-width: 1121px) {
  .modal-help .modal-body {
    padding: 1rem 2rem 1rem;
  }
}
@media all and (max-width: 480px) {
  .modal-help .modal-body {
    padding: 0.5rem 1rem 1.5rem;
  }
}
.modal-help .modal-body .help-popup-box-wrapper {
  padding-left: 10px;
  padding-right: 10px;
}
.modal-help .modal-body .help-popup-box {
  border: 1px solid #dedede;
  padding: 15px;
  min-height: 322px;
  margin-bottom: 1.5rem;
}
@media all and (max-width: 1121px) {
  .modal-help .modal-body .help-popup-box {
    min-height: auto;
  }
}
.modal-help .modal-body .help-icon {
  margin-bottom: 1rem;
}
.modal-help .modal-body .help-text {
  font-size: 16px;
}

.materials-row {
  margin-top: 2rem;
}
@media all and (max-width: 1121px) {
  .materials-row {
    margin-top: 4rem;
  }
}
@media all and (max-width: 520px) {
  .materials-row .col-xs-6 {
    width: 100%;
  }
}
.materials-row .material-box {
  transition: all 10ms ease 0s;
  display: block;
  border-radius: 4px;
  padding: 1rem;
  float: left;
  width: 100%;
}
@media all and (max-width: 1121px) {
  .materials-row .material-box {
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px 0 rgba(66, 77, 90, 0.2);
  }
}
.materials-row .material-box .material-title {
  display: inline-block;
  transition: all 10ms ease 0s;
  float: left;
  width: calc(100% - 72px);
  font-family: SohoGothicPro;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  color: #424d5a;
  font-size: 18px;
  min-height: 75.5px;
}
.materials-row .material-box .material-title span {
  display: block;
  margin-bottom: 8px;
}
.materials-row .material-box img, .materials-row .material-box svg {
  width: 64px;
  margin-right: 8px;
  float: left;
  outline: none;
}
.materials-row .material-box svg g g rect, .materials-row .material-box svg g g line, .materials-row .material-box svg g g path {
  transition: all 10ms ease 0s;
}
.materials-row .material-box .material-link {
  font-size: 14px;
  transition: all 10ms ease 0s;
  color: #2f368e;
  float: right;
  margin-top: 0.5rem;
}
@media all and (max-width: 1180px) {
  .materials-row .material-box .material-link {
    font-size: 13.5px;
  }
}
.materials-row .material-box .material-link i {
  margin-left: 0.5rem;
}
@media all and (max-width: 1366px) {
  .materials-row .material-box .material-link i {
    margin-left: 0.25rem;
  }
}
.materials-row .material-box.premium .material-title {
  color: #e1e6ff;
}
.materials-row .material-box.premium .material-link {
  color: #e1e6ff;
}
.materials-row .material-box.premium:hover, .materials-row .material-box.premium.active {
  background: #e1e6ff;
  background: linear-gradient(225deg, #e1e6ff 0%, #e1e6ff 33.3%, #2f368e 66.6%, #1a0b78 100%);
}
.materials-row .material-box.premium:hover .material-title, .materials-row .material-box.premium.active .material-title {
  color: white;
}
.materials-row .material-box.premium:hover .material-link, .materials-row .material-box.premium.active .material-link {
  color: white;
}
.materials-row .material-box.premium:hover svg g g rect, .materials-row .material-box.premium:hover svg g g line, .materials-row .material-box.premium:hover svg g g path, .materials-row .material-box.premium.active svg g g rect, .materials-row .material-box.premium.active svg g g line, .materials-row .material-box.premium.active svg g g path {
  fill: white;
}
.materials-row .material-box.standard:hover, .materials-row .material-box.standard.active {
  background: #2f368e;
  color: white;
}
.materials-row .material-box.standard:hover .material-title, .materials-row .material-box.standard.active .material-title {
  color: white;
}
.materials-row .material-box.standard:hover .material-link, .materials-row .material-box.standard.active .material-link {
  color: white;
}
.materials-row .material-box.standard:hover svg g g rect, .materials-row .material-box.standard:hover svg g g line, .materials-row .material-box.standard:hover svg g g path, .materials-row .material-box.standard.active svg g g rect, .materials-row .material-box.standard.active svg g g line, .materials-row .material-box.standard.active svg g g path {
  stroke: white;
}

.timelines-items-header h2 {
  padding-left: 80px;
  position: relative;
}
.timelines-items-header h2 svg {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.timelines-items-header p {
  font-size: 14px;
}

.timeline-items {
  padding: 1.25em 1.25em 0 1.25em;
}
.timeline-items.materials-webinars .webinar-row {
  margin-top: 0;
}
@media all and (max-width: 440px) {
  .timeline-items.materials-knowledge-base .row .col-xs-6 {
    width: 100%;
  }
}
.timeline-items.materials-knowledge-base .file-box {
  margin-bottom: 1.5rem;
}
.timeline-items.materials-premium h2 {
  color: #e1e6ff;
}

.grid-header {
  color: white;
  background: #2f368e;
  background: radial-gradient(#2f368e, #1a0b78);
  padding: 2rem 4.5rem 6rem;
  border-radius: 4px;
  position: absolute;
  width: calc(100% + 20px);
  left: -10px;
  top: -80px;
}
@media all and (max-width: 1329px) {
  .grid-header {
    top: -130px;
  }
}
@media all and (max-width: 1121px) {
  .grid-header {
    top: -150px;
  }
}
@media all and (max-width: 767px) {
  .grid-header {
    top: -170px;
    width: 100%;
    left: 0px;
  }
}
@media all and (max-width: 480px) {
  .grid-header {
    padding: 2rem 3.5rem 6rem;
    top: -180px;
  }
}
.grid-header .header-1, .grid-header .header-2 {
  margin-top: 0px;
  margin-bottom: 1rem;
  color: white !important;
}
.grid-header .header-1.f-32, .grid-header .header-2.f-32 {
  font-size: 32px;
  line-height: 1.375;
}
@media (max-width: 1699px) {
  .grid-header .header-1.f-32, .grid-header .header-2.f-32 {
    font-size: 30px;
  }
}
@media (max-width: 1199px) {
  .grid-header .header-1.f-32, .grid-header .header-2.f-32 {
    font-size: 28px;
  }
}
@media (max-width: 991px) {
  .grid-header .header-1.f-32, .grid-header .header-2.f-32 {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .grid-header .header-1.f-32, .grid-header .header-2.f-32 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .grid-header .header-1.f-32, .grid-header .header-2.f-32 {
    font-size: 20px;
  }
}
.grid-header p {
  font-size: 14px;
}
.grid-header p.f-20 {
  font-size: 20px;
  line-height: 1.333;
}
@media (max-width: 1699px) {
  .grid-header p.f-20 {
    font-size: 20px;
  }
}
@media (max-width: 1199px) {
  .grid-header p.f-20 {
    font-size: 18px;
  }
}
@media (max-width: 991px) {
  .grid-header p.f-20 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .grid-header p.f-20 {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .grid-header p.f-20 {
    font-size: 16px;
  }
}

.home-masonry-row {
  margin-top: 110px;
}
@media all and (max-width: 1121px) {
  .home-masonry-row {
    margin-top: 120px;
  }
}
@media all and (max-width: 767px) {
  .home-masonry-row {
    margin-top: 140px;
  }
}
@media all and (max-width: 480px) {
  .home-masonry-row {
    margin-top: 150px;
  }
}

.is-in-timeline {
  color: #848b93;
  position: absolute;
  top: 0px;
  right: 22px;
  z-index: 2;
  transition: all 0.2s ease 0s;
}
@media all and (max-width: 1121px) {
  .is-in-timeline {
    right: 40px;
  }
}
@media all and (max-width: 1121px) {
  .is-in-timeline svg {
    width: 31px;
    height: 31px;
  }
}
@media all and (max-width: 440px) {
  .is-in-timeline svg {
    width: 36px;
    height: 36px;
  }
}
.is-in-timeline path {
  fill: #c6d0b0;
}
.is-in-timeline:hover {
  color: #848b93;
}
.is-in-timeline.material-passed path {
  fill: #7ba51c;
}
.is-in-timeline .legend-content {
  display: none;
  position: absolute;
  top: 5px;
  right: 60px;
  background: white;
  color: #424d5a;
  padding: 10px 15px 10px 15px;
  border: 0px solid;
  font-size: 16px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 20px 20px 0 rgba(66, 77, 90, 0.15);
  z-index: 2;
  text-align: center;
}
@media all and (max-width: 1121px) {
  .is-in-timeline .legend-content {
    font-size: 14px;
    right: 35px;
  }
}
@media all and (max-width: 767px) {
  .is-in-timeline .legend-content {
    white-space: normal;
    max-width: calc(50vw - 60px);
  }
}
@media all and (max-width: 440px) {
  .is-in-timeline .legend-content {
    max-width: calc(100vw - 70px);
    right: 40px;
  }
}
.is-in-timeline:hover .legend-content {
  display: block;
}

.col-lg-6-lesson-thumbnail .is-in-timeline {
  right: 35px;
}
@media all and (max-width: 1121px) {
  .col-lg-6-lesson-thumbnail .is-in-timeline {
    right: 30px;
  }
}

/** File w Timeline na stronie głównej */
@media all and (max-width: 1121px) {
  .file-box .is-in-timeline {
    bottom: 20px;
    right: 20px;
  }
}

/** File na stronie głównej */
.home-container .fileBox .is-in-timeline {
  bottom: -20px;
  right: -20px;
}
@media all and (max-width: 1121px) {
  .home-container .fileBox .is-in-timeline {
    bottom: -15px;
    right: -15px;
  }
}

/** File na stronie bazy wiedzy */
.knowledge_display .fileBox .is-in-timeline {
  right: 25px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .progress-ring-wrapper-mobile,
.progress-ring-wrapper-desktop {
    height: 256px;
  }

  .progress-ring {
    background: url("../img/progress_circle.png") center top no-repeat;
    width: calc(100% - 40px);
    height: 256px;
    filter: drop-shadow(0px 20px 46px #65091319);
  }

  .percent-value {
    color: white;
    font-size: 52px;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block !important;
    z-index: 1;
    font-weight: bold;
    font-family: "Uni Neue", Arial;
  }
}
@media all and (max-width: 599px) {
  .main-searchbar {
    display: none;
  }
}

@media all and (max-width: 599px) {
  .profile-header, .notifications-header {
    width: 16.66666667%;
  }
}
@media all and (max-width: 360px) {
  .profile-header .dropdown-menu, .notifications-header .dropdown-menu {
    min-width: 18rem !important;
  }
}

@media all and (max-width: 599px) {
  .notifications-header {
    margin-left: 41.66666667%;
  }
}
@media all and (max-width: 599px) {
  .notifications-header .dropdown-menu {
    right: -60px !important;
  }
}

.has_notifications .menu-label, .has_notifications span.a-icon {
  position: relative;
}
.has_notifications .menu-label:after, .has_notifications span.a-icon:after {
  display: block;
  content: "";
  background: #1a0b78;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0px;
  right: -15px;
  border-radius: 10px;
  transform: scale(1);
  animation: pulse 5s infinite;
}
@media all and (min-width: 1331px) {
  .has_notifications span.a-icon:after {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .has_notifications span.a-icon:after {
    display: none;
  }
}
.has_notifications .legend-content {
  display: none;
  position: absolute;
  bottom: -5px;
  right: -105px;
  background: white;
  color: #424d5a;
  padding: 10px 15px 10px 15px;
  border: 0px solid;
  font-size: 16px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 20px 20px 0 rgba(66, 77, 90, 0.15);
  z-index: 2;
  text-align: center;
}
@media all and (max-width: 1121px) {
  .has_notifications .legend-content {
    font-size: 14px;
  }
}
@media all and (max-width: 767px) {
  .has_notifications .legend-content {
    white-space: normal;
    max-width: calc(50vw - 60px);
    display: none !important;
  }
}
@media all and (max-width: 440px) {
  .has_notifications .legend-content {
    max-width: calc(100vw - 70px);
  }
}
.has_notifications:hover .legend-content {
  display: block;
}
@media all and (min-width: 1331px) {
  .has_notifications .a-icon .legend-content {
    display: none;
  }
}

.has_notification:before {
  display: block;
  content: "";
  background: #1a0b78;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 10px;
  z-index: 1;
  animation: pulse 5s infinite;
}
@media all and (max-width: 1121px) {
  .has_notification:before {
    top: 10px;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
  }
  25% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 #e1e6ff;
  }
  75% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(225, 230, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(225, 230, 255, 0);
  }
}
/* Nagrody */
.coin {
  margin: 0 5px;
}

/* Infographics */
.grid-wrapper {
  margin-top: 140px;
}
.grid-wrapper .grid-header {
  padding: 2rem 0 6rem;
  width: calc(100% - 40px);
  left: 20px;
}
@media all and (max-width: 1329px) {
  .grid-wrapper .grid-header {
    top: -140px;
  }
}
@media all and (max-width: 1121px) {
  .grid-wrapper .grid-header {
    top: -160px;
  }
}
@media all and (max-width: 767px) {
  .grid-wrapper .grid-header {
    top: -170px;
  }
}
@media all and (max-width: 480px) {
  .grid-wrapper .grid-header {
    top: -180px;
  }
}
.grid-wrapper .grid-content {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 70px;
  justify-content: space-between;
  gap: 80px;
  padding: 0 5.25rem;
}
@media all and (max-width: 1121px) {
  .grid-wrapper .grid-content {
    gap: 20px;
    padding: 0 3.25rem;
  }
}
@media all and (max-width: 991px) {
  .grid-wrapper .grid-content {
    gap: 20px;
    flex-wrap: wrap;
  }
}
@media all and (max-width: 480px) {
  .grid-wrapper .grid-content {
    padding: 0 1.5rem;
  }
}
.grid-wrapper .grid-content .grid-box {
  background: white;
  border-radius: 4px;
  padding: 1.5rem;
  color: #424d5a;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
  flex-grow: 1;
  width: 216px;
  position: relative;
}
.grid-wrapper .grid-content .grid-box:nth-child(1):before, .grid-wrapper .grid-content .grid-box:nth-child(2):before, .grid-wrapper .grid-content .grid-box:nth-child(3):before {
  position: absolute;
  top: 0.25rem;
  left: 1rem;
  color: #424D5A;
  opacity: 0.09;
  font-size: 76px;
  line-height: 1em;
}
@media all and (max-width: 1121px) {
  .grid-wrapper .grid-content .grid-box:nth-child(1):before, .grid-wrapper .grid-content .grid-box:nth-child(2):before, .grid-wrapper .grid-content .grid-box:nth-child(3):before {
    font-size: 64px;
  }
}
@media all and (max-width: 767px) {
  .grid-wrapper .grid-content .grid-box:nth-child(1):before, .grid-wrapper .grid-content .grid-box:nth-child(2):before, .grid-wrapper .grid-content .grid-box:nth-child(3):before {
    font-size: 52px;
  }
}
.grid-wrapper .grid-content .grid-box:nth-child(1):before {
  content: "1";
}
.grid-wrapper .grid-content .grid-box:nth-child(2):before {
  content: "2";
}
.grid-wrapper .grid-content .grid-box:nth-child(3):before {
  content: "3";
}
.grid-wrapper .grid-content .grid-box svg {
  margin-bottom: 1rem;
}
@media all and (max-width: 1121px) {
  .grid-wrapper .grid-content .grid-box svg {
    width: 52px;
  }
}
@media all and (max-width: 767px) {
  .grid-wrapper .grid-content .grid-box svg {
    width: 44px;
  }
}

.orders-infographic {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  background: white;
}
.orders-infographic .legend-item {
  cursor: pointer;
  position: relative;
  top: -10px;
  display: inline-block;
  z-index: 9999;
}
.orders-infographic .legend-content {
  font-size: 16px;
  font-family: "SourceSansPro";
  width: 540px;
  max-width: 100vw;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 100;
  display: none;
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  color: #424d5a;
  border: 0px solid;
  border-radius: 3px;
  box-shadow: 0 20px 20px 0 rgba(66, 77, 90, 0.15);
  z-index: 2;
  padding: 40px 24px;
}
@media all and (max-width: 1121px) {
  .orders-infographic .legend-content {
    font-size: 14px;
    max-width: 320px;
    padding: 20px 15px;
  }
}
@media all and (max-width: 991px) {
  .orders-infographic .legend-content {
    max-width: 210px;
  }
}
@media all and (max-width: 767px) {
  .orders-infographic .legend-content {
    max-width: 150px;
  }
}
.orders-infographic .legend-content strong {
  font-weight: bold;
}
.orders-infographic .legend-content:before {
  content: "";
  display: block;
  background: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  top: -5.5px;
  width: 11px;
  height: 11px;
}

/* Infographics */
/* My Coins */
.my_coins {
  background: url("../img/my_coins.png") right bottom no-repeat;
  background-size: 100% auto;
  padding: 40px 85px;
  min-height: 232px;
}
@media (max-width: 767px) {
  .my_coins {
    padding: 40px 45px;
  }
}
@media (max-width: 575px) {
  .my_coins {
    padding: 40px 25px;
  }
}
.my_coins img {
  position: relative;
  top: -8px;
}
@media (max-width: 1699px) {
  .my_coins img {
    top: -7px;
    width: 50px;
  }
}
@media (max-width: 1199px) {
  .my_coins img {
    top: -6px;
    width: 42px;
  }
}
@media (max-width: 991px) {
  .my_coins img {
    width: 36px;
  }
}
@media (max-width: 767px) {
  .my_coins img {
    top: -5px;
    width: 34px;
  }
}
@media (max-width: 575px) {
  .my_coins img {
    width: 32px;
  }
}

/* My Coins */
/* Kategorie nagród */
.orders-product-category .product-box {
  margin-bottom: 40px;
}
@media (max-width: 600px) {
  .orders-product-category .product-box {
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 540px) {
  .orders-product-category .product-box {
    width: 100%;
  }
}
.orders-product-category .product-box .legend-item.cursor-help {
  cursor: help;
}
.orders-product-category .product-box .legend-item .legend-content {
  display: none;
  position: absolute;
  bottom: 40px;
  right: -20px;
  background: white;
  color: #424d5a;
  padding: 10px 15px 10px 15px;
  border: 0px solid;
  font-size: 16px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 20px 20px 0 rgba(66, 77, 90, 0.15);
  z-index: 2;
  padding: 2rem 1.5rem;
  font-weight: normal;
  right: 0px;
  text-align: left;
  z-index: 2001;
}
@media all and (max-width: 1121px) {
  .orders-product-category .product-box .legend-item .legend-content {
    font-size: 14px;
    bottom: 30px;
  }
}
@media all and (max-width: 1024px) {
  .orders-product-category .product-box .legend-item .legend-content {
    white-space: normal;
    width: 100vw;
    max-width: calc(50vw - 60px);
  }
}
@media all and (max-width: 440px) {
  .orders-product-category .product-box .legend-item .legend-content {
    max-width: calc(100vw - 70px);
  }
}
.orders-product-category .product-box .legend-item .legend-content i {
  margin-right: 5px;
}
.orders-product-category .product-box .product-box-header {
  background: white;
  padding: 0.75rem 1rem;
  font-weight: bold;
  position: relative;
}
.orders-product-category .product-box .product-box-header svg {
  position: relative;
  margin-right: 5px;
  top: 4px;
}
.orders-product-category .product-box .product-box-info {
  background: white;
  padding: 1rem;
  color: #424d5a;
}
.orders-product-category .product-box .product-box-info .buying-area {
  color: #2f368e;
}
.orders-product-category .product-box .product-box-info .buying-area .price {
  padding-top: 2px;
}
.orders-product-category .product-box .product-box-info .buying-area .price .coin {
  position: relative;
  top: 2px;
  color: #2f368e;
  margin-left: 5px;
  float: right;
}
@media (max-width: 1199px) {
  .orders-product-category .product-box .product-box-info .buying-area .price .coin {
    top: 1px;
    width: 22px;
  }
}
@media (max-width: 575px) {
  .orders-product-category .product-box .product-box-info .buying-area .price .coin {
    top: 0px;
    width: 20px;
  }
}
.orders-product-category .product-box .product-box-image {
  width: 300px;
  height: 240px;
  max-width: 100%;
  background-color: #F2F3F5;
}
@media (max-width: 540px) {
  .orders-product-category .product-box .product-box-image {
    width: 100%;
  }
}
.orders-product-category .product-box .product-box-image img {
  max-height: 100%;
  max-width: 100%;
}
@media (max-width: 540px) {
  .orders-product-category .product-box .product-box-image img {
    width: auto;
  }
}
.orders-product-category .product-box.inactive .product-box-header {
  color: #2f368e;
}
.orders-product-category .product-box.inactive .product-box-image {
  opacity: 0.6;
}
.orders-product-category .product-box.inactive .product-box-info .buying-area {
  color: #848B93;
}
.orders-product-category .product-box.inactive .product-box-info .buying-area svg .circle g path {
  fill: #848B93;
}
.orders-product-category .product-box.inactive .product-box-info .buying-area .select-wrapper {
  display: none;
}
.orders-product-category .product-box.inactive .product-box-info .buying-area .btn {
  background: #848B93;
  cursor: not-allowed;
}

/* Kategorie nagród */
/* Wybrane produkty */
.orders-selected-products {
  padding: 0;
  background: transparent;
}
.orders-selected-products.grid-wrapper {
  margin-top: 100px;
}
@media all and (max-width: 1329px) {
  .orders-selected-products.grid-wrapper .grid-header {
    top: -140px;
  }
}
@media all and (max-width: 767px) {
  .orders-selected-products.grid-wrapper .grid-header {
    top: -120px;
  }
}
.orders-selected-products .orders-selected-products-content,
.orders-selected-products .orders-selected-user-data {
  padding-bottom: 40px;
  color: #424d5a;
}
@media (max-width: 600px) {
  .orders-selected-products .orders-selected-products-content,
.orders-selected-products .orders-selected-user-data {
    margin-left: 6%;
    width: 88%;
  }
}
.orders-selected-products .orders-selected-products-content {
  padding-top: 40px;
}
@media (max-width: 400px) {
  .orders-selected-products .orders-selected-products-content .orders-selected-product-row .selected-product-image_box {
    display: none;
  }
}
@media (max-width: 400px) {
  .orders-selected-products .orders-selected-products-content .orders-selected-product-row .col-xs-4 {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 260px) {
  .orders-selected-products .orders-selected-products-content .orders-selected-product-row .col-xs-4 {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .orders-selected-products .orders-selected-products-content .orders-summary .col-xs-6 {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.orders-selected-products .orders-selected-products-content .selected-product-image {
  max-width: 60px;
}
.orders-selected-products .orders-selected-products-content .coin {
  position: relative;
  top: 5px;
}
.orders-selected-products .orders-selected-products-content .delete-product {
  text-decoration: none;
}
.orders-selected-products .orders-selected-products-content .delete-product svg {
  position: relative;
  top: 5px;
  margin: 0 5px;
}
@media (max-width: 1440px) {
  .orders-selected-products .orders-selected-products-content .delete-product svg {
    width: 22px;
  }
}
@media (max-width: 1199px) {
  .orders-selected-products .orders-selected-products-content .delete-product svg {
    width: 20px;
  }
}
@media (max-width: 767px) {
  .orders-selected-products .orders-selected-products-content .delete-product svg {
    width: 18px;
    top: 7px;
  }
}
.orders-selected-products .orders-selected-user-data {
  padding-top: 20px;
}
@media (max-width: 600px) {
  .orders-selected-products .orders-selected-user-data .col-xs-12 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Wybrane produkty */
.select-wrapper {
  margin: auto 5px;
  position: relative;
  border-radius: 4px;
  width: 70px;
  display: inline-block;
  border: 2px solid #424d5a;
  text-align: center;
}
.select-wrapper::after {
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.5' height='10.961' viewBox='0 0 18.5 10.961'%3E%3Cpath id='arrow' d='M8.461,8,0,16,8.461,8,0,0Z' transform='translate(17.25 1.25) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: -2px;
  right: -2px;
  width: 33px;
  height: 100%;
  height: calc(100% + 4px);
  background-color: #424d5a;
  transition: 0.25s all ease;
  pointer-events: none;
  border-radius: 0 4px 4px 0px;
}
.select-wrapper:hover::after {
  color: #e1e6ff;
}
.select-wrapper select {
  font-size: 16px;
  line-height: 1.375;
  line-height: 1.65em;
  background: white;
  width: 100%;
  padding-right: 31px;
  font-family: "SourceSansPro";
  color: #424d5a;
  appearance: none;
  outline: 0;
  border: 0;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 1699px) {
  .select-wrapper select {
    font-size: 16px;
  }
}
@media (max-width: 1199px) {
  .select-wrapper select {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .select-wrapper select {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .select-wrapper select {
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  .select-wrapper select {
    font-size: 14px;
  }
}
.select-wrapper select::-ms-expand {
  display: none;
}
.select-wrapper select option {
  text-align: center;
}

/* Nagrody */
.popup-bg.popup-order .popup-r-title {
  font-size: 28px;
}

.errors {
  color: #2f368e;
}
.errors p {
  color: #2f368e;
}

/* FAQ */
.faq-box {
  width: 100%;
  background-color: #2f368e;
  background-position: right bottom;
  background-repeat: no-repeat;
  border-radius: 4px;
  position: relative;
}
.faq-box img {
  position: absolute;
}
@media all and (max-width: 625px) {
  .faq-box img {
    display: none;
  }
}
.faq-box .text-box {
  max-width: 17rem;
}
.faq-box .text-box p {
  color: #FFF;
  font-family: "SourceSansPro";
  font-size: 1.125rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.faq-top-box {
  height: 12.5rem;
  background-image: url("../images/faq/clouds_top.png");
  padding-top: 3.5rem;
  padding-left: 3.125rem;
  margin-top: 1rem;
  overflow: hidden;
}
.faq-top-box .qa-img {
  top: -0.8rem;
  right: 1rem;
}
.faq-top-box .text-box h1 {
  margin-top: 0;
  font-family: "SohoGothicPro";
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #FFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.faq-bottom-box {
  background-image: url("../images/faq/clouds_bottom.png");
  padding: 1.125rem 0 1.125rem 3.125rem;
  margin: 4.5rem 0 2.25rem 0;
}
.faq-bottom-box .envelope-img {
  top: -2rem;
  right: 1.25rem;
  height: 200px;
}
.faq-bottom-box .text-box p {
  font-weight: bold;
}
.faq-bottom-box .text-box p a {
  color: #FFF;
  text-decoration: underline;
}

@media all and (max-width: 420px) {
  .faq-box, .contact-red-box {
    padding: 1rem;
    margin: 2.5rem 0;
  }
  .faq-box .text-box, .contact-red-box .text-box {
    width: 100%;
  }
}
.faq-list {
  font-family: SohoGothicPro;
  color: #424D5A;
  font-size: 1rem;
}
.faq-list .faq-category {
  margin-top: 2.75rem;
}
.faq-list .faq-category .faq-header {
  color: #424D5A;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.faq-list .faq-category .faq-position {
  margin-top: 0.625rem;
  padding: 1.125rem 1.75rem;
}
@media all and (max-width: 420px) {
  .faq-list .faq-category .faq-position {
    padding: 1.125rem 1rem;
  }
}
.faq-list .faq-category .faq-position .faq-title {
  margin: 0;
  position: relative;
  padding-right: 20px;
  cursor: pointer;
}
.faq-list .faq-category .faq-position .faq-title .arrow-toggle {
  top: 6px;
  position: absolute;
  right: 0;
  transition-duration: 0.5s;
}
.faq-list .faq-category .faq-position .faq-answer {
  margin: 1rem 0 0 0;
  font-family: SourceSansPro;
  font-size: 0.875rem;
  display: none;
}
.faq-list .faq-category .faq-position.active .arrow-toggle {
  transform: rotate(180deg);
}

/*# sourceMappingURL=screen.css.map */