/*:root {
    --menu3-cor-fundo: rgb(34, 41, 37);
    --menu3-cor-hover: rgb(118, 180, 145);
    --menu3-cor-primaria: rgb(231, 241, 236);
    --menu3-cor-primaria-hover: rgb(255, 255, 236);
}*/


.dp-menu{
	max-width:100%;
	margin:auto auto;
	display:block;
	z-index:9;
}
.dp-menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
  /*background: var(--menu3-cor-fundo); tw23*/
  	display: flex;
	z-index:9;
	margin:auto auto;
}

	
.dp-menu ul li {
  display: block;
  position: relative;
  float: left;
  /*background: var(--menu3-cor-fundo); >> tailwind2023*/
  width: -webkit-fill-available;
  width: -moz-available;
  text-align: center;
}

/* This hides the dropdowns */

.dp-menu ul li ul li ul{
	max-height: calc(100vh - calc(100vh/4));
    overflow-y: auto;	
}

.dp-menu li ul { display: none; box-shadow: 0px 15px 20px 0px #0000005e;}

.dp-menu ul li a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  /*color: var(--menu3-cor-primaria); tw23*/
}

.dp-menu ul.start li a {font-weight:600; padding:15px 0px;}

.dp-menu ul li ul li a{padding:8px 1em !important;margin:0px 0px;}

.dp-menu ul li a:hover { /*background: var(--menu3-cor-hover);  color:var(--menu3-cor-primaria-hover); >> tw23*/ transition: background .3s;}

/*svg ico*/
.dp-menu ul li a svg{max-width:25px; max-height:25px; fill:var(--menu3-cor-primaria); display: block; margin: auto auto;  margin-bottom: 5px;}
.dp-menu ul li a:hover svg{fill:var(--menu3-cor-primaria-hover);}
/*¬ svg ico*/

/* Display the dropdown */


.dp-menu li:hover > ul {
  display: block;
  position: absolute;
}

.dp-menu li:hover li { float: none; }

.dp-menu li:hover a { /*background: var(--menu3-cor-fundo); tw23*/ transition: background .3s;}

.dp-menu li:hover li a:hover { /*background: var(--menu3-cor-hover); tw23*/ transition: background .3s;}

.dp-menu li ul li { border-top: 0; text-align: left; margin:0px;}
.dp-menu li ul li a:before {font-family: "Arial";content: "\›"; padding-right: 5px;font-weight: 900; color:var(--txtBtBlue); font-size:16px;}
.dp-menu li.more a:before {font-family: "Arial";content: "\☰"; padding-right: 5px;font-weight: 900; color:var(--txtBtBlue);font-size:12px;}
.dp-menu li.more ul li a:before {font-family: "Arial";content: "\›"; padding-right: 5px;font-weight: 900; color:var(--txtBtBlue); font-size:16px;}

/* Displays second level dropdowns to the right of the first level dropdown */


.dp-menu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



.dp-menu ul:before,
.dp-menu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.dp-menu ul:after { clear: both; }

.dp-menu ul.start li a {font-size:15px;}

@media only screen and (max-width: 1280px) {
	.dp-menu ul.start li a {font-size:10px;}
}
@media only screen and (max-width: 480px) {
	.dp-menu ul li ul{display:none !important;}
	.dp-menu ul.start li a {font-size:15px;}
}
@media only screen and (max-width: 767px) {
	.dp-menu ul{display:grid}
	.dp-menu ul.start li a {font-size:15px;}
}

/************************ form login > Minha Conta */

li.formLogin{ min-width:260px; }
li.formLogin h1 {
	font-size:26px;
	padding:20px;
	color: var(--menu3-cor-primaria);
}
li.formLogin input {
    width: 80%;
    display: block;
    margin: auto auto;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5PX;
    border: 0PX;
}
li.formLogin input[type="password"] {
	max-width:55%; float:left; margin-left:10%; margin-right:5%;
}
li.formLogin button{margin-bottom:10px; width:80%; display:block; margin:5% auto;}
li.formLogin button#ok{width:20%; max-height:46px; float:left;margin-top: 0px;}

ul.formLogin{
	/*left: -100% !important;*/
    position: absolute !important;
}
/************************ form login > Minha Conta ¬ */




/**************************** responsivo com svg *************************/

@media screen and (min-width: 1280px) {
	#bt-menu{display:none;}
}

@media screen and (min-width: 20px) and (max-width: 1279px) { 
	#bt-menu{
			position: fixed;
			font-size: 26px;
			padding: 10px 20px;
			background-color: var(--menu3-cor-primaria);
			color: var(--menu3-cor-primaria-hover);
			border-radius: 5px;
			/*position: absolute;*/
			top: 0px;
			right: 15px;
	}
	
	nav.dp-menu ul {
		display: flow-root;
		width: 80vw;
	}
	nav.dp-menu ul li{padding: 0px 10px;}
	nav.dp-menu ul li:hover {background-image:unset !important;}
	
	nav.dp-menu ul li ul{display:none;}

	nav.dp-menu{
		/*width: min-content;
		float: right;
		background-color: var(--menu3-cor-fundo);
		display: block;
		position: absolute;
		right: 0px;
		padding: 0px 30px;
		margin: 0px;
		box-shadow: 0px 15px 20px 0px #0000005e;
		height: 100vh;*/
		box-shadow: 0px 15px 20px 0px #0000005e;
		padding: 0px 30px;
		background-color: var(--menu3-cor-fundo);
		display: none;
		margin-top:50px; 
		position: fixed;
		top:0px;
		max-width: 80vw;
		width: 50vw;
		right: 0px;
		min-width: unset;
	}
	nav.dp-menu ul li a {
		display: -webkit-inline-box;
		float: left;
		    width: 100%;
			padding: 20px;
			margin: 0px;
			font-size:16px !important;
	}
	nav.dp-menu ul li a svg {
		margin-right: 20px;
	}
}

 
 
/**************************** responsivo com svg *************************/