* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
  
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  
:root{
  --success: #38AC29;
  --error: #ff5656;
  --info: #ffde59;  
  --alert: #8C3E12;
  --cancel: #f1f1f1;
  --disabled: #717171;
  --gray: #252525;
  
  --primary: #280f91;
  --secondary: #c5ffbc;
  --tertiary: #4251a3;
  --quaternary: #3073f0;
  
  --light: #F9F9F9;
  --black: #151516;

  --background: #FFFFFF;
  
  --padding-1: 2.5rem;
  --padding-2: 1.875rem;
  --padding-3: 1.25rem;
  --padding-4: 0.825rem;
  --padding-5: 0.375rem;
  --padding-6: 0.125rem;
  
  --margin-1: 2.5rem;
  --margin-2: 1.875rem;
  --margin-3: 1.25rem;
  --margin-4: 0.825rem;
  --margin-5: 0.375rem;
  --margin-6: 0.125rem;
  
  --h1: 3.75rem;   
  --h2: 2.875rem; 
  --h3: 2rem;   
  --h4: 1.375rem; 
  --h5: 1.125rem; 
  --h6: 0.875rem; 
  --h7: 0.75rem;  
  
  --container: 1400px;
  --header: 150px;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: var(--h4);
  color: var(--black); 
  text-rendering: optimizeLegibility !important;
  position: relative;
}

.container{
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
}

