/* Universal Transitions */
body {
	font-family: 'Sawarabi Gothic', sans-serif;
}
@font-face {font-family:KoineGreek; src:url('./KoineGreek.eot?#iefix') format('embedded-opentype'), url('./KoineGreekNew.ttf') format('truetype');}
.initial{
      position:initial!important;
   }
   .expanderHead2.clicked,.expanderHead3.clicked{
       z-index:3;
   }
   .noscript {
    margin: 100px auto;
    width: 100%;
    height: 466px;
    z-index: 100000;
    position: fixed;
   }
   .noscript #div100{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin: auto;
    width: 80%;
    background-color: black;
    color: white;
    font-size: 1.3em;
    padding: 10px 40px;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
   }
.displaynone{
	display:none!important;
}
.nopointer,.ui-draggable-dragging{
    pointer-events:none;
}
/*fonts*/
.sawarabi{
    	font-family: 'Sawarabi Gothic', sans-serif!important;
}
.yuMin{
    	font-family: 'Yu Mincho'!important;
    	font-weight:bold;
}
.yuGoth{
    	font-family: 'Yu Gothic'!important;
    		font-weight:bold;
}

.arial{
    	font-family: 'arial', sans-serif!important;
}
.georgia{
    	font-family: 'georgia'!important;
}
.trebuchet{
    	font-family: 'Trebuchet MS'!important;
}

.noto{
    	font-family: 'Noto Serif', serif!important;
}
.helvetica{
    	font-family: 'Helvetica'!important;
}
.koineGreek{
    	font-family: 'KoineGreek'!important;
    	text-transform: uppercase!important;
    	font-size: larger;
}
/*animations*/
* .logowrapper:before,.tiny:before,.logowrapper,.pagination>li>a,td,tr,.pagination>li>span,.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus,.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus,.logo,.dropdown,.dropdown:hover .dropbtn,.dropdown:hover .dropdown-content,.dropdown-content,.dropdown-content span,.dropdown-content span:hover,.dropdown-content,.disappear,.shrink,.sidebar,.topwrap,.fas.fa-book,.fas.fa-search,.fas.fa-ellipsis-v,.fas.fa-list-ui,.othersbox,.dropdownbox,.searchbox,.dropdownbox span,.viewbox,.viewbox span,.searchbox span,.searchButton,ul.menu li,.nav_load,.dropdownbox.active span,.searchbox.active span,.page-link,.dark-theme a,.hidetable,.navtext3,.omenu li,.showtable,#guide_wrap > ul.index > a,#guide_wrap > ul.index > a:hover,.showgram,.showgram:hover,.grammarnotes,.showgramnotes,.lhidden,.lshow,.study,.study:hover:after,.parsing *,.parseflex,.parsing:hover > .studyhint,.studyhint,.studyhide,.interlin_pane,.studychange,.trans_pane,.transj,#studybuttons,.studyonoff,.studyonoff:hover,.studyreset,.studyreset:hover,.dropdownbox,.fas.fa-toggle-off,.fas.fa-toggle-on,.scoot,.scootmob,.notes,.closenotes,.fa-info-circle,.topbar,.topbar_show,.expanderHead2,.expanderHead3,.expanderHead4,.expanderHead5,.bookmark,.bookmarked,.fontsize,.exitfullscreen,.exitfullscreen2,.parseshowWrap,#inf_pop,.expanderHead,.slidedown,.ch_vs_result,.strongs_prev,.strongs_next,.bookmarkbtn i.far,.prevBtn,.nextBtn{
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.full_content{
    margin:25px auto;
}
.flex-container{
    	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	width:100%;
}
    .hidden{
        transform:translate(0,100px);
        opacity:0;
        min-height:300px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .visible{
        /*transform:translate(0,0)!important;*/
        /*opacity:1!important; */
        /* min-height:0px!important;*/
    }
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
    -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}


ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border: 0;
  border-top: 1px solid;
  margin: auto;
  clear: both;
  color: inherit;
}



pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}


b,
strong {
  font-weight: bolder;
}


code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}


small {
  font-size: 80%;
}


sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  vertical-align: bottom;
}

embed,
object,
iframe {
  border: 0;
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type="checkbox"] {
  /* 1 */
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  /* 1 */
  -webkit-appearance: radio;
  appearance: radio;
}

button,
input {
  /* 1 */
  overflow: visible;
}


button,
select {
  /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}


button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


option {
  padding: 0;
}


fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}


legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  padding: 0; /* 1 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px; /* 1 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

template {
  display: none;
}

[hidden] {
  display: none;
}
/* NAV */

/*@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);*/
/*@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');*/
/* menu bar*/
.noscroll {
	overflow-y: auto;
}

/*nav{*/
/*  margin-top: 0px;*/
/*}*/
/* sticky nav bar */


/* STYLES */
 
input.chkbox[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  width: 34px;
    height: 20px;
	min-width: 34px;
	background-color: #ccc;
	border-radius:50px;
	border:2px solid #95ba8a;
	position: relative;
	bottom: 1.5px;
	margin-right:5px;
	cursor:pointer;
}
input.chkbox[type="checkbox"]:checked {
	background-color: #849e71;
}
.chkbox:before {
  background-color: #fff;
  border:1px solid #95ba8a;
  bottom: 0;
  content: "";
  height: 14px;
  left: 0px;
  position: absolute;
  transition: .3s;
  width: 14px;
  border-radius: 50%;
}
.chkbox:checked:before {
  left: 14px;
  transition: .3s;
}
.bookmark{
      height: 45px;
        border-radius: 5px 0 0 5px;
        margin-top:55px;
       
}
#navfloat{
   position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: Wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    right: 0;
    left:0;
    bottom: 50px;
    width: 100%;
    height: 50px;
}
.floatnavbtn{
    z-index:6;
    opacity:.5;
}
.prevBtn {
   cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
            font-size: 1.2em;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: #188fb2;
    color: #fff;
    border-radius:100%;
    width:30px;
    height:30px;
    margin-left:15px;
}
.nextBtn{
     cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
            font-size: 1.2em;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: #188fb2;
    color: #fff;
    border-radius:100%;
    width:30px;
    height:30px;
    margin-right:15px;
}
.rightHide{
   transform:translate(150px,0); 
   opacity:0;
}
.leftHide{
       transform:translate(-150px,0); 
         opacity:0;
}
.previousVs:hover,.nextVs:hover{
    color: #188fb2;
    background-color: #fff;
    transform:scale(1.1)!important;
}
.bookmarkbtn{
    cursor: pointer;
}
.bookmarkbtn input {
   display: none;
   position: relative;
   z-index: -9999;
}
.bookmarkbtn i.far {
   -webkit-transition: color 250ms;
   -moz-transition: color 250ms;
   -ms-transition: color 250ms;
   -o-transition: color 250ms;
   transition: all 250ms;
    position: absolute;
    left: -3px;
    color: #188fb2;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
    font-size: 1em;
     padding: 3px;
    margin-bottom: 3px;
    width: 28px;
    height: 28px;
    
}
.bookmarkbtn i.far:hover {
    font-weight:bolder;
}
.bookmarkbtn i.fa {
   -webkit-transition: color 250ms;
   -moz-transition: color 250ms;
   -ms-transition: color 250ms;
   -o-transition: color 250ms;
   transition: all 250ms;
    position: absolute;
    left: -3px;
    transform:scale(0);
    font-weight: bolder;
    color: #188fb2;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
    font-size: 1em;
     padding: 3px;
    margin-bottom: 3px;
    width: 28px;
    height: 28px;
    
}
.bookmarkbtn input:checked ~ i.fa{
    transform:scale(1);
  font-size: 1.2em;
   border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0  0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
     background-color: #188fb2;
        color: #fff;
}
.bookmarkbtn input:checked ~ i.far{
    transform:scale(0);
    transform: rotate(3.142rad);
  font-size: 1.2em;
   border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
     background-color: #188fb2;
        color: #fff;
}

