/* currentJShort.css*/
*{
	 font-family: Arial, sans-serif;
	 /* border: 1px solid red !important; */
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
  margin: 0px;
  padding: 0px;
	/*  background-color: #fcfbef; */
}

a {
  color: #088cc3;
}

h1 {
	color:#1a8cff;
 	margin: 10px;
}

h2 {
	margin: 10px;
}

h3{
  padding: 4px;
  margin: 4px;
}

pre {
  white-space: pre-wrap;
}

p {
	margin-left: 3px;
	margin-right: 3px;
}
/*	absolute - The element is positioned relative to its first positioned (not static) ancestor element. It will also act as anchor point for the absolutely positioned child element */
.absolute {
	position: absolute;
}

/* actionButton are now imported in stylesheet format from customlooks, they are used for general testing and encryption/decryption app */

/* appMenuAnchor is for default styling of anchors on app menu (for anchors not buttons) */
.appMenuAnchor {
	border-width:1px;
  	border-style:solid;
  	border-color: #06467f;
	margin-top: 4px;
  	margin-bottom: 4px;
}

.appMenuAnchor a {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 3px;
	padding-left: 3px;
  	font-size: 16px;
	font-weight: bold;
}

.appMenuAnchor:hover {
	color: #edf5fd;
	/*background-color: #116ebf; */
	background-color: #1790b2;
}

/* remember center does not work with spans or slots, spans or slots have no extra space around contents, put a div around them and use this on the div... and it looks like framecenter does not work in even divs in shadowdom sadness*/
/* and it looks like framecenter does not work in even divs in shadowdom sadness, nor does this work in the shadow dom style sheet. have to have an external div centered around your web component border: 2px solid black; */
.center, ::part(framecenter){
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.col-05 {
	width: 4.16%;
}

.col-1 {
	width: 8.33%;
}

.col-1-5 {
	width: 12.5%;
}

.col-2 {
	width: 16.66%;
}

.col-2mid {
	width: 14.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-9-5 {
	width: 79.17%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.clear {
	clear: both;
}

.errorBox {
	border:2px solid red;
}

.errorBackground {
	background-color: #fcc9c9;
}

.errMsgColor {
	color: red;
}

.flexdisp {
	display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

.flexalign-items-center {
	align-items: center;
}

.flexalign-content-center {
	align-content: center;
}

/*You can use margin: 0 auto with position: fixed if you set left and right */
.fixed {
	position: fixed;
}

.hide {
    visibility: hidden;
}

/* nodisplay makes it so no space taken either */
.nodisplay, ::part(mtasknodisplay) {
	display: none !important;
}

/* hidden and nodisplay events will not trigger drag, drop or pointer events, this will however for elements that need to be visually hidden like drag drop lines around some web components */
.opaque {
  opacity: 0;
  pointer-events: auto;
}

.bold {
  font-weight: bold;
}

.inherit {
	position: inherit;
}

.MsgError {
	font-weight: bold;
	color:red;
}

/* Default styling for pageHeader in class instead of id in this case to making styling removal easier for a page that doesn't want default(just remove the class) */
.pageHeaderDefault {
	color:#238ba8;
	font-weight: bold;
	font-size: 22px;
	padding: 3px;
}

/*moves element relative to it's original position */
.relative {
	position: relative;
}

.row100 {
	width: 100%;
}

.row {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
}

.rowbreak {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	word-break: break-all;
}

/* this is default, The top, right, bottom, left, and z-index properties have no effect. *Default value. Elements render in order, as they appear in the document flow */
.static {
	position: static;
}

.sticky {
	position: sticky;
}

.testResultsColorGreen {
	color: #03838C;
}

.siteMenuSettings{
	margin-left:40px;
	margin-right:40px;
}

.cjdarkblue {
	color: #0f5fa7;
}

.cjdarkbluebackground {
	background-color: #0f5fa7;
}

.cjlightblue {
	color: #7daedb;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding-right: 5px;
}

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

.cursorPointer {
	cursor: pointer;
}

#gridwrap{
	/*margin-left: 200px;*/  /*this is the one to toggle in code in code or use style*/
	margin-left: 0px;
  -webkit-transition: margin-left .3s;
	transition: margin-left .3s;
}

#rowTutorialBanner {
	width: 100%;
	-webkit-align-items: center; /* Safari 7.0+ */
	align-items: center;
	text-align: center;
	justify-content: center; /* needed for firefox, otherwise images float left even though align-items: center */
	margin-bottom: 5px;
}

/* this is the sliding menu in the top banner including close, does not include hamburger image to open  */
#siteSidebar {
    height: 100%;
    width: 0;
   /* z-index: 3; */
	z-index: 4;
    top: 0;
    right: 0;
    overflow-x: hidden;
	-webkit-transition: width 0.3s;
    transition: width 0.3s;
}

#siteSidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
	font-weight:bolder;
    display: block;
	-webkit-transition: 0.3s;
    transition: 0.3s;
	margin-right: 5px;
}

