/*
 * @File name: Screen.css
 * @version: 2015-11-4
 * @todo: style login page
 * 
 */
 
@charset "UTF-8";
/*
	===================
	Base CSS
	===================

*/
*,* * {
	margin:0;
	padding:0;
	font-size: 1em;
	position:relative;
	box-sizing: border-box;
}

h2, 
.login-form h2, 
.login-form-like h2,
a{
	color: #2b628d;
}

body {
	font-size: 62.5%;
	height: 100%;
	width: 100%;
	color: #2b628d;
	font-family: "Effra", sans-serif;
}

h1 {
  font-size:3.3em;
  margin:.5em;
}
h2{
	font-size: 3.3em;
	margin-bottom: 17px;
	font-weight: 500;
}

h3{
	font-size: 2.3em;
	color: #7a90a1;
	font-weight: 500;
}

p{
	font-size: 1.6em;
	margin:1em 1em;
	font-weight: 100;
}
ol {
	font-size:1.3em;
	font-weight:100;
}
ol ol {
	font-size:1em;
}
ul li{
	font-size:1.3em;
	font-weight:100;
}
/*
ol, ol li, ul, ul li {
  margin:1em 1em;
}*/

input {
	width: 100%;
	padding: 20px;
	color:#847e7e;
	max-width: 800px;
}

.clear{
	clear: both;
	margin:0;
}

.center{
	text-align: center;
}
/*
.logo > a {
  padding-top:1em;
  font-family:ClarendonURW-Reg,serif;
  font-size:18pt;
  vertical-align:middle;
}*/

.logo > a img {
  vertical-align:top;
}

img.screenshot {
  display:inline-block;
  text-align:center;
  padding:1ex 1ex;
  border:1px solid lightgray;
  margin:1ex 2ex;
}

/*
	============================
	Override CHADIS original CSS
	============================
*/
div#content{
	margin:0;
}

div.header{
	background-color: #2b628d;
	height: 91px;
}

div.copyright, 
div#copyright{
  padding:1ex;
  margin:0;
  background-color:#2b628d;
  color:white;
  text-align: center;
}

div#agreementContents {
  margin:1em 1em 1em 1em;
}

div#agreementContents, div#agreementContents p {
  font-size:small;
  margin-top:1em;
  margin-bottom:1em;
}

div#agreementContents ol, div#agreementContents ul {
   margin-left:2em;
}

.login-form h2, 
.login-form-like h2{
	border:none;
	}

div.field {
    margin: 20px 0 0;
}

.field .field {
    margin-left: auto;
    margin-top: auto;
}

.login-form {
    background-color: #fff;
    display: block;
    font-size: inherit;
    margin: 0 auto;
    max-width: 800px;
    padding: 37px 0;
}
 
.login-form-like {
    background-color: #fff;
    display: inline-block;
    float:left;
    font-size: inherit;
    margin: 0 auto;
    min-width: 90%;
    max-width: 90%;
    padding: 0 120px;
}

.login-form-like-fullwidth {
    padding:0 50px;
    clear:both;
    display:block;
	max-width: 1200px;
	margin: 0 auto;
}

.login-form .buttons{
	margin:20px 0 0;
}

.field, 
.wide-field{
	margin: 0 0 20px;
	font-size: inherit;
}

.login-form div.field, 
.login-form span.field, 
#first-last-name-container div.field{
	margin:20px 0 0;
}

.login-form #login-container, 
.login-form #first-last-name-container{
	height: auto;
}

.login-form h2, 
.login-form-like h2{
	border: none;
	margin-bottom: 20px;
}
 
.login-form-like-fullwidth h2{
	border: none;
	margin-top:30px;
	text-align:center;
    max-width:100%;
}

.forgot a:visited{
	color: #e3e3e3;
}

#agreementCheckboxDiv{
	padding: 15px 0;
}
 
img[src*=".svg"] {
  width: 100%; 
}
 
/*
	==============
	Our CSS starts
	==============
*/


/**** Welcome block ****/

.header .logo {
	display: block;
	align: left;
	position: absolute;
}

