/************************** BASE **************************/


@import url('./fonts/hearth-icons/style.css');

:root {
  --input-padding-x: 0;
  --input-padding-y: .75rem;
  --color-fb: #1045AB;
  --color-gray-600: #999999;
  --danger: #F52E2E;
  --bg-light-gray: #F9F9F9;

  --font-family-serif: "Albra", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-family-sans-serif: "neue-haas-unica", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body {
  --bg-color:#fff;
  min-height: 100vh;
  font-family: var(--font-family-sans-serif);
  background: var(--bg-color);
}

h1,h2,h3,h4,h5 /* ,h6 */ {
  font-weight: 400;
}
h1 {
  font-size: 2.375rem;
}
h6 {
  font-weight: 600;
}

h1 strong {
  font-weight: 500;
}

a {
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration: underline;
    color: var(--primary);
}


.font-serif {
  font-family: var(--font-family-serif) !important;
  /* font-weight: 300 !important; */
}
.font-sans-serif {
  font-family: var(--font-family-sans-serif) !important;
}



.icon {
  font-size: 20px;
  color: inherit;
  margin: 8px;
}


/*************************** UTILITY ***************************/


.min-h-100vh {
  min-height: 100vh;
}
.mt-6 {
  margin-top: 4rem !important;
}
.mb-6 {
  margin-bottom: 4rem !important;
}
.my-6 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.pt-6 {
  padding-top: 4rem !important;
}
.pb-6 {
  padding-bottom: 4rem !important;
}
.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.px-6 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

@media screen and (min-width: 768px) {
  .w-md-75 {
    width: 75%;
  }
}

.btn-icon {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.btn-icon > .icon {
  width: 1.33rem;
  height: 1.33rem;
  margin: 0;
}
.btn-icon .icon + * {
  margin-left: .5rem;
}


/* .hi-close {
  transform: rotate(45deg);
}
.hi-close:before {
	content: "\e908";
} */

hr.hr-vertical {
  height: 100%;
  width: 0;
  border-left: 1px solid rgba(0,0,0,.1);
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  hr.hr-md-vertical {
    height: 100%;
    width: 0;
    border-left: 1px solid rgba(0,0,0,.1);
    margin-top: 0;
    margin-bottom: 0;
  }
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/************************* BOOTSTRAP OVERRIDES **************************/

.btn-link {
  font-family: var(--font-family-serif);
}

.form-control {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #000;
}
.form-control:focus {
  box-shadow: 0 2px 0 -1px #000;
}


.form-control, .custom-select {
  /* padding:  var(--input-padding-x); */
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--input-padding-y);
  padding-bottom: var(--input-padding-y);
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  outline: 1px solid #fff;
  outline-offset: -2px;
}

/* FLOATING INPUT LABELS */

.form-group-floating {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-group-floating > input.form-control, select.custom-select {
  height: unset;
  text-shadow: none;
}

.form-group-floating > input,
.form-group-floating > select,
.form-group-floating > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-group-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: var(--color-gray-600);
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
  pointer-events: none;
}

.form-group-floating input::-webkit-input-placeholder,
.form-group-floating select::-webkit-input-placeholder {
  color: transparent;
}
.form-group-floating input:-ms-input-placeholder,
.form-group-floating select:-ms-input-placeholder {
  color: transparent;
}
.form-group-floating input::-ms-input-placeholder,
.form-group-floating select::-ms-input-placeholder {
  color: transparent;
}
.form-group-floating input::-moz-placeholder,
.form-group-floating select::-moz-placeholder {
  color: transparent;
}
.form-group-floating input::placeholder,
.form-group-floating select::placeholder {
  color: transparent;
}

.form-group-floating input:not(:placeholder-shown),
.form-group-floating select:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 4)); /* 2 / 3 */
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-group-floating input:not(:placeholder-shown) ~ label,
.form-group-floating select:not([value=""]) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 10px; /* 12px; */
  color: var(--color-gray-600);
}

/* PER EDGE - Workaround mancata gestione :placeholder-shown da parte di Edge */
@supports (-ms-ime-align:auto) {
  .form-group-floating > label {
    display: none;
    visibility: hidden;
  }
  .form-group-floating input:-ms-input-placeholder,
  .form-group-floating select:-ms-input-placeholder {
    color: var(--color-gray-600);
  }
  .form-group-floating input::-ms-input-placeholder,
  .form-group-floating select::-ms-input-placeholder {
    color: var(--color-gray-600);
  }
  .form-group-floating input::placeholder,
  .form-group-floating select::placeholder {
    color: var(--color-gray-600);
  }
}

