.header-topnav {
  margin:0;
	padding: 0;
  background-color: #ffffff;
	// box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
  position: relative;
  z-index: 999;
  .container {
    padding: 0;
  }
  .topbar-branding {
    float: left;
    height: 48px;
    padding: 8px;
    margin: 0 8px;
    img {
      height: 100%;
      width: auto;
    }
  }
  .topnav {
    // margin-left: -19px;
    display: flex;
    align-items: center;
  }
  .header-topnav-right {
    float: right;
    height: 48px;
    display: flex;
    align-items: center;
    padding-right: .67rem;
  }
}

@media (max-width: 959px) {
  .header-topnav-right {
    position: absolute;
    right: 6px;
    top: 0;
  }
}

[dir=rtl] {
  .header-topnav {
    .topnav {
      flex-direction: row-reverse;
    }
  }
}

.newMenu{
  color: $white-color;
}

.SearchBox-input, 
.SearchBox-button {
	border: none;
	background: none;
	outline: 0;
}
.SearchBox-input::placeholder {/* No es un seudoelemento estandar */
  color:black;
   opacity: .6;
 }
 /* Chrome, Opera ySafari */
 .SearchBox-input::-webkit-input-placeholder {
   color: black;
 }
 /* Firefox 19+ */
 .SearchBox-input::-moz-placeholder {
   color: black;
 }
 /* IE 10+ y Edge */
 .SearchBox-input:-ms-input-placeholder {
   color: black;
 }		
 .SearchBox {
  position:absolute;
  left:35%;
  top:3px;
	height: 39px !important;
	display: flex;
	border-radius:4em;
  background: #f7f8fa;
	height: 4em;
}
	.SearchBox:hover .SearchBox-input {
		
	}
	.SearchBox-input {
    padding-left: 1em;
		padding-right: 1em;
		width: 240px;
		font-size: 1em;
    color: black;
    transition: .5s;
    font-size: 19px !important;
	}
	.SearchBox-button {
		display: flex;
		border-radius: 50%;
		width: 2em;
		height: 40px;
		background-color:#f7f8fa;
		transition: .5s;
  }
	.SearchBox-button:active  {
	}
	.SearchBox-icon {
		margin: auto;
   background-color: #f7f8fa;
    line-height: 2;
  }

  
.close_icon_search {
  position: absolute;
  right: 35px;
  top: 9px;

  .mat-icon {
    font-size: 14px;
    background: $close-icon-background;
    padding: 3px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }
}
  
  @media screen and (max-width: 1023px) {
    .SearchBox{
    display: none;
    }
  }

  @media screen and (max-width: 1023px) {
    .visibles{
    display: block !important;
    }
  }

  @media screen and (min-width: 1024px) {
    .visibles{
    display: none !important;
    }
  }

  @media screen and (max-width: 1023px) {
  .store-icom {
    display: none;
  }
}


  // @media screen and (max-width: 767px) {
  //   .SearchBox{
  //   display: none;
  //   }
  // }
  // @media screen and (min-width: 768px) and (max-width: 1023px) {
  //   .SearchBox{
  //  left:29%;
  //   }
  // }

  @media screen and (min-width: 1024px) and (max-width: 1439px) {
    .dropdown-content{
   left:37px !important;
   width: 945px !important;
    }
    .columnselect-apps{
      width: 220px !important;
    }
    .columnselect-next {
      width: 225px !important;
    }
    .columnselect-rs {
      width: auto !important;
    }
  }

  @media screen and (min-width: 1440px) and (max-width: 1856px) {
    .dropdown-content{
    left: 210px !important;
  }
  }

// .SearchBox-input:focus {
//   width: 300px;
// }

@media (min-width: 1024px){
	.SearchBox:hover .SearchBox-input, .SearchBox-input:focus{
		width: 400px;
	}
}

.apps-button{
left: 55px;
}


// @media (min-width: 768px) {
// .apps-button{
// left: 70px;
// }
// }

// @media (max-width: 767px) {
//   .apps-button{
//     left: 100px;
//     }
// }


.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 14px 16px;
  font: inherit;
  margin: 0;
}

// .navbar a:hover, .dropdown:hover .dropbtn {
//   background-color: red;
// }

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  width: auto !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  top: 44px;
  left: 430px;
  margin-left: 15px;
  border-top: 1px solid #454545;
  padding: 0px 10px;
  max-height: 500px;  
}

.dropdown-content::backdrop {
  background-color: #448;
}

.dropdown-content .header {
  background: #d04545;
  margin-left: -14px;
  padding: 10px;
  color: white;
  max-height: 500px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.columnselect {
  float: left;
  padding: 10px;
  width:250px;
  max-height: 500px;
}

.columnselect-next {
  padding: 10px;
  width:250px;
}
.columnselect-rs {
  padding: 10px;
  width:auto;
}

.columnselect-apps {
  padding: 10px;
  width:250px;
}

.columnselect a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.scroll {
  max-height: 455px;
  overflow: auto;
}
.scroll-column {
  max-height: 200px;
  overflow: auto;
}

.columnselect a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.rowselect {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  padding: 0px 10px;
}

.in-header {
color: #454545;
}
.no-content {
  color: grey;
  font-size: medium;
}
.item-active {
  color: #ff7066!important;
  font-size: large !important;
}

.item-active .icon-color {
  color: #ff7066!important;
}