@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	outline:none;
	background:transparent;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	font-size:100%
}

html,
body {
  height: 100%;
}

header, section, footer, aside, nav, main, article, figure {
	display:block;
}

#__next {
	height: 100%;
}

body {
	font-family: 'Lato', sans-serif !important;
	font-size:14px;
	line-height: 17px;
	text-align:left;
}

.main-container {
	display: flex;
	flex-direction: row;
	height: 100%;
}

.left-container {
	padding: 35px 72px;
	width: 550px;
	min-width: 432px;
	overflow: auto;
}

.top-nav-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
	flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.top-nav-container.desktop-back {
	margin-bottom: 0px;
}

.middle-nav-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
	flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.star-media-logo,
.star-media-logo-fp {
	width: 200px;
	height: 90px;

	background-color: transparent;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: left;
  flex-basis: 50%;
  margin-top: 30px;
}

.help-text {
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}

.form-inputs-container {
	padding: 0.5rem 0;
}

.clear {
	clear: both;
}

.lato-light {
  font-weight: 300;
}

.lato-regular {
  font-weight: 400;
}

.lato-bold {
  font-weight: 700;
}

.modal-footer.btn-layout {
  justify-content: flex-start;
}

.left-container a {
	font-weight: 400;
	color: #DA2229;
	text-decoration: underline;
}

.left-container a.for-default {
  font-weight: 700;
  margin-top: 30px;
  text-decoration: none;
}

.left-container a.for-default:hover,
.left-container a.for-default:active {
	font-weight: 700;
	color: #DA2229;
	text-decoration: underline;
}

.left-container a:hover,
.left-container a:active {
	font-weight: 400;
	color: #DA2229;
	text-decoration: underline;
}

.spacer-social-media {
	padding: 12px;
}

.right-container {
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
}

.banner-content {
	background: rgba(0,0,0,0.60);
	padding: 8px 24px;
	color: #FFFFFF;
	width: 400px;
	height: 180px;
	margin: 48px;
}

.banner-content p {
	margin: 8px 0;
	font-weight: 100;
}

.banner-content p:first-child {
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
}

/*Content Start */
.content-bar {
  font-weight: 400;
  color: #242424;
  font-size: 13px !important;
}

.content-bar-title h5 {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #242424;
  margin-bottom: 4px;
}

.content-bar-desc {
  margin-bottom: 8px;
}

.content-bar-desc > div > p > a,
.content-bar-desc > div > p > a:hover,
.content-bar-desc > div > p > a:active {
  font-weight: 700;
  color: #da2229;
  text-decoration: none;
}

a.link-light,
a.link-light:hover,
a.link-light:active {
  font-weight: 300;
}

.content-bar-desc > div > p > span {
  font-weight: 700;
  color: #da2229;
}

/*.portal-lists {
	margin-top: 8px;
}*/

/*@media (max-width: 768px) {
	.hide {
		display: none;
	}
}*/
/*Content End*/

/*Tabs Start*/
.tabs .tab {
  margin-top: 8px;
  display: inline-block;
  /*padding: 10px;*/
  /*border-bottom: 2px solid rgba(0,0,0,0.2);*/
  /*border-radius: 10px 10px 0 0;*/
  cursor: pointer;
  color: #e6e6e6;
  font-weight: 700;
  padding-left: 8px;
}

