div.sidebar-related-content {
	padding-bottom: 1em;
	overflow:hidden;
}


div.comb-deriv-item.show-more-item.offensive {
	filter: blur(4px);
	 -webkit-filter: blur(4px);
	}

#open {
display:none;
}
#open > span {
	display: none;
}
.panel_svg {
    fill: #edbf26;
}
#side-panel-label > .panel_svg {
    transform: rotate(-90deg);
}


#side-panel-label >  .panel_svg.rotate_side_panel {
    transform: rotate(90deg);
}

.entry-right-pane h3 {
    font-family: 'Amiri';
    color: #3d3a35;
    font-size: 1.375em;
    margin-bottom:0;
    margin-top:1.375em;
}
#comb-derivs h3 {
    margin-top:0.813em;
}
h3.related-content {
    margin-top: 1.875em;
    margin-bottom: 0.625em;
}

h4.related-content {

    font-size: 1em;
    font-family: 'Roboto';
    color:#515151;
    padding-bottom: 0.2em;
    margin-bottom:0;
    margin-top:0;
}
div.related-content-categories { }
div.related-content-subject,
div.related-content-origin,
div.related-content-usage {
	padding-top: 0.7em;
	padding-bottom: 0.2em;
}
div.related-content-category-item {}
div.related-content-categories > *:first-child {
    padding-top: 0.2em;
}
a.related-content-category {
	line-height:160%;
}
.entry .results-list-time-bar {
    vertical-align:top;
    position:relative;
    z-index:90;
}
#comb-derivs {
    position: relative;
    z-index: 1;
}
#timeBar * {
    font-family: Roboto;
}

/*Histogram*/
#histogram > span, #polysemous-timebar, #monosemous-timebar {
    font-size: 0.875em;
    font-family: Roboto, sans-serif;
    white-space:nowrap;
    color:#2b8815;
       }
#histogram > span, #polysemous-timebar {
    color:#2b8815;
}
#histogram > span:hover, #polysemous-timebar:hover {
    text-decoration:underline;
    cursor:pointer;
}
#histogram-modal-btn img {
    height: 1.563em;
    width: 4.625em;
}
#histogram-modal-btn {
    border:none;
    background:none;
    margin-left: 20px;
}
#histogram-modal-btn:hover {
    -webkit-transition: 0.5s; /* Safari */
    transition: 0.5s;
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
    box-shadow: 0 2px 4px #d9d9d9;
}
/* Timebar */
.tb-or {
    fill:url(#grad3);
}
.tb-or:last-child {
    fill:url(#grad4);
}
.tb-ir {
    fill:#EDBF26;
}
.tb-t {
    fill:#888;
}
#timeBar {
    background-color:white;
    position: relative;
    display:inline-block;
    text-align:left;
}
#timebar-main {
    margin-left:1.5em;
    margin-top:0.438em;
    display:inline-block;
    vertical-align:top;
}
#timebar-main > svg, #SensesDiv a > svg {
    padding-right:0.938em;
    cursor:pointer;
}
#monosemous-timebar + #timebar-main > svg {
  cursor: unset;
}
@keyframes rollDown {
    from {transform:scaleY(0);opacity:0}
    to {transform:scaleY(1);opacity:1}
}
@keyframes rollUp {
    from {transform:scaleY(1);opacity:1;}
    to {transform:scaleY(0);opacity:0;}
}
#SensesDiv {
    display:table;
    position: absolute;
    right:0;
    background-color: #FFF;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
    transform-origin:top;
    transform:scaleY(0);
    opacity:0;
    z-index:3;
}
#SensesDiv.showing {
    animation: rollDown .5s;
    animation-fill-mode:both;
}
#SensesDiv.hiding {
    animation:rollUp .5s;
    animation-fill-mode:both;
}
#timebar-main > svg text, #SensesDiv a > svg text {
    font-size:10px;
}
#grad3 > stop, #grad4 > stop:first-child {
    stop-color:rgb(219,219,219);
    stop-opacity:0.5
}
#grad4 > stop, #grad3 > stop:first-child {
    stop-color:rgb(244,247,242);
    stop-opacity:1
}
.timebar-sense {
    display:table-row;
}
.timebar-sense > * {
    display:table-cell;
    vertical-align:top;
    font-size: 0.688em;
    padding-bottom:0.750em;
    color:rgb(81,81,81);
    white-space:nowrap;
}
.timebar-sense:first-child > * {
    padding-top:1.063em;
    font-size:11px;
}
.timebar-sense:last-child > * {
    padding-bottom:0.938em;
}
.timebar-sense > label {
    padding-left:0.938em;
    line-height:1.5;
}
.entry .entry-main {
    padding:0 !important;
    margin-left:0.2em;
}
#entry_area .entry-main {
    width:100% !important;
}
.entry-right-pane {
    padding:0 !important;
    overflow:visible !important;
    border:none !important;
    min-width:30%;
    padding-top:10px !important;
    margin-left:2em;
}
.comb-deriv-item {
    padding-top:0.1em;
    padding-bottom:0.1em;
    font-size: 16px;
    color:#2b8815;

}
.comb-deriv-item a {
    color:#2b8815;
    font-size:16px;
    line-height:160%;
}
#comb-derivs span.show-more {
    padding-left:0;
}

