@media (max-width: 768px){
pre{
    background: #efefef !important;
    padding: 0.5em;
    font-size: 80%;
   }
}

@media (min-width: 769px){
pre{
    background: #efefef !important;
    padding: 0.5em;
    font-size: 80%;
   }
}


@media (max-width: 768px){
.navbar {
  justify-content: space-between;
  padding: 0.1rem 0.1rem;
  margin-top: -12px;
}

.flex-column {
    flex-direction: unset !important;
}
}

.td-sidebar-nav .td-sidebar-link {
    display: block;
    padding-bottom: 0.8rem;
    line-height: 1.2em !important;
}

.td-sidebar-nav__section ul {
    padding-right: 0.1rem !important;
}

.td-sidebar-nav__section-title{
  padding-right: 0.1rem !important;
}


.light {
    color: #dedede !important;
}

.icon{
  width: 120px !important;
  height:  120px !important;
  border: None !important;
}

.navbar-brand {
    font-family: Signika;
}

.prev-next-link {
  font-size: 0.9rem;
  float: right;
}


.alt-link {
  font-size: 0.9rem;
  margin-left: 0.5em;
  color: #dedede;
  align-items: baseline;
}

.input-group{
  margin-right: 1em;
  align-items: baseline;
  color: #dedede;
  }

input-group-addon{
  margin-right: 1em;
  align-items: baseline;
  }




@media (max-width: 768px){
body {
  max-width: $portal-width;
  line-height: 1.5;
  font-size: 0.9rem;
}
h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

.td-doc-content .lead {
  font-size: 0.9rem;
  line-height: 140%;
  margin-bottom: 6pt !important;
}

p {
    margin-top: 0;
    margin-bottom: 0.7rem;
}

.tags-href{
  background-color: #efefef;
  padding: 1px 10px 2px 10px;
  margin-right: 2px;
  border-radius: 5px;
  margin-left:17px;
  white-space: nowrap;
  font-size: 10pt;
}

.tags-ul {
  margin-left: 25px;
  text-indent:  -11px;,con .
  padding-top: -5px;
  margin-top: -12px;
  line-height: 1.2em;
}

.card {
  margin-right: -15px;
  margin-left: -15px;
}

.td-sidebar-nav__section-title{
  margin-left: 40px !important;
}

.td-sidebar-nav__section  ul {
    padding-left: 10px;
    margin: 15px;
    line-height: 80%;
}

.td-sidebar-nav .td-sidebar-link {
    display: block;
    padding-bottom: -0.375rem;
    line-height: 1.2em !important;
}

.td-main li{
margin-left:-18px;
margin-bottom: 4px;
}



.td-sidebar__search {
  margin-right: -30px;
  margin-left: -15px;
  margin-bottom: -15px;
}


.minus15lr{
    margin-right: -10px !important;
    margin-left: -15px !important;
}

.con .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 10px;
    margin-left: 0px;
}

}


hr {
  border:none;
  /*border-top:1px dotted $yellow;*/
  border-top:1px dotted #ffcc00;
  color:#fff;
  background-color:#fff;
  height:-1px;
  width:100%;
  margin-top: -5px;
}




.btn-download {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  margin-left: 0.5em;
  text-decoration: underline;
  cursor: pointer;
}

.btn-download:hover{
  color: #FFA630;
}

.box{
  background: #efefef;
  padding: 1em 1em 1em 1em;
}

youtube-o{
  width: 100% !important;
  background-color: red;
}



/*Colour things*/




.blog-list{
  font-size: 90%;
}


/*Font styling*/


.lead{
  font-weight: 900;
  line-height: 1.3em;
  color: #999999;
  margin-bottom: 1.3em;
}



/*Blurring and Fog*/

.fog{
  /*backdrop-filter: blur(20px);*/
  /*background-color: rgba(255, 255, 255, 0.3);*/
  background:linear-gradient(to top, rgba(0,0,0,0) 80%, rgba(0,0,0,1)), url('your_url'); padding-bottom: 0;
  padding-top: 2rem;
  border-width: 10px;
}

.blur{
  backdrop-filter: blur(4px);
}


/*Image styling*/

img{
  border: 1px solid #dedede;
  border-radius: 3px;
  max-width: 100%;
}


svg-image{
  width: 100%;
}

svg {
    overflow: hidden;
    vertical-align: middle;
    /*margin-bottom: 1rem;*/
}

