/*
.kn_buttonload::after {
  content: "70%";
}
*/

/** KKK21-CSS */

.kn_buttonload
{
  /*background-color: #04AA6D; *//* Green background */
  /*border: none; *//* Remove borders */
  /*color: white; *//* White text */
  /*padding: 12px 24px; *//* Some padding */
  /*font-size: 16px; *//* Set a font-size */
}

/**
9716	25F4
↻ 21BB
9762	2622
9881	2699	 	GEAR
9853	267D	 	PARTIALLY-RECYCLE
9784	2638	 	WHEEL OF DHARMA
9762	2622    RADIOACTIVE SIGN
9203	23F3
128260	1F504

 */
.kn_buttonload[att_load="on"] > .loader::after {
  /* content: "\21BB"; ↻ */
  /* content: "\25F4"; ↻ */
  /* content: "\2699"; ↻ */
  /*content: "\267D"; ↻ */
  /*content: "\2638"; *//* ↻ */
  /*content: "\2622";  ↻ */
  /*content: "\1F504";  ↻ */
  content: "\21BB"; 
}

/*
all loader where parent is .kn_buttonload
*/
.kn_buttonload[att_load="on"] > .loader
{
  border-radius: 50%;
  /*font-size: 120%;*/
  font-weight: bolder;
  display: inline-block;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/*
//.progress-parent
{
  border: 1px solid black;
  width: 80%;
  background-color: #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
  text-align: left;
}

//.progress-bar
{
  background: #2196F3;
  
  width: 75%;
  display: inline-block;
  text-align: center;
  color: white;
}
*/

/*
//.progress-parent
*/
.kn_prog_progress_parent
{
  border: 1px solid black;
  width: 50%;
  background-color: #ddd;
  color: white;
  display: block;
  height:15px;
  overflow: hidden;
  border-radius: 4px;
  
  padding: 0px;
  margin: 0px;
}

/*
//.progress-bar
*/
.kn_prog_progress_bar
{
  background: #1a53ff; /*#2196F3; royalblue; #04AA6D;*/
  width: 50%;
  display: inherit;
  overflow:inherit;
  border-radius:inherit;
  height:inherit; 
  border-radius:inherit;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  
  padding: 0px;
  margin: 0px;
}

/* KKKK6 @keyframes */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


/* KKKK6 .c_input_shadow */

/* .c_input_shadow */
input ~ .c_input_shadow
{
  box-shadow: 6px 6px 6px black;
  
  margin-top_:3px;
  margin-bottom_:9px;
}

/* .c_input_shadow:active */
input:checked ~ .c_input_shadow
{
  box-shadow: 2px 2px 2px black;
  background-color: #3e8e41;
  
  transform: translate(4px,4px);
  
  display: inline-block;
  
  margin-top_:3px;
  margin-bottom_:3px;
  
  background-color_:steelblue;
  border_: 1px solid;
  color_: white;
  padding_: 0px 5px 0px 5px;
  text-align_: center;
  text-decoration_: none;
  cursor_: pointer;
  font-size_: inherit;
  border-radius_: 5px;
  vertical-align_:middle;
  
}

/* KKKK6 .c_input_run .c_input_run_anim */

/**
9716  25F4
↻ 21BB
9762  2622
9881  2699     GEAR
9853  267D     PARTIALLY-RECYCLE
9784  2638     WHEEL OF DHARMA
9762  2622    RADIOACTIVE SIGN
9203  23F3
128260  1F504
 */

input ~ .c_input_run  > .c_input_run_anim::after
{
  content: "\21BB"; /* ↻ */
  visibility: hidden;
}

input:checked ~ .c_input_run  > .c_input_run_anim::after
{
  content: "\21BB"; /* ↻ */
  visibility: visible;
}

input:checked ~ .c_input_run > .c_input_run_anim
{
  display: inline-block;
  
  /* Safari */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}



/* KKKK6 .c_hidden */

.c_hidden
{
  display: none;
  visibility_: hidden;
}