:root {
    --color1: #9A052F;
    --color2: #ECECEC;
    --color3: #314663;
    --color4: #E9EDF0;

    --bianco0: #FFFFFF;

    --nero1: #333233;

    --margin0: 5px;
    --margin1: 10px;
    --margin2: 20px;
    --margin3: 20px; /* 30px */
    --margin4: 20px; /* 40px */

    --radius0: 10px;
    --radius1: 18px;
    --radius2: 42px;

    --font-size0: 12px;
    --font-size1: 16px;
    --font-size2: 20px; /* 27px */
    --font-size3: 27px; /* 32px */

    --line-height: 5px;

    --box-shadow1: 4px 4px 4px -2px rgba(0, 0, 0, 0.25);

    --container-width: 800px;
    --container-width-full: calc(100vw - (var(--margin2) * 2));
}
@media only screen and (min-width: 768px){
    :root {
        --margin3: 30px;
        --margin4: 40px;
        --font-size2: 27px;
        --font-size3: 32px;
    }
}

div#bg_image img {
    object-fit: cover;
}
.ACTION {
    background-color: var(--color1) !important;
}
.BOX_ACTION{
    background-color: var(--color1) !important;
}
#top #btn_leftbar {
  color: var(--color1) !important;
  font-size: 37px !important;
  top: 2px;
}
#top #header{
  background-color: var(--color2);
  color: var(--color3);
}
/**/
div.F4M_SEARCH .BOX_CRITERIA {
    background-color: var(--color1);
    background-color: color-mix(in srgb, var(--color1) 40%, transparent);
}
/**/
div#bg_image div.bg_title {
    background-color: color-mix(in srgb, var(--color1) 40%, transparent) !important;
}
div#bg_image.light div.bg_title {
    opacity: 1;
}

@media only screen and (max-width: 1024px){
  div#bg_image div.bg_title {
      padding-right: 0px;
      text-align: center;
  }
}
/**/
div.sub_menu {
    background-color: color-mix(in srgb, var(--color1) 40%, transparent);
}
div.login div.BOX.box_login div.trap {
    background-color: color-mix(in srgb, var(--color1) 70%, transparent) !important;
}
div.login div.BOX.box_login div.tria {
    border-top: 50px solid color-mix(in srgb, var(--color1) 70%, transparent) !important;
}
div.login div.BOX.box_login div.btnOk {
    background-color: var(--color1) !important;
    color: #ffffff !important;
}
/**/
#leftbar div.F4M_MENU[doubleBorderDown] {
    border-bottom: 3px double var(--color1) !important;
}
#leftbar div.F4M_MENU[doubleBorderUp] {
    border-top: 3px double var(--color1) !important;
}

#leftbar div.F4M_MENU[kind='SEPARATOR'] {
    background-color: color-mix(in srgb, var(--color1) 20%, #FFFFFF);
    border-bottom: 1px solid var(--color1);
}
#leftbar div.F4M_MENU {
    border-top: 1px solid var(--color1);
    background-color: #FFFFFF;
}
#leftbar div.F4M_MENU.SYS{
  background-color: var(--color2);
  border-top: 1px solid var(--color1);
  color: var(--color3);
}
div#leftbar {
    border-right: 1px solid var(--color1);
}
div#rightbar {
    border-left: 1px solid var(--color1);
    background-color: var(--color2);
}
#top #btn_rightbar {
    border: 1px solid var(--color1) !important;
    color: var(--color1) !important;
}
#rightbar {
    border-top: 1px solid var(--color1) !important;
}
#rightbar div[f4m_type='ICON']{
  background-color: #efefef;
}
#rightbar div[f4m_type='ICON'] .TD.close {
    color: var(--color1) !important;
    border-left: 1px solid var(--color2) !important;
}
#rightbar div[f4m_type='ICON'] {
    border-bottom: 1px solid var(--color2);
}
span.lbl_fx {
    color: var(--color1) !important;
    color: color-mix(in srgb, var(--color1) 70%, #000000) !important;
}
div.sub_menu div.btn span.button {
    color: var(--color1) !important;
}
.BOX .TAB {
    border: 1px solid var(--color1);
    overflow: initial !important;
}

div.sub_title div.btn span.button {
    color: var(--color1);
}
div.sub_title.have_btn {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--color1) 0%, transparent), color-mix(in srgb, var(--color1) 50%, transparent) 90%);
    border-top: 1px solid rgba(192,192,192,0.8);
}
/**/
div.f4m_wrap_file .box_button_add {
    background-color: var(--color1);
}
div.f4m_wrap_file .box_button_delete {
    background-color: var(--color1);
}
div.f4m_wrap_image .box_button_add {
    background-color: var(--color1);
}
div.f4m_wrap_image .box_button_delete {
    background-color: var(--color1);
}
div.f4m_wrap_searchcombo .f4m_searchcombo_box_icon {
    background-color: var(--color1);
}
div.f4m_wrap_searchcombo .f4m_searchcombo_box_edit {
    background-color: var(--color1);
}
div.f4m_wrap_date .f4m_date_picker {
    background-color: var(--color1);
}
.group_checkbox a.fcs_group_checkbox:focus > label{
    outline: 0;
    text-shadow: 1px 1px 5px rgba(57, 69, 137, 0.43), -1px -1px 5px rgba(57, 69, 137, 0.43);
}
.group_radio a.fcs_group_radio:focus > label{
    outline: 0;
    text-shadow: 1px 1px 5px rgba(57, 69, 137, 0.43), -1px -1px 5px rgba(57, 69, 137, 0.43);
}
/**/
select:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus{
    border-color: #87a105 !important;
}
/**/
div[f4m_collapser][status="close"] {
  background-color: var(--color2) !important;
}
div[f4m_collapser] div[closer]{
    background-color: var(--color2) !important;
    color: white !important;
}
div[f4m_collapser] div[opener]{
    background-color: var(--color1) !important;
    color: white !important;
}

