/*
Theme Name: MAMMA ROMA TRATTORIA
Theme URI: https://nasuellidesign.it
Author: Nasuelli Design
Author URI: https://nasuellidesign.it
Description: MAMMA ROMA - PAVIA
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nextframe
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* ! Reset */
body, html{font-size: 16px; background: #e3d3b2; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{padding-left: 20px;}
li{margin-bottom: 10px;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #850a06}

:root{
  --menu-bg: #e3d3b2;
  --menu-text: #850a06;
}

/*.page .header-container{background: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0) 60%, rgb(0 0 0 / 0%) 100%);}*/

a{text-decoration: none;color: #850a06}
p{line-height: 1.3}
.seo-title{position: absolute; top:-1000000px!important;}

.spacer{height: 110px;}

.spacers{height: 190px;}


.copertina {height: 40vh; position: relative; background: #333;display: flex; width: 100%; align-items: center;z-index: 0}

.copertina__content{height: 40vh; color: #fff; padding: 20px;width: 100%; text-align: center;position: relative; }

.copertina__content h1{color: #fff; text-shadow: 3px 3px 8px #000;}


/* Banner Compilianz Accessibility*/

.cmplz-information {
  display: none!important;
}

.cmplz-links ul{
  list-style-type: none!important;
}

/* Salta il Contenuto*/

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* per oscurare ai lettori recaptcha dentro il form */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ! Title System */
.text-0{font-size: 5rem; line-height: 1;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}

/* ! Button system */
.button,
.wp-block-button__link{font-size: 1.2rem; text-transform: uppercase; font-weight: bold; background: #961714; color:#fff; padding: 14px 25px;display: inline-block;border-radius: 6rem; border: 3px solid #961714;}

.batton,
.wp-block-button__link{font-size: 1.2rem; text-transform: uppercase; font-weight: bold; background: #e6d2ae; color:#961714; padding: 14px 25px;display: inline-block;border-radius: 6rem; border: 3px solid #961714;}

/* ! header */
/*----------------------------------------------------------------------------------- */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  text-align: center;
}

.logged-in .header-container {
  top: 32px;
}

/* header desktop */
.header {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center; /* centra il blocco menu */
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 2%;
  position: relative; /* indispensabile per posizionare il logo al centro */
  height: 140px; /* altezza fissa per gestire lo spazio iniziale */
  transition: height 0.8s ease;
}

.header a {
  font-family: 'Abril Fatface', serif;
  line-height: 0.9;
  letter-spacing: -1px; /* Avvicina le lettere per un effetto più compatto */
  color: var(--menu-text);
  display: block;
  padding: 15px;
  font-weight: bold;
  font-size: 1.4rem;
  text-decoration: none;
}

/* logo posizionato al centro esatto */
.header a.header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* lo centra al millimetro */
  z-index: 10;
  padding: 0;
}

.header__logo img {
  height: 120px;
  /*margin: 0;
  margin-top: 0rem;
  transition: all 0.8s cubic-bezier(.215, .61, .355, 1);*/
}

/* riduzione altezza header allo scroll */
 /*.scroll-down .header {
 height: 90px;
  margin-top: 0.4rem;
  transition: all 0.8s cubic-bezier(.215, .61, .355, 1);
}*/

/*.scroll-down .header__logo img {
  height: 100px;
}*/

/* menu principale */
.header__menu {
  background: #e6d2ae;	
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border-radius: 6rem;	
  border: 3px solid #850b06;	
  font-weight: bold;
}

.header__menu li {
  display: inline-block;
  position: relative;
  margin: 0 15px;
}

.header__menu li a {
  position: relative;
}

/* 
   creiamo lo spazio per ospitare il logo centrale 
   tra la seconda e la terza voce di menu 
*/
.header__menu > li:nth-child(2) {
  margin-right: 140px; /* spazio a sinistra del logo */
}

.header__menu > li:nth-child(3) {
  margin-left: 140px; /* spazio a destra del logo */
}

/* freccina per i submenu */
.header__menu > li.menu-item-has-children > a:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

/* submenu */
.header__menu li ul {
  position: absolute;
  left: 0;
  width: 180px;
  background: #e6d2ae;
  display: none;
  visibility: hidden;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.61);
}

.header__menu li ul li {
  width: 100%;
  margin: 0; /* resetta i margini del menu principale */
}

/* reset dei margini speciali all'interno dei submenu */
.header__menu li ul li:nth-child(2) {
  margin-right: 0;
}

.header__menu li ul li:nth-child(3) {
  margin-left: 0;
}

.header__menu li:hover > ul {
  display: block;
  visibility: visible;
}

/* hamburger desktop nascosto */
.header__hamburger {
  display: none;
  margin-top: 10px;
}

.header__hamburger span {
  width: 33px;
  height: 3px;
  background: var(--menu-text);
  margin-top: 8px;
  display: block;
  transition: all 0.15s cubic-bezier(.215, .61, .355, 1);
}


/*---------------------------------------------*/
/* mobile (sotto i 768px) */
/*---------------------------------------------*/
@media (max-width: 768px) {

  .header-container {
    background: #e6d2ae;
	  border-bottom: 3px solid #850b06;  
  }

  /* INIZIO TRASPARENZA - STATO INIZIALE (In cima alla Home Page) */
  .home .header-container,
  .front-page .header-container {
    opacity: 0;
    pointer-events: none; /* Impedisce di cliccare i link invisibili prima dello scroll */
    transition: opacity 0.4s ease-in-out, background 0.4s ease-in-out;
  }

  /* STATO DURANTE LO SCROLL (Quando l'utente scende e si attiva .scroll-down sulla Home) */
  .scroll-down.home .header-container,
  .scroll-down.front-page .header-container {
    opacity: 1;
    pointer-events: auto; /* Riattiva la cliccabilità dei link */
  }
  /* fine trasparenza */

  /* ripristiniamo il layout verticale standard */
  .header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto; /* rimuove l'altezza fissa del desktop */
    padding: 10px 2%;
  }

  /* posizionamento standard del logo (non più assoluto) */
  .header a.header__logo {
    position: static;
    transform: none;
    margin: 0 auto;
    display: inline-block;
  }

  .header__logo img {
    height: 60px;
  }

  /* l'effetto scroll non influisce sulle altezze mobile */
  .scroll-down .header {
    height: auto;
  }

  .scroll-down .header__logo img {
    height: 60px;
  }

  .header__hamburger {
    display: block;
    width: 40px;
    height: 35px;
    margin-top: 10px;
  }

  .header a {
    padding: 12px;
  }

  /* menu mobile a comparsa */
  .header__menu {
    position: absolute;
    border-radius: 0px;
    border: 0px;  
    top: 100%;
    left: 0;
    margin-top: 2px;
    width: 100%;
    background: #e6d2ae;
    height: 100vh;
    overflow: hidden;
    transform: translateX(-120%);
    transition: transform 0.6s cubic-bezier(.215, .61, .355, 1);
    text-align: center;
    display: block; /* rimuove il flex di desktop */
  }

  /* reset completo dei margini di splitting e ripristino blocchi */
  .header__menu li {
    display: block;
    margin: 6px 0 !important;
  }

  .header__menu > li:nth-child(2) {
    margin-right: 0 !important;
  }

  .header__menu > li:nth-child(3) {
    margin-left: 0 !important;
  }

  .header__menu li ul {
    position: relative;
    width: 100%;
    padding-left: 0;
    box-shadow: none;
  }

  /* quando il menu mobile è aperto */
  .menu-open .header__hamburger span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  
  .menu-open .header__hamburger span:nth-child(2) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .menu-open .header__menu {
    transform: translateY(0);
  }

  .menu-open {
    overflow: hidden;
  }
}

/* Trasparenza */
/* Trasparenza */

/* Applica l'effetto solo su Desktop e Tablet (sopra i 768px) */
@media (min-width: 769px) {
  
  /* STATO INIZIALE (In cima alla Home Page) */
  .home .header-container,
  .front-page .header-container {
    opacity: 0;
    pointer-events: none; /* Impedisce di cliccare i link invisibili prima dello scroll */
    transition: opacity 0.4s ease-in-out, background 0.4s ease-in-out;
  }

  /* STATO DURANTE LO SCROLL (Quando l'utente scende e si attiva .scroll-down sulla Home) */
  .scroll-down.home .header-container,
  .scroll-down.front-page .header-container {
    opacity: 1;
    pointer-events: auto; /* Riattiva la cliccabilità dei link */
  }
  
}


/* ! Index */
/*----------------------------------------------------------------------------------- */



.cover--intro video.video-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
  object-fit: cover;
  outline: none;
  border: none;
  box-shadow: none;
}


/* ! Single */
/*----------------------------------------------------------------------------------- */


/* ! Footer */
/*----------------------------------------------------------------------------------- */


.footer-pv{background: transparent;}
.footer {color:#850a06!important; background: #e3d3b2; border-top: 6px solid #850a06;}
.footer a{color:#850a06!important;}
.footer__logo{height: 50px; width: auto;margin-bottom: 20px;}
.icon-social{opacity: 1;}
.footer p{font-size: 1rem!important;}

.col{color: #850a06;}

.icon-acces {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-acces li {
  display: inline-block;
  margin: 0 5px;
}


.footer-bottom{
  background:  #850b06;
  color:#e3d3b2!important; margin-bottom: 0;padding: 20px;font-weight: 300;font-size: 14px!important;}
.footer-bottom a{color:#e3d3b2!important;}

.eu-text{
  color: #850b06;
  font-size: 16px!important;
  width: 100%;
  background: #e3d3b2;
  margin-bottom: 0;
  padding: 30px;
  text-align: center;
  }
.eu-text img{width: 30px;margin-right: 10px;position: relative; bottom: -4px;}
.eu-text a{color:#850b06!important; font-size: 16px!important; font-weight: bold!important;}

/* Loghi Footer */
.logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-top: 1rem;
}

.logos-grid img {
  height: 79px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 600px) {
  .logos-grid {
    gap: 15px;
  }

  .logos-grid img {
    height: 60px;
  }
}



/* ! Grid System */
/*----------------------------------------------------------------------------------- */
.grid{display: flex; flex-wrap: wrap; max-width: 1650px; margin: 0 auto}
.grid--small{max-width: 900px}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%}

.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 3%;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}




/* ! Helpers */
/*----------------------------------------------------------------------------------- */


.br{border: 1px solid red;}
.img-res{width: 100%;}
.verdino{background: #e7f1d1; padding: 33px;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}
.fo__btn--submit {margin-left:0px!important;}
.max-width-small{max-width: 900px!important; margin: 0 auto; }
.max-width-medio{max-width: 1200px!important; margin: 0 auto;}
.alt{line-height: 1.6;}

body form.fo .fo__btn {
 background:#fe7400!important;
 border:2px solid #fff!important;
 font-weight: bold;
 text-transform: uppercase;
}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}


.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color:#000}
.text-blue{color:#032c5a;}  
.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}

.font-normal{font-weight: 400;}
.font-bold{font-weight: 700;}

.max-width-1{max-width: 900px; margin: 0 auto}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
  .sma-col-invert{flex-direction: column-reverse;}
  .mbm-2{margin-bottom: 2rem;}
}

@media (min-width: 768px) {
  .desktop-none{display: none;}
}

.icon-mark strong {
  position: relative;
  background: url(icons/check.svg) no-repeat left center;
  background-size: 25px;
  padding-left: 30px;
  margin-right: 10px;
}

.number-icon {
  width: 30px;
  height: 30px;
  background: #00a4ff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 30px;
  border: 1px solid #00a4ff;
}

.img-phone img{
  height: 450px;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  border: 10px solid #ccc;
  border-radius: 30px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {

.img-phone img{ height: 600px;}
}






/* ! Wordpress Styles */
/*----------------------------------------------------------------------------------- */

input[type=text],
input[type=email] { color: #000000; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #000000; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
input[type=tel] { color: #000000; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #000000; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
input[type=date] { color: #000000; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #000000; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
textarea {color: #000000; padding: 10px; width: 100%; border: 1px solid #000000; background: #fff; -webkit-appearance: none;border-radius: 20px;font-size: 18px;}
input[type=submit] { margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: #000000; border-radius: 100px;  font-size: 18px; border: none;}
#comments { width: 100%; }

.form-search{width: 100%;border: 3px solid #012d5a;border-radius: 100px; padding-left: 15px;background: #fff;}
.form-search input{width: calc(100% - 40px); border:none;background: transparent;}
.form-search button{padding: 0;background:transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}

.pagination { margin: 40px 15px 40px 15px;text-align: center;}
.pagination span,
.pagination a {margin: 0 5px 5px 0; padding: 2px 8px; border: 2px solid #ddd; display: inline-block; }


.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}

.wpcf7 input[type="file"] {
	cursor: pointer;
	/*color: transparent;*/
}

.wpcf7{background: rgb(231, 241, 209); padding: 3%; border-radius: 20px;max-width: 650px; margin: 0 auto;box-shadow: 0 5px 20px rgba(0,0,0,.05);}
@media (max-width: 768px) {
.wpcf7{padding: 5%; border-radius: 0px;}
}

.wp-block-embed__wrapper{
  border-radius: 30px;
  overflow: hidden;
}



/* ICONE */

.icon-fb{display:inline-block; margin: 0 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd' /%3E%3C/svg%3E");}
.icon-ig{display:inline-block; margin: 0 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");}
.icon-1{width: 40px;height: 40px;}
.icon-2{width: 70px;padding: 8px;}
.icon-3{width: 100px;padding: 8px;}

.icon-invert{filter: invert(1);}





/*------ Modulo Contatto ---------*/


.wpcf7 input[type="file"] {
	cursor: pointer;
	/*color: transparent;*/
}

.wpcf7{background: #e3d3b2; color: #850a06; border: 4px solid #850a06; padding: 3%; border-radius: 20px;max-width: 650px!important; margin: 0 auto;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.32);}
.wpcf7 a{color: #850a06!important;}
@media (max-width: 768px) {
.wpcf7{padding: 5%;}
}

.wp-block-embed__wrapper{
  border-radius: 30px;
  overflow: hidden;
}

.wpcf7 input,
.wpcf7 textarea{width: 100%;}

input[type=text],
input[type=email] { color: #850a06; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #850a06; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
input[type=tel] { color: #850a06; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #850a06; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
input[type=date] { color: #850a06; width: 100%;margin-right: 10px; padding: 10px; border: 1px solid #850a06; border-radius: 100px; background: #fff; -webkit-appearance: none;font-size: 18px;}
textarea {color: #850a06; padding: 10px; width: 100%; border: 1px solid #850a06; background: #fff; -webkit-appearance: none;border-radius: 20px;font-size: 18px;}
input[type=submit] { margin-top: 10px; padding: 15px 20px; color: #850a06; text-transform: uppercase; background: #850a06; border-radius: 4px; font-size: 18px; border: none;}
#comments { width: 100%; }
.form-search{width: 100%;border: 3px solid #850a06;border-radius: 100px; padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border:none;background: transparent;}
.form-search button{padding: 0;background:transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}


.wpcf7 input.wpcf7-submit{
  width: auto;
  font-size: 1.2rem; 
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #850a06;
  color: #FFF!important;
  text-decoration: none;
  border-radius: 6rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
  .wpcf7 input.wpcf7-submit:hover { background: rgb(240 192 110)!important;  color: #850a06!important; transition: all 1s cubic-bezier(.215, .61, .355, 1);}


   /* Pulsante accettazione
   -------------------------------------------------------- */
   input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    -webkit-appearance: checkbox;
    box-sizing: border-box;
    margin: 1px 23px 1px 1px;
    padding: initial;
    border: initial;
}