#comb-derivs span.show-more {
	color:#a30434;
}
#comb-derivs span.show-more:hover {
	color:#A30434;
	text-decoration: underline;
}

/*side panel button*/
#side-panel-button {
    display: none;
}

#middle_combinations_side,
#bottom_combinations_side {
    display: none;
}

/*side panel in mobile view*/
/*below full banner width*/
@media only screen and (max-width: 1120px) {
    /*this styles the opening button*/
    #side-panel-button {
        display:flex;
        justify-content: center;
        flex-grow: 1;
        align-items: flex-end;
        flex-direction: row;
        background: #525450;
        width: 23px;
        height: 145px;
        position: fixed;
        top: 35%;
        z-index: 97;
        -webkit-box-shadow: -3px 0px 5px 0px rgba(82,84,80, 0.21);
        box-shadow: -3px 0px 5px 0px rgba(82,84,80, 0.21);
        right: 0px;
        transition: right 0.5s;
        color: #222;
    }
    /* Side panel animation */
    @keyframes in-out {
        0% {width: 23px}
        10%  {width: 50px;}
        20%  {width: 50px;}
        30%  {width: 50px;}
        40%  {width: 50px;}
        50%  {width: 50px;}
        60%  {width: 50px;}
        70%  {width: 50px;}
        100%  {width: 23px;}
    }
   .animate-panel {
     animation: in-out 2000ms ease-out;
    }
    #side-panel-button.show-panel {
        width: 50px;
    }
    #side-panel-label {
        font-size: 16px;
    }

    /* Side panel animation */
    @keyframes in-out {
        0% {width: 23px}
        10%  {width: 50px;}
        20%  {width: 50px;}
        30%  {width: 50px;}
        40%  {width: 50px;}
        50%  {width: 50px;}
        60%  {width: 50px;}
        70%  {width: 50px;}
        100%  {width: 23px;}
    }
   .animate-panel {
     animation: in-out 2000ms ease-out;
    }
    #side-panel-button.show-panel {
        width: 50px;
    }

    /* End of side panel animations */

    /*this styles the opening label*/
    #side-panel-label {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        align-items: center;
        font-family: Roboto, sans-serif;
        color: #edbf26;
        font-size: 14px;
        width: 156px;
        position: absolute;
        margin-right: 4px;
        padding-left: 17px;
        text-align: center;
        top:48%;
        transform: rotate(-90deg);  
    }
