/* These styles are generated from project.scss. */
:root {
  --primarycolor: #212121;
  --secondarycolor: #d13b66;
  --personalizedbackgroundcolor: #f5f7ff;
  --personalizedbackgroundcolor2: #dce0ea;
  --baucolor: #94abbc;
  --baucolortransparent: #94abbcaa;
  --visioncolor: #d13b66;
  --visioncolortransparent: #d13b66aa;
  --myscenariocolor: #8db736;
  --myscenariocolortransparent: #8db736aa;
  --hazardcolor: #56ABD6;
  --bordercolor: #93ABBC;
}

/* DIFERENTES TIPOS DE VARIANTES PARA LA FUENTE */

.roboto-header {
  font-size: 3rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-header-medium {
  font-size: 2rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
  font-size: 0.8rem;
}

.file-message {
  font-size: large;
}

p,
ul {
  line-height: 2;
}

input,
button,
a,
select,
textarea {
  background-color: transparent;
  border-radius: 0 !important;
}

/* COLORES */
.modal-content {
  border-radius: 0 !important;
}

.modal {
  background-color: #280f1ac4 !important;
}

.color-secondary {
  color: var(--secondarycolor);
}

.background-primary {
  background-color: var(--primarycolor);
}

.borders-primary {
  border-color: var(--primarycolor);
}

.borders-secondary {
  border-color: var(--secondarycolor);
}

.borders-bau {
  border-color: var(--baucolor);
}

.borders-vision {
  border-color: var(--visioncolor);
}

.borders-my {
  border-color: var(--myscenariocolor);
}

.bg-bau {
  background: var(--baucolor);
}

.color-bau {
  color: var(--baucolor);
}

.color-bau::-webkit-slider-thumb {
  background: var(--baucolor);
}

.color-bau::-moz-range-thumb {
  background: var(--baucolor);
}

.color-bau::-ms-thumb {
  background: var(--baucolor);
}

.color-opc-bau::-webkit-slider-thumb {
  background: #95a3d8;
}

.color-opc-bau::-moz-range-thumb {
  background: #95a3d8;
}

.color-opc-bau::-ms-thumb {
  background: #95a3d8;
}

.bg-BF {
  background: black;
}


.color-BF {
  color: black
}

.color-BF::-webkit-slider-thumb {
  background: black
}

.color-BF::-moz-range-thumb {
  background: black
}

.color-BF::-ms-thumb {
  background: black
}

.bg-hazard {
  background: var(--hazardcolor);
}

.color-hazard {
  color: var(--hazardcolor);
}

.color-hazard {
  color: var(--hazardcolor);
}

.color-hazard::-webkit-slider-thumb {
  background: var(--hazardcolor);
}

.color-hazard::-moz-range-thumb {
  background: var(--hazardcolor);
}

.color-hazard::-ms-thumb {
  background: var(--hazardcolor);
}

.bg-HZ {
  background: #ef5120;
}

.color-HZ {
  color: #ef5120;
}

.color-HZ {
  color: #ef5120;
}

.color-HZ::-webkit-slider-thumb {
  background: #ef5120;
}

.color-HZ::-moz-range-thumb {
  background: #ef5120;
}

.color-hazard::-ms-thumb {
  background: #ef5120;
}

.bg-vision {
  background: var(--visioncolor);
}

.color-vision {
  color: var(--visioncolor);
}

.color-vision::-webkit-slider-thumb {
  background: var(--visioncolor);
}

.color-vision::-moz-range-thumb {
  background: var(--visioncolor);
}

.color-vision::-ms-thumb {
  background: var(--visioncolor);
}

.color-opc-vision::-webkit-slider-thumb {
  background: #414fb7;
}

.color-opc-vision::-moz-range-thumb {
  background: #414fb7;
}

.color-opc-vision::-ms-thumb {
  background: #414fb7;
}

.bg-BT {
  background: #1ddddd;
}

.color-BT {
  color: #1ddddd;
}

.color-BT::-webkit-slider-thumb {
  background: #1ddddd;
}

.color-BT::-moz-range-thumb {
  background: #1ddddd;
}

.color-BT::-ms-thumb {
  background: #1ddddd;
}

.bg-my {
  background: var(--myscenariocolor);
}

.color-my {
  color: var(--myscenariocolor);
}

.color-my::-webkit-slider-thumb {
  background: var(--myscenariocolor);
}

.color-my::-moz-range-thumb {
  background: var(--myscenariocolor);
}

.color-my::-ms-thumb {
  background: var(--myscenariocolor);
}

.bg-my {
  background: var(--myscenariocolor);
}

.color-NB {
  color: #a1d318;
}

.color-NB::-webkit-slider-thumb {
  background: #a1d318;
}

.color-NB::-moz-range-thumb {
  background: #a1d318;
}

.color-NB::-ms-thumb {
  background: #a1d318;
}

.bg-1 {
  background-color: var(--personalizedbackgroundcolor);
}

.bg-2 {
  background-color: var(--personalizedbackgroundcolor2) !important;
}

.btn-custom:hover {
  background-color: #dce0ea;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.bg-personalized {
  background-color: var(--primarycolor);
}

/* listados */

ul {
  margin: 0;
}

ul.dashed {
  list-style-type: none;
}

ul.dashed>li {
  text-indent: -5px;
}

ul.dashed>li:before {
  content: "-";
  text-indent: -5px;
}

/* OTROS */
.map {
  height: 300px;
}

.progress {
  border-radius: 0;
}

.switch-control {
  border-radius: 2em !important;
}

.custom-border {
  border: solid var(--personalizedbackgroundcolor2);
  border-width: 0 2px 0 0;
}

.custom-dashed-border {
  border: dashed var(--personalizedbackgroundcolor2);
  border-width: 0 0 1px 0;
}

.dashed-container {
  border: 1px dashed var(--bordercolor);
  min-height: 160px;
}

.table>tbody>tr>td {
  vertical-align: middle;
}

.escenario-edit {
  cursor: grab;
  border: none;
}

.escenario-edit:active {
  cursor: grabbing;
}

button.btn.btn-custom.borders-secondary {
  width: 180px !important;
}