@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');

/**/

:root {
  --nero: #444444;
  --grigio: #F5F4F6;
  --grigios: #DEDEDE;
  --bianco: #FFFFFF;
  --colorep: #d6f804;
  --colorepchiaro: #EAFD72;
  
  --coloreok: #d6f804;
  --coloreko: #F78154;
  
  --margin-1: 5px;
  --margin0: 10px;
  --margin1: 20px;
  --margin2: 40px;
  --margin3: 80px;
  
  --testo: 15px;
  --testoh: 20px;
  --titolino: 20px;
  --titolinoh: 25px;
  --titolo: 30px;
  --titoloh: 35px;
  
  --radius: 3px;
  --radiusplus: 20px;
  --transition: .4s;
  
  --logotext: 20px;
  --logotexth: 25px;
  
  --transition: .4s;
  
  --header-height: 40px;
}

/**/
div#tabs {
  margin-bottom: 40px;
}

div#bg_image {
  position: fixed;
  height: auto;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 1000000;
}
div#bg_image img {
  object-fit: cover;
}

div#bg_image div.bg_title {
  background-color: var(--nero);
  color: var(--bianco);
  padding-right: var(--margin1);
  text-shadow: none;
  font-style: initial;
  font-size: var(--testo);
  line-height: var(--testoh);
  height: auto;
  padding: var(--margin0) var(--margin1);
  position: static;
}

div#bg_image div.bg_title img.logo_foot{
  width: 300px;
  height: 25px;
  margin-top: 7px;
  filter: drop-shadow(1px 1px 2px #cff708);
  object-fit: contain;
  object-position: right;
}
div#bg_image.light div.bg_title {
  opacity: 1;
  /*background-color: #333333 !important;*/
  /*background-color: rgba(207,247,8,0.6) !important;*/
}
div#bg_image.light img.logo_foot {
  opacity: 1;
}

@media only screen and (max-width: 1024px){
  div#bg_image div.bg_title {
    padding-right: 0px;
    text-align: center;
  }
  div#bg_image div.bg_title img.logo_foot{
  object-position: center;
  }
}

div.sub_menu {
  background-color: #666666;
}
div.login div.BOX.box_login div.trap {
  background-color: #333333 !important;
  box-shadow: -2px -2px 5px white;
}
div.login div.BOX.box_login div.tria {
  border-top: 50px solid  #333333 !important;
}
div.login div.BOX.box_login div.btnOk {
  background-color: #cff708 !important;
  color:  #333333 !important;
}

#leftbar div.F4M_MENU[doubleBorderDown] {
  border-bottom: 3px double #333333 !important;
}
#leftbar div.F4M_MENU[doubleBorderUp] {
  border-top: 3px double #333333 !important;
}

#leftbar div.F4M_MENU[kind='SEPARATOR'] {
  background-color: #cff708;
  border-bottom: 1px solid #999999;
}
#leftbar div.F4M_MENU.SYS{
  background-color: #666666;
  border-top: 1px solid #333333;
  color: white;
}
div#leftbar[state="open"] {
  top: 108px;
  width: 100%;
  background-color: #44444444;
}
div#leftbar[state="close"] {
  left: -1px;
  top: 108px;
}
.F4M_MENU_GLOBAL {
  position: absolute;
  padding: var(--margin1);
  background-color: var(--bianco);
  border: 1px solid var(--colorep);
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radiusplus);
  top: var(--margin0);
  left: var(--margin0);
}
#leftbar div.F4M_MENU {
  width: 100%;
  border: 1px solid var(--grigio);
  margin: var(--margin0) 0 0 0;
  padding: var(--margin0) var(--margin1);
  background-color: var(--bianco);
  border-radius: var(--radius);
  gap: 10px;
  
  transition: background-color var(--transition), color var(--transition);
}
#leftbar div.F4M_MENU:first-child {
  margin-top: 0;
}
#leftbar div.F4M_MENU > i {
  width: 30px;
  display: flex;
  justify-content: center;
}
#leftbar div.F4M_MENU:hover {
  background-color: var(--nero);
  color: var(--colorep);
}
div#rightbar {
  border-left: 1px solid #333333;
  background-color: #666666;
  background-image: linear-gradient(#666666,#333333);
  right: 0;
}
div#rightbar[state="close"] {
  left: -1px;
}
#top #btn_rightbar {
  border: 1px solid #666666 !important;
  color: #666666 !important;
}
#rightbar {
  border-top: 1px solid #333333 !important;
}
#rightbar div[f4m_type='ICON']{
  background-color: #efefef;
}
#rightbar div[f4m_type='ICON'] .TD.close {
  color: #333333 !important;
  border-left: 1px solid #666666 !important;
}
#rightbar div[f4m_type='ICON'] {
  border-bottom: 1px solid #666666;
}
span.lbl_fx {
  /*color: #cff708 !important;
  text-shadow: 1px -1px 1px #999999;*/
  color: #87a105 !important;
}