div#user-links.no-print{
	float: right;
	margin-right: 5px;
	color:white;
    background-color:#2b628d;
}

div#user-links.no-print a {
	color: white;
	text-decoration: none;
}

div#user-links.no-print a:hover {
	text-decoration: underline;
}

.header a,
.header a:visited {
	color:#fff;
	text-decoration: none;
	font-size: 15px;
}

.blue-box h2{
	padding-bottom: 8px;
}

.emergency-note{
	font-weight: 700;
}

#content .blue-box{ 
	background-color: #dde8f0;
	display: block;
	padding: 40px 80px;
	width: 100%;
	font-size:small;
}

.blue-box p:last-child {
	margin-bottom: 0;
}

.blue-box > * {
	 max-width: 1200px;
	 margin: 0 auto;
}

.blue-box p.small {
	display: none;
}

.blue-box p.small.emergency-note {
	display: none;
}

/**** New users block ****/

.blue-box {
	background-color: #dde8f0;
	padding-bottom: 65px;
	padding-top: 40px;
}

.blue-box.new-users h2 {
	padding-bottom: 30px;
	text-align: center;
}

.blue-box p{
	margin-bottom: 15px;
	line-height: 1.4em;
}

.large-button, .large-button:visited {
	background-color: #2b628d;
	display: block;
	/*float: left;*/
	font-size: 2em;
	font-weight: 500;
	/*margin-left: 11%;
	margin-right: 11%;*/
	margin-left: auto;
	margin-right: auto;
    padding: 40px 10px;
	text-align: center;
	text-decoration: none;
	width: 38.5%;
	color: #fff;
	border: medium solid #2b628d;
}


.large-button:first-of-type {
	/*margin-right: 0.5%;*/
	margin-left: auto;
		margin-right: auto;
}

.large-button:last-of-type {
	/*margin-left: 0.5%;*/
}

/**** Log in form ****/

.login-form {
	display: table-cell;
	margin: 0;
	max-width: 50%;
	padding: 37px 0;
	text-align: center;
	width: 50%;
	vertical-align: middle;
	background-color: #fff;
}

.login-form:nth-child(2n) {
    background-color: #eff5f9;
}

.forms{
	transition: left .3s;
	left:0;
	display: table;
}

.login-form form {
	display: block;
	margin: 0 auto;
	max-width: 800px;
}

.login-form.without-password .login-form, 
.login-form.without-password{
	background-color: #eff5f9;
}

input[id="password"]  {
	height: 62px;
}
input[id="code"],
input[id="password"],
input[id="emailAddress"],
input[id="questionAnswer"],
input[id="invitationCode"],
input[id="firstName"],
input[id="lastName"],
input[id="passwordAgain"],
input[id="lasttName"],
select#secretQuestion{
	margin-bottom: 0;
}  



div.hint {
	background-color: #ffffff;
	border: medium none;
	clear: both;
	color: #959595;
	display: block;
        margin: 0 auto 1em;
	padding: 1em;
	text-align: left;
	width: 100%;
}

div.error {
	font-size: 1.8em;
	background-color: #ffffff;
	color: red;
	border: medium none;
	clear: both;
	display: block;
	margin: 0 auto 30px;
	width: 100%;
}

#login-form-container {
	overflow: hidden;
/*	 padding: 37px 0; */
/* 	margin-bottom: -25px; */
}

.login-form .buttons button[type="submit"] {
	background-color: #5d920b;
	color:white;
	font-size: 1.8em;
        margin-bottom: 1em;
	padding:30px 0;
	width: 100%;
	border: medium solid #5d920b;
	cursor:pointer;
/*	 -webkit-appearance: button; */
}

.login-form .buttons a#login-help {
  display:inline-block;
  background-color:#ba5050;
  color:white;
  font-size: 1.8em;
  font-weight:bold;
  margin-bottom: 1em;
  padding:30px 0;
  width: 20%;
  border: medium solid #ba5050;
  cursor:pointer;
}

