html {
	font-size: 0.95rem;
}

/* font-family */

@font-face {
  font-family: 'geomanist-regular', 'Trebuchet MS', sans-serif;
  src: url('../fonts/geomanist-regular.eot');
  src: url('../fonts/geomanist-regular.eot?#iefix') format('embedded-opentype'),
				url('../fonts/geomanist-regular.woff2') format('woff2'),
				url('../fonts/geomanist-regular.woff2') format('woff'),
				url('../fonts/geomanist-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'geomanist-book', 'Trebuchet MS', sans-serif;
  src: url('../fonts/geomanist-book.eot');
  src: url('../fonts/geomanist-book.eot?#iefix') format('embedded-opentype'),
				url('../fonts/geomanist-book.woff2') format('woff2'),
				url('../fonts/geomanist-book.woff') format('woff'),
				url('../fonts/geomanist-book.ttf') format('truetype');
  font-weight: 400;
  font-style: bold;
}

@font-face {
  font-family: 'geomanist-bold', 'Trebuchet MS', sans-serif;
  src: url('../fonts/geomanist-bold.eot');
  src: url('../fonts/geomanist-bold.eot?#iefix') format('embedded-opentype'),
				url('../fonts/geomanist-bold.woff2') format('woff2'),
				url('../fonts/geomanist-bold.woff') format('woff'),
				url('../fonts/geomanist-bold.ttf') format('truetype');
  font-weight: 600;
  font-style: bold;
}

@font-face {
  font-family: 'geomanist-black', 'Trebuchet MS', sans-serif;
  src: url('../fonts/geomanist-black.eot');
  src: url('../fonts/geomanist-black.eot?#iefix') format('embedded-opentype'),
				url('../fonts/geomanist-black.woff2') format('woff2'),
				url('../fonts/geomanist-black.woff') format('woff'),
				url('../fonts/geomanist-black.ttf') format('truetype');
  font-weight: 800;
}



/* vars */

:root {
  --c0: #9a8aff;
  --c0o: #a99cff;
  --c1: #443a92;
  --c1o: #5849ca;
  --c1i: #c8a8f5;
  --c2: #aaaaaa47;
  --c2o: #602da7;
  --c2i: #998ab4;
  --c3: #623f83;
  --c3o: #8559ae;
  --c3i: #ccc;
  --c4: #f7b032;
  --c4o: #fbc15c;
  --c4i: #F2F2F2;
  --c5: #332a79;
  --c5o: #443996;
  --c5i: #0D0D0D;
  --c6: #623f83;
  --c6o: #865cac;
  --c6i: #0D0D0A;
    --color-primary: #faaf18;
    --color-light: #fad86f;
    --color-button: #16466e ;
    --color-text-white: #F2F2F2;
    --color-text-black: #0D0D0D;
	--font-family: "geomanist-regular";
	--font-family-bold: "geomanist-bold";
}


/* general */

.all-elements *:not(.fa) {
  font-family: var(--font-family), "Trebuchet MS", sans-serif;
}


.all-elements #content {
  background-color: #efefef;
}


#header-fixed {
  background-color: rgb(from var(--color-primary) r g b / 0.6) !important;
    display: flex;
    justify-content: center;
    height: 55px !important;
}
#header-fixed:has(.header-2.open-right-sidebar) {
    justify-content: space-between;
    background-color: var(--color-primary) !important;
}

.header-style-1 .header-logo {
    background-image: url('https://zenet.com.ar/image_zenet/ZENET_logo.PNG');
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
    position: static;
    margin: 0 !important;
}

.header-style-1 .header-logo img {
    display:none;
}


h1.heading-title {
  margin: 0 auto;
  line-height: 120%;
    
}

h1.heading-title text.heading-title[style*="color:green"] {
  color: var(--c1) !important;
  padding-left: 8px;
}