div.sub_title div.btn span.button {
  color: #cff708;
}
div.sub_title.have_btn {
  background-image: linear-gradient(to right, rgba(199,230,237,0.0), rgba(188, 1, 1, 0.43) 90%);
  border-top: 1px solid rgba(192,192,192,0.8);
}

.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: #cff708 !important;*/
  border-color: #87a105 !important;
}

div[f4m_collapser][status="close"] {
  background-color: #cff708 !important;
}
div[f4m_collapser] div[closer]{
  background-color: #cff708 !important;
}
div[f4m_collapser] div[opener]{
  background-color: #00a0e7 !important;
  color: #cff708 !important;
}

/**/

body {
  font-family: 'Ubuntu', Verdana, Helvetica, Arial;
  overflow: initial !important;
  margin: 0;
}

.BOX_ANCHOR {
  top: calc(142px + var(--margin2));
}

.BOX_ANCHOR .ANCHOR .goto {
  border-radius: 10px 10px 0 0;
  background-color: var(--nero);
  color: var(--bianco);
  width: auto;
  padding: var(--margin-1);
  box-sizing: initial;
  height: auto;
}

.BOX {
  overflow: initial !important;
  position: relative;
}

.login .BOX .TAB {
  margin-top: 0;
}

div[f4m_type="GRID"][grp_head="true"] div.HEAD table.GRP_HEAD {
  border-radius: var(--radius);
}

div[f4m_type="GRID"][grp_head="true"] div.HEAD table.GRP_HEAD thead th {
  background-color: var(--nero);
  color: var(--bianco);
}

div[f4m_type="GRID"] table th, div[f4m_type="GRID"] table td {
  padding: var(--margin-1);
}

div[f4m_type="GRID"][grp_head="true"] div.HEAD , div[f4m_type="GRID"] div.HEAD , div[f4m_type="GRID"] div.FOOT {
  height: auto;
}

.BOX .TAB {
  border: none;
  overflow: initial !important;
  padding: var(--margin1);
  border-radius: var(--radiusplus) var(--radiusplus) 0 0;
  background-color: var(--grigio);
  margin-top: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
        0 2px 4px rgba(0,0,0,0.07), 
        0 4px 8px rgba(0,0,0,0.07), 
        0 8px 16px rgba(0,0,0,0.07),
        0 16px 32px rgba(0,0,0,0.07), 
        0 32px 64px rgba(0,0,0,0.07);
}

div.F4M_SEARCH div.DATAS div.BOX_GRID {
  margin-top: 0;
  margin-bottom: 0;
}
div.F4M_SEARCH div.DATAS div.BOX_GRID.with_filters {
  margin-top: 0;
}
.filters_in_search {
    flex: 1 0 0;
    display: flex;
    justify-content: end;
    top: 100px;
}

.BOX .TAB.small {
  max-width: 600px;
  border-radius: var(--radiusplus);
}

.BOX .TAB.smaller {
  max-width: 450px;
  border-radius: var(--radiusplus);
}

.BOX_ANCHOR .ANCHOR .goto, div.elem select , div.label , .group_checkbox a.fcs_group_checkbox > label , div.elem input[type=text], div.elem input[type=password], div.elem textarea, label[f4m_error="true"], div[f4m_type="READONLY"] {
  font-size: var(--testo);
  line-height: var(--testoh) !important;
}

div.elem input[type=text]:not(.date), div.elem input[type=password], div.elem textarea, select, input[type=text]:not(.date), input[type=password], textarea {
  padding: var(--margin0) var(--margin0);
}

div.elem input[type=text].date, input[type=text].date {
  padding: calc(var(--margin1) - 12px) var(--margin0);
}

