body	{
	font-family: Calibri, Verdana, Tahoma, serif;
	width: 92%;
	
  	float:none;
  	font-size: 100%;
    font-weight:normal;
    min-width:600px;
    background-color: #f0f0f0;

	} 

* {
  box-sizing: border-box;
}

header, footer	{
	position:fixed;
   	width:96%;
	background-color:#1e84b4;
	
	color:GhostWhite;
  
  
	}

header {
	font-weight:normal;
  	top:0;
   	text-align: left;  
 }


.topnav {
  overflow: hidden;
  position: relative;
  width: 105%;
  
  background-color:#124861;
 
  color: ghostwhite;
  z-index:1;


}

.topnav #heading {
  font-size:32pt;
  text-align: left;  
  margin-left: 2%;
  margin-right: 3%;
  padding-left: 8px;
   width:100%;
   display: block;
  
   
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  text-align:left; 
  margin-left: 1%;
  margin-right: 3%;
  padding-left: 8px;
  padding-right: 8px;
 
   
}

/* Style navigation menu links */
.topnav a {
  color: ghostwhite;
  padding: 6px 8px;
  text-decoration: none;
  font-size: 14pt;
  display: inline;
  float:left;
  
}

.topnav #Header {
  width:100%;
}

#Link {
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #124861;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}




footer {
	font-size: small;
   	bottom:0;
   	color:#e60000;
   	text-align: left;  
  margin-top:1px;
 }

h2  {
  
  font-size:normal;
  background-color:inherit;
  color:#1e84b4;
  display:inline-block;
  clear:both;
  margin-left: 4px;
  padding-left: 8px;

  }


h1 {
  font-size:200%;
  width: 92%;
  background-color:#1e84b4;
  color: ghostwhite;
  margin-left: 3%;
  margin-right: 3%;
  padding-left: 8px;
  text-align:left; 
}

h3  {
  background-color:ghostwhite;
  font-size:normal;
  font-variant-caps: all-small-caps;
  color:#1e84b4;
  font-weight:normal;
  text-align: left;
  padding-left: 10px
  }

#searchfields {
	position:fixed;
	background-color: ghostwhite;
	background-image: linear-gradient(to left, ghostwhite, ghostwhite);
	width:100%;
}

#collocatori, #timeline, #sinonimi {
  display:block;
}

#collocatori:hover, #timeline:hover, #sinonimi:hover {
  background-color:#8d93b0;
}



.insert  { 
	display:none;
	text-align: top;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

br {
    display: block;
    font-size:5px;
    line-height: 5px;
}

#item, #ads {
  margin-left: 50px;
  display:block;
}

[class|=levels] {
  display: inline;
  font-size:smaller;
}

a#examples {
  color:red;
  background-color: ghostwhite;
  display: block;
  text-decoration: none;
  margin-left: 2%;
  margin-top: 16px;
  text-indent: 2%;
  color: #383838;
}

span.examples {
  font-size: 0px;
}

span.examples span.context{
  font-size:12pt;
  
}

span.examples span.word{
  font-size:12pt;
  
}

div#dizionario {

    width:80%;
    line-height: 1.3;
    margin-left:2%;
    margin-right:2%;
    display: inline-block;
    
}

div#benvenutolarge {

    
    align-content: center;
    font-size: larger;
    color:gray;
    line-height: 1.5;
    margin-left:24%;
    margin-right:22%;
    display: block;   
}

div#benvenutosmall {   
    align-content: center;
    font-size: normal;
    color:gray;
    line-height: 1.2;
    margin-left:24%;
    margin-right:22%;
    display: block;   
}
span.lem {
  font-size:larger;
  text-align: left;
  color: blue;
  display:inline-block;
}

span.sublemma, span.var, span.femminile {
  font-size:normal;
  text-align: left;
  color: blue;
  display:inline-block;
}

span.prelem, span.presublemma {
  text-align: left;
  color: blue;
  display:inline-block;
}

ft {
  display: none;
}


textarea {
  font-family: inherit; 
  font-size: inherit; 
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  
}