.login-form .buttons button[type="register"] {
	background-color: #5d920b;
	color: #deffaa;
	font-size: 1.8em;
	margin-bottom: 23px;
	padding:30px 0;
	width: 100%;
	border: medium solid #5d920b;
	cursor:pointer;
/*	 -webkit-appearance: button; */
}

.field input{
	font-size: 1.6em;
	border:2px solid #e5e5e5;
	display: block;
	width: 97%;
	margin:0 auto;
	transition: width .3s;
}

input[id="username"]{
	margin-bottom: 20px;
}

.field input:focus {
    border-color: #b4b4b4;
    width: 100%;
    box-shadow: 1px 1px 1px #b4b4b4;
}

input[id="password"]
{
	width: 76%;
	display: inline-block;
}

input[id="password"]:focus {
	width: 78.5%;
}

.login-form #welcome-container .buttons{
	margin-left: 21%;
	margin-right: 21%;
	width:58%;
}
    
.password-container{
	display: block;
	margin: 0 auto;
	text-align: center;
}

/*
.login-form-like input[id="password"]{
	width: 100%;
}
*/


.show-password,
.show-password:visited {
	background-color: #e5e5e5;
	color: #4c4c4c;
	display: inline-block;
	height: 62px;
	line-height: 62px;
	text-decoration: none;
	width: 20%;
	font-size: 1.4em;
	text-align: center;
	border: 1px solid #e5e5e5;
}

.slide-button,
.slide-button:visited {
	background-color: #929292;
	color: #e3e3e3;
	display: block;
	font-size: 1.8em;
	margin: 0 auto 53px;
	margin-bottom: 15px;
	min-width: 300px;
	padding:20px 0;
	text-decoration: none;
	width: 65%;
	border:medium solid #929292;
}

/* Show a border for tab-focused anchors and buttons */
.login-form .buttons button[type="submit"]:focus, .slide-button:focus, .large-button:focus {
    border:medium solid black;
}
.login-form .buttons button[type="register"]:focus, .slide-button:focus, .large-button:focus {
    border:medium solid black;
}

.login-form .buttons button[type="submit"]::-moz-focus-inner {
   border:none; /* hide unsightly "inner" border */
}

.login-form .buttons button[type="register"]::-moz-focus-inner {
   border:none; /* hide unsightly "inner" border */
}

.slide-button span {
	font-size: 12px;
}

.login-form #first-last-name-container{
	width: 100%;	
}

/*
.login-form.without-password .slide-button {
	padding-top: 30px;
}
*/

#first-last-name-container input[type = "password"],
#first-last-name-container input[type = "text"]{
	background-color: #eff5f9;
	border: 1px solid #d7d7d7;
	font-size: 1.6em;
	margin-bottom: 20px;
} 

/**** Register page ****/

label[for="agreementResponse"] {
    font-size: 1.4em;
    color:#656565;
}

input[id="agreementResponse"] {
    display:none;
}

#buttons {
   margin-bottom:2em;
}

#buttons > input[id="submit"] {
    background: #5d920b;
    border: medium none;
    color: #b8e07a;
    cursor: pointer;
    font-size: 2em;
    height: 85px;
	opacity: 1;
	max-width: 100%;
	-webkit-appearance: button;
}

#buttons > input[id="register"] {
    background: #5d920b;
    border: medium none;
    color: #b8e07a;
    cursor: pointer;
    font-size: 2em;
    height: 85px;
	opacity: 1;
	max-width: 100%;
	-webkit-appearance: button;
}

#buttons > input[id="submit"]:disabled {
	background-color:grey;
}

#buttons > input[id="register"]:disabled {
	background-color:grey;
}

.labelCheckbox {
    display: block;
    height: 60px;
    margin-left:1em;
    margin-bottom:1em;
}

.labelCheckbox .touchCheckbox {
  display:inline-block;
  position:relative;
  top:2ex;
  height:5ex;
  width:5ex;
  border:2px solid #e5e5e5;
  background-color:transparent;
  cursor:pointer;
}

.labelCheckbox .label-text {   cursor:pointer; }

input:checked ~ .touchCheckbox {
   background-color:#5d920b;
}

.touchevetns .labelCheckbox{
	text-align: left;
}