div.elem input[type=text], div.elem input[type=password], div.elem textarea, select, input[type=text], input[type=password], textarea {
  border-radius: var(--radius);
  border: 1px solid var(--grigios);
  box-shadow: 0 0 0 #00000000;
  height: auto;
  
  transition: box-shadow var(--transition), border-color var(--transition);
}

div.elem input[type=text]:focus, div.elem input[type=password]:focus, div.elem textarea:focus, select:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus {
  border-color: var(--colorep) !important;
  box-shadow: 0 0 var(--margin0) var(--colorepchiaro);
}

.group_checkbox a.fcs_group_checkbox:focus > label {
  text-shadow: none;
}

div.label {
  margin-top: var(--margin1);
  white-space: initial;
}

div.label:first-child {
  margin-top: 0;
}

div.elem.gap , .btn-container.gap , .bt-row.gap {
  margin-top: var(--margin1);
}

.bt-row {
  gap: var(--margin1) 0;
}

div.elem {
  margin-top: var(--margin-1);
}

label[f4m_error="true"] {
  color: var(--coloreko);
  margin-top: var(--margin-1);
}

#top {
  background-color: var(--colorep);
  color: var(--nero);
  position: sticky;
  top: 0;
  left: 0;
  padding: var(--margin1) var(--margin0);
  height: auto;
  display: flex;
  justify-content: space-between;
}

.BOX_ACTION .CODE, .BOX .TAB .CODE , div.F4M_SEARCH div.DATAS > div.CODE , div.F4M_SEARCH div.FILTER[show_criteria="true"] .BOX .TAB .CODE , div.F4M_SEARCH .BOX_CRITERIA .CODE {
  height: 1px;
}

div.F4M_SEARCH .BOX_CRITERIA {
  margin-top: calc(91px + var(--margin1));
  background-color: transparent;
  position: static;
  height: calc(75px + var(--margin1));
}

div.F4M_SEARCH div.CRITERIA div.label {
  font-size: var(--titolino);
  line-height: var(--titolinoh) !important;
}

div.F4M_SEARCH div.CRITERIA {
  text-shadow: none;
}

.BOX_ACTION{
  position: static;
  top: 40px;
  background-color: transparent !important;
  height: auto;
  box-shadow: none;
  overflow: initial;
}

.FILTER .BOX .TAB {
  margin-top: 0;
}

