@font-face
{font-family: 'TablerIcons';src: url('../../assets/css/tabler-icons.woff2') format('truetype');}

body{background: #1f1f1f; color: #ffffff;}
*{padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box;}

	.wrapper
	{display: flex; position: fixed;}

	.wrapper .sidebar
	{width: 50px; height: 64px; bottom: 1px ; padding-top: 3px; background: #2f2f2f; position: fixed;}
	
	.wrapper .sidebar ul li 
	{padding: 16px; border-bottom: 1px solid #91a666; border-bottom: 0px;border-top: 0px; z-index: 0;}
	
	.wrapper .sidebar ul li a
	{color: #fff; display: flex;}
	
	.wrapper .sidebar ul li:hover
	{background-color: #91a666; color:#2a2a2a; transition: 0.6s; border-radius: 3px;}
		
	.wrapper .sidebar ul li:hover a
	{color: #2a2a2a}



		.container {
	position:fixed;
	display: flex;
			float:left;
	justify-content: space-between;
	margin-left:32px;
	bottom:0px;
	right:140px;
	align-items: center;
	width: 64px;
	height: 64px;
		}
		
		.left, .right {
	position: relative;
		}
		
	.container  li {
	list-style: none;
	position: absolute;
		}
.container li {
    position: relative; /* Relativo para que el pseudo-elemento se posicione correctamente */
    transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

.container li:hover::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -5px;
    right: -5px;
    background-color: #91a666;
    border-radius: 3px; /* Bordes redondeados */
    z-index: -1;
    transition: background-color 0.3s ease, top 0.3s, bottom 0.3s, left 0.3s, right 0.3s; /* Transición suave en todas las direcciones */
}
		
		.num0 {
	z-index: 1;
		}
		
		.num1 {
	z-index: 2;
		}
		
		.caps0 {
	z-index: 1;
		}
		
		.caps1 {
	z-index: 2;
		}
		



/*
	.left
	{font-size: 26px; color: #fff; float: right; 
cursor: pointer; padding-left:6px; padding-right:6px; padding-top:16px; padding-bottom:20px; display: flex;}

	.left :hover
	{  background: #91a666; color:#2a2a2a; transition: 0.3s;}
*/


	.code table tr
	{display: flex; border-radius: 9px; background-color: #1a1a1a; font-family: monospace;}

	.wp
	{ display: flex; padding-left: 79px; padding-top: 96px;}

	body
	{font-family: sans-serif;}

	nav
	{background: #2f2f2f; height: 66px; width: 100%; position:fixed; bottom: 0;}

	.gx nav
	{background: #91a666; height: 66px; width: 100%; position:fixed;}


	label.logo
	{color: #91a666; line-height: 80px; padding: 110 100px;}

	nav ul
	{float: right;}

	nav ul li
	{display: flex;}

	nav ul li a
	{color: #fff; font-size: 17px; padding: 7px 13px; border-radius: 3px;}
	nav ul li a text
	{font-family: TablerIcons;}

	.checkbtn
	{ color: #fff; float: left; line-height: 60px;
		margin-left: 13px; cursor: pointer; display: flex; position: fixed; padding-top: 9px;}

	#check
	{display: none;}
	#numm
	{display: none;}
	#capm
	{display: none;}

.checkbtn i
{bottom: 13px;font-size: 26px;}

nav ul
{position: fixed; width: 200px;  background: #2f2f2f;
	bottom: 60px; bottom: -100%; text-align: left; transition: 0.0s; border-radius: 6px;}

nav ul li
{display: flex; line-height: 34px; border-radius: 6px;}

nav ul li:hover
{background: #91a666; transition: 0.6s;}

nav ul li a
{font-size: 16px; vertical-align: middle;}

#check:checked ~ ul
{bottom: 66px;transition: bottom 0.0s; }

#capm:checked ~ ul
{bottom: 66px;transition: bottom 0.0s; right:22px; }
#capm ~ ul
{bottom: 66px;transition: bottom 0.0s; right:-999px;  }

#numm:checked ~ ul
{bottom: 66px;transition: bottom 0.0s; right:32px; }
#numm ~ ul
{bottom: 66px;transition: bottom 0.0s; right:-999px;  }

.ghbtn
{font-size: 32px;font-family: TablerIcons; float: left; line-height: 60px;
	margin-left: 70px; cursor: pointer; display: flex;}

.ghbtn a
{font-size: 26px; color: #fff; float: right; 
		cursor: pointer; padding-left:6px; padding-right:6px; padding-top:6px;display: flex;}

.ghbtn a:hover
{  background: #91a666; color:#2a2a2a; transition: 0.3s;}

.ghbtn img
{margin-top: 18px;margin-bottom: 16px;
}

td
{padding-right: 16px;padding-left: 16px;}

	p
	{font-size:26px; position: fixed; float: right; right: 16px; display: block; bottom: 16px}
