/* SIDEBAR ESTRUTURA */
.sidebar 				{background: var(--sidebarbkg); width: 350px; height: 100vh; padding: 15px; transform: translateX(-100%); position: absolute; left: 0; top: 0; transition: transform 0.8s ease, opacity 2s ease, visibility 8s ease; z-index: 10; overflow-y: scroll; opacity: 0; visibility: hidden;}
.sidebar.active 		{transform: translateX(0); opacity: 1; visibility: visible; transition: transform 0.8s ease;}
.sidebar-header     	{color: var(--sidefont); border-bottom: 1px dotted var(--sidebot); font: 700 20px/15px "Montserrat"; margin-top:15px; padding:0 15px; display: flex; justify-content: space-between; align-items: center; line-height:2}
.sidebar .close-btn 	{background: none; border: none; color: #fff; font-size: 20px; cursor: pointer}
.sidebar-button a   	{background-color:var(--sidebarbut); color:var(--sidebutfont); border:1px solid var(--sidebutbor); font: 700 15px/20px "Roboto"; padding: 10px 20px; border-radius:20px; cursor: pointer; transition: background-color 0.3s ease}
.sidebar-button a:hover {background-color: var(--sidebuthov)}
@media (max-width: 500px) {.sidebar {width:100%}}

.sidebarmenu            {display:flex; flex-direction:row; gap:4px; justify-content:flex-end}
.sidebarmenu a          {background:var(--sidebarmenu); display: flex; font-size: 16px; color:var(--smenufont); padding: 10px 10px; border-radius:10px; align-items:center; cursor:pointer}
.sidebarmenu a:hover    {background:var(--smenuhov)}
.sidebarmenu .active    {background:var(--smenuhov)}
.sidebarmenu a i 		{width:20px; font-size: 17px; margin-right: 5px; display: flex; align-items: center; justify-content: center}
.sidebarmenu h1         {font: 400 14px/14px "Roboto"; color:var(--smenufont); margin-top: 2px; letter-spacing:0.5px}
@media (max-width: 540px) {.sidebarmenu a{padding: 10px 7px}.sidebarmenu a i{ font-size: 15spx; margin-right:2px}.sidebarmenu h1 {font:400 10px/10px "Roboto";}}

/* ACCORDION */
.accordion-title    	{background-color: var(--asideacortit); color: var(--asiacorfont); font: 700 16px/13px "Lato"; cursor: pointer; padding:15px; margin-bottom: 5px; display: flex; align-items: center}
.accordion-title i 		{font-size: 14px; margin-right: 10px; line-height: inherit}
.accordion-content  	{max-height: 0; overflow: hidden; transition: max-height 0.5s ease}
.accordion-content.open {max-height: 400px}

/* SIDEBARCOL */
.asidebarcol a      	{background: var(--asidebarcol); font: 400 13px/17px "Tahoma", sans-serif; color:var(--asicolfont); padding: 8px 20px; border-bottom: dotted 0px var(--asibarcolbot); display:block; align-items: center; overflow: hidden; letter-spacing: 1px}
.asidebarcol a::before 	{content: "\f0da"; font-family: FontAwesome; margin-right: 10px; position: relative; left: 0; transition: left 0.3s ease}
.asidebarcol a:hover    {background: var(--asicolhov)}
.asidebarcol-tta    	{background: var(--asicoltta); font: 700 15px/20px "Lato"; color: var(--asicolfont); margin-bottom:5px; margin-top:1px; border-bottom:0px solid var(--asibarbot); padding:12px; text-transform: uppercase; letter-spacing: 1px}

.asidebar-menu        	{background: var(--asidebarmenu); font: 700 13px/13px "Lato"; color: var(--asimenufont); margin-bottom:5px; text-transform: uppercase; letter-spacing: 1px}
.asidebar-menu a      	{background: var(--asidebarmenu); color:var(--asicolfont); padding: 15px; display: block; align-items: center; overflow: hidden; letter-spacing: 1px; cursor: pointer; text-decoration: none}
.asidebar-menu a:hover 	{background: var(--asimenuhov)}

/* SCROL DO SIDEBAR */
.sidebar::-webkit-scrollbar {width: 6px}
.sidebar::-webkit-scrollbar-track {background-color:var(--sibarscrolbkg)}
.sidebar::-webkit-scrollbar-thumb {background-color:var(--siscrolmov); border-radius: 10px;}
.sidebar::-webkit-scrollbar-thumb:hover {background-color:var(--siscrolhov)}