.button{
  font-size: 16px;
  font-weight: 400;
  width: auto;
  height: auto;
  margin: 1px;
  cursor: pointer;
  line-height: 24px;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  text-decoration: none;
  position: relative;
  ;
  {% unless theme.buttons.primary.default.border == null %}
    
  {% endunless %}
  {% unless theme.buttons.primary.default.border_radius == null or theme.buttons.primary.default.border_radius.value == "0" %}
    ;
  {% endunless %}
  {% unless theme.buttons.general_settings.transition_duration == null %}
    ;
  {% endunless %}
}

.button:hover{
  text-decoration: none;
}

.button:focus{
  text-decoration: none;
}

.button .buttonIcon svg, 
.button .externalIcon svg{
  width:16px;
  height:16px;
}
.button.white-btn{
  background-color: #FFF;
  color: #1a2b42;
}

.button.white-btn .buttonIcon svg > *{
  stroke: #1a2b42 !important;
}

.button.white-btn:hover{
  background-color: #F2F6FA;
  color: #1a2b42;
}

.button.white-btn:focus{
  background-color: #F2F6FA;
  color: #1a2b42;
  box-shadow: 0px 0px 8px 0px rgba(18, 138, 251, 0.2);
}

.button.white-btn-outline{
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.button.white-btn-outline:hover{
  background-color: #fff;
  color: #1a2b42;
}

.button.white-btn-outline:focus{
  background-color: #fff;
  color: #1a2b42;
  box-shadow: 0px 0px 8px 0px rgba(18, 138, 251, 0.2);
}

.button.white-btn .buttonIcon svg > *{
  stroke: #1a2b42 !important;
}

.button.white-btn-outline .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.yellow-btn{
  background-color: #FFD600;
  color: #fff;
}

.button.yellow-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.yellow-btn:hover{
  background-color: #ffd600;
  color: #fff;
}

.button.yellow-btn:focus{
  background-color: #ffd600;
  color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(255, 214, 0, 0.6);
}

.button.yellow-btn-outline{
  background-color: transparent;
  border: 2px solid #ffd600;
  color: #ffd600;
}

.button.yellow-btn-outline:hover{
  background-color: #ffd600;
  color: #fff;
}

.button.yellow-btn-outline:focus{
  background-color: #ffd600;
  color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(255, 214, 0, 0.6);
}

.button.yellow-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.yellow-btn-outline .buttonIcon svg > *{
  stroke: #ffd600!important;
}

.button.blue-btn{
  background-color: #128AFB;
  color: #fff;
}

.button.blue-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.blue-btn:hover{
  background-color: #128AFB;
  color: #fff;
}

.button.blue-btn:focus{
  background-color: #128AFB;
  color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(18, 138, 251, 0.6);
}

.button.blue-btn-outline{
  background-color: transparent;
  border: 2px solid #128AFB;
  color: #128AFB;
}

.button.blue-btn-outline .buttonIcon svg > *{
  stroke: #128AFB!important;
}

.button.blue-btn-outline:hover{
  background-color: #128AFB;
  color: #fff;
}

.button.blue-btn-outline:focus{
  background-color: #128AFB;
  color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(18, 138, 251, 0.6);
}

.button.blue-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.blue-btn-outline .buttonIcon svg > *{
  stroke: #128AFB!important;
}

.button.darkblue-btn{
  background-color: #1a2b42;
  color: #fff;
}

.button.darkblue-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.darkblue-btn:hover{
  background-color: #1a2b42;
  color: #fff;
}

.button.darkblue-btn:focus{
  background-color: #1a2b42;
  color: #fff;
  box-shadow: 1px 1px 8px 0px rgba(26, 43, 66, 0.6);
}

.button.darkblue-btn-outline{
  background-color: transparent;
  border: 2px solid #1a2b42;
  color: #1a2b42;
}

.button.darkblue-btn-outline .buttonIcon svg > *{
  stroke: #1a2b42!important;
}

.button.darkblue-btn-outline:hover{
  background-color: #1a2b42;
  color: #fff;
}

.button.darkblue-btn-outline:focus{
  background-color: #1a2b42;
  color: #fff;
  box-shadow: 0px 0px 12px 0px rgba(26, 43, 66, 0.6);
}

.button.darkblue-btn-outline:hover .buttonIcon svg > *, 
.button.darkblue-btn-outline:focus .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.darkblue-btn .buttonIcon svg > *{
  stroke: #fff!important;
}

.button.darkblue-btn-outline .buttonIcon svg > *{
  stroke: #1a2b42!important;
}


.button.darkblue-btn-outline:hover .buttonIcon svg > *, 
.button.darkblue-btn-outline:focus .buttonIcon svg > *{
  stroke: #fff!important;
}


.button .buttonIcon svg{
  width:20px;
  height:20px;
}