p.message {
  color:black;
  font-size: larger;
  background-color: #6ecbe2;
}

sup.omografo {
  color: blue;
}
span.grammsec {
  color: lightblue;
  display:inline;
}
span.autore {
  color: gray;
  display:inline;
  font-variant-caps: small-caps;
}
span.citaz {
  color: gray;
  font-weight:lighter;
  display:inline;
}
span.citaz:before {
  content:"«";
}
span.citaz:after {
  content:"»";
}

span.punctuation {
  display:none;
}


span.fles, span.spieg, span.aus, span.ambito, span.registro {
  color: gray;
  display:inline-block;
  font-style: italic;
  font-weight: initial;
}

/*span.fles:before, span.spieg:before, span.aus:before, span.ambito:before, span.registro:before, span.grammsec:before {
  content: "\00a0 ";
}
span.fles:after, span.spieg:after, span.aus:after, span.ambito:after, span.registro:after, span.grammsec:after {
  content: "\00a0 ";
}*/
span:after :not[.after, .before] {
  font-style: normal;
  display:inline-block;
  text-decoration: none;
  content: "\00a0";
}


span.lpr {
  color: gray;
  display:block;
  font-size:smaller;
}
span.lpr:before {
  content:"(";
}
span.lpr:after {
  content:")";
}
span.pron {
  text-align: left;
  display:none;
  font-size: smaller;
}

span.pron:before {
 content:"[";
}

span.pron:after {
 content:"]";
}

span.livello {
  display:none;
}

span.wav, span.wavsuono {
  display:none;
}

span.notagram {
  display:none;
}

button.suggestion {
  display:block;
  color:red;
}

underline {
  text-decoration: underline;
}

span.sudd, span.catgramm {
  color:white;
  display:block;
  font-size: smaller;
  line-height: 0.4;
}
span.illustr {
  display:none;
}

span.dida {
  display:none;
}
span.sill {
  text-align: left;
  display:block;
  font-size: smaller;
}


bracket {
  font-weight: normal;
  font-style: normal;
}


span.def {
  text-align: left;
  color: gray;
  font-weight:bolder;
  display:inline-block;
}

span.def:before {
    content: "\25B9\00a0";
}

span.spieg:after {
content: "\00a0 ";}

span.trad {
  text-align: left;
  color: gray;
  font-weight:bolder;
  display: inline-block;
}

span.trad:before {
content: " ";}

span.esempio, span.eslingua {
  text-align: left;
  color: gray;
  display:inline;
  font-style:italic;
}
/*
span.esempio:before {
  content:"‣ ";
 }
span.eslingua:before {
  content:" ";
 }*/
 div.exampleblock {
  margin-left:16px;

 }

div.contacts {
  margin:16px;
  margin:16px;
  padding:16px;
  display: block;

 }

div.label {
  margin:4px;
  padding:4px;
  display: block;

 }

div.buttons {
  display: block;

 }




img#me, img#music {
  width:80%;
  
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}


img#quiz {
  width:80%;
  margin-top: 8px;
  display: flex;
  float:left;
}



#arnar {
	width:100%;
}

 span.estrad, span.frtrad, span.colloc {
  text-align: left;
  color: gray;
  display:inline;
  font-style:normal; 
}

/* span.estrad:before, span.frtrad:before {
  content:" ";
}*/

span.ortog {
  text-align: left;
  color: gray;
  display:inline;
  font-size:smaller; 
}
span.loc {
  text-align: left;
  color: blue;
  display:inline;
  font-style:normal; 
}

span.frlingua {
  text-align: left;
  color: darkblue;
  display:inline;
  font-style:none; 
}


span.frlingua:before {
  content: "‣ ";
}

span.sinon, span.contr, span.ana {
  text-align: left;
  color: grey;
  display:block;
  font-size: smaller; 
  font-variant: small-caps;  
}

span.zingarelli-sinon, span.zingarelli-contr {
  text-align: left;
  color: grey;
  display:inline;
  
}

span.zingarelli-contr {
  font-size: smaller;
}