input.markbtn[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.bookmarkicon i.fa,.omenu i.fa {
  
    font-weight: bolder;
    font-size: 1.2em;
   border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0  0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
     background-color: #188fb2;
        color: #fff;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
     padding: 3px;
    margin-bottom: 3px;
    width: 28px;
    height: 28px;
    
}
.omenu i.fa {
     font-size: 1em;
       width: 20px;
    height: 20px; 
        margin-right: 8px;
    margin-bottom: 0;
}  
.bookmarktoast{
    pointer-events:none;
        position:fixed;
       -webkit-transition: color 250ms;
   -moz-transition: color 250ms;
   -ms-transition: color 250ms;
   -o-transition: color 250ms;
   transition: all 250ms;
    display:flex;
        bottom:100px;
    opacity:0;
    transform:translate(0,100px);
    margin: auto;
    right: 0;
    width: fit-content;
    max-width: 235px;
    left: 0;
    flex-direction:row;
    border-radius:50px;
    background-color:#f7f7f7;
    border:1px solid #188fb2;
    padding:8px 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12);
}
.toastshow{


        opacity:1!important;
    transform:translate(0)!important;
}
.bookmarktext{
    display:flex;
    flex-direction:column;
    padding:3px;
}
.bookmarktext span{
    text-align:center;
    font-weight:bold;
}
.bookmarkicon{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:8px;
}
:target {
    scroll-margin-top: 50px;
}

.red {
	color: #B61626;
	white-space:nowrap;
}
.firebrick {
	color: #B61626!important;
	font-weight:bold;
	white-space:nowrap;
}
.blue {
	color: #4E82BC!important;
	font-weight:bold;
	white-space:nowrap;
}
.lightblue {
	color: #0E9DA1!important;
	white-space:nowrap;
}
.orange {
	color: #CF7A0F!important;
	white-space:nowrap;
}
.green {
	color: #229954!important;
	white-space:nowrap;
	font-weight:bold;
}
.boxed {
    border-radius: 5px;
    border: 1px solid rgb(185 185 185);
    background: #f3f3f3;
    padding: 1px 2px;
}
.gray{
   	color: #82468A!important;
	white-space:nowrap; 
}
.italic{
    font-style:italic!important;
}
.italic .parsing{
    font-style:none!important;
}
.opacity .Greek{
    opacity:.5!important;
}
.opacity .punct{
    opacity:.5!important;
}
.opacity .parsing{
    font-style:none!important;
}
.opacity{
     font-style:italic!important;
}

a:link {
	text-decoration: none;
}
/*:target {*/
/*    scroll-margin-top: 50px;*/
/*}*/
body {
	width: 100%;
	margin: 200px auto 0 auto;
	background-color: #ececec;
	font-size: 15px;
	scroll-behavior:smooth;
	overflow-x:hidden;
}
.logowrapper {
position: absolute;
    z-index: 13;
	top: 0px;
	width: 100%;
	height: 100px;
	/* background-color: #f7f7f7;
	*/
	line-height: 23px;
}
.sidebar {
  
  width: 29vw;
  height: 100px;
  background: #f7f7f7;
  position: fixed;
  left: 0;
  top:0;
 
}
.headerwrap{
    width:100%;
    max-width:1056px;
    margin:auto;
}
.navwrapper {
max-width:1300px;
  
}
.john1text {
position: absolute;
    z-index: 12;
	overflow: hidden;
	height:100px;
	font-size: 1em;
	line-height: 1.6em;
	font-weight: 600;
	font-family :'Hiragino Kaku Gothic ProN';
	padding-top:5px;
	top:0;
	color: #bbb;
	color: rgba(187, 187, 187, 0.481);
 background-color: #ececec;
}
.logo {
	text-align: left;
	position:relative;
	height: 100px;
	box-shadow: -800px 0px 0px 300px #f7f7f7;
}

.logo img {
	/* padding-top:10px;
	*/
	height: 100%;
}

.disappear {
height:0px!important;
}
.shrink{
    height:30px!important;
}
.topwrap{
    display:flex;
    height:137px;
    width:100%;
    top:0;
        position: fixed;
        flex-direction:column;
    z-index: 11;
}

/*********************************Book Title / Chapter navigation********************************/
.getpages{
	margin:10px auto;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width:100%;
}
.title_area {
	text-align: center;
	margin: 20px 0;
}