text.heading-title[style*="color:green"] {
  color: var(--c1) !important; 
}
h2.heading-title[style*="color:green"] {
  color: var(--c1) !important;
  line-height: 120%;
  margin-bottom: 20px;
}

*[style*="color:red"] {
  color: #af3768 !important; 
}

*[style*="color:black"] {
  color: #444444 !important; 
}

.bg-red-dark,
*[style*="background-color:#c0392b"] {
  background-color: #af3768 !important; 
}

.menu-item {
  color: var(--c4i);
}

a.reminder {
    border-radius: 1rem;
    margin: 2rem 0 0;
}
.button-teal {
  background-color: var(--color-button);
}
.button-teal:hover {
  background-color: var(--color-primary);
}

.button-blue{
    background-color: var(--color-button);
}
.button-blue:hover{
    background-color: var(--color-primary);
}
.button-green {
  background-color: var(--c0);
}

.button-green:hover {
  background-color: var(--c1i);
  cursor: pointer;
}

.timeline-item a.button {
  width: 100% !important;
}

@media (max-width: 809px) {
  .pageapp-timeline-2 .timeline-text {
    padding-left: 40px;
    margin-top: -40px;
    width: 90%;
  }
}

.cover-screen {
  background-size: cover;
  background-position: center center;
  max-width: 100vw !important;
  height: 80vh !important;
  top: 7vh;
    position: static;
}
@media (min-width: 810px) {
  .cover-screen {
    max-width: 100vw !important;
    height: 80vh !important;
    top: 7vh;
    left: 0;
    position: static;
  }
}

.cover-center{
    width: 350px !important;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: -175 !important;
}
div.after{
    display: none;
}
.boxed-layout {
    border-radius: 10px;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
.pageapp-timeline-2 {
  margin-top: 30px;
  margin-bottom: 50px;
}

.pageapp-timeline-2 .timeline-icon i {
  color: var(--c0);
}

.filter-category {
  padding: 7px 10px;
  line-height: 110%;
}

.header-style-1 .header-2 i {
  width: 60px;
  height: 55px;
  line-height: 57px;
  text-align: center;
  color: #fafafa !important;
}

.heading-style-5 .heading-subtitle {
  color: #555;
}

.heading-style-5 {
  padding: 0 0 0 0;
}


.snap-drawers .content > .container {
  display: flex;
  grid-auto-columns: 50% 50%;
  grid-auto-rows: auto auto auto;
  margin-top: 0;
  flex-flow: column;
}
@media (min-width: 810px) {
  .snap-drawers .content > .container {
    display: grid;
    grid-auto-columns: 40% 60%;
    grid-auto-rows: auto auto auto;
    margin-top: 0;
  }
    strong[style="color:white;"]{
    font-size: 1.8em;
}
}

.snap-drawers .content > .container:has(.container-fullscreen.heading-style-3) {
  display: flex;
  flex-flow: column;
}

.snap-drawers .content > .container:has(.container-fullscreen.heading-style-3) .one-half-responsive {
  margin: 0;
  padding: 0;
}

.snap-drawer-left,
.snap-drawer-right {
  color: #aaaaaa;
}

.one-half-responsive {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin: 0;
  padding: 20px;
}
@media (min-width: 810px) {
  .one-half-responsive {
  display: flex;
  flex-flow: column;
  grid-area: 1 / 1 / 2 / 2;
}
}

.one-half-responsive:has(#alerta-advertencia) h1.heading-title {
  margin: 20px auto;
    border-radius: 1rem;
    border: 1px solid #777;
}

.one-half-responsive .decoration {
  display: none;
}


.one-half-responsive:has(h3.heading-subtitle), 
.one-half-responsive:has(h3.heading-subtitle) + .one-half-responsive {
  margin-top: 0;
    padding-top: 0;
}

@media (max-width: 809px) {
  .one-half-responsive:has(h3.heading-subtitle) + .one-half-responsive {
    margin-top: -150px;
  }
}


#alerta-advertencia h3 {
  color: #333 !important;
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
  content: "\f0c9";
  color: #eaeaea;
}

