  /* Font Definitions */
  @font-face {
        font-family: Hebrew;
        src: url(../fonts/SILEOT.TTF);
  }
  @font-face {
        font-family: Greek;
        src: url(../fonts/GALSILR.TTF);
  }
  @font-face {
        font-family: English;
        src: url(../fonts/DoulosSIL-R.ttf);
  }
  @font-face {
        font-family: Mehr;
        src: url(../fonts/Mehr.ttf);
  }
  @font-face {
        font-family: Lateef-Sindhi;
        src: url(../fonts/LATEEFREGOT-SINDHI.TTF);
  }
  @font-face {
        font-family: Scheherazade-Urdu;
        src: url(../fonts/SCHEHERAZADE-URDU-REGULAR_1.TTF);
  }
  @font-face {
        font-family: Scheherazade-Arabic;
        src: url(../fonts/ScheherazadeNew-Regular.ttf);
  }
  @font-face {
        font-family: Doulos;
        src: url(../fonts/DoulosSIL-R.ttf);
  }
  @font-face {
        font-family: Annapurna;
        src: url(../fonts/AnnapurnaSIL-Regular.ttf);
  }
  @font-face {
        font-family: TiroTamil;
        src: url(../fonts/TiroTamil-Regular.ttf);
  }
  @font-face {
        font-family: TiroTelugu;
        src: url(../fonts/TiroTelugu-Regular.ttf);
  }
  @font-face {
		font-family: TitleBarFont;
		src: url(../fonts/myriad-web-pro.woff);
  }
  .ribbon {
	padding: 0px;
	border: 0px solid;
	margin: 0px;
	border-radius: 0px;
/*	background: none; */
	border-spacing: 0px 0px;
	width: 100%;
  }
  h1 {
        font-family: TitleBarFont;
        font-size: 24px;
        /*font-style: italic; */
        font-weight: normal;
        /* color:#0ff; */
        text-align: center;
        float: center;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
  }

  ul, #myUL {
	list-style-type: none;
  }
  #myUL {
	margin: 0;
	padding: 0;
  }
  .caret {
	cursor: arrow;
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none;
	font-family: English;
	/*  font-size:24; */
  }
  .caret::before {
	content: "\25B6";
	color: black;
	display: inline-block;
	margin-right: 6px;
  }
  .caret-down::before {
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari */'
	transform: rotate(90deg);  
  }
  .nested {
	display: none;
  }
  .active {
	display: block;
  }
  
  /* classes for BDB dictionary */
  .c3 {
	font-family: Hebrew;
	/*  font-size:24; */
  }
  

/* the following relates to the gloss dropdown boxes */
* {
  box-sizing: border-box;
}
/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  padding: 0px;
  font-size: 16px;
}
input[type=text] { /* color of gloss boxes */
  padding: 0px 5px;
  width: 100%;
}
/*input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: arrow;
}*/
.autocomplete-items {
  position: relative;
  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: 0px;
  cursor: arrow;
}


/* Dropdown Menu Button for "Display line" */
.dropbtn {
	padding: 10px, 0px;
	font-size: 16px;
	border: none;
	cursor: arrow;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    z-index: 99;
    position: absolute;
/*    min-width: 160px; */
	white-space: nowrap;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


/* Dropdown Book Menu Button - this is not currently being used */
.dropbtnbook {
    padding: 5,0;
    font-size: 13px;
    border: none;
    cursor: arrow;
}

/* The container <div> - needed to position the dropdown content */
.dropdownbook {
    position: relative;
    display: inline-block;
	border-width: 1px;
}

/* Dropdown Content (Hidden by Default) */
.dropdownbook-content {
    display: none;
    z-index: 99;
    position: absolute;
    min-width: 60px;
    overflow: auto;
    white-space: nowrap;
    max-height: 340px;
}

/* Links inside the dropdown */
.dropdownbook-content a {
    padding: 1px 1px;
    text-decoration: none;
    display: block;
}


/* Define arrow */
.arrow {
  border: solid black;
  border-width: 2px 0px 0px 2px;
  display: inline-block;
  padding: 2px 2px 2px 2px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.down {
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}


/* Dropdown Menu Button for "Action" */
.dropbtnaction {
	padding: 10px, 0px;
	font-size: 16px;
	border: none;
	cursor: arrow;
}

/* The container <div> - needed to position the dropdown content */
.action-dropdown {
    position: relative;
    display: inline-block;
	border-width: 1px;
	white-space: nowrap;
}

/* Dropdown Content (Hidden by Default) */
.action-dropdown-content {
	display: none;
	z-index: 99;
	position: absolute;
/*	min-width: 160px; */
}

.action-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


/* notes */
.note {
	padding: 0,0,0,0;
	margin: 0,0,0,0;
	font-size: 13px;
	border: none;
	border-radius: 0px;
	border-spacing: 0px 0px;
	background: none;
}
.note p {
	margin: 0,0,0,0;
	margin-block-start: 0px;
	margin-block-end: 0px;
}

/* tooltips */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
