/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25/08/2019, 12:44:30 PM
    Author     : Zoran.Todorovic
*/

.loadershow{
    position: fixed;
    z-index: 35;
    width: 100%; /* Full width */
    height: 100%; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
    padding-bottom: auto;
/*    background-color: rgb(255,255,255);  Fallback color 
    background-color: rgba(255,255,255,0.2);  Black w/ opacity         */
        
}

.loaderhide {
	display: none;
}


.loading {
    display: inline-block;
    position: relative;
    z-index: 15;
    width: 100%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.25em;
    color: orange;
    -webkit-animation: animaEllipsis 1.5s linear infinite alternate both;  
    animation: animaEllipsis 1.5s linear infinite alternate both;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    font-weight: 800;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-shadow: -5px -5px 22px rgba(0,0,0,0.91) , 5px 5px 22px rgba(0,0,0,0.91) ;
}

.loading::before {
    content: ' ';
    width: 5em;
    height: 5em;
    display: block;
    margin: 0 auto;
    border-top: 1px solid gold;
    border-bottom: 5px solid gold;
    border-radius: 100%;
    box-shadow: -2px 0 0 1px orange;
    -webkit-animation: animaLoadIcon;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation: animaLoadIcon 0.75s linear infinite;
}

.loading::after {
	content: '';
	display: inline-block;
	text-align: left;
}

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

@-webkit-keyframes animaEllipsis {
    0% { letter-spacing: 0.0; color: gold;}
    100% { letter-spacing: 0.10em; color: orange; }
}

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

@keyframes animaEllipsis {
    0% { letter-spacing: 0.0; color: gold;}
    100% { letter-spacing: 0.10em; color: orange; }
}