.tabs .tab:first-child {
  padding-left: 0px;
  /*padding-right: 8px;
    border-right: 1px solid black;*/
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.tabs .tab p {
  padding-bottom: 2px;
}

.tab-divider {
  border-right: 1px solid #e6e6e6;
  padding-bottom: 12px;
  margin-bottom: 3px;
}

.tab-divider-spacing {
  margin-right: 8px;
}

.tabs .tab:hover p {
  background: none;
  border-bottom: 2px solid #da2229;
  color: #da2229;
}

.tabs .tab.active p {
  background: none;
  border-bottom: 2px solid #da2229;
  color: #da2229;
}

.tabs .tab p:first-child {
  /*margin-right: 8px;*/
}

.tabs .content {
  /*padding: 20px;*/
  /*color: rgba(0,0,0,0.6);*/
  /*background: rgba(255,255,255,0.2);*/
}

.tab-nav {
  display: flex;
  flex-direction: row;
}
/*Tabs End*/

/*LoginForm Start*/
.loginform__input-text {
  /*padding: 0;*/
  /*margin: 0;*/
}

.loginform__input-text input {
  padding: 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #b6b6b6;
  font-weight: 300;
  line-height: 17px;
  font-size: 14px;
}

.loginform__input-text input::placeholder {
  color: #b6b6b6;
}

.input-icon {
  float: right;
  margin-top: -30px;
  position: relative;
  cursor: pointer;
  z-index: 2;
}

.eye-show {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  width: 24px;
  height: 24px;
}

.eye-hide {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  width: 24px;
  height: 24px;
}

.loginform__btn-login {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  flex-direction: row;
}

.loginform__btn-login.proceed {
  margin-top: 15px;
}

.btn-alert {
  margin: auto;
  background-color: #da2229;
  border: none;
  border-radius: 0;
  font-weight: 400;
  line-height: 18px;
  font-size: 16px;
  color: #ffffff;
  padding: 8px 25px;
}

.btn-login {
  margin-right: auto;
  background-color: #e6e6e6;
  border: none;
  border-radius: 0;
  font-weight: 400;
  line-height: 18px;
  font-size: 16px;
  color: #ffffff;
  padding: 8px 25px;
}

.btn-login.disabled {
  border: none;
  background-color: #e6e6e6;
  color: #ffffff;
  opacity: 1;
  /* margin-top: 20px;
  padding: 8px 25px; */
}

.loginform__input-text input:focus {
  box-shadow: none;
  border-color: #b6b6b6;
}

.btn-login.enabled,
.btn-login.enabled:hover {
  background-color: #da2229;
}

.mobile-inputs-container {
  display: flex;
  flex-direction: row;

  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.mobile-inputs-container > .form-group {
  margin-bottom: 0 !important;
}

.dropdown-container {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #b6b6b6;
  padding-top: 8px;
  height: calc(2rem + 2px);
  width: 120px;
  margin-right: 8px;
}

.dropdown-country-code {
  display: flex;
}

.dropdown-selected-country-code {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  max-width: inherit;
  overflow: hidden;
}

.dropdown-selected-country-code::after {
  margin: 0;
  margin-top: 3px;
  margin-right: 7px;
  border-top-color: #727272;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 14px !important;
}

.caret {
  margin-top: 7px;
  margin-right: 7px;
  position: relative;
}

.caret:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 5px solid #9b9696;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.caret:after {
  content: '';
  position: absolute;
  left: 1px;
  top: 0;
  border-top: 4px solid #847e7e;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

select:not(.react-datepicker__month-select):not(.react-datepicker__year-select) {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #b6b6b6 !important;
  width: 61px !important;
  padding: 0 !important;
}

.react-datepicker-wrapper,
.react-datepicker__input-container {
  width: 100% !important;
}

.react-datepicker__input-container > input {
  height: calc(1.5rem + 2px) !important;
}

.select-caller {
  margin-right: 8px;
}

.select-caller select:focus {
  box-shadow: none;
  border-color: #b6b6b6;
}

.mobile-inputs {
  flex-grow: 1;
}

.grow-input {
  flex-grow: 1;
}

.form-control {
  height: calc(2rem + 2px);
}

.btn-spacing-top {
  margin-top: 16px;
}

/* ForgotPassword Page */
/*@media (max-width: 768px) {
	.star-media-logo {
		display: none;
	}

	.back-arrow {

	}
}*/

/*Error message*/
label.error {
  color: #da2229 !important;
}

div.error {
  color: #da2229 !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 700;
}

input.error {
  color: #6b6b6b !important;
  border-bottom: 1px solid #da2229 !important;
}

input.error::placeholder {
  color: #6b6b6b !important;
}

p.error {
  color: #da2229 !important;
}
/*LoginForm End*/

/*SeparateLine Start*/
.separateline {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.separateline-text {
  margin-top: 16px;
  margin-left: 10px;
  margin-bottom: 16px;
  margin-right: 10px;
  padding-bottom: 1px;
  font-size: 12px;
  line-height: 15px;
  color:  #242424 !important;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.separateline-separator {
  border-bottom: 1px solid #e6e6e6;
  width: 100%;
}

/*.separateline-separator {
	background: #E6E6E6;
	width: 100%;
	padding-bottom: 1px;
	margin-top: 2px;
}*/

.red {
  color: #da2229;
}

.black {
  border-bottom: 1px solid #242424;
}

.type-b {
  margin-top: 0;
  margin-left: 10px;
  margin-bottom: 0;
  margin-right: 10px;
}

.type-c {
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
  margin-right: 10px;
}
/*SeparateLine End*/

/*SocialMedia Start*/
.socialmedia__container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.socialmedia__content {
  color: #242424;
  margin-right: auto;
}

.socialmedia__lists {
  margin-top: 10px;
}

.socialmedia__lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.socialmedia__lists li {
  padding-left: 8px;
}

.socialmedia__lists li:first-child {
  padding-left: 0px;
}

.socialmedia__lists-btn {
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: auto 85%;
  background-position: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.socialmedia__lists-btn-google {
  border: 1px solid #ccc;
}

.socialmedia__lists-btn-fb {
  border: 1px solid #3b5998;
}

.socialmedia__lists-btn-apple {
    border: 1px solid #ccc;
}

.socialmedia__landing {
  margin-top: -1px;
}
/*SocialMedia End*/

/*LoginFooter Start*/
.loginfooter {
  display: flex;
  flex-direction: row;
  justify-content: left;
  padding: 0;
}

.spacing-top {
  margin-top: 16px;
}

.spacing-bottom-zero {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}
.spacing-zero {
  margin-top: 0;
  margin-bottom: 0;
}

.justify-left {
  justify-content: left;
}

@media (min-width: 769px) {
  .loginfooter {
    justify-content: left;
    /* padding-bottom: 24px; */
  }
}
/*LoginFooter End*/

/*PortalList Start*/
.portal-main-container {
  width: 288px;
  clear: both;
  overflow: hidden;
}
.portal-container {
  width: 576px;
}
.portal-lists-container {
  margin-bottom: 4px;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 0.3s ease-out;
  float: left;
  height: 114px;
}
.portal-lists-container.slided {
  transform: translate3d(-288px, 0px, 0px);
}
.portal-lists {
  display: inline-flex;
  flex-wrap: wrap;
  min-height: 114px;
  max-width: 288px;
  float: left;
}
.portal {
  max-height: 57px;
  width: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  cursor: pointer;
}
.portal > a {
  width: 100%;
  height: 100%;
}
.pagination-dots {
  border-radius: 100%;
  background-color: #b6b6b6;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  cursor: pointer;
}
.pagination-dots.active {
  background-color: #da2229;
}
.portal-lists-pagination {
  max-width: 288px;
  display: flex;
  justify-content: center;
  clear: both;
}

.swiper-container {
  margin-bottom: -20px !important;
  display: none;
}

.swiper-pagination {
  bottom: 0px !important;
}

.disclaimer {
  font-size: 13px !important;
  font-weight: 400;
}

@media (max-width: 768px) {
  .portal-main-container {
    display: none;
  }
}
/*PortalList End*/

/*CustomCheckbox Start*/
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  border-color: red !important;
  background-color: red !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}

.custom-checkbox .custom-control-label::before {
  position: absolute;
  top: 10px !important;
  left: -1.47rem !important;
  display: block;
  width: 1.125rem !important;
  height: 1.125rem !important;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #b6b6b6 solid 2px;
  border-radius: 2px !important;
  margin: 3px;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
  box-shadow: none;
  border: #b6b6b6 solid 2px;
  background: none;
}

.custom-checkbox .custom-control-label::after {
  position: absolute;
  top: 10px !important;
  left: -1.47rem !important;
  display: block;
  width: 1.125rem !important;
  height: 1.125rem !important;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  margin: 3px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.8 4-2-1.66L0 4 2.8 6.25 7.5 1.5z'/%3e%3c/svg%3e") !important;
  /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M14,17.414l-4.707-4.707c-0.391-0.391-0.391-1.023,0-1.414L14,6.586L15.414,8l-4,4l4,4L14,17.414z'/%3e%3c/svg%3e") !important;*/
  background-size: 80% !important;
}

.checkbox-inputs-container > div {
  font-weight: 400;
  line-height: 17px;
  color: #242424;
  font-size: 13px !important;
}

.checkbox-input-normal > div {
  font-weight: 400;
  line-height: 43px;
  color: #242424;
  font-size: 13px !important;
}

.checkbox-inputs-container > div:not(:last-child) {
  margin-bottom: 16px;
}

.checkbox-inputs-container > div > label {
  padding-left: 16px;
}

.checkbox-input-normal > div > label {
  padding-left: 10px;
}
/*CustomCheckbox End*/

/*ConfirmProfileForm Start*/
.profile-container {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.profile-container > div {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: left;
  font-size: 14px !important;
  background: none;
  color: #242424;
}

.profile-container > div > div:nth-child(1) {
  flex-basis: 100%;
}

.profile-container > div > div:nth-child(2) {
  flex-basis: 47.225%;
}

.profile-container > div > div:nth-child(3) {
  flex-basis: 5.55%;
}

.profile-container > div > div:nth-child(4) {
  flex-basis: 47.225%;
}

.profile-container > div > div:nth-child(5) {
  flex-basis: 47.225%;
}

.profile-container > div > div:nth-child(6) {
  flex-basis: 5.55%;
}

.profile-container > div > div:nth-child(7) {
  flex-basis: 47.225%;
}

.profile-container > div > div > label {
  color: #242424;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  float: left;
}

.profile-container > div > div > div.clear {
  clear: both;
}

.profile-container > div > div > div > input {
  height: calc(1.5rem + 2px) !important;
}

.mobile-inputs-container-small {
  display: flex;
  flex-direction: row;
}

.mobile-inputs-container-small > .dropdown-container {
  padding-top: 4px;
  margin-right: 4px;
  height: calc(1.5rem + 2px) !important;
  width: 39px;
  font-weight: 300;
  flex-basis: 38% !important;
}

.mobile-inputs-container-small > .mobile-inputs {
  flex-basis: 58% !important;
}

.mobile-inputs-container-small > div > input {
  height: calc(1.5rem + 2px) !important;
}
/*ConfirmProfileForm End*/

/*AccountSelectionForm Start*/
.custom-radio-container {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.custom-radio-container > button {
  border-radius: 0;
  border: 1px solid #e6e6e6;
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  padding: 8px 16px;
  text-align: left;
  font-size: 14px !important;
  background: none;
  color: #242424;
  margin-bottom: 8px;
}

.custom-radio-container > button:hover,
.custom-radio-container > button:active,
.custom-radio-container > button.active {
  box-shadow: none !important;
  border: 2px solid #da2229 !important;
  background: none !important;
  color: #242424 !important;
}

.custom-radio-container > button:focus {
  /*box-shadow: 0 0 0 0.2rem rgba(218,34,41,0.5);*/
  box-shadow: none;
}

.custom-radio-container > button > div {
  margin-bottom: 8px;
}

.custom-radio-container > button > div:not(:first-child):not(:last-child) {
  margin-bottom: 16px;
}

/*.custom-radio-container > button > div:first-child, 
.custom-radio-container > button > div:last-child {
    margin-bottom: 8px;
}*/

/* Banner div */
.custom-radio-container > button > div:nth-child(1) {
  flex-basis: 100%;
}

.custom-radio-container > button > div:nth-child(2) {
  flex-basis: 50%;
}

.custom-radio-container > button > div:nth-child(3) {
  flex-basis: 50%;
}

.custom-radio-container > button > div:nth-child(4) {
  flex-basis: 100%;
}

.custom-radio-container > button > div:nth-child(5) {
  flex-basis: 100%;
}

.custom-radio-container > button > div.portal-logo {
  width: 120px;
  height: 44px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left;
}

.custom-radio-container > button > div > h5 {
  color: #242424;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

.custom-radio-container > button > div > p {
  color: #242424;
  font-size: 14px;
  font-weight: 300;
  line-height: 17px;
}
/*AccountSelectionForm End*/

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none; 
}

/*PortalListFullView Start*/
.fullview__portal-main-container {
  width: 288px;
  clear: both;
  overflow: hidden;
}
.fullview__portal-container {
  width: 288px;
}
.fullview__portal-lists-container {
  /*transform: translate3d(0px,0px,0px);*/
  /*transition: transform 0.3s ease-out;*/
  float: left;
  height: 228px;
}
.fullview__portal-lists {
  display: inline-flex;
  flex-wrap: wrap;
  min-height: 100%;
  max-width: 288px;
  float: left;
}
.fullview__portal {
  max-height: 57px;
  width: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  /*background-image: url(/static/images/logo/logo_portal_988.png);*/
  cursor: pointer;
}
.fullview__portal > a {
  width: 100%;
  height: 100%;
}
.fullview__portal-lists-pagination {
  max-width: 288px;
  display: flex;
  justify-content: center;
  clear: both;
}
/*PortalListFullView End*/

.back-site-force {
  display: block;
}

@media (min-width: 769px) {
	.close-site {
		display: none;
	}

	.ios-back {
		display: none;
  }
  
  .back-site {
    display: block;
  }
}

@media (max-width: 768px) {
	.visibility {
		display: none;
  }
  
  .back-site {
    display: none;
  }

	.top-nav-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }


	.star-media-logo {
		width: 107px;
		height: 48px;
		margin-top: 0px;
  }
  
  .star-media-logo.for-default {
    margin-top: 30px;
  }

	.star-media-logo-fp {
		display: none;
	}

	.close-site,
	.close-site:hover {
		width: 24px;
		height: 24px;
		color: #DA2229;
		opacity: 1 !important;
		font-weight: 400;
	}

	.ios-back {
		width: 24px;
		height: 24px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -70 600 600'%3e%3cpath fill='%23da2229' d='M145,238l215-215c5-5,5-13,0-19s-13-5-19,0l-225,225c-5,5-5,13,0,19l225,225   c2,2,6,4,9,4s6.9-1,9-4c5-5,5-13,0-19L145,238z'/%3e%3c/svg%3e") !important;
		cursor: pointer;
		background-repeat: no-repeat;
	}

	.main-container {
		height: 100%;
	}

	.left-container {
		padding: 16px;
		flex-grow: 1;
		width: auto;
		min-width: auto;
	}

	.spacer-social-media {
		padding: 12px;
	}

	.right-container {
		display: none;
	}
}

@media (max-width: 1009px) {
	.left-container {
		/*padding: 16px;*/
	}
}



/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.loading_hide{
    display: none;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  /*font: 0/0 a;*/
  font-family: 'Lato', sans-serif !important;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.5) -1.5em 0 0 0, rgba(255, 255, 255, 0.5) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}