html, body { font-family:Roboto; font-size:100%; }

body { 
/*  background-image:url(../img/bg/yht-logo-bg-10pc.png);   */
  background-repeat:no-repeat;
  background-position: center center;
  min-height:100vh;  
 }

 body.idx { 
  /*background-image:url(../img/bg/yht-logo-bg.png);     */
 }

 body.nobg {
   background-image:none !important;
 }

 html.yscroll {
  overflow-y: scroll;
 }

.dropdown-menu, .dropdown-item {
  font-family:Roboto,sans-serif; 
  text-transform:uppercase;
  font-weight:700 !important;
  font-size:95%;
  border-radius:0;
}

a { text-decoration:none; font-weight:normal; }

a:link { color:crimson; }
a:visited { color:brown; }
a:hover { color: crimson; border-bottom:1px solid crimson; }
a:focus { color: crimson; border-bottom:1px solid crimson; }
a:active { color: crimson; border-bottom:1px solid crimson; }

a.nav-link:link, a.nav-link:visited, a.navbar-brand {
  color:white;
}

a.nav-link.active {
  font-weight:700 !important;
}

img.google-pic {
  margin-right:0.7rem;
  max-width:36px;
  max-height:36px;
}

span.bold {
  font-weight:700 !important;
}

.w400 { 
  font-weight:400 !important;
}

div.upload-area {
  background-color:#00000020;
  width:100%;
  padding:1rem;
  font-size:140%;
  height:100%;
  min-height: 200px;
  border:2px solid #00000020;
  margin-bottom:1rem;
}

div.a-upload-area {
  width:auto !important;  
  background-color:#00000010;  
  padding:1rem;
  font-size:140%;
  height:100%;
  min-height: 200px;
  border:2px solid #00000020;
  margin-bottom:1rem;
}


p.lg { font-size:150%; }

.fake { font-style:italic !important; }

.btn-frm { min-width:10rem; }

.nav-link {
  color:#495057;
}

.nav-tabs {
  border-bottom: 1px solid #495057;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #495057;
  color: #0d6efd;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;  
  border-color:#495057 #495057 #fff;
  font-weight:bold;
}

.nav-tabs .nav-link:hover {
  border-color: #495057 #495057 #dee2e6;
  isolation: isolate;
  color:#0d6efd;
}

.nav-tabs .nav-link:focus {
  border-color: #495057 #495057 #fff;
  isolation: isolate;
  color:#0d6efd;
}

.img-fade { opacity:0.5 !important; }

.bg-myyht {
  background-color:#cfe2ff;
}

.lp {   
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*line-height: 100px;*/
    text-align:center;
    vertical-align: middle; 
    display: table-cell; 
}