div#bg_image img.bg_oriz , div#bg_image img.bg_vert {
    object-fit: cover;
}

body div.dash table.WRAPPER div.BOXER {
  background-color: color-mix(in srgb, var(--color1) 20%, transparent);
}

body div.dash .opener {
	background-color: var(--color1);
}

.big_btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: color-mix(in srgb, var(--color1) 20%, transparent);
    border: 2px solid var(--color1);
    border-radius: 5px;
    color: var(--color1);
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;

    transition: color .2s, background-color .2s;
}
.big_btn:hover {
    background-color: #00a0e7;
    color: #ffffff;
}

.F4M_Ricerca_Prenotati .btnBack {
	border-left: none;
}

/**/

div[f4m_type="GRID"] table td[valign=center] {
  vertical-align: middle;
}
div[f4m_type="GRID"] table td[type=IMG] {
  width: 100px;
  min-height: 100px;
  padding: 0;
}

/**/

body {
    background-color: var(--color4);
    width: 100vw;
    overflow-x: hidden;
}

.w-100 {
    width: 100%;
}
.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.pl-none {
    padding-left: 0;
}
.pr-none {
    padding-right: 0;
}
.pt-none {
    padding-top: 0;
}
.pb-none {
    padding-bottom: 0;
}
.ml-none {
    margin-left: 0;
}
.mr-none {
    margin-right: 0;
}
.mt-none {
    margin-top: 0;
}
.mb-none {
    margin-bottom: 0;
}
.pr-0 {
    padding-right: var(--margin0);
}
.pl-0 {
    padding-left: var(--margin0);
}
.pt-0 {
    padding-top: var(--margin0);
}
.pb-0 {
    padding-bottom: var(--margin0);
}
.ml-0 {
    margin-left: var(--margin0);
}
.mr-0 {
    margin-right: var(--margin0);
}
.mt-0 {
    margin-top: var(--margin0);
}
.mb-0 {
    margin-bottom: var(--margin0);
}
.pr-1 {
    padding-right: var(--margin1);
}
.pl-1 {
    padding-left: var(--margin1);
}
.pt-1 {
    padding-top: var(--margin1);
}
.pb-1 {
    padding-bottom: var(--margin1);
}
.ml-1 {
    margin-left: var(--margin1);
}
.mr-1 {
    margin-right: var(--margin1);
}
.mt-1 {
    margin-top: var(--margin1);
}
.mb-1 {
    margin-bottom: var(--margin1);
}
.pr-2 {
    padding-right: var(--margin2);
}
.pl-2 {
    padding-left: var(--margin2);
}
.pt-2 {
    padding-top: var(--margin2);
}
.pb-2 {
    padding-bottom: var(--margin2);
}
.ml-2 {
    margin-left: var(--margin2);
}
.mr-2 {
    margin-right: var(--margin2);
}
.mt-2 {
    margin-top: var(--margin2);
}
.mb-2 {
    margin-bottom: var(--margin2);
}
.pr-3 {
    padding-right: var(--margin3);
}
.pl-3 {
    padding-left: var(--margin3);
}
.pt-3 {
    padding-top: var(--margin3);
}
.pb-3 {
    padding-bottom: var(--margin3);
}
.ml-3 {
    margin-left: var(--margin3);
}
.mr-3 {
    margin-right: var(--margin3);
}
.mt-3 {
    margin-top: var(--margin3);
}
.mb-3 {
    margin-bottom: var(--margin3);
}
.pr-4 {
    padding-right: var(--margin4);
}
.pl-4 {
    padding-left: var(--margin4);
}
.pt-4 {
    padding-top: var(--margin4);
}
.pb-4 {
    padding-bottom: var(--margin4);
}
.ml-4 {
    margin-left: var(--margin4);
}
.mr-4 {
    margin-right: var(--margin4);
}
.mt-4 {
    margin-top: var(--margin4);
}
.mb-4 {
    margin-bottom: var(--margin4);
}

