@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');

.sofia {
    font-family: "Sofia", cursive;
    font-weight: 700;
    font-style: normal;
}

.inter {
    font-family: "Inter", cursive;
    font-style: normal;
}

.borel {
  font-family: "Borel", cursive;
  font-weight: 400;
  font-style: normal;
}


.high{
    background-color: #ffcaa9;
}

em {
    font-weight: 700;
    font-style: normal;
    font-size: 15px
}

.sss{
    border:1px solid red!important
}

.bbb{
    border:1px solid red
}

.bbb * {
    border:1px solid red
}

.blbl{
    background-color: blue!important
}

#app * {
    background-color: transparent;
    overflow-wrap: anywhere; 
    /* border: 1px solid red; */
}


.rubik-400 {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.rubik-500 {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


.rubik-600 {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.rubik-700 {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.rubik-900 {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

:root {
    --cream        : #ECE9E9;
    --red-50       : #f05d62;
    --red-30       : #ffbdbd;
    --txt-black-smooth : #3e3e3e;
    --violet       : #7b00ff;
    --bluet        : #5252ff;
    --violet-25    : #efefff;
    --border-gray  : #ebebeb;
    --gray         : #f1f1f1;
    --dk-blue-90   : #2B2F42;
    --transition   : .1s;

    --yellow-50    : #ffda73;
    --yellow-25    : #f5de7b;
    --green-75     : #3baf65;
    --green-65     : #48D37A;
    --green-45     : #b1ffb1;
    --green-25     : #e9ffca;

    --gray-95      : #2d2d2d;
    --gray-80      : #424242;
    --gray-60      : #525252;
    --gray-45      : #848484;
    --gray-35      : #c8c8c8;
    --gray-25      : #e7e7e7;
    --gray-10      : #f2f2f2;
    --gray-5       : #f7f7f7;
    --gray-1       : #F5F5FA;

    --yell-50      : #f5c542;
    --red-35       : #ffdad9;
    --red-25       : #ffe3e3;
    --red-10       : #fff2f2;

    --gray-25-op   : rgb(231, 231, 231,.6);

    --white-100     : #fff;

    --dutch-white   : #ffefce;
    --visible       : visible;
    --hidden        : hidden;

    --fuxia-70   : #E4175C;
}

.bg-dutch-white{
    background-color: var(--dutch-white);
}

*{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: 'Work Sans', sans-serif;
    font-family: "Inter", sans-serif;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    font-size:11px;
    /* transition: var(--transition); */
    margin: 0;
    position: relative;
    min-height: 0;
    color:#2d2d2d;
    font-family: "Rubik", Helvetica, sans-serif;
    
    
    /* -webkit-user-select: none;  
    -ms-user-select: none; 
    user-select: none;  */
    
    /* scroll-margin-top: 400px; */
    /* min-height: fit-content!important; */
 }
/* 
 #searchInput:focus{
    border-bottom:1px solid var(--fuxia-70)!important
 } */

 .zoom {
    background-color: green;
    transition: transform .2s;
    margin: 0 auto;
  }
  
  .zoom:hover {
    -ms-transform: scale(1.12); /* IE 9 */
    -webkit-transform: scale(1.12); /* Safari 3-8 */
    transform: scale(1.12); 
    /* z-index: 999; */
  }


 .hov-zoom {
    transition: transform .2s;
  }
  

.hov-zoom:hover{
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); 
    /* z-index: 999; */
  
}

.xl{
    width:276px!important
}

 /* *:hover{
    opacity: .8;
 } */

.fit-content {
    width: fit-content!important;
    min-width: fit-content;
}

.fit-h-content {
    height: fit-content!important;
    min-height: fit-content;
}

html, body {
    width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0;
}

body{
    background-color: #f7f7f7;
}

/* .row{
     display: -webkit-flex;
    display: flex;
    flex:1 1 content;
    height:100%;
    width:auto;
    min-height: 0;
    min-width: 0;
    white-space: break-spaces; 
    flex-basis: fit-content;
} */
.row {
    display: -webkit-flex;
    display: flex;
    flex-grow: 1;       /* invece di flex: 1 1 content */
    flex-shrink: 1;
    flex-basis: auto;   /* o 0, meglio auto per sicurezza */
    height: 100%;
    width: auto;
    min-height: 0;
    min-width: 0;
    white-space: normal; /* invece di break-spaces */
}
.row-reverse{
    flex-direction: row-reverse;
}

.tt-upp{
    text-transform: uppercase;
}

.btn{
    cursor: pointer!important;
}

.grab{
    cursor: grab!important;
}

.col {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex:1;
    height:100%;
    width:100%;
    min-height: 0;
    min-width: 0;
    /* white-space: break-spaces; */
}

.col-reverse{
    flex-direction: column-reverse
}

.col * {
    /* height:100%!important;
    flex: 1; */
}

.row * {
    /* height:100%!important;
    flex:1 */
}

.no-scroll-x{
    overflow-x: hidden;
}

.scroll-x{
    overflow-x: scroll;
}

.scroll-x-auto{
    overflow-x: auto;
}

.scroll-y{
    overflow-y: scroll!important;
}

.scroll-y-auto{
    overflow-y: auto!important;;
}

.rotate-90{
    /* writing-mode: vertical-lr; */
    transform: rotate(90deg)!important;    
    -webkit-transform: rotate(-90deg)!important;
    -moz-transform: rotate(-90deg)!important;

}

.flip-h {
transform: scaleX(-1);
display: inline-block; 
}

.cover{
    width:100%; height:100%;
    object-fit: cover!important;
}
.contain{
    width:80%; height:80%;
    object-fit: contain!important;
}
.d-rtl{
    direction:rtl;
}

.d-ltr{
    direction:ltr;
}


.b-red{
    border:2px solid rgb(255, 188, 188)!important
}

.b-gray{
    border:none;
    outline:none;
    border:1px solid var(--border-gray)
}

.b-red-25{
    border:none;
    outline:none;
    border:1px solid var(--red-25)
}

.b-red-30{
    border:none;
    outline:none;
    border:1px solid var(--red-30)
}

.b-gray-25{
    border:none;
    outline:none;
    border:1px solid var(--gray-25)
}

.b-gray-35{
    border:none;
    outline:none;
    border:1px solid var(--gray-35)
}

.b-gray-45{
    border:none;
    outline:none;
    border:1px solid var(--gray-45)
}

.b-gray-45{
    border:none;
    outline:none;
    border:1px solid var(--gray-45)
}

.b-gray-95{
    border:none;
    outline:none;
    border:1px solid var(--gray-95)
}


.b-2-gray-25{
    border:none!important;
    outline:none!important;
    border:2px solid var(--gray-25)!important
}

.b-2-gray-45{
    border:none!important;
    outline:none!important;
    border:2px solid var(--gray-45)!important
}

.b-2-gray-95{
    border:none!important;
    outline:none!important;
    border:2px solid var(--gray-95)!important
}

.b-2-violet{
    border:2px solid var(--violet)!important;
}

.bb-gray{
    border:none;
    outline:none;
    border-bottom:1px solid var(--border-gray)
}
.bb-fff{
    border:none;
    outline:none;
    border-bottom:1px solid var(--white-100)
}


.bb-red-50{
    border:none;
    outline:none;
    border-bottom:2px solid var(--red-50)!important
}


.bb-gray-25{
    border:none;
    outline:none;
    border-bottom:1px solid var(--gray-25)!important
}

/* .bb-gray-25:last-child { 
    border-bottom: none!important; 
} */

.bb-gray-35{
    border:none;
    outline:none;
    border-bottom:1px solid var(--gray-35)
}

.bb-gray-45{
    border:none;
    outline:none;
    border-bottom:1px solid var(--gray-45)!important
}

.bb-gray-95{
    border:none;
    outline:none;
    border-bottom:1px solid var(--gray-95)!important;
}

.bl-gray{
    border:none;
    outline:none;
    border-left:1px solid var(--border-gray)
}

.bl-gray-25{
    border:none;
    outline:none;
    border-left:1px solid var(--gray-25)!important
}

.bl-gray-45{
    border:none;
    outline:none;
    border-left:3px solid var(--gray-45)
}

.b-dark{
    border:1px solid var(--gray-80)!important
}

.bl-red-25{
    border-bottom:2px solid red!important;
}

.br-gray-95{
    border:none;
    outline:none;
    border-right:1px solid var(--gray-95)!important;
}

.br-gray{
    border:none;
    outline:none;
    border-right:1px solid var(--border-gray)
}

.br-gray-25{
    border:none;
    outline:none;
    border-right:1px solid var(--gray-25)!important
}

.br-gray-35{
    border:none;
    outline:none;
    border-right:1px solid var(--gray-35)!important;
}

.br-gray-45{
    border:none;
    outline:none;
    border-right:1px solid var(--gray-45)
}

.br-gray-95{
    border:none;
    outline:none;
    border-right:1px solid var(--gray-95)!important;
}


.bb-2-gray-95{
    border:none;
    outline:none;
    border-bottom:2px solid var(--gray-95)!important;
}

.bb-2-gray-85{
    border:none;
    outline:none;
    border-bottom:2px solid var(--gray-85)!important;
}

.bb-2-gray-45{
    border-bottom:2px solid var(--gray-45)!important;
}

.bb-2-gray-25{
    border-bottom:2px solid var(--gray-25)!important;
}

.bt-gray-25{
    border-top:1px solid var(--gray-25)
}

.bt-gray-35{
    border-top:1px solid var(--gray-35)
}


.bt-gray-45{
     border-top:1px solid var(--gray-45)
}

.br-gray{
    border-right:1px solid var(--border-gray)
}

.bt-3-gray-80{
     border-top:3px solid var(--gray-80)!important;
}


.rad-24{
    border-radius: 50%;
    width:24px;
    height:24px
}

.rad-140{
    border-radius: 50%;
    width:140px;
    height:140px
}

.b-rad-4{
    overflow: hidden;
    border-radius: 4px;
}

.b-rad-8{
    /* overflow: hidden; */
    border-radius: 8px;
}

.b-rad-12{
    /* overflow: hidden; */
    border-radius: 12px;
}


.b-rad-16{
    border-radius: 16px;
    overflow: hidden;
}


.b-rad-20{
    overflow: hidden;
    border-radius: 20px;
}

.b-rad-24{
    /* overflow: hidden; */
    border-radius: 24px;
}


.b-rad-28{
    overflow: hidden;
    border-radius: 28px;
}

.b-rad-32{
    overflow: hidden;
    border-radius: 32px;
}

.b-l-rad-4{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.b-l-rad-8{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.b-l-rad-16{
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.b-r-rad-4{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.b-r-rad-8{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.b-r-rad-16{
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}


.b-rad-50{
    border-radius: 50%;
}

.bg-none{
    background-color: transparent!important
}

.bg-red-10{
    background-color: var(--red-10)!important;
}


.bg-red-35{
    background-color: var(--red-35)!important;
}

.bg-red-25{
    background-color: var(--red-25)!important;
}

.bg-red-50{
    background-color: var(--red-50)!important;
}

.bg-yellow-50{
    background-color: var(--yellow-50)!important;
}

.bg-yellow-25{
    background-color: var(--yellow-25)!important;
}


.bg-lightgray{
    background-color: #f8f8f8;
}

.bg-bluet{
    background-color: var(--bluet)!important
}

.bg-violet{
    background-color: var(--violet)!important;
}

.row-bg-violet{
    background-color: var(--violet)!important;
}

.m-right-360{
    margin-right: -360px;
}

.left-out{
    left:-400px!important
}


/* .bg-violet * {
    color:#fff!important
} */

.bg-violet-25{
    background-color: var(--violet-25)!important;
  
}

.txt-000{
    color:#000!important
}

.txt-fff{
    color:#fff!important
}

.txt-fff * {
    color:#fff!important
}

.txt-red-25{
    color:var(--red-25)!important
}

.txt-fuxia-70{
    color:var(--fuxia-70)!important
}

.bg-fuxia-70{
    background-color:var(--fuxia-70)!important
}

.txt-red-50{
    color:var(--red-50)!important
}

.txt-yell-50{
    color:var(--yell-50)!important
}

.pd2{
    padding:2px
}

.pd-8-12-0-12{
    padding:8px 12px 0 12px!important
}

.pd-b-60{
    padding-bottom: 60px!important
}

.pd-b-64{
    padding-bottom: 64px!important
}

.pd-4-8{
    padding: 4px 8px!important
}

.pd-4-12{
    padding: 4px 12px!important
}

.pd4{
    padding:4px
}

.pd8{
    padding:8px
}

.pd12{
    padding:12px
}

.relative{
    position:relative;
}

.abs{
    position:absolute;
    /* left:0;
    right:0;
    top:0;
    bottom: 0; */
    /* margin:auto; */
    
}

.top-0{
    top:2px!important
}

.bottom-0{
    bottom:2px!important
}

.right-0{
    right:0!important
}


.h-60{
    height:60%!important;
    max-height: 60%;
}

.h-64{
    height:64%!important;
    max-height: 64%;
}

.h-80{
    height:80%!important;
    max-height: 80%;
}

.h-100{
    height:100%!important;
    max-height: 100%!important;
}

/* .w-60{
    width:60%!important;
    max-width: 60%;
} */


.w-40{
    width:40px
}

.w-52{
    width:52px
}

.w-56{
    width:56px
}

.w-60{
    width:60px
}

.w-72{
    /* width:72%!important;
    max-width: 72%; */
    width:72px
}


.w-80{
    width:80%!important;
    max-width: 80%;
}

.w-92{
    width:92%!important;
    max-width: 92%;
}

.w-100{
    width:100%!important;
    max-width: 100%!important;
}

.w-40{
    width:40px
}

.w-48{
    width:48px!important
}

.txt-black-smooth{
    color:var(--txt-black-smooth)
}

.flex-0{
    flex:0 0 content!important;
    white-space: nowrap
}

.flex-2{
    flex:0 0 2px!important
}

.flex-3{
    flex:0 0 3px!important
}

.flex-4{
    flex:0 0 4px!important
}

.flex-8{
    flex:0 0 8px!important
}

.flex-99{
    flex:0 0 98%!important
}

.flex-12{
    flex:0 0 12px!important
}

.flex-16{
    flex:0 0 16px!important
}

.flex-20{
    flex:0 0 20px!important
}

.flex-24{
    flex:0 0 24px!important
}

.flex-28{
    flex:0 0 28px!important
}

.flex-32{
    flex:0 0 32px!important
}

.flex-33p{
    flex:0 0 33%!important
}


.flex-36{
    flex:0 0 36px!important
}

.flex-40{
    flex:0 0 40px!important
}

.flex-44{
    flex:0 0 44px!important
}

.flex-48{
    flex:0 0 48px!important
}

.flex-52{
    flex:0 0 52px!important
}

.flex-56{
    flex:0 0 56px!important
}

.flex-60{
    flex:0 0 60px!important;
}

.flex-64{
    flex:0 0 64px!important;
}

.flex-68{
    flex:0 0 68px!important;
}

.flex-72{
    flex:0 0 72px!important
}

.flex-76{
    flex:0 0 76px!important
}

.flex-84{
    flex:0 0 84px!important
}

.flex-80{
    flex:0 0 80px!important
}

.flex-88{
    flex:0 0 88px!important
}

.flex-92{
    flex:0 0 92px!important
}

.flex-96{
    flex:0 0 96px!important
}

.flex-100{
    flex:0 0 100px!important
}

.flex-100p{
    flex:0 0 100%!important
}

.flex-108{
    flex:0 0 108px!important
}

.flex-112{
    flex:0 0 112px!important
}

.flex-116{
    flex:0 0 116px!important
}

.flex-120{
    flex:0 0 120px!important
}

.flex-124{
    flex:0 0 124px!important
}

.flex-128{
    flex:0 0 128px!important
}

.flex-132{
    flex:0 0 132px!important
}

.flex-140{
    flex:0 0 140px!important
}

.flex-144{
    flex:0 0 144px!important
}

.flex-148{
    flex:0 0 148px!important
}

.flex-152{
    flex:0 0 152px!important
}

.flex-156{
    flex:0 0 156px!important
}

.flex-160{
    flex:0 0 160px!important;
    /* width: 160px; */
 }

.flex-164{
    flex:0 0 164px!important;
    /* width: 160px; */
 }

.flex-168{
    flex:0 0 168px!important;
    /* width: 168px; */
}

.flex-180{
    flex:0 0 180px!important;
    /* width: 168px; */
}

.flex-188{
    flex:0 0 188px!important;
    /* width: 168px; */
}


.flex-192{
    flex:0 0 192px!important;
    /* width: 168px; */
}

.flex-200{
    flex:0 0 200px!important;
    /* width: 200px; */
}

.flex-212{
    flex:0 0 212px!important;
    /* width: 200px; */
}


.flex-212{
    flex:0 0 212px!important;
    /* width: 200px; */
}


.flex-400{
    flex:0 0 400px!important;
    /* width: 200px; */
}


.flex-440{
    flex:0 0 440px!important;
    /* width: 200px; */
}

.flex-480{
    flex:0 0 480px!important;
    /* width: 200px; */
}


.flex-520{
    flex:0 0 520px!important;
    /* width: 200px; */
}

.flex-540{
    flex:0 0 540px!important;
    /* width: 200px; */
}


.flex-600{
    flex:0 0 600px!important;
}

.flex-auto {
  flex-basis: 100% !important;
}

.flex-animated {
    display: -webkit-flex;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;
    transition: flex-basis 0.4s ease;
}

.w-212{
    width:212px
}

.flex-220{
    flex:0 0 220px!important;
    /* width: 200px; */
}

.flex-232{
    flex:0 0 232px!important;
    /* width: 200px; */
}

.flex-244{
    flex:0 0 244px!important;
}

.w-244{
    width: 244px;
}

.w-200{
    width:200px
}

.w-240{
    width:240px
}

.flex-240{
    flex:0 0 240px!important
}

.flex-248{
    flex:0 0 248px!important
}


.flex-260{
    flex:0 0 260px!important
}

.flex-268{
    flex:0 0 268px!important
}

.flex-272{
    flex:0 0 272px!important
}

.flex-276{
    flex:0 0 276px!important
}


.flex-280{
    flex:0 0 280px!important
}

.flex-288{
    flex:0 0 288px!important
}

.flex-300{
    flex:0 0 300px!important
}

.flex-320{
    flex:0 0 320px!important
}

.flex-340{
    flex:0 0 340px!important
}

.flex-348{
    flex:0 0 348px!important
}

.flex-356{
    flex:0 0 356px!important
}

.flex-360{
    flex:0 0 360px!important
}

.flex-76p{
    flex: 0 0 76%
}

.flex-80p{
    flex: 0 0 80%
}

.flex-84p{
    flex: 0 0 84%
}

.flex-88p{
    flex: 0 0 88%
}

.flex-90p{
    flex: 0 0 90%
}

.flex-content{
    flex:0 0 content!important
}

.txt-violet{
    color: var(--violet)!important
}

.gap4{
    gap:4px
}

.gap-2{
    gap:2px
}

.gap-4{
    gap:4px
}

.gap-8{
    gap:8px
}

.gap-12{
    gap:12px
}

.gap-16{
    gap:16px
}

.gap-24{
    gap:24px
}

.gap-32{
    gap:32px
}

.gap-40{
    gap:40px
}

.gap-48{
    gap:48px
}

.jc-sa{
    justify-content: space-around!important;
}

.jc-e{
    justify-content: flex-end;
}

.jc-c{
    justify-content: center;
}

.ai-e{
    align-items: flex-end;
}

.ai-c{
    align-items: center;
}

.flex-cx{
    justify-content: center;
    align-items: center;
}

.flex-1{
    flex:1!important
}

.txt-center{
    text-align: center!important;
}

.fs-8{
    font-size: 8px;
}

.fs-10{
    font-size: 10px;
}

.fs-11{
    font-size: 11px;
}

.fs-12{
    font-size: 12px;
}

.fs-13{
    font-size: 13px;
}

.fs-14{
    font-size: 14px;
}

.fs-15{
    font-size: 15px;
}

.fs-16{
    font-size: 16px;
}


.fs-17{
    font-size: 17px;
}


.fs-18{
    font-size: 18px;
}


.fs-19{
    font-size: 19px;
}

.fs-20{
    font-size: 20px;
}


.fs-22{
    font-size: 22px;
}

.fs-24{
    font-size: 24px;
}

.fs-26{
    font-size: 26px;
}

.fs-28{
    font-size: 28px;
}

.fs-32{
    /* font-size: 32px; */
    font-size: 2em;
}

.fs-36{
    font-size: 36px;
    /* line-height: 36px; */
}

.fs-44{
    font-size: 44px;
}

.fw-400{
    font-weight: 400;
}

.fw-500{
    font-weight: 500;
}

.fw-600{
    font-weight: 600;
}

.fw-700{
    font-weight: 700;
}

.fw-800{
    font-weight: 800;
}

.fw-900{
    font-weight: 900;
}


.flex-input{
    padding:0 8px;
    flex:1;
    height: 100%;
    max-height: 32px;
    max-width: 100%;
    /* flex:0 0 50px; */
    /* max-width: 500px; */
    border-radius: 4px;
    border: none;
    outline: none;
    background-color: var(--gray);
    font-weight: 600;
    background-color: #fafafa;
}

.flex-input:hover{
    background-color: #fff;
}

.flex-input:focus{
    background-color: #fff;
}



.pre-wrap{
    white-space: pre-wrap!important;
    overflow-wrap: break-word;

}

.hover-f0:hover{
    background-color:#f0f0f0!important;
}

.a-fixed-background{
    display: -webkit-flex;
    display: flex;
    position:fixed;
    width:100vw;
    height:100vh;
    z-index:9999;
    left:0;
    top: 0;
    background-color: rgba(0,0,0,.6)!important;
}

.bg-000{
    background-color: rgb(0,0,0)!important;
}

.bg-000-2{
    background-color: rgba(0,0,0,.2)!important;
}

.bg-000-6{
    background-color: rgba(0,0,0,.6)!important;
}

.bg-000-8{
    background-color: rgba(0,0,0,.8)!important;
}

.bg-fff{
    background-color: rgb(255,255,255)!important;
}

.bg-fff-2{
    background-color: rgba(255,255,255,.2)!important;
}

.bg-fff-6{
    background-color: rgba(255,255,255,.6)!important;
}

.bg-fff-8{
    background-color: rgba(255,255,255,.8)!important;
}


.form-off{
    pointer-events: none;
}

.off *{
    color: var(--gray-35)!important;
    pointer-events: none;
}

.act:active{
    opacity: .8;
}

.ellipsis{
    max-width: 96%;
    white-space: nowrap; 
    overflow-x: hidden; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.ellipsis-2 {
  display: -webkit-box;            
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;         
  overflow: hidden;             
  text-overflow: ellipsis;      
  white-space: normal;            
}

.ellipsis-4 {
  display: -webkit-box;            
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 4;         
  overflow: hidden;             
  text-overflow: ellipsis;      
  white-space: normal;            
}


.order-top{
    order:0
}

.order-bottom{
    order:1
}

.txt-upp{
    text-transform: uppercase;
}

.txt-cap{
    text-transform: capitalize!important;
}

.txt-line-through{
    text-decoration: line-through;
}

.txt-underline{
    text-decoration: underline;
}

.txt-blue-50{
    color: #0077b6
}

.txt-green-45{
    color: var(--green-45)
}

.txt-green-75{
    color: var(--green-75)
}

.txt-green-65{
    color: var(--green-65)
}

.txt-gray-80{
    color: var(--gray-80)!important
}

.txt-gray-60{
    color: var(--gray-60) 
}

.txt-gray-95{
    color: var(--gray-95)!important
}

.txt-gray-45{
    color: var(--gray-45)
}

.txt-gray-35{
    color: var(--gray-35)
}

.txt-gray-25{
    color: var(--gray-25)
}

.txt-gray-10{
    color: var(--gray-10)
}

.txt-gray-95 *{ 
    color: var(--gray-95)!important
}

.focus-txt-gray-95:focus{
    color: var(--gray-95)!important
}

.focus-bb-gray-95:focus{
    border-bottom: 1px solid var(--gray-95)!important
}

.hov-bg-gray-10:hover{
    background-color: var(--gray-10)!important;
}

.hov-bg-green:hover{
    /* background-color: #42D392!important */
    background-color: #ddfff0!important

}


.hov-txt-gray-45:hover{
    color: var(--gray-45)!important
}

.hov-txt-gray-80 *:hover{
    color: var(--gray-80)!important
}


.hov-txt-gray-95:hover{
    color: var(--gray-95)!important
}

.no-border{
    border :none;
    outline:none;
}

.bg-green-45{
    background-color: var(--green-45)!important;
}

.bg-green-25{
    background-color: var(--green-25)!important;
}

.bg-gray-5{
    background-color: var(--gray-5)!important;
}

.bg-gray-25{
    background-color: var(--gray-25)!important;
}

.bg-gray-25-op{
    background-color: var(--gray-25-op)!important;
}

.bg-gray-10{
    background-color: var(--gray-10)!important;
}

.bg-gray-45{
    background-color: var(--gray-45)!important;
}

.bg-gray-80{
    background-color: var(--gray-80)!important;
}

.bg-gray-95{
    background-color: var(--gray-95)!important;
}

.bg-green{
    background-color: #d4ffd0b3!important
}


.bg-fff{
    background-color: #fff!important;
}


.of-hidden{
    overflow: hidden;
}

.of-x-hidden{
    overflow-x: hidden;
}


.of-y-hidden{
    overflow-y: hidden;
}

.mb-16{
    margin-bottom: 16px;
}

.pb-2{
    padding-bottom: 2px!important;
}

.pb-4{
    padding-bottom: 4px!important;
}

.pb-32{
    padding-bottom: 32px!important;
}

.pb-128{
    padding-bottom: 128px!important;
}


.pd-0{
    padding:0!important;
    appearance: none;
}

.pd-1-1{
    padding: 1px 1px!important
}

.pd-2-2{
    padding: 2px 2px!important
}

.pd-2-8{
    padding: 2px 8px!important
}

.pd-4-4{
    padding: 4px 4px!important
}

.pd-2-0{
    padding: 2px 0px!important
}

.pd-4-0{
    padding: 4px 0px!important
}

.pd-16-0{
    padding:16px 0!important
}

.pd-8-4{
    padding:8px 4px
}


.pd-8-12{
    padding:8px 12px
}

.pd-8-24{
    padding:8px 24px
}

.pd-8-32{
    padding:8px 32px
}

.pd-6-6{
    padding:6px 6px
}

.pd-8-8{
    padding:8px 8px
}

.pd-8-16{
    padding:8px 16px
}

.pd-16-16{
    padding:16px 16px
}

.pd-8-0{
    padding:8px 0
}

.pd-12-8{
    padding:12px 8px
}

.pd-12-12{
    padding:12px!important  
}

.pd-12-32{
    padding:12px 32px!important  
}

.pd-12-0{
    padding:12px 0px
}

.pd-12-4{
    padding:12px 4px
}

.pd-0-4{
    padding:0 4px 
}

.pd-0-8{
    padding:0 8px 
}

.pd-0-12{
    padding:0 12px 
}

.pd-4-16{
    padding:4px 16px 
}

.pd-0-16{
    padding:0 16px 
}
.pd-0-2{
    padding:0 2px 
}

.pd-0-20{
    padding:0 20px 
}

.pd-0-24{
    padding:0 24px 
}

.pd-0-28{
    padding:0 28px 
}

.pd-0-32{
    padding:0 32px 
}

.pd-16-8{
    padding:16px 8px 
}

.pd-16{
    padding: 16px;
}

.b-none{
    border:none;
    outline:none
}

.b-2-fff{
    border: 2px solid #fefefe;
}

.visible {
    visibility: var(--visible);
}

.hidden {
    display: none;
    /* visibility: var(--hidden); */
}

.pointer{
    cursor: pointer!important;
}

.abs-0-0{
    position: absolute;
    left:0;
    top:0;
    z-index: 999;
    
}

.abs-8-8{
    position: absolute;
    left:8!important;
    top:8!important;
 }

.abs-12-12{
    position: absolute!important;
    left:12!important;
    top:12!important;
}

.shadow{
    -webkit-box-shadow: -2px 0px 18px -10px rgba(144, 51, 51, 0.75)!important;
    -moz-box-shadow: -2px 0px 18px -10px rgba(179, 28, 28, 0.75)!important;
    box-shadow: -2px 0px 18px -10px rgba(0,0,0,0.75)!important; 
}

.no-shadow{
   -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.fix{
    position: fixed;
}

.fit-h{
    height: fit-content!important;
    min-height: fit-content!important;
}

.flex-wrap{
    flex-wrap: wrap;
    white-space: break-spaces;
    word-wrap: break-word;
}

.wrapper{
    /* word-wrap: break-word; */
    white-space: initial; 
    white-space: pre-line;
    word-break:normal;
}

.dot{
    max-height: 80%;
    height: 80%;
    border-radius: 50%;
    aspect-ratio: 1 / 1!important;
}

.resize-none{
    resize: none!important;
}

textarea {
    resize: none;
  }

.m-0-8{
    margin: 0 8px;
}

.m-36-0{
    margin-top: 36px;
}

.m-0-12{
    margin: 0 12px;
}

.z-95{
    z-index:95
}

.z-96{
    z-index:96
}

.z-97{
    z-index:97
}

.z-98{
    z-index:98
}

.z-99{
    z-index:99!important
}

.z-100{
    z-index:100!important
}

.z-101{
    z-index:101!important
}

.z-102{
    z-index:102
}

.z-999{
    z-index:999!important
}

.hov-txt-gray-25:hover *{
    color: var(--gray-25)!important;
}

.hov-txt-gray-35:hover{
    color: var(--gray-35)!important;
}

.hov-txt-gray-35:hover *{
    color: var(--gray-35)!important;
}

.hov-gray-10:hover{
    background-color: var(--gray-10)!important;
}


.hov-gray-25:hover{
    background-color: var(--gray-25)!important;
}

.td-none{
    text-decoration: none!important;
}

.hover-bg-white:hover{
    background-color: var(--white-100)!important;
}


.hover-bg-gray-10:hover{
    background-color: var(--gray-10)!important;
}

.hover-bg-gray-25:hover{
    background-color: var(--gray-25)!important;
}


.hover-b-violet:hover{
    border:1px solid var(--violet)!important;
}

.hov-b:hover{
    border:1px solid var(--gray-35)!important;
}



.scroll-x-hide::-webkit-scrollbar {
    display: none;
}

.sticky{
    position: sticky!important;
    top:0px!important;
    z-index: 95!important;
}

.hov-td-underline:hover{
    text-decoration: underline;
}

.instant::after {
    content: " \2261";
}

.show i {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.show:hover i {
  opacity: 1;
}

.op-3{
    opacity:.3;
    transition: var(--transition)
}

.op-4{
    opacity:.4;
    /* transition: var(--transition) */
}

.op-6{
    opacity:.6;
    transition: var(--transition)
}

.op-8{
    opacity:.8!important;
    transition: var(--transition)
}

.op-1{
    opacity:1;
    transition: var(--transition)
}

.act:active{
    opacity:.7!important;
}

.multiply{
    mix-blend-mode: multiply;
}

.bb-gray-25-last-child .row:not(:last-child){
    border-bottom: 1px solid var(--gray-25);
}

.bb-2-green-45{
    border-bottom: 2px solid var(--green-45)!important;
}

.bb-2-gray-35{
    border-bottom: 2px solid var(--gray-35)!important;
}

.bottom-200{
    bottom:-632px!important
}

.col-bb-gray-25 .row-bb-gray-25:not(:last-child){
    border-bottom: 1px solid var(--gray-25);
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: #09f;
    border-left-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


.blur{
    backdrop-filter: saturate(180%) blur(8px);    
}

.bg-fffa{
    background-color: rgba(255, 255, 255, .55)!important
}

.bg-000a{
    background-color: rgba(0, 0, 0, .50)!important
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=time]::-webkit-clear-button {
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    -o-appearance: none!important;
    -ms-appearance:none!important;
    appearance: none!important;
    margin: -10px; 
  }

  ::-webkit-datetime-edit-ampm-field {
    display: none;
  }
  
/* width */
::-webkit-scrollbar {
    /* width: 4px;
    height:4px; */
    /* display:none */
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

@media screen and (max-width: 600px) {
    .ai-c-mobile    {
        align-items: center!important;
        justify-content: flex-start!important;
    }
  }



.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}

.selected{
    background-color : rgb(255, 255, 234)!important;
}

.slide-up {
    animation: slideFromBottom 0.4s ease forwards;
}
 

.slide-down {
    animation: slideFromUp 0.4s ease forwards;
}

@keyframes slideFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}


@keyframes slideFromUp {
    from {
      transform: translateY(0%);
      opacity: 0;
    }
    to {
      transform: translateY(100);
      opacity: 1;
    }
}



.tooltip{
    display: none;
    height: auto;
}  

.tooltip-box:hover .tooltip {
    display: block;
  }
  
 

  /* All'entrata */
.slide-right-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-enter-active {
  transition: all 0.3s ease;
}

/* All'uscita */
.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.slide-right-leave-active {
  transition: all 0.3s ease;
}

/* Entrata da sinistra */
.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-enter-active {
  transition: all 0.3s ease;
}

/* Uscita verso sinistra */
.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-left-leave-active {
  transition: all 0.3s ease;
}

.disabled .row{
    border: none!important;
    pointer-events: none;   
}


.disabled .txt-red-50{
    color: var(--gray-45)!important
}

.disabled .blink{
    display:none
}

/* #overlay input {
  pointer-events: none;   
  user-select: none;        
  background-color: #eee;  
  color: #999;
} */