strong, .strong{
  font-weight: 800;
}
.regular{font-weight: 600}
.block{display: block}
.text-nowrap{
white-space: nowrap;
}
.text-overflow{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.text-uppercase{text-transform: uppercase}
u, .text-underline{text-decoration: underline}

.h1{font-size: var(--h1)}
.h2{font-size: var(--h2)}
.h3{font-size: var(--h3)}
.h4{font-size: var(--h4)}
.h5{font-size: var(--h5)}
.h6{font-size: var(--h6)}
.h7{font-size: var(--h7)}
.h8{font-size: 10px}

.line-height-h1{line-height: calc(var(--h1) * 1.5)}
.line-height-h2{line-height: calc(var(--h2) * 1.5)}
.line-height-h3{line-height: calc(var(--h3) * 1.5)}
.line-height-h4{line-height: calc(var(--h4) * 1.5)}
.line-height-h5{line-height: calc(var(--h5) * 1.5)}
.line-height-h6{line-height: calc(var(--h6) * 1.5)}
.line-height-h7{line-height: calc(var(--h7) * 1.5)}

.absolute{position: absolute;}

.bkg-success{background-color: var(--success)}
.bkg-info{background-color: var(--info)!important}
.bkg-alert{background-color: var(--alert)!important}
.bkg-cancel{background-color: var(--cancel)}
.bkg-error{background-color: var(--error)!important}
.bkg-disabled{background-color: var(--disabled)!important}
.bkg-white{background-color: #FFF!important}
.bkg-overlay{background-color: rgba(0,0,0,0.1)}
.bkg-black{background-color: var(--black)!important}
.bkg-gray{background-color: var(--gray)!important}
.bkg-background{background-color: var(--background)}
.bkg-transparent{background: transparent;background-color: none;}

.bkg-primary{background-color: var(--primary)}
.bkg-secondary{background-color: var(--secondary)}
.bkg-tertiary{background-color: var(--tertiary)}
.bkg-quaternary{background-color: var(--quaternary)}
.bkg-light{background-color: var(--light)}

.border-primary{border-color: var(--primary)!important}
.border-secondary{border-color: var(--secondary)!important}
.border-tertiary{border-color: var(--tertiary)!important}
.border-quaternary{border-color: var(--quaternary)!important}
.border-disabled{border-color: var(--disabled)!important}

.border-error, .border-red{border-color: var(--error)!important}

.color-error{color: var(--error)!important}
.color-white{color: #FFF!important}
.color-black{color: var(--black)!important}
.color-success{color: var(--success)}
.color-cancel{color: var(--cancel)!important}
.color-alert{color: var(--alert)}
.color-light{color: var(--light)}
.color-info{color: var(--info)}
.color-disabled{color: var(--disabled)!important}
.color-gray{color: var(--gray)!important}

.color-primary{color: var(--primary)!important}
.color-secondary{color: var(--secondary)!important}
.color-tertiary{color: var(--tertiary)!important}
.color-quaternary{color: var(--quaternary)}

.border-1{
border-width: 1px;
border-style: solid;
}

.border-2{
border-width: 2px;
border-style: solid;
}

.header-height{
  height: var(--header);
}

.padding-1{padding: var(--padding-1)}
.padding-1-left{padding-left: var(--padding-1)}
.padding-1-right{padding-right: var(--padding-1)}
.padding-1-top{padding-top: var(--padding-1)}
.padding-1-bottom{padding-bottom: var(--padding-1)}
.padding-1-vertical{padding-bottom: var(--padding-1);padding-top: var(--padding-1)}
.padding-1-horizontal{padding-left: var(--padding-1);padding-right: var(--padding-1)}

.padding-2{padding: var(--padding-2)}
.padding-2-left{padding-left: var(--padding-2)}
.padding-2-right{padding-right: var(--padding-2)}
.padding-2-top{padding-top: var(--padding-2)}
.padding-2-bottom{padding-bottom: var(--padding-2)}
.padding-2-vertical{padding-bottom: var(--padding-2);padding-top: var(--padding-2)}
.padding-2-horizontal{padding-left: var(--padding-2);padding-right: var(--padding-2)}

.padding-3{padding: var(--padding-3)}
.padding-3-left{padding-left: var(--padding-3)}
.padding-3-right{padding-right: var(--padding-3)}
.padding-3-top{padding-top: var(--padding-3)}
.padding-3-bottom{padding-bottom: var(--padding-3)}
.padding-3-vertical{padding-bottom: var(--padding-3);padding-top: var(--padding-3)}
.padding-3-horizontal{padding-left: var(--padding-3);padding-right: var(--padding-3)}

.padding-4{padding: var(--padding-4)}
.padding-4-left{padding-left: var(--padding-4)}
.padding-4-right{padding-right: var(--padding-4)}
.padding-4-top{padding-top: var(--padding-4)}
.padding-4-bottom{padding-bottom: var(--padding-4)}
.padding-4-vertical{padding-bottom: var(--padding-4);padding-top: var(--padding-4)}
.padding-4-horizontal{padding-left: var(--padding-4);padding-right: var(--padding-4)}

.padding-5{padding: var(--padding-5)}
.padding-5-left{padding-left: var(--padding-5)}
.padding-5-right{padding-right: var(--padding-5)}
.padding-5-top{padding-top: var(--padding-5)}
.padding-5-bottom{padding-bottom: var(--padding-5)}
.padding-5-vertical{padding-bottom: var(--padding-5);padding-top: var(--padding-5)}
.padding-5-horizontal{padding-left: var(--padding-5);padding-right: var(--padding-5)}

.padding-6{padding: var(--padding-6)}
.padding-6-left{padding-left: var(--padding-6)}
.padding-6-right{padding-right: var(--padding-6)}
.padding-6-top{padding-top: var(--padding-6)}
.padding-6-bottom{padding-bottom: var(--padding-6)}
.padding-6-vertical{padding-bottom: var(--padding-6);padding-top: var(--padding-6)}
.padding-6-horizontal{padding-left: var(--padding-6);padding-right: var(--padding-6)}

.margin-1{margin: var(--margin-1)}
.margin-1-left{margin-left: var(--margin-1)}
.margin-1-right{margin-right: var(--margin-1)}
.margin-1-top{margin-top: var(--margin-1)}
.margin-1-bottom{margin-bottom: var(--margin-1)}
.margin-1-vertical{margin-top: var(--margin-1);margin-bottom: var(--margin-1)}
.margin-1-horizontal{margin-left: var(--margin-1);margin-right: var(--margin-1)}

.margin-2{margin: var(--margin-2)}
.margin-2-left{margin-left: var(--margin-2)}
.margin-2-right{margin-right: var(--margin-2)}
.margin-2-top{margin-top: var(--margin-2)}
.margin-2-bottom{margin-bottom: var(--margin-2)}
.margin-2-vertical{margin-top: var(--margin-2);margin-bottom: var(--margin-2)}
.margin-2-horizontal{margin-left: var(--margin-2);margin-right: var(--margin-2)}

.margin-3{margin: var(--margin-3)}
.margin-3-left{margin-left: var(--margin-3)}
.margin-3-right{margin-right: var(--margin-3)}
.margin-3-top{margin-top: var(--margin-3)}
.margin-3-bottom{margin-bottom: var(--margin-3)}
.margin-3-vertical{margin-top: var(--margin-3);margin-bottom: var(--margin-3)}
.margin-3-horizontal{margin-left: var(--margin-3);margin-right: var(--margin-3)}

.margin-4{margin: var(--margin-4)}
.margin-4-left{margin-left: var(--margin-4)}
.margin-4-right{margin-right: var(--margin-4)}
.margin-4-top{margin-top: var(--margin-4)}
.margin-4-bottom{margin-bottom: var(--margin-4)}
.margin-4-vertical{margin-top: var(--margin-4);margin-bottom: var(--margin-4)}
.margin-4-horizontal{margin-left: var(--margin-4);margin-right: var(--margin-4)}

.margin-5{margin: var(--margin-5)}
.margin-5-left{margin-left: var(--margin-5)}
.margin-5-right{margin-right: var(--margin-5)}
.margin-5-top{margin-top: var(--margin-5)}
.margin-5-bottom{margin-bottom: var(--margin-5)}
.margin-5-vertical{margin-top: var(--margin-5);margin-bottom: var(--margin-5)}
.margin-5-horizontal{margin-left: var(--margin-5);margin-right: var(--margin-5)}

.margin-6{margin: var(--margin-6)}
.margin-6-left{margin-left: var(--margin-6)}
.margin-6-right{margin-right: var(--margin-6)}
.margin-6-top{margin-top: var(--margin-6)}
.margin-6-bottom{margin-bottom: var(--margin-6)}
.margin-6-vertical{margin-top: var(--margin-6);margin-bottom: var(--margin-6)}
.margin-6-horizontal{margin-left: var(--margin-6);margin-right: var(--margin-6)}

.relative{position: relative}
.width-100 {width: 100%}
.maxWidth-100{max-width: 100%}
.height-100{height: 100%!important}
.inline{display: inline-block}
.height-100vh{height: 100vh}
.height-100dvh{height: 100dvh}

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

.text-error{text-decoration: line-through}
.super-radius{border-radius: 50px!important}

/* FLEXBOX */
.flex, [class*=flex-]{
display:flex;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex
}
.flex-align-center, .align-center{align-items:center}
.flex-align-start, .align-start{align-items: flex-start}
.flex-align-end, .align-end{align-items: flex-end}
.flex-justify-start, .justify-start{justify-content:flex-start}
.flex-justify-between, .justify-between{justify-content:space-between}
.flex-justify-center, .justify-center{justify-content:center}
.flex-justify-right, .justify-right{justify-content:flex-end}
.flex-justify-around, .justify-around{justify-content:space-around}
.flex-direction-column, .direction-column{flex-direction: column}
.flex-wrap, .wrap{flex-wrap:wrap}
.flex1{flex: 1}

.grid{
  display: grid;
}
.gap-1{gap: var(--margin-1)}
.gap-2{gap: var(--margin-2)}
.gap-3{gap: var(--margin-3)}
.gap-4{gap: var(--margin-4)}
.gap-5{gap: var(--margin-5)}
.gap-6{gap: var(--margin-6)}

.cols{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}

.tr-8{grid-template-columns: repeat(8, 1fr)}
.tr-7{grid-template-columns: repeat(7, 1fr)}
.tr-6{grid-template-columns: repeat(6, 1fr)}
.tr-5{grid-template-columns: repeat(5, 1fr)}
.tr-4{grid-template-columns: repeat(4, 1fr)}
.tr-3{grid-template-columns: repeat(3, 1fr)}
.tr-2{grid-template-columns: repeat(2, 1fr)}

.colspan-1{grid-column: span 1}
.colspan-2{grid-column: span 2}
.colspan-3{grid-column: span 3}
.colspan-4{grid-column: span 4}
.colspan-5{grid-column: span 5}
.colspan-6{grid-column: span 6}
.colspan-7{grid-column: span 7}
.colspan-8{grid-column: span 8}

.rowspan-1{grid-row: span 1}
.rowspan-2{grid-row: span 2}
.rowspan-3{grid-row: span 3}
.rowspan-4{grid-row: span 4}
.rowspan-5{grid-row: span 5}
.rowspan-6{grid-row: span 6}
.rowspan-7{grid-row: span 7}
.rowspan-8{grid-row: span 8}
/*--inputs--*/
input[type=checkbox], input[type=radio]{
  opacity: 0;
  position: absolute;
}
input[type=checkbox] ~ span,
input[type=radio] ~ span{
position: relative;  
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
input[type=checkbox]:disabled ~ span,
input[type=radio]:disabled ~ span{
color: var(--disabled);
}
input[type=checkbox] ~ span::before{
width: 40px;
min-width: 40px;
height: 20px;
border-radius: 20px;
}
input[type=radio] ~ span::before{
width: 20px;
min-width: 20px;
height: 20px;
border-radius: 20px;
}
input[type=checkbox] ~ span::before,
input[type=radio] ~ span::before{
content: ' ';
display: block;  
margin-right: 6px;
border: 1px solid rgba(0,0,0,0.1);
background-color: #d8d8d8;
box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
}
input[type=checkbox] ~ span::after{
width: 20px;
height: 20px;
border-radius: 20px;
left: 0;
margin-top: -10px;
}
input[type=radio] ~ span::after{
width: 6px;
height: 6px;
border-radius: 20px;
left: 7px;
margin-top: -3px;
opacity: 0;
}
input[type=checkbox] ~ span::after,
input[type=radio] ~ span::after{
content: ' ';
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid rgba(0,0,0,0.1);
transition: all 0.1s ease 0s;
top: 50%;  
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
input[type=checkbox]:checked ~ span::before{
background-color: var(--success);
}
input[type=checkbox]:checked ~ span,
input[type=radio]:checked ~ span{
  font-weight: bold;
  font-weight: 700;
}
input[type=radio]:checked ~ span::before,
label.checked-default input[type=checkbox]:checked ~ span::before{
background-color: var(--primary);
}
label.checked-error input[type=checkbox]:checked ~ span::before,
label.check-error input[type=checkbox] ~ span::before,
label.checked-error input[type=radio]:checked ~ span::before,
label.check-error input[type=radio] ~ span::before{
background-color:var(--error);
}
label.check-success input[type=checkbox] ~ span::before,
label.checked-success input[type=checkbox]:checked ~ span::before,
label.check-success input[type=radio] ~ span::before,
label.checked-success input[type=radio]:checked ~ span::before{
background-color:var(--success);
}
input[type=checkbox]:checked ~ span::after{
left: 20px;
}
input[type=radio]:checked ~ span::after{
width: 12px;
height: 12px;
border-radius: 20px;
left: 4px;
margin-top: -6px;
opacity: 1;
}
input[type=checkbox]:disabled ~ span::after,
input[type=radio]:disabled ~ span::after{
background-color: var(--disabled);
}
span.checked-error,
span.checked-default,
span.checked-success{
  color: #FFF;
  font-size: 12px;
  border-radius: 6px;
  display: inline-block;
  padding: 2px 6px;
}
span.checked-error {
  background-color:var(--error);
}
span.checked-default{
  background-color:var(--disabled);
}
span.checked-success{
  background-color: var(--success);
}

/*--*/
input[type=text],
input[type=tel], 
input[type=date], 
input[type=number],
input[type=search],
input[type=email],
input[type=password],
textarea,
select,
.input-text{
  width: 100%;
  font-size: var(--h4);
  min-height: 50px;
  background-color: #FFF;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  transition: border 0.2s ease 0s;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
}
input[type=text],
input[type=tel], 
input[type=date], 
input[type=number],
input[type=search],
input[type=email],
input[type=password],
textarea,
select{
  padding: 12px;
}
input[type=text]:focus, 
input[type=tel]:focus,
input[type=date]:focus,  
input[type=number]:focus, 
input[type=search]:focus, 
input[type=email]:focus, 
input[type=password]:focus, 
textarea:focus,
.input-text:focus,
.input-text:has(input:focus){
  border-color: #3a9ae8;
  box-shadow: 0 0 3px rgba(58, 154, 232, 0.3)!important;
}
input:focus::placeholder, 
textarea:focus::placeholder{
  color: transparent!important;
}
input[type=text]:disabled, 
input[type=tel]:disabled, 
input[type=date]:disabled, 
input[type=number]:disabled, 
input[type=search]:disabled, 
input[type=email]:disabled, 
input[type=password]:disabled, 
textarea:disabled, 
select:disabled,
.input-text:has(input:disabled){
  color: rgba(0,0,0,0.5)!important;
  background-color: rgba(0,0,0,0.1);
  text-shadow: 2px 2px 2px rgba(255,255,255, 1);
  cursor: default;
  box-shadow: none;
}
.input-error input[type=text], 
.input-error input[type=tel], 
.input-error input[type=date], 
.input-error input[type=number], 
.input-error input[type=search], 
.input-error input[type=email], 
.input-error input[type=password], 
.input-error textarea, 
.input-error select{
border-color: var(--error);
}
.input-text input,
.input-text input:focus{
    border: none!important;
    background-color: transparent!important;
    box-shadow: none!important;
}
.has-value{
  border-color: var(--black)!important;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
/*--*/
.noselect {
  pointer-events: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}
/*---*/
a.button, button.button{
cursor: pointer;
}
.square-large,
.square-small,
.square-medium,
.square-mini,
.square-micro{
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;  
  justify-content: center;
}
.square-large{
  width: 80px;
height: 80px;
}
.square-medium{
  width: 50px;
  min-height: 50px;
}
.square-small{
  width: 35px;
  min-height: 35px;
}
.square-mini{
  width: 20px;
  min-height: 20px;
}
.square-micro{
  width: 12px;
  min-height: 12px;
}
.button{
  min-height: 50px;
  border-radius: 50px;
  text-align: center;
  justify-content: center;
  font-size: var(--h5);
  color: #FFF;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;  
  position: relative;
  overflow: hidden;
}
.button:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  opacity: 0;
  transition: all 0.2s ease 0s;
}
.button:disabled{
  color: rgba(0,0,0,0.5)!important;
  background-color: rgba(0,0,0,0.1);
  text-shadow: 2px 2px 2px rgba(255,255,255, 1);
  cursor: var(--disabled);
  box-shadow: none;
}
.button:active:before{
  background-color: #000;
}
.button:hover:before{
opacity: 0.3;
}
.box-radius{
border-radius: 16px;
}
.box-shadow{
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.text-shadow{
  text-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.pointer{
cursor: pointer;
}
.circle{
border-radius: 50%;
}
/*-- loader --*/
.loader > div:before,
.loadbox > div:before{
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  right: 0;
  bottom: 0;
  z-index: 98;
  background-color: rgba(255,255,255,0.8);
  animation: bkgloader 1s linear 0.3s infinite;
}
.loadbox > div:before{
  position: absolute;
}
.loader > div:before{
  position: fixed;
}
@keyframes bkgloader{
  0%{
    opacity: 0.8;
  }
  50%{
    opacity: 0.7;
  }
  100%{
    opacity: 0.8;
  }
  }
.loader, .loadbox{
position: relative;
}
.loader:before,
.loadbox:before,
.loader:after,
.loadbox:after{
  content: '';  
  top: 50%;
  left: 50%;
  opacity: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-right: 2px solid var(--secondary);    
  z-index: 99;
  border-left: 2px solid var(--primary);
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
}
.loader:after,
.loader:before{
  position: fixed;
}
.loadbox:after,
.loadbox:before{
  position: absolute;
}
.loader:after, .loadbox:after{
animation: loader 1s linear 0.3s infinite;
}
.loader:before, .loadbox:before{
animation: loader 0.8s linear 0.3s infinite;
}
@keyframes loader{
0%{
  transform: rotateZ(0);
  opacity: 0.5;
}
50%{
  opacity: 1;
}
100%{
  transform: rotateZ(360deg);
  opacity: 0.5;
}
}
/*-- lightbox --*/
.modal-content{
  padding: 15px 0;
}
.modal{
position: relative;
border-radius: 6px;
width: 96%;
max-width: 1000px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.1);
}
.overflow-hidden{
overflow: hidden;
}
/*--lightbox modal--*/
.overlay, .fakelay{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}
.overlay{
  z-index: 99;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.8) 100%);
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.8) 100%);
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#cc000000',GradientType=1 );  
}
.fixed{
  position: fixed;
}
/*- --*/
.clear-float:after{
  content: '';
  clear: both;
  height: 0;
  overflow: hidden;
  display: block;
}
input[type="file"]{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 9;  
cursor: pointer;
}
/* -- box lista --*/
.scroll-x{
overflow-x: auto;
}
.scroll-y{
overflow-y: auto;
}
.scroll::-webkit-scrollbar-track{
background-color: var(--light);
}
.scroll::-webkit-scrollbar{
width: 3px;
height: 3px;
border-radius: 3px;
background-color: var(--light);
}
.scroll::-webkit-scrollbar-thumb{
background-color: #d3d3d3;
}
/*--notificação --*/
.notify-ballon-animated,
.notify-ballon{
width: 22px;
height: 22px;
font-size: 11px;
position: absolute;
top: -11px;
border-radius: 50%;
text-align: center;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
text-shadow: 0 0 3px rgba(0,0,0,0.1);  
}
.notify-ballon-animated{
  animation: notify 1s ease 0s infinite;
}
@keyframes notify{
0%{
  transform: translateY(0);
  width: 16px;
  height: 20px;
  right: 2px;
}
25%{
  transform: translateY(-6px);
  width: 14px;
  height: 22px;
  right: 3px;
}
50%{
  transform: translateY(6px);
  width: 22px;
  height: 16px;
  right: -1px;
}
100%{
  transform: translateY(0);
  width: 20px;
  height: 20px;
  right: 0;
}
}
.copy-alert{
  position: fixed;
  z-index: 999;
  background-color: rgba(0,0,0,0.8);
  border-radius: 6px;
  font-size: 12px;
  color: #FFF;
  padding: 3px 12px;
  text-align: center;
}
/*--*/
.li{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.li:last-child{
  border-bottom: none;
}
.list > .li:nth-child(even){
  background-color: rgba(0,0,0,0.05);
}

.banner{
  background-color: #0cc0df;
  background-image: url(../img/banner.webp);
  background-size: 40% auto;
  background-position: bottom right;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.banner-height{
  min-height: 100dvh;
  justify-content: center;
  gap: var(--margin-1);
}
.img-cronograma{
  width: 25%;
}
.img-cronograma img{
  position: absolute;
  bottom: 0;
  width: 130%;
  left: 0;
}

@media screen and (max-width: 999px) {
  :root{
    --padding-1: 1.5rem!important; /* 24px */
    --padding-2: 1.375rem!important;  /* 22px */
    --padding-3: 1.125rem!important;  /* 18px */
    --padding-4: 0.875rem!important;  /* 14px */
    --padding-5: 0.625rem!important;  /* 10px */
    --padding-6: 0.375rem!important;  /* 6px */

    --margin-1: 1.5rem!important; /* 24px */
    --margin-2: 1.375rem!important;  /* 22px */
    --margin-3: 1.125rem!important;  /* 18px */
    --margin-4: 0.875rem!important;  /* 14px */
    --margin-5: 0.625rem!important;  /* 10px */
    --margin-6: 0.375rem!important;  /* 6px */

    --h1: 2.1875rem!important; /* 35px */
    --h2: 1.625rem!important;  /* 26px */
    --h3: 1.25rem!important;  /* 20px */
    --h4: 1.125rem!important;  /* 18px */
    --h5: 1rem!important;  /* 16px */
    --h6: 0.875rem!important;  /* 14px */
    --h7: 0.75rem!important;  /* 12px */
  }
  .mobile-hidden{
    display: none!important;
  }
  [class*="tr-"]{
    grid-template-columns: repeat(1, 1fr)!important;
  }
  .parana-mais{
    width: 80%!important;
    max-width: 80%!important;
  }
  .banner-height{
    padding-top: 8dvh!important;
    justify-content: flex-start!important;
    gap: 10dvh!important;
    padding-bottom: 124dvw!important;
  }
  .img-sobre{
    height: auto!important;
  }
  .banner{
    background-size: contain;
    background-position: bottom right;
  }
  .content-cronograma{
    flex-direction: column;
    flex-direction: column-reverse;
  }
  .img-cronograma{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: bottom;
  }
  .img-cronograma img{
    position: relative;
    width: 80%;
  }
}
@media screen and (min-width: 999px) {
  .desktop-hidden{
    display: none!important;
  }
}
svg.h1{width: var(--h1)}
svg.h2{width: var(--h2)}
svg.h3{width: var(--h3)}
svg.h4{width: var(--h4)}
svg.h5{width: var(--h5)}
svg.h6{width: var(--h6)}
svg.h7{width: var(--h7)}

svg.ion-icon[style*="stroke"],
svg.ion-icon [style*="stroke"], 
svg.ion-icon[stroke], svg.ion-icon [stroke] {
  stroke: currentColor !important;
}
svg.ion-icon[style*="fill: rgb"],
svg.ion-icon [style*="fill: rgb"],
svg.ion-icon [style*="fill-rule:"],  
svg.ion-icon[fill^="rgb"], svg.ion-icon [fill^="rgb"] {
  fill: currentColor !important;
}
/* CUSTOM STYLES */
.logotipo{
  width: 100%;
  max-width: 150px;
}
.parana-mais{
  width: calc(100% - 10dvh);
  max-width: 45%;
}
.decobox-1{
  background-color: #393be7;
  max-width: 150px;
  height: 150px;
  width: 40%;
  transform: rotate(40deg);
  position: absolute;
  left: -10%;
  bottom: 14px;
}
.decobox-2{
  background-color: #393be7;
  max-width: 200px;
  height: 200px;
  width: 40%;
  transform: rotate(45deg);
  position: absolute;
  right: -10%;
  bottom: 14px;
}
.img-sobre{
  height: 260px;
}
.img-sobre img{
  max-width: 100%;
}
.logo-login{
  width: 220px;
}
.box-item{
  width:100%;
  max-width: 280px;
}
.box-info{
  background-color: #4251a3;
}