@media only screen and (min-width: 768px){
    .col-sm-12 {
        flex: 12 1 0;
        max-width: auto;
    }
    .col-sm-11 {
        flex: 11 1 0;
        max-width: auto;
    }
    .col-sm-10 {
        flex: 10 1 0;
        max-width: auto;
    }
    .col-sm-9 {
        flex: 9 1 0;
        max-width: auto;
    }
    .col-sm-8 {
        flex: 8 1 0;
        max-width: auto;
    }
    .col-sm-7 {
        flex: 7 1 0;
        max-width: auto;
    }
    .col-sm-6 {
        flex: 6 1 0;
        max-width: auto;
    }
    .col-sm-5 {
        flex: 5 1 0;
        max-width: auto;
    }
    .col-sm-4 {
        flex: 4 1 0;
        max-width: auto;
    }
    .col-sm-3 {
        flex: 3 1 0;
        max-width: auto;
    }
    .col-sm-2 {
        flex: 2 1 0;
        max-width: auto;
    }
    .col-sm-1 {
        flex: 1 1 0;
        max-width: auto;
    }
}
@media only screen and (min-width: 1024px){
    .col-md-12 {
        flex: 12 1 0;
        max-width: auto;
    }
    .col-md-11 {
        flex: 11 1 0;
        max-width: auto;
    }
    .col-md-10 {
        flex: 10 1 0;
        max-width: auto;
    }
    .col-md-9 {
        flex: 9 1 0;
        max-width: auto;
    }
    .col-md-8 {
        flex: 8 1 0;
        max-width: auto;
    }
    .col-md-7 {
        flex: 7 1 0;
        max-width: auto;
    }
    .col-md-6 {
        flex: 6 1 0;
        max-width: auto;
    }
    .col-md-5 {
        flex: 5 1 0;
        max-width: auto;
    }
    .col-md-4 {
        flex: 4 1 0;
        max-width: auto;
    }
    .col-md-3 {
        flex: 3 1 0;
        max-width: auto;
    }
    .col-md-2 {
        flex: 2 1 0;
        max-width: auto;
    }
    .col-md-1 {
        flex: 1 1 0;
        max-width: auto;
    }
}
@media only screen and (min-width: 1200px){
    .col-lg-12 {
        flex: 12 1 0;
        max-width: auto;
    }
    .col-lg-11 {
        flex: 11 1 0;
        max-width: auto;
    }
    .col-lg-10 {
        flex: 10 1 0;
        max-width: auto;
    }
    .col-lg-9 {
        flex: 9 1 0;
        max-width: auto;
    }
    .col-lg-8 {
        flex: 8 1 0;
        max-width: auto;
    }
    .col-lg-7 {
        flex: 7 1 0;
        max-width: auto;
    }
    .col-lg-6 {
        flex: 6 1 0;
        max-width: auto;
    }
    .col-lg-5 {
        flex: 5 1 0;
        max-width: auto;
    }
    .col-lg-4 {
        flex: 4 1 0;
        max-width: auto;
    }
    .col-lg-3 {
        flex: 3 1 0;
        max-width: auto;
    }
    .col-lg-2 {
        flex: 2 1 0;
        max-width: auto;
    }
    .col-lg-1 {
        flex: 1 1 0;
        max-width: auto;
    }
}

.header-outer {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--color4);
}
.header-container {
    width: 100%;
    max-width: var(--container-width-full);
    margin: 0 auto;
    padding: var(--margin2) 0;
}
.header-menu {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--margin1);
}
.header-menu-item {
    padding-bottom: var(--margin1);
    border-bottom: 4px solid transparent;
    font-weight: 600;
}
.header-menu-item:hover
, .header-menu-item.hover {
    border-color: var(--color1);
}

.BOX {
	min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
	padding: var(--margin0);
    flex-direction: column;
}
.BOX form.TAB {
	width: 100%;
	max-width: var(--container-width);

    background-color: #ffffff;
    border: none;
    border-radius: var(--radius2);
    box-shadow: var(--box-shadow1);
    padding: var(--margin4);
}

.btn-nav-outer {
    width: 100%;
    margin-top: var(--margin2);
}
.btn-nav-container {
    width: 100%;
	max-width: var(--container-width);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--margin2);
}
.gs-btn {
    border-radius: var(--radius1);
    background-color: var(--color3);
    color: var(--bianco0);
    box-shadow: var(--box-shadow1);
    padding: var(--margin2) var(--margin3);
    min-width: 200px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);

    cursor: pointer;
}
.btn-white {
    background-color: var(--bianco0);
    color: var(--color3);
    border-radius: var(--radius0);
    border: 0.5px solid var(--color3);
    box-shadow: var(--box-shadow1);
}

