﻿/**
* SGD UI Theme × easyCSM 
* Author: sgd.studio
* Usage: Overrides bootstrap.easycare.css and CustomStyle.css
* Version: 1.0.0 
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Design System */
  
  /* Colors */
  --color-primary: #041e42;
  --color-secondary: #00a680;
  --color-tertiary: #7E7E7E;
  --color-grey-medium: #E2E2E2;
  --color-grey-light: #F8F8F8;
  
  /* Typography */
  --font-family: 'Montserrat', sans-serif;
  --font-heading-1: 48px;
  --line-height-heading-1: 60px;
  --font-heading-2: 30px;
  --line-height-heading-2: 36px;
  --font-heading-3: 24px;
  --line-height-heading-3: 30px;
  --font-paragraph: 20px;
  --line-height-paragraph: 24px;
  --font-label: 18px;
  --line-height-label: 24px;
  
  /* Icons */
  --font-icon-size: 16px;
  --line-height-icon: 24px;
  
  /* Borders */
  --border-width: 2px;
  --border-color: var(--color-grey-medium);
  --border-radius-large: 30px;
  --border-radius-medium: 20px;
  --border-radius-small: 18px;
  --border-radius-xsmall: 12px;
  
  /* Inputs */
  --input-height-min: 70px;
  --input-height-max: 85px;
  --input-width-min: 80%;
  --input-width-max: 100%;
  --input-padding: 24px 100px;
  --input-border-color-focus: var(--color-tertiary);
  --input-label-margin-top: 24px;
  --input-label-margin-left: 20px;
  
  /* Buttons */
  --button-height: 50px;
  --button-min-width: 200px;
  --button-border-radius: 30px;
  --button-padding: 12px;
  --button-text-color: white;
  --button-background-color: var(--color-secondary);
  --button-hover-background-color: #007C60;
  
  /* Small Buttons */
  --button-small-height: 30px;
  --button-small-border-radius: 18px;
  --button-small-padding: 6px 24px;
  
  /* Label */
  --label-height: 12px;
  --label-min-max-width: 75px;
  --label-border-radius: 11px;
  --label-padding: 6px;
  --label-background-color: var(--color-grey-medium);
  
  /* Navbar */
  --navbar-background-color: #1D3554;
  
  /* Snackbar */
  --snackbar-background-color: #9AE5D4;
  --snackbar-error-background-color: #FFB4B4;
  
  /* Modals */
  --modal-padding: 30px;
  --modal-inner-padding: 15px;
  
  /* Table */
  --table-label-font-weight: 600;
}

/*#region BOOTSTRAP overrides */
html {
  font-family: var(--font-family);
}

body {
  font-family: var(--font-family);
  background-color: var(--color-grey-light);
  height: 100vh;
}


/**
* Spinner
* @TODO Replace => <img src="./WebAccess_files/Loading.gif">
*       w/ => <svg class="loader" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="#01A780"/></svg>
*
*/
.easycare-loader {
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.75) !important;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 48px;
  height: 48px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(.5);
  }
  50% {
    transform: scale(1);
  }
}

a {
  color: inherit;
  font-weight: 500;
}

a:focus {
  background-color: transparent !important;
  color: inherit !important;
}
a:active {
  background-color: transparent !important;
  color: inherit !important;
}

.fa {
  font-size: var(--font-icon-size) !important;
}

.table > tbody > tr > th, .table > tbody > tr > td {
  border-top: 1px solid var(--border-color);
}
.table > tbody > tr:hover {
  background-color: var(--color-grey-light);
}

.navbar {
  margin-bottom: 0;
}

.navbar-default {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.navbar-default .navbar-nav > li > a {
  color: white;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
  color: var(--color-grey-medium);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: var(--color-primary);
  color: white;
}
.nav.navbar-nav.navbar-right {
  display: flex;
  align-items: center;
}

a.navbar-brand img {
  width: 220px;
  height: auto;
  margin-top: 6px;
}

.list-group-item {
  background-color: var(--color-grey-light);
  margin-top: 5px;
  padding-left: 0;
  font-size: var(--font-label);
}

.list-group-item a:hover,
.list-group-item a:focus,
.list-group-item a:active {
  color: var(--color-secondary);
  text-decoration: none;
}

.panel {
  border: none;
  box-shadow: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 91%;
}

.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 0;
  border-radius: 0;
}