.field.styled-select{
	background-image: url("../../images/dropdown.png");
    background-position: 100% center;
	background-repeat: no-repeat;
	border: 1px solid #e5e5e5;
	font-size: 1.1em;
    float: left;
    overflow: hidden;
    color: #847e7e;
    width: 97%;
    margin: 0 10px;
}

.field.styled-select select {
    font-size:1.6em;
    background: transparent none repeat scroll 0 0;
    border: medium none;
    height: 60px;
    padding: 0 15px;
    width: 120%;
}

.styled-select option {
    background-color: #7a90a1;
    border-bottom: 2px solid #728899;
    color: #fff;
    height: 40px;
    text-indent: 1em;
    padding: 8px 0;
}

.styled-select option:last-child {
    border: medium none;
}


/**** Custom Dropdown ****/

.wrapper-dropdown {
/*     background-attachment: scroll; */
/* 	background-clip: border-box; */
/* 	background-color: #fff; */
/* 	background-image: url("../../images/dropdown.png"); */
/* 	background-origin: padding-box; */
/* 	background-position: right center; */
/* 	background-repeat: no-repeat; */
	border: 2px solid #e5e5e5;
	color: rgba(132, 126, 126, .5);
	cursor: pointer;
	font-size: 1.8em;
	height: auto;
	outline: medium none;
	padding: 17px 80px 17px 20px;
	position: relative;
	width: 97%;
	margin:0 auto;
	transition: width .3s;
}

/*
.dd-background {
    
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}
*/

.no-history #buttons > input[id="submit"]{
	color: #b8e07a;
}

.arrow-container {
    background-color: #7a90a1;
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
}

.dd-arrow {
    background-image: url("../../images/sprite.svg");
    background-position: -394px -4px;
    background-repeat: no-repeat;
    background-size: 495px 515px;
    display: block;
    height: 100%;
    margin-right: -20px;
    margin-top: -50%;
    position: absolute;
    right: 50%;
    top: 50%;
    width: 40px;
}

.wrapper-dropdown.active .dd-arrow{
	background-position: -455px -3px;
}

.wrapper-dropdown .dropdown {
  /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    font-weight: normal;
/*     transition: all 0.5s ease-in; */
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.wrapper-dropdown .dropdown li a {
    border-bottom: 1px solid #728899;
    color: #fff;
    display: block;
    padding: 10px 10px 10px 20px;
    text-decoration: none;
}

.wrapper-dropdown.active{
    background-color: #7a90a1;
    color:#fff;
    width: 100%;
}

.wrapper-dropdown.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    z-index: 100;
    background-color: #7a90a1;
    overflow: visible;
}

#buttons #submit + .icon {
	background-image: url("../../images/sprite.svg");
    background-position: -210px -5px;
    background-repeat: no-repeat;
    background-size: 495px 515px;
    display: block;
    height: 30px;
    margin-right: -88px;
    margin-top: -15px;
    position: absolute;
    right: 50%;
    top: 50%;
    width: 30px;
    cursor: pointer;
}

#buttons #register + .icon {
    background-image: url("../../images/sprite.svg");
    background-position: -210px -5px;
    background-repeat: no-repeat;
    background-size: 495px 515px;
    display: block;
    height: 30px;
    margin-right: -88px;
    margin-top: -15px;
    position: absolute;
    right: 50%;
    top: 50%;
    width: 30px;
    cursor: pointer;
}

.error{
	background-color: #ba5050;	
	color:white;
}

input.error:-moz-placeholder{
	color:lightgrey;
}

input.error:-moz-placeholder{
	color:lightgrey;
}

input.error::-webkit-input-placeholder{
	color:lightgrey;
}

input.error:-ms-input-placeholder{
	color:lightgrey;
}

.error-message {
    color: #ba5050;
    font-size: 1.4em;
    margin-left: 14px;
}

.correct{
	background-color:#a8d266;
	color:#606c4f;
}
/**** For JS uses ****/

.hide{
	display: none;
}

.small-scroll-hint {
  display:none;
}

