:root {
    --default-border-radius:4px;
    --bg-color:#fff;
    --bg-color-light:#ccc;
    --light-text-color:#eee;
    --light-border-color:#eee;
    --text-color:#333;
    --loader-line-color-1:#333;
    --loader-line-color-2:#222;
    --loader-line-bg-color:#444;
}

/*
------------------------------------------------------------------------------------
EZZATO.CLOUD
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

/*  loader  */

.loader {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    /*background-color:#F3F4F3;*/
    background-color:rgba(243, 244, 243, .8);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center center;
    display:table;
    vertical-align:middle;
    text-align:center;
    z-index:30;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
	filter: alpha(opacity=100); 	
	-khtml-opacity: 1;      	
	-moz-opacity: 1;       		
	opacity: 1;
}

.loader-to-back {
    z-index:-1;
    opacity: 0;
}

.loader-hide {
	filter: alpha(opacity=0); 	
	-khtml-opacity: 0;      	
	-moz-opacity: 0;       		
	opacity: 0;
}

.loader > .loader-container {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.loader > .loader-container > .icon {
    position: relative;
    text-align: center;
    display: table;
    width: 127px;
    height: 127px;
    margin: 0 auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    
}

.loader:not(.loader-hide) > .loader-container > .icon {
    -webkit-animation:spin 1s ease-out 10ms infinite;
    -moz-animation:spin 1s ease-out 10ms infinite;
    animation:spin 1s ease-out 10ms infinite;
    
}

.loader:not(.loader-hide) {
    backdrop-filter: blur(3px);

}


.loader > .loader-container > .icon:after {
	position: relative;
    display: table-cell;
    font-size: 81px;
    content: '';

    font-size: 38px;
    content: '';
    font-family: "Material Icons";
    color: #000000;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loader > .loader-container > .message {
    position:relative;
    display:block;
    text-align:center;
    color:#000000;
    text-transform:uppercase;
    font-size:12px;
    padding:5px 0px;
}

.loader.dev > .loader-container > .message {
    background-color: #fff;
    max-height: 70vh;
    overflow-y: auto;
    width: 80%;
    margin: 0 auto;
    border: solid 10px #e3e3e3;
    text-align: left;
    padding: 20px;
    text-transform: none;
    background-color: #e3e3e3;
    border-radius: var(--default-border-radius);
}

.loader.dev .loader-container > .message > h3 {
    position: relative;
    display: block;
    font-size: 20px;
    padding: 10px 0px;
    color: #000000;
}

.loader.dev .loader-container > .message > span {
    position: relative;
    display: block;
    padding: 5px 0px;
    border-bottom: solid 1px #d3d3d3;
    font-size: 14px;
}

.loader.dev .loader-container > .message > span:before {
    position: relative;
    font-family: "Material Icons";
    font-size: 18px;
    color: #000000;
    vertical-align: middle;
    text-align: center;
    content:'';
    padding-right: 5px;
}

/* Loader 2 */

.processing:after {
    position: absolute;
    content:'restart_alt';
    font-size: 20px;
    font-family: "Material Icons";
    display: block;
      
      -webkit-animation: loader-2-1 3s linear infinite;
              animation: loader-2-1 3s linear infinite;
}
.loader-2 {
    display: block;
      height: 32px;
      width: 32px;
      content:'';
      -webkit-animation: loader-2-1 3s linear infinite;
              animation: loader-2-1 3s linear infinite;
  }
  @-webkit-keyframes loader-2-1 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-1 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span {
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      height: 32px;
      width: 32px;
      clip: rect(16px, 32px, 32px, 0);
      -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-2 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-2 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span::before {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      height: 32px;
      width: 32px;
      border: 3px solid transparent;
      border-top: 3px solid #FFF;
      border-radius: 50%;
      -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-3 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-3 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span::after {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      border: 3px solid #000;
      border-radius: 50%;
  }
  
  .loader > .loader-container > .icon:after {
      font-size: 0px;
  }
  
 /* Loader 2 */
 .loader-2page {
    margin: 0 auto;
    display: block;
      height: 32px;
      width: 32px;
      -webkit-animation: loader-2-1 3s linear infinite;
              animation: loader-2-1 3s linear infinite;
 
        position: fixed;
        top: 50%;
        left:50%;
        /*transform: translateX(-50%) translateY(-50%);*/
        left: calc(50% - 16px);
    }
  @-webkit-keyframes loader-2-1 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-1 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2page span {
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      height: 32px;
      width: 32px;
      clip: rect(16px, 32px, 32px, 0);
      -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-2 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-2 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2page span::before {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      height: 32px;
      width: 32px;
      border: 3px solid transparent;
      /*border-top: 3px solid  #000;;*/
      border-radius: 50%;
      -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-3 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-3 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2page span::after {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      border: 3px solid v #000;;
      border-radius: 50%;
  }
  
  .loader > .loader-container > .icon:after {
      font-size: 0px;
  }
 
  /*thinking*/
 
  .thinking {
    opacity: .4;
    pointer-events: none;
  }

  
/*
loader
*/

.loader {
  background-color: transparent;
}

.loader > .loader-container {
  display: table-cell;
}

.loader > .loader-container > .icon.loader-2 ,
.loader > .loader-container > .icon {
  display: none;
}

.loader > .loader-container > .ripple-loader {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;

  /*
  */
  display: none;
}

.loader > .loader-container > .ripple-loader div {
  position: absolute;
  border: 4px solid var(--text-color);
  border-radius: 50%;
  animation: ripple-loader 1s ease-out infinite;
}

.loader > .loader-container > .ripple-loader div:nth-child(2) {
  animation-delay: -0.5s;
}
/*
.loader:not(.loader-hide) { 
  z-index: 20;
}
*/

@keyframes ripple-loader {
  0% {
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    opacity: 0;
  }
}

/*
load-bar
*/

.load-bar {
  position: relative;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 6px;
  background-color: var(--text-color);

  /*
  
  display: none;*/
}
.bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
.bar:nth-child(1) {
  background-color: var(--bg-color);
  animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
  background-color: var(--light-text-color);
  animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
  background-color: var(--text-color);
  animation: loading 3s linear 2s infinite;
}
@keyframes loading {
    from {left: 0; width: 0;z-index:100;}
    33.3333% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;}
}

/*
*/

.line-loader:after,
.linePreloader {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right,var(--loader-line-color-1),var(--loader-line-color-2));
  background-color: var(--loader-line-bg-color);
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  border-radius: 4px;
  background-size: 20%;
  background-repeat: repeat-y;
  background-position: -25% 0;
  animation: scroll 1.2s ease-in-out infinite;
  content:'';
}

.line-loader.bottom:after,
.linePreloader.bottom {
  top: initial;
  bottom: 0px;
}

@keyframes scroll{
  50%{background-size:80%}
  100%{background-position:125% 0;}
}


/*
is_loading
*/

:root {
  --is_loading-font_size:20px;
}

.is_loadding:after ,
.is_loadding:before {
  position: absolute;
  transition: 5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  pointer-events: none;
  pointer-events: none;
}

.is_loadding:after {
    top: calc(50% - ( var(--is_loading-font_size) / 2));
    left:  calc(50% - ( var(--is_loading-font_size) / 2));
    font-size: var(--is_loading-font_size);
    color: var(--light-border-color);
    font-family: "Material Icons";
    content:''; 
    content:''   ;
    content:'';
    z-index: 2;   
    pointer-events: initial;
    /*
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    */

    -webkit-animation: pulse 2s infinite;
    -moz-animation: pulse 2s infinite;
    -ms-animation: pulse 2s infinite;
    -o-animation: pulse 2s infinite;
    animation: pulse 2s infinite;

    opacity: 1;
}

.is_loadding:before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: ''; 
    z-index: 2;
    background-color: var(--bg-color-light);
    
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    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 {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}