@charset "utf-8";
/* CSS Document */
	

.main {
  padding: 0px 0px;
  z-index: 0;
}

.show {
    display: block;
}


.aDead {
	pointer-events:none;
}

/* Scroll Bar - width */
::-webkit-scrollbar {
  /*width: 3px;*/
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
} 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


A {
	color: #00bcd4;     /* cyan */
	TEXT-DECORATION: none;
	scroll-margin-top: 72px; /* href to name=a1 will compensate for fixed page header */
}

A:hover {	color: #009688 ;
	TEXT-DECORATION: none
}
BODY {
	FONT-SIZE: 16px;
	line-height:1.5;
	COLOR: #424242;
	/*FONT-FAMILY: Arial, Book Antiqua, Garamond, Bodonni;*/
	/*font-family: 'Inter', sans-serif;*/
	font-family: 'Segoe UI', sans-serif;
	width: inherit;
	margin-left:auto;
    margin-right:auto;
	background-color: white;
	font-weight:400;
}
b {
	font-weight: 500;
}
li {
	margin-bottom:8px;
}
TD {
/*	FONT-SIZE: 16px;
	COLOR: #525252;
	FONT-FAMILY: Arial, Book Antiqua, Garamond, Bodonni*/
}
SMALL {
	FONT-SIZE: 13px
}
BIG {
	FONT-SIZE: 19px;
}

.leftlmenulinks {
/*	FONT-WEIGHT: bold;
	FONT-SIZE: 15px;*/
	COLOR: #000000;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none;
}
.leftlmenulinks:hover {
	FONT-SIZE: 16px;
	COLOR: #000000;
	background: #FFFBE8;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none
}
.topmenulinks{
	FONT-SIZE: 16px;
	COLOR: white;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none
}
.topmenulinks:hover{
	/*COLOR: #ffd180;		/*orange acc1*/
	COLOR: yellow;
}

.topMenuLangBtns {
	display: inline-block;
	FONT-SIZE: 12px;
	padding:1px 15px 1px 0px;
	FONT-FAMILY: Arial;
	color: white;
	/*background-color: #f9fbe7; /* lime lt5 */
	/*border: 1px solid #f9fbe7;  /* lime lt5 */
	border-radius: 14px;
}

.topMenuLangBtns .topmenulinks {
	FONT-SIZE: 12px;
	COLOR: white; /*#f9fbe7;	/* lime lt5 */
	TEXT-DECORATION: none;
	padding: 1px 3px 1px 3px;
}

.topMenuLangBtns .heading {
	COLOR: white;	
	/*background-color: #f9a825; /* yellow dk3 */
	padding: 3px 5px 2px 15px;
	margin: 0px 0px 0px 0px;
	/*border: 1px solid #f9fbe7;  /* lime lt5 */
	border-radius: 12px 0 0 12px;
}

.topcaption {
	FONT-WEIGHT: bold;
	FONT-SIZE: 17px;
	COLOR: #26a69a; //#8A440F; //#cb6a1f;
	FONT-FAMILY: Arial, Book Antiqua, Garamond, Bodonni
}
#leftmenu {
	Z-INDEX: 10;
	LEFT: 20px;
	POSITION: absolute;
	TOP: 100px
}
.reverselinks {
	FONT-SIZE: 16px;
	COLOR: white;
	FONT-FAMILY: Arial, 'Book Antiqua', Garamond;
	TEXT-DECORATION: none
}
.btmmenulinks:hover {
	FONT-SIZE: 13px;
	COLOR: #26a69a; //#8A440F; //#cb6a1f;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none
}
.btmmenulinks {
	FONT-SIZE: 13px;
	COLOR: #26a69a; //#8A440F; //#cb6a1f;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none
}
.titlemain {
	FONT-SIZE: 32px;
	COLOR: midnightblue;
	FONT-FAMILY: Arial;
	weight: bold
}
.titlesub {
	FONT-SIZE: 15px;
	COLOR:orange;
	FONT-STYLE: italic;
	FONT-FAMILY: Arial
}
.userdata{
	FONT-SIZE: 16px;
	COLOR: black;
}
.marginleft {
	MARGIN-LEFT: 3px
}
.small8 {
	FONT-SIZE: 13px
}
.PageCurr {
	FONT-WEIGHT: bolder;
	FONT-SIZE: 16px;
	COLOR: #000000;
	FONT-FAMILY: arial, sans-serif
}
.PageNums {
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	COLOR: gray;
	FONT-FAMILY: arial, sans-serif
}
.ListNum {
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	COLOR: black;
	FONT-FAMILY: Arial, 'Book Antiqua', Garamond
}
.sectionHeaderA {
	text-indent: 10px;
	background-repeat: no-repeat;
	background-image: url(images/headerBG.png);
	/*background-color: #7A3D00;*/
	color: #FFFFFF;
}
.sectionHeaderB {
	text-indent: 10px;
	background-color: #A25519;
	color: #FFFFFF;
}
.sectionHeaderC {
	padding: 2px 4px;
	background-color: #009688; /* teal */;
	color: #FFFFFF;
}
.cardHeader {
/*	background-color: #fce4ec; pink lighten-5 */
/*	background-color: #ff80ab; pink accent-1 */
/*	background-color: #e8eaf6; /* #e8eaf6 indigo lighten-5 */
	background-color: #ede7f6;  /* deep-purple lighten-5 */
}
.SendMailIframe {
	height: 740px;
	width: 100%;
	overflow: auto;
}

