@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Thin.woff2") format("woff2"), 
    url("../fonts/Roboto-Thin.woff") format("woff"), 
    url("../fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Light.woff2") format("woff2"), 
    url("../fonts/Roboto-Light.woff") format("woff"), 
    url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Regular.woff2") format("woff2"), 
    url("../fonts/Roboto-Regular.woff") format("woff"), 
    url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Medium.woff2") format("woff2"), 
    url("../fonts/Roboto-Medium.woff") format("woff"), 
    url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Roboto";
  src: url("./fonts/Roboto-Bold.woff2") format("woff2"), 
    url("../fonts/Roboto-Bold.woff") format("woff"), 
    url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
}

.alterna-cx-container * {
  font-family: "Roboto", sans-serif !important;
}

.alterna-cx-card-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
}

.alterna-cx-card-content {
  font-family: "Roboto", sans-serif !important;
}

.alterna-cx-card-actions button:focus, html[dir] .alterna-cx-card-actions button:not(:disabled):hover {
  background: #999999 !important;
}

.alterna-cx-textarea:focus, html[dir] .alterna-cx-textinput:focus {
  -webkit-box-shadow: 0 0 5px 0 rgba(220,36,31,0.5) !important;
   box-shadow: 0 0 5px 0 rgba(220,36,31,0.5) !important;
   border-color: rgba(220,36,31,0.5) !important
}

.alterna-cx-card-title.alterna-cx-web-header {
    background-color: #FF0000  !important;
}

.alterna-cx-card-title {
    color: #FF0000;
}

.alterna-cx-card-actions button.alterna-cx-trigger-prev,
.alterna-cx-card-actions button.alterna-cx-trigger-prev:not(:disabled):hover {
  color: #FF0000 !important;
  background: #fefefe !important;
}

.alterna-cx-card-actions button.alterna-cx-trigger-next,
.alterna-cx-card-actions button.alterna-cx-trigger-next:not(:disabled):hover {
  color: #fefefe !important;
  background: #FF0000 !important;
}

.alterna-cx-choice-other .alterna-cx-char-counter {
  color: #000000 !important;
}

.alterna-cx-choice input:checked+.alterna-cx-choice-other {
  background: #fff !important;
}

.alterna-cx-choice input:checked+.alterna-cx-choice-label>label, .alterna-cx-choice input:checked+.alterna-cx-choice-other>label, .alterna-cx-choice input:checked+.alterna-cx-choice-label>label::before, .alterna-cx-choice input:checked+.alterna-cx-choice-other>label::before, .alterna-cx-choice input:checked+.alterna-cx-choice-label>label::after, .alterna-cx-choice input:checked+.alterna-cx-choice-other>label::after {
  color: #fefefe !important;
}

.alterna-cx-choice .alterna-cx-choice-label>label, .alterna-cx-choice .alterna-cx-choice-other>label, .alterna-cx-choice .alterna-cx-choice-label>label::after, .alterna-cx-choice .alterna-cx-choice-other>label::after {
  color: #000000 !important;
}

.alterna-cx-choice .alterna-cx-choice-label>label:hover, .alterna-cx-choice .alterna-cx-choice-other>label:hover, .alterna-cx-choice .alterna-cx-choice-label>label:hover::after, .alterna-cx-choice .alterna-cx-choice-other>label:hover::after {
  color: #fefefe !important;
}

.alterna-cx-textarea, .alterna-cx-textinput{
  color: #000000 !important;
}

.alterna-cx-choice .alterna-cx-choice-other .alterna-cx-textarea{
  color: #000000 !important;
}

.alterna-cx-choice input:checked + .alterna-cx-choice-label > label, .alterna-cx-choice input:checked + .alterna-cx-choice-other > label{
  background: #FF0000 !important;
}

.alterna-cx-choice .alterna-cx-choice-label > label:hover, .alterna-cx-choice .alterna-cx-choice-other > label:hover{
  background: #FF0000 !important;
}

.alterna-cx-char-counter{
    color: #000000 !important;
}

.alterna-cx-card-actions button{
    color: #fff !important;
    background-color: #FF0000 !important;
}

.alterna-cx-card-actions button:focus, .alterna-cx-card-actions button:not(:disabled):hover{
    color: #fff !important;
    background-color: #FF0000 !important;
}

.alterna-cx-select .alterna-cx-placeholder{
    color:#FF0000 !important;
}

.alterna-cx-select .alterna-cx-placeholder:hover{
    background:#FF0000 !important;
    color: #fff !important;
}

.alterna-cx-select .alterna-cx-placeholder::after{
    color:#FF0000 !important;
}

.alterna-cx-select .alterna-cx-placeholder::after{
    color: #fff !important;
}

.alterna-cx-textarea:focus, .alterna-cx-textinput:focus{
    border-color: FF0000 !important;
    webkit-box-shadow: 0 0 5px 0 FF0000 !important;
    box-shadow: 0 0 5px 0 FF0000 !important;
}

.alterna-cx-card-content.alterna-cx-icon-remove {
  color:#000000;
}

.alterna-cx-card-close::before {
  color: #FF0000 !important;
}

.alterna-cx-card-close:hover{
  background: #FF0000 !important;
}

.alterna-cx-card-close:hover::before{
  color: #fff !important;
}

.alterna-cx-spinner > div:before{
  background-color:#FF0000 !important;
}