/* fonts */
body p {
    
    font-size: 14px;
    font-family: arial, helvetica, "&#65325;&#65331; &#65328;&#12468;&#12471;&#12483;&#12463;", "&#65325;&#65331; &#12468;&#12471;&#12483;&#12463;", Osaka, "MS PGothic", sans-serif;
}

.pkp_structure_main p {
    font-size: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin: 12px;
}


.pkp_structure_main h3 {
    
    margin-top: 40px;
    margin-bottom: 10px;
    font-family: arial, helvetica, "&#65325;&#65331; &#65328;&#12468;&#12471;&#12483;&#12463;", "&#65325;&#65331; &#12468;&#12471;&#12483;&#12463;", Osaka, "MS PGothic", sans-serif;
    color: green;
    font-weight: 600;
    padding-top: 10px;
}

.pkp_structure_main h2 {
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 5px;
font-family: arial, helvetica, "&#65325;&#65331; &#65328;&#12468;&#12471;&#12483;&#12463;", "&#65325;&#65331; &#12468;&#12471;&#12483;&#12463;", Osaka, "MS PGothic", sans-serif;
   padding-top: 10px;
    color: #2e58a6;
}

.pkp_structure_main h1 {
    font-family: 'Play', sans-serif;
    padding-left: 18px;
    padding-right: 18px;
    font-weight: 600;
    color: grey;
    text-align: justify;
    margin-bottom: 1px;
    margin-top: 7px;
}

h1.page_title{
padding-top: 7px;
}


.pkp_structure_main h2.subtitle {
    padding-left: 18px;
    padding-right: 18px;
    text-align: justify;
font-size: 16px;
border-bottom: 0.5px solid #e6e6e6;
margin-bottom: 1px;
}

/* article text*/

div.panel-body {
    padding: 5;
}

div.item.citation_formats div#citationOutput {
    padding: 5px;
}
/* Sticky
* inarticle
* navigation */

.fornav {
	float: right;
}

ul.nav.nav-tabs.bs-docs-sidenav > li {
float: none;
	
}

ul.nav.nav-tabs.bs-docs-sidenav {

}

.affix-top {
	margin-top: 0;
	margin-left: 0;
    padding-bottom: 5px;
    padding-left: 0px;
padding-right: 0px;
    background-color: white;
    width: 100%;
color: #5a5a5a;

    
}


nav.bs-docs-sidebar.affix {
	margin-top: 0;
        margin-left: 0;
	top: 0;
	padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    width: 100%;
    color: #5a5a5a;
    right: 60px;
    z-index: 0;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
max-width: 346;
    
}

nav.bs-docs-sidebar.affix a {
color: #5a5a5a;
line-height: 1;
    font-size: 14px;
}

.affix-bottom {
	
    position: relative;
    bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    width: 105.2%;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
color: #5a5a5a;

}

.affix-bottom a {
color: #5a5a5a;
}



nav#myAffix > ul a {
    /* font-family: 'Arimo', sans-serif; */
    font-family: 'Play', sans-serif;
max-width: 346px;
max-width: 346;
}

.nav-tabs{
    border-bottom: 0;

}


nav#myAffix.nav.bs-docs-sidebar.col-lg-4.col-md-4.affix {
max-width: 344;
max-width: 344px;
}



@media (max-width:991px) {
	.fornav {
		display: none;
	}

.container-fluid {
	margin-bottom: 100px;
}
}


nav > ul > li > a.H2 {
	color: #767676;
	padding-bottom: 5px;
	padding-top: 5px;
	font-family: 'Helvetica Neue';
	font-size: 14px;
	margin: 0;
}
.nav-tabs>li.active>a.H2, .nav-tabs>li.active>a.H2:focus, .nav-tabs>li.active>a.H2:hover {
	border: 0;
	border-left: 1px solid #563d7c;
	color: #563d7c;
	font-size: 16px;
	cursor: pointer;
	background-color: white;
	border-radius: 0;
}





ul#navblock.nav.nav-tabs.bs-docs-sidenav > li > a:hover {
	background-color: white;
	border: 0;
	border-left: 1px solid #5a5a5a;
	border-radius: 0;

}

