/*
------------------------------------------------------------------------------------
COM.EZZATO.DEV
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:200;
	-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 .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;
}

.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;
  }