.panel > .list-group .list-group-item, 
.panel > .panel-collapse > .list-group .list-group-item,
.dropdown .list-group .list-group-item {
  border-bottom: var(--border-width) solid var(--border-color);
}

.dropdown .list-group .list-group-item:last-child {
  border-bottom: none;
}

.panel-title {
  font-size: var(--font-heading-3);
  line-height: var(--line-height-heading-3);
  color: var(--color-primary);
}

.panel-default {
  border-color: transparent;
  background-color: var(--color-grey-light);
}

.panel-default > .panel-heading {
  color: #000000;
  background-color: transparent;
  border-color: transparent;
}

.panel-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.panel-footer {
  background-color: transparent;
  border-top: none;
}

.modal-dialog.modal-lg {
  height: calc(100% - 60px);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.modal-dialog .panel-default {
  background-color: white;
}
.modal-dialog .panel .panel-default,
.modal-dialog .fixed-table-container {
  /* NB: pannello all'interno di un'altro pannello */
  border-radius: var(--border-radius-small);
  border: 1px solid var(--border-color);
}
.modal-dialog .fixed-table-container table {
  border-radius: var(--border-radius-small);
}
.modal-header {
  border-bottom: none;
  padding: var(--modal-padding);
  padding-bottom: var(--modal-inner-padding);
}
.modal-content {
  width: 100%;
  border-radius: var(--border-radius-medium);
  box-shadow: 0 0px 60px rgba(0, 0, 0, 0.25);
  border: 0 !important;
}
.modal-title {
  padding-left: 8px;
  padding-top: 6px;
  font-weight: 600;
  font-size: var(--font-heading-3);
}
.modal-dialog .panel-heading {
  padding-top: 0;
}
.modal-dialog .panel .panel-default .panel-heading {
  padding: 5px var(--modal-inner-padding);
}
.modal-dialog .panel .panel-default .panel-heading a:hover,
.modal-dialog .panel .panel-default .panel-heading a:focus,
.modal-dialog .panel .panel-default .panel-heading a:active {
  color: var(--color-secondary) !important;
  text-decoration: none;
}
.modal-dialog .panel .panel-default .panel-body {
  /* NB: pannello all'interno di un'altro pannello */
  border-top-color: var(--border-color) !important;
}
.modal-dialog .panel-title {
  font-size: 1.5rem;
}
.modal-body {
  padding: var(--modal-padding);
  padding-top: 0;
}
.modal-footer {
  border-top: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--modal-padding);
}
.modal-footer button,
.btn-container button {
  /* bottoni nel footer sono small */
  height: var(--button-small-height) !important;
  border-radius: var(--button-small-border-radius) !important;
  padding: var(--button-small-padding) !important;
  min-width: auto !important;
}

.tooltip {
  font-family: var(--font-family);
}

.popover {
  font-family: var(--font-family);
}

.input-group {
  display: block;
}

.input-group-addon {
  line-height: var(--label-height);
  border-radius: var(--label-border-radius);
  padding: var(--label-padding);
  background-color: var(--label-background-color);
  border: none;
  position: absolute;
  margin-top: var(--input-label-margin-top);
  margin-left: var(--input-label-margin-left);
  z-index: 10;
  width: fit-content;
  min-width: var(--label-min-max-width);
  max-width: var(--label-min-max-width);
}

.form-control {
  border-radius: var(--border-radius-medium);
  border-width: var(--border-width);
  border-color: var(--border-color);
  padding: var(--input-padding);
  min-height: var(--input-height-min);
  max-height: var(--input-height-max);
  min-width: var(--input-width-min);
  max-width: var(--input-width-max);
}

.form-control:focus {
  border-color: var(--input-border-color-focus);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn[disabled]:hover {
  background-color: var(--button-hover-background-color);
  color: var(--button-text-color); 
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  background-color: var(--button-hover-background-color);
  border: none;
  color: white;
  outline: none;
  outline-offset: 0;
}

.btn:active,
.btn.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
}