.thispage{
	cursor:pointer;
}
.notes{
    z-index: 1;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
    padding: 3px;
    margin: 0 0 3px 5px;
     font-size: 11px;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background-color: #188fb2;
    color: #fff;
}
.notes .fa-times.closenotes{
        background-color: #cd7d7d;
    border-radius: 25px;
    font-size: 11px;
    width:15px;
    height:15px;
    display: flex;
    justify-content: center;
    align-items: center;
   box-shadow: rgba(0 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.closenotes:hover{
    cursor:pointer;
        transform:translate(1.1)!important;
    color: #cd7d7d!important;
    background-color: #fff!important;
    border:1px solid #cd7d7d!important;
}

.notes:hover{
    transform:translate(1.1)!important;
    color: #188fb2;
    background-color: #fff;
}
.nopointer{
    /*pointer-events:none;*/
}
.leftnotes{
    margin-left: 0;
    left: -37px;
    position: absolute;
}
.fas.fa-info-circle{
color: #849e71;
    padding: 4px 0 4px 8px;
    font-size: 28px;
    line-height: 14px;
}
.fas.fa-info-circle:hover{
color: #9fba8a;
}

   .form-container {
     display:flex;
   flex-direction:row;
   flex-wrap:wrap; 
     justify-content:center;
    padding: 4px 4px;
     vertical-align:baseline;
  } 
.bottom_area {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	margin: 20px 0;
	background-color: #bbe09933;
}
.title_container {
	display: flex;
	flex-flow: column wrap;
	background-color: #e0e9d8;
	border-top: 1px solid #b7b7b7;
	border-bottom: 1px solid #b7b7b7;
	box-shadow: 0px -3px 5px -3px rgba(0,0,0,0.24),
    0px 3px 5px -3px rgba(0,0,0,0.24);
	padding:6px 0;
	margin-bottom:45px;
}
.booktitle_japanese {
	color: #555;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 2px 2px 4px #ccc;
	margin:8px 0 4px 0;
}
.booktitle_greek {
	color: #555;
	font-family: 'Noto Serif', serif;
	font-size: 18px;
	font-weight: bold;
	margin:4px 0;
}
.chapter_navi {
	font-weight: bold;
	font-size: 18px;
	margin:8px 0 8px 0;
	padding: 6px;
}

.title_chapter {
	color: #333;
	font-family: Sans-serif;
	font-size: 16px;
	font-weight: normal;
}
.chapter_navi a {
	color: #526346;
	text-decoration: none;
}
.chapter_navi a:hover {
	color: #D97441;
	text-shadow: 0px 0px 0, 0px 0px 0, 0px 0px 0 rgba(0, 0, 0, 0.37), 1px 1px 0 rgba(0, 0, 0, 0.37);
}
	.topbar{
	    display:none;
	    opacity:0;
	    height:0px;
	}
	.hanreiwrap{
    
    display: flex;
    justify-content: flex-start;
    margin: auto;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
	}
	.fontlang{
	    margin-top:10px;
	   font-family: 'Sawarabi Gothic', sans-serif;
	   font-size:14px;
	}
	.jFontsize,.eFontsize,.gFontsize{
	    margin:0 5px;
	    background-color:white;
	    border:1px solid lightgray;
	    border-radius:5px;
	    height:25px;
	    padding: 3px 5px;
        display: flex;
        align-items: center;
	}
	.fontwrap{
	    position:relative;
	    display:flex;
	    height:45px;
	    flex-direction:row;
	    justify-content:space-around;
	    align-items:center;
	    width:134px;
	    margin:6px auto 4px;
	}
	.fontwrap select{
	    cursor:pointer;
	        margin: 0 5px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 5px;
    height: 25px;
    width:134px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
	}

	.fontsettings{
	    display:flex;
	    flex-direction:row;
	    flex-wrap:wrap;
	}
	.arrowbutton{
    position: absolute;
    left: 12px;
    top: 16px;
    pointer-events: none;
    font-size: 12px;
	}
	.fontleft{
	    width:50%;
	   
	}
	.fontright{
	     width:50%;
	     	
	}
	.fontbottom{
	    width:100%;
	}
	.fontsize{
	display: flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height:25px;
    list-style-type: none;
    padding: 3px 3px;
    margin: 4px 3px;
    border-radius:5px;
    font-size: 1.25em;
    line-height: 1.4em;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    cursor:pointer;
    color:white;
    background-color: #849e71;
	}.resetFont{
	    font-size:1em!important;
	   
	    padding:3px 10px;
	}
	.fontsize:hover {
	color:black;
    background-color:#c1d4b3;
    box-shadow: rgb(60 64 67 / 30%) 0px 0.5px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 2px 1px;
}
.exitfullscreen{
    display:none;
    cursor:pointer;
    justify-content:center;
    align-items:center;
    width:98%;
    height:35px;
    font-weight:bold;
    font-size:22px;
    font-family: 'Sawarabi Gothic', sans-serif;
    margin:15px auto 35px;
    padding:5px 0;
    border-radius:5px;
    border:1px solid lightgray;
    	color:#474747;
    background-color:#c1d4b3;
    box-shadow: rgb(60 64 67 / 30%) 0px 0.5px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 2px 1px;
}
.exitfullscreen2{
    display:none;
    justify-content:center;
    align-items:center;
    position:fixed;
    top: 48px;
    right: 50px;
    padding: 0 8px;
    margin-left: 10px;
    cursor: pointer;
    display: none;
    width: 109px;
    height: 30px;
    border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    color: #f6f6f6;
    background-color: #849e71;
    border-radius: 50px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    z-index:999!important;
}
.exitfullscreen2:hover{
   	color:#474747;
    background-color:#c1d4b3;
    box-shadow: rgb(60 64 67 / 30%) 0px 0.5px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 2px 1px;
}
.exitfullscreen:hover{
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    color:white;
    background-color: #849e71;
}
.topbar_show{
    position:absolute;
    z-index:5;
	display:flex;
	flex-direction:column;
	justify-content: center;
	opacity:1;
	padding: 5px 1% 5px 1%;
	border-radius: 0 0 4px 4px;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	background-color: #f6faff;
	margin:30px 0 0 30px;
    overflow:hidden;
}

.hanrei {
	margin:2px;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
}
	.hanbox{
		display:flex;
		justify-content:center;
			margin:6px 0;
		width:100%;
	}
	.notehan{
	    font-size: 12px;
   
    color: #007799;
	}
	.bracehan{
    font-size: 21px;
    line-height: 12px;
    color: #92a5b2;
    font-family: 'Noto Serif', serif;
	}
	.italichan{
	font-size: 16px;
    font-weight:bold;
    color: #001320;
    font-family: 'Noto Serif', serif;
    font-style: italic!important;
	opacity: .5!important;
	}
/*****************interlinear*****************/
.contents_wrapper {
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	background-color: #f7f7f7;
	padding-bottom:10px;
	border: 1px solid rgba(73, 73, 73, 0.425);
	border-radius: 4px;
	max-width: 1300px;
	min-height:200px;
	margin: 50px auto;
	position:relative;
}
.fullscreen{
    overflow:auto!important;
    max-width:100%!important;
    margin:auto!important;
    position:absolute!important;
    z-index:9!important;
    top:35px!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
}

.notranslate div{
    font-size:0px!important;
}


.verses_wrapper {
	margin: auto;
}
.flex-container {
	display: -ms-flexbox;
	display: flex;
	border-radius:5px;
    background-color: #f4f7f3;
}
.number_pane {
	flex-basis: 28px;
	margin: 6px 0;
	flex-shrink: 0;
	position:relative;
}
.nobg {

	background-image: none!important;

}
.interlin_pane {
    position: relative;
	flex: 3;
	display:flex;
	flex-wrap:wrap;
	background-image: -moz-linear-gradient(right, #ccf 0%, #fff 2%, #fff 100%);
	background-image: -webkit-linear-gradient(right, #ccf 0%, #fff 2%, #fff 100%);
	background-image: linear-gradient(right, #779 0%, #ccf 2%, #fff 100%);
	background-position: 20px 100%;
	background-size: 40px 40px;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12);
    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12);
	border-radius: 4px;
	margin: 2px 0 2px 0;
	padding: 4px 0 14px 11px;
	background-color:#fff;
	border: 1px solid rgba(73, 73, 73, 0.425);
}
/* translate expand button, hide on desktop */
.expanderHead{
	display: none;
}
.expanderHead2 {
		display: flex;
		justify-content:center;
		align-items:center;
    	margin-left: 30px;
	    position:relative;
	    top:1px;
		padding: 6px 10px;
		color: #5C6E58;
		cursor: pointer;
		border-radius: 4px 4px 0 0;
		width:30px;
		border: 1px solid rgba(73, 73, 73, 0.425);
        border-bottom:0;
		background-color: #f4f7f3;
		font-weight:800;
}
.expanderHead3 {
		display: flex;
		justify-content:center;
		align-items:center;
	    position:relative;
	    top:1px;
		padding: 6px 10px;
		color: #5C6E58;
		cursor: pointer;
		border-radius: 4px 4px 0 0;
		width:30px;
		border: 1px solid rgba(73, 73, 73, 0.425);
        border-bottom:0;
		background-color: #f4f7f3;
		font-weight:800;
}
.expanderHead4 {
		display: flex;
		justify-content:center;
		align-items:center;
	    position:relative;
	    top:1px;
		padding: 6px 10px;
		color: #5C6E58;
		cursor: pointer;
		border-radius: 4px 4px 0 0;
		width:50px;
		border: 1px solid rgba(73, 73, 73, 0.425);
        border-bottom:0;
		background-color: #f4f7f3;
		font-weight:800;
}
.expanderHead5 {
		display: flex;
		justify-content:center;
		align-items:center;
    	margin-left: auto;
        margin-right: 19.9%;
	    position:relative;
	    top:1px;
		padding: 6px 10px;
		color: #5C6E58;
		cursor: pointer;
		border-radius: 4px 4px 0 0;
		width:30px;
		border: 1px solid rgba(73, 73, 73, 0.425);
        border-bottom:0;
		background-color: #f4f7f3;
		font-weight:800;
}
.movethis{
    margin-right: 30px;
}
.uptop{

    top: 68px;
}
.marginzero{
    margin:0!important;
    max-width:100000px!important;
}
.expanderHead2:hover,.expanderHead3:hover,.expanderHead4:hover,.expanderHead5:hover {
		color: #007799;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
		cursor: pointer;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 2px -2px, rgba(0, 0, 0, 0.3) 0px 2px 2px -3px;
		background-color: #e9e8e8;
	}
.trans_pane {
	
	display: flex;
	flex-direction:column;
	flex: 1;
	padding: 8px 0;
}
.crossref{
    display:flex;
    white-space: nowrap;
    margin:0 5px;
    color: #5d7849;
    cursor:pointer;
}
.crossref:hover{
    color: #e6360a;
}
	.cfwrap{
	    padding-top:25px!important;
	    
	}
	.linebreak{
	    width:100%;
	}
.inlineview{
	padding-left: 0px!important;
}	
.l0 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 0px;
}
.l1 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 40px;
}
.l2 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 80px;
}
.l3 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 120px;
}
.l4 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 160px;
}
.l5 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 200px;
}
.l6 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 240px;
}
.l7 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 280px;
}
.l8 {
	display: flex;
	flex-wrap:wrap;
	padding-left: 320px;
}
.tbl-1stletter,.tbl-float {
	position:relative;
	display:inline-flex;
	align-items:flex-start;
	margin: 18px 12px;
    min-width: 45px;
	border-collapse: collapse;
}
.num {
position: absolute;
top: -22px;
    left: 11px;
    font-weight: bolder;
    color: #ffffff;
    z-index: 3;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 26px;
    font-size: 1.3em;
    line-height: 1.7em;
    padding: 3px;
    margin-bottom: 3px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        background-color: #9fba8a;
}
.lhidden{
    opacity:0;
      font-size:16px!important;
}
.lshow{
    opacity:1;
    margin:auto;
    font-size:16px!important;
}
.lshow2{
    opacity:1;
    margin:auto;
    font-size:21px!important;
}
.study:hover{
    cursor:pointer;
}
.study:after{
 
border-color: #eeeeee;
    top: -15px;
    right: -12px;
    bottom: -24px;
    left: -12px;

}
.study:hover:after{
  
          content: '';
    position: absolute;
         	border:2px solid #9fba8a;
	border-radius:5px;
}
.pinpon:after{
   content: '';
    position: absolute;
         	border:2px solid #9fba8a;
	border-radius:5px;
border-color: blue;
    top: -15px;
    right: -12px;
    bottom: -24px;
    left: -12px;

}
.bubuun:after{
   content: '';
    position: absolute;
         	border:2px solid #9fba8a;
	border-radius:5px;
border-color: red;
    top: -15px;
    right: -12px;
    bottom: -24px;
    left: -12px;

}
.choose{
    cursor:pointer;
}
.studyhint{
    color: transparent!important;
    font-size:12px;
    background-color:#f7f7f7!important;
}
.quiz{
    display:flex;
    flex-direction:column;
}
.score{
    display:none;
     position: absolute;
  border-radius:4px;
    align-items:center;
    justify-content:flex-start;
    flex-direction: row;
    height: 30px;
    width: 130px;
    /*background-color: blue;*/
    bottom: 0;
    padding-left:4px;
    right: -142px;
    	border: 1px solid rgba(73, 73, 73, 0.425);
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
		background-color: #ecf5e2;
}
.wordnum{
    font-weight:bold;
    font-size:18px;
    display:flex;
}
.correctnum{
   font-weight:bold;
    font-size:18px;
    display:flex;
    color:green;
}
.percent{
    color:blue;
      font-weight:bold;
    font-size:18px;
    display:flex;
}
.slash,.dash{
      font-weight:bold;
    font-size:18px;
    display:flex;
}
.verbsnouns{
    display:flex;
flex-direction: row;
flex-wrap:wrap;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    bottom: 43px;
    width:100%;
}
.verbsnounsflex{
    display:flex;
    flex-direction:row;
width:100%;
margin:3px 0;
}
.vbntext{
    
}
.verbtotal{
    color:#1da0a0;
}
.nountotal{
   color:#7a8c23;
}
.quizmode{
    position:relative;
        
    font-size:0!important;
    height:31px!important;
    width:20px;
}
.quizmode:hover,.thisitem{
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
     background-color: #d97441!important;

}
.quizmode::before{
    height: 100%!important;
    color: #d97441!important;;
    top: 9px;
    font-size: 20px;
    position: absolute;
    display: block;
    content: '?';
}
.quizmode:hover::before,.thisitem::before{
    height: 100%!important;
    color: #f6f6f6!important;
    top: 9px;
    font-size: 20px;
    position: absolute;
    display: block;
    content: '?';
}
.pickone{
    cursor:pointer;
     font-family: 'Sawarabi Gothic', sans-serif;
     font-size:18px;
    text-align:center;
    display:flex;
    flex-direction:row;
     border: 1px solid #95ba8a;
     border-radius:15px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    background-color: #f7f7f7;
    margin:5px 5px;
    padding:5px;
}
.pleaseselect{
    cursor:default;
     font-family: 'Sawarabi Gothic', sans-serif;
     font-size:15px;
    text-align:center;
    display:flex;
    flex-direction:row;
    color:#f6f6f6;
 border: 1px solid rgba(0, 28, 51, 0.356);
     border-radius:15px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    background-color: #849e71;
    margin:5px 5px;
    padding: 5px 0 5px 9px;
}
.pickone:hover{
   
     font-weight:bold;

     border: 1px solid #95ba8a;
     border-radius:25px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px, rgb(0 0 0 / 6%) 0px 1px 1px 0px;
      
    background-color: #fff;
    margin: 3px 3px;
    padding: 7px;
}
.qpos{
    color:black;
    margin:1px;
}
.qcase{
    color:blue;
    margin:1px;
}
.qgen{
    color:#1da0a0;
    margin:1px;
}
.qperson{
    color:green;
    margin:1px;
}
.qnum{
    color:#b95668;
    margin:1px;
}
.qtense{
    color:#d97441;
    margin:1px;
}
.qmood{
    color:darkblue;
    margin:1px;
}
.qvoice{
    color:#7a8c23;
    margin:1px;
}
.qcomp{
    color:purple;
    margin:1px;
}
#studytoggle{
     pointer-events: none;
}
#studybuttons{
     position:fixed;
     display:flex;
     flex-direction:row;
     flex-wrap:Wrap;
     justify-content:flex-end;
     align-items:center;
     z-index:10;
     right:64px;
     bottom:30px;
     width:500px;
     /*height:50px;*/
}
.studyonoff{
    cursor:pointer;
     display:none;
     margin-left:10px;
    width:60px;
    height:30px;
   border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
      color:#f6f6f6;
    background-color: #849e71;
     border-radius:50px;
     font-weight:bold;
         font-size:18px;
     text-align: center;
vertical-align: middle;
line-height: 30px;       
}
.studyreset{
    cursor:pointer;
    display:none;
    width:84px;
    height:30px;
   border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
   color:#f6f6f6;
    background-color: #849e71;
     border-radius:50px;
      font-weight:bold;
      font-size:18px;
           text-align: center;
vertical-align: middle;
line-height: 30px;    
}
.startquiz{
    margin-left: 10px;
    cursor:pointer;
    display:none;
    width:84px;
    height:30px;
   border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
   color:#f6f6f6;
    background-color: #849e71;
     border-radius:50px;
      font-weight:bold;
      font-size:18px;
           text-align: center;
vertical-align: middle;
line-height: 30px;    
}
.resetquiz{
    margin-left: 10px;
    cursor:pointer;
    display:none;
    width:108px;
    height:30px;
   border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
   color:#f6f6f6;
    background-color: #849e71;
     border-radius:50px;
      font-weight:bold;
      font-size:18px;
           text-align: center;
vertical-align: middle;
line-height: 30px;    
}
.tally{
    cursor:pointer;
    display:none;
    width:122px;
    height:30px;
   border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
   color:#f6f6f6;
    background-color: #849e71;
     border-radius:50px;
      font-weight:bold;
      font-size:18px;
           text-align: center;
vertical-align: middle;
line-height: 30px;    
}
.totalquiz{
       width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 0;
}
.finalall{
     display: Flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    height:22px;
    font-weight: bold;
    border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
 
    padding: 0 10px 2px;
    background-color: #f6faff;
    border-radius: 50px;
}
.finalgrammarall{
     display: Flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space:nowrap;
    height:22px;
    font-size: 15px;
    font-weight: bold;
    border: 2px solid #95ba8a;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
 
    padding: 0 10px 2px;
    background-color: #f6faff;
    border-radius: 50px;
}
.finalcorrect{
    color:green;
}
.finalpercent{
    color:blue;
}
.finalverbs{
    color:#1da0a0;
}
.finalnouns{
   color:#7a8c23;
}
.finalpercent{
    color:blue;
}
.studyonoff:hover,.studyreset:hover,.resetquiz:hover,.startquiz:hover{
    background-color: #c1d4b3;
    color: #41470d;
    cursor:pointer;
}
.studyhint:hover{
    color:#0077aa!important;
}
.studychange{
    margin-right:28px;
    background-color: #fff;
    /*background-image: none;*/
}
.quizchange{
    margin-right:145px;
    background-color: #fff;
    background-image: none;
}
.studyhide{
    display:none!important;
}
.numj {
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bolder;
    background-color: #d9e6ce;
    color: #15596c;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 14px;
    font-size: 1em;
    line-height: 1.7em;
    padding: 3px;
    margin-bottom: 3px;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 
}
.cfhead {
    
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bolder;
    background-color: #d9e6ce;
    color: #15596c;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 14px;
    font-size: 1em;
    line-height: 1.7em;
    padding: 3px 9px;
    margin-bottom: 3px;
    height: 22px;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    
}
.strongs{
   
	background-color: #fff;
}
.tbl-float tbody:first-of-type tr:first-of-type,.tbl-1stletter tbody:first-of-type tr:first-of-type {
    position:relative;
    height:25px;
}
.strongs a{
    
	font-size: 13px;
	line-height: 24px;
	letter-spacing: .1em;
	font-weight: bolder;
	color: #007799;
	font-family: 'Quicksand', sans-serif;
}
.strongs a:hover {
	cursor : pointer;
	color: #e6360a;
}
.Greek {
	font-size: 19px;
	line-height: 30px;
	color: #001320;
	background-color: #fff;
	font-family: 'Noto Serif', serif;
	text-align: Justify;

}
.braceleft {
        position:absolute;
    left:-16px;
        top: 23px;
font-size: 32px;
    transform: scale(.8, 2.08);
    line-height: 57px;
    color: #92a5b2;
font-family: 'Times New Roman', serif!important;
    text-align: Justify;
    background-color:transparent;
     font-style:normal;
}
.braceright {
    position:absolute;
    right:-15px;
        top: 23px;
font-size: 32px;
    transform: scale(.8, 2.08);
    line-height: 57px;
    color: #92a5b2;
font-family: 'Times New Roman', serif!important;
    text-align: Justify;
    background-color:transparent;
    font-style:normal;
}
.dashed{
        display: flex;
    justify-content: center;
    width: 100%;
    line-height: 40px;
    height: 40px;
     color: #92a5b2;
     font-size:26px!important;
     	font-family: 'Noto Serif', serif!important;
}
.Greek a,.pop_greek a,.orig_g{
	font-family: 'Noto Serif', serif;
}
.Greek a:hover,.pop_greek a:hover{
	cursor : pointer;
	color: #e6360a;
}
.Japanese,.English,.transliter,.orig_g {
	display:inline-flex;
	flex-direction:row;
	z-index:1;
	justify-content:center;
	text-align:center;
	white-space:nowrap;
	font-size: 13px;
	/*line-height: 20px;*/
}
.Japanese p,.English p,.transliter p,.orig_g {
background-color:#fff;
}
.Japanese{
	color: #c94a41;
	line-height:20px;
}
.English{
    color: #948F2A;
    line-height: 28px;
    height: 24px;
    display:none;
    padding-bottom:3px;
    font-family:'arial',sans-serif;
}
.transliter{
      display:none;
 line-height: 18px;
    font-style: italic;
    font-size: 12px;
    color: #618B72;
    height: 20px;
}