table {
  margin:1em;
  border-collapse:collapse;
  border:1px solid #d7dde9;
}
table th, table td {
  padding:1em;
  font-size:1.5em;
}
table th {
  background-color:#e8eefa;
}
table.alternating tr:nth-child(odd) td {
  background-color:#e8eefa;
}
table tr.hover-highlight:hover td {
  cursor:pointer;
  background-color:#d7dde9;
}

.questionnaire-action {
  border: 1px solid #a0a0a0;
  background: #e8e8e8;
  padding:0.25em;
  text-decoration: none;
  color: #225fa2;
  cursor: pointer;
  display:inline-block;
  margin:.1ex 0;
}

form.inline {
  display:inline-block;
}

button.tappable {
  border: 1px solid #a0a0a0;
  background: #e8e8e8;
  padding:1em;
  text-decoration: none;
  color: #225fa2;
  cursor: pointer;
  display:inline-block;
}

table.patient-list {
  min-width:50%;
}
table.patient-list td:first-child {
  width:3em;
}
table.patient-list td:nth-child(3) {
  width:6em;
}

div#questions input {
  width:auto;
  padding:0;
}

.section h2 {
  font-size:2.5em;
  margin:1ex;
}
.section ul {
  font-size:1.5em;
}
.section {
  margin-bottom:3em;
}

#questionnaires {
  margin:1em;
}
#questionnaires .questionnaire {
  margin-bottom:1em;
  padding:1em;
  background-color: #e8eefa;
}

#questionnaires .questionnaire h3 {
  font-size:3em;
  margin-bottom:0.5ex;
}
#questionnaires .questionnaire div {
  font-size:1.5em;
}
#questionnaires .questionnaire .actions {
  margin-top:1ex;
}

#questionnaires .hint {
  font-style: italic;
  font-size: small;
  border: 1px solid #c3d9ff;
  background-color: #ffffcc;
  padding: 0.25ex 1ex 0.25ex 1ex;
}

#questionnaires div.warning {
  margin: 1em 0;
  background-color:#ffcccc;
  padding: 1ex;
}

#announcements {
  margin-top:1em;
  margin-left:25%;
  margin-right:25%;
}

.announcement {
  padding:1ex 1ex 1ex 1ex;
}

.announcement.notice {
  background-color:#f99;
  border:1px solid #c30;
}

.announcement.information {
  background-color:#def;
  border:1px solid #09f;
}

#questionnaire-introduction {
  margin:1em;
  font-size:1.5em;
}

#questionnaire-introduction h2 {
  font-size:2em;
}

#questionnaire-introduction h3 {
  font-size:1.25em;
  margin-bottom:1em;
}

@media screen and (max-width:400px)  {
table.patient-list { margin-left:0; margin-right:0; width:100%; }
table.patient-list td:nth-child(n+4), table.patient-list th:nth-child(n+4) {
display:none;
}
}

h3.patient-details {
  font-size:1.5em;
  margin-left:3em;
}
.important-activities {
  margin-top: 1em;
}
a.mb_counter {text-align:center;font-size:11px;font-weight:bold;text-decoration:none;color:#fff;padding:4px 7px 3px 7px;}
a.mb_alertCount {background:url(../../images/memorybook/header-menu-alert-back.png) no-repeat center center;}
a.mb_memoCount {background:url(../../images/memorybook/header-menu-memo-back.png) no-repeat center center;}
a.mb_noticeCount {background:url(../../images/memorybook/header-menu-notice-back.png) no-repeat center center;}
a.mb_resourceCount {background:url(../../images/memorybook/header-menu-resource-back.png) no-repeat center center;}
a.mb_commentCount {background:url(../../images/memorybook/header-menu-comment-back.png) no-repeat center center;}
a.mb_noteCount {background:url(../../images/memorybook/header-menu-note-back.png) no-repeat center center;}

div.actions input[type='submit'] {
  width:auto;
  padding:1ex;
  margin:1em;
  font-size:1.25em;
  cursor:pointer;
}

div.actions input[type='submit']:hover {
  color:black;
}

@media screen and (max-width:1024px) {
	.blue-box > * {
		max-width: 755px;
	}
}

@media screen and (max-width:900px){
	.login-form-like-fullwidth > * {
		max-width: 90%;
	}

  img.screenshot {
    margin-left:0;
    margin-right:0;
    max-width:100%;
    padding:1%;
  }

}

@media screen and (max-width: 767px){
   .login-form-like-fullwidth {
        margin:0 50px;
        padding:0 5px;
    }

	.login-form-like-fullwidth {
        margin:0 5px 0 25px;
        padding:0 5px;
    }

	.blue-box > * {
		max-width: 80%;
	}
	.blue-box.new-users > *{
		max-width: 100%;
	}
	#buttons > input[id="submit"]{
		background-position: 68% center;
	}

	#buttons > input[id="register"]{
		background-position: 68% center;
	}
}