.footer {
  padding: 20px;
  margin-top: 20px;
    color: var(--c4i);
    display: flex;
    flex-direction: column-reverse;
}

.footer-icons {
    height: 100%;
    width: 100%;
  display: flex;
  justify-content: center;
    position: relative;
}
.footer-icons:before {
   content: "Seguinós";
    position: absolute;
    top:-30px;
}

.snap-drawer-left .fa,
.snap-drawer-right .fa {
  color: #6abdbd;
}

.footer .fa {
  color: #efefef;
}

.social-ball {
  background-color: var(--c3) !important;
}

.back-to-top-badge {
  background-color: var(--color-button) !important;
  background-image: unset;
}
.right-button{
    bottom: 5px !important;
}
.right-button:before{
    content:"Powered by ";
}

/**/

.all-elements .sidebar-divider {
  color: var(--color-primary);
  font-size: 0.9rem;
  margin: 30px 0px 10px;
}

.all-elements .sidebar-form .contactField:focus,
.all-elements .sidebar-form .contactTextarea:focus {
  border-bottom: solid 1px var(--c1i) !important;
}

.sidebar-header-right, .sidebar-header-left{
 background-color: transparent !important;
    color: white !important;

}

.all-elements .sidebar-header-left a img {
  width: 50px;
  
}

.all-elements .sidebar-header-right a img {
  width: 50px;
}

.sidebar-form {
  width: 200px;
  margin-left: 30px;
}

a.reminder {
  padding: 20px;
  align-items: start !important;
}

a.user-list-item {
  padding: 15px;
  border-radius: 1rem;
  border: 1px solid #777;
  background-color: var(--c2);
}
@media (min-width: 810px) {
a.user-list-item {
  padding: 25px;
}
}

a.user-list-item img,
a.reminder img {
  display: none;
}

a.user-list-item *,
a.reminder * {
  margin: 0;
  padding: 0 10px 0 0;
  text-align: left;
}
.bg-magenta-dark{
    background-color: var(--c2) !important;
    color: var(--color-text-black) !important;
}

@media (min-width: 810px) {
  a.user-list-item *,
  a.reminder * {
    margin: 0;
    padding: 0 20px 0 0;
    text-align: left;
  }
}

a.reminder em {
  line-height: 160%;
  margin-top: 10px;
}

.user-list-item em {
  margin-top: 1px !important;
}

a.user-list-item:before,
a.reminder:before {
    content: "";
    background-size: contain;
    position: absolute;
    top:20px;
    left: 20px;
    display: flex;
    flex: none;
    width: 60px;
    height: 60px;
    filter: invert(0.9);
}

a.user-list-item > *,
a.reminder > * {
  margin-left: 80px;
  line-height: 140%;
}
@media (min-width: 810px) {
  a.user-list-item > *,
  a.reminder > * {
    margin-left: 90px;
    line-height: 140%;
  }  
}

a.reminder[href*="estado_cuenta"]:before {
  background-image: url("https://calfibra.com.ar/files/account_icon.svg");
    
}

a.reminder[href*="estado_cuenta.php?PA=1"]:before {
  background-image: url("https://calfibra.com.ar/files/pay_icon.svg");
}

a.reminder[href*="mi_wifi"]:before {
  background-image: url("https://calfibra.com.ar/files/modem_icon.svg?v2");
}

a.user-list-item:before {
  background-image: url("https://calfibra.com.ar/files/wifi_icon.svg?v2");
  filter: invert(0.5) sepia(0.7) hue-rotate(-105deg) saturate(2.5);
}

#content2 {
  background-image: url("https://zenet.com.ar/image_zenet/cover-family.jpg") !important;
  background-size: cover;
  background-position: center;
}


@media (min-width: 810px) {
  .pageapp-login-content .boxed-layout {
    margin: -60px 0 0 0 !important;
    
  }
}

