/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
















 */
.popup{

  min-width:  100px;
  min-height:  50px;
  position: absolute;

  max-width:  600px;
  max-height: 90vh;
 

  top: 50%;
  left: 50%;
  /*transform: translate(-50%, -50%);*/



  padding:  0.4em;

  display:  flex;
  flex-direction:  column;
  justify-content:  space-between;
  /*border:  1px solid #ff0000;*/
  border:  1px solid #b7b7b7;
  border-radius:  3px;

  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  user-select: none;

}

.popup.focussed{
/*  border: 3px solid orange;*/
}

.popup.small{
  max-width: 200px;
}



body > .message{
    border:  1px dashed gray;
  border-radius:  3px;

  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;


}

.popup .content{

}

.popup .button-rack{
  display:  flex;
  justify-content: space-between ;
  padding-top:0.5em;
  flex-wrap: wrap;
}

.popup .close-button{
  cursor: pointer;
/*  font-size: 17pt;*/
}

.popup .close-button-holder{
  position:  absolute;
  top:  0.2em;
  right:  0.5em;
  cursor: pointer;
  font-size: 17pt;
}

.box-title{
  font-size:  14pt;
/*  font-weight:  bold;*/
  padding-top:  0.5em;
  padding-bottom:  1em;
}


.popup .close-button-holder:hover{
  color:  red;
}

.popup .confirm-button{
  cursor: pointer;
}
.popup .confirm-button:hover{
/*  color:  green;*/
}

.popup .confirm-button.warning:hover{
}

.popup-title{
  font-size:  15pt;
/*  font-weight:  bold;*/
  padding-right:  25px;
  padding-bottom: 0em;

  margin-top: 0;
}

.popup .heading{
  font-size: 14pt;
  padding-top: 0;
  margin-top: 0;
}


.button{
  margin-top:  0.2em;


  padding:  0.1em;
  cursor:  pointer;
  display:  inline-block;


  padding-left: 0.2em;
  padding-right: 0.2em;




  display: inline-block;
  outline: 0;
  appearance: none;
  padding: 0px 12px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  background-color:  #dde6c7;

  border: 1px solid rgb(137, 151, 155);
  box-shadow: rgb(6 22 33 / 30%) 0px 1px 2px;
  color: rgb(61, 79, 88);
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  transition: all 150ms ease-in-out 0s;
                  
                
}

.button:hover {
    color: white;
    background-color: #7fa838;
    border: 1px solid rgb(93, 108, 116);
    box-shadow: rgb(0 0 0 / 30%) 0px 4px 4px, rgb(231 238 236) 0px 0px 0px 3px;
}



.filter-button{
  font-size: 15pt;
  background-color: 92ff92;
  padding-right: 1em;
  padding-left: 1em;

  background-color: #7fa838;
  color: #242424;
  cursor: pointer;

}

.filter-button:hover{
  background-color: green;
}
a:link,
a:active,
a:visited,
a:hover{
  text-decoration:  none;
  cursor:  pointer;
}

a:hover{
/*  color: orange;*/
}

a.stealth:link,
a.stealth:active,
a.stealth:visited,
a.stealth:hover{
  text-decoration:  none;
  color:  black;
  cursor:  pointer;
}

a.stealth2:link,
a.stealth2:active,
a.stealth2:visited{
  text-decoration:  none;
  color:  gray;
  cursor:  pointer;
}


a.stealth2:hover{
  text-decoration:  none;
  color:  orange;
  cursor:  pointer;
}

.plink:link,
.plink,
.plink:visited{
/*  color: #dc513d;*/
}

/*For links to categories in pathways*/
a.plink:link,
a.plink:active,
a.plink:visited,
{
  text-decoration:  none;
  color:  #7781c1;
  cursor:  pointer;
}
a.plink:hover{
  color: orange;
}







a.purple,
a.purple:link,
a.purple:active,
a.purple:visited,
a.purple:hover{
  
  color:  purple;
  
}

a.pathway:link,
a.pathway:active,
a.pathway:visited,
a.pathway:hover{
  
  color:  red;
  font-size:  10pt;
  
}

