/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ---------------------------------------------------------------------------------- */
/* Hide All Page Titles and Post Titles */
/* .entry-title {
	display: none;
}
*/

/* Inline Styling */
blockquote {
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
	text-align: justify;
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

p {
	text-align: justify;
}

p.read-more-container {
	margin-top: 1em;
	text-align: right;
}

/* Code Block Styling */
code {
    display: inline-flex;
    padding: 6px 4px;
    font: SConsolas,Liberation Mono,Menlo,monospace !important;
    line-height: normal !important;
    color: #444d56 !important;
    background-color: #e8f7fd !important;
    border: 2px solid #0ABAB5;
    border-radius: 8px;
    box-shadow: inset 0 -1px 0;
  	overflow-x: auto;
  	max-width: 100%;
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  background-color: transparent !important;
}


/* ---------------------------------------------------------------------------------- */
/* Headings */

.entry-content h1 {
	text-align: center !important;
    color:#222;
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}


.entry-content h1:after, .entry-content h1:before {
  content: " ";
  display: block;
  border-bottom: 1px solid #c50000;
  border-top: 1px solid #c50000;
  height: 5px;
  background-color: transparent;
  max-width: 80%
}

.entry-content h2 {
  text-align: center !important;
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  grid-template-rows: 16px 0!important;
  grid-gap: 22px!important;
}

.entry-content h2:after, .entry-content h2:before {
  content: " ";
  display: block;
  border-bottom: 2px solid #ccc;
  background-color: transparent;
  max-width: 80%
}


.entry-content h3 {
  padding-bottom: 15px;
  position: relative;
}
.entry-content h3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #111;
}
.entry-content h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  max-width: 100%
  background-color: #333;
}


/* ---------------------------------------------------------------------------------- */

body ul li ol {
	margin-top: 0em;
	margin-bottom: 1em;
}

/* body ol {
	margin-top: 0em;
	margin-bottom: 0.5em;
} */

/* ---------------------------------------------------------------------------------- */
/* Center Page Titles */
.page .entry-header {
      text-align: center;
}

.site-content .entry-header {
      text-align: center;
}
.site-content .entry-meta {
      text-align: right;
}

.inside-right-sidebar {
	
}



/* ---------------------------------------------------------------------------------- */
/* Login Page */
.login form loginform {
  padding:  40px 30px; 
  background:  #fefefe; 
  display:  flex; 
  flex-direction:  column;
  align-items:  flex-start; 
  padding-bottom:  20px; 
  width:  300px; 
}
/* ---------------------------------------------------------------------------------- */
/* Login Page */

/* aside#toc-widget-8.widget.inner-padding.toc_widget {
	overflow-y: scroll;
	overflow-x: auto;
	position: fixed;
    height: 50%;
	width: 20%;
	background-color: transparent;
	background-image: None;
	margin-top: 0%;
	font-size: 90%

/* ---------------------------------------------------------------------------------- */
/* Table Container Effect (Start)*/
.table-container {
	overflow-x: auto;
}

.table-container > table {
	margin-left: 0em;
}
.table-container > table > * > tr > th:first-child,
.table-container > table > * > tr > td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: #0ABAB5;
}

.table-container > table > * > tr > th,
.table-container > table > * > tr > td {
  /* Without this, if a cell wraps onto two lines, the first column
   * will look bad, and may need padding. */
	white-space: nowrap;
}

/* Table Container Effect (End)*/
/* ---------------------------------------------------------------------------------- */


/*—Inline Text Highlight–*/
.border-highlight{
    border:2px dashed #0abab5;  
    padding:0.03em 0.25em;
}

mark{
    background-color: rgba(159,226,191,0.3);
}
/* ---------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------- */
/* Hover Table Effect. Usage: <table class="table-hover"> */

.table-hover tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.075);
}

.table-active,
.table-active > th,
.table-active > td {
	background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
	background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
	background-color: rgba(0, 0, 0, 0.075);
}

.table-success,
.table-success > th,
.table-success > td {
	background-color: #dff0d8;
}

.table-hover .table-success:hover {
	background-color: #d0e9c6;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
	background-color: #d0e9c6;
}

.table-info,
.table-info > th,
.table-info > td {
	background-color: #d9edf7;
}

.table-hover .table-info:hover {
	background-color: #c4e3f3;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
	background-color: #c4e3f3;
}

.table-warning,
.table-warning > th,
.table-warning > td {
	background-color: #fcf8e3;
}

.table-hover .table-warning:hover {
	background-color: #faf2cc;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
	background-color: #faf2cc;
}

.table-danger,
.table-danger > th,
.table-danger > td {
	background-color: #f2dede;
}

.table-hover .table-danger:hover {
	background-color: #ebcccc;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
	background-color: #ebcccc;
}
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Login Page */


/* ---------------------------------------------------------------------------------- */
/* Back-to-Top Button */
.topbutton {
	height:100px;
	width:100px;
	position:fixed;
	right:5px;
	bottom:5px;
    Z-index:1;
    background-image:url("https://files.phli.win/PNG/Elements/Profi_icons_11%403x.png");
    background-repeat:no-repeat;
    display:none;
}
/* ---------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------- */
/* Button Effects */
/* <div class="btn from-top"> */
/* <div class="btn from-left"> */
/* <div class="btn from-right"> */
/* <div class="btn from-center"> */
/* <div class="btn from-bottom"> */

