/* start basic spinner styles*/

   /*******************************/
   /*     INDIVIDUAL SPINNERS     */


/* spinner while catalog loads */
   #checkout_spinner{
   	-webkit-transform: translateZ(0);
		-webkit-perspective: none;
		-webkit-backface-visibility: none;
   	position: relative;
   	left: 0px;
   	top: 0;
   	opacity: 0.5;
   	background: transparent;
   	z-index:99999999999999999;
   	width:320px; 
	height:180px;
	
	text-align:center;
	padding:6px;
	background: rgba(10,10,10,10.1); 
   }
   
   
   /* spinner while catalog loads */
   #load_spinner{
   	-webkit-transform: translateZ(0);
		-webkit-perspective: none;
		-webkit-backface-visibility: none;
   	position: absolute;
   	left: 305px;
   	top: 440px;
   	opacity: 0.5;
   	background: transparent;
   	z-index:99999999999999999;
   	width:500px; 
	height:300px;
	position: absolute; left:320px; top:260px;

	text-align:center;
	padding:12px;
	background: rgba(10,10,10,10.1); 
   }

    #cloud_load_spinner{
   	position: absolute;
   	left: 305px;
   	top: 240px;
   	opacity: 0.5;
   }

    #virology_catalog_load_spinner{
   	position: absolute;
   	left: 305px;
   	top: 240px;
   	opacity: 0.5;
   }

   #auto_immune_catalog_load_spinner{
   	position: absolute;
   	left: 305px;
   	top: 240px;
   	opacity: 0.5;
   }


   /* spinner while loading a project view */
   #project_load_spinner{
   	-webkit-transform: translateZ(0);
		-webkit-perspective: none;
		-webkit-backface-visibility: none;
   	position: absolute;
   	left: 320px;
   	top: 340px;
   	opacity: 0.5;
   }


   /* spinner while loading a progress view */
   #progress_load_spinner{
   	-webkit-transform: translateZ(0);
		-webkit-perspective: none;
		-webkit-backface-visibility: none;
   	position: absolute;
   	left: 42%;
   	top: 30%;
   	opacity: 0.5;
   }


   /* progress view, cloud spinner */
   #cloud_spinner{
   	-webkit-transform: translateZ(0);
		-webkit-perspective: none;
		-webkit-backface-visibility: none;
   	position: absolute;
   	left: 42%;
   	top: 60px;
   	opacity: 0.5;
   	
   }



   /*  PROJECT FORM SPINNERS */



   #gene_data_load_spinner{
   	/*float:top;*/
   	position: absolute;
   	left: 40%;
   	top: 20%;
   	opacity: 0.5;
   }

   #create_project_spinner{
   	/*float:top;*/
   	position: absolute;
   	left: 40%;
   	top: 20%;
   	opacity: 0.5;
   }








   /********************************/
   /*       GENERAL SETTINS        */

   div.spinner {
     position: relative;
     width: 200px;
     height: 200px;
     display: inline-block;
     top: 37%;
   }

   div.spinner div {
     width: 12%;
     height: 26%;
     /*background: #000;*/
     position: absolute;
     left: 44.5%;
     top: 37%;
     opacity: .2;
     -webkit-animation: fade 1s linear infinite;
     -webkit-border-radius: 50px;
     /*-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);*/
   }

   div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
   div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
   div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
   div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
   div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
   div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
   div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
   div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
   div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
   div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
   div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
   div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

    @-webkit-keyframes fade {
     from {opacity: 1;}
     to {opacity: 0.25;}
   }

   /* end basic spinner styles*/

   div.spin_container {
     position: absolute;
     display: inline-block;
     padding: 1.5em 1.5em 1.25em;
    background: rgba(50,0,0,0.8); 
   /*  -webkit-box-shadow: 1px 1px 1px #fff; */
     -webkit-border-radius: 1em;
     margin: 1em;
   }

   div.spin_container.grey {background: rgba(0,0,0,0.2); background: transparent;}    
   div.spin_container.grey.blue {background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0a2744), color-stop(1, #064483));}

   div.spin_container div.spinner {
     width: 28px;
     height: 28px;
   }

   div.spin_container.grey div.spinner {
     width: 60px;
     height: 60px;

   }

   div.spin_container div.spinner div {background: #fff;}



   /* CLOUD PROGRESS Class */
   /****************************************/

   div.cloud_spin_container {

     display: inline-block;
     padding: 1.5em 1.5em 1.25em;
     background: rgba(0,0,0,0.8);
    /* -webkit-box-shadow: 1px 1px 1px #fff; */
     -webkit-border-radius: 1em;
     margin: 1em;
     opacity: .3;
   }

   div.cloud_spin_container {
   	position: absolute;
     left: 50%;
     top: 200px;
     background: rgba(0,0,0,0.2);
     }    


   div.cloud_spin_container div.spinner {
     width: 20px;
     height: 20px;
   }

   div.cloud_spin_container div.spinner {
     width: 30px;
     height: 30px;

   }

   div.cloud_spin_container div.spinner div {background: #fff;}

   /****************************************/




    /* MV Art Class */
   /****************************************/

   div.mv_art_spin_container {
     	position: absolute;
     	left: 25px;
     	top: 60px;
     	display: inline-block;
     	padding: 1.5em 1.5em 1.25em;
     	-webkit-border-radius: 1em;
     	margin: 1em;
     	background: rgba(0,0,0,0.2);
     	z-index:9999999;
     	opacity: .3;
     }    



   div.mv_art_spin_container div.spinner {
     width: 30px;
     height: 30px;

   }

   div.mv_art_spin_container div.spinner div {background: #fff;}

   /****************************************/




    /* MV Analyze Class */
   /****************************************/

   div.mv_analyze_spin_container {

     display: inline-block;
     padding: 1.5em 1.5em 1.25em;
     background: rgba(0,0,0,0.8);
    /* -webkit-box-shadow: 1px 1px 1px #fff; */
     -webkit-border-radius: 1em;
     margin: 1em;
     opacity: .7;
     z-index:99999999;
   }

   div.mv_analyze_spin_container {
   	position: absolute;
   	width: 100%;
   	height: 100%;
     	left: 0px;
     	top: 0px;
     	background: rgba(0,0,0,0.2);}    

   div.mv_analyze_spin_container div.spinner {
     width: 60px;
     height: 60px;
   }

   div.mv_analyze_spin_container div.spinner {
   	left: 275px;
     	top: 150px;
     	width: 90px;
     	height: 90px;

   }

   div.mv_analyze_spin_container div.spinner div {background: #fff;} /* spinner bar backgrounds */

   /****************************************/






   div.labeled {
     font-family: sans-serif;
     font-size: 14px;
     margin: 0 auto;
     background: #fff;
     padding: 0.5em 0.75em 0.5em 0.5em;
     display: inline-block;
     color: #c00;
     line-height: 25px;
     -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
     -webkit-border-radius: 1em;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
   }

   div.labeled div.spinner {
   	/*float: left;*/
     vertical-align: middle;
     width: 25px;
     height: 25px;
     margin-right: 0.5em;
   }

   div.labeled div.spinner div {background: #c00;}