.table-heading-big {
	background-color: #4db6ac; /* teal lt2 */
	 
	 
/*	height: 39px;*/
}
.table-heading {
/*	background:url(images/table-heading-bg.png) repeat-x;*/
	background-color: #4db6ac; /* teal lt2 */
	height: 23px;
	
}.table-footer {
	background-color: #78909c  ; /*blue-grey lt-1*/
}

.table-seprow{
	background-color: #e9f2f5;  /* teal/blue almost white  */
/*	background:url(images/table-heading-bg.png) repeat-x;*/
/*	height: 19px;*/
}

.SectionHead{
	background-color: #BEBEBE;
}

TR.table-heading-big  TD {
	color: #FFFFFF;
/*	color: #001a17;*/
	font-size: 21px;
	font-weight:normal;
}

TR.table-heading  TD {
	color: #FFFFFF;
/*	color: #001a17;*/
	padding: 5px 5px;
}
TR.table-heading > TD > A{
/*	color: #FFFFFF; */
	color: #001a17;
}
TR.table-heading > TD > A:hover{
	COLOR: var(--el-color-secondary);
}

TR.table-footer  TD {
/*	color: #FFFFFF;*/
/*	background-color: #a7ffeb;    teal accent-1*/
	background-color: #1de9b6; /* teal accent-3*/

}

TR.table-seprow  TD {
/*	color: #FFFFFF;*/
}

TABLE.TblSrchResults {
	/*background-color: #e9f2f5; /* green lt */
}
TABLE.TblSrchResults .table-heading> TD {
	background-color: #80cbc4; /*teal lt3*/
	color: #001a17;   /* near black */
	color: white;   /* near black */
	padding: 5px 1px;
}
TABLE.TblSrchResults> TBODY> TR:nth-child(odd) {
	background-color: #FFFFFF;
}
TABLE.TblSrchResults> TBODY> TR:nth-child(even) {
	background-color: #e9f2f5;   /* cyan lt5 + */
}


TABLE.TblSrchResultsSmpl {
	background-color: #e9f2f5; /* green lt */
	color: #001a17;   /* near black */
}
TABLE.TblSrchResultsSmpl .table-heading TD {
	background-color: #64ffda; /* teal accent-2 */
	padding: 2px 2px;
}
TABLE.TblSrchResultsSmpl> TBODY> TR:nth-child(odd) {
	background-color: #FFFFFF;
}
TABLE.TblSrchResultsSmpl> TBODY> TR:nth-child(even) {
	background-color: #e9f2f5;   /* cyan lt5 + */
	color: #001a17;   /* near black */
}

TABLE.TblInfoForm {
	background-color: #e9f2f5; /* green lt */
}
TABLE.TblInfoForm .table-heading> TD {
	/*background-color: #64ffda; /* teal accent 2 */
	background-color: #80cbc4; /*teal lt3*/
	color: #001a17;   /* near black */
	padding: 5px 5px;
}


TABLE.TblCardSm {
/*	background-color: #FCF7F9;  /* pink lighten-5 almost white */
/*	background-color: #fffde7;  /* yellow lt-5 */
	background-color: #e9f2f5;  /* teal lt5+ */
	color: #001a17;   /* near black */
}
TABLE.TblCardSm .table-heading> TD {
	/* background-color: #00bfa5; /* teal accent-4 */
	background-color: #26a69a; /* teal lt-1 */
	color: white; 	
	padding: 1px 2px;
	font-size: 13px;
}

TABLE.TblHRowCol {
/*	background-color: ivory;  */
/*	background-color: #FCF7F9;  /*pink lighten-5 almost white */
/*	background-color: #FDFFFF;   /* lt teal/blue almost white */
	background-color: white;
	border: 1px solid gray;
}
TABLE.TblHRowCol>tbody>tr:nth-child(even) {
		background-color: #e9f2f5;
	}
}

TABLE.TblHRowCol TD {
/*	background-color: ivory;  */
/*	background-color: #FCF7F9;  /*pink lighten-5 almost white */
/*	background-color: #FDFFFF;   /* lt teal/blue almost white */
	border-left: 1px solid gray;
	border-right: 1px solid gray;
}
TABLE.TblHRowCol .table-heading> TD {
/*	background-color: ForestGreen; */
/*	background-color: #80cbc4; /*teal lt3*/
	background-color: #26a69a; /*teal lt1*/
/*	color: ivory;*/
	color: white;
	padding: 2px 4px;
}
TABLE.TblHRowCol TD.row-heading {
/*	color: DarkGreen; */
	color: #00695c; /*teal dk3*/	
	font-weight:bold;
}

TABLE.TblCardLt {
	background-color: #FCF7F9;  /*pink lighten-5 almost white */
	line-height: 1.4;
}
TABLE.TblCardLt .table-heading> TD {
	background-color: #64ffda; /* teal accent-2 */
	padding: 2px 4px;
}
TABLE.TblCardLt .table-heading A{
/*	color: #c6ff00  ; /*lime accent-3*/
/*	color: #ff3d00 ; /*deep ornage acc-3*/
	color: #e6ee9c;  /*lime lt3 */

}

TABLE.TblCard {
/*	background-color: #FCF7F9;  /*pink lighten-5 almost white */
	line-height: 1.4;
  box-shadow: 1px 1px 1px gray, 2px 2px 5px gray;
}
TABLE.TblCard .table-heading> TD {
	background-color: #ff9100; /* orange accent-3 */
/*	background-color: #80cbc4; /* teal lt3*/
/*	background-color: #ffb74d; /* orange lt2*/ 
/*	background-color: #ffe082; /* amber lt3 */

	color: #FFFFFF;   /* white */
	padding: 2px 4px;
}
TABLE.TblCard .table-heading A{
	color: #c6ff00  ; /*lime accent-3*/
	/*color: #ff3d00 ; /*deep ornage acc-3*/
}

