.html-spinner {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 4px solid gray;
  border-top: 4px solid var(--mdc-theme-primary, #039be6);
  border-radius: 50%;
  margin-left: 4px;
 -webkit-transition-property: -webkit-transform;
 -webkit-transition-duration: 1.2s;
 -webkit-animation-name: spinner-rotate;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 
 -moz-transition-property: -moz-transform;
 -moz-animation-name: spinner-rotate; 
 -moz-animation-duration: 1.2s; 
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 
 transition-property: transform;
 animation-name: spinner-rotate; 
 animation-duration: 1.2s; 
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}


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

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

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

.mdc-spinner-icon-success
{
	color: green;
}

.mdc-spinner-icon-error, .mdc-spinner-dialog-panel-error-text
{
	color: red;
}

.mdc-spinner-dialog-panel-icon
{
	font-size: 54px !important;
}

.mdc-spinner-dialog .mdc-dialog .mdc-dialog__surface
{
	max-width: 300px;
}

.mdc-spinner-dialog .mdc-dialog .mdc-dialog__surface .mdc-dialog__title, .mdc-spinner-dialog-panel-container
{
	text-align: center;
}

.mdc-spinner-dialog-panel-container
{
	position: relative;
}

.mdc-spinner-dialog-panel-text-container
{
	margin-top: 15px;
	overflow: hidden;
   /* word-break: break-all; */
    user-select: text !important;
}

.mdc-spinner-dialog-panel-spinner
{
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 26px;
}

.mdc-spinner-dialog-spinner-only .mdc-dialog .mdc-dialog__surface
{
	    background-color: rgba(255,255,255,0) !important;
	    box-shadow: unset !important;
}

.flip1
{
	 -webkit-transition-property: -webkit-transform;
 -webkit-transition-duration: 0.3s;
 -webkit-animation-name: spinner-flip1;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
 
 -moz-transition-property: -moz-transform;
 -moz-animation-name: spinner-flip1; 
 -moz-animation-duration: 0.3s; 
 -moz-animation-iteration-count: 1;
 -moz-animation-timing-function: linear;
 
 transition-property: transform;
 animation-name: spinner-flip1; 
 animation-duration: 0.3s; 
 animation-iteration-count: 1;
 animation-timing-function: linear;
}

.flip2
{
	 -webkit-transition-property: -webkit-transform;
 -webkit-transition-duration: 0.3s;
 -webkit-animation-name: spinner-flip2;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
 
 -moz-transition-property: -moz-transform;
 -moz-animation-name: spinner-flip2; 
 -moz-animation-duration: 0.3s; 
 -moz-animation-iteration-count: 1;
 -moz-animation-timing-function: linear;
 
 transition-property: transform;
 animation-name: spinner-flip2; 
 animation-duration: 0.3s; 
 animation-iteration-count: 1;
 animation-timing-function: linear;
}

@-webkit-keyframes spinner-flip2 {
   from {-webkit-transform: rotateY(0deg);}
   to {-webkit-transform: rotateY(90deg);}
}

@-moz-keyframes spinner-flip2 {
   from {-moz-transform: rotateY(0deg);}
   to {-moz-transform: rotateY(90deg);}
}

@keyframes spinner-flip2 {
   from {transform: rotateY(0deg);}
   to {transform: rotateY(90deg);}
}

@-webkit-keyframes spinner-flip1 {
   from {-webkit-transform: rotateY(90deg);}
   to {-webkit-transform: rotateY(0deg);}
}

@-moz-keyframes spinner-flip1 {
   from {-moz-transform: rotateY(90deg);}
   to {-moz-transform: rotateY(0deg);}
}

@keyframes spinner-flip1 {
   from {transform: rotateY(90deg);}
   to {transform: rotateY(0deg);}
}