.orig_g{
    display:none;
 line-height: 18px;
    font-style: italic;
    font-size: 12px;
    color: #7C6D90;
    height: 20px;
}
.JapaneseMarkUp {
	display:inline-flex;
	flex-direction:row;
	z-index:1;
	justify-content:center;
	text-align:center;
	white-space:nowrap;
	font-size: 13px;
	line-height: 20px;
	color:red;
}
.StrongsMarkUp 
 {
   
    
  color: #873b8d !important; 
  font-weight: bold !important; 
  border-radius: 14px;
  border: 1px solid rgb(185 185 185);;
  background: #f3f3f3;
  padding: 1px 5px;
    text-align: center;
 } 
 .StrongsMarkUp:hover{
 
	background: #f6f6f6;
	border: 1px solid rgb(185 185 185);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
 }
.Japanese p,.JapaneseMarkUp p{
	text-align:center;
	background-color:#fff;
}
.top-flex{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;

}
.bookinfo-flex{
    width:60%;
}
.letter-flex{
     width:40%;
}
.form-flex{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
       padding:10px 0;
       border-bottom:1px solid LightGray;
         border-top:1px solid LightGray;
}
.form-left{
  width:50%;
     padding-right:10px;
}
.grayed{
  background-color:gray!important;
     pointer-events:none;
}
.disabled{
    pointer-events:none; 
}
.searchboxc{
    display:flex;
    flex-direction:row;
    justify-content:center;
      align-items:center;
    width:30%;
    padding:4px;
}
.pagination-holder{
    display:flex;
    
    padding: 10px 0px;
    width:90%;
    margin:20px auto 0px;
    justify-content:center;
}
    .entry-flex { 
      display: flex; 
      flex-direction: row; 
      flex-wrap: wrap; 
       padding: 10px 0; 
   
       border-bottom: 1px solid #888; 
            border-top: 1px solid #888; 

    } 
        .entry { 
        color: #555;
       width: 32.5%; 
      display: flex; 
      flex-direction: column; 
     align-items: center; 
     background-color: #f7f5f5;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
    border-radius: 4px;
    margin: 5px 2px 4px 2px;
    } 
     .entry b{ 
        display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4px 0;
    font-size:17px;
    background-color: #d0d6cc;
    color:#007799;
    border-radius: 4px 4px 0 0;
    height: 18px;
    font-family: arial,helvetica,sans serif;
     }
           .def { 
       width: 100%; 
    } 
    .def .item{
          text-indent: 45px;
    }
               .tlit,.pos { 
       flex:1;
       text-align:center;
    } 
                   .root{ 
       flex:2;
         text-align:center;
    } 
            .entrytext { 
     padding: 4px; 
     width: 45%; 
      display: flex; 
      flex-direction: column; 

    } 
            .entryid { 
     padding: 4px; 
      width: 100%; 
      display: flex; 
      flex-direction: row; 
          justify-content: center; 
    } 
