@charset "UTF-8";
/*##############################################################################
#	Derechos de autor y Propiedad Intelectual para Programación y Diseño Web.
#	Todos los derechos de autor y propiedad intelectual de la programación y diseño web
#	presentes en este sitio web y sus componentes, incluyendo, pero no limitado a, código
#	fuente, imágenes, gráficos, logotipos, textos y cualquier otro elemento creativo, 
#	son propiedad exclusiva de NETSOLEX - por autor ANATOLIY GAYCHENYA.
#
#	Estos elementos están protegidos por las leyes de derechos de autor y otras 
#	leyes y tratados internacionales de propiedad intelectual. Cualquier uso no autorizado 
#	de los mismos, incluyendo la reproducción, distribución, modificación o divulgación pública, 
#	está estrictamente prohibido y puede dar lugar a acciones legales y reclamaciones por daños y perjuicios.
#
#	Además, cualquier programa o software desarrollado por NETSOLEX para la programación y diseño web, 
#	así como cualquier base de datos, estructura de navegación o cualquier otra característica única 
#	de este sitio web, también están protegidos por derechos de autor y propiedad intelectual.
#
#	Se otorga un permiso limitado para utilizar y visualizar el contenido de este sitio web 
#	exclusivamente con fines personales o comerciales relacionados con el uso del sitio. 
#	Queda estrictamente prohibido cualquier otro uso, incluyendo la reproducción, distribución, modificación, 
#	exhibición pública o cualquier otro uso no autorizado.
#
#	Cualquier referencia a marcas comerciales, nombres de empresas u otros elementos protegidos 
#	por derechos de propiedad de terceros no implica ninguna afiliación o respaldo por parte de NETSOLEX.
#
#	Nos reservamos el derecho de ejercer todas las acciones legales disponibles para proteger nuestros 
#	derechos de autor y propiedad intelectual. Cualquier infracción será perseguida en la medida máxima permitida por la ley.
#
#	Si tiene alguna pregunta o desea solicitar permisos adicionales para el uso de nuestros materiales protegidos, 
#	le invitamos a ponerse en contacto con nosotros a través de los canales de comunicación proporcionados en este sitio web.
#
#	Copyright 2023 NETSOLEX. NETWORK SOLUTIONS EXCHANGE.
#	www.netsolex.com
#
#################################################################################*/
/*	File: content.style.css
 * Copyright 2023 Anatoliy Gaychenya.
 * Copyright 2023 NETSOLEX Ltd.
 * Licensed under https://netsolex.com/license/
 */
/*****###### HTML BODY #####******/


/****** fontawesome icons ********/
.fontawesome-icon{
	position:relative;
	top:2px;
	font-size:1.4rem;
	margin-right:1rem;
	cursor:pointer;
}
.fontawesome-pwd-icon{
	position:relative;
	top:2px;
	font-size:0.800rem;
	color:#079AE8;
	cursor:pointer;
}
/*****======= Rotate arrow ========== **/
    .arrow-restangle{
    display:flex;
    flex-direction: column;
    align-items:center;
    position:relative;
        width:auto;
        height:55px;
        top:0px;
        left:1%;
    }
    .spacer-obj-x{
    margin-right:12px;}
    