ul.dates {
	margin-bottom: 30px;
}

h3#abstr0 {
	margin-top: 0;
}

/* Pop-ups */

a.ref-tip {
	cursor: pointer;
	white-space: nowrap;
color: green;
}

a.btn.btn-info {
	padding: 0 2px 0 2px;
	border: 0;
	    background: rgba(0,0,0,0.1);
	

}
a.btn.btn-info {
    background: rgba(255,255,255,.15);
    font-size: smaller;
    color: #3b4ba3;
    border-bottom: 1px solid rgba(90, 90, 90, 0.4);
    cursor: pointer;

}

div.article-text {
	line-height: 1.6;
}


/* Tables and Figures */

a.reftable, a.reffigure, a.refvideo {
    background: rgba(145, 187, 4, 0.15);
    border-bottom: 1px solid rgba(145, 187, 4, 0.6);
    color: #495A11;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    text-align: center;
    align: center;
    border-radius: 10px;
box-shadow: 0 0 5px rgb(255, 255, 255);
    
   

}

table.table.table-striped.table-bordered th {
    text-align: center;
    color: #333;
    vertical-align: middle;
    margin: 0px auto;  
    text-align: center;
    align: center; 

}

table.table.table-striped.table-bordered {
        overflow-x: auto;
	margin: 0px auto; 
        text-align: center;
        align: center;  
}

table:hover {background-color: #f5f5f5}

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
text-align: center;
align: center;
padding-top: 5px;
padding-bottom: 5px;

}

div.figure-wrap {
    font-family: 'Play', sans-serif;
    margin-top: 25px;
    margin-bottom: 25px;
border-radius: 10px;

   
}
    
text-align: center;
align: center;
padding-top: 5px;
padding-bottom: 5px;
 border-radius: 10px;
     border-top: 2px solid #2e58a6;
    border-bottom: 2px solid #2e58a6;
box-shadow: 0 0 5px rgb(255, 255, 255);

}


div.figure-wrap:a {
transform: scale(1.50, 1.50);
background: white;
text-align: center;
align: center;
border-radius: 10px;
   border-top: 3px solid #708090;
    border-bottom: 3px solid #708090;  

box-shadow: 0 0 5px rgb(255, 255, 255);
}

div.figure-wrap p {
    font-family: 'Play', sans-serif;
text-align: center;
align: center;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
 box-shadow: 0 0 5px rgb(255, 255, 255);   

   
}

.tab-pane.fade.active.in > .figure-wrap {
	
text-align: center;
align: center;
}

@media (max-width: 767px) {

table.table.table-striped.table-bordered {
    overflow-x: auto;
    display: block;
text-align: center;
align: center;
box-shadow: 0 0 5px rgb(255, 255, 255);
}
}



td {
    color: #333;
text-align: center;
align: center;
}

th {

 font-weight: 700;
}



table {
    color: #333;
text-align: center;
align: center;
box-shadow: 0 0 5px rgb(255, 255, 255);
}

div.article-text .figure-wrap {
	padding: 5px;
	box-shadow: 0 0 5px rgb(255, 255, 255);
text-align: center;
align: center;
        margin-top: 25px;
       margin-bottom: 25px;
 }

#figuresdata .figure-wrap {
text-align: center;
align: center;
box-shadow: 0 0 5px rgb(255, 255, 255);
 
}

div.article-text .table-wrap {
	padding: 5px;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
        text-align: center;
        align: center;
        box-shadow: 0 0 5px rgb(255, 255, 255);
}

#tablesdata .table-wrap {
text-align: center;
align: center;
box-shadow: 0 0 5px rgb(255, 255, 255);
}

/* Styling citations */

span.ref-full > a.doi{
    background: rgba(11, 157, 217, 0.075);
    color: #1B6685;
    border-bottom: 1px solid rgba(11, 157, 217, 0.4);
    padding-right: 5px;
    padding-left: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
    margin-right: 7px;
font-style: normal;
font-size: 12px;
}
span.ref-full > a.doi:hover{
    background: #1B6685;
    color: #fff;
    text-decoration: none;
}


caption.table-title {
font-weight: 700;
}