div.F4M_SUBTAB_BOX div.BOX_ACTION {
  height: auto;
  margin: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

div.F4M_SUBTAB_BOX .BOX .TAB {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

div.F4M_SUBTAB_BOX div.BOX_ACTION .ACTION {
  margin: 0;
  box-sizing: border-box;
}

.ACTION {
  background-color: transparent !important;
  height: auto;
  border-right: none;
  left: 0;
  display: flex;
  gap: var(--margin0);
  align-items: center;
  justify-content: end;
  overflow: initial;
  padding: var(--margin0) 0;
}
.F4M_SUBTAB .ACTION {
  background-color: var(--bianco) !important;
  padding: var(--margin0);
}

div.F4M_SEARCH div.DATAS div.BOX_ACTION div.ACTION {
  justify-content: start;
  position: relative;
  max-width: 90%;
}

img[src="pipe"] , img[src="spacer"] {
  display: none !important;
}

.ACTION span.button {
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bianco);
  background-color: var(--bianco);
  color: var(--nero);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
        0 2px 4px rgba(0,0,0,0.07), 
        0 4px 8px rgba(0,0,0,0.07), 
        0 8px 16px rgba(0,0,0,0.07),
        0 16px 32px rgba(0,0,0,0.07), 
        0 32px 64px rgba(0,0,0,0.07);
}

.ACTION span.button.save {
  background-color: var(--nero);
  border-color: var(--nero);
  color: var(--coloreok);
}

.ACTION span.button.btnAdd , .ACTION span.button.btnAddFilter {
  background-color: var(--nero);
  border-color: var(--nero);
  color: var(--bianco);
}

.ACTION span.button.delete {
  background-color: var(--nero);
  border-color: var(--nero);
  color: var(--coloreko);
}

.ACTION span.button.save i , span.button.close i , span.button.delete i , span.button.btnBack i , span.button.btnAdd i , span.button > i, span.button.btnSearchFilter i, span.button.btnAddFilter i {
  top: auto;
  left: auto;
  font-size: 25px !important;
}

div.sub_menu {
  left: 0;
  width: 100%;
  text-shadow: none;
  color: var(--colorep);
  background-color: var(--nero);
  font-weight: 700;
  font-size: var(--testo);
  line-height: var(--testoh) !important;
  border-bottom: 2px solid var(--nero);
  height: auto;
  padding: var(--margin-1) var(--margin0);
  border-radius: var(--radius);
  font-style: initial;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div.sub_title {
  margin-left: 0;
  width: 100%;
  border-bottom: none;
  font-weight: 700;
  font-size: var(--testo);
  line-height: var(--testoh) !important;
  color: var(--nero);
  white-space: normal;
}

div.Table.border {
  border-radius: var(--radius) var(--radius) / var(--radius) var(--radius);
}

.fa-stack-2x {
  font-size: 35px;
}

div.f4m_wrap_file div.box_file_open {
  display: flex;
}

div.f4m_wrap_file div.file_name {
  width: auto !important;
  padding-right: 8px;
}

div.f4m_wrap_file .box_button_delete, div.f4m_wrap_image .box_button_delete, div.f4m_wrap_file .box_button_add, div.f4m_wrap_image .box_button_add {
  border-radius: 0;
  border: 1px solid var(--nero);
  background-color: var(--nero);
}

div.f4m_wrap_image div.box_image {
  height: 150px !important;
  width: auto !important;
}

div.f4m_wrap_file.border {
  border-radius: var(--radius);
  overflow: hidden;
}

div.f4m_wrap_searchcombo .f4m_searchcombo_box_icon {
  background-color: var(--nero);
}
div.f4m_wrap_searchcombo .f4m_searchcombo_box_edit {
  background-color: var(--nero);
}
div.f4m_wrap_date .f4m_date_picker {
  background-color: var(--nero);
}

div.sub_menu div.btn {
  position: static;
  display: flex;
}

div.sub_menu div.btn span.button {
  color: var(--bianco);
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.sub_menu div.btn span.button i {
  position: static;
}

div.elem.grid_box {
  width: 100%;
}

div[f4m_type="GRID"] {
  border: none;
  background-color: var(--grigio);
}

div[f4m_type="GRID"] div.HEAD {
  background: var(--grigio);
  border-bottom: 1px solid var(--nero);
}
div[f4m_type="GRID"] div.FOOT {
  background: var(--grigio);
  border-top: 1px solid var(--nero);
}

div.f4m_wrap_file .clip {
  top: 0;
  float: none;
  font-size: 20px;
}

div.f4m_wrap_file div.file_name {
  font-size: 20px;
  line-height: initial;
}

#top #btn_leftbar , #top #my_home, #top #my_logout {
  position: relative;
  color: var(--nero);
}
#top #btn_leftbar, #top #my_home i, #top #my_logout i {
  font-size: 28px !important;
  height: auto;
  width: auto;
}

div.dash table.WRAPPER div.BOXER {
  border-radius: var(--radius);
  background-color: var(--colorepchiaro) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
        0 2px 4px rgba(0,0,0,0.07), 
        0 4px 8px rgba(0,0,0,0.07), 
        0 8px 16px rgba(0,0,0,0.07),
        0 16px 32px rgba(0,0,0,0.07), 
        0 32px 64px rgba(0,0,0,0.07);
}

div.dash .opener {
  border-radius: var(--radius) !important;
}

/**/
.logo-container {
    text-align: center;
    display: flex;
    flex-direction: initial;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    color: var(--color-secondary);
}
.logo-container > .logo-img {
    height: auto;
    width: 70px;
}
.logo-container > .logo-img:last-child {
    width: 140px;
}

/**/

#top #header {
    /* background-color: var(--nero); */
    color: var(--nero);
    font-size: var(--titolo);
    font-weight: 700;
    top: 50%;
    left: 50%;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    transform: translate(-50%, -50%);
}

header , footer {
  color: var(--nero);
  width: 100%;
}
header a , footer a {
  color: var(--nero);
}
.header-container , .footer-container , .container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}
.header-container {
  padding: var(--margin1);
  display: flex;
  align-items: center;
}

/**/

.titolo-pagina {
  font-size: var(--titolo);
  line-height: var(--titoloh);
  font-weight: 600;
  color: var(--nero);
}