#siteSidebar a:hover {
		color: #edf5fd; /* this is lightest blue for hovering */
}

#siteCloseSidebarBtn {
		font-size: 30px;
		font-weight: bold;
		margin-right: 5px;
		margin-top: 7px;
		cursor: pointer;
		border: 0;
		width: 40px;
		float:right;
}

#siteCloseSidebarBtn:hover, #siteMenuLogoutBtn:hover, .opacHalf {
	opacity: 0.5;
}

#tutorialMenuOpenContainer {
		cursor: pointer;
		outline: none;
		padding: 3px;
}

#tutorialMenuOpenContainer:hover {
		cursor: pointer;
		outline: none;
		background:#fbf9f2;
}

#tutorialMenuOpenImage {
	padding-top: 3px;
}

.currentJLogoSVGText{
	display:inline-block;
}

.floatRight {
	float: right;
}

/* drag & Drop Exercise related
    background: white;
    	background: blueviolet;

*/
/*
#draggable {
    width: 100%;
    min-height: 36px;
    text-align: left;
	user-select: none; // controls whether the user can select text
}
*/
::part(mtasktdEmptyContent){
	background-color: lightblue;
}


::part(mtasktdEmptyContent):empty:after{
    color: silver;
}

/* this DOES work but we need :empty:after not just :after
::part(mtasktdEmptyContent):after{
    content: "New Item";
}
*/

/* but this won't */
/*
::part(mtasktdEmptyContent):empty:after{
    content: "New Item";
}

 */

/*  conclusion ::part does not work with :empty
::part(mtasktdEmptyContent):empty{
    content: "New Item";
}
 */

/*.tdEmptyContent:empty:before { */

.commentEmptyContent{
	font-style: italic;
	text-align: left;
}

.tdEmptyContent{
	text-align: left;
}

.commentEmptyContent:empty:after,
.preQInstruction:empty:after,
.postQInstruction:empty:after,
.waitInstruction:empty:after,
.tdEmptyContent:empty:after{
    color: silver;
}

.tdEmptyContent:empty:after{
    content: "New Item";
}

.commentEmptyContent:empty:after {
    content: "Description or Comments";
}

.preQInstruction:empty:after{
    content: "optional pre question instructions here";
}

.postQInstruction:empty:after{
    content: "optional post question instructions here";
}

.waitInstruction:empty:after{
    content: "optional custom wait maessage here";
}


.gridContainerTodo {
	display: grid;
  	grid-template-columns: 30px auto;
    gap: 2px;
    padding: 2px;
  	word-break: break-word;
}

.gridContainerTodo2 {
	display: grid;
  	grid-template-columns: 30px auto 30px 30px;
    gap: 2px;
    padding: 1px;
  	word-break: break-word;
}


.gridContainerTodo2ndRow, ::part(mtaskgridContainerTodo2ndRow) {
	display: grid;
  	grid-template-columns: auto 30px  30px 30px 30px;
    gap: 2px;
    padding: 1px;
  	word-break: break-word;
}




.itemButtonNewlineAbove,
::part(mstaskitemButtonNewlineAbove),
.itemButtonNewlineBelow,
::part(mtaskitemButtonNewlineBelow),
::part(mtaskitemButtonqInstructions),
.itemButtonDelete,
::part(mtastkitemButtonDelete),
.itemButtonMove,
::part(mtaskitemButtonMove),
.itemButtonMore,
::part(mtaskitemButtonMore),
.itemButtonAdd {
	font-size: 16px;
    outline: none;
}

@media (hover:hover) {
	.itemButtonNewlineAbove:hover::after,
	::part(mtaskitemButtonNewlineAbove):hover::after,
	.itemButtonNewlineBelow:hover::after,
	::part(mtaskitemButtonNewlineBelow):hover::after,
	::part(mtaskitemButtonqInstructions):hover::after,
	.itemButtonDelete:hover::after,
	::part(mtaskitemButtonDelete):hover::after,
	.itemButtonMove:hover::after,
	::part(mtaskitemButtonMove):hover::after,
	.itemButtonMore:hover::after,
	::part(mtaskitemButtonMore):hover::after,
	.itemButtonAdd:hover::after { /*this is for tooltip*/
		position: absolute;
		content: attr(data-tooltip);
		background-color: #7f797f;
		color: white;
		padding: .25em .5em;
		font-size: .8em;
		font-weight: bold;
		margin-top: -24px;
		z-index: 1;
		display: inline-table;
	}

	.itemButtonMore:hover::after,
	::part(mtaskitemButtonMore):hover::after,
	.itemButtonAdd:hover::after { /*this is for tooltip*/
		margin-left: -19px;
	}
	.itemButtonMove:hover::after, ::part(mtaskitemButtonMove):hover::after { /*this is for tooltip*/
		margin-left: -2px;
	}

	.itemButtonDelete:hover::after, ::part(mtaskitemButtonDelete):hover::after { /*this is for tooltip*/
		margin-left: -26px;
	}

	.itemButtonNewlineBelow:hover::after, ::part(mtaskitemButtonNewlineBelow):hover::after, ::part(mtaskitemButtonqInstructions):hover::after { /*this is for tooltip*/
		margin-left: -116px;
	}

	.itemButtonNewlineAbove:hover::after, ::part(mtaskitemButtonNewlineAbove):hover::after { /*this is for tooltip*/
		margin-left: -90px;
	}

}

#gridStart {
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

/*This is the ENTIRE top banner image and column structure, including hamburger menu image for opening sliding menu but NOT the sliding menu "sidebar" itself or the closing of it  */
#currentJBanner {
	width: 100%;
	text-align: center;
	justify-content: center; /* needed for firefox, otherwise images float left even though align-items: center */
	max-height:100px;
	z-index: 3;
}
/* this was 95px, this is bird on left */
#currentJLogo {
	cursor: pointer;
	padding-top: .25%;
	padding-bottom:.1%;
	margin-top: 5px;
	margin-bottom: 5px;
}

#currentJLogo:hover {
	outline: none;
	background:#d3dfeb;
}

#siteMenu {
	cursor: pointer;
	margin-right: 10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
}

.currentJHomeLogo{
  display:inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:5px;
  margin-bottom:7px;
}

@media (max-width: 950px) {
    #currentJLogo {
		margin-right:5%;
		margin-left:-2%;
    }

}
/*  if the following media css is changed, change menusBannerResponsive javascript to match */
@media (min-width: 825px) {
	.bannerHeight {
		height: 95px;
	}
    #currentJLogo {
		height: 77px;
    }
    #siteMenu {
        max-height: 45px;
    }
    .currentJHomeLogo {
        max-Height: 60px;
    }
}

@media (min-width: 600px) and (max-width: 825px) {
    .bannerHeight {
        height: 65px;
    }
    #currentJLogo {
        height: 50px;
    }
    #siteMenu {
        max-Height: 35px;
    }
    .currentJHomeLogo {
        max-Height: 45px;
    }
}

@media (min-width: 440px) and (max-width: 600px) {
	.bannerHeight {
		height: 45px;
	}
    #currentJLogo {
        height: 40px;
    }
    #siteMenu {
        height: 35px;
    }
    .currentJHomeLogo {
        max-height: 35px;
    }
}

/*
	#currentJLogoContainer{
		max-width: 300px;
	}
 */

@media (max-width: 440px) {
	#currentJBanner {
		max-width: 440px;
	}
	.bannerHeight {
		height: 40px;
	}
    #currentJLogo {
        height: 32px;
    }
    #siteMenu {
        height: 32px;
    }
    .currentJHomeLogo {
        height: 32px;
    }
}

    .spinner {
      font-size: 100px;
      animation: spin 2s infinite linear;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

#emailInput, #fpemailInput, .inviteRootJournalId  {
  outline: none;
  width:290px;
  height:32px;
  padding-left:5px;
  border-style:solid;
  border-width:1px;
  border-radius: 2px;
}

#emailInput, #fpemailInput  {
  font-weight: bold;
}

#emailInput:focus, #fpemailInput:focus {
  opacity: 1.0;
  outline: none;
}

#passwordLabel, #passwordLabel2, #passwordLabel3 {
  margin-top:10px;
}

#passwordWrapper, #passwordWrapper2, #passwordWrapper3 {
  width:290px;
  height:32px;
  border-style:solid;
  border-width:1px;
  border-radius: 2px;
}

#passwordWrapper:focus-within, #passwordWrapper2:focus-within, #passwordWrapper3:focus-within {
  /*border-color: #0f5fa7; */
  opacity: 1.0;
}

#passwordInput, #passwordInput2, #passwordInput3 {
  width:250px;
  margin-top:2px;
  height:26px;
  padding-left:5px;
  border-style:none;
  float:left;
  font-weight: bold;
}

#passwordInput:focus, #passwordInput2:focus, #passwordInput3:focus {
  outline: none;
}

#passwordEyeSpan, #passwordEyeSpan2, #passwordEyeSpan3{
  width:40px;
  height:30px;
  cursor:pointer;
}

#passwordEyeImage, #passwordEyeImage2, #passwordEyeImage3 {
  width:27px;
  height:22px;
  padding-right:5px;
  padding-left:4px;
  padding-top:7px;
}

#cjloginBtn, #forgotEmailBtn {
  margin-top:10px;
}

.loginErrorMsgRed {
  color: red;
}

.loginErrorMsgGreen {
  color: #238ba8;
}

.errorBorder{
  border-color: red;
}

.checkboxMargin{
  margin-top:10px;
}

.checkboxSize{
  width: 17px;
  height: 17px;
  vertical-align: -2px;
}

.welcomeMsg{
  margin-top:25px;
}