span.ref-full > a.pmid {
    background: rgba(211, 211, 211, 0.075);
    color: #808080;
    border-bottom: 1px solid rgb(128,128,128);
    padding-right: 5px;
    padding-left: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
    margin-right: 7px;
font-style: normal;
font-size: 12px;
}
span.ref-full > a.pmid:hover {
    background: #808080;
    color: #fff;
    text-decoration: none;
}





span.ref-full > a.url {
    backgjavascript:document.forms['EditForm'].screen.value=3;%20%20document.forms['EditForm'].submit();round: rgba(145, 187, 4, 0.15);
    color: #839c53;
    border-bottom: 1px solid rgba(145, 187, 4, 0.6);
    padding-right: 5px;
    padding-left: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
    margin-right: 7px;
font-style: normal;
font-size: 12px;
}
span.ref-full > a.url:hover {
    background: #839c53;
    color: #fff;
    text-decoration: none;
}

ol.references {
    padding-left: 0;
}

li.ref {
	margin-bottom: 10px;
}

span.bib {
	display: block;
	margin-left: 35px;
}

span.ref-title {
	display: block;
	
	font-size: 120%;

}

span.ref-auth {
	display: block;
	font-size: 100%;
	
}

span.ref-source {
	display: block;
	font-size: 90%;
	color: rgba(77, 89, 102, 0.8);
	
}

span.ref-full {
	display: block;
	font-style: italic;
}

a.fulltext {
	color: rgb(86, 61, 124);
}

body {
   counter-reset: item;
 }
 ol.references > li.ref {
   list-style: none;
   padding-left: 0;
 }
 li.ref {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li.ref:before {
   margin-right: 10px;
   content: counter(item);
   background: rgba(86, 61, 124, 0.4);
   border-radius: 100%;
   color: white;
   width: 1.5em;
   text-align: center;
   display: inline-block;
   float: left;
 }



nav > ul > li > a.H2 {
	color: #767676;
	padding-bottom: 5px;
	padding-top: 5px;
	font-family: 'Helvetica Neue';
	font-size: 14px;
	margin: 0;
}
.nav-tabs>li.active>a.H2, .nav-tabs>li.active>a.H2:focus, .nav-tabs>li.active>a.H2:hover {
	border: 0;
	border-left: 1px solid #5a5a5a;
	color: black;
	font-size: 16px;
	cursor: pointer;
        cursor: hand;
	background-color: white;
	border-radius: 0;

}


/* For Tablets abd Mobile */
/**************************************************************************/
/* Collapsible accordion panels*/
@media (min-width: 1100px) and (max-width: 1300px) {
div.grid-cell {
    padding: 10px;
    margin: 2% 6% 6% 6%;
}

}

@media (min-width: 992px) and (max-width: 1099px) {
div.grid-cell {
    padding: 10px;
    margin: 2% 2% 6% 2%;
}
}

@media (max-width: 991px) {

h2.title {
	font-family: arial;
         text-align: justify;
font: justify;
}

div.panel {
	margin-top: 20px;
	cursor: pointer;
}

.forcontent {
	border-right: none;
}

}

@media (min-width: 768px) and (max-width: 991px) {

.article-content {
	padding-left: 0;
}

div.grid-cell {
    padding: 10px;
    margin: 2% 6% 2% 6%;
}

div.panel-body {
	padding-left: 10px;
}


div.article-sections > div.panel.panel-default {
	margin-top: 12px;
}
}


@media (max-width: 767px) {
.article-content {
	padding-left: 0;
}

.forcontent {
	padding: 0 5px 0 5px;
}
.grid-cell {
    padding: 0;
    margin: 0;
}

div.panel-body {
	padding: 5px;
	padding-left: 10px;
}

div.article-sections > div.panel.panel-default {
	margin-top: 12px;
}

}

/* Floating Main Menu */

@media (max-width: 767px) {

.navwraper.col-lg-7.col-md-7.col-sm-12.col-xs-12 {
	position: relative;
	min-height: 40px;

}

nav.navigational-tabs {
    z-index: 2;
    width: 100%;
    background-color: white;

}
.panel {
	border-right: 0;
	border-left: 0;

}
div.section {
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
}

/* Styling tabs */
ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    padding: 0;
    border: 0;
    border-radius: 0;
   /* margin-right: -4px; */ <!-- for removing shadow -->



}

ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header > li:first-child {
    border-left: 1px solid #c5c5c5;
    margin-right: 2px;

}

.ui-widget-header {
    background: #e6e6e6;

}

div#article_page_tabs {
    margin: 0;
    padding: 0;
    border: 0;


}