.input-group .form-control:first-child, 
.input-group-addon:first-child, .input-group-btn:first-child > .btn, 
.input-group-btn:first-child > .btn-group > .btn, 
.input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-radius: var(--border-radius-medium);
}

.input-group .form-control:last-child, 
.input-group-addon:last-child, 
.input-group-btn:last-child > .btn, 
.input-group-btn:last-child > .btn-group > .btn, 
.input-group-btn:last-child > .dropdown-toggle, 
.input-group-btn:first-child > .btn:not(:first-child), 
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-radius: var(--border-radius-medium);
  background-color: var(--color-grey-light);
  box-shadow: none;
}

.btn:not(a),
.btn-default,
.inputfile,
.fileContainer [type=file] {
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  height: var(--button-height);
  width: fit-content;
  min-width: var(--button-min-width);
  border-radius: var(--button-border-radius);
  padding: var(--button-small-padding);
  border: none;
  font-weight: 600;
}
.btn-default {
  font-size: 1.6rem;
}

.btn:hover, 
.btn-default:hover {
  background-color: var(--button-hover-background-color); 
  color: var(--button-text-color); 
}

.alert-info {
  background-color: #FFFC9E;
  border-color: #E6D300;
  color: black;
}
.alert {
  border-radius: var(--border-radius-xsmall);
  margin-bottom: 0;
}

.bootstrap-table {
  margin-top: 20px;
  height: 100%;
}

.bootstrap-table .table>thead>tr>th {
  text-transform: uppercase;
  font-weight: var(--table-label-font-weight);
}

.bootstrap-table a .fa, .modal-dialog a .fa, .modal-dialog a i.glyphicon {
  color: var(--button-background-color);
}

.bootstrap-table a .fa:hover, .modal-dialog a .fa:hover, .modal-dialog a i.glyphicon:hover {
  color: var(--button-hover-background-color);
}

form .fixed-table-container {
  /* height: 100% !important; */
  height: 98% !important;
  /* height: 86% !important; */
  border: none;
}
form .fixed-table-container th,
form .fixed-table-container td {
  border-left: none;
}

form .fixed-table-body {
  max-height: 390px;
}

form .fixed-table-pagination {
  position: absolute;
  bottom: 0;
}
.modal-dialog .fixed-table-container .fixed-table-pagination {
  bottom: -50px;
}

form .fixed-table-toolbar .bs-bars, .fixed-table-toolbar .columns, .fixed-table-toolbar .search {
  /* display: none; */
  margin: 0;
}
form .fixed-table-toolbar .form-control {
  padding: 15px;
  min-height: auto;
}

form .fixed-table-loading {
  padding-top: 2rem;
}

.fixed-table-pagination {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.fixed-table-pagination .pagination-detail {
  display: flex;
  gap: 20px;
  align-items: center;
}

.fixed-table-pagination .pagination-info {
  text-transform: uppercase;
  font-weight: var(--table-label-font-weight);
}

select,
.fixed-table-pagination .btn.dropdown-toggle {
  background-color: white;
  color: black;
  border: 2px solid var(--color-grey-medium);
  border-radius: var(--border-radius-xsmall);
  width: auto;
  min-width: auto;
  height: auto;
  min-height: auto;
}

.fixed-table-pagination .btn.dropdown-toggle:active,
.fixed-table-pagination .btn.dropdown-toggle:focus {
  background-color: white;
}

.fixed-table-pagination .btn.dropdown-toggle .caret {
  color: var(--color-grey-medium);
  margin-left: 5px;
}

.fixed-table-pagination .pagination ul {
  display: flex;
  gap: 2px;
  border: 2px solid var(--color-grey-medium);
  border-radius: var(--border-radius-xsmall);
  color: black;
}

.fixed-table-pagination .pagination ul li a {
  border: none;
  border-radius: 0;
  padding: 10px 15px;
  color: var(--color-tertiary);
  font-size: 16px;
}

.fixed-table-pagination .pagination ul li a:hover {
  background-color: white;
  color: var(--color-secondary);
}

.fixed-table-pagination .pagination .page-pre a {
  border-top-left-radius: var(--border-radius-xsmall);
  border-bottom-left-radius: var(--border-radius-xsmall);
  border-right: 2px solid var(--color-grey-medium);
}
.fixed-table-pagination .pagination .page-next a {
  border-top-right-radius: var(--border-radius-xsmall);
  border-bottom-right-radius: var(--border-radius-xsmall);
  /* border-left: 2px solid var(--color-grey-medium); */
}

.fixed-table-pagination .pagination .page-number a {
  border-right: 2px solid var(--color-grey-medium);
  /* border-left: 2px solid var(--color-grey-medium);  */
}

.fixed-table-pagination .pagination .page-number.active a {
  background-color: white;
  color: var(--color-secondary);
  font-weight: 600;
}

.fixed-table-pagination .pagination .page-number.active a:hover {
  z-index: 0;
}

/*#endregion BOOTSTRAP overrides */

/*#region CUSTOM STYLES overrides */
body #main-content {
  /* height: 91%; */
  /* height: 100%; */
  height: calc(100% - 92px);
}