TABLE.TblCardGr {
	background-color: #FCF7F9;  /*pink lighten-5 almost white */
	line-height: 1.4;
}
TABLE.TblCardGr .table-heading> TD {
	background-color: #80cbc4; /* teal lt3*/
	color: #001a17;   /* near black */
	padding: 2px 4px;
}
TABLE.TblCardGr .table-heading A{
	color: #c6ff00  ; /*lime accent-3*/
}
TABLE.TblCard TD{
	PADDING-BOTTOM: 8px;
}
TABLE.TblUserForm {
	background-color: #e9f2f5; /*#1de9b6;  teal accent-3*/
	box-shadow: 1px 1px 1px grey,  2px 2px 3px grey;
}
TABLE[border="0"].TblUserForm {
	background-color: #FAFAFA; /* grey lt5 */
}
TABLE.TblUserForm .table-heading> TD {
	background-color: #009688; /* teal */;
	color: #FFFFFF;
	padding: 2px 4px;
}
TABLE[border="1"].TblUserForm .table-heading> TD {
	font-weight: bold;
}
TABLE.TblUserForm .table-heading A{
	color: #fff59d; /* yellow lt3*/
}
TABLE.TblUserForm tr:not(.table-heading) td:first-child{
	color: gray; 
}


TABLE.TblUserFormLt {
/*	background-color: #e9f2f5; /*#1de9b6;  teal accent-3*/
	background-color: #FCF7F9;  /* pink almost white */
}
TABLE.TblUserFormLt .table-heading> TD {
/*	background-color: #64ffda; /* teal accent-2 */
	background-color: #80cbc4; /* teal lt3 */
	color: #001a17;
	padding: 5px 5px;
}
TABLE.TblUserFormLt .table-heading A{
	color: #fff59d; /* yellow lt3*/
}

TABLE.TblListMenu {
	background-color: #FCF7F9; /* pink almost white */
}
TABLE.TblListMenu A{
	display: inline-block;
	color: #009688;
	padding: 2px 0px;	
}
TABLE.TblListMenu .table-heading> TD {
	background-color: #80cbc4;  /* teal lt3 */
	color: #001a17;   /* near black */
	padding: 5px 5px;
}

.imgCard{
	display:inline-block;
	box-shadow:1px 1px 1px gray, 1px 1px 3px gray;
	margin:30px;
	max-width:300px;
}
.imgCard .text-wrapper{
	padding:8px;
	padding-top: 24px;
	color: #9e9e9e;
	font-size:12px;
	border-top:1px solid gray;
}
.imgCard img{
	width:100%;
}

.search_field {
	background:url(images/search-magnify.png) no-repeat #fff 8px 8px;
	padding-left: 25px;
	height:26px;
	border:0;
	font-family:Arial, Helvetica, sans-serif, Tahoma;
	font-size:12px;
	color:#666666;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	behavior: url(pie.htc);
}

.text_field {
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 2px;
	height:22px;
	font-family:Arial, Helvetica, sans-serif, Tahoma;
	font-size:15px;
	color:#666666;
}
.LTopMenuItem {
	display: inline;
	margin-bottom:2px;
	margin-right:2px;
	padding-left: 3px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
}
a.LTopMenulinks  {
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	COLOR: #26a69a; //#8A440F; //#cb6a1f;
	FONT-FAMILY: Arial, Book Antiqua, Garamond, Bodonni;
	TEXT-DECORATION: none;
}
a:hover.LTopMenulinks  {
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	COLOR: #999999;
	FONT-FAMILY: Arial, Book Antiqua, Garamond, Bodonni;
	TEXT-DECORATION: none;
}

.InsertLinks {
	FONT-WEIGHT: lighter;
	FONT-SIZE: 12px;
	COLOR: gray;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none;
}
.InsertLinks:hover {
	FONT-WEIGHT: lighter;
	FONT-SIZE: 12px;
	COLOR: lightgray;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none;
}

.btnCancel, .formSub-btn.btnCancel ,input[type="submit"].btnCancel, input[type="button"].btnCancel {
	color: #001a17;   /* near black */
}
.btnOrng, .formSub-btn.btnOrng ,input[type="submit"].btnOrng, input[type="button"].btnOrng {
	color: white;   	
	background-color: orange;   
}

.btnOrng:hover, .formSub-btn.btnOrng:hover ,input[type="submit"].btnOrng:hover, input[type="button"].btnOrng:hover {
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}

.btnSend, .formSub-btn.btnSend, input[type="submit"].btnSend, input[type="button"].btnSend, button[type="submit"].btnSend {
	background-color: #009688; /* teal */ 
	color: #FFFFFF; 
}
.btnSend:hover, .formSub-btn.btnSend:hover, input[type="submit"].btnSend:hover, input[type="button"].btnSend:hover {
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}
.btnDisabled, input[type="submit"].btnDisabled, input[type="button"].btnDisabled {
	background-color: lightgray; 
	color: gray; 
	cursor: default;
} 
.AlertBox {
	max-width:400px;
    margin: auto;
    background-color: ivory; /* Green */
    border: 1px solid black;
    color: black;
    padding: 15px 32px;
    text-align: center;
    font-size: 14px;
	width: 80%;
}
.selLarge {
	max-width:400px;
    margin: auto;
    background-color: white; /* Green */
    border: 1px solid black;
    color: black;
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
	width: 80%;
}

.fullWidth {
	width: 100%;
}