.gs-title {
    font-size: var(--font-size3);
    line-height: calc(var(--font-size3) + var(--line-height));
    font-weight: 300;
    color: var(--nero1);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);
}
.gs-title > img {
    height: 40px;
    width: 40px;
    object-fit: contain;
}

.gs-subtitle {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    font-weight: 400;
    color: var(--nero1);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);
}

div.elem.big-input input[type=text], div.elem.big-input input[type=password], div.elem.big-input textarea {
    border-radius: var(--radius1);
    border: 0.5px solid var(--color3);
    background: var(--bianco0);
    box-shadow: var(--box-shadow1);
    padding: var(--margin3) var(--margin2);
}

.btn-text {
    padding-bottom: var(--margin1);
    border-bottom: 8px solid transparent;
    cursor: pointer;
}
.search-type.active .change-search-type
, .btn-text:hover
, .btn-text.selected {
    border-color: var(--color1);
}

.cerca-input {
    position: relative;
}
div.elem.cerca-input input[type=text] {
    padding-right: calc((var(--margin2) * 2) + 10px);
}
.cerca-input > i {
    position: absolute;
    top: 50%;
    right: var(--margin2);
    transform: translateY(-50%);
    color: var(--nero1);
    font-size: 20px;
	cursor: pointer;
}

.results {
	display: flex;
	flex-direction: column;
	gap: var(--margin1);
}
.item-prestazione {
	cursor: pointer;
}
.prestazione-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.results-prestazioni .item-prestazione:not(:last-child) {
	padding-bottom: var(--margin1);
	border-bottom: 1px solid var(--nero1);
}

.lista-prestazioni {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: var(--margin2);
}
.item-prestazione {
	cursor: pointer;
}
.item-prestazione-container {
    display: flex;
    flex-direction: column;
    gap: var(--margin1);
    border: 1px solid var(--color2);
    border-radius: var(--radius1);
    padding: var(--margin1);
}
.item-prestazione-container > * {
    flex: 0 0 0;
}
.item-prestazione-titolo {
    flex: 1 0 0;
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
}
.item-prestazione-immagine {
    border-radius: var(--radius1);
    overflow: hidden;
}
.item-prestazione-pulsante {
    align-items: end;
}
.item-prestazione-pulsante .gs-btn {
    width: fit-content;
    margin-left: auto;
}

.gs-title div[f4m_type="READONLY"] {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
}

.calendario-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);
    color: var(--color3);
    font-size: var(--font-size2);
}
.calendario-prev
, .calendario-next {
    cursor: pointer;
}
.calendario {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px,1fr));
    gap: var(--margin1) 0;
    border-left: 1px solid var(--color3);
}
@media only screen and (min-width: 1024px){
    .calendario {
        grid-template-columns: repeat(auto-fit, minmax(75px,1fr));
    }
}
.calendario_giorno {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color3);
    gap: var(--margin0);
}
.calendario_data {
    flex: 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    margin: var(--margin0);
    font-weight: 400;
}
.calendario_data_numero {
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
}
.calendario_slots {
    display: flex;
    flex-direction: column;
    gap: var(--margin0);
    flex: 1 0 0;
}
.calendario_slot {
    flex: 0 0 0;
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
    padding: var(--margin1);
    margin: 0 var(--margin0);
    border-radius: var(--radius0);
    background-color: var(--color3);
    color: var(--bianco0);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}
.calendario_slot:hover {
    background-color: var(--nero1);
}

.divisore {
    width: 100%;
    height: 1px;
    background-color: var(--color3);
}

.qta-minus
, .qta-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius1);
    background-color: var(--color3);
    color: var(--bianco0);
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    cursor: pointer;
}
.qta-lbl {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    font-weight: 400;
}

/**/

div#f4m_alert {
    background-color: color-mix(in lab, var(--color4) 80%, transparent 20%);
}
div#f4m_alert div#f4m_alert_box {
    background-color: var(--bianco0);
    color: var(--color3);
    border-radius: var(--radius2);
    border: 2px solid var(--color3);
    box-shadow: none;
    max-width: calc(100vw - (var(--margin2) * 2));
}
@media only screen and (min-width: 768px){
    div#f4m_alert div#f4m_alert_box {
        max-width: 50%;
    }
}
div#f4m_alert div#f4m_alert_btn button {
    border-radius: var(--radius0);
    background-color: var(--color3);
    background: var(--color3);
    color: var(--bianco0);
    box-shadow: var(--box-shadow1);
    padding: var(--margin1) var(--margin2);
    min-width: 200px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);

    cursor: pointer;
}