span.ana:before {
  content: 'Analogie: ';
}
span.contr:before, span.zingarelli-contr:before {
  content: 'Contrari: ';
}
span.sinon:before {
  content: 'Sinonimi: ';
}

span.etimo {
  text-align: left;
  color: grey;
  font-size:smaller;
  display:block;
}

span.falsoamico {
  text-align: left;
  color: grey;
  font-size:smaller;
  display:block;
  background-color: #6ecbe2;
}

span.abridged {
  text-align: left;
  font-style:italic;
  color: red;
  font-size:smaller;
  display:block;
}
span.gramm {
  text-align: left;
  color: LightBlue;
  display:block;
}
span.gramm:before {
  content: " ";
}

span.accezione {
  text-align: left;
  color: white;
  display:block;
  line-height: 0.4;
}



span.rimando {
  text-align: left;
  color: blue;
  display:block;
  font-size:smaller;
  font-variant: small-caps;
}

span.rimando:before {
	content:"Vedi: ";
}

span.rimando:after {
	content: "\a";
}

span.evidenza {
  background-color: yellow;
}

table, th, td {
  border-collapse: collapse;
  width: 300px;
  }

table.left {
  float:left;
  }


th, td  {
  font-size:smaller;
  background-color:Lavender;
  border: 1px solid black;
  text-align: left;
  }

.column {
  border: 1px solid ghostwhite;
}

legend	{
	font-weight:bolder;
}

#pie {
  max-height: 500px;
  max-width: 500px;
}

p.a	{
	margin-right:2%;
  font-size:smaller;
	background-color:GhostWhite;
  width: 30%;
  max-width: 500px;
	}

div.errors {
  margin-left:2%;
  margin-right:2%;
  background-color:GhostWhite;
  width: 100%;
  }

div.complete {
  margin-left:5%;
  margin-right:5%;
  background-color:GhostWhite;
  font-size:smaller;
  }


div.date {
  margin-left:2%;
  margin-right:2%;
  background-color:GhostWhite;
  width: 100%;
  }

p.b, button	{
	font-size:smaller;
	}

span.context {
  display: inline;

  }
span.word {
  display: inline;
  font-weight: bolder;
  
  }

span.examples {
  display: inline;
  }



p.suggerimento {
  color:#de4040;
  }

ol li {
  background: #D7F4ED;
  display: inline;
  margin-left: 1px;
}

div.form-group, div.print, div.home {
  margin-left: 2%;
  margin-right: 2%;
  padding-top: 10px;
}
div {
  display:block;
  padding-top: 1px;
  }
div#loading {
    width: 35px;
    height: 35px;
    display: none;
    background: url(/static/images/loading.gif) no-repeat;
    cursor: wait;
    }

div.graphs {
  display:block;
  margin-top: 5px;
}

div.mappa {
  display:block;
  min-height: 400px;
  margin-top: 5px;
  width: 60%;
  align-items:  left;

}
div.warning {
  color:red;
}

div.plotly-graph-div {
  display:block;
}

div.metadata {
	display:none;
  margin-top: 5px;
  background-color:#EBF4CF;
}

div.cit {
  margin-top: 5px;
  background-color:#D7F4ED;
}

div.content {
  margin-left: 80px;
  margin-right:80px;
  
}


div#scrivere-redazione {
  background-color: ghostwhite;
  border-color: darkgrey;
  border-width: 3px;

}

div#scrivere-redazione-content {
margin-left:10%;
}

div.Filters {
  margin-top: 5px;
  background-color:#D7F4ED;
  display:none;
}


.row {
  display: flex;
  margin-left: 2%;
  margin-right: 2%;
}




.left {
  width: 25%;
  display: inline-flex;
}

.right {
  width: 75%;
    display: inline-flex;
}

p.head, ul {

  display: flex;
  padding-left: 8px;
  padding-right: 4px;
  margin-left:8px;
  border-color: 4px;
}

div.box {
  width: 45%;
  min-width: 45%;
  display: flex;
  padding: 8px;
  margin:8px;
  border-color: 4px;
}

.bisleft {
  width: 75%;
  display: inline-flex;
}