.green {
    background-color: #4CAF50;   /*rgba(19, 191, 17, 1);*/
}

.pageSubTitle {
	COLOR: #cb6a1f;  
}

.proIcons {
	font-size: 14px;
}

.static {
	position: static;
}

.mainMenu{
/*	background-color: #edeef8; indigo lighten-5+1*/
/*	background-color: #F8F9FB; indigo lighten-5 almost white*/
/*	background-color: #fce4ec;  pink lighten-5 */
/*	background-color: #FCF7F9;  pink lighten-5 almost white */
}

.circle-btn {
	display:inline-block;
	font-size:14px;	
	text-align: center;
	vertical-align:middle;
	padding: 0px;
	color: white;
	background-color: #4CAF50; /* green from chat buttons */
	border-radius: 50%;
	font-size:1.6rem;
	width: 24px;
	height:24px;
	line-height:24px;
	border: 1px solid white;
	margin:2px 0px;
}

.circle-btn i{
	position:relative; 
	top: -1px;
	/*top:48%; 
	transform: translateY(-50%); */
	left:0%;
	font-size: 20px;
	height:24px;
	line-height:24px;
}
.circle-btn i:hover{
	top: 0px;
}

@media screen and (max-width: 580px) {
	.circle-btn.btn-sm-mob{
		display:inline-block;
		font-size:10px;	
		text-align: center;
		vertical-align:middle;
		padding: 0px;
		color: white;
		background-color: #4CAF50; /* green from chat buttons */
		border-radius: 50%;
		font-size:1.6rem;
		width: 16px;
		height:16px;
		line-height:16px;
		border: 1px solid white;
	}
	.circle-btn.btn-sm-mob i{
		position:relative; 
		top:33%; transform: 
		translateY(-50%); 
		left:-2%;
		font-size: 14px;
	}
}

.rounded-btn {
  display:inline-block;
  font-size:16px;	
  text-align: center;
  vertical-align:middle;
  padding: 0px 5px;
  color: white;
  background-color: #4CAF50; /* green from chat buttons */
  border: 1px solid #4CAF50;  
  border-radius: 7px;
  min-height:24px;
  line-height:24px;
  margin:2px 0px;
}

.btn-teal {
	background-color: #00bfa5; /* teal acc4 */
}
.btn-lt {
	background-color: #e0f2f1 ; /* teal lt5 */
	color: #00796b;	/*teal dk2*/
}

.rounded-btn:hover, .circle-btn:hover {
  background-color: #e0f2f1;  /* teal lt5 /*grey lt3 */
  color: #4CAF50 ; /* green from chat buttons /*gray dk3  */
  font-size:16px;
  border: 1px solid #4CAF50;  /* green from chat buttons */
}
.rounded-btn.btn-lt:hover, .circle-btn.btn-lt:hover {
  background-color: #00796b;  /* teal dk2 */
  color: #e0f2f1 ; /* teal lt5 */
  font-size:16px;	
}
.rounded-btn i{
	position:relative; 
	top:2px; 
	/*transform: translateY(-50%); */
	left:0%;
	font-size: 20px;
}
.icon-text {
	padding: 0px 4px;
	min-height: 24px;
	line-height: 24px;
	vertical-align: middle;
	}
.icon-text.icon-sm{
	padding: 0px 4px;
	}
.rounded-btn.icon-text i {
	position:relative; 
	top:-2px;
	vertical-align: middle;
}
.unRead {
	background-color: red!important;
	color: white;
	position:relative; 
	top:-12px;
	vertical-align: middle;
	border: 0;
	width: 18px;
	height: 18px;
	line-height:18px;
	font-size: 14px;
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
}
@media screen and (max-width: 580px) {
	.rounded-btn.btn-sm-mob {
	  display:inline-block;
	  font-size:10px;	
	  text-align: center;
	  vertical-align:middle;
	  padding: 0px 3px;
	  color: white;
	  background-color: #4CAF50; /* green from chat buttons */
	  border-radius: 5px;
	  height:16px;
	  line-height:16px;
	}
	.rounded-btn.btn-sm-mob i{
		position:relative; 
		top:50%; transform: 
		translateY(-50%); 
		left:0%;
		font-size: 14px;
	}
}

.btn-txt{
	font-size:14px; 
	position: relative; 
	top: -3px;
}
@media screen and (max-width: 580px) {
	.btn-txt{
		font-size:10px; 
		position: relative; 
		top: -2px;
	}
}
.rounded-btn-outline, .rounded-btn-outline:hover {
  display:inline-block;
  font-size:16px;	
  text-align: center;
  vertical-align:middle;
  padding: 0px 5px;
  border: 1px solid #4CAF50; /* green from chat buttons */
  border-radius: 7px;
  min-height:24px;
  line-height:24px;
}
.rounded-btn-outline.topmenulinks{
	border:1px solid lightgray;
}
input[type="submit"], input[type="file"] {
	display:inline-block;
	text-align: center;
	vertical-align:middle;
	padding: 6px 22px;
	color: #FFFFFF; 
	background-color: #009688; /* teal */ 
	border: 1px solid #004d40; /* teal dk 4 */
	border-radius: 8px;
	-webkit-appearance: none!important;	/* iphone/ipad */
	-moz-appearance: none!important;
	appearance: none!important;
	margin: 3px 0px;
	cursor: pointer;
	font-weight: normal;
	font-size: 16px;
}
input[type="button"], button, input[type="reset"], .formSub-btn{
	display:inline-block;
	text-align: center;
	vertical-align:middle;
	padding: 6px 8px;
	color: #546e7a;   /* blue-gray dk1 */ 
    background-color: #fafafa;  /* grey lt5 */
	border: 1px solid #757575;	/* grey dk1 */
	border-radius: 5px;
	-webkit-appearance: none!important;	/* iphone/ipad */
	-moz-appearance: none!important;
	appearance: none!important;
	margin: 3px 0px;
	cursor: pointer;
	font-size: 16px;
}
input[type="button"].Expit {
	padding: 6px 22px;
	background-color:#ffab40;
	color:white;
}
.go-btn{
	display:inline-block;
	text-align: center;
	vertical-align:middle;
	padding: 16px 28px;
	font-size: 21px;
	color: #001a17;   /* near black */ 
    background-color: #ffff8d ;  /* yellow acc1*/
	border: 5px solid #ffab40 ;	/* orange acc2 */
	border-radius: 4px;
	margin: 6px 0px;
	cursor: pointer;
}
.go-btn:hover{
	font-size: 21px;
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}