@media screen and (max-width: 667px){
	input[id="password"]:focus {
	    width: 79.0%;
	}
}

@media screen and (max-width: 550px) {
  h2 {
    font-size:3.0em;
  }
  .login-form {
    padding:1em 0;
  }
  p.small {
    font-size:1.2em;
  }
  .login-form .buttons button[type="submit"],
  .login-form .buttons a#login-help  {
    padding:1em 0;
    margin-bottom:0.25em;
  }
  .slide-button,
  .slide-button:visited {
    padding:1em 0;
  }
  .large-button, .large-button:visited {
    padding:1em;
  }
  div.error {
    margin:0 auto 1em;
  }
  .login-form div.field,
  .login-form span.field,
  .login-form div.error{
      margin:.5em 0 0.5em;
  }
 .login-form-like > * {
		padding-left: 0;
		padding-right: 0;
        max-width:100%;
	}
	.large-button{
		width: 70%;
		margin-bottom: 30px;
		margin-left: 14.5%;
		margin-right: 14.5%;
	}

    .large-button:first-of-type {
	    margin-right: 14.5%;
    }

    .large-button:last-of-type {
	    margin-left: 14.5%;
    }


	div.hint{
		width: 90%;
	}

	.blue-box{
		padding-bottom: 0;
	}

	#content .blue-box{
        padding: 1em 0;
	}

	.login-form form {
		max-width: 300px;
	}

	.login-form, .login-form-like{
		padding-left: 15px;
		padding-right: 15px;
	}

	.blue-box p {
		display: none;
	}
	
	.blue-box p.emergency-note {
		display: none;
	}

	.blue-box p.small {
		display: block;
	}
		
	.blue-box p.small.emergency-note {
		display: block;
	}

	#buttons > input[id="submit"] {
	    background-position: 77% center;
	}
	#buttons > input[id="register"] {
	    background-position: 77% center;
	}
    div#agreementContents{
        max-height:200px;
    }

    .login-form #welcome-container .buttons{
	    margin-left: 11%;
	    margin-right: 11%;
	    width:78%;
    }
    
    .field.styled-select{
	    font-size: 0.9em;
	}

  .login-form .buttons {
    margin-top:1em;
  }
  .small-scroll-hint {
    display:block;
    margin:1em auto 1em auto;
  }
  .login-form .field input {
    padding:10px;
  }
  .login-form .field input[id="password"] {
    height:auto;
  }
  a.show-password {
    height:3em;
    line-height:3em;
  }
}

@media screen and (max-width: 480px){
    div#agreementContents{
        max-height:200px;
    }
    
    div#login-form1.login-form h2 {
      display:none;
    }
}

.center-relative {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#loading-overlay {
	height: inherit;
	width: 100%;
	float: left;
	transition: opacity 1s ease;
	transition-delay: 0.7s;
}
#loading-overlay .overlay-background {
	height: inherit;
	opacity: 50%;
	background-color: white;
	position: absolute;
	z-index: 9;
	transition:inherit;
	left: 0;
	width: 100%;
}
#loading-overlay.hide div {
	visibility: hidden;
	opacity: 0;
}

.lds-spinner {
  color: #2b628d;
  width: 80px;
  height: 80px;
  z-index: 10;
  transition: inherit;
  position: absolute;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #2b628d;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}