.bisright {
  width: 15%;
    display: inline-flex;
}


#word, #word1, #word2, #word3, #word4, #word5, #length_of_lists, #corpus, #search_limit, #context, #inflected_part, #flex_type {
  background-color:#EBF4CF;
  border: 1px solid green;
}

/*input, select {
  font-size:larger;
}

#cercare {
   text-align:left;
    width:40%;
    padding: 25px 35px;
    margin: 8px 0;
    box-sizing: border-box;
}

#lingua {
   text-align:left;
    padding: 25px 35px;
    margin: 8px 0;
    box-sizing: border-box;
}
#submit {
   text-align:left;
    padding: 25px 35px;
    margin: 8px 0;
    box-sizing: border-box;
}
*/

img#education {
   max-width:45%;
   height:auto;
   max-height:30%;
}

img#data {
  width:350px;
  height: 300px;
opacity: 0.4;
  }

#example {
   border-style: groove;
  border-color: coral;
  border-width: 5px;

}



.notes {
  font-size:smaller;
  font-weight:lighter;
  
}

.button, #message, #trialmessage, 
#italianBtn, #englishBtn, 
#frenchBtn, #spanishBtn, 
#collBtn, #sinBtn, #modalBtn  {
  background-color: ghostwhite; 
  background-image: linear-gradient(to left, GhostWhite, lightgray);
  border-radius: 8px;
  border:solid 1px;
  color: #1e84b4;
  padding: 5px 10px;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  
}

#inglese1014  {
  background-color: #1e84b4;; 
  background-image: linear-gradient(to left, red, #1e84b4;);
  border-radius: 8px;
  border:solid 1px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  
}


#italianBtn, #englishBtn, #frenchBtn, #spanishBtn, #collBtn, #sinBtn, #modalBtn  {
  margin-right: 20%; 
}
button:hover, .button:hover, #message:hover, #trialmessage:hover, #italianBtn:hover, #englishBtn:hover, 
#frenchBtn:hover, #spanishBtn:hover, #collBtn:hover, , #sinBtn:hover, #modalBtn:hover {
  background-color: darkred;
  color: white;
}


/*a:link, a:visited {
  background-color:inherit;
  
  padding: 2px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}*/

a:hover, a:active {
  background-color: #1e84b4;
  color: ghostwhite;
}

.search_term {
  font-weight:600;
}

/*
.popup {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  color: Grey;
}


/*popup when evidenza not in entry*/

.popup .popuptext {
  visibility: show;
  width: 350px;
  background-color: darkblue;
  color: GhostWhite;
  text-align: center;
  border-radius: 10px;
  padding: 20px 0;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width:400px;  /* adjust as per your needs */
  height:200px;   /* adjust as per your needs */
  margin-left:-200px;   /* negative half of width above */
  margin-top:-100px;   /* negative half of height above */

}

