:root {
  --main-brand-color: #5693c9;
  --main-header-bg: #deebf7;
  --brand-red: #da291c;
  --brand-gray: #e2e5e8;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'),
    url('./fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.otf') format('opentype'),
    url('./fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.woff') format('woff'),
    url('./fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.ttf') format('truetype'),
    url('./fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.svg#HelveticaNeueLTStd-Roman') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.eot?#iefix') format('embedded-opentype'),
    url('./fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.otf') format('opentype'),
    url('./fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.woff') format('woff'),
    url('./fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.ttf') format('truetype'),
    url('./fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.svg#HelveticaNeueLTStd-Md') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.eot?#iefix') format('embedded-opentype'),
    url('./fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.otf') format('opentype'),
    url('./fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.woff') format('woff'),
    url('./fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.ttf') format('truetype'),
    url('./fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.svg#HelveticaNeueLTStd-Bd') format('svg');
  font-weight: 600;
  font-style: normal;
}

/*general styles*/
body {
  font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif; /*SANCMANU CCA-315 fuente texto base*/
  font-size: 15px; /*SANCMANU CCA-315 tama�o texto base*/
  color: #20252b;
}

body span,
body p,
body button,
body a,
body div {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.MuiTypography-root {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
  color: #20252b;
}

/*header */
.MuiAppBar-colorPrimary {
  background-color: var(--main-header-bg);
  height: 6rem;
}

.MuiAppBar-colorPrimary > div {
  background-image: url(./img/logos_fiat_solution_small.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
}

.MuiTypography-root.MuiLink-root.MuiLink-underlineHover.MuiTypography-colorPrimary {
  color: var(--main-brand-color)!important;
}

.MuiToolbar-root.MuiToolbar-regular.jss1.MuiToolbar-gutters {
  margin: 1rem;
  height: 4rem;
  min-height: 4rem;
}

/*footer btn*/
.MuiButton-contained.Mui-disabled {
  background-color: var(--main-brand-color);
  opacity: 0.5;
  color: white;
  border: 0;
}

.MuiFormLabel-root.Mui-focused,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  color: var(--main-brand-color);
  border-color: var(--main-brand-color);
}

.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #f44336;
}

.MuiButton-containedPrimary[name='confirm'],
.MuiButton-containedPrimary[name='register'],
.MuiButton-containedPrimary[name='yes'],
.MuiButton-containedPrimary[name='recheck'] {
  background-color: var(--main-brand-color);
  border: 0 !important;
}
.MuiButton-contained[name='confirm']:hover,
.MuiButton-contained[name='register']:hover,
.MuiButton-contained[name='yes']:hover,
.MuiButton-contained[name='recheck']:hover {
  background-color: var(--main-brand-color) !important;
  color: #ffffff;
}
button[name='close'] {
  background-color: var(--main-brand-color) !important;
  color: #ffffff;
}
button[name='close']:hover {
  background: #6b79cc !important;
}
.MuiIcon-colorPrimary,
.MuiSvgIcon-colorPrimary {
  color: var(--main-brand-color)!important;
}
/*yes/no btn grp*/
.MuiButton-contained {
  border: 2px solid var(--main-brand-color);
  box-shadow: none;
}
.MuiButton-contained:hover {
  box-shadow: none;
  background-color: var(--main-brand-color) !important;
  border-color: var(--main-brand-color);
  color: #ffffff;
}
.MuiButton-containedPrimary {
  background-color: var(--main-brand-color);
}

.MuiButton-outlinedSecondary {
  background-color: #ffffff !important;
  border-color: var(--main-brand-color);
  color: var(--main-brand-color);
}

/*events blocs*/
div[name='events'] .MuiButton-contained {
  border: 1px solid var(--main-brand-color);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  background-color: white !important;
  color: #20252b !important;
}
div[name='events'] .MuiButton-contained:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #d8d8d8;
  color: #20252b;
}

/* spinner  */

div[name='CircularProgress'] div svg circle {
  stroke: var(--main-brand-color);
}

/* second action  */
.MuiButton-outlinedSecondary:hover {
  background: none;
  background-color: none;
}
/* icon general color  */
.MuiAvatar-colorDefault {
  background-color: var(--main-brand-color) !important;
}

/*Hide spinner and counter on tracking page*/
div[name="provider-monitoring"] div[name="CircularProgress"] {
 visibility: hidden;
 display: none;
}


.null {
 /*en todos las propiedades de la clase .null pongo !important para evitar herencias de otras clases*/

  background: var(--main-brand-color) !important;
  color: #FFFFFF !important;

}

div[name='breakdown'] button:not(.null),
div[name='spare-tire'] button:not(.null),
div[name='fuel-type'] button:not(.null),
div[name='filled-fuel-type'] button:not(.null),
div[name='vehicle-upside-down'] button:not(.null),
div[name='vehicle-off-road'] button:not(.null),
div[name='key-broken'] button:not(.null),
div[name='found-after-theft'] button:not(.null),
div[name='windscreen-details'] button:not(.null),
div[name='number-of-passengers'] button:not(.null),
div[name='covered-garage'] button:not(.null),
div[name='flat-tire'] button:not(.null),
div[name='highway'] button:not(.null),
div[name='cookieBanner'] button:not(.null) {


  background: #FFFFFF !important;
  color: var(--main-brand-color) !important;

}