a.gray:link,
a.gray:active,
a.gray:visited,
a.gray:hover{
  
  color:  gray;
  
}

a.footer-item:link,
a.footer-item:active,
a.footer-item:visited{
  
  color:  gray;
  
}
a.footer-item:hover{
  
  color:  orange;
  
}




p.glow:hover{
  color:  orange;
  cursor:  pointer;
}


/*a.glow2{
  color:#da9b84;
}*/


.span-button{
  cursor: pointer;
  color:  purple;
}

.inactive-link {
   pointer-events: none;
   cursor: default;
}

/*a.final{
  color: #da5a31;
}*/

/*a.final:hover{
  color: orange;
}*/


a.big{
  font-size: 14pt;
}



a.source-link:link,
a.source-link:active,
a.source-link:visited,
a.source-link:hover{
  text-decoration:  none;
  cursor:  pointer;
 
}

a.source-link:hover{
  color: orange;
}
.api-results .title{
/*  font-weight:  bold;*/
}

.api-results .abstract{
  color:  gray;
  display:  inline-block;
}

.api-results .result{
      margin-bottom:  1em;
}
.menu a:hover{
color:  orange;
}



.s2-result .authors,
.author-colour{

}

body{

  opacity:  0.9;
  /*font-family: 'Source Sans Pro', sans-serif;*/
  /*font-size: 11pt;*/
  /*font-family:  'Helvetica';*/
/*  font-family: 'Fenix', serif;*/

  /*backdrop-filter: blur(6px);*/
  /*filter: blur(0.1px);*/

  margin: 0;

  font-family: "Atkinson Hyperlegible", serif;

}




p.heading{
  padding-bottom: 1em;
}

p.small{
  max-width: 30em;
}

p.medium{
  max-width: 60em;
}

.heading{
  padding-bottom: 1em;
}

.tinypage{
  max-width: 40em;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  box-sizing: border-box;
}

.topribbon{
  padding-top: 20px;

/*  padding-left: 15px;
  padding-right: 10px;*/
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;

  width: 800px;
}

.ribbon{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: purple;
  height: 3px;

/*background-image: linear-gradient(to right, purple , #f5f5f5);*/

}

.bars{
  font-size: 16pt;
  padding-left: 0.6em;
  padding-top: 6px;
}



.note-rack{
font-family: 'Fenix', serif;}

.floating-add{
  display: none;
}

.page{
/*  border: 1px solid gray;*/
max-width: 100vw;
/*  878 is the key value*/
/*  padding-top:  0em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-bottom:  1em;*/

  padding: 0;
  padding-left: 0.5em;
  padding-right: 0.5em;

 margin-left: auto;
  margin-right: auto;
  height: 100%;
/*  background-color: #ffffff;*/
  flex-grow: 1;

  max-width: 800px;

/*  padding-left: calc(100vw - 100%);*/
/*  min-height:  100vw;*/
}

.sq2{
  opacity: 0.5;
}

.footer{
  background-color: #dbdbdb;
  width: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
  color: #838383;
  display: flex;
  flex-direction: row;
  gap: 1.5em;
  font-size: 11pt;
  justify-content: space-between;
}

.footer-start{
    display: flex;
      gap: 1.5em;
  flex-direction: row;
}

.footer-col{
  display: flex;
  flex-direction: column;
}




.right-holder{
  display:  flex;
  justify-content:  flex-end;
  width:  100%;
}

.ta{
    font-family: 'Source Sans Pro', sans-serif;
    width:  20em;
    resize:  none;
}

p.subsection{
  font-size: 15pt;
}

p.section{
  font-size: 20pt;
}

input{
    font-family: 'Fenix', serif;
    font-size:  12pt;
   
    margin-top:  0.1em;
    margin-bottom:  0.1em;

}


input[type=text]{
  font-family: 'Fenix', serif;
   padding:  0.1em;
}