/* correzione posizione del triangolo per i campi floating */
.form-group-floating .custom-select {
  background-position: right calc(50% + 9px);
}

.form-group-merged > .form-group-floating:first-child > .form-control {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* border-bottom-width: 0; */ /* @todo gestire dinamicamente con variabile bootstrap */
}
.form-group-merged > .form-group-floating:not(:last-child):not(:first-child) > .form-control {
  border-radius: 0;
  /* border-bottom-width: 0; */ /* @todo gestire dinamicamente con variabile bootstrap */
}
.form-group-merged > .form-group-floating:last-child > .form-control {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-group-merged > .form-group-floating:not(:last-child) {
  margin-bottom: 0;
}

.custom-control {
  padding-bottom: .5rem;
}

/* @media (min-width:992px) {
  .modal-lg,
  .modal-xl {
   max-width: none;
  }
} */
/* .modal-content {
    border-radius: 12px;
} */
.modal-header {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    min-height: calc(36px + 1rem + 1rem);
  }
  .modal-header .close, .modal-header .back {
    position: absolute;
    top: 0;
    right: 0;
    margin: unset;
    height: 100%;
    transition: opacity .1s ease;
    padding: .5rem 1.5rem .5rem 1.5rem;
    font-size: .875rem;
    opacity: 1;
  }

  .modal-header .back {
    right: unset;
    left: 0;
    padding: .5rem 1.5rem;
  }

  .modal-header .back:not(:disabled):not(.disabled):focus, .modal-header .back:not(:disabled):not(.disabled):hover {
    opacity: .7;
  }

  .modal-header .modal-title {
    display: block;
    font-size: 18px;
    text-align: center;
    font-style: italic;
    font-weight: 500;
    width: 100%;
    /* Simulo la presenza di slot di inizio e fine per l'header della modale */
    padding: 0 3rem;
}
.modal-body {
    padding: 1.5rem;
}


.app-popover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.app-popover .popover-header-ctn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  padding-bottom: .5rem;
}
.app-popover .popover-header-ctn .popover-header {
  font-size: .875rem;
	font-style: italic;
  text-transform: uppercase;
  padding: 0;
}
.app-popover .popover-header-ctn .popover-close-btn {
  color: #fff;
  font-size: 22px;
  padding: 0;
}
.app-popover .popover-body {
  padding: 1rem;
  padding-top: .5rem;
}


/************************* CUSTOM *************************/

.logo-logotype {
  width: 150px;
  height: 32px;
  background: url("./svgs/logo-logotype-web.svg") no-repeat center;
  background-size: contain;
}
.logo-pictogram {
 width: 64px;
 height: 64px;
 background: url("./svgs/logo-pictogram-web.svg") no-repeat center;
 background-size: contain;
}
.logo-pictogram.logo-pictogram--black {
  background: url("./svgs/logo-pictogram-web--black.svg") no-repeat center;
  background-size: contain;
 }

.avatar {
  background-color: #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid #868788;
}

.region-radio {
  border: 2px solid #000;
  padding: 1rem .75rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  .region-radio {
    margin-bottom: .75rem;
  }
}
.region-radio > label {
  margin-bottom: 0;
  margin-left: .75rem;
}

.place-card {
  border: 2px solid #000;
  padding: .5rem 1rem;
  margin-bottom: 1.5rem;
  transition: border-width .2s ease, background-color .2s ease;
}
.place-card--active {
  border-color: var(--primary);
  background-color: #fafafa;
}
.place-card--active h5 {
  color: var(--primary);
}
.place-card > h5 {
  font-size: 18px;
}
.place-card > ul {
  margin: 0;
  padding-inline-start: calc(1rem + 4px);
  line-height: 1.8;
  /* list-style-image: ; */
}

.role-card {
  padding: 1rem;
  /* border: 2px solid #ddd; */
  position: relative;
  height: calc(100% - 56px); /* evito di catturare anche lo spazio preso da "n posti disponibili" */

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  cursor: pointer;
}

