/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.content-tool {
padding: 5px 20px 20px 20px;
border-radius: 5px;
background: #fff;
box-shadow: 0px 3px 17px 2px #172f4a21;}

.my-tools-response h3 {
   font-size: 18px;
   font-weight: bold;
   padding: 30px 0 20px 0;
}

.my-tools-response .risultato {
   font-weight: bold;
}

.my-tools-response .odd {
   background: #e9edf1;
}
   
   .my-tools-box h6, .my-tools-box h5, .my-tools-box h4, .my-tools-box h3, .my-tools-box h2, .my-tools-box h1,
   .my-tools-row h6, .my-tools-row h5, .my-tools-row h4, .my-tools-row h3, .my-tools-row h2, .my-tools-row h1{
   margin: 5px 0;
}

.my-tools-box tr td {
   
}

.content-tool table {
   padding: 10px;
}

*:focus {
      -webkit-tap-highlight-color: transparent;
      outline: none;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
}

tbody.settings {
   display: flex;
   margin-top: 20px;
   flex-wrap: wrap;
}

.flex5 {
   flex: 5%;
   display: flex;
}

.flex15 {
   flex: 15%;
   display: flex;
}


.flex48 {
   flex: 48%;
   display: flex;
   
}

.flex100 {
      flex: 100%;
      display: flex;
      align-items: flex-start;
}

.codicefiscale {
font-size: 1.2rem!important;
    text-align: center!important;
    padding: 14px;
    color: #fff;
    background: #47af6c;
    font-weight: 600;
    border-radius: 5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.column {
   flex-direction: column;
}

.start {
   align-items: flex-start;
}

.center {
   align-items: center;
}

.info {
   text-align: center;
   padding: 0;
   color: #848d97;
   font-size: 13px!important; margin: 10px 0;
}

tbody.settings tr td {
   font-size: 14px; 
   font-weight: 600;
   margin-top: 5px;
}

.tdline {
border-top: 1px solid #c9cfdc61;
   margin-top: 20px;
   margin-bottom: 20px;
}

.hidefield {
   padding: 0!important;
   margin-left: 10px;
}

.small {
   font-size: 75%;
}

.my-tools-box .header {
   padding: 10px;
   border-radius: 0px;
   margin-bottom: 20px;
   margin-top: 15px;
}

.my-tools-box .header h3 {
   font-size: 1.4rem;
   text-align: center;
   border-bottom: 1px solid #ddd;
}

.my-tools-box .header p {
   font-size: 0.8rem;
   text-align: center;
   margin-bottom: 0;
}

.my-tools-form tr td {
   display: block;
}

.my-tools-box table td.title {
   font-size: 14px;
   font-weight: 600;
   padding-bottom: 0;
}
   
.input-euro {
   position:relative;
}
   
.input-euro input[type="number"] {
   padding-left: 25px!important;
   background-color: #fff;
}
   
.input-euro > i {
   position: absolute;
   display: block;
   transform: translate(0, -50%);
   top: 51%;
   pointer-events: none;
   width: 30px;
   text-align: center;
   font-style: normal;
   color: #627287;
}

input:hover {
   box-shadow: 0px 0px 10px #dddddd;
   transition: box-shadow 0.2s ease-in-out;
}
   
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.content-tool input[type="text"], .content-tool input[type="email"], .content-tool input[type="url"], .content-tool input[type="password"], .content-tool input[type="search"], .content-tool input[type="tel"], .content-tool input[type="number"], .content-tool textarea, .content-tool select {
   background-color: #fff!important;
}
   
.input-perc {
   position:relative;
}
   
.input-perc input[type="number"] {
   padding-right: 20px!important; 
   width: 70px;
}
   
.input-perc > i {
   position: absolute;
   display: block;
   transform: translate(0, -50%);
   top: 52%;
   right: 20px;
   pointer-events: none;
   text-align: center;
   font-style: normal;
   color: #627287;
}

.my-tools-box tfoot {
   font-weight: 800;
}
   
   
   .my-tools-f24 tbody tr td {
      font-weight: bold;
      background: #fff;
      border: 5px solid #d8eff5;
   }
   
   .my-tools-f24 .subtitle th {
      color: #333!important;
      text-transform: none;
      font-size: 12px;
      font-weight: 300;
   }

.my-tools-form select {
   padding: 8px!important;
   font-size: 16px;
   border: 1px solid #c9cfdc!important;
   color: #172f4a!important;
   cursor: pointer;
}

.my-tools-form input {
   padding: 8px!important;
   font-size: 16px;
   border: 1px solid #c9cfdc!important;
   color: #5b6f87!important;
   border-radius: 4px!important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   border-radius: 4px;
   margin-right: 2px;
   opacity: 0.6;
   filter: invert(0.8);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
   opacity: 1
}

input::placeholder {
   color: #00000059;
}

input.descrizione {
   border: none!important;
   box-shadow: 0px 2px 0 #c9cfdc;
   background: #e2e4ec3b!important;
}

.fieldname {
   text-align: left;
   white-space: nowrap;
   font-size: 14px!important;
   font-weight: 700;
   padding-bottom: 0;
}


.my-tools-form tr.settings {
   display:table;
}

.my-tools-form tr.settings td {
   font-size: 14px;
}

.my-tools-box {
   margin: 0 auto 80px;
}

.my-tools-response, .my-tools-form, .my-tools-box table, .my-tools-share{
   margin: 0 auto!important;
   border: none;
}
   
.my-tools-share p {
   font-size: 12px;
   text-align:right;
}

   
.my-tools-response, .my-tools-share{
   margin: 15px 0 0!important;
   padding: 20px;
   background: #f6f9fc;
   border: 2px solid #d7dbe0;font-weight: 600;border-radius: 5px;}
   .my-tools-box tr td, .my-tools-box tr th{border: none;padding-top: 10px;}
   .my-tools-form input, .my-tools-form select, .my-tools-form textarea, .my-tools-form button, .my-tools-share textarea{
   width: 100%;
   min-height: 35px;
   border-radius: 4px;
   border: 1px solid #8c8f94;
   background-color: #fff;
   color: #2c3338;
   padding: 0 8px;
}
.my-tools-share textarea{
   line-height: 1.2;
   padding: 4px 8px;
   font-size:14px;
}
.my-tools-form input[type=checkbox]{
   min-height: auto;
   width: auto;
}

.my-tools-form button{
   background-color: #172f4a;
   color: #fff;
   margin-top: 40px;
   cursor: pointer;
   width: 150px;
   display: block;
   margin: 55px auto 45px;
   
   min-height: 40px;
   font-size: 18px;
/* padding: -7px 10px!important; */
   padding: 0px 20px!important;
}
.my-tools-form button:hover{
   background-color: #0074d9;
}

.my-tools-msg, .my-tools-errors, .my-tools-info{
   font-size: 12px!important;
   font-weight: 600;
   text-align: left;
   padding-top: 0!important;
}
.my-tools-msg, .my-tools-errors{
   color: #d83f6c;
}

.my-tools-form input.error {
border: 2px solid red;
}

.my-tools-info{
   color: gray;
}

.my-tools-search{
   position: relative;
}
.my-tools-search-result{
   position: absolute;
   width: 100%;
   top: 100%;
   background: #fff;
   border: 1px solid #ccc;
   border-top: 0;
   list-style: none!important;
   padding: 0!important;
   margin: 0;
}
.my-tools-search-result>li{
   cursor: pointer;
   padding: 0 5px!important;
}
.my-tools-search-result>li:hover{
   background: #ccc;
}

.my-tools-f24 th{
   line-height: 1;
}
.my-tools-f24 th, .my-tools-f24 td{
   text-align: center;
}
.my-tools-f24>thead>tr>th{
   color: white;
}
.my-tools-f24>thead>tr, .my-tools-f24>tbody>tr, .my-tools-f24>tfoot>tr{
   background: #d8eff5;
}
.my-tools-f24>thead>tr:first-child{
   background: #a2dcea;
}
.my-tools-f24>thead>tr:first-child>th{
   text-align: left;
   padding: 15px;
}

.my-tools-row{
   width: 100%;
   float: left;
}
.my-tools-col-20, .my-tools-col-50, .my-tools-col-80{
   float: left;
}
.my-tools-padding{
   padding: 10px;
   margin: 5px;
   border: 1px solid #c3c4c7;
   box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
   background: #fff;
}
.my-tools-col-20{
   width: 20%;
}
.my-tools-col-50{
   width: 50%;
}
.my-tools-col-80{
   width: 80%;
}
.my-tools-col-100{
   width: 100%;
}




/**
* RADIO BUTTON 
*
*/

.container-radio {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}


.container-radio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 22px;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 1000;
}


.checkmark {
   position: absolute;
   left: 0;
   height: 22px;
   width: 22px;
   background-color: #fff;
      border: 2px solid #c9cfdc;
   border-radius: 50%;
}


.container-radio:hover input ~ .checkmark {
   background-color: #eee;
}


.container-radio input:checked ~ .checkmark {
   background-color: #2196F3;
      -webkit-transition: background-color 0.2s ease-in;
      -moz-transition: background-color 0.2s ease-in;
      -o-transition: background-color 0.2s ease-in;
      transition: background-color 0.2s ease-in;
   border:none;
}


.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}


.container-radio input:checked ~ .checkmark:after {
   display: block;
}


.container-radio .checkmark:after {
   top: 7px;
   left: 7px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: white;
}

/**
* CHECKBOX
*
*/


.container-check {
   display: block;
   position: relative;
   padding-left: 40px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}


.container-check input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 40px;
      width: 100%!important;
      left: 0;
      top: 0;
      z-index: 1000;
}