div.before_title {
    background: linear-gradient(to bottom, #f6f6f6, #fff);
    -webkit-box-shadow: 0px -3px 6px -3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px -3px 6px -3px rgba(0,0,0,0.5);
    box-shadow: 0px -3px 6px -3px rgba(0,0,0,0.5);
}

div.before_title > p {
    padding: 10px 0 0 15px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 11px;
color: #5a5a5a;
}

/* styling right panel */
div#navwrap div.panel-body {
    padding: 10px;
}

/* citation outputformat */
div.panel.panel-default.output {
    border-color: white;
}
div.panel.panel-default.output > div.panel-heading {
    border: 1px solid #ddd;
}
@media (max-width: 991px) {
    div.panel.panel-default.output > div.panel-body {
        padding-left: 0;
    }
}

/* right panel issue */
div.item.issue div.panel-body a.title {
    background: rgba(11, 157, 217, 0.075);
    color: #1B6685;
    border-bottom: 1px solid rgba(11, 157, 217, 0.4);
    cursor: pointer;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

div.item.issue div.panel-body a.title:hover {
    background: #1B6685;
    color: #fff;
    text-decoration: none;
}

/* authors */
ul.item.authors {
    padding-left: 18px;
    padding-right: 18px;
color: #0a4989;
}

/* right navigational menu*/
div.fornav {
    position: relative;
}











.obj_article_details .abstract {
    text-align: justify;
}

#main {
    background-color: white;
background: white;
 
    }

 #header {
      position: fixed;
    }
    
    #content {
      margin-top: 100px;
    }

.pkp_structure_footer_wrapper{
  background: #2b2b2b;
  border-bottom: #5a5a5a;
}

body.pkp_page_article.pkp_op_view {
    background: #f6f6f6;
    text-align: justify;
}

div.row > ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    background-color: #fff;
}

body.pkp_page_article.pkp_op_view div.pkp_structure_content.has_sidebar {
    background-color: #fff;
    text-align: justify;
}

div.page.page_article {
    background-color: white;
    
    padding: 20px;
    box-shadow: 0 40px 5px rgb(255, 255, 255);
}

div.fornav {
    background-color: white;
    border-radius: 5px;
    border-top-left-radius: 0;
    padding: 20px;
    margin-top: 34px;
box-shadow: 0 0 5px rgb(193, 193, 193);
}



    background-image: linear-gradient(to bottom,#f6f6f6 0,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
}

.cmp_manuscript_button, .block_make_submission a, .obj_galley_link {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    background: #f8f8f8;
    color: #5a5a5a;
    border: #5a5a5a;
}

nav.bs-docs-sidebar.affix {
    margin-top: 0;
    margin-left: 0;
    top: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    width: 100%;
    color: #5a5a5a;
    right: 60px;
    z-index: 2;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(255, 255, 255);
    max-width: 346;
}

.affix-bottom {
    position: relative;
    bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    width: 105.2%;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(255, 255, 255);
    color: #5a5a5a;
}

.panel-default>.panel-heading {
    font-weight: 600;
}

#divLargerImage
    {
        display: none;
        width: 250px;
        height: 250px;
        position: absolute;
        top: 35%;
        left: 35%;
        z-index: 99;
    }

    #divOverlay
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #CCC;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        z-index: 98;
    }






/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: zoom-in;
    transition: 0.3s;
    max-width: 250px;
}

#myImg:hover {opacity: 0.7;}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    padding: 70px; /* Location of the box */
    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.9); /* Black w/ opacity */
}





/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    left: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}



div.figure-wrap {
    border: 1px strong;
    border-color: #999;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;  
    border-right: 2px solid #999; 
    border-left: 2px solid #999; 
 
   }
