* {
  box-sizing: border-box;
  word-break: break-word;
}

.page-content-wrapper {
  text-align: center;
}

.page-content, .page-content-small {
  display: inline-block;
  text-align: left;
  width: 90%;
  max-width: 1440px;
}

.page-content-small {
  max-width: 600px;
}

html {
  background-color: #242323;
  color: #f0f0f0;
  font-family: "Nunito Sans", "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
}

.main-header-account-button-wrapper .main-header-account-button-title {
  visibility: hidden;
}
.main-header-account-button-wrapper:hover .main-header-account-button-title {
  visibility: visible;
}

.general-popup-wrapper {
  width: 60%;
}

@media only screen and (max-width: 1000px) {
  .general-popup-wrapper {
    width: 75%;
  }
}
@media only screen and (max-width: 800px) {
  .general-popup-wrapper {
    width: 90%;
  }
}
/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 128px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a, .sidenav .header-tabs {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav .header-tabs:hover {
  color: #f1f1f1;
}

.theme-color-bg {
  background-color: #3F7EE4;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 32px;
  font-size: 24px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a, .sidenav .header-tabs {
    font-size: 18px;
  }
}
strong {
  font-weight: 900;
}

.text-color {
  color: #f0f0f0;
}

.text-color-secondary {
  color: #a9a9a9;
}

body {
  background-color: #242323;
  margin: 0;
  padding: 0;
  border: 0;
}

.body-container-background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  overflow-x: hidden;
}

pre {
  max-height: 600px;
  overflow: scroll;
  font-size: 13px;
}

.body-container-contents {
  background-color: #242323;
  min-height: 100vh;
  overflow-x: hidden;
}
.body-container-contents.colored {
  background: linear-gradient(rgb(220, 218, 211), rgb(214, 212, 208));
  background-color: inherit;
}
@-moz-document url-prefix() {}

.loader {
  border: 6px solid #3F7EE4; /* Light grey */
  border-top: 6px solid #ffffff; /* Blue */
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin-loader 1s linear infinite;
}

.loader-white {
  border: 6px solid rgba(0, 0, 0, 0); /* Light grey */
  border-top: 6px solid #ffffff; /* Blue */
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin-loader 1s linear infinite;
}

@keyframes spin-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.full-width {
  width: 100%;
  display: inline-block;
}

img.full-width {
  justify-content: center;
  align-items: center;
  object-fit: cover;
  min-width: 100%;
  width: auto;
}

.center {
  text-align: center;
}

.theme-color {
  color: #3F7EE4;
}

.link-color {
  color: #03a092;
}

.error-color {
  color: #ed5853;
}

a.none, .none.header-tabs {
  color: inherit;
}
a.none:hover, .none.header-tabs:hover {
  color: inherit;
  text-decoration: none;
}

a.theme-color, .theme-color.header-tabs {
  transition: 0.17s;
}
a.theme-color:hover, .theme-color.header-tabs:hover {
  color: #498adc;
}

a.error-color, .error-color.header-tabs {
  transition: 0.17s;
}
a.error-color:hover, .error-color.header-tabs:hover {
  color: #c51a15;
}

a, .header-tabs > a, .header-tabs {
  color: #03a092;
  text-decoration: none;
  transition: 0.17s;
}
a:hover, .header-tabs:hover {
  color: #03b3a4;
  text-decoration: underline;
}

.link {
  color: #03a092;
  text-decoration: none;
  transition: 0.17s;
}
.link:hover {
  color: #03b3a4;
  text-decoration: underline;
}

.background-color {
  background-color: #242323;
}