.svg-size{
    width: var(--width);
    vertical-align: middle;
}

@media (max-width: 768px){
.col-12 img{
  width: 100%;
}
}


@media (min-width: 768px){
.col-lg-4 img{
  width: 100%;
  max-width:250px;
}
}

@media (max-width: 500px){
.col-lg-4 img{
  width: 100%;
  max-width:230px;
}
}

.col-lg-4 img {
    width: 100%;
    max-width: 250px;
    display: inline-block;
}

.col-lg-4 figure{
	display: inline-block;
}

.col-12 figure{
text-align: center;
}

.img-on-cover {
  text-align: center;
  width: 100%;
}


.centre_image{
}


.float-figure{
  width: var(--width);
  float: var(--float);
  margin-left: 1em;
  margin-top: 0.5em;
  margin-bottom: auto;
}


@media (max-width: 1000px){
.float-figure{
  margin-left: 1em;
  float: right;
  width: 40%;
}
}

@media (max-width: 768px){
.float-figure{
  margin-left: 1em;
  float: right;
  width: 40%;
}
}

@media (max-width: 500px){
.float-figure{
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1em;
  float: none;
  width: 100%;
}
}


col-lg-4 .figcaption{
  display: none;
}


.figcaption_inside {
  caption-side: bottom;
  font-family: 'Pragati Narrow', sans-serif;
  width: 100%;
  font-size: 100%;
  margin-left: 8px;
  margin-top: 2px;
  margin-right: 8px;
  line-height: 1em;
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  text-align: left;
  }


.figcaption {
  caption-side: bottom;
  font-family: 'Pragati Narrow', sans-serif;
  line-height: 1.3em;
  width: 100%;
  font-size: 100%;
  }



.figure img {
  display: inline-block;
  width: 100%;
}

.featured-image-o{
  display: inline-block;
  float:left;
  margin-right: 10px;
  margin-top: 5px;
}

.featured-image-b{
  margin-bottom: 10px;
}



/*Alignment things*/

.alignright {
  display: inline-block;
  float:right;
  width:20%;
}

.alignleft {
  display: inline-block;
  float:left;
  width:20%;
}


/*Buttons*/

.olex2button{
  background-color: green;
  color: white;
  padding: 1px 3px;
}  

.olex2command{
  background-color: #ffcc00; /* Yellow */
  color: black;
  padding: 1px 4px;
} 


.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.previous-button {
  float: left;
  
}
.next-button {
  float: right;
  color: red;
}

.buttons{
  width: 100%;
}


.button-link {
    display: block;
}

.-bg-orange {
  color: #333333;
}  

.navbar-brand {
  font-family: Signika;
  margin-top: 10px;
}

.navbar-logo-text{
  font-weight: 600;
  font-size: 18pt;
  align-content: center;
  font-family: Signika;
}

.td-cover-block {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-repeat: no-repeat;
  background-position: 1% 0;
  background-size: cover; }
  
  .td-cover-block > .byline {
    position: absolute;
    bottom: 2px;
    right: 4px; }
  

.ransparent {
  padding-top: 2%;
  padding-left: 3px;
  padding-right: 3px;
  font-weight: 400;
  border-radius: 20px;
  background-color: rgba(255,255,255,0.8);
}


.icon-home:before {
  content: "\e910";
}


.o-icon{
  width: 24px !important;
  padding: 0 0 0 0;
  margin-right: 4px;
  margin-left: 1px !important;
  border-style: none;
  float: none !important;
  display: inline-block;
}

.o-big-icon{
  padding: 0 0 0 0;
  margin-right: 44px;
  border-style: none;
}



.o-a{
 font-weight: 700;
}

.o-b{
 font-style: italic;
}

.o-c{
 padding-left: 1rem;
 padding-top: -5px;

}


.o-box{
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: #eee;
  border-left: 5px;
  display: flow-root;
}  

.box-d{
  border-left: 8px solid #dedede;
}

.box-olex2{
  border-left: 8px solid green;
}

.box-cryst{
  border-left: 8px solid orange;
}

.box-err{
  border-left: 8px solid red;
}



@media (min-width: 768px){
.td-navbar-cover .nav-link {
    text-shadow: 3px 1px 2px #ff3F4C;
    color: black;
}
}

.tags-href{
  background-color: #efefef;
  padding: 1px 10px 1px 10px;
  margin-right: 2px;
  border-radius: 5px;
  white-space: nowrap;
}