.form-right{
     width:45%;
     padding-left:10px;
     border-left:1px solid LightGray;
}
#frm_greek {
	font-size: 16px;
	font-weight: bold;
	font-family: 'Noto Serif', serif;
	text-align: Justify;
}
#frm_indentlevel {
	width: 40px;
	text-align: center;
}
.bottom-flex{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
     width:100%;
     padding:10px 25px;
}
.letter_box{
       display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    width:85%;
     margin:auto;
}

.letterjp{
    /*width:250px;*/
    padding:6px 32px;
       background-color: #849e71;;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    margin: 16px auto;
     border: 1px solid #555;
     border-radius:25px;
     box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
    text-align: center;
    font-family: 'Sawarabi Gothic', sans-serif;
}

.winfo{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
}

.item{
font-weight:bold;
    width: 94%;
    font-size:16px;
    padding: 8px 4px 5px 4px;
    min-height: 25px;
    border-radius: 0 0 2px 2px;
}
.btn{
    display:flex;
    justify-content:center;
    align-items:center;
}
.ref-mark {
	color: #20b2aa;
	font-size: 90%;
	font-family: Sans-serif;
	vertical-align: top;
	top: -0.1em;
	margin-left: 1px;
}
/*.parsebutton{*/
/*    position:absolute;*/
/*    bottom:0;*/
/*}*/
.parseflex{
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:12px;
	position:relative;
}
.jflex,.gflex,.eflex,.oflex,.verseinflect{
	display:flex;
	align-items:center;
	    min-width: 34px;

}
.sflex{
 	display:flex;
justify-content:flex-start;
	align-items:center;   
	 position:absolute;
	 width:100%;
}
.parsing {
display: flex;
    min-width: 25px;
    border-radius: 12px;
    border: 1px solid rgb(160 157 157);
    flex-direction: row;
    margin-top: 14px;
    position: absolute;
    z-index: 2;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    background: #f6f6f6;
    padding: 1px 5px 2px;
    font-size: 13px;
    line-height: 12px;
    height: 15px;
	color: #0077aa;
	animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}