.goMed-btn {
	display:inline-block;
	font-size:16px;	
	font-weight: bold;
	text-align: center;
	vertical-align:middle;
	padding: 15px 50px;
/*	color: #00796b;				/* teal dk2 */
	color: #ff6d00;  			/* orange acc4 */
	background-color: #fffde7;  /* yellow lt5*/
	border: 3px solid #26a69a; /* teal lt1 */
	border-radius: 15px;
}
.goMed-btn:hover {
	font-size:16px;	
	background-color: #a7ffeb ; 	/* teal acc1 */
	color: #424242 ; /* gray dk3  */
}
.btn-med:hover{
	font-size: 16px;
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}

input[type="submit"]:hover,  input[type="button"]:hover, input[type="file"]:hover{
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
	cursor: pointer;
}

.backlit-btn {
  display:inline-block;
  font-size:14px;	
  text-align: center;
  vertical-align:middle;
  padding: 0px 5px;
  color: white !important;
  background-color: #4CAF50; /* green from chat buttons */
  font-size:1.6rem;
  height:24px;
  line-height:24px;
  box-shadow: 1px 1px 1px gray, 1px 1px 3px gray;
}
.backlit-btn:hover {
	font-size:14px;	
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}
.floating {
  box-shadow: 1px 1px 1px gray, 2px 2px 5px gray;
}
.rounded {
  border-radius: 7px;
}

.icon-sm {
	font-size: 14px;
}
.icon-text i{
	vertical-align: middle;
}
.icon-text.rounded-btn-outline i{
	position: relative;
	top: 0px;
	vertical-align: middle;
}
.icon-text.icon-sm i{
	font-size: 18px;
}
.btn-sm {
  font-size:12px!important;	
  padding: 1px 5px;
  border-radius: 5px;
  min-height:14px;
  line-height:14px;
}
.btn-med {
  font-size:16px;	
  padding: 0px 25px;
  border-radius: 12px;
  border-width: 1px;
  margin:0px;
}
.dropdown-content{
	position: absolute;
	top:-20px;
	right:30px;
	background-color: transparent;
	box-shadow: 2px 2px 3px grey;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	z-index:1;
}
.dropDan-menu{
    /*box-sizing: border-box;*/
    z-index: 10;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    /*list-style: none;*/
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    display: block;
    position: absolute;
    transform: translate3d(0px, 25px, 0px);
    top: 0px;
    left: -90px;
    will-change: transform;
}
#menuMain .dropDan-menu{
	left: -40px;
    transform: translate3d(0px, 60px, 0px);
}

.dropDan-menu .goog-te-gadget{
	white-space:normal;
	width:180px;
	background-color:#fafafa;
}
.dropDan-menu .goog-te-gadget select{
	box-shadow:1px 2px 1px gray inset, 1px 1px 2px gray inset;
}
.dropDan-item{
	display:block;
	font-weight:400;
	padding: 0.25rem 1.5rem;
}

.hmanGround{
	background-color: #e0e0e0; /* grey lt2 */
}
.PlayerGuess-btn{
	padding:5px 18px;
	margin: 3px 3px;
}
.PlayerGuess-used{
	padding:5px 18px;
	margin: 3px 3px;
}
.accLetter{
	display:inline-flex;
	justify-content: space-around;
	width:18px;
	height:18px;
	line-height:18px;
    border-radius: 50%;
    background-color: var(--el-color-main);
	font-size:18px;
	vertical-align:middle;
	margin:0 4px;
}
.accLetter span {
    color: white;
	height:18px;
	line-height:18px;
}
.circle {
  	display: inline-block;
	width: 14px;
	height: 14px;
    border-radius: 50%;
}
#cirOuter{
    background-color:#004d40;
}
#cirInner{
 	position: absolute;
    top:7px;
    left:2px;
	width: 10px;
	height: 10px;
    background-color:#00796b;
}
.ring{
	display: inline-block;
	position: relative;
    border: 0px solid red;
	margin: 4px 4px 4px 9px;
}
.circleBig {
  	display: inline-block;
	width: 40px;
	height: 40px;
    border-radius: 50%;
}
#cirOuter1{
    background-color:#fbc02d;  /* yellow dk2 */
}
#cirInner1{
 	position: relative;
    top:3px;
    left:-3px;
	width: 34px;
	height: 34px;
    background-color:#ffff8d; /* yellow acc1*/
}
#cirInner2{
 	position: relative;
    top:9px;
    left:-9px;
	width: 16px;
	height: 16px;
    background-color:#004d40;
}
#cirInner3{
 	position: relative;
    top:-1px;
    left:-3px;
	width: 10px;
	height: 10px;
    background-color:#009688;  /* teal */
}

