/* QMR CSS BUTTON */

.css-button-arrow {
  min-width: 130px;
  height: 40px;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  /*transition: all 0.3s ease;*/
  transition: all 0.1s ease;
  position: relative;
  display: inline-block;
  outline: none;
  overflow: hidden;
  border-radius: 5px;
  border: none;
  /*box-sizing: border-box;*/
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.449);
  margin-top: 2px;
  margin-bottom: 2px;
}

.css-button-arrow-flat {
  box-shadow: none;
}


.css-button-arrow-extra {
  width: 200px;
}
.css-button-arrow-extra-gran {
  width: 300px;
}

.css-button-arrow-16-pc { /* 6 botons */
  width: 16.666%;
}
.css-button-arrow-20-pc { /* 5 botons */
  width: 20%;
}
.css-button-arrow-25-pc { /* 4 botons */
  width: 25%;
}
.css-button-arrow-30-pc { /* 3 botons */
  width: 30%;
}
.css-button-arrow-33-pc { /* 3 botons */
  width: 33.333%;
}
.css-button-arrow-50-pc { /* 2 botons */
  width: 50%;
}
.css-button-arrow-100-pc{ /* 1 botons */
  width: 100%;
}
.css-button-arrow-49-pc { /* 2 botons */
  width: 49%;
}
.css-button-arrow-99-pc{ /* 1 botons */
  width: 99%;
}

.css-button-arrow-margin-extra{
  margin-top: 6px;
  margin-bottom: 6px;
}

.css-button-arrow-margin-extra-double{
  margin-top: 12px;
  margin-bottom: 12px;
}

.css-button-arrow-mini {
    min-width: 115px;
    height: 30px;
} 

.css-button-arrow-blue {
	color: #fff;
  background-color: #3d348b;
} 
.css-button-arrow-rose {
	color: #fff;
  background-color: #ff6392;
} 
.css-button-arrow-red {
	color: #fff;
  background-color: #ef233c;
} 
.css-button-arrow-sand {
	color: #fff;
  background-color: #ced4da;
} 
.css-button-arrow-green {
	color: #fff;
  background-color: #80ed99;
} 

.css-button-arrow-green-extra {
	color: #fff;
  background-color: #42ab5a;
} 
.css-button-arrow-grey {
	color: #fff;
  background-color: #6c757d;
} 
.css-button-arrow-sky {
	color: #fff;
  background-color: #3a86ff;
} 
.css-button-arrow-black {
	color: #fff;
  background-color: #343a40;
  border-color: #fff;
} 

.css-button-arrow-goldenrod {
	color: #000;
  background-color: #DAA520;
} 

.css-button-color-black {
    color: #000!important;
}

.css-button-color-white{
    color: #fff!important;
}

.css-button-arrow-after:hover {
  border-radius: 5px;
  padding-right: 24px;
  padding-left:  8px;
}
.css-button-arrow-after-mini:hover {
  border-radius: 5px;
  padding-right: 24px;
  padding-left:  8px;
}

.css-button-arrow-before:hover {
  border-radius: 5px;
  padding-left: 24px;
  padding-right:  8px;
}
.css-button-arrow-before-mini:hover {
  border-radius: 5px;
  padding-left: 24px;
  padding-right:  8px;
}

.css-button-arrow:active {
  /*border-width: 3px;
  border-style: solid;
  border-color: #fff;*/
  box-shadow: none;
  /*margin: 1px 1px 0;*/
}

.css-button-arrow-flat:active {
  /*border-width: 3px;
  border-style: solid;
  border-color: #fff;*/
   /*margin: 1px 1px 0;*/
}

.css-button-arrow-after:hover:after {
  opacity: 1;
  right: 10px;
}

.css-button-arrow-after-mini:hover:after {
  opacity: 1;
  right: 10px;
  
}
.css-button-arrow-after:after {
  content: "\00BB";
  position: absolute;
  opacity: 0;
  font-size: 20px;
  line-height: 40px;
  top: 0;
  right: -20px;
  transition: 0.4s;
}
.css-button-arrow-after-mini:after {
  content: "\00BB";
  position: absolute;
  opacity: 0;
  font-size: 20px;
  line-height: 40px;
  top: -7px;
  right: -20px;
  transition: 0.4s;
}


.css-button-arrow-before:hover:before {
  opacity: 1;
  left: 10px;
}
.css-button-arrow-before-mini:hover:before {
  opacity: 1;
  left: 10px;
}
.css-button-arrow-before:before {
  content: "\00AB";
  position: absolute;
  opacity: 0;
  font-size: 20px;
  line-height: 40px;
  top: 0;
  left: -20px;
  transition: 0.4s;
}
.css-button-arrow-before-mini:before {
  content: "\00AB";
  position: absolute;
  opacity: 0;
  font-size: 20px;
  line-height: 40px;
  top: -7px;
  left: -20px;
  transition: 0.4s;
}

.css-button-margin-r {
    margin-right: 4px!important;
}