.checkmark-check {
   position: absolute;
      top: 10px;
      left: 10px;
      height: 22px;
      width: 22px;
      background-color: #eee;
   border-radius: 3px;
}


input ~ .checkmark-check {
      background-color: #fff;
      border: 2px solid #c9cfdc;
}


.container-check:hover input ~ .checkmark-check {
   background-color: #eee;
}


.container-check input:checked ~ .checkmark-check {
   background-color: #2196F3;
   border: none;
      -webkit-transition: background-color 0.2s ease-in;
      -moz-transition: background-color 0.2s ease-in;
      -o-transition: background-color 0.2s ease-in;
      transition: background-color 0.2s ease-in;
}


.checkmark-check:after {
   content: "";
   position: absolute;
   display: none;
}


.container-check input:checked ~ .checkmark-check:after {
   display: block;
}


.container-check .checkmark-check:after {
   left: 8px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

/**
   * Piva Comunitaria
   */
   
h3.piva-com {
   text-align: center;
      background: #fafafa!important;
      padding: 9px 0;
}

.piva-com td {
      font-size: 16px;
      border-bottom: 1px solid #dddddd69!important;
   text-align: left!important;
}	

span#verifica_piva_comunitaria_address br {
      display: inline;
      content: '';
      padding-left: 2px;
}

span#verifica_piva_comunitaria_address br:after {
      content: '-';
}

.piva-com .green {
   color: #62cd92;
   font-weight: bold;
   text-transform: uppercase;
}

.piva-com {
   background: #fff!important;
}

.piva-com tr td {
      display: block;
}


#calcolo_fattura_avvocato_html table tr td, #calcolo_fattura_html table tr td, #calcolo_interessi_table table tbody tr td { 
      text-align: left !important;
}

.table_interessi tr th {
      text-align: center !important;
}

.table_interessi tr:nth-child(odd) {
      background-color: #fff;
}

.table_interessi tr td {
      font-size: 10px;
      padding:14px;
      text-align: center;
}
   
   
/*
* RESPONSIVE
*/
    
@media only screen and (min-width: 1024px) {
    
     .my-tools-box {
    width: 80%;
    }
}
   
@media only screen and (max-width: 767px) {
   .my-tools-col-20, .my-tools-col-50, .my-tools-col-80{
      width: 100%;
   }
   .content-tool {
      padding:0;
   }
   .my-tools-form {
         padding: 0 2px 25px;
   }
   .my-tools-box .header {
      border-radius: 8px 8px 0 0;
   }
   .flex100 {
      flex-direction: column;
}
}