.background-gradient {
  background: linear-gradient(#242323, #f1f1f1), url("/mcgo/mcgoHeaderBackground.jpg");
}

.intent-button:hover {
  scale: 1.1;
  transition: 0.17s;
}

.button, .intent-button {
  background-color: #3F7EE4;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #3F7EE4;
  padding: 9px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: 0.17s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.button.error-color, .error-color.intent-button {
  background-color: #ed5853;
  border: 1px solid #ed5853;
}
.button.dark, .dark.intent-button {
  background-color: white;
  border: 1px solid white;
  color: #222;
}
.button.light, .light.intent-button {
  background-color: #222;
  border: 1px solid #222;
  color: white;
}
.button:active, .intent-button:active {
  background-color: #256ac2;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: underline;
}
.button:hover, .intent-button:hover {
  background-color: #5e97e0;
  color: #ffffff;
  transition: 0.17s;
  cursor: hand;
  text-decoration: none;
}
.button:hover.error-color, .intent-button:hover.error-color {
  background-color: transparent;
  color: #ed5853;
}
.button:hover.dark, .intent-button:hover.dark {
  background-color: transparent;
  color: white;
}
.button:hover.light, .intent-button:hover.light {
  background-color: transparent;
  color: #222;
}

.button-disabled {
  background-color: #797979;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #797979;
  padding: 9px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.code {
  font-size: 14px;
}

.button-weak {
  font-size: 15px;
  font-weight: 400;
  background-color: transparent;
  color: #3F7EE4;
  padding: 9px;
  border: 1px solid #3F7EE4;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: 0.17s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.button-weak.error-color {
  border: 1px solid #ed5853;
  color: #ed5853;
}
.button-weak.dark {
  border: 1px solid white;
  color: white;
}
.button-weak.light {
  border: 1px solid #222;
  color: #222;
}
.button-weak:hover {
  color: #3F7EE4;
  background-color: rgba(0, 0, 0, 0.25);
  transition: 0.17s;
  cursor: hand;
  text-decoration: none;
}
.button-weak:hover.error-color {
  color: white;
  background-color: #ed5853;
}
.button-weak:hover.dark {
  background-color: white;
  color: #222;
}
.button-weak:hover.light {
  color: white;
  background-color: #222;
}

.subheader-link {
  color: white;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.75;
}
.subheader-link:hover {
  color: white;
  text-decoration: none;
  font-weight: 800;
  opacity: 1;
}

.main-header-account-button {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  font-size: 18px;
  margin: 4px 0;
}
.main-header-account-button:hover {
  text-decoration: none;
}
.main-header-account-button:hover.dark {
  color: #989898;
}
.main-header-account-button:hover.light {
  color: #585B5B;
}
.main-header-account-button:active.dark {
  color: #565656;
}
.main-header-account-button:active.light {
  color: #989898;
}

.main-header-tab {
  font-weight: 200;
  margin-top: 8px;
  padding: 12px 32px;
  border-radius: 4px 4px 0 0;
  font-family: "Nunito Sans", "Nunito Sans Title", sans-serif;
  font-size: 18px;
  display: inline-block;
  text-decoration: none;
}
.main-header-tab.light {
  background-color: rgba(0, 0, 0, 0.07);
  color: #222;
}
.main-header-tab.light:hover {
  background-color: rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.main-header-tab.light:active {
  background-color: rgba(0, 0, 0, 0.3);
}
.main-header-tab.light.selected {
  background-color: #03a092;
  color: white;
  font-weight: 800;
}
.main-header-tab.dark {
  background-color: rgba(0, 0, 0, 0.15);
  color: white;
}
.main-header-tab.dark:hover {
  background-color: rgba(0, 0, 0, 0.33);
  text-decoration: none;
}
.main-header-tab.dark:active {
  background-color: rgba(0, 0, 0, 0.67);
}
.main-header-tab.dark.selected {
  background-color: #03a092;
  color: white;
  font-weight: 800;
}

.header-background {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  width: 100%;
  height: 12vh;
  min-height: 120px;
}

.header-behind {
  height: 12vh;
  min-height: 120px;
}

@media only screen and (max-width: 800px) {
  .header-background {
    height: 15vh;
    min-height: 150px;
  }
  .header-behind {
    height: 15vh;
    min-height: 150px;
  }
  .header {
    padding: 32px 16px 0 32px;
  }
}
.contents {
  margin: 8px;
}

.valign {
  vertical-align: center;
  height: 100%;
}

.header-navigation-container {
  text-align: center;
  margin: 0;
  padding: 0;
  width: 89%;
  background-color: white;
  border-radius: 8px;
}

.header-info {
  width: auto;
  padding: 0;
  font-size: 16px;
  white-space: nowrap;
}
.header-info > a, .header-info > .header-tabs {
  color: inherit;
  font-size: inherit;
}
.header-info > a:hover, .header-info > .header-tabs:hover {
  text-decoration: none;
}

.header-navigation {
  margin: 0;
  display: inline-block;
  text-align: left;
  width: auto;
  padding: 0;
  font-size: 16px;
}
.header-navigation > a, .header-navigation > .header-tabs {
  color: inherit;
  font-size: inherit;
}
.header-navigation > a:hover, .header-navigation > .header-tabs:hover {
  text-decoration: none;
}

.header-tabs {
  font-weight: 100;
  position: absolute;
  bottom: 0;
}
.header-tabs .header-tab-selected {
  font-weight: 800;
}
.header-tabs > a:hover, .header-tabs > .header-tabs:hover {
  text-decoration: none;
}

.vertically-centered {
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.flex-container-centered, .resource-card, .header-navigation-container, .header-tabs {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-size: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  min-width: 400px;
}
.flex-container-centered .flex1, .resource-card .flex1, .header-navigation-container .flex1, .header-tabs .flex1, .flex-container-centered .header-info, .resource-card .header-info, .header-navigation-container .header-info, .header-tabs .header-info {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  padding: 12px;
}
.flex-container-centered .flex2, .resource-card .flex2, .header-navigation-container .flex2, .header-tabs .flex2 {
  flex: 2;
  -ms-flex: 2;
  -webkit-flex: 2;
  padding: 12px;
}
.flex-container-centered .flex3, .resource-card .flex3, .header-navigation-container .flex3, .header-tabs .flex3 {
  flex: 3;
  -ms-flex: 3;
  -webkit-flex: 3;
  padding: 12px;
}
.flex-container-centered .flex4, .resource-card .flex4, .header-navigation-container .flex4, .header-tabs .flex4 {
  flex: 4;
  -ms-flex: 4;
  -webkit-flex: 4;
  padding: 12px;
}
.flex-container-centered .flex5, .resource-card .flex5, .header-navigation-container .flex5, .header-tabs .flex5 {
  flex: 5;
  -ms-flex: 5;
  -webkit-flex: 5;
  padding: 12px;
}
.flex-container-centered .flex6, .resource-card .flex6, .header-navigation-container .flex6, .header-tabs .flex6 {
  flex: 6;
  -ms-flex: 6;
  -webkit-flex: 6;
  padding: 12px;
}
.flex-container-centered .flex7, .resource-card .flex7, .header-navigation-container .flex7, .header-tabs .flex7 {
  flex: 7;
  -ms-flex: 7;
  -webkit-flex: 7;
  padding: 12px;
}
.flex-container-centered .flex8, .resource-card .flex8, .header-navigation-container .flex8, .header-tabs .flex8 {
  flex: 8;
  -ms-flex: 8;
  -webkit-flex: 8;
  padding: 12px;
}
.flex-container-centered .flex9, .resource-card .flex9, .header-navigation-container .flex9, .header-tabs .flex9 {
  flex: 9;
  -ms-flex: 9;
  -webkit-flex: 9;
  padding: 12px;
}
.flex-container-centered .flex10, .resource-card .flex10, .header-navigation-container .flex10, .header-tabs .flex10 {
  flex: 10;
  -ms-flex: 10;
  -webkit-flex: 10;
  padding: 12px;
}
.flex-container-centered .flex11, .resource-card .flex11, .header-navigation-container .flex11, .header-tabs .flex11 {
  flex: 11;
  -ms-flex: 11;
  -webkit-flex: 11;
  padding: 12px;
}
.flex-container-centered .flex12, .resource-card .flex12, .header-navigation-container .flex12, .header-tabs .flex12, .flex-container-centered .header-navigation, .resource-card .header-navigation, .header-navigation-container .header-navigation, .header-tabs .header-navigation {
  flex: 12;
  -ms-flex: 12;
  -webkit-flex: 12;
  padding: 12px;
}
.flex-container-centered .hr, .resource-card .hr, .header-navigation-container .hr, .header-tabs .hr {
  border-left: 1px solid #f0f0f0;
  height: 50%;
  left: 0;
  top: 25%;
}

.no-padding {
  display: flex;
  padding: 0;
  margin: 0;
}

.list-center {
  margin-right: auto;
  margin-left: auto;
  display: table;
}
.list-center ul {
  text-align: left;
}

.flex-center-align {
  align-items: center;
  -webkit-align-items: center;
}

hr {
  margin-left: 12px;
  margin-right: 12px;
  border: 0.5px solid #676767;
}

.dropdown-button {
  padding: 4px;
  background-color: #3F7EE4;
  color: white;
  border: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 16px;
  margin: 0;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown:hover {
  transition: 0.17s;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropdown-button {
  background-color: #498adc;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(254, 254, 254, 0.92);
  width: 100%;
  z-index: 1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.dropdown-content a, .dropdown-content .header-tabs {
  color: #f0f0f0;
  padding: 4px 6px;
  text-decoration: none;
  display: block;
  font-size: inherit;
}
.dropdown-content a.selected, .dropdown-content .selected.header-tabs {
  font-weight: 600;
}
.dropdown-content a:hover, .dropdown-content .header-tabs:hover {
  background-color: rgba(241, 241, 241, 0.92);
}
.dropdown-content a:hover.last, .dropdown-content .header-tabs:hover.last {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.profile-photo-wrapper .profile-photo-still {
  visibility: visible;
}
.profile-photo-wrapper .profile-photo-animated {
  visibility: hidden;
  display: none;
}
.profile-photo-wrapper:hover .profile-photo-still {
  visibility: hidden;
  display: none;
}
.profile-photo-wrapper:hover .profile-photo-animated {
  visibility: visible;
  display: inherit;
}

.info {
  color: #919191;
  font-size: 12px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  width: 75%;
  display: inline-block;
}

.checkbox-input {
  color: #a9a9a9;
  font-size: 14px;
  transition: 0.17s;
}
.checkbox-input label input {
  visibility: hidden; /* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
.checkbox-input label span { /* <-- Style the artificial checkbox */
  height: 16px;
  width: 16px;
  border: 1px solid #555555;
  background-color: #ffffff;
  color: #ffffff;
  font-size: 12px;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
}
.checkbox-input label [type=checkbox]:checked + span { /* <-- Style its checked state */
  background-color: #3F7EE4;
  color: #ffffff;
  border: 1px solid #3F7EE4;
}
.checkbox-input label [type=radio]:checked + span { /* <-- Style its checked state */
  background-color: #3F7EE4;
  color: #ffffff;
  border: 1px solid #3F7EE4;
}

.form-wrapper {
  display: block;
  text-align: center;
  width: 100%;
}

form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
form .title {
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-left: 2px;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 14px;
}
form .icon-input {
  font-size: 16px;
  margin-top: 4px;
  border-bottom: 3px solid #676767;
  margin-bottom: 4px;
  text-align: left;
  background-color: inherit;
  color: #777777;
  display: inline-flex;
  width: 100%;
  transition: 0.17s;
}
form .icon-input.error {
  color: #ed5853;
  border-bottom: 3px solid #ed5853;
}
form .icon-input:focus-within {
  border-bottom: 3px solid #d0d0d0;
  color: #d0d0d0;
}
form .icon-input .icon {
  font-size: 18px;
  padding: 0 6px;
  vertical-align: center;
  align-self: center;
}
form .icon-input input {
  background-color: inherit;
  padding-bottom: 4px;
  color: #f0f0f0;
  border: none;
  font-size: 16px;
  outline: none;
  flex-grow: 1;
}
form .input-none {
  padding: inherit;
  font-size: inherit;
  border-radius: inherit;
  border: none;
  margin-top: inherit;
  margin-bottom: inherit;
  text-align: left;
  color: #f0f0f0;
}
form .box-description {
  margin-left: 4px;
  margin-right: 12px;
}
form .radio {
  padding: 8px;
}
form .submit {
  color: #ffffff;
  background-color: #3F7EE4;
  border-radius: 24px;
  padding: 12px;
  font-size: 20px;
  text-decoration: none;
  border: 0;
}
form .submit:hover {
  background-color: #242323;
  padding: 11px;
  color: #3F7EE4;
  border: 1px solid #3F7EE4;
}
form textarea {
  border-radius: 2px;
  border: 1px solid #bbb;
  padding: 8px;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 14px;
  width: 96%;
  max-width: 100%;
  resize: vertical;
  height: 150px;
  max-height: 600px;
}
form textarea:focus-within {
  border-bottom: 1px solid #d0d0d0;
  color: #d0d0d0;
}

.no-glow:focus {
  outline: none;
  outline-color: transparent;
  outline-style: none;
}

.input-title, .title {
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-bottom: 6px;
  margin-left: 2px;
  margin-top: 16px;
  font-size: 14px;
}

.input-error-message {
  margin-top: 2px;
}

.icon-input {
  font-size: 16px;
  border-bottom: 3px solid #676767;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  background-color: inherit;
  color: #777777;
  display: inline-flex;
  width: 100%;
  transition: 0.17s;
}
.icon-input.error {
  border-bottom: 3px solid #ed5853;
}
.icon-input.error .icon {
  color: #ed5853;
}
.icon-input.titled {
  margin-top: 0;
}
.icon-input:focus-within {
  border-bottom: 3px solid #d0d0d0;
  color: #d0d0d0;
}
.icon-input .icon {
  font-size: 16px;
  padding: 0 6px;
  vertical-align: center;
  align-self: center;
}
.icon-input .input-inner {
  background-color: inherit;
  padding-bottom: 4px;
  color: #f0f0f0;
  border: none;
  font-size: 16px;
  outline: none;
  flex-grow: 1;
}

.error {
  color: #ed5853;
}

.response-message {
  font-size: 12px;
}

.input {
  padding: 4px;
  font-size: 18px;
  border-radius: 8px;
  border: 0.5px solid #676767;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  background-color: #444445;
  color: #f0f0f0;
  display: inline-block;
}

.input-none {
  padding: inherit;
  font-size: inherit;
  border-radius: inherit;
  border: none;
  margin-top: inherit;
  margin-bottom: inherit;
  text-align: left;
  color: #f0f0f0;
}

.box-description {
  margin-left: 4px;
  margin-right: 12px;
}

.radio {
  padding: 8px;
}

.submit {
  color: #ffffff;
  background-color: #3F7EE4;
  border-radius: 24px;
  padding: 12px;
  font-size: 20px;
  text-decoration: none;
  border: 0;
}
.submit:hover {
  background-color: #242323;
  padding: 11px;
  color: #3F7EE4;
  border: 1px solid #3F7EE4;
}

textarea.input {
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 18px;
  width: 60%;
  min-width: 60%;
  height: 250px;
  min-height: 175px;
  max-height: 400px;
  background-color: #444445;
  color: #f0f0f0;
}

select {
  display: block;
  font-size: 16px;
  color: #444;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-bottom: 3px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.08);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

  */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #fff 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 0.7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 0.65em auto, 100%;
  font-weight: 400;
  font-family: inherit;
}
select option {
  font-weight: 400;
  font-family: inherit;
}

/* Hide arrow icon in IE browsers */
select::-ms-expand {
  display: none;
}

/* Hover style */
select:hover {
  border-color: #888;
}

/* Focus style */
select:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

.sceditor-button-dropdown div {
  background-image: url("https://polymart.org/style/fontawesome/icon.svg?name=eye-slash&type=regular&fill=white");
  background-position: center;
}

.bbcodeFontSize1 {
  font-size: 10px;
}

.bbcodeFontSize2 {
  font-size: 13px;
}

.bbcodeFontSize3 {
  font-size: 15px;
}

.bbcodeFontSize4 {
  font-size: 17px;
}

.bbcodeFontSize5 {
  font-size: 19px;
}

.bbcodeFontSize6 {
  font-size: 22px;
}

.bbcodeFontSize7 {
  font-size: 24px;
}

.bbcodeFontSize8 {
  font-size: 28px;
}

.code {
  font-size: 14px;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre;
}

.spoiler {
  margin-top: 4px;
  border: 0.5px solid #444444;
  border-radius: 12px;
  max-width: 100%;
}
.spoiler .spoiler-title {
  background-color: #333333;
  padding: 12px;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.17s;
}
.spoiler .spoiler-title:hover {
  background-color: #676767;
}
.spoiler .spoiler-title.expanded {
  border-radius: 12px 12px 0 0;
}
.spoiler .spoiler-title .spoiler-arrow {
  transform: rotate(0deg);
  transition: all 0.4s ease;
}
.spoiler .spoiler-title .spoiler-arrow.expanded {
  transform: rotate(-180deg);
}
.spoiler .spoiler-contents {
  border: 2px solid #333333;
  border-radius: 0 0 12px 12px;
  padding: 8px;
}

.quote, blockquote {
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  border-left: 6px solid #777777;
}

.big-resource-card {
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  background-color: #262626;
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  color: inherit;
  transition: 0.17s;
}
.big-resource-card:hover {
  background-color: #2c2c2c;
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.2);
}

.card, .resource-card {
  background-color: rgba(55, 55, 55, 0.6);
  border-radius: 6px;
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.2);
  color: inherit;
  transition: 0.17s;
}
.card:hover, .resource-card:hover {
  background-color: rgba(55, 55, 55, 0.9);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.3);
}

.card-nohover {
  background-color: rgba(55, 55, 55, 0.667);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: inherit;
}

.resource-card {
  margin: 0 0 10px;
  width: 100%;
}

.header-wrapper {
  margin: 0;
  margin-bottom: 10px;
  width: 100%;
  background-color: rgba(55, 55, 55, 0.667);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: inherit;
}

.header-button {
  font-weight: 200;
}
.header-button.selected {
  font-weight: 600;
  color: #f0f0f0;
  text-decoration: none;
}

.header-button-prominent {
  background-color: #eee;
  color: #111;
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #eee;
}
.header-button-prominent:hover {
  color: #eee;
  background-color: inherit;
  text-decoration: none;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-container .tooltip-dismiss {
  font-size: 11px;
  width: 20px;
  color: white;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  left: 50px;
  top: -78px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 2;
}
.tooltip-container .tooltip-text {
  font-size: 14px;
  visibility: hidden;
  width: 120px;
  background-color: rgba(21, 20, 21, 0.8);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 4px;
  left: -69px;
  right: 0;
  top: -72px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.tooltip-container .tooltip-text:after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: rgba(21, 20, 21, 0.8) transparent transparent transparent;
}
.tooltip-container.visible .tooltip-text {
  visibility: visible;
}
.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

.category-button {
  font-size: 12px;
  background-color: transparent;
  color: #03a092;
  padding: 3px 5px;
  border: 1px solid #03a092;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin: 2px;
}
.category-button.theme-color {
  color: #3F7EE4;
  border: 1px solid #3F7EE4;
}
.category-button:hover {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: hand;
  text-decoration: none;
}

.category-button-selected {
  font-size: 12px;
  color: #ffffff;
  background-color: #03a092;
  padding: 3px 5px;
  border: 1px solid #03a092;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin: 2px;
}
.category-button-selected.theme-color {
  background-color: #3F7EE4;
  border: 1px solid #3F7EE4;
}
.category-button-selected:hover {
  color: #ffffff;
  background-color: #03c2c3;
  transition: 0.17s;
  text-decoration: none;
}
.category-button-selected:hover.theme-color {
  color: #ffffff;
  background-color: #5e97e0;
}

.container {
  border-radius: 16px;
  margin: 32px;
}

.title {
  color: #3F7EE4;
  font-family: "Ubuntu", sans-serif;
  font-size: 96px;
  padding: 7.5%;
  text-align: center;
  font-weight: 800;
  margin-bottom: 36px;
}

.segment {
  color: #3F7EE4;
  font-family: "Ubuntu", sans-serif;
  font-size: 40px;
  padding: 7% 7% 2% 7%;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0;
}

.contents {
  color: #f0f0f0;
  font-family: "Ubuntu", sans-serif;
  font-size: 20px;
  text-align: left;
}

ul {
  text-align: left;
}

/*# sourceMappingURL=simple.css.map */
.theme-color-global{color: #4487db}