.parsemain {
	text-align:center;
	pointer-events: none;
}
.parsemargin{
	/*margin-top:54px;*/
	animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}
.parseshow,#inf_pop{
    opacity:0;
	display:none;
	margin:auto;
	position:absolute;
	text-align:center;
    width:auto!important;
	pointer-events: none;
	z-index:4;
	font-size: 14px;
	line-height: 14px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
 
}
.parseshowWrap,.inf_popup_bg{
    transform-origin: top;
    position:relative;
    box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.1);
    z-index:4;
    border-radius:5px;
	border: 1px solid #0077aa;
	background:#f6f6f6;
	color: #0077aa!important;
	padding:10px;
        display:flex;
    	flex-direction:column;
    	transform:scale(0);
    		-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.parseOp{
    opacity:1!important;
}
.noteOp{
    font-family: 'Noto Serif', serif;
    opacity:1!important;
    pointer-events:auto!important;
}
.inf_popup_bg:before,.parseshowWrap:before {
      content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-bottom-color: #0077aa;
}

.inf_popup_bg:after,.parseshowWrap:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-bottom-color: #f6f6f6;
}
.showPos,.infPos{
   border: 1px solid rgb(160 157 157);
    display:flex;
    max-width: fit-content;
    height:14px;
    font-size: 15px;
     padding:3px 7px;
     justify-content:center;
     align-items:center;
     border-radius:8px;
     margin:2px auto 8px;
     position:relative;
     pointer-events:none;
     font-family: 'Sawarabi Gothic', sans-serif;
}
.inf_pop_pos{
    width:100%;
    display: flex;
    align-items: center;
}
.showGram{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    padding: 3px 0;
    width:100%;
}
.inf_pop_grammar{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding: 3px 0;
    width:100%;
}
/*.grampart{*/
/*    margin:0 3px;*/
/*}*/

.parsing:hover {
	cursor: pointer;
	color: #526346;
}

/*Parse Colors*/

.verbColor{
    background-color:#b1ebe9;
    color:#042f3c;
}

.nounColor{
    background-color:#fde4cf;
    color:#a65614;
}

.advColor{
    background-color:#ffcfd2;
    color:#580208;
}

.adjColor{
    background-color:#f1c0e8;
    color:#600c50;    
}

.dartColor{
    background-color:#e1dbea;
    color:#22064d;    
}

.pnounColor{
    background-color:#d3e3f4;
    color:#0c3b6d;    
}

.prepColor{
    background-color: #bef9e2;
    color: #35735b;
}

.conjColor{
    background-color:#e8faba;
    color:#516a10;    
}

.intColor{
    background-color: #f5c0db;
    color: #893c6e;
}

.hebColor{
    background-color:#feffd2;
    color:#5e6010;    
}

.verbColor:hover{
    color: #b1ebe9;
    background-color: #477c7a;
}

.nounColor:hover{
    color:#fde4cf;
    background-color:#a65614;
}

.advColor:hover{
    color:#ffcfd2;
    background-color:#8a171f;
}

.adjColor:hover{
    color:#f1c0e8;
    background-color:#7a1968;    
}

.dartColor:hover{
    color:#e1dbea;
    background-color:#743cca;    
}

.pnounColor:hover{
    color:#d3e3f4;
    background-color:#2c65a1;    
}

.prepColor:hover{
    color: #a9ecd2;
    background-color: #4d9579;
}

.conjColor:hover{
    color:#e8faba;
    background-color:#65801f;    
}

.intColor:hover{
    color: #f5c0db;
    background-color: #893c6e;
}