/* Popup arrow 
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  -webkit-animation: fadeIn 3s;
  animation: fadeIn 3s
}


.before, .after {
  font-size: smaller;
}

.consegna {
  font-size: 20px;
  color: gray;
}


.before {
  display:block;
}

.after {
  display:none;
}


/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
     text-align:center;
    width:100%;
    padding: 25px 35px;
    margin: 8px 0;
    box-sizing: border-box;

}

select, button {

  border: 1px solid transparent;
  background-color: #6ecbe2;
  padding: 10px;
  margin-top: 12px;
  margin-left: 12px;
  font-size: 16px;
  box-sizing: border-box;
  display: inline-block;
  float:left;
  min-width: 160px;
  max-height: 64px;
}

input[type=text] {
  width: 70%;
}

input[type=submit] {
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  margin-top:54px;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

/* The Modal (background) */
.modal, .italianmodal, .englishmodal, .frenchmodal, .spanishmodal, .collmodal, .sinmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.italianmodalcontent, .englishmodalcontent, .modalcontent,
.frenchmodalcontent, .spanishmodalcontent, 
.collmodalcontent, .sinmodalcontent {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.italianclose, .englishclose, .modalclose,
.frenchclose, .spanishclose, 
.collclose, .sinclose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalclose:hover,
.modalclose:focus,
.italianclose:hover,
.italianclose:focus,
.englishclose:hover,
.englishclose:focus,
.frenchclose:hover,
.frenchclose:focus,
.spanishclose:hover,
.spanishclose:focus,
.collclose:hover,
.collclose:focus,
.sinclose:hover,
.sinclose:focus,
 {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-size: smaller;
  color: darkgray;
  font-weight: bolder;
  position:fixed;
  background-color: ghostwhite;
  background-image: linear-gradient(to left, ghostwhite, ghostwhite);
  width:100%;
  margin-bottom: 4px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #ccc;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}



/* Create an active/current tablink class */
.tab button.active {
  background-color: #6ecbe2;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}


.container {
  display: block;
  
  margin-left: 20%;
  margin-right: 20%;
  padding: 8px;
  width: 60%;
   position:absolute;
    top: 96px;
    left:0px;
    right:0px;
    bottom:0px;
   
}

.grid-container {
  display: flex;
  flex-wrap: wrap; 
  margin: auto;
  padding: 8px;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 96%;
   position:absolute;
    top: 134px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll;   
} 


.grid-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.grid-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



.grid-container:after {
  clear:both;
  display: table;
  }


.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  min-height: 400px;
  min-width: 400px;
  width: 30%;
  padding: 8px;
  text-align: left;
  margin-left: 16px;
  margin-top: 16px;
  float: left;
  background-color: ghostwhite;
  clear:none;
  overflow: none;
}

.grid-item#biotext, .grid-item#biophoto {
  border: 1px solid rgba(0, 0, 0, 0.8);
  min-height: 400px;
  min-width: 400px;
  width: 30%;
  padding: 8px;
  text-align: left;
  margin-left: 16px;
  margin-top: 16px;
  float: left;
  color:ghostwhite;
  background-color :#1e84b4;
  clear:none;
  overflow: none;
}

.biophoto, .music {
  margin: 2%; 
  padding: 8px;
  width: 30%;
  align-content: center;
  float:left;
 }

.biotext {
  border: 1px solid rgba(0, 0, 0, 0.8);
  
  min-height: 400px;
  width: 30%;
  padding: 24px;
  text-align: left;
  margin-left: 24px;
  margin-top: 16px;
  margin-bottom: 36px;
  float: left;
  color:ghostwhite;
  background-color :#1e84b4;
  clear:none;
  overflow: none;
 }


.small-grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  
  min-height: 300px;
  min-width: 400px;
  
  width: 30%;
  padding: 8px;
  text-align: left;
  margin-left: 16px;
  margin-top: 16px;
  float: left;
  background-color: ghostwhite;
  clear:none;
  overflow: auto;
}


@media only screen and (max-width: 500px) {


    .grid-container {
        display: flex;
      grid-template-columns: 1fr;
      grid-gap: 8px;
      grid-row-gap: 8px;
      top: 132px;
      min-width: 0;

    }
    .grid-item#biophoto {
        display: none;
      min-width: 300px;
    }
    .grid-item {
        display: block;
        overflow: auto;
      min-width: 300px;
        
    }
    .small-grid-item {
        display: block;
        overflow: auto;
      min-width: 300px;
        
    }
    .grid-item#biotext {
        display: block;
        overflow: auto;
      min-width: 300px;
        
    }
    .topnav {
      width:53%;
      min-width: 250px;
      margin-left:  16px;
    }
    .topnav a {
      
      min-width: 5%;
    }
  
}



.list, .education {

  padding-left: 8px;
  margin-left:8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

ul {
    display: inline;
    list-style-type: disc;
    list-style-position: inside;
  padding-left: 8px;
  margin-left:8px;
  border-color: 4px;

}
.nav{
    list-style:none;
}


label {
  display: block;
  font-size: smaller;
}

.highlightbutton, #submit {
  border: none;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 8px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input.radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 27px;
  width: 27px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input.radio ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input.radio:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input.radio:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 5px;
  top: 6px;
  width: 10px;
  height: 12px;
  border: solid white;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}