.bench, .suggestion-bench,
.s2-result-scroller{
  display: flex;
  flex-direction: row;
  align-items: start;
  flex-wrap: wrap;
  justify-content:  flex-start;
/*  border: 1px solid green;*/
  gap: 10px;

max-width: 100vw;

}


.next{
  display:  none;
  /*border: 1px solid red;*/
  /*display: flex;*/
    flex-direction: column;
  justify-content: space-around;
  align-items: center;

  font-size: 20pt;
  color: #A3B4A2;
  color: #bdbdbd;
}


.actions .go.course-live{
   padding-right: 0.2em;
}


.key{
  display: flex;
  justify-content: flex-start;

}

.key .key-item{
  display: flex;
     flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 0.5em;
}

.key .key-desc{
  max-width: 100px;
  text-align: center;
}

.key .go{
  font-size: 15pt;
  margin-bottom: 0.5em;
}

.logoholder{
    display:  flex;
  flex-direction:  row;
  align-items: center;

}

.logo{
 /*width: 100%;*/
  /*text-align: right;*/
  

  font-size: 23pt;
    /*font-size: 25pt;*/
  /*font-family: 'Condiment', serif;*/
  /*font-style:  italic;*/
  /*font-weight:  300;*/
  /*margin:0em;*/
  /*padding: 0em;*/


}

.logotype{
  padding-left:  0.3em;
}

.toprow{
  display:  flex;
  flex-direction:  row-reverse;
  justify-content:  space-between;
  align-items:  center;
  flex-wrap: wrap;


}

.alternatives{
  background-color:#cfd8dc;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  /*border: 1px dashed red;*/
  max-height: 150;
  overflow-y: auto;
  margin: 0.5em;
  border-radius: 5px;
}

.or{
  font-size: 10pt;
  color: gray;
  text-align: center;
}

body > .message{
  position:  fixed;
  top: 2em;

  left: 50%;
  transform: translate(-50%, 0%);
  padding:  1em;
  min-width:  200px;
  max-width:  400px;
  background-color:  white;

  border-radius:  5px;
  text-align:  center;
  z-index: 1000000;
}

body > .message.green{
  background-color: #6bf26b;
}

body > .message.orange{
  background-color: orange;
}

.gt{
  font-size:  8pt;
  /*padding-bottom: 0.9em;*/
  display:  inline-block;
    position:relative;
    top:-1.5px;
}

.detail{
  width:  600px;
}


.label{
  display:  inline-block;
/*  border:  1px solid gray;*/
  border-radius:  5px;
  margin-bottom:  0.2em;

  

}

.label:hover{
/*  background-color: white;*/
}

p.alert{
  display:  none;
  position:  fixed;
  top:  1em;
  left:  1em;
}

.delete-category{
  color: red;
  cursor:  pointer;
}

.menu{
  padding-right:  3em;
  max-width: 400px;
}

p.close{
    margin-top: 0 ;
  margin-bottom: 0 ;
}

p.bold{

}

.bottom-right{
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}

.gsimg{
  height: 20px;
}

.ssimg{
  height: 26px;
}
.gs-holder{

  display: flex;
  flex-direcion: row;
  align-items: center;
}

.gs-holder-2{
  padding-left: 0.5em;
  padding-top: 0.4em;

}

.inline-block{
  display: inline-block;
}

.pathway-holder,
.pathway-holder-detail{
  display: flex;
  align-items: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  align-items:  flex-start;
}

.pathway-holder .pathway{
  width: 200px;

}

.pathway-holder-detail{
  display: flex;
  flex-direction: row;
  margin-top: 1em;
  margin-bottom: 1em;
  flex-wrap: wrap;
  max-height: 60vh;
  overflow-y: auto;

    scrollbar-color:  #ffda9a white;
}

.pathway-holder-detail .pathway{
margin-bottom: 0.2em;
max-width: 180px;
}

.pathway{
/*  background-color: #a7e0ff;*/

  border-radius: 4px;
  display: flex;
  flex-direction: row;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  align-items: center;
  padding: 0.2em;
  max-width: 200px;
  color: black;
  border: 1px solid rgba(255,0,0,0.0);
  cursor: pointer;



}