.hebColor:hover{
    color:#feffd2;
    background-color:#98943a;    
}

.showparenthases{
	display:inline-flex;
	text-align:center;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}
.backing{
	border-radius: 5px;
	display:flex;
	cursor:pointer;
	background: #f6f6f6;
	border: 1px solid rgb(185 185 185);
	padding:0 4px;
	z-index:2;
	/*margin-top:20px!important;*/
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.dots{
	text-align:center;
	cursor:pointer;
}
.hiddentxt{
	display:none;
	z-index:2;
	text-align:center;
}
.nodots{
	font-size:0px;
}
.transj {
    border-top: 1px solid rgba(73, 73, 73, 0.425);
    border-bottom: 1px solid rgba(73, 73, 73, 0.425);
    display: flex;
    flex-wrap:wrap;
    padding: 20px 10px 18px 12px;
    font-size: 16px;
    line-height: 1.7em;
    margin-top: 20px;
    height: fit-content;
    position: relative;
    color: #414a4c;
    background-color: #f9f9f9;
}

.punct{
	background-color: #fff;
}
.Invitation {
	color: #dc143c;
}
.noresults,.loading,.loader{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
}


.noresults_message,.loadingmessage{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color: #555;
	font-weight: bold;
	width: 98.9%;
	height:300px;
	font-family: arial,helvetica,sans serif;
	background-color: #f7f5f5;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	border-radius: 4px;
	margin: 5px 0 4px 0;
}
/*****************search page*****************/
#search_terms{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	width:98%;
	padding:8px 0 4px;
}
.wordswrap{
	font-family: 'Sawarabi Gothic', sans-serif;
	color:#555;
	font-weight:bold;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.strongs_res,.g_orig,.japanese_r,.japanese_term,.j_strongs{
	padding:4px 6px;
	align-items:center;
	justify-content:center;
	color: #007799;
	font-size:16px;
	font-family: 'Sawarabi Gothic', sans-serif;
	font-weight:bold;
}
.japanese_term{
	padding:4px 2px;
	font-weight:normal;
}
.g_orig,.g_infl,.greek_res,.greek_crossref,.strongs_crbox{
	padding:4px 6px;
	align-items:center;
	justify-content:center;
	color: #41470d;
	font-size:16px;
	font-family: 'Noto Serif', serif;
	font-weight:bold;
}
.post{
    color:#d97441!important;
}
.greek_res{
	cursor:pointer;
}
.appear{
	color: #555;
	font-weight: bold;
	width: 99%;
	font-family: arial,helvetica,sans serif;
	background-color: #f7f5f5;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	border-radius: 4px;
	margin: 5px auto 4px auto;
}
/*.jp_list{*/
/*	display: flex;*/
/*	justify-content: center;*/
/*	align-items: center;*/
/*	width: 100%;*/
/*	padding: 4px 0;*/
/*	background-color: #c1d4b3;*/
/*	border-radius: 4px 4px 0 0;*/
/*	height: 16px;*/
/*	font-family: arial,helvetica,sans serif;*/
/*}*/
.jp_ref{
	padding: 8px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-family: arial,helvetica,sans serif;
	height: auto;
}
.jp_all{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 14px;
}
.reset_jp,.parseinst{
	padding: 18px 0 10px;
	align-items: center;
	justify-content: center;
	color: #1c8125;
	font-size: 16px;
	font-family: 'Sawarabi Gothic', sans-serif;
	font-weight: bold;
}
.parseinst{
    color:#41470d;
}
.reset_jp{
	display:none;
}
.reset_jp:hover,.greek_res:hover,.jp_wrap .greek_res:hover{
	cursor:pointer;
	color: #D97441;
}
.jp_wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25%;
	font-size: 16px;

	padding: 4px 0;
}
.jp_wrap .greek_res{
    color:#1c8125;
}
.g_infl a{
	color: #B61626;
	align-items:center;
	justify-content:center;
	font-family: 'Noto Serif', serif;
}
.g_infl {
	padding-right:0px!important;
}
.strongs_res,.j_strongs {
	padding-left:0px!important;
}
.strongs_res a,.j_strongs a {
	align-items:center;
	justify-content:center;
}
.strongs_res a:hover,.j_strongs a:hover,.g_infl a:hover,#search_terms a:hover span{
	cursor : pointer;
	color: #D97441;
}
/*****************popup window*****************/
#popup {
	display: none;
	z-index: 10;
}
.bottom_span{
	color:#0077aa;
}
.popup_bg {
 border-radius:5px;
	border: 1px solid #0077aa;
	background:#f5f5f5;
	color: #0077aa!important;
	padding:6px;
        display:flex;
    	flex-direction:column;
    	transform:scale(0);
    		-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	min-width: 290px;
	max-width:430px;
    -webkit-box-shadow: 0px 3px 9px 1px rgba(216, 221, 231, 0.53);
    box-shadow: 0px 3px 9px 1px rgba(216, 221, 231, 0.53);
}
/*.inf_popup_bg {*/
/*	display:flex;*/
/*	flex-direction:row;*/
/*	justify-content:center;*/
/*	align-items:center;*/
/*	height:auto;*/
/*	background: #f0f8eb;*/
/*	border: solid 1px rgba(75, 75, 75, 0.377);*/
/*	border-radius: 5px;*/
/*	padding: 6px 8px;*/
/*	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
/*}*/
/*.inf_pop_pos,.inf_pop_grammar{*/
/*	display:flex;*/
/*	margin:auto;*/
/*	flex-direction:row;*/
/*	justify-content:center;*/
/*	align-items:center;*/
/*	font-family: arial,helvetica,sans serif;*/
/*}*/
/*.inf_pop_grammar{*/
/*	color:#007799;*/
/*}*/
.popgram{
    cursor:pointer;
}
.popgram:hover{
	color: #D97441!important;
}

.popup-open {
	display: inline-block;
	color: #4169e1;
}