.btn {		
	position: relative;	
	padding: 1.4rem 4.2rem;
	padding-right: 3.1rem;
	font-size: 1.4rem;
	color: var(--inv);
	letter-spacing: 1.1rem;
	text-transform: uppercase;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
	cursor: pointer;
	user-select: none;
}

.btn:before, .btn:after {
	content: '';
	position: absolute;	
	transition: inherit;
	z-index: -1;
}

.btn:hover {
	color: var(--def);
	transition-delay: .5s;
}

.btn:hover:before {
	transition-delay: 0s;
}

.btn:hover:after {
	background: var(--inv);
	transition-delay: .35s;
}

/* From Top */

.from-top:before, 
.from-top:after {
	left: 0;
	height: 0;
	width: 100%;
}

.from-top:before {
	bottom: 0;	
	border: 1px solid var(--inv);
	border-top: 0;
	border-bottom: 0;
}

.from-top:after {
	top: 0;
	height: 0;
}

.from-top:hover:before,
.from-top:hover:after {
	height: 100%;
}

/* From Left */

.from-left:before, 
.from-left:after {
	top: 0;
	width: 0;
	height: 100%;
}

.from-left:before {
	right: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;	
}

.from-left:after {
	left: 0;
}

.from-left:hover:before,
.from-left:hover:after {
	width: 100%;
}

/* From Right */

.from-right:before, 
.from-right:after {
	top: 0;
	width: 0;
	height: 100%;
}

.from-right:before {
	left: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;	
}

.from-right:after {
	right: 0;
}

.from-right:hover:before,
.from-right:hover:after {
	width: 100%;
}

/* From center */

.from-center:before {
	top: 0;
	left: 50%;
	height: 100%;
	width: 0;
	border: 1px solid var(--inv);
	border-left: 0;
	border-right: 0;
}

.from-center:after {
	bottom: 0;
	left: 0;
	height: 0;
	width: 100%;
	background: var(--inv);
}

.from-center:hover:before {
	left: 0;
	width: 100%;
}

.from-center:hover:after {
	top: 0;
	height: 100%;
}

/* From Bottom */

.from-bottom:before, 
.from-bottom:after {
	left: 0;
	height: 0;
	width: 100%;
}

.from-bottom:before {
	top: 0;	
	border: 1px solid var(--inv);
	border-top: 0;
	border-bottom: 0;
}

.from-bottom:after {
	bottom: 0;
	height: 0;
}

.from-bottom:hover:before,
.from-bottom:hover:after {
	height: 100%;
}
/* ---------------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------------- */
/* Mathjax (not working) */
mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
}
/* ---------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------- */
/* Card Hover Effect */
.card-blue-hover {
  transition: all 0.25s ease-in;
  border-bottom: 5px solid transparent;
}
.card-blue-hover:hover {
  transform: translateY(-5px);
  border: none;
  border-bottom: 5px solid #2196fe;
}
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Read More Button */
a.read-more.button {
	background-image: linear-gradient(to right, #283048 0%, #859398  51%, #283048  100%);
	margin: 2px;
	margin-top: 5px;
	padding: 8px 10px;
	text-align: center;
	font-size: 13px !important;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: 0 0 20px #eee;
	border-radius: 8px;
	display: inline;
}

a.read-more.button:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}
/* ---------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------- */
/*  */
.rcp {
  background-color: #1F4172;
  position: relative;
  height: 50vh;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}

.rcp_title {
  color: #fff;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  z-index: 1;
}

.cube {
  position: absolute;
  top: 30vh;
  left: 30vw;
  width: 10px;
  height: 10px;
  border: solid 1px #176B87;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
}
.cube:nth-child(2n) {
  border-color: #176B87;
}
.cube:nth-child(2) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  top: 20vh;
  left: 20vw;

}
.cube:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  top: 50vh;
  left: 50vw;

}
.cube:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  top: 10vh;
  left: 10vw;

}
.cube:nth-child(5) {
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  top: 40vh;
  left: 10vw;
}
.cube:nth-child(6) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  top: 20vh;
  left: 50vw;

}

@-webkit-keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Mathjax Horizontal Scrollbar */
/* mjx-container {
  display: inline;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 400px;
}
/*  max-width: 100%; */
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Scrollable Formula */
/*.formula {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 400px;
}
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */
mjx-container {
  display: inline;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 400px;
}
/*  max-width: 100%; */
/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Scrollable Formula */
.formula {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 400px;
}

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/* Mermaid Diagrams */

div.mermaid,
pre.mermaid {
	overflow: auto;
	max-width: 100%;
}

div.mermaid svg,
pre.mermaid svg{
	height: auto;
	width: 125% !important;
}

div.enlarged-mermaid svg,
pre.enlarged-mermaid svg {
  width: 400% !important; /* Adjust the width as needed */
}

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */
/* Wrapper div to allow horizontal scroll */
.responsive-scroll-table {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid #ddd; /* optional visual aid */
  -webkit-overflow-scrolling: touch;
}

/* Table styles */
.responsive-scroll-table table {
  border-collapse: collapse;
  table-layout: fixed; /* fixed layout */
  width: auto;         /* let table grow wider than container */
  min-width: 1500px;    /* wider than most screen widths to force scroll */
}

/* Table cells */
.responsive-scroll-table th,
.responsive-scroll-table td {
  border: 1px solid #ccc;
  padding: 8px;
  min-width: 200px;       /* minimum cell width */
  max-width: 300px;       /* max cell width */
  word-break: break-word;
  white-space: normal;
}



/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------- */
/*  */

/* ---------------------------------------------------------------------------------- */