.my_btn{
  display: inline-block;
  padding: var(--margin0) var(--margin1);
  background-color: var(--colorep);
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--colorep);
  color: var(--nero);
  font-weight: 700;
  font-size: var(--titolino);
  line-height: var(--titolinoh);
  cursor: pointer;
  text-transform: uppercase;
  margin: 0 auto;
  width: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
    0 2px 4px rgba(0,0,0,0.07), 
    0 4px 8px rgba(0,0,0,0.07), 
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07), 
    0 32px 64px rgba(0,0,0,0.07);
  
  transition: color var(--transition), background-color var(--transition), border var(--transition);
}
.my_btn.con_testo {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.my_btn.con_testo {
  color: var(--nero);
}
.my_btn.con_testo i {
  font-size: 25px !important;
}
.my_btn.con_testo > span {
  font-size: var(--titolino);
  line-height: var(--titolinoh);
  text-align: left;
}
.my_btn:hover , span.button.my_btn:hover {
  background-color: var(--nero);
  color: var(--colorep) !important;
  border-color: var(--nero);
  opacity: 1;
}
.btn-container.center {
  width: 100%;
  text-align: center;
}
.esito_box {
  width: 100%;
}
.esito_box_inner {
  display: flex;
  flex-direction: column;
  gap: var(--margin1);
  border-radius: var(--radius);
  font-size: var(--titolino);
  line-height: var(--titolinoh) !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 200px;
}
.esito_box_inner > i {
  font-size: 35px;
  background-color: var(--colorep);
  color: var(--nero);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
    0 2px 4px rgba(0,0,0,0.07), 
    0 4px 8px rgba(0,0,0,0.07), 
    0 8px 16px rgba(0,0,0,0.07),
    0 16px 32px rgba(0,0,0,0.07), 
    0 32px 64px rgba(0,0,0,0.07);
}
.esito_box_inner_testo {
  text-align: center;
}
.wrong .esito_box_inner > i {
  background-color: var(--coloreko);
  color: var(--bianco);
}

#mappa-indirizzo-cliente {
  z-index: 0;
  height: 400px;
}

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;
}
div[f4m_type="GRID"] table td[type=IMG] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.top_left_part, .top_right_part {
  flex: 0 0 auto;
  display: flex;
  gap: var(--margin1);
  align-items: center;
}
.top_center_part {
  flex: 1 0 auto;
}

.top_btn_con_scritta {
  width: auto;
  display: flex;
  gap: var(--margin0);
  align-items: end;
}
.top_btn_con_scritta > span {
  font-size: 16px;
  font-weight: 300;
}

.ACTION span.button.btn_pillola, .ACTION span.button.btnAdd.btn_pillola, .ACTION span.button.btnAddFilter.btn_pillola, div.sub_menu div.btn span.button.btn_pillola {
  width: auto;
  padding: 0 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
div.sub_menu div.btn span.button.btn_pillola {
  background-color: var(--bianco);
  color: var(--nero);
}
div.sub_menu div.btn span.button.btn_pillola i {
  font-size: 25px !important;
}
.btn_pillola > span {
  font-size: 14px;
  line-height: 16px;
  text-align: left;
}

div[f4m_type="READONLY"].link-txt, a.link-txt , a.link-txt:visited {
  color: #536bb9;
  text-decoration: underline;
}

form .select2-container--default .select2-selection--single , form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}
form .select2-container--default .select2-selection--single {
  border: 1px solid #c0c0c0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #1c1c1c transparent transparent transparent;
}
form .select2-container--default .select2-selection .select2-selection__rendered {
  line-height: 40px;
}

@media only screen and (max-width: 1024px){
  .logo-container {
    display: none;
  }
  .logo-container > .logo-img {
    width: 50px;
  }
  .logo-container > .logo-img:last-child {
    width: 120px;
  }
  .top_btn_con_scritta > span {
    display: none;
  }
  .ACTION {
    margin: 0;
    padding: var(--margin0);
    flex-wrap: wrap;
  }
  .filters_in_search {
    justify-content: start;
  }
  .filters_in_search div.elem select {
    min-width: 250px;
  }
  #top #header {
    position: static;
    transform: none;
    text-align: left;
    padding-left: var(--margin0);
  }
  div#bg_sidebar[state="open"] {
    display: none;
  }
  div#leftbar, div#leftbar[state="open"] {
    top: 69px;
  }
}