.popup-open:hover {
	color: red;
	cursor: pointer;
}
#popup_content {
	width: 100%;
	
}
.pop_greek {
	font-size: 17px;

	font-family: 'Noto Serif', serif;
}
.popup_top,.popup_middle,.gnotesheader{
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
	margin-bottom:5px;
	padding:4px 0;
	background-color: #dbebd0;
	border-radius:4px 4px 0 0;
	min-height:20px;
	font-family: arial,helvetica,sans serif;
	border-bottom:1px solid rgba(73, 73, 73, 0.425);
}
.gnotesheader{
    	justify-content:center;
}
.popup_top span,.popup_middle span{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
.popup_top_content,.popup_mid_content,.gnotescontent{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:flex-start;

	background-color: #f7f7f7;
	border-radius:4px 4px 0 0;
	padding:4px 12px;
	margin:0 auto;
	font-family: arial,helvetica,sans serif;
}
.popup_top_content{
   
    font-size:14px;
}
.popdef{
    padding:0;
    text-align:left;
}
.pop_wrap,.grammarnotes {
	width: 100%;
	border-radius: 4px;
	color: #555;
	-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
	margin: 0 0 8px;
		border: 1px solid rgba(73, 73, 73, 0.425);
	padding-bottom:5px;
	text-align: center;
	font-family: arial,helvetica,sans serif;
	font-size: 1em;
	font-weight: bold;
	background-color: #f7f7f7;
}
.grammarnotes {
    opacity:0;
    	border: 0px solid rgba(73, 73, 73, 0.425);
    max-height:0px;
    overflow:hidden;
        width: 99.5%;
}
.showgramnotes{
    	border: 1px solid rgba(73, 73, 73, 0.425);
        opacity:1;
    max-height:10000px;
    
}
.grammarexp{
    padding:10px;
        display: flex;
    flex-direction: column;
    text-align:left!important;
}
.grammarexp span{
    padding:5px 0;

    text-align:left!important;
}
.grammarextra{
    padding:5px 0;
    text-align:left!important;
    color:#618B72;
}
#popup-close,#gram-close{
	display:flex;
	align-self:center;
		justify-content:center;
		align-items:center;
	margin: auto;
	width:50px;
	    font-size: 13px;
    font-weight: 600;
	padding: 3px 10px;
	color: #5C6E58;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	background-color: #f6f6f6;
}
#gram-close{
    margin-bottom:10px;
}
#popup-close:hover,#gram-close:hover{
	color: #D97441;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 4px -2px, rgba(0, 0, 0, 0.3) 0px 3px 2px -3px;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 2px -2px, rgba(0, 0, 0, 0.3) 0px 2px 2px -3px;
	background-color: #e9e8e8;
}
@media only screen and (max-width: 1318px) {
	.contents_wrapper{
		margin: 50px 2vw;
	}
	.verses_wrapper{
		margin: 0 2vw;
	}

}
@media only screen and (max-width: 900px) {
    .full_content{
    margin: auto;
}
	.jp_wrap{
		width: 33%;
	}
	.topbar{
	    display:none;
	}
	.topbar_show{

	}
	.slid{
		display:flex!important;
		flex-direction:row;
		flex-wrap: wrap;
		align-items:center;
		max-height:100000px!important;
		overflow:visible!important;
	}

	.display {
flex-wrap: wrap;

    width: 100%;
}

	.distext,.hantext {
		width:100%;
		display:flex;
		justify-content:center;
		margin:6px 0;
	}
	.hanrei {
		margin:4px;
		/*flex-direction:row;*/
		justify-content:space-between;
		flex-wrap:wrap;
		width:100%;
	}
	.expanderHead4{
	    display:none!important;
	}
.uptop{
    left: 20px;
    top: 101px;
}
	.contents_wrapper,.verses_wrapper {
		margin-left: 1vw;
		margin-right: 1vw;
	}
	.flex-container {
		display: -ms-flexbox;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		padding-top:4px;
	}
	.interlin_pane {
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
		flex-wrap:wrap;
		background-image:none;
		background-color:white;
		padding:6px;
	}
	.number_pane {
	    flex-direction: row-reverse;
    justify-content: space-between;
		display: flex;
		height: 30px;
		padding-left: 1%;
		margin: 0;
	}

	.bookmark{
      height: 45px;
      width:45px;
       border-radius: 5px 5px 0 0;
      padding-left: 15px;
    margin-right: 20px;
    margin-top:0;
     position:relative;
}
.bookmarked{
   margin-top:8px;  
}
.markbtn{
padding-bottom: 10px;
cursor:pointer;
}
	.l0,.l1,.l2,.l3,.l4,.l5,.l6,.l7,.l8{
		padding-left: 0px;
	}
	.tbl-float,.tbl-1stletter {
		display:inline-flex;
		align-items:flex-start;
		margin: 18px 12px 26px;
		background-color: #fff;
	}

	.num {
    top: 8px;
    left: 4px;
	}
	.expanderHead{
		display: flex;
		justify-content:center;
		align-items:center;
		margin: 5px auto;
	
		padding: 6px 10px;
		color: #5C6E58;
		cursor: pointer;
		border-radius: 4px;
		width:98px;
		border: 1px solid rgba(73, 73, 73, 0.425);
		box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 4px -2px, rgba(0, 0, 0, 0.3) 0px 3px 2px -3px;
		background-color: #f6f6f6;
	}
	.expanderHead5 {
	    display:none;
	}
	.expanderHead:hover {
		color: #D97441;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
		cursor: pointer;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 2px -2px, rgba(0, 0, 0, 0.3) 0px 2px 2px -3px;
		background-color: #e9e8e8;
	}
	.numj,.cfhead{

		top: -5px;
        left: 7px;
	}
	.slidedown{
	    max-height:0;
	    overflow:hidden;
	    width:100%;
	}
	.transj {

		position:relative;
		width: 100%;
		padding: 5px 10px 5px 45px;
		border-radius: 4px;
		border: 1px solid rgba(73, 73, 73, 0.425);
		box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12);
		background-color: #edf6e4;
		margin: 5px 0;
	}
	.cfwrap{
	    padding-left:90px;
	    padding-top: 5px!important;
	}
	.trans_pane {
		display: flex;
		position:relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		margin: 5px 0;
		padding: 0;
		border-top: 0;
	}
	.notranslate{
    display:flex;
    }
	.studychange{
    margin-right:0;
    }
    .quizchange{
         margin-right:0;
         margin-bottom:20px;
    }
    .score{
    bottom: -45px;
    right: 3px;
}
.totalquiz{
       width: 100%;
    display: flex;
    flex-direction: column-reverse;
}
.finalall{
    width:initial;
}
.verbsnouns{
bottom:initial;
    right: 127px;

}
    .studyhide{
    display:none!important;
    }
.stbtn{
padding-top:4px;
}
    input.chkbox[type="checkbox"] {
    margin: 0 4px 0 4px;
    width: 56px;
    height: 30px;
	min-width: 56px;
    }
    .chkbox:before {

    height: 24px;

    width: 24px;

    }
    .chkbox:checked:before {
    left: 26px;
    }
    input.markbtn[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input.markbtn[type="checkbox"]:checked {
	;
}
.markbtn:before {
     width: 30px;
     font-size:20px;
     text-align:center;
        content: "\2606";
   position: absolute;
   visibility:visible;
}
.markbtn:checked:before {
         width: 30px;
           font-size:20px;
     text-align:center;
    content: "\2605";
   position: absolute;
  color: #849e71
}
    }
    @media only screen and (max-width: 850px) {
        .searchboxc{

    
  width:48%;
}
.btn{
    width:100%;
    display:flex;
    justify-content:center;
}
}
@media only screen and (max-width: 767px) {
	.logo,.john1text {
		font-size:.7em;
		height: 75px;
	}
	.jp_wrap{
		width: 50%;
	}
	body {
		margin: 175px auto 0 auto;
	}
	#studybuttons{
    width:96%;
     right:2%;
justify-content: center;
}
.notes{
 
     font-size: 14px;
    width: 20px;
    height: 20px;
   
}
.notes .fa-times.closenotes{
       
    font-size: 13px;
    width:20px;
    height:20px;
}
}
@media only screen and (max-width: 600px) {
.root{
    width:100%;
    flex:initial;
}
 
    /*.hanbox{*/
    /*    width:50%;*/
    /*}*/
    }
@media only screen and (max-width: 545px) {
	.jp_wrap{
		width: 100%;
	}
	        .searchboxc{
    width:90%;
  
}
}