.pageapp-login-content .boxed-layout:before {
  content: "Panel de autogestión";
  position: absolute;
  width: 100%;
  display: flex;
  top: -60px;
  left: 0px;
  margin-left: 0;
  justify-content: center;
  color: var(--color-text-black);
  font-size: 1.8rem;
    font-weight: bold;
}
@media (min-width: 810px) {
  .pageapp-login-content .boxed-layout:before {
    font-size: 2rem;
      
  }
}

.pageapp-login .boxed-layout .pageapp-login-field i {
  position: absolute;
  color: var(--c2o);
  margin-top: 12px;
  margin-left: 10px;
}



@media (min-width: 810px) {
  .map-fullscreen {
    margin-top: -60px;
    margin-left: -50px;
  }
}


.pageapp-login .boxed-layout div input {
  font-weight: normal !important;
  color: unset;
}

.sidebar-footer {
  color: unset;
}

.snap-drawer textarea::placeholder {
  color: #aaa;
}

.pageapp-login-field h3[style*="color:darkred"] {
  font-size: 16.5px;
}

form#config-form {
  padding: 30px !important;
}

form#config-form button[type="submit"] {
  margin: 10px 0 20px;
}


/**/







/*inicial*/
.container.pyro{
    display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
    color: var(--color-text-black) !important;
}
.container.pyro > div:first-child {
  grid-column: 1 / 3;
}
.container.pyro > div:nth-child(2) {
  grid-column: 2;
  
}
.container.pyro > div:nth-child(3) {
  grid-column: 1;
  
}
.container.pyro > div:last-child {
  grid-column: 1 / 3;
  
}

.snap-content .content h3.heading-subtitle {
display: none !important;
}
text{
    color: var(--color-text-black) !important;
}
.one-half-responsive.container.heading-style-5 h1{
    width: 100% !important;
    background-color: var(--c2);
    color: inherit !important;
    border-radius: 1rem;
    padding: 30px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
}
.one-half-responsive.container.heading-style-5 h1:first-of-type{
    background-color: transparent;
    box-shadow: none;
    padding-top: 0;
    border: none !important;
    color: black !important;
    }
.one-half-responsive.last-column > a{
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
}
a.reminder:before{
    height: 100px;
    width: 100px;
    top:50%;
    left:0px;
    transform: translate(10%, -50%);
    
}

form#config-form{
    padding: 10px !important;
    margin: 0 auto;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important;
    button{
        text-transform: uppercase !important;
        font-weight: bold !important;
          letter-spacing: 1.5px !important;
        font-size: larger !important;
        border-radius: 0.5em !important;
    }
}
.login-input >button > i{
   display: none !important;
}
.login-input > input{
    width: 100% !important;
}
.login-input > button{
    right: 20px !important;
} #alerta-advertencia{
        padding: 10px !important;
        background-color: bisque !important;
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3) !important;
    }
#alerta-advertencia > button, form#config-form > button:hover{
    opacity: 0.8;
}

div[style="width: 90%;"] > strong{
    font-size: 1.5em;
    padding: 15px 5px;
}
div[style="width: 90%;"] > em{
    display: none !important;
}
    /** estado cuenta **/
 .container:has(.container-fullscreen.heading-style-3){
        display: flex !important; 
        align-items: center;
    }

.container-fullscreen.heading-style-3 {
    background-color: var(--color-button) !important;
    width: fit-content !important;
    border-radius: 10% / 50%;
    margin-left: 0 !important;
    margin-top: 5px !important;
    color: var(--color-text-white) !important;
}
.header-clear{
    height:55px;
}