/*     #side-panel-label{
   
        top: 48%;

        width: 200px;
    } */
 /*    #side-panel-chevron {
        display: block;
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-top: 20px;
        margin-left: .85rem;
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center center;
        background-image:url('../ico/expand-icon-inverse.png');
        transform: rotate(90deg);
    }  */
    #side-panel-button.panel-open {
        right: 35%;
    }
    #side-panel-button.panel-open > span {
        transform: rotate(270deg);
    }

    /* this styles the whole side panel */
    #side-panel {
        height: 100%; /* 100% Full-height */
        width: 0%; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 96; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        background-color: #525450;
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 25px; /* Space from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    #side-panel.panel-open {
        width: 35%; /* 0 width - change this with JavaScript */
    }
    #side-panel-wrapper {
        z-index: 95;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        position: fixed;
        display: none;
    }

    #side-panel-wrapper.panel-open {
        display: initial;
    }

    /* The navigation menu links */
    #histogram > span,
    #polysemous-timebar,
    #monosemous-timebar,
    .comb-deriv-item a,
    #comb-derivs span.show-more
      {
      padding-left:18px;
      padding-top:18px;
      padding-bottom:18px;
      text-decoration: none;
      font-size: 16px;
      color: /*#2B8815*/ #fff;
      display: inline-block;
      transition: 0.3s;
    }
    #histogram > span, #polysemous-timebar {
        border-bottom: dotted 1.5px #f9f9f9;
        padding-bottom: 0px;
    }
    #histogram > span {
        margin-left: 18px;
        padding-left: 0px;
    }
    
   /*   #side-panel > .related-content-category-item {
        border-bottom: dotted 1.5px;
     } */
    #histogram > span:hover,
    #timeBar > label:hover{
        text-decoration:none;
        color:#edbf26;
    }
    #timebar-main {
        padding-top:18px;
    }
    #monosemous-timebar,
    #polysemous-timebar {
        padding-left:0px;
 	}

    /*The border separator*/
    #histogram,
    #timebar-wrapper,
    .sidebar-related-content,
    #comb-derivs{
        border-bottom: 1px solid #edbf26;
        padding-bottom: 20px;
        padding-top: 0px;
    }

    #timebar-wrapper {
        position: inline-flex;
        padding-bottom: 9px;
    }
    /*main timebar*/
    #timeBar {
        background-color:#525450;
    }
    /*dropdown timebars*/
    #SensesDiv{
        display: table;
        position: absolute;
        right: 0;
        background-color: #525450;
        -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        z-index: 3;
    }
    #SensesDiv.showing{
        position: relative;
        margin-left: auto;
        right: 0;
    }
    .timebar-sense > label {
        color: #fff;
    }

    /*related content link*/
    div.related-content-category-item {

        padding-left:25px;
        padding-top:12px;
        padding-bottom:0px;
        text-align:left;
    }
    div.related-content-category-item > a{
        color: #fff;
        border-bottom: dotted 1.5px #f9f9f9;
        padding-bottom: 1px;
    }
    /* When you mouse over the navigation links, change their color */
    #side-panel a:hover,
    #comb-derivs span.show-more:hover {
      text-decoration:none;
      color:#edbf26;
    }

    #side-panel h3 {
        font-family:'amiri';
        font-size: 22px;
        color:#edbf26/*#3d3a35*/;
        padding-left:18px;
        margin-top:0.875em;
    }
    #side-panel h4 {
        font-size: 16px;
        font-family: 'Roboto';
        color: #edbf26;
        padding-left:18px;
        padding-bottom: 0em;
        padding-top:0em;
        line-height:1.5;
    }

    #comb-derivs div.comb-deriv-item.hide_side,
    #comb-derivs div.comb-deriv-item.hide_side.hide {
        display: none;
    }

    #comb-derivs div.comb-deriv-item.hide {
        display: block;
    }

    .comb-deriv-item a
    {
    line-height:0px;
    padding-left:0px;
    border-bottom: dotted 1.5px #f9f9f9;
    padding-bottom: 14px;
    }
    #comb-derivs span.show-more{
        line-height:0px;
        padding-left:0px;
        padding-bottom: 14px;
    }

    #comb-derivs div.comb-deriv-item,
    #comb-derivs #middle_combinations_side,
    #comb-derivs #middle_combinations_side.hide,
    #comb-derivs #bottom_combinations_side,
    #comb-derivs #bottom_combinations_side.hide {
        display: block;
        padding-left:25px;
        padding-top:12px;
        padding-bottom:0px;
        text-align:left;
    }

    #comb-derivs #middle_combinations_side.hide_side,
    #comb-derivs #middle_combinations_side.hide_side.hide,
    #comb-derivs #bottom_combinations_side.hide_side,
    #comb-derivs #bottom_combinations_side.hide_side.hide {
        display: none;
    }

    #timeBar {
        padding-left:25px;
        padding-top:12px;
        padding-bottom:0px;
    }

    #comb-derivs #middle_combinations,
    #comb-derivs #bottom_combinations {
        display: none;
    }
    #SensesDiv {
        box-shadow: none;
        border: none;
    }
}
@media screen and (max-width: 991px) {
    #side-panel.panel-open {
        width: 50%; /* 0 width - change this with JavaScript */
    }

    #side-panel-button.panel-open {
        right: 50%;
    }
}
@media screen and (max-width: 770px) {
    #side-panel.panel-open {
        width: 70%; /* 0 width - change this with JavaScript */
    }

    #side-panel-button.panel-open {
        right: 70%;
    }
}
@media screen and (max-width: 520px) {

    #side-panel.panel-open {
        width: 85%; /* 0 width - change this with JavaScript */
    }

    #side-panel-button.panel-open {
        right: 85%;
    }
}
@media screen and (max-width: 480px) {
	#side-panel-button {
    top:45%;
    }
	#timebar-main > svg, #SensesDiv a > svg {
	width:220px;
	}
}
@media screen and (max-width: 400px) {
    #side-panel-button {
        top: 38%;
        height: 165px;
    }
    #side-panel-label{
        display: flex;
        top: 48%;
        flex-direction: row-reverse;
        justify-content: space-around;
        align-items: center;
        width: 156px;
    }
    #side-panel.panel-open {
       width: 93%;
       right: -8px;
    }
 

    #side-panel-button.panel-open {
        right: 88.5%;
    }
    #side-panel-button.show-panel {
        width: 50px;
    }
    #side-panel-button.show-panel.opened {
        width: 32px;
    }
    #side-panel-label + .panel_svg {
        top: 12%;
        right: 38%;
    }

	#timebar-main > svg, #SensesDiv a > svg {
	width:200px;
	}
	
    #timebar-main {
	   margin-left: 0;
	   padding-top: 18px;
    }
}

@media only screen and (min-width: 1017px) {
    @media only screen and (max-width:1120px) {
        @media only screen and (max-width: 1120px){
        #side-panel {
           z-index: 99;
    }
    #side-panel-button {
        z-index: 99;
    }

}
    }
}
@media only screen and (min-width: 768px){
        #side-panel-label + .panel_svg {
            right: 35%;
        }
}