.GTranMain {
	display:inline-flex;
	background-color: #f9fbe7 ;	/* lime lt5*/
	border: 1px solid #f9fbe7;	/* lime lt5*/
	padding: 0px 12px;
	border-radius: 16px;
}

.GTranPre {
	display:inline;
	position:relative;
	top: 4px;
	font-size: 11px;
	padding: 0 6px 0 0;
	color: #666;  
}
.GTranMain .goog-te-gadget .goog-te-combo{
	margin:1px 0;
}
.hide {
	display: none!important;
}
.goldBonus {
	color: gray;
	font-size: small;
}
/* ======== */
/* 
	Assume device widths as follows:
	
	Mobile phone (portrait): 420px  
	Mobile phone (landscape): 667px 
	iPad (both): 768px  
	Ref: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
*/

/*@media screen and (max-width: 699px) {*/
@media screen and (max-width: 1024px) {
	Body {width: 100%; }
}

@media screen and (max-width: 699px) {
	.ScreenWide{display:none;}	/* swoop header */
}

@media screen and (max-width: 421px) {
	.ScreenMed{display:none;}	/* swoop header */
}

@media screen and (min-width: 700px) {
	.ScreenMobile {display:none!important;}	/* mobile header */
}

/* Mobile portrait - topnavbar floats at top of screen */
@media screen and (max-width: 699px) {
	.main {margin-top: 84px;} 	
}
@media screen and (max-width: 699px) {
	.pageAnchor { 
		display: block;
		padding-top: 90px; 
		margin-top: -90px;
	}
}
/* Mobile portrait - topnavbar floats at top of screen */
@media screen and (min-width: 700px) {
	.main {margin-top: 0px;} 	
}


/* Banner */
@media screen and (max-width: 800px) {
	img#Banner {display: none;}
}


.HomePic {
	height:130px;
	width: auto;
	max-width: 150px;
}
.HomePicSmiley {
	height:80px;
	width: auto;
	max-width:100px;
}
@media screen and (max-width: 580px) {
	.HomePic {
		height:130px;
		width: auto;
		max-width: 150px;
	}
}


/* Learn Language X pages Header section - Reduce size of logo,  Titles, Profile Pics */
@media screen and (max-width: 560px) {
H1 {FONT-SIZE: 28px;}
}


/* List Menus - the large table of links by language, country, etc. */
@media screen and (max-width: 580px) {
table.TblListMenu {width: 98%;}
table.TblListMenuCol {border-spacing: 0px;} /* Cell padding */
table.TblListMenuCol > tbody > tr > td > a {display: inline-block; padding: 3px 0px; margin:3px 0px} 
}


/* Plain Text Menu Links (eg. on Acoount page) - Add spacing on small screen for tapping */
@media screen and (max-width: 580px) {
.LinkTextMenu{line-height: 150%;}
}