.container-fullscreen.heading-style-3 > h3{
    font-size: 25px;
    font-weight: bold;
}
.container-fullscreen.heading-style-3 > em{
    display: none;
}
.container-fullscreen { 
    margin-bottom: 0px;;
}
.all-elements .selected-filter {
  background-color: var(--c3);
}
.portfolio-filter-categories {
  display: flex;
    flex-wrap: wrap;
    gap: 5px
}
.portfolio-filter-categories > a {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 56px;
    width: 48%;
    border-radius: 25px / 50% !important;
    font-size: unset;
    outline: none;
    color: #fafafa;
    background-color: var(--color-button);
    text-transform: uppercase;
    order:0 !important;
    padding: 5px 2px;
    text-align: start;
   
}
.portfolio-filter-categories > a.selected-filter {
    border: none;
    border-radius:1em 1em 0 0 !important;
    height: 56px;
    width: 100% !important;
    order:1 !important;
    font-size: 1.8em;
    font-weight: 800 !important;
}
/*button personalizados*/
a.filter-category::before{
  content: "";
    border-radius: 50%;
  width: 50px;  
  height: 50px;    
  background-size:contain;     
  background-repeat: no-repeat;
    margin-right: 6px;
}

a.filter-category[href="estado_cuenta.php?filter=VT"]::before{
    background-image: url("https://i.pinimg.com/736x/4b/09/b6/4b09b66bfef181219f1abb7026f96072.jpg");
}
a.filter-category[href="estado_cuenta.php?filter=IM"]::before{
    background-image: url("https://www.shutterstock.com/image-vector/invoice-line-icon-payment-bill-260nw-741444880.jpg");
}
a.filter-category[href="estado_cuenta.php?filter=UF"]::before{
    background-image: url("https://www.shutterstock.com/image-vector/invoice-line-icon-payment-bill-260nw-741444880.jpg");
}
a.filter-category[href="estado_cuenta.php?filter=F*"]::before{
    background-image: url("https://previews.123rf.com/images/martialred/martialred1908/martialred190800027/131609623-stack-of-bills-statements-or-invoices-line-art-vector-icon-for-financial-apps-and-websites.jpg");
}
a.filter-category[href="estado_cuenta.php?filter=P*"]::before{
    background-image: url("https://static.vecteezy.com/system/resources/previews/002/205/934/non_2x/cash-payment-icon-free-vector.jpg");

}

a.filter-category:hover {
  color: black !important;
}

[style*="background-color: green"] {
    background-color: var(--c1) !important;
}

.all-elements .selected-filter {
  background-color: var(--color-primary);
}

.overlay.bg-black {
    display: flex;
    background-color: var(--c4i): 
    
}


.pageapp-timeline-2{
    background-color: #fafafa;
    margin-top: 0;
    box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3) !important;
}
.pageapp-timeline-2:not(:has(.timeline-item))::after{
    content: 'No se encontraron registros';
    display: block;
    font-size: 1.3em;
    padding: 10px;
    
}
.one-half-responsive.container.heading-style-5:has(> h1:only-of-type) h1 {
    padding: 5px;
    font-size: 1.6em;
}

.timeline-item{
    height: fit-content !important;
    padding: 10px 10px;
    display: flex;
}
.timeline-decoration{
    margin-left: 32px !important;
}
.timeline-item > .timeline-text{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px 10px;
}
.sidebar-right-small {
    margin-bottom: 0;
}
.sidebar-right-small > a.button{

    width: fit-content !important;
    text-transform: uppercase !important;
    transition: all 0.5s; 
}
.sidebar-left-small h3:nth-of-type(2) {
    color: var(--color-text-black) !important;
}
/*config-wifi*/
a.user-list-item[style="cursor: pointer; background-color: beige;"]{
    background-color: blueviolet;
}
.sidebar-left-small > h3:first-child{
     font-size: 1.2em;
}
form > h2.headin-title{
    color: var(--color-text-black) !important;
}