body #main-content .row:nth-child(2) {
  height: 100%;
}

.login-buttons-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
  gap: 2rem;
}

.login-buttons-container a.btn {
  color: var(--color-tertiary);
  font-weight: 500;
  text-decoration: underline;
}
.login-buttons-container a.btn:hover{
  background-color: transparent;
}

.update-email-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 650px;
}

.dati-profilo-container {
  padding-top: 4rem !important;
  padding-left: 2rem !important;
  padding-bottom: 16px !important;
  font-size: var(--font-paragraph) !important;
  line-height: var(--line-height-paragraph);
}
.dati-profilo-container div:nth-child(1) {
  font-size: var(--font-heading-3);
  line-height: var(--line-height-heading-3);
  color: var(--color-primary);
}

#partial-view-content #FormIndex .panel {
  max-width: 40%;
  padding-top: 4rem;
}
#partial-view-content #FormIndex .modal-dialog .panel {
  max-width: 100%;
  padding-top: 0;
}

#partial-view-menu .panel-title:first-child:not(.company-select) {
  display: none;
}
#partial-view-menu .panel-default {
  padding: 0 10px;
}
#partial-view-content {
  /* background-color: white; */
  height: 100%;
  padding-right: 0;
}
#partial-view-content form[id^="Form"]:not(form[id="FormIndex"]) {
  height: 100%;
}
#partial-view-content form[id^="Form"]:not(form[id="FormIndex"]) > .panel-default {
  background-color: white;
  height: 100%;
  border-top-left-radius: 60px;
  -webkit-box-shadow: -5px 2px 20px 3px rgb(0 0 0 / 19%);
  box-shadow: -5px 2px 20px 3px rgb(0 0 0 / 19%);
}
#partial-view-content .modal-dialog form[id^="Form"]:not(form[id="FormIndex"]) > .panel-default {
  background-color: white;
  height: 100%;
  border-top-left-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#partial-view-content form[id^="Form"]:not(form[id="FormIndex"]) > .panel-default .panel-body {
  padding: 0 4rem;
}
#partial-view-content .modal-dialog form[id^="Form"]:not(form[id="FormIndex"]) > .panel-default .panel-body {
  padding: 0 1rem;
}
#partial-view-content form[id^="Form"]:not(form[id="FormIndex"]) > .panel .panel-heading {
  padding-top: 40px; 
  padding-left: 40px; 
}
#partial-view-content .modal-dialog form[id^="Form"]:not(form[id="FormIndex"]) > .panel .panel-heading {
  padding-top: 0;
}
#partial-view-content form[id^="Form"]:not(form[id="FormIndex"]) input {
  background-color: white;
}

#footer-navbar {
  /* footer nascosto come da specifica del nuovo tema */
  display: none;
}

#snackbarSuccess, #snackbarError {
  top: auto;
  left: auto !important;
  bottom: 0 !important;
  right: 0;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  color: var(--color-primary) !important;
}