.role-card.role-card--active {
  border: 2px solid #000;

}
.role-card p {
  margin-bottom: 0;
}
.role-card s {
  color: #808080;
}

/* .role-card .role-card-checkbox-absolute {
  position: absolute;
  margin: 1rem;
  top: 0;
  left: 0;
} */

.role-card .role-card-header {
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  margin-bottom: 2rem;
  /* padding-left: 2rem;
  padding-right: 2rem;
   text-align: center; */
}

.role-card .role-card-flag {
  position: absolute;
  top: 0;
  right: 0;
  background: #2D9BF0;
  color: #fff;
  padding: .5rem;
  font-weight: 600;
  transform: translateX(15%) translateY(-50%);
}

.search-field {
  width: 100%;
  position: relative;
}
/* icona del search-field */
.search-field::before {
  content: '🔍'; /* @temp */
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 100%;
  font-size: 16px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.search-field > input {
  border: 2px solid #aaa;
  width: 100%;
  padding: .33rem;
  padding-left: calc(.33rem + 24px);
}

.custom-modal .modal-content {
  border-radius: 0;
}
.custom-modal .modal-footer {
  border-top: none;
  justify-content: center;
}
.custom-modal .modal-header {
  border-bottom: none;
}
.custom-modal .modal-header > .close {
  opacity: 1;
  padding-top: .5rem;
  padding-bottom: .5rem;
}


.btn-fb {
  color:#fff;
  background-color:var(--color-fb);
  border-color:var(--color-fb);
 }
 .btn-fb:hover {
  color:#fff;
  background-color:#23272b;
  border-color:#1d2124
 }
 .btn-fb.focus,
 .btn-fb:focus {
  color:#fff;
  background-color:#23272b;
  border-color:#1d2124;
  box-shadow:0 0 0 .2rem rgba(82,88,93,.5)
 }
 .btn-fb.disabled,
 .btn-fb:disabled {
  color:#fff;
  background-color:var(--color-fb);
  border-color:var(--color-fb)
 }
 .btn-fb:not(:disabled):not(.disabled).active,
 .btn-fb:not(:disabled):not(.disabled):active,
 .show>.btn-fb.dropdown-toggle {
  color:#fff;
  background-color:#1d2124;
  border-color:#171a1d
 }
 .btn-fb:not(:disabled):not(.disabled).active:focus,
 .btn-fb:not(:disabled):not(.disabled):active:focus,
 .show>.btn-fb.dropdown-toggle:focus {
  box-shadow:0 0 0 .2rem rgba(82,88,93,.5)
 }

 .btn-fb-block {
   display: block;
   margin: 0 auto;
   width: 100%;
 }
 @media screen and (min-width: 768px) {
  .btn-fb-block {
    max-width: 50vw;
  }
 }

 .overview-header {
   width: 90%;

 }

 .overview-list {
   margin-top: 3rem;
   margin-bottom: 3rem;
 }
 .overview-list > .overview-list-item {
  display: flex;
  align-items: center;
  justify-content: start;
 }
 .overview-list > .overview-list-item p {
   margin-bottom: 0;
 }

 .overview-list > .overview-list-item > *:not(:last-child) {
   margin-right: 1.5rem;
 }

 .overview-list > .overview-list-item:not(:last-child) {
   margin-bottom: 2rem;
 }


 .form-muted-text {
    font-size: 14px;
    color: #0008;
 }

 .form-text {
     font-size: 14px;
     /* padding-left: 4px;
     padding-right: 4px; */
 }
 .form-text li {
    font-size: 12px;
 }

 .side-page-container {
  --page-width: 992px;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
}

.side-page-container-bg {
  width: calc(100vw - var(--page-width));
  /* height: 100vh;
  position: relative; */
}
.side-page-container-bg img {
  --bg-color: #eee;
  background-color: var(--bg-color);
	width: calc(100vw - var(--page-width));
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: fixed;
	top: 0;
	/* left: var(--page-width); */
}

 .side-page {
   background-color: #fff;
   width: var(--page-width);
   padding-left: 5rem;
   padding-right: 5rem;
   /* transition: margin .25s ease, width .25s ease; */
   /* width: 60vw; */
   display: flex;
   align-items: center;
   z-index: 1;
  }
  .side-page-content {
    width: 100%;
  }

  @media screen and (max-width: 991px) {
    .side-page-container {
      flex-direction: column;
      overflow-x: hidden;
    }

    .side-page-container-bg {
      width: 100vw;
      height: 25vh;
    }
    .side-page-container-bg img {
      width: 100%;
      position: unset;
    }

    .side-page {
      min-width: unset;
      width: 100%;
      /* margin-top: 25vh; */
      padding-left: 2rem;
      padding-right: 2rem;
    }
 }

 @keyframes opacity {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .anim-opacity {
    animation: opacity .3s ease;
    animation-fill-mode: both;
  }

  .loading-dots {
    display: inline-block;
    width: 38px;
    height: 38px; /* <-- fasullo? */
    background: url("../shared/svgs/loading-dots.svg") no-repeat;
    fill: white;
    animation: opacity .33s ease;
  }

 .btn-loading {
    transition: color .33s ease;
    color: transparent !important;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
 }
 .btn-loading::after {
    content: '';
    position: absolute;
    top: calc(50% - .75rem);
    left: calc(50% - .75rem);
    width: 1.5rem;
    height: 1.5rem;
    border: .2em solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: opacity .33s ease, spinner-border .75s linear infinite;
 }


 .wizard-page {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100vh;
 }

 .wizard-page .wizard-page-content {
    height: 100%;
    overflow: auto;
  }

  .wizard-page .wizard-page-content > .container {
    margin: 0 auto;
    /* v  ignore container max breakpoint  v */
    max-width: 992px;
  }

 .wizard-page .wizard-footer {
     width: 100%;
     background-color: #fff;
 }

 .wizard-page .wizard-footer>.wizard-footer-slots {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .5rem 5rem;

 }

 .wizard-page .wizard-footer > .wizard-footer-progress {
   width: 100%;
   height: 4px;
   background-color: #eee;
 }
 .wizard-page .wizard-footer > .wizard-footer-progress > .wizard-footer-progress-value {
  height: 4px;
  background-color: #000;
  transition: width .5s ease;
}

.wizard-page .wizard-footer > .wizard-footer-alert-container > .wizard-footer-alert {
  padding: .5rem;
  background: #C4C4C4;
  font-size: .875rem;
  font-weight: 500;
}

 /* .wizard-page .wizard-footer>progress[value]+.wizard-footer-slots {
   padding-top: calc(.5rem + 4px);
 }
 .wizard-page .wizard-footer>progress[value] {
   appearance: none;
   width: 100%;
   height: 4px;
   position: absolute;
   background: #eee;
 }
 .wizard-page .wizard-footer>progress[value]::-webkit-progress-bar,
 .wizard-page .wizard-footer>progress[value]::-moz-progress-bar {
   background-color: #eee;
 }
 .wizard-page .wizard-footer>progress[value]::-webkit-progress-value,
 .wizard-page .wizard-footer>progress[value]::-moz-progress-value {
   background: #000;
 } */

label.card:not(.card-custom) {
  margin: 0;
}

/*  .card-container--has-selected .card {
     opacity: .75;
 } */

.card-selectable-radio:checked + .card-selectable {
  border-color: var(--primary);
  border-width: 2px;
  background-color: #fff;
  opacity: 1 !important;
  cursor: auto;
}
.card-selectable {
    border-width: 1px;
    cursor: pointer;
    transition: border-color .1s ease, background .2s ease, opacity .1s ease;
}
.card-selectable:hover {
    background-color: #fbfbfb;
}
.card-selectable:active{
    background-color: #f2f2f2;
}

.card-selectable-radio[disabled] + .card .card-custom-content {
  opacity: .5;
}

label.card.card--with-avatar {
  padding-top: 0 !important;
  /* margin-top: 32px !important; */
}

label.card.card--with-avatar .avatar {
  transform: translateY(-32px);
}

.card-selectable-radio:checked + .card-selectable.card.card--with-avatar .avatar {
  border-color: #000;
}

.card-custom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  min-height: 82px;
  margin-bottom: .5rem;
}

.header-image {
  width: 100%;
  object-fit: cover;
  height: 256px;
  background-color: #c4c4c4;
}


.brand-toolbar {
  padding: 20px 0;
}
.brand-toolbar .logo-pictogram {
  width: 60px;
  height: 60px;
}

#selezioneTerritorioModal .modal-dialog {
  width: 700px;
  max-width: 100vw;
}

.back-arrow{
    cursor:pointer;
}