/* Data Tables - the wide tables of data with multiple columns */
@media screen and (max-width: 580px) {
table.TblDataRecs > thead { display: none; }
table.TblDataRecs > tbody > tr > td { display: block; padding: .6rem; }
table.TblDataRecs > tbody > tr > td { background: white;}
table.TblDataRecs > tbody > tr > td:first-child { background: #FAF0E9; color: black; }
table.TblDataRecs > tbody > tr > td:before {
	content: attr(data-th); font-weight: bold;
	display: inline-block; /*width: 6rem;*/
	}
}

/* Narrow columns in .TblDataRecs tables - wide on wide screens, but transposed on phones */
.NarrowOnWideScreen{
	max-width: 130px; 
	word-wrap: break-word;
}
@media screen and (max-width: 580px) {	
	.NarrowOnWideScreen{
		max-width: 330px; 
		word-wrap: break-word;
	}
}
.NarrowMedOnWideScreen{
	max-width: 360px; 
	word-wrap: break-word;
}
@media screen and (max-width: 580px) {	
	.NarrowMedOnWideScreen{
		max-width: 320px; 
		word-wrap: break-word;
	}
}

/* Input Form Tables - Wide tables due to left column labels and wide pull-down menus 
	- no column headings */
table.TblInputForm  {border-collapse: collapse; background-color: #FCF7F9;}
@media screen and (max-width: 600px) {
table.TblInputForm > tbody > tr > td { display: block; padding: .6rem; }
table.TblInputForm > tbody > tr:not(.SectionHead):not(.table-heading) > td { background: #FCF7F9;}
table.TblInputForm > tbody > tr:not(.SectionHead):not(.table-heading) > td:first-child { background: #FAF0E9; color: black; }
tr.SectionHead {background-color: #BEBEBE;}
table.TblInputForm > tbody > tr > td {border: 0px solid gray;}
}
/* Input Form Tables (Simple Style [no inner table with border]) - Wide tables due to left column labels and wide pull-down menus 
   - no column headings */
@media screen and (max-width: 640px) {
table.TblInputFormSimple > tbody > tr > td { display: block; padding: .6rem; }
table.TblInputFormSimple > tbody > tr.spacer { display: none;}
}
@media screen and (min-width: 640px) {
table.TblInputFormSimple {width: 570px;;}
}


/* Tables that simply need to be roomier */
@media screen and (max-width: 600px) {
table.TblRoomier > tbody > tr > td {padding: .6rem; }
}

	
/* Wide Tables that makes no sense to transpose or stack vertically - Contain with scrollable DIV */
.WrapTblScroll1{
	overflow-x:auto;
}
DIV.WrapTblScroll{
	overflow-x:auto;
}
.WrapNoScroll{
	display: inline-block;
}
.WidthMaxLim {
	width: 100%;
	max-width: 640px;
}

@media screen and (max-width: 640px) {
	DIV.WrapTblScroll{
		width: 100%;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 100%;
	}
}
@media screen and (max-width: 460px) {
	DIV.WrapTblScroll{
		width: 460px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 460px;
	}
}
@media screen and (max-width: 450px) {
	DIV.WrapTblScroll{
		width: 450px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 450px;
	}
}
@media screen and (max-width: 440px) {
	DIV.WrapTblScroll{
		width: 440px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 440px;
	}
}
@media screen and (max-width: 430px) {
	DIV.WrapTblScroll{
		width: 430px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 430px;
	}
}
@media screen and (max-width: 420px) {
	DIV.WrapTblScroll{
		width: 420px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 420px;
	}
}
@media screen and (max-width: 410px) {
	DIV.WrapTblScroll{
		width: 410px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 410px;
	}
}
@media screen and (max-width: 400px) {
	DIV.WrapTblScroll{
		width: 400px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 400px;
	}
}
@media screen and (max-width: 390px) {
	DIV.WrapTblScroll{
		width: 390px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 390px;
	}
}
@media screen and (max-width: 380px) {
	DIV.WrapTblScroll{
		width: 380px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 380px;
	}
}
@media screen and (max-width: 370px) {
	DIV.WrapTblScroll{
		width: 370px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 370px;
	}
}
@media screen and (max-width: 360px) {
	DIV.WrapTblScroll{
		width: 360px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 360px;
	}
}
@media screen and (max-width: 350px) {
	DIV.WrapTblScroll{
		width: 350px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 350px;
		display: inline-block;
	}
}
@media screen and (max-width: 340px) {
	DIV.WrapTblScroll{
		width: 340px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 340px;
		display: inline-block;
	}
}
@media screen and (max-width: 330px) {
	DIV.WrapTblScroll{
		width: 330px;
		overflow-x:auto;
		display: inline-block;
	}
	.WrapNoScroll{
		width: 330px;
		display: inline-block;
	}
}

DIV.WrapTblScrollText{display: none;}
@media screen and (max-width: 639px) {
	DIV.WrapTblScrollText{display: inline;}
}

/* Items that are half width of the page, eg. text fields in 2-column input tables, like in LessonTableEdit.asp */
.WidthHalf{width: 360px;}
@media screen and (max-width: 640px) {
	.WidthHalf{width: 180px;}
}

/* Always at 100% width*/
DIV.Tbl100Pct{
	width: 100%;
	/*overflow: auto;*/
}

/* Any Table Requiring Transpose for Narrow Screen - no column headings */
@media screen and (max-width: 580px) {
table.TblTranspose > tbody > tr > td { display: block; padding: .3rem; }
}

/* Any content requiring limit to width=570px maximum. Allow to float when less screen  */
@media only screen and (min-width : 640px)  {
	.WidthMaxLim {width: 570px;}
}

/* Prevent mobile safari auto text resize */
@media only screen and (min-width : 320px) and (max-width : 640px) {
	body {-webkit-text-size-adjust: none;}
}

/* Other images that need resizing -  */
@media screen and (max-width: 460px) {
img#ChatCompanion {
    max-width: 310px;
    height: auto;
	}
.ResponsiveIMG {
    max-width: 310px;
    height: auto;
	}
}


/* ======= */

/* Logo, Left, Top Panels and Menus */
@media screen and (max-width: 699px) {
IMG#Banner1 { display: none; }
}

/* Page 3-Column Layout */
@media screen and (max-width: 699px) {
table#LayoutCol3 > tbody > tr > td { display: block;}
table#LayoutCol3 > #LCol { display: none; }
}

/* The Basics Box */
@media screen and (max-width: 699px) {
DIV#BasicsInline {
	width: 80%;
	padding: 2px;
	margin-left: auto;		/* center align */
	margin-right: auto;
  	}
DIV#BasicsRMenu{
	display: none;
	}
}
@media screen and (min-width: 699px) {
	DIV#BasicsInline {
		display: none;
		}
}

/* ======== */

/* Show iPhone style toggle */
input.Toggle {
  display:none;
}
input.Toggle + label {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 50px;
  border-radius: 15px;
  cursor: pointer;
}

input.Toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  /*background: rgba(19, 191, 17, 0);*/
  background: #b9f6ca;
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input.Toggle + label:after {
  content: "";
  position: absolute;
  display: inline;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
input.Toggle:checked + label:before {
  width: 50px;
  /*background: rgba(19, 191, 17, 1);*/
  /*background: #b9f6ca; */
  background: #26a69a;  /* teal lt 1 */
}

input.Toggle:checked + label:after {
  left: 20px;
//  box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 0 1px #69f0ae, 0 2px 4px rgba(0, 0, 0, .2);
}

.responsiveImg{
	width:100%;
	height: auto;
}

#makeApp{
	display:none;
	position: fixed;
	bottom: 4px;
	width: 100%;
	text-align: center;
	background-color: black;
	opacity: 0.7;
}
#makeApp .label{
	display: inline-block;
	color: white;
	font-size: 14px;
	padding: 6px 0 8px 0;
}
#makeApp .more-vert{
	position: relative;
	top: 2px;
	font-size: 14px;
}
#makeApp .ios-share{
	position: relative;
	top: 2px;
}
#makeApp .close{
	position: absolute;
	color: white;
	font-size: 14px;
	padding:6px;
	top: 0px;
	right: 4px;
	cursor: pointer;
}