.pathway:hover{
/*  border: 1px solid blue;*/
}
.pathway .number{
  font-size: 12pt;
  padding-left: 0.5em;
  padding-right: 0.2em;
  float: right;
  margin-right: 0;

}

.pathway .categories{
  padding-top: 0.2em;
   color: #22258f;
   font-size: 11pt;
}

.pathway .title{
  color: #290000;
  position: relative;
}



.devise-links{
  display: flex;
  flex-direction: row;
  margin-top: 2em;
  gap: 1em;

}

.heading{
  font-size: 20pt;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}

.subheading{
  font-size: 17pt;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}

.devise-field{
  padding-bottom: 1em;
}
.row1{
  display: flex;
  flex-direction: row;
}


.dbp{
  background-color: red;
}

.s2-result-scroller{
  max-height: 70vh;
  overflow-y: scroll;
}

.help{
  background-color: #ddfba9;
  position: fixed;
  left: 1em;
  top: 1em;
  width: 15em;

  padding: 0.2em;
  border-radius: 4px;
}

.helptitle{
  font-size: 15pt;
  margin-top: 0.2em;
}

p.slim{
  max-width: 30em;
}

.my-pathways-select{
  max-width: 10em;
  height: 20px;
  font-family: 'Fenix', serif;

}

.line2holder{
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.menu-pways{
  position: relative;

}
.menu-pways .pathway-holder-frame{
   background-color: blue;
  position: absolute;
  top:0px;
  left:0px;
  width: 50vw;
  display: none;

 
}

.menu-pways .pathway-holder{

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vw;


 
}

.menu-pways .pathway-holder .pathway{
  width: 200px;
  }

.bookmarklet{
  font-size: 11pt;
}

.bookmark-link{

  padding: 2px;
  border-radius: 3px;
  white-space: nowrap;


}


.pathway-title{
  font-size: 20pt;

  padding-top: 2em;
  
}


.small-page{
  padding-top: 2em;


  margin-top:1em;
/*  padding-left: 1em;*/
  padding-top: 1em;
  padding-bottom: 1em;
  max-width: 800px;

}

table.layout{
   border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;
}

table.layout tr > td + td{
  padding-left: 1em;
}

.col1{
/*  border: 1px solid red;*/
  width: 100%;

}

.row1{
    display: flex;
  justify-content: space-between;
}

.category-suggestor .name,
.category-suggestor .location,
.category-suggestor .description{
  width: 20em;
}

.login-box{
  min-width: 400px;
  border-radius: 4px;
}

.slider.hue, .slider.saturation, .slider.lightness {

    width: 300px;

  }

.ui-slider-handle { border-color: gray;
}
#hue .ui-slider-handle { 
width: 3em;
text-align: center }
#saturation .ui-slider-handle { 
width: 5em;
text-align: center }
#lightness .ui-slider-handle { 
width: 5em;
text-align: center }

#hue .ui-slider-handle:before{
  content: 'Hue';
  font-family: 'Fenix', serif;
}

#saturation .ui-slider-handle:before{
  content: 'Saturation';
  font-family: 'Fenix', serif;
}


#lightness .ui-slider-handle:before{
  content: 'Lightness';
  font-family: 'Fenix', serif;
}



.toprow{
	position: relative;
	max-width: 100vw;
}

.toprow .dropdown{
	position: absolute;
	right: 0;

	display: flex;
	flex-direction: column;

	background-color: #f5f5f5;
	padding: 1em;

	font-size: 15pt;
	z-index: 1000;

}

.toprow .dropdown a:hover{
	color: orange;

}
@media only screen and (max-width: 800px) {

	.logotype{
		font-size: 16pt;
	}

	.topribbon{
		max-width: 80vw;
		width: unset;
	}

	.line2holder{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.toprow{
				display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu{
		padding: 0;
	}

	.topribbon .smallmenu{
		margin-top: 0.5em;
	}


	.footer-end{
		display: none;
	}

	.page{
		max-width: 100vw;

		box-sizing: border-box;
	}

	.footer-first-col{
		display: none;
	}

}