/**/
@media (min-width: 810px) {
    .cover-center{
    width: 350px !important;
        padding: 0 !important;
}
  .snap-content .content h3.heading-subtitle {
    width: auto;
    margin-top: 0px; 
  }
    .one-half-responsive.container.heading-style-5 h1{
   max-width:400px; 
    background-color: var(--c2);
   border-radius: 1rem;
    border: 1px solid #777;
        padding: 30px;
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    }
    .container.pyro:has(#alerta-advertencia) > div:nth-child(2) {
  grid-column: 1;
    }
   
    .one-half-responsive.container.heading-style-5 > a.user-list-item{
        margin: 5px;
        padding: 8px
    }
    .one-half-responsive.container.heading-style-5 > a.user-list-item > strong{
        padding: 2px;
    }
    a.user-list-item:before{
       margin:0;
        top: 50%;
  transform: translate(1%, -50%);
    }
    .one-half-responsive.container.heading-style-5:has(#alerta-advertencia) > a.user-list-item:before{
        top: 50%;
  transform: translate(1%, -50%);
    }
    form#config-form{
    padding: 20px !important;
    width: 80%;
    margin: 0 auto;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3) !important;
  
}
   
    #alerta-advertencia > button, form#config-form > button{
        text-transform: uppercase !important;
        font-weight: bold !important;
          letter-spacing: 1.5px !important;
        font-size: larger !important;
    }
    
div[style="width: 90%;"] > strong{
    font-size: 2em !important;
    padding: 0 !important;
}
div[style="width: 90%;"] > em{
    display:block !important;
    font-size: 0.9em !important;
}
    .one-half-responsive:has(h3.heading-subtitle), 
.one-half-responsive:has(h3.heading-subtitle) + .one-half-responsive {
  margin-top: 0;
    padding-top: 20px !important;
}
    /** estado cuenta **/
.container-fullscreen.heading-style-3 {
    color:black !important;
    width: fit-content;
}
.header-clear{
    height:55px;
}

.container-fullscreen.heading-style-3 > h3{
    font-size: 25px;
    font-weight: bold;
}
.container-fullscreen.heading-style-3 > em{
    display: block;
    color: var(--color-text-white) !important;
    opacity: 1;
}
.all-elements .selected-filter {
  background-color: var(--color-primary) !important;
}
    
.one-half-responsive.container.heading-style-5:has(> h1:only-of-type) h1 {
    padding: 5px;
    font-size: 2em;
}
.portfolio-filter-categories {
  display: flex;
    width: 100%;
    gap: 2px;
    padding: 0;
}
.portfolio-filter-categories > a {
    flex-grow: 1;
    width: 19% !important;
    border-radius:1em 1em 0 0 !important;
    font-size: 20px;
    padding: 7px 10px;
    
}
.portfolio-filter-categories > a.selected-filter {
    width: auto !important;
    width: 19% !important;
    order: 0 !important;
    font-size: 22px;
    border-bottom: none !important; 
   padding: 
}

[style*="background-color: green"] {
    background-color: var(--c1) !important;
}

.all-elements .selected-filter {
  background-color: var(--c3);
}

.overlay.bg-black {
    display: flex;
    background-color: var(--c4i): 
    
}
.sidebar-right-small > a.button{
    width:100% !important;
}
.container-fullscreen.heading-style-3 {
    border-radius: 20% / 50% ;
    order: -10;
}
.pageapp-timeline-2{
    background-color: #fafafa;
    margin-top: 0;
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.3), 2px 0px 5px 2px rgba(0, 0, 0, 0.3);
    
}
.timeline-item{
    height: fit-content !important;
    padding: 10px 0;
    display: flex;
    align-items: center;
}
.timeline-item > .timeline-text{
    margin: 0;
    padding: 20px 0;
}
    .sidebar-right-big{
        width: 100% !important;
    }
    .sidebar-left-small{
     width: 100% !important;   
    }
    .sidebar-left-small > h3:first-child{
      font-size: 1.5em;
    }
    .container:has(.container-fullscreen.heading-style-3){
        display: flex !important; 
        align-items: center;
    }
/**/
}
    