/* ham */
.bg-voicechat {
	background: url(../../images/waveform.svg) no-repeat right center;
	background-size: cover;
	width: 12rem;
	height: 6rem;
}

.bg-testimonials {
	background: url(../../images/5stars.png) no-repeat center;
	background-size: contain;
	width: 6rem;
	height: 4.5rem;
}

@media screen and (min-width:1023.9px) {
	.bg-testimonials {
		width: 9rem;
		height: 6.75rem;
	}
	.width__custom {
		width: 375px !important;
	}
}
.bg-banner {
	background: url(../../images/friendsAdventure250.jpeg) no-repeat 50% 40%;
	/*	background: url(../images/banner.ca5138e3.svg) no-repeat right center;*/
	background-size: cover;
}

.hpBannerH1{
	text-shadow: 0 0 3px #ffffff, 0 0 1px #ffffff, 0 0 1px #ffffff, 0 0 1px #ffffff;
}
.hpBannerHLine2 {
	text-shadow: 0 0 3px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;
	color: var(--el-color-main);
	font-size: 1.25rem;
	line-height: 1.75rem;
}
@media screen and (max-width: 673px) {
	.hpBannerHLine2 {
		font-weight: 500;
		color: #00695c;
		font-size: 1.0rem;
		line-height: 1.25rem;
	}
}
.bg-media {
	background: url("../../images/awards.3b864a04.svg");
	background-size: 30%
}

.bg-newusers {
	/*background: url("../../images/hellos.png") no-repeat center;
	background-size: cover;*/
}

.bg-effective {
	background: url("../../images/checkmark.svg") no-repeat center center;
	background-size: cover
}

.bg-search {
	/*	background: url("../../images/bg.f111fc5d.png") no-repeat center center;*/
	background: url("../../images/Globe300.jpeg") no-repeat center center;
	background-size: cover
}

/* need this to avoid too high search form */
.bg-search #bg-search1 {
	height: inherit;
	z-index: 23;
}
a.dropdown-item, a.dropDan-item{
	color: var(--el-color-main);
}
.footer-lang {
	height: 450px;
	overflow-y: scroll;
}

.footer-lang::-webkit-scrollbar-thumb {
	opacity: 0 !important;
	visibility: hidden !important;
	background-color: transparent !important;
}

.footer-lang::-webkit-scrollbar-track {
	opacity: 0 !important;
	visibility: hidden !important;
	background-color: transparent !important;
}

.footer-lang::-webkit-scrollbar {
	opacity: 0 !important;
	visibility: hidden !important;
	background-color: transparent !important;
}

.footer-langs-wrapper, .account-others-wrapper{
	display:flex;
	justify-content: space-between;
	margin-bottom:12px;
}
@media screen and (max-width: 580px) {
	.footer-langs-wrapper, .account-others-wrapper{
		width:160px;
		flex-direction: Column;
	}
}
.footer-col {
	display: flex;
	justify-content: space-between;
	/* gap: 16rem; */
	width: 100%;
}

*,
:before,
:after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: currentColor
}



/* Action Buttons */
.action-buttons {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: auto;
	max-width:500px;
	margin-bottom:30px;
}

.action-buttons button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 10px;
	margin:5px;
	background-color: #00796b;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.action-buttons button.rev, .free-hi-button.rev {
	background-color: #fffde7;	/* yellow lt 5*/
	color: #00796b;
	border:1px solid #00796b;
}
.action-buttons button:hover, .free-hi-button.rev:hover {
	/*background-color: #00bcd4;*/
	opacity:.5;
}

.action-buttons .material-icons,
.action-buttons .material-icons-outlined {
	font-size: 24px;
	margin-bottom: 5px;
}
.action-buttons .material-icons.rev,
.action-buttons .material-icons-outlined.rev {
	background-color:white;
	color:#00796b;
}

/* Shrink action buttons on small screen */
@media (max-width: 436px) {
	.action-buttons button {
		padding: 5px;
	}
	.action-buttons .material-icons,
	.action-buttons .material-icons-outlined {
		font-size: 18px;
		margin-bottom: 3px;
	}
	.action-buttons .button-label {
		font-size: 10px;
	}
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}


input[type=checkbox], input[type=text] , input[type=email] , input[type=password], textarea {
	box-shadow: 1px 1px 1px gray inset, 1px 1px 3px gray inset ;
	padding:0px 3px;
}
button,
select {
	text-transform: none
}

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

fieldset {
	margin: 0;
	padding: 0
}

legend {
	padding: 0
}

ul,ol {  /* override bootstrap _reboot.scss */
	margin-top:1rem;
	margin-bottom:inherit;
}

menu {
	list-style: none;
	margin: 0;
	padding: 0
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	opacity: 1;
	color: #9ca3af
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	opacity: 1;
	color: #9ca3af
}

input::placeholder,
textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}

button,
[role=button] {
	cursor: pointer
}

button:focus {
	outline:0;  /* override reboot that draws a blue outline */
}

:disabled {
	cursor: default
}

/*img,*/
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	vertical-align: middle
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

[hidden] {
	display: none
}

.dark {
	color-schema: dark
}

@media (min-width:1340px) and (max-width:1400px) {}

.height-max-content {
	height: max-content;
}



html,
body,
#app {
	height: 100vh;
	margin: 0;
	padding: 0
}

html.dark {
	background: #222;
	color: #fff
}

::-webkit-scrollbar {
	/*width: 6px;
	height: 6px*/
}

::-webkit-scrollbar-track {
	border-radius: 3px;
	background: rgba(0, 0, 0, .06);
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .08)
}

::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(0, 0, 0, .12);
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .2)
}