.tags-li {
    display:inline;
    margin-bottom:15px;
    padding-top:5px;

}

.tags-ul {
    padding-left:0px;
    padding-top:5px;
    line-height: 170%;
}



shadow{
  text-shadow: white 10px 0 10px;
}

.sidebar-tags{
	margin-left: 1em;
}


.td-cover-logo {
  border: none;
  margin-bottom: 0.8em;
  margin-right: 0;
  width: 80px !important;
  }
  
.td-doc-content table td, table tc {
    padding: .75em .5em;
    text-align: left;
    border-right: 1px solid #888;
    vertical-align: top;
    }

td:first-child {
  font-weight: bold
}

.td-doc-content th {
    color: #888888;
    font-weight: 600;
    text-align: left;
    border-right: 1px solid #888;
    padding: .375em .5em;
    display: table-cell;
    vertical-align: inherit;
}

.td-doc-content tr:nth-child(even) {
    background-color: #efefef;
}

.td-doc-content table {
    width: 100%;
    margin-bottom: 2em;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1em;
    border: 2px solid #eee;
}


kbd{
border:1px solid gray;
background-color: #efefef;
color: #333;
font-size:0.75em;
margin-bottom:1.1em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
vertical-align: text-top;
}



/*The following should all be in _contents.scss. They work there locally, but not when deployed

$yellow: #ffcc00
$primary: #30638E !default;
$primary-light: lighten($primary, 75%) !default;
$secondary: #FFA630 !default;
$dark: #403F4C !default;
$light: #DEDEDE !default;

*/

/*Next - Previous Buttons*/
.o-nav{
border-radius: 2px;
border-width: 1px;
border-style: solid;
text-align: center;
width: 100px;
padding: 1px 1px 1px 1px;
}

.back:hover {
background-color: #ddd;
}

.next:hover {
float:right;
background-color: #ddd;
}


.back {
float:left;
/*border-color: #ffcc00; /* Yellow */
border-color: #ffcc00;
margin-right: 4px;
cursor: pointer;
}

.next {
float:right;
border-color: #ffcc00;
cursor: pointer;
}


.td-box--dark p > a {
  /*color: $secondary;*/
  color: #FFA630;
}

.td-box--secondary p > a {
    /*color: $primary;*/
    color: #30638E;
}

.dark{
  /*color: $dark;*/
  color: #403F4C;
}

.light{
  /*color: $light;*/
  color: #dedede;
}

.quoted{
  /*color: $secondary;*/
  color: #FFA630;
}


/*The header of all articles in the main Olex2 documentation*/

.td-doc-content h1{
  font-weight: 500;
  /*color: $secondary;*/
  color: #FFA630;
 }

.td-list-content h1{
  font-weight: 500;
  /*color: $secondary;*/
  color: #30638E;
  margin-top: 0.5em;      
 }



.td-doc-content .lead{
  font-weight: 600;
  color: #888888;
  margin-top: -0.6em;
  padding-bottom: 12px;
  margin-bottom: 34px;
}

._breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #eee;
    border-radius: 0.25rem;
    font-size: 12px;
}

.td-search-input {
  background-color: rgba(255,255,255,0.15);
  border-radius: 0.2rem; 
}


@media (max-width: 768px){
.td-box .row {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex-direction: row;
}


@media (max-width: 768px){
.col-12 {
    padding-left: 5px;
    padding-right: 5px;
}

float-figure{
  display: inline-block;
  float: right;
  margin-left: 1em;
  margin-top: 0.5em;
  margin-bottom: auto;
}
}


ol ol, ul ul, ol ul, ul ol {
    margin-bottom: 1.2em;
    margin-top: 1.2em;
}

/*.li:not(:last-child) {*/
    /*margin-bottom: 0.5em;*/
/*}*/


.td-byline{
font-size: 10pt;
}

.pager{
    display: flow-root;
    margin-bottom: 0.5em;
}

round {
  border-radius: 50%;
  width: var(--width);
}

h2 h3 {
  background-color: #dedede;
}

.letter {
    color: #3c6382;
    font-size: 1.2rem;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    border-bottom: 1.25pt solid #3c6382;
    margin-top: 1rem;
    margin-bottom: .5rem;
}


code.has-jax {
    -webkit-font-smoothing: antialiased;
    background: inherit !important;
    border: none !important;
    font-size: 50% !important;
}