#snackbarSuccess {
  border: 2px solid var(--color-secondary);
  background-color: var(--snackbar-background-color) !important;
}

#snackbarError {
  border: 2px solid red;
  background-color: var(--snackbar-error-background-color) !important;
}

.easycare-sign-out {
  font-size: var(--font-icon-size) !important;
}

.nav.navbar-nav a {
  padding: 12px 16px !important;
  font-size: 1.4rem;
}

.nav.navbar-nav a:hover, .nav.navbar-nav a:focus, .nav.navbar-nav a:active {
  color: var(--color-grey-medium) !important;
  background-color: var(--navbar-background-color) !important;
  border-radius: 12px;
}

.easycare-company-info a {
  display: flex !important;
  gap: 1rem !important;
  /* padding: 0 !important; */
}

.easycare-company-info .list-group-item a {
  padding: 0 !important;
  font-size: var(--font-label);
  gap: 1.8rem !important;
}

.easycare-company-info ul {
  width: auto !important;
  border-radius: 12px !important;
  border: 2px solid var(--color-grey-medium) !important;
  padding: 8px 26px !important;
  background-color: var(--color-grey-light) !important;
  margin-top: 16px !important;
}

.easycare-company-info ul li {
  border: none;
}

.easycare-company-info ul li p {
  display: flex;
  gap: 2rem;
  line-height: var(--line-height-paragraph);
}

.easycare-company-info ul li i {
  color: var(--color-secondary);
}

#FormDocumentiAziende .btn[name=refresh] {
  min-height: auto;
  min-width: auto;
  height: auto;
  width: auto;
  /* padding: 5px; */
}

#FormUploadDocumentiAziendeModal .bootstrap-table .table {
  border-bottom: none;  /* nascondo per non avere riga che taglia, tanto abbiamo la progress bar */
}

#FormUploadDocumentiAziendeModal .panel-body .row:nth-child(3) {
  margin-top: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#FormUploadDocumentiAziendeModal .panel-body .row:nth-child(3) > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#FormUploadDocumentiAziendeModal .progress {
  height: 6px;
  width: 99%;
}

#FormUploadDocumentiAziendeModal .modal-footer {
  width: 100%;
}

#FormUploadDocumentiAziendeModal .header-btn-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#FormUploadDocumentiAziendeModal .header-btn-container .btn-container {
  margin-top: -50px;
}

#FormUploadDocumentiAziendeModal select {
  padding: 5px;
  background-color: var(--color-grey-light);
}

#FormUploadDocumentiAziendeModal input {
  padding: 15px;
  line-height: normal;
  min-height: auto;
  min-width: auto;
  background-color: var(--color-grey-light) !important;
}

#FormUploadDocumentiAziendeModal td {
  vertical-align: middle;
}

#FormUploadDocumentiAziendeModal .file-type-icon {
  background-color: white;
  color: var(--color-secondary);
}

#FormElencoAziendeModal > .form-group > .input-group {
  display: flex;
}

#FormElencoAziendeModal .fixed-table-container {
  padding-bottom: 75px !important;
  /* max-height: 450px !important; */
} 

#FormElencoAziendeModal .bootstrap-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 10px;
}

#FormElencoAziendeModal .cerca-azienda-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#FormElencoAziendeModal .cerca-azienda-container > .form-group {
  margin: 0;
}

#FormElencoAziendeModal .pagination-info {
  line-height: 18px;
}

#FormElencoAziendeModal .pagination {
  margin-left: 10px;
}

#FormElencoAziendeModal .fixed-table-pagination {
  margin-bottom: 43px;
  padding: 10px;
}

.company-select {
  font-size: var(--font-label);
  margin-bottom: -20px;
}

.modal-dialog #FormUploadDocumentiAziendeModal .panel .panel-default,
.modal-dialog #FormUploadDocumentiAziendeModal .fixed-table-container {
  border-bottom: none;
}

.kairos-response {
  border-bottom: 1px solid var(--color-tertiary) !important;
}

/*#endregion CUSTOM STYLES overrides */

@media (max-width: 992px) {
  #partial-view-content #FormIndex .panel {
    max-width: 80%;
  }
}

