body { 
    padding-top: 20px;
}
.spacer {
    display: inline-block;
    width: 6em;
    height: 3em;
}
.vmargin-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.footer {
    border-top-color: rgb(229, 229, 229);
    border-top-style: solid;
    border-top-width: 1px;
    margin-top: 20px;
    color: rgb(119, 119, 119);
}

.footer-text {
    margin-top: 20px;
    font-size: 14px;
    margin-bottom: 20px;
}


.wl-vertical-center
{
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}


img.wl-login-icon
{
    width: 100%;
    height: 100%;
}

img.wl-logo
{
    width: 100%;
    height: 100%;
}

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

.lab-experiment-name {
    font-size: 100%; 
/*    font-weight: bold;*/
    white-space: nowrap;
}

.lab-block-link {
    height: 100%; 
    width: 100%;
}

.lab-experiment-name-fade {
    display: block;
    position: absolute;
    height: 115px;
    width: 30px;    
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, white 75%, white 100%);
    top: 0;
}

/* Styles for the Labs screen */
.lab-block {
    position: relative;
    display: inline-block;

    width: 100%;
    height: 115px; 
    padding: 12px;
/*    margin: 3px;*/
    cursor: pointer;
    cursor: hand;
    background-color: white;
/*    border: 1px solid #999;
    border-radius: 0px;*/
    overflow: hidden;
}

.labs-block {
    background-color: #f3f3f3;
}

.lab-block:hover {
/*    background-color: #c3c3c3;*/
}

.lab-block-wrapper:hover {
/*    opacity: 0.8;*/
}

.wl-order-buttons-wrapper
{
    user-select: none;
}

@media screen and (min-width: 1600px) {
    .col-wl-lg-1 {
        width: 8.3333%;
    }
}

@keyframes rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotate {
    from{
        -ms-transform: rotate(0deg);
    }
    to{
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from{
        -moz-transform: rotate(0deg);
    }
    to{
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating-ball {
    width:201px;
    height:201px;
    opacity: 0.6;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -ms-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}