.rotating-arrow {
  width: 25px;
  height: 1px;
  background-color: #f0f0f0;
  animation: rotate 1.8s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*****======= Rotate arrow ========== **/
footer{background:#242020;margin-top:60px;font-size:14px;padding:20px 0}
footer,footer a,footer h4{color:#fff}
footer .container{max-width:1200px;display:flex;justify-content:space-between;flex-wrap:wrap;line-height:2.2em;padding:20px 0}
footer .container div{flex:1;max-width:340px}
footer .container div:nth-child(2){width:250px;box-sizing:content-box;flex:revert;padding-left:180px}#footer-logo{max-width:80%;display:block}footer h4{margin:1.2em 0}footer a{display:block}
footer a svg{height:20px;margin-right:10px;vertical-align:sub}

a.footer-link,a.footer-link:active{color:inherit;text-decoration:none;font-size:13px;font-weight:400;}
a.footer-link:visited{color:inherit;text-decoration:none;font-size:13px;}
a.footer-link:hover{color:#0076f5;text-decoration:underline;font-size:13px;}
a.footer-link:visited:hover{color:#0076f5;text-decoration:underline;font-size:13px;}


nav ul, nav ol, ul, ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
/********** Password switch mode **********/
/***** Show Password Switch *****/
.pass-switch input:checked + div::before {
  transform: translateX(2.5em);
}
	.pass-switch {
  height: 2.5em;
		width:50px;
  padding: 0;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
		.passmode-switch {
  font-size: 10px;
letter-spacing: .2em;
text-align: center;
padding-top: 10px;
padding-bottom: 13px;
}
		
		.passmode-switch .pass-switch {
  vertical-align: bottom;
  margin: -4px 10px;
}
		.pass-switch input {
  display: none;
}
	.pass-switch input + div {
  height: auto;
  width: 100%;
  border-radius: 999px;
  background: #079AE8;
  padding: .3em;
}
* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-size-adjust: none;
}

	.pass-switch input + div::before {
  content: '';
  display: block;
  height: 1.9em;
  width: 1.9em;
  border-radius: 100%;
  background: #fff;
  transform: translateX(0);
  transition: transform .2s;
}
/***** Show Password Switch *****/

.notices{margin:32px 0;position:relative}
.notices p{padding:10px;border-radius:var(--border-radius)}
.notices p::before{position:absolute;top:3px;font-family:themify;font-weight:900;content:"\e697";left:10px;height:18px;width:18px;text-align:center;border-radius:99px;border:2px solid;font-size:12px}
.notices p::after{position:absolute;top:2px;left:2.5em}
.notices.info p{border-top:30px solid rgba(255,210,89,.15);background:rgba(255,210,89,.15)}
.notices.info p::after{content:'Info'}
/** NETSOLEX **/

/** Footer Bottom Section **/
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/********** Page wordpress Section LeftSideTitle */
.tm-section-title > ::before {
  content: "";
  position: absolute;
  top: -36px !important;
  left: calc(50% - (15px / 2)) !important;
  height: 15px;
  width: 15px;
  /*background-color: var(--red-savina-pepper) !important;*/
  border-radius: 50% !important;
  animation: blinker 1.8s linear infinite !important;
}

/********** Page wordpress Section LeftSideTitle */
.box {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  cursor: pointer;
}
.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: #f74a06;
  transition: width 0.3s ease-in-out; /* adjust the transition speed as needed */
 transform: scaleX(1);
}

/*Custom NX-strap*/
.shadow,.card{box-shadow:0 5px 15px rgba(0,0,0,7%)!important;transition-duration:.3s;transition-property:box-shadow,transform}
.shadow:hover,.shadow:focus,.card:hover,.card:focus{box-shadow:0 14px 25px rgba(0,0,0,.1)!important}
a.card:hover{transform:translateY(-5px)}

 @keyframes slide-in {
        from {
            left: -100%;
        }
        to {
            left: 0;
        }
    }
@keyframes lightSpeedIn{from{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}
.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
.fadeInUp{animation-name:fadeInUp}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn{animation-name:zoomIn}

/******** iFrame Container ***********/
.iframe-container {
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.iframe-container iframe {
    width: 100%;
    height: 100vh;
    border: none;
}
/*****************************/
.dash_sidebar {
            height: auto;
            width: 280px;
			min-width:280px;
            /*position: fixed;*/
            /*padding-top: 60px;*/
            z-index: 1;
            overflow-x: hidden;
            transition: 0.5s;
        }
@media only screen and (max-width:1120px){
	.dash_sidebar{
		position:relative;
		width:80px;
		min-width: 0;
		height: 100%;
	}
}

/*************** Nav Menu navigation ********/
nav.navigation{
	display:flex;
	align-content: center;
	flex-direction: row;
	justify-content:center;
	min-height:70px;
}
nav.navigation ul{
	list-style-type: none;
	padding:0px;
	margin:0 12px;
	line-height: 68px;
}
nav.navigation ul li{
	display: inline;
	margin: 0 14px;
}

#navigation {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
.navchild {
	text-decoration: none;
	display: block;
	padding: 0px 5px 0px 14px;
	margin-bottom: 1px;
	line-height: 38px;
}
.sub-navchild {
	text-decoration: none;
	display: block;
	padding: 0px 5px 0px 14px;
	margin-bottom: 1px;
	line-height: 38px;
	background: #3f3f3f;
}
.child-primary-style{
	background: #f4f2f1;
	}
		.child-primary-style:hover{
			background: #EAE6E1;
		}
		.child-secondary-style{
	 	background: #4C4848;
		}
       .child-secondary-style:hover{
	 	background: #302C2C;
		}
        
			.sub-darkchildlink{
			color:#fff;
			padding: 0px 10px 6px 14px;
			margin: 2px 0;
			max-height: 35px;
			line-height: 35px;
			font-size:0.800rem !important;
			text-align:right;
}
		.child-primary-style a {
			width:100%;
            text-decoration: none;
            color: #555050;
			font-size:1rem;
			font-weight:500;
            display: block;
            transition: 0.4s;
        }
        .dash_sidebar ul li.child-primary-style a:hover {
            color: #000000;
        }
	.child-secondary-style a {
			width:100%;
            text-decoration: none;
            color: #F2EEEE;
			font-size:1rem;
			font-weight:500;
            display: block;
            transition: 0.4s;
        }
        .dash_sidebar ul li.child-secondary-style a:hover {
            color: #FFFFFF;
        }



		.dash_sidebar ul {
			list-style-type: none;
			padding: 0px;
		}
		.dash_sidebar ul li.navchild{
			display: flex;
			padding: 4px 0px 0 12px;
			margin: 1px auto;
			border-left:3px solid transparent;
			flex-direction: column;
		}
		.dash_sidebar ul li.navchild:hover{
			border-left:3px solid #E8035B;
			transition: 0.3s ease-in-out;
		}
		.dash_sidebar ul li:not(:hover){
			transition:0.3s ease-in-out;
		}
@media only screen and (max-width:1120px){
	.dash_sidebar ul li.navchild{
			display: flex;
			padding: 3px 0px 20px 12px;
			margin: 1px auto;
			border-left:3px solid transparent;
			flex-direction: column;
		}
}

	#navigation .sub-navchild a{
	color:#fff;
		font-size:1rem;
		text-align:center;
}
/* Hide the rows by default */
ul li.sub-child-row:not(.expandable) {
    display: none;
}
ul li.dark-sub-child-row:not(.expandable) {
    display: none;
}


        /* Class to expand the sub-child-row */
        .sub-child-row, .dark-sub-child-row {
            max-height: 500px; /* Set a max-height large enough to fit the content */
            transition: max-height 0.8s ease-in-out;
        }
			
			.sub-child-row ul li a.navsublink {
           	padding: 0px 0px 6px 14px;
			background: #fff;
			margin: 2px 0;
			max-height: 35px;
			line-height: 35px;
			font-size:0.800rem;
        }
		.dark-sub-child-row ul li a.navsublink{
			padding: 0px 0px 6px 14px;
			background: #888484;
			margin: 2px 0;
			max-height: 35px;
			line-height: 35px;
			font-size:0.800rem;
}

		/**************** Sidebar ul li hover Icon *********/
		.dash_sidebar ul li:hover .nx-ico-home{
			top:11px;
			background:url('../images/icons8-home-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.dash_sidebar ul li:hover .nx-ico-dashboard{
			top:11px;
			background:url('../images/icons8-dashboard-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.dash_sidebar ul li:hover .nx-ico-user{
			top:11px;
			background:url('../images/icons8-user-shield-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
			}
		.dash_sidebar ul li:hover .nx-ico-service{
			top:11px;
			background:url('../images/icons8-service-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.dash_sidebar ul li:hover .nx-ico-config{
			top:11px;
			background:url('../images/icons8-config-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		/********** All  Icons **********/
		/********* Icon Home ********/
		.nx-ico-home{position:relative;
			top:11px;
			background:url('../images/icons8-home-grey-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.nx-ico-home:hover{
			top:11px;
			background:url('../images/icons8-home-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		/************** Icon Dashboard ***********/
			.nx-ico-dashboard{position:relative;
			top:11px;
			background:url('../images/icons8-dashboard-grey-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.nx-ico-dashboard:hover{
			top:11px;
			background:url('../images/icons8-dashboard-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		
		/************* User Shield Admin *********/
			.nx-ico-user{position:relative;
			top:11px;
			background:url('../images/icons8-user-shield-grey-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.nx-ico-user:hover{
			top:11px;
			background:url('../images/icons8-user-shield-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		/********* Icon Service ********/
		.nx-ico-service{position:relative;
			top:11px;
			background:url('../images/icons8-service-grey-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.nx-ico-service:hover{
			top:11px;
			background:url('../images/icons8-service-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		/********* Icon Config ********/
		.nx-ico-config{position:relative;
			top:11px;
			background:url('../images/icons8-config-grey-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}
		.nx-ico-config:hover{
			top:11px;
			background:url('../images/icons8-config-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			float: left;
			margin-right: 12px;
			transition: 0.4s;
		}

		/****************************************/
		
        /* Show the sidebar when it has the "open" class */
		.menubar {
			display:flex;
			align-content: center;
			flex-direction: row;
            width: 100%;
            height: 0px;
            z-index: 1;
            overflow-x: hidden;
            transition: 0.3s;
        }
        .menubar.open {
			width:100%;
            height: 360px;
        }
	.nx-ico-bar-default{position:relative;
			top:5px;
			left:9px;
			width:32px;
			height:32px;
			margin:0px;
			background:url('../images/icons8-menu-black-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
		transition: 0.4s;
		cursor:pointer;
		}
		.nx-ico-bar-default:hover{
			background:url('../images/icons8-menu-red-32.png');
		}
		.rotate {
  		transition: transform .55s ease-in-out; /* Apply a 1-second transition effect with ease timing function */
}

		.rotate.rotate-90 {
 		 transform: rotate(90deg);
		}

		.nx-ico-close-default{
			width:32px;
			height:32px;
			background:url('../images/icons8-close-white-32.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 50% 50%;
			top: 12px;
			position: relative;
			left: 17px;
			z-index:999;
			cursor:pointer;
		}
		.nx-ico-close-default:hover{
		background:url('../images/icons8-close-red-32.png');
		}
		
		.navrow-sidebar{display:block;
			width:100%;
			height:60px;
			background: #202124;
			margin:0 auto;
			padding:0px;
		}
		.nav-logo{position:relative;
			display:flex;
      justify-content: center;
      align-content: center;
			overflow:hidden;
			
		}
		/********** expand ********/

/************** Main Content Page ***********/

/*********** Gallery ***************/
.gallery {
  --s: 180px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
}
@media only screen and (max-width:1120px){
	.gallery {
  --s: 130px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
		width:auto;
}
}

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: .35s linear;
}

.gallery img:hover{
  filter: grayscale(0);
  width:  calc(var(--s)*var(--f));
  height: calc(var(--s)*var(--f));
}