.llp {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

.lp1 {
  background-color:#4285f4;
  color:#fff;
}
.lp2 {
  background-color:#DB4437;
  color:#fff;
}
.lp3 {
  background-color:#6f42c1;  
  color:#fff;
}
.lp4 {
  background-color:#0f9d58;
  color:#fff;
}


.alert-1 {
  background-color:#4285f4 !important;
}
.alert-2 {
  background-color:#DB4437 !important;  
}
.alert-3 {
  background-color:#6f42c1 !important;    
}
.alert-4 {
  background-color:#0f9d58 !important;
}


.lp1-1  {
  background-color:#4285f430;
}

.lp1-2 {
  background-color:#4285f440;
}

.lp1-3 {
  background-color:#4285f450;
}

.lp2-1 {
  background-color:#DB443730;
}

.lp2-2 {
  background-color:#DB443740;
}

.lp2-3 {
  background-color:#DB443750;
}

.lp3-1 {
  background-color:#6f42c130;
}

.lp3-2 {
  background-color:#6f42c140;
}

.lp3-3 {
  background-color:#6f42c150;
}

.lp4-1 {
  background-color:#0f9d5830;
}

.lp4-2 {
  background-color:#0f9d5840;
}

.lp4-3 {
  background-color:#0f9d5850;
}









/* Main Container -  this controls the size of the circle */
.circle_container
{
	width : 128px;
	height : 128px;
	margin : 0;
	padding : 0;
/*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	/*border : 2px solid black;*/	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 70%;
	height : 70%;
	max-width : 70%;
	max-height : 70%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 15%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	/*transform-style : preserve-3d;*/
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font-size:0.85rem;
  /*font-weight:bold;*/
	text-align : center;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}


.bg-hdr {
  background-color:#0d6efd;
  color:#fff;
}

.bg-instruction {
  background-color:#9EC5FE;
  color:#031633;
}

a.yht-square {
  width:8rem;
  height:8rem; 
  font-size:1.35rem;
  line-height:120%;
  font-weight:bold;
}

a.yht-oblong {
  min-width:8rem;  
  font-size:1.5rem;
  line-height:120%;
  font-weight:bold;
}

a.yht-red:link {  
  color:#fff;
  background-color:#dd4a4f;
  border:3px solid #dd4a4f;
}

a.yht-red:visited {  
  color:#ffffff20;
  background-color:#dd4a4f20;
  border:3px solid #dd4a4f20;
}

a.yht-red:hover, a.yht-red:focus, a.yht-red:active {  
  color:#dd4a4f;
  background-color:#fff;
  border:3px solid #dd4a4f;
}

a.fake:link {    
  border:2px dashed #fff !important;
}

a.fake:visited {    
  border:2px dashed #fff !important;
}

a.fake:hover, a.fake:focus, a.fake:active {    
  border:2px dashed #fff !important;
}

a.yht-charcoal:link {  
  color:#fff;
  background-color:#353535;
  border:3px solid #353535;
}

a.yht-charcoal:visited {  
  color:#ffffff20;
  background-color:#35353520;
  border:3px solid #35353520;
}

a.yht-charcoal:hover, a.yht-charcoal:focus, a.yht-charcoal:active {  
  color:#1e1e1e;
  background-color:#fff;
  border:3px solid #353535;
}


a.yht-purple:link {  
  color:#fff;
  background-color:#5C3286;
  border:3px solid #5C3286;
}

a.yht-purple:visited {  
  color:#ffffff20;
  background-color:#5C328620;
  border:3px solid #5C328620;
}

a.yht-purple:hover, a.yht-purple:focus, a.yht-purple:active {  
  color:#1e1e1e;
  background-color:#fff;
  border:3px solid #5C3286;
}


a.yht-dark-purple:link {  
  color:#fff;
  background-color:#41235E;
  border:3px solid #41235E;
}

a.yht-dark-purple:visited {  
  color:#ffffff20;
  background-color:#41235E20;
  border:3px solid #41235E20;
}

a.yht-dark-purple:hover, a.yht-dark-purple:focus, a.yht-dark-purple:active {  
  color:#1e1e1e;
  background-color:#fff;
  border:3px solid #41235E;
}





a.yht-pink:link {  
  color:#fff !important;
  background-color:#B34D92 !important;
  border:3px solid #B34D92 !important;
}

/*a.yht-pink:visited {  
  color:#ffffff20;
  background-color:#41235E20;
  border:3px solid #41235E20;
}*/

a.yht-pink:visited {
  color:#fff !important;
  background-color:#B34D92 !important;
  border:3px solid #B34D92 !important;
}

a.yht-pink:hover, a.yht-pink:focus, a.yht-pink:active {  
  color:#1e1e1e;
  background-color:#fff;
  border:3px solid #B34D92;
}







td.yht-purple {
  color:#fff;
  background-color:#41235E;
}

span.myyht-text-bold {
  font-weight:bold !important;
}

span.myyht-text-red {
  color:#dd4a4f !important;
}

span.myyht-text-charcoal {
  color:#333 !important;
}

a.btn-myyht-menu:link {
  background-color:#fff;
  border:1px solid #333;
}

a.btn-myyht-menu:visited {
  background-color:#ffffff80;
  border:1px solid #333;
}

a.btn-myyht-menu:hover, a.btn-myyht-menu:focus, a.btn-myyht-menu:active {
  background-color:#333;
  color:#fff;
}

a.btn-myyht-menu.active { 
  background-color:#dd4a4f;
  color:#fff !important;
  font-weight:bold;
}

.my-yht-data { 
  background-color:#ffffcc50;
  color:#333;
  font-weight:bold;
}

td.my-yht-data {
  background-color:#ffffcc50 !important;
  color:#333;
  font-weight:normal;
}


table.my-yht-data-table a:link {
  border-bottom:1px dotted #dd4a4f25;
  color:inherit;
}

table.my-yht-data-table a:hover {
  border-bottom:1px solid #dd4a4f;
  color:#dd4a4f;
}

img.myyht-avatar {
  border: 1px solid #ccc;
  padding:1.5%;
  background-color:#fff;
  margin-right:0.5rem;
  margin-bottom:0.5rem;
  max-width:30%;
}

div.profile {
  
  text-transform:uppercase;
  font-size:0.85rem;
  font-weight:bold;  
  padding:0.5rem;  
  letter-spacing:0.5px;
}

div.profile-1 {  
  background-color: #65baf7;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;

}

div.profile-2 {  
  background-color: #fbb03b;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;

}

div.profile-3 {  
  background-color: #13b491;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;
}

div.profile-4 {  
  background-color: #8557a7;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;
}

div.profile-5 {  
  background-color: #7ac943;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;
}

div.profile-6 {  
  background-color: #65baf7;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;
}

div.profile-7 {  
  background-color: #fbb03b;
  color:#fff;  
  text-shadow: 1px 1px 1px #00000090;
}


ul.profile-bullets {
  list-style-type:none;
  margin-left:0;
  margin-right:0;
  padding-left:0.5rem;
  padding-right:0.5rem;
}

ul.profile-bullets li {
  display:inline-block;
  margin-right:1rem;
}

.blue { color:#0d6efd; }
.red { color:red; }

.tiny { font-size:0.8rem; }

a.pdf-hover { border:1px solid #0d6efd; }
a.pdf-hover:hover { border:1px solid red; }

a.mod-link { color:1px solid #0d6efd !important; font-weight:bold; }
a.mod-link:link { color:1px solid #0d6efd !important; }
a.mod-link:visited { color:1px solid #0d6efd !important; }
a.mod-link:hover { color:1px solid red; border-bottom:1px solid red; }

.hi { background-color:yellow !important;}

.shi { display:inline-block; background-color:yellow !important; padding:0.25rem !important; }

.learner-badge { 
  max-width:350px;
}

.a-frm { border:1px dashed #ff4500; padding:0 1rem 1rem 0.8rem; min-width:60%; }
.a-frmlabel { font-family:monospace; font-size:0.8rem; color:#ff4500; opacity:0.6; margin-left:-0.65rem; }

a.action-block {  
  border-width:3px; 
  border-style:solid;
  border-radius:10px;
  display:inline-block;
  width:auto;
  padding:1rem;
  width:210px;
}

a.action-block.general {
  border-color: #0d6efdbb;
  outline:2px solid #0d6efd70;
}

a.action-block.general svg {
  fill:#0D6EFD;
}

a.action-block.general:link, a.action-block.general:visited {
  color:#0D6EFD;
}

a.action-block.general:hover {
  background-color:#0D6EFD;
  color:#fff;
}

a.action-block.change {
  border-color: #ff4500;
  outline:2px solid #ff450080;
}

a.action-block.change svg {
  fill:#ff4500; 
}

a.action-block.change:link, a.action-block.change:visited {
  color:#ff4500;
}

a.action-block.change:hover {
  background-color:#ff4500;
  color:#fff;
}

a.action-block:hover svg {
  fill:white;
}

.debug {
  background-color:pink !important;
}

.debug2 {
  background-color:hotpink !important;
}

.a-frm-present {
  background-color:#00000008;
  padding:1rem;
  font-size:140%;
  height:100%;
  min-height: 200px;
  border:2px solid #00000015;
  outline:2px solid #00000035;
  margin-bottom:1rem;
  min-width:50%;
}


.form-control::-webkit-input-placeholder {
  /*color: #6c757d;
  opacity: 1; FROM BOOTSTRAP */
  color:#00000055;
}

.form-control::-moz-placeholder {
  /*color: #6c757d;
  opacity: 1; FROM BOOTSTRAP */
  color:#00000055;
}

.form-control:-ms-input-placeholder {
  /*color: #6c757d;
  opacity: 1; FROM BOOTSTRAP */
  color:#00000055;
}

.form-control::-ms-input-placeholder {
  /*color: #6c757d;
  opacity: 1; FROM BOOTSTRAP */
  color:#00000055;
}

.form-control::placeholder {
  /*color: #6c757d;
  opacity: 1; FROM BOOTSTRAP */
  color:#00000055;
}

.dropdiv {
  border:8px dashed gray !important;
}

.dropzone {
  background-color:#eee !important;
  min-height:25vw !important;
  font-weight:bold;
  padding:4rem !important;
}

.my { 
  color:#dd4a4f; 
  font-weight:bold;
}

.notmy {
  color:#353535;
  font-weight:bold;
}

.border-subtle {
  border:1px solid #00000045 !important;
}


.border-bottom-subtle {
  border-bottom:1px solid #00000045;
}

.text-subtle {
  color:#000000bb;
}

.prompt-box {
  border:1px solid #00000045 !important;
  background-color:#ffff00bb; 
}

.prompt-box:focus {
  background-color:#ffff00bb !important; 
}

.text-hi {
  background-color:yellow;
  color:red;
  padding:0.25rem;
  border:1px solid red;
  font-weight:bold;
  line-height:125%;
}

.dropdown-button {
  font-family:Roboto,sans-serif; 
  text-transform:uppercase;
  font-weight:700 !important;
  font-size:95%;
  border-radius:0;
}

.nltiny {
  display:block;
  margin:0;
  padding:0.25rem;
  font-size:0.75rem;
  line-height:0.1rem;
}

.class-list {
  font-size:0.95rem;
  display:block;
}

.class-member {
  display:inline-block;
  border:1px solid white;
  padding:1px 4px;
  margin-right:0.5rem;
  background-color:white;
  color:black;
  font-weight:bold;
  line-height:140%;
}

.g-thm {
  max-width:100px !important;
  max-height:120px !important;
}


.l {
  text-align: left !important;
}

.c {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.u {  
  text-transform: uppercase !important;  
}

.w {
  white-space: nowrap !important;
}

.b {
  font-weight: 700 !important;
}

.sb { 
  font-weight: 500 !important;
}

.f100 {
  font-size:100% !important;
}

.f95 {
  font-size:95% !important;
}

.f90 {
  font-size:90% !important;
}

.f85 {
  font-size:85% !important;
}

.f80 {
  font-size:80% !important;
}

.cmy {
  color:#DD4A4F !important;
}

.cyht {
  color: #333 !important;
}


.btn-hex24 {
  color: #fff;
  background-color: #ff4500;
  border-color: #ff4500;
}
.btn-hex24:hover {
  color: #fff;
  background-color: #ff6329;
  border-color: #ff581a;
}
.btn-hex24:disabled, .btn-hex24.disabled {
  color: #fff;
  background-color: #ff4500;
  border-color: #ff4500;
}


.btn-cancel {
  color: #fff;
  background-color: #464d53;
  border-color: #464d53;
}
.btn-cancel:hover {
  color: #fff;
  background-color: #596269;
  border-color: #525a61;
}
.btn-cancel:disabled, .btn-cancel.disabled {
  color: #000;
  background-color: #464d53;
  border-color: #464d53;
}

.btn-ok {
  min-width:95px;
}

.bg-subfusc {
  background-color: #596168; 
}


.bg-success-subtle {
  background-color: #d1e7dd !important;
}

.bg-danger-subtle {
  background-color: #f8d7da !important;
}