*{
	font-family: Gothic, 'droid Arabic Kufi', 'Raleway', sans-serif;
	/*font-family:'droid Arabic Kufi', 'Raleway', sans-serif;*/
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
	direction: ltr;
}

@font-face {
    font-family: 'Gothic';
    src: URL(../../fonts/GOTHIC.TTF);
    /*src: URL(../../fonts/GothamLight.ttf) ;*/
}

*[onclick]{
	cursor: pointer;
}

html {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

.ltr {
	direction: ltr;
}

.RightFloat {
	float: left;
}

.LeftFloat {
	float: right;
}

*.rightborder {
	border-right: 1px solid #2c365a;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}


*.Width1 {
	width: 1px;
}

*.leftTextAlign {
	text-align: left;
}

*.CenterTextAlign {
	text-align: center;
}

*.MinHeight300 {
	min-height: 300px;
}

*.MinHeight230 {
	min-height: 230px;
}

*.MinHeight110 {
	min-height: 110px;
}

*.MinHeight130 {
	min-height: 130px;
}

*.MarginBottom50 {
	margin-bottom: 50px;
}

*.MinHeight150 {
	min-height: 150px;
}

*.MaxWidth110 {
	max-width: 110px;
	min-width: 110px;
	width: 110px;
}

*.MaxWidth155 {
	max-width: 155px;
	min-width: 155px;
	width: 155px;
}

*.Width95P {
	width: 95%;
}

*.TopVerticalAlign {
	vertical-align: top;
}

*.MiddleVerticalAlign {
	vertical-align: middle;
}

.AddForm input.Width95P {
	width: 95%;
}

.Packages.AddForm .leftTextAlign {
	text-align: left;
}

.AddForm.leftTextAlign {
	text-align: left;
}

.Padding20 {
	padding: 5px 20px;
}

.LoginFormHelper {
	background: #ff0000;
	filter: bleftness(500%);
}

.LoginForm input {
    font-size: 12px;
    display: block;
    color: #2c365a;
    background: #d9eefa00;
    border: 0px solid #2c365a;
    border-bottom: 1px solid #2c365a;
    margin: 20px auto;
    width: 260px;
    font-size: 15px;
    line-height: 17px;
    padding: 20px 20px;
    transition: all 0.1s ease-out;
}

.LoginForm input:hover, .LoginForm input:active, .LoginForm input:focus {
	color: #2c365a;
	background: #e8ecf1;
	background: rgba(255, 255, 255, 0.3); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(12px);         /* blurs shining bg behind it */
	-webkit-backdrop-filter: blur(12px);

	border-radius: 10px;
	transition: all 0.2s ease-out;
}

.LoginForm select {
    font-size: 12px;
    display: block;
    color: #2c365a;
    background: #ffffff;
    border: 0px solid #2c365a;
    border-bottom: 1px solid #2c365a;
    margin: 20px auto;
    width: 300px;
    font-size: 15px;
    line-height: 17px;
    padding: 20px 20px;
    transition: all 0.1s ease-out;
}

.LoginForm select:hover, .LoginForm select:active, .LoginForm select:focus {
	color: #2c365a;
	background: #e8ecf1;
	border-radius: 0px 0px 20px 0px;
	transition: all 0.2s ease-out;
}

.LoginForm input[type='submit'] {
	font-size: 12px;
	color: #ffffff;
	border-radius: 10px;
	background: #2c365a;
	cursor: pointer;
	padding: 10px 10px;
	transition: all 0.1s ease-out;
}

.LoginForm input[type='submit']:hover {
	color: #FFFFFF;
	background: #84769a;
	transition: all 0.2s ease-out;
}

.Logo {
	background: URL(../../img/Logo.png);
	width: 67px;
	height: 67px;
	background-size: 100% 100%;
	margin: 0 auto;
}

.container {
  cursor: pointer;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.AddForm .container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 7px;
  left: 3px;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.Section .checkmark {
    position: absolute;
    top: 8px;
    left: 0px;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2c365a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  right: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.Welcome {
	margin: 30px;
	height: 20px;
}


.Error {
	background: #96281b;
    color: #ffffff;
}

.MainPage {
	display: inline-block;
	width: 100%;
	height: 100%;
	text-align: left;
}

.TopMenu {
	display: inline-block;
    width: 99%;
    margin: 10px 0.5%;
    border-radius: 10px;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    max-height: 15%;
    color: #2c365a;
    background: #ffffff;
    z-index: 9999999999;
    border-bottom: 0px solid #2c365a;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px; #f1f1fa */
}

.TopMenu a {
	color: #2c365a;
	text-decoration: none;
}

a {
	color: #00222d;
	text-decoration: none;
}

.TopMenuWelcome {
	display: inline-block;
    position: relative;
	vertical-align: top;
	padding: 0px 10px;
    left: 265px;
}

a.MenuLi {
	text-decoration: none;
    display: block;
}

.MenuLiText {
	display: inline-block;
}

.MenuLi {
    padding: 5px 15px;
	color: rgba(52, 73, 94, 0.8);
	font-size: 12px;
	line-height: 40px;
	background: #ffffff;
	vertical-align: top;
	transition: all 0.1s ease-out;
}

.MenuLi i {
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin: 0px 1px 0px 5px;
	line-height: 20px;
	width: 20px;
	transition: all 0.1s ease-out;
}

.MenuLi:hover {
	color: #2c365a;
	/*background: #f1f1fa;
	background: #2c365a;*/
	transition: all 0.2s ease-out;
}

.MenuLi:hover i {
	background: #2c365a;
    color: #fff;
    border-radius: 50px;
    padding: 8px;
    transform: translate(-8px, 0px);
	transition: all 0.2s ease-out;
}

a.DockE.MyTests {
	background: #63A18F;
	/*background: #2a4223;*/
}

a.DockE.MyTests i {
	font-size: 40px;
	/*background: #2a4223;*/
}

a.DockE.OnGoing {
	background: #84769a;
	/*background: #2a4223;*/
}

a.DockE.MyCertificates {
	background: #92a6b9;
	/*background: #2a4223;*/
}

a.DockE.MyCohorts {
	background: #84769a;
	/*background: #e4a26a;*/
}

a.DockE.Settings {
	background: #e8d978;
	/*background: #0073c8;*/
}

a.DockE.Profile {
	background: #779d8b;
	/*background: #662d4a;*/
}

.DockElementsFont {
	color: #2c365a;
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
}

.LogOut {
    display: inline-block;
    position: relative;
    /* float: right; */
    /* height: 53px; */
    padding: 0px 10px;
    /* right: 100px; */
    color: #2c365a;
	transition: all 0.1s ease-out;
}

.LogOut:hover {
	transition: all 0.2s ease-out;
}

.LogOut:hover .LogOutChoise, .LogOut:active .LogOutChoise, .LogOut:focus .LogOutChoise {
	display: block;
	transition: all 0.2s ease-out;
}

.LogOut i {
	transition: all 0.2s ease-out;
}

.LogOut:hover i {

    transform: scale(1.3);
	transition: all 0.2s ease-out;
}

.LogOutChoise {
	display: none;
    background: #FFFFFF;
    z-index: 999999;
    position: absolute;
    top: 50px;
    left: 0px;
    border-radius: 10px;
    padding: 8px 0px;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
}

.LogOutOption {
	padding: 1px 10px;
    color: #2c365a;
    min-width: 150px;
    font-size: 14px;
    line-height: 26px;
    background: #FFFFFF;
    transition: all 0.1s ease-out;
}

.LogOutOption:hover {
	color: #FFFFFF;
	background: #2c365a;

	transition: all 0.2s ease-out;
}

.leftMenu {
	display: inline-block;
    width: 15%;
    vertical-align: top;
    margin: 0;
    /* padding: 50px 0px; */
    /* border-radius: 0px 50px 50px 0px; */
    /* height: 100%; */
    line-height: 40px;
    /* height: 100%; */
    color: #2c365a;
    background: #FFFFFF;
    /* border: 2px solid #2c365a; #f2f2f2*/
    /* border-left: 0px; */
    position: fixed;
    overflow: auto;
    left: 0;
    top: 50px;
    bottom: 0px;
    z-index: 99;
}

#BlackShodow {
	background: #ffffff;
    z-index: 9999999999999999;
    position: fixed;
	display: block;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
	transition: all 0.4s ease-out;
}

.BlackShodowImg {
	margin-top: 275px;
}

.Row {
	width: 100%;
	margin: 0 auto;
	display: inline-block;
}

.ThisMonth {
    display: inline-block;
    background: #FFFFFF;
    color: #2c365a;
    border: 2px solid #2c365a;
    border-radius: 10px;
    padding: 0;
    margin: 3% 0.5%;
    height: 550px;
	transition: all 0.1s ease-out;
}

.ThisMonth:hover {
	background: #446cb3;
	color: #FFFFFF;
	transition: all 0.2s ease-out;
}

.ThisMonthHeader {
	background: #2c365a;
	color: #FFFFFF;
	border-radius: 0px 0px 30px 30px;
	width: 75%;
	padding: 1% 0%;
	margin: 0 auto;
	text-align: center;
	transition: all 0.1s ease-out;
}

.ThisMonth:hover .ThisMonthHeader {
	background: #FFFFFF;
	color: #2c365a;
	transition: all 0.2s ease-out;

}

.ThisMonth table{
	width: 100%;
	margin: 0;
	margin-top: 20px;
	padding: 0;
    text-align: center;
    border-collapse: collapse;
}

.ThisMonth table thead th{
	background: #2c365a;
	color: #FFFFFF;
	font-size: 13px;
}

.ThisMonth table thead{
	background: #2c365a;
	color: #FFFFFF;
	font-size: 13px;
}

.ThisMonth table tbody tr{
	height: 60px;
}

.ThisMonth table tbody td{
	width: 50px;
}

.ThisDay {
	background: #FFFFFF;
	color: #2c365a;
	border-radius: 50px;
	width: 45px;
	height: 45px;
	line-height: 45px;
}

.Gray {
	color: #dadada;
}

.Packages {
	display: inline-block;
	width: 100%;
	text-align: center;
    max-width: 100%;
}

.PackagesOverflow {
	display: inline-block;
    width: 100%;
    text-align: center;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow: auto;
	-webkit-overflow-scrolling: touch;
    position: relative;
}

.HeightBorder {
    height: 40px;
    overflow: hidden;
}

.SetupNavigater {
	text-align: right;

}

.InformationQueueRow {
	width: 95%;
	margin: 10px 0px;
	padding-left: 5%;
	text-align: left;
	background: #f5f5f7;
	color: #2c365a;
	box-shadow:  0 0 5px 1px rgba(216,216,216,.5);
	transition: all 0.1s ease-out;
}

.InformationQueueRow:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 1px;
	transition: all 0.2s ease-out;

}

.InformationQueueRowTD {
	vertical-align: middle;
	display: inline-block;
	margin: 10px;
}

.GDoneButton {
    padding: 0px 10px;
	margin: 0 4px;
	background: #ffffff;
	border-radius: 10px;
	color: #2c365a;
    transition: all 0.2s ease-out;
}

.GDoneButton:hover {
	background: #d6d6d6;
	color: #2c365a;
    transition: all 0.1s ease-out;
}

.ShadowOnDiv {
	background: #ababab;
	text-align: center;
	color: #FFFFFF;
	transition: all 0.1s ease-out;
}

.ShadowOnDiv:hover {
	background: #2c365a;
	transition: all 0.2s ease-out;
}

.Botton {
	display: inline-block;
	text-decoration: none;
	background: #2c365a;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
	color: #FFFFFF;
	padding: 4px 10px;
	margin: 10px 0px;
	margin-right: 10px;
	border-radius: 10px;
	transition: all 0.1s ease-out;
}

.Botton:hover {
	background: #2c365a90;
	transition: all 0.2s ease-out;
}

.SetupWelcome {
	font-size: 60px;
	line-height: 150px;
	text-align: center;
	font-weight: 900;
	color: #2c365a;
}

.SetupText1 {
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	font-weight: 100;
	color: #2c365a;
}

.SetupText2 {
	font-size: 16px;
	line-height: 20px;
	text-align: justify;
	font-weight: 100;
	width: 70%;
	margin: 0 auto;
	color: #2c365a;
}

.PackagesN.CenterTextAlign {
	text-align: center;
}

.PackagesN {
	display: inline-block;
	width: 100%;
	text-align: left;
    max-width: 100%;
}

.Row333 {
	width: 32%;
    margin: 1% 0.5%;
    display: inline-block;
	text-align: left;
}

.Row666 {
	width: 65.5%;
    margin: 1% 0.5%;
    display: inline-block;
	text-align: left;
}

.PackageN .container {
	margin-bottom: 0px;
}

.PackageN .checkmark {
	position: absolute;
    top: 8px;
    left: 0px;
    height: 25px;
    width: 25px;
}


.PackageNHeaderLeft {
	display: inline-block;
	float: right;
}


.Package:hover {
	background: #2c365a;
	color: #FFFFFF;
	transition: all 0.2s ease-out;
}

.PackagesS {
    display: inline-block;
    background: #FFFFFF;
    color: #2c365a;
    border: 2px solid #2c365a;
	border-radius: 10px;
	text-align: left;
	font-size: 13px;
	padding: 20px 0px;
	transition: all 0.1s ease-out;
}

.PackagesS:hover {
	background: #446cb3;
	color: #FFFFFF;
	transition: all 0.2s ease-out;
}

.PackageM {
	display: inline-block;
    vertical-align: top;
    /* background: #f5f5f7; */
    color: #2c365a;
    text-align: left;
	border-radius: 10px;
    font-size: 13px;
    padding: 0px;
    transition: all 0.1s ease-out;
}


.PackagesS table{
	margin-left: 20px;
}

.Row13 {
    width: 15%;
    margin: 0.1% 0.1%;
    padding: 0.3% 0.3%;
	display: inline-block;
}

.Row25 {
    width: 23.6%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row75 {
    width: 73.3%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row32 {
	width: 32%;
    margin: 0.5% 0.5%;
	display: inline-block;
}

.Row33 {
	width: 31.9%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row32_ {
	width: 32%;
    margin: 0.5% 0.4%;
    vertical-align: top;
	display: inline-block;
}

.Row66 {
	width: 65%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row7 {
    width: 14%;
    margin: 0.2% 0.1%;
	display: inline-block;
}

.Row85 {
    width: 84%;
    margin: 0.2% 0.1%;
	display: inline-block;
}

.Row17 {
	width: 17%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row50 {
    width: 48.6%;

    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.AddForm .Information.Row35 {
	width: 33%;
    margin: 3% 0.2%;
	display: inline-block;
}

.AddForm .Information.Row65 {
	width: 65%;
    margin: 3% 0.2%;
	display: inline-block;
    min-height: 382px;
}

.AddForm .Information.Row35_ {
	width: 33%;
    margin: 0% 0.2%;
    background: #f5f5f7;
	border: 0px solid #2c365a;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
	display: inline-block;
}

.AddForm .Information.Row65_ {
	width: 65%;
    margin: 1% 0.2%;
	border: 0px solid #2c365a;
    background: #f5f5f7;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
	display: inline-block;
}

.Row100_ .PackageNHeader {
	background: #ffffff00;
}

.Row100_ {
	width: 95%;
    margin: 1% 0%;
	padding: 5% 3%;
	display: inline-block;
}

.Row100_:hover {
	background: #2c365a;
	color: #ffffff;
}

.Row100 {
    width: 99%;
    margin: 1% 0.5%;
	display: inline-block;
}

.Row101 {
	width: 99%;
    margin: auto;
	display: inline-block;
}

.AddForm .FullWidth {
	width: 96%;
	margin: 0;
}

.AddForm.SFullWidth {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.AddForm {
	/*width: 95%;*/
	margin: 0 auto;
	text-align: left;
}

.AddForm .Information {
	margin: 0.5% 0.5%;
	/*box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 2px;*/
	vertical-align: top;
	text-align: center;
	background: #FFFFFF;
	border: 0px solid #2c365a;
	border-radius: 10px;
	vertical-align: top;
}

.AddForm .InformationHeader {
	border-radius: 5px 5px 0px 0px;
	text-align: left;
	font-weight: 900;
	padding-left: 3%;
	color: #2c365a;
	font-size: 15px;
	margin: 0;
}

.AddForm .InformationHeaderM {
	font-weight: 900;
    margin: 0;
    font-size: 13px;
}

.AddForm .InformationHeaderi {
	background: #2c365a;
	color: #FFFFFF;
	margin: 0;
}

.AddForm.GetAppAddForm .InformationHeaderi {
	background: #FFFFFF;
	color: #2c365a;
	margin: 0;
}

.AddForm .InformationHeaderi:hover, .AddForm .InformationHeaderi:active, .AddForm .InformationHeaderi:focus {
	background: #FFFFFF;
	color: #2c365a;

}

.AddForm input {
	font-size: 12px;
    background: rgba(255, 255, 255, 0.1); 
	color: #2c365a;
	display: inline-block;
	border: 0px solid #2c365a;
	border-bottom: 1px solid #2c365a;
	/*margin: 20px auto;*/
	width: 45%;
	line-height: 17px;
	padding: 20px 2%;
	transition: all 0.1s ease-out;
}

.AddForm input[hidden]{
	display: none;
}

.AddForm textarea[hidden]{
	display: none;
}

.AddForm select {
	font-size: 12px;
    background: rgba(255, 255, 255, 0.1); 
    color: #2c365a;
    display: block;
    border: 0px solid #2c365a;
    border-bottom: 1px solid #2c365a;
    /*margin: 20px auto;*/
    width: 80%;
    line-height: 17px;
    padding: 16.5px 20px;
	transition: all 0.1s ease-out;
}

.AddForm textarea {
	font-size: 12px;
	display: inline-block;
    background: rgba(255, 255, 255, 0.1); 
	color: #2c365a;
	border: 0px solid #2c365a;
	border-bottom: 1px solid #2c365a;
	/*margin: 20px auto;*/
	width: 45%;
	height: 17px;
	font-size: 12px;
	line-height: 17px;
	padding: 20px 2%;
	transition: all 0.1s ease-out;
}

.AddForm textarea.SmallTextArea {
    min-height: 40px;
}

.AddForm textarea.Width90Per {
	width: 90%;
}

.AddForm textarea.Width95Per {
	width: 95%;
}

.AddForm input.Width90Per {
	width: 90%;
}

.AddForm input.Width95Per {
	width: 95%;
}

.AddForm textarea.Width95PerH {
	width: 95%;
	height: 300px;
}

.AddForm input.Width90Per {
	width: 90%;
}

.AddForm input.Width95PerH {
	width: 95%;
}

.AddForm input:hover, .AddForm input:active, .AddForm input:focus {
	border-radius: 20px;
	background: #e8ecf1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease-out;
}

.AddForm select:hover, .AddForm select:active, .AddForm select:focus {
	border-radius: 20px;
	background: #e8ecf1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease-out;
}

.AddForm textarea:hover, .AddForm textarea:active, .AddForm textarea:focus {
	border-radius: 20px;
	background: #e8ecf1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease-out;
}

.AddForm input[type='date'] {
	cursor: pointer;

}

.AddForm input[type='submit'] {
	font-size: 12px;
	color: #ffffff;
	border-radius: 10px;
	background: #2c365a;
	cursor: pointer;
	padding: 10px 20px;
	transition: all 0.1s ease-out;
}

.AddForm input[type='submit']:hover, .AddForm input[type='submit']:active, .AddForm input[type='submit']:focus {
	color: #FFFFFF;
	background: #84769a;
	transition: all 0.2s ease-out;
}

.AddForm .TimeInput {
	width: 23%;
	margin-right: 2%;
	display: inline-block;
    vertical-align: middle;
}

.AddForm .TimeInputLabel {
	width: 20%;
	display: inline-block;
    vertical-align: middle;
}

.AddForm .TimeInputLabel1 {
	width: 12%;
	display: inline-block;
    vertical-align: middle;
}

.AddForm .TimeInput1 {
	width: 13%;
	display: inline-block;
    vertical-align: middle;
}

.AddForm.GetAppAddForm .TimeInput1 {
	width: 23%;
	display: inline-block;
    vertical-align: middle;
}

.AddForm.GetAppAddForm.AutoWidthH .TimeInput1 {
	width: auto;
	display: inline-block;
    vertical-align: middle;
}

.PatientSuggest {
	display: inline-block;
	background: #446cb3;
	border: 2px solid #446cb3;
	color: #ffffff;
	padding: 20px;
	margin: 20px;
	transition: all 0.1s ease-out;
}

.PatientSuggest:hover {
	border-radius: 0px 0px 20px 0px;
	background: #ffffff;
	border: 2px solid #2c365a;
	color: #2c365a;
	transition: all 0.2s ease-out;

}

.Suggestion {
	background: #ffffff;
    color: #2c365a;
    border: 1px solid #e3e6e8;
    border-radius: 10px;
    vertical-align: top;
    padding: 10px;
	font-size: 14px;
    line-height: 16px;
	text-align: left;
    margin: 10px;
    max-width: 40%;
	box-shadow: 0 0 0px 0px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
    display: inline-block;
}

.Suggestion:hover {
	border-radius: 0px 0px 20px 0px;
	background: #e8ecf1;
	box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
	transition: all 0.2s ease-out;

}

.OK {
	background: #23cba7;
    text-align: left;
    color: #ffffff;
	font-size: 15px;
    border-radius: 10px;
    padding: 20px 1%;
    margin: 0.5% auto;
    width: 86%;
    box-shadow: rgba(0, 185, 185, 0.2) 0px 0px 4px 2px;
}

.ERROR {
	background: #84769a;
    text-align: center;
    color: #ffffff;
	font-size: 15px;
    padding: 20px 1%;
    margin: 0.5% auto;
    width: 86%;
    border-radius: 10px;
	box-shadow: rgba(242, 132, 132, 0.5) 0px 0px 4px 2px;
}

.GetIt {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 10px;
	transition: all 0.1s ease-out;
}

.GetIt:hover {
	background: #23cba7;
	color: #ffffff;
	transition: all 0.2s ease-out;
}

.CancelIt {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 10px;
	transition: all 0.1s ease-out;
}

.CancelIt:hover {
	background: #84769a;
	color: #ffffff;
	transition: all 0.2s ease-out;
}

.QueueIt {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 10px;
	transition: all 0.1s ease-out;
}

.QueueIt:hover {
	background: #446cb3;
	color: #ffffff;
	transition: all 0.2s ease-out;
}

.TableClass3{
	width: 95%;
	max-width: 95%;
	overflow-x: hiden;
	overflow-y: auto;
	margin: 0 auto;
	margin-top: 20px;
	padding: 0;
	direction: ltr;
    text-align: center;
	border-collapse: collapse;
	border: 0px solid #446cb3;
}

.TableClass3 tr:nth-child(odd)   { background-color:#f5f5f7; }
.TableClass3 tr:nth-child(even)    { background-color:#fff; }

.TableClass3 input{
	width: 95%;
	margin: 0 auto;
}

.TableClass3 th.half, .TableClass3 td.half {
	border-right: 1px solid #446cb3;
}

.TableClass2{
	min-width: 48%;
	overflow-x: hiden;
	overflow-y: auto;
	margin: 0 auto;
	margin-top: 20px;
	padding: 0;
    text-align: left;
	border-collapse: collapse;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    border-radius: 10px;
}

.TableClass2 th.LangId{
	width: 80px;
	min-width: 80px;
}

.TableClass2 th.LangValue{
	width: 200px;
	min-width: 200px;
}

.IndexPage .TableClass2{
	width: 94%;
	padding: 1% 3%;
	max-width: 100%;
	margin-top: 0px;
	font-size: 13px;
	box-shadow: rgba(52, 73, 94, 0.2) 0px 0px 0px 0px;
}

.IndexPage .TableClass2 th.LangId{
	width: 20px;
	min-width: 20px;
}

.IndexPage .TableClass2 th.LangValue{
	width: 110px;
	min-width: 110px;
}

.TableClass2 td.GrayBlue {
	background: #f5f5f7;
}

.SmallFont {
	font-size: 10px;
}

.TableClass1{
	width: 98%;
	max-width: 99%;
	overflow-x: hiden;
	overflow-y: auto;
	margin: 1%;
	margin-top: 20px;
	padding: 0;
    text-align: center;
	border-collapse: collapse;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    border-radius: 10px;
}

.TableClass1 tr {
	margin-top: 5px;
}

.TableClass1 th {
	min-width: 50px;
}

.TableClass1 td.leftborder,.TableClass1 th.leftborder {
	border-right: 1px solid #788ea5;
}

.TableClass1 td {
    /*box-shadow: inset rgba(52, 73, 94, 0.2) 5px 0px 5px -4px;
	*/
	border-right: 1px solid #dedede;
	min-width: 100px;
}

.TableClass1 td.GrayBlue {
	background: #f5f5f7;
}

.TableClass1 th.GrayBlue {
	background: #f5f5f7;
}

.TableClass1 th.Min50 {
	min-width: 50px;
}

.TableClass1 tr:nth-child(odd)   { 
	background-color:#e7e9ed; 
}
.TableClass1 tr:nth-child(even)    { 
	background-color:#fff; 
}

.TableClass1 tr:first-child th { 
	background-color:#2c365a; 
	color: #fff;
}
.TableClass1 tr:first-child th:first-child   { 
	border-radius: 10px 0px 0px 0px;
}
.TableClass1 tr:first-child th:last-child { 
	border-radius: 0px 10px 0px 0px;
}
.TableClass1 tr:last-child td:first-child   { 
	border-radius: 0px 0px 0px 10px;
}
.TableClass1 tr:last-child td:last-child { 
	border-radius: 0px 0px 10px 0px;
}

.Green {
	margin: 5px 0px;
}

.Red {
	margin: 5px 0px;
	color: #FFFFFF;
	background: #84769a;
}

.PackageHeadText {
	font-size: 32px;
    line-height: 68px;
    /*margin-right: 10px;*/
    font-weight: 400;
    vertical-align: top;
}

.PackageNumber {
	font-size: 68px;
    line-height: 68px;
    margin-right: 10px;
    font-weight: 100;
    vertical-align: top;
    font-family: monospace;
}

.PackageNumber1 {
	font-size: 33px;
	line-height: 67px;
	margin-right: 10px;
    font-weight: 900;
}

.PackageClick {
	display: block;
	width: 100%;
	text-align: center;
	padding: 20px 0px;
	margin: 10px 0px;
}

.RedPackage {
    background: #ffffff;
    border: 0px solid #84769a;
	/*box-shadow: #e26a6a73 0px 0px 4px 2px;*/
    color: #84769a;
}
/*
.RedPackage:hover .PackageImg img {
	filter: invert(1);
	transition: all 0.3s ease-out;
}

.RedPackage:hover {
    background: #84769a;
    border: 0px solid #84769a;
    color: #ffffff;
	transition: all 0.3s ease-out;
}*/

.RedPackage .PackageClick {
    background: #f1a9a0;
}

.BluePackage1 {
    background: #ffffff;
	/*box-shadow: #84769a73 0px 0px 4px 2px;*/
    border: 0px solid #2c365a;
    color: #2c365a;
}

.BluePackage1:hover {
    background: #2c365a;
    border: 0px solid #2c365a;
    color: #ffffff;
	transition: all 0.3s ease-out;
}
.BluePackage1:hover .PackageImg img {
	filter: invert(1);
	transition: all 0.3s ease-out;
}

.BluePackage1 .PackageClick {
    background: #dcc6e0;
}

.BluePackage {
    background: #ffffff;
	/*box-shadow: #84769a73 0px 0px 4px 2px;*/
    border: 0px solid #2c365a;
    color: #2c365a;
}
/*
.BluePackage:hover {
    background: #2c365a;
    border: 0px solid #2c365a;
    color: #ffffff;
	transition: all 0.3s ease-out;
}
.BluePackage:hover .PackageImg img {
	filter: invert(1);
	transition: all 0.3s ease-out;
}*/

.BluePackage .PackageClick {
    background: #dcc6e0;
}

.GreenPackage {
    background: #ffffff;
    border: 0px solid #779d8b;
	/*box-shadow: #29f1c373 0px 0px 4px 2px;*/
    color: #779d8b;
}
/*
.GreenPackage:hover {
    background: #779d8b;
    color: #ffffff;
	transition: all 0.3s ease-out;
}
.GreenPackage:hover .PackageImg img {
	filter: invert(1);
	transition: all 0.3s ease-out;
}*/

.GreenPackage .PackageClick {
    background: #7af5da;
}

.YellowPackage {
    background: #ffffff;
    border: 0px solid #e8d978;
	/*box-shadow: #4ecdc473 0px 0px 4px 2px;*/
    color: #e8d978;
}

.YellowPackage:hover {
    background: #e8d978;
    border: 0px solid #e8d978;
    color: #ffffff;
	transition: all 0.3s ease-out;
}
.YellowPackage:hover .PackageImg img {
	filter: invert(1);
	transition: all 0.3s ease-out;
}

.YellowPackage .PackageClick {
    background: #7fe0db;
}

.DarkPackage {
    color: #ffffff;
    border: 2px solid #2c365a;
    background: #2c365a;
}

textarea.Notes {
	width: 90%;
	height: 180px;
}

.Packages.AddForm{
	width:100%;
}

.DayPackage {
	display: inline-block;
    font-size: 13px;
	border-radius: 10px;
    /* height: 35px; */
    line-height: 40px;
    color: #2c365a;
    border-bottom: 0px solid #cbd5de;
    border-right: 0px solid #ebf0f5;
    padding: 0px;
    text-align: center;
    vertical-align: top;
    transition: all 0.1s ease-out;
}
/*
.DayPackage:hover {
    background: #2c365a;
    color: #ffffff;
    transition: all 0.2s ease-out;
}*/

.DayPackage:hover .DayNumber {
    background: #ffffff;
    color: #2c365a;
    transition: all 0.2s ease-out;
}

.LeftCentered {
	text-align: left;
	width: auto;
	margin: 0 auto;
}

.RightCentered {
	text-align: right;
	width: auto;
	margin: 0 auto;
}

.IndexPage .Packages .Information{
    min-height: 460px;
}

.Checked {
	height: 35px;
    background: #36d7b7;
    min-width: 0%;
    border-radius: 0px 50px 50px 0px;
    line-height: 35px;
    position: relative;
    text-align: left;
}

.DayNumber {
	padding: 10px;
    width: 15px;
    color: #FFFFFF;
    line-height: 15px;
    background: #2c365a;
    /* display: inline-block; */
    position: relative;
    top: -25px;
    left: 32%;
    border-radius: 50px;
}

.NoneDisplay {
	display: none;
}

.SmallNotes {
	font-size: 12px;
	margin-left: 20px;
	color: #2c365a85;
}

.SNotes {
	font-size: 12px;
	color: #2c365a85;
}

.DesktopNone {
	display: none;
}

.Section {
	background: #FFFFFF;
	border: 1px solid #446cb3;
	border-radius: 10px;
	text-align: left;
	vertical-align: top;
	margin: 1%;
}

.SectionHeader {
	background: #446cb3;
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	font-weight: 900;
}

.SectionBody {
	padding: 1%;
}

.fa-plus {
	margin-right: 10px;
}

.fa-minus {
	margin-right: 10px;
}

.TopScrolling {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 1000;
	padding: 0px 10px;
	border-radius: 50px;
	background: rgba(68, 108, 179, 0.52);
	color: #FFFFFF;
	border: 2px solid rgba(68, 108, 179, 0.52);
    transition: all 0.1s ease-out;
}

.TopScrolling:hover {
	background: #FFFFFF;
	color: #84769a;
	border: 2px solid #84769a;
    transition: all 0.2s ease-out;
}

.AppointmentImg {
	width: 99%;
}

.item-hints{
  height: 50px;
  width: 50px;
  margin: 150px auto;
  display: inline-block;
  line-height: 24px;
  vertical-align: top;
  letter-spacing: 1px;
}
.item-hints .hint {
  width: 60px;
  height: 60px;
  margin: 50px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-hints .hint::before{ /* //rotated squre */
  background-color: #fff;
  width: 8px;
  height: 8px;
  z-index: 2;
  -webkit-clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.item-hints .hint::after{ /* //green glow */
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  width: 2px;
  height: 2px;
  z-index: 1;
  /*-webkit-box-shadow: 0 0 50px 30px rgba(72,170,72,.3);
  box-shadow: 0 0 50px 30px rgba(72,170,72,.3);*/
  -webkit-animation: home_hero_item_hints_glow 2s cubic-bezier(.25,.1,.2,1) infinite;
  animation: home_hero_item_hints_glow 2s cubic-bezier(.25,.1,.2,1) infinite;
  -webkit-transition: opacity .1s ease;
  transition: opacity .1s ease;
}

/*
@-webkit-keyframes home_hero_item_hints_glow {
  0% {
    -webkit-box-shadow: 0 0 30px 5px #48aa48;
    box-shadow: 0 0 30px 5px #48aa48
  }
  70% {
    -webkit-box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0);
    box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0)
  }
  100% {
    -webkit-box-shadow: 0 0 0 50px rgba(72, 170, 72, 0);
    box-shadow: 0 0 0 50px rgba(72, 170, 72, 0)
  }
}
@keyframes home_hero_item_hints_glow {
  0% {
    -webkit-box-shadow: 0 0 30px 5px #48aa48;
    box-shadow: 0 0 30px 5px #48aa48
  }
  70% {
    -webkit-box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0);
    box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0)
  }
  100% {
    -webkit-box-shadow: 0 0 0 50px rgba(72, 170, 72, 0);
    box-shadow: 0 0 0 50px rgba(72, 170, 72, 0)
  }
}
*/

.item-hints .hint-dot {
  cursor: pointer;
    text-align: center;
    line-height: 60px;
    color: #2c365a;
  z-index: 3;
  border: 1px solid #446cb3;
  border-radius: 50%;
  width: 60px;
  font-weight: 900;
  height: 60px;
  display: block;
  -webkit-transform: translate(-0%,-0%) scale(.95);
  transform: translate(-0%,-0%) scale(.95);
  -webkit-animation: home_hero_item_hints_border 2s linear infinite;
  animation: home_hero_item_hints_border 2s linear infinite;
  margin: auto;
}
/*
@-webkit-keyframes home_hero_item_hints_border {
  0%,
  100% {
    border-color: #446cb3;
    -webkit-transform: translate(-50%, -50%) scale(.95);
    transform: translate(-0%, -0%) scale(.95)
  }
  50% {
    border-color: #446cb1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-0%, -0%) scale(1)
  }
}
@keyframes home_hero_item_hints_border {
  0%,
  100% {
    border-color: #446cb3;
    -webkit-transform: translate(-50%, -50%) scale(.95);
    transform: translate(-0%, -0%) scale(.95)
  }
  50% {
    border-color: #446cb1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-0%, -0%) scale(1)
  }
}
*/
.item-hints .hint-radius {
  background-color: #f3f7ff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  position: absolute;
  margin: 0px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: background-color,opacity,visibility,-webkit-transform;
  transition-property: background-color,opacity,visibility,-webkit-transform;
  transition-property: background-color,opacity,visibility,transform;
  transition-property: background-color,opacity,visibility,transform,-webkit-transform;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease,ease,ease,cubic-bezier(.5,0,0,1);
  transition-timing-function: ease,ease,ease,cubic-bezier(.5,0,0,1);
}
.item-hints .hint:hover .hint-radius {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.item-hints .hint[data-position="1"] .hint-content {
  top: 85px;
  right: 50%;
  margin-right: 56px;
}
.item-hints .hint-content {
  color: #446cb3;
  background: #ffffff;
  width: 300px;
  position: absolute;
  z-index: 1000;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .1s ease,visibility .7s ease;
  transition: opacity .1s ease,visibility .7s ease;
  pointer-events: none;
  /* color: #fff; */
  border: 0px solid #446cb3;
  visibility: hidden;
  pointer-events: none;
}
.item-hints .hint:hover .hint-content {
  color: #446cb3;
  width: 300px;
  position: absolute;
  z-index: 5;
  padding: 12px;
  opacity: 1;
  visibility: visible !important;
  -webkit-transition: opacity .2s ease,visibility .7s ease;
  transition: opacity .2s ease,visibility .7s ease;
  pointer-events: none;
  /* color: #fff; */
  visibility: hidden;
  pointer-events: none;
}
.item-hints .hint-content::before {
  width: 0px;
  bottom: 0;
  right: 0;
  content: '';
  background-color: #446cb3;
  height: 1px;
  position: absolute;
  transition: width 0.1s;
}
.item-hints .hint:hover .hint-content::before {
  width: 180px;
  transition: width 0.2s;
}
.item-hints .hint-content::after {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
  bottom: 0;
  right: 0;
  width: 80px;
  content: '';
  background-color: #446cb3;
  height: 1px;
  position: absolute;
  opacity: 1;
  -webkit-transition: opacity .1s ease;
  transition: opacity .1s ease;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.item-hints .hint:hover .hint-content::after {
  opacity: 1;
  visibility: visible;
}
.item-hints .hint[data-position="4"] .hint-content {
  bottom: 85px;
  margin-right: -25px;
}

.item-hints.a1 {
	margin: 0px auto;
	width: 43px;
}

.item-hints.a2 {
	margin: 11px auto;
	width: 34px;
}

.item-hints.a3 {
	margin: 41px auto;
	width: 27px;
}

.item-hints.a4 {
	margin: 83px auto;
	width: 7px;
}

.item-hints.a5 {
	margin: 131px auto;
	width: 0px;
}

.item-hints.a6 {
	margin: 180px auto;
	width: 0px;
}

.item-hints.a7 {
	margin: 222px auto;
	width: 0px;
}

.item-hints.a8 {
	margin: 265px auto;
	width: 0px;
}

.item-hints.b1 {
	margin: 0px auto;
	width: 34px;
}

.item-hints.b2 {
	margin: 11px auto;
	width: 26px;
}

.item-hints.b3 {
	margin: 40px auto;
	width: 6px;
}

.item-hints.b4 {
	margin: 81px auto;
	width: 0px;
}

.item-hints.b5 {
	margin: 127px auto;
	width: 0px;
}

.item-hints.b6 {
	margin: 176px auto;
	width: 2px;
}

.item-hints.b7 {
	margin: 219px auto;
	width: 0px;
}

.item-hints.b8 {
	margin: 262px auto;
	width: 0px;
}

.item-hints.c1 {
	margin: 270px auto;
	width: 30px;
}

.item-hints.c2 {
	margin: 256px auto;
	width: 20px;
}

.item-hints.c3 {
	margin: 219px auto;
	width: 8px;
}

.item-hints.c4 {
	margin: 178px auto;
	width: 7px;
}

.item-hints.c5 {
	margin: 134px auto;
	width: 5px;
}

.item-hints.c6 {
	margin: 89px auto;
	width: 5px;
}

.item-hints.c7 {
	margin: 47px auto;
	width: 0px;
}

.item-hints.c8 {
	margin: 3px auto;
	width: 0px;
}

.item-hints.d1 {
	margin: 270px auto;
	width: 43px;
}

.item-hints.d2 {
	margin: 260px auto;
	width: 34px;
}

.item-hints.d3 {
	margin: 222px auto;
	width: 17px;
}

.item-hints.d4 {
	margin: 179px auto;
	width: 4px;
}

.item-hints.d5 {
	margin: 135px auto;
	width: 0px;
}

.item-hints.d6 {
	margin: 88px auto;
	width: 2px;
}

.item-hints.d7 {
	margin: 44px auto;
	width: 3px;
}

.item-hints.d8 {
	margin: 0px auto;
	width: 0px;
}

.item-hints.a1 .hint-dot{
	background: url(../../img/Tooth/b1.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a2 .hint-dot{
	background: url(../../img/Tooth/b2.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a3 .hint-dot{
	background: url(../../img/Tooth/b3.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a4 .hint-dot{
	background: url(../../img/Tooth/b4.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a5 .hint-dot{
	background: url(../../img/Tooth/b5.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a6 .hint-dot{
	background: url(../../img/Tooth/b6.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a7 .hint-dot{
	background: url(../../img/Tooth/b7.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.a8 .hint-dot{
	background: url(../../img/Tooth/b8.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b1 .hint-dot{
	background: url(../../img/Tooth/a1.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b2 .hint-dot{
	background: url(../../img/Tooth/a2.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b3 .hint-dot{
	background: url(../../img/Tooth/a3.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b4 .hint-dot{
	background: url(../../img/Tooth/a4.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b5 .hint-dot{
	background: url(../../img/Tooth/a5.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b6 .hint-dot{
	background: url(../../img/Tooth/a6.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b7 .hint-dot{
	background: url(../../img/Tooth/a7.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.b8 .hint-dot{
	background: url(../../img/Tooth/a8.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c1 .hint-dot{
	background: url(../../img/Tooth/d1.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c2 .hint-dot{
	background: url(../../img/Tooth/d2.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c3 .hint-dot{
	background: url(../../img/Tooth/d3.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c4 .hint-dot{
	background: url(../../img/Tooth/d4.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c5 .hint-dot{
	background: url(../../img/Tooth/d5.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c6 .hint-dot{
	background: url(../../img/Tooth/d6.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c7 .hint-dot{
	background: url(../../img/Tooth/d7.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.c8 .hint-dot{
	background: url(../../img/Tooth/d8.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d1 .hint-dot{
	background: url(../../img/Tooth/c1.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d2 .hint-dot{
	background: url(../../img/Tooth/c2.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d3 .hint-dot{
	background: url(../../img/Tooth/c3.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d4 .hint-dot{
	background: url(../../img/Tooth/c4.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d5 .hint-dot{
	background: url(../../img/Tooth/c5.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d6 .hint-dot{
	background: url(../../img/Tooth/c6.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d7 .hint-dot{
	background: url(../../img/Tooth/c7.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.item-hints.d8 .hint-dot{
	background: url(../../img/Tooth/c8.png);
    background-size: 100% 100%;
	border: 0px solid #ffffff;
}

.ToothUp_ID {
	display: none;
}

.ToothNote {
	position: relative;
    left: 25px;
    bottom: 300px;
    background: #ffffff;
    border: 2px solid #446cb3;
    width: 100px;
    margin: 0 auto;
    border-radius: 10px;
	transition: all 0.1s ease-out;
}

.ToothNoteD {
	position: relative;
    left: 25px;
    bottom: 485px;
    background: #ffffff;
    border: 2px solid #446cb3;
    width: 100px;
    margin: 0 auto;
    border-radius: 10px;
	transition: all 0.1s ease-out;
}

.ToothNote:hover, .ToothNoteD:hover {
	background: #446cb3;
	color: #ffffff;
	transition: all 0.2s ease-out;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	display: none;
    opacity: 0;
    width: max-content;
    min-width: 120px;
	max-width: 240px;
    padding: 10px;
    background-color: #663399f2;
    color: #fff;
    text-align: center;
    border-radius: 10px;
	font-weight: 100;
    /* padding: 5px 0; */
    position: absolute;
    z-index: 1;
    top: -150%;
    right: 15%;
    /* margin-right: -60px; */
    transition: all 0.1s ease-out;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 50%;
	margin-right: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #663399f2 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	display: block;
	opacity: 1;
	transition: all 0.2s ease-out;
}

.Notification {
	background: #e9d460;
    padding: 20px 1%;
    margin: 0.5% auto;
    font-size: 15px;
    width: 86%;
    text-align: left;
    color: #ffffff;
    border-radius: 10px;
	box-shadow: rgba(242, 217, 132, 0.5) 0px 0px 4px 2px;
}

.MaxHeight530 {
	height: 491px;
    overflow-y: auto;
    max-height: 491px;
}

.AddForm input.FileInput {
	margin: 0px 10px;
    width: 30%;
    line-height: 12px;
    height: 27px;
    vertical-align: top;
    font-size: 12px;
    padding: 6px;
}

.AddForm select.FileInput {
	margin: 0px 10px;
    width: 12%;
    line-height: 12px;
    height: 39px;
    vertical-align: top;
    font-size: 12px;
    padding: 6px;
}

.TableClass2.Width100Per {
	width: 100%;
	max-width: 100%;
}

.DoneButton {
    padding: 0px 10px;
    margin: 0 4px;
    line-height: 40px;
    background: #ffffff;
    border: 0px;
    border-radius: 10px;
    color: #2c365a;
    transition: all 0.2s ease-out;
}

.DoneButton:hover {
	background: #2c365a;
	color: #ffffff;
    transition: all 0.1s ease-out;
}

.BottomMenu {
	text-align: center;
	border-top: 1px solid #2c365a;
}

.TopMenuNavi {
	display: inline-block;
    padding: 0px 9px;
    margin-left: 6px;
    width: 30px;
    height: 47px;
    color: #2c365a;
    font-size: 12px;
    border-radius: 50px;
    line-height: 50px;
    background: #f1f1fa;
    vertical-align: top;
    transition: all 0.1s ease-out;
}

.TopMenuNavi:hover {
	background: #fff;
    transition: all 0.2s ease-out;
}

.TopMenuNavi i {
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin: 0px 1px 0px 5px;
	line-height: 20px;
	width: 20px;
}

.MenuLiX {
    color: #cccccc;
    font-size: 13px;
    line-height: 17px;
    padding-left: 20px;
}

.TopLogo {
	background: URL(../../img/Logo.png);
    width: 24px;
    height: 24px;
	margin-left: 10px;
    margin-top: 12px;
    display: inline-block;
    background-size: 100% 100%;
}

.TopLongLogo {
	background: URL(../../img/longLogo.png);
    width: 160px;
    height: 36px;
    vertical-align: middle;
    margin: 10px;
    display: inline-block;
    background-size: 100% 100%;
}

.SearchBar {
	margin-left: 50px;
    border: 0px;
    height: 47px;
    vertical-align: top;
    padding: 0px 20px;
    width: 50%;
    color: #2c365a;
}

.SearchBarForm {
    vertical-align: top;
    display: inline-block;
	width: 70%;
}

.TopVertical {
	vertical-align: top;
}

.Fieldresources {
    line-height: 24px;
}

.Fieldresource {
	color: #2c365a;
	display: inline-block;
	margin: 1px 5px;
	padding: 1px 3px;
	font-size: 9px;
	line-height: 12px;
	border: 1px solid #fdfdfd;
}

.Fieldresource:hover {
	border: 1px solid #2c365a;
}

.Fieldresource1 {
	display: inline-block;
	color: #2c365a;
	margin: 5px 10px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 16px;
}

.Fieldresource1:hover {
	background: #2c365a;
	color: #FFFFFF;
}

.PassMeter {
	border-bottom: 2px solid #FF0000;
	background: #ffffff;
	height: 20px;
	text-align: center;
}

.PassPower {
	background: #ff0000;
	width: 0%;
	height: 20px;
	text-align: center;
}

.PassWord {
	position: relative;
	bottom: 19px;
}

.TextFromStart {
	text-align: left;
}

.QG_Icon {
	display: inline-block;
    width: 19%;
    text-align: center;
    padding: 15px 0px;
    vertical-align: middle;
}

.QG_Text {
	display: inline-block;
    vertical-align: middle;
    width: 74%;
    padding: 0 3%;
    font-size: 13px;
    line-height: 26px;
}

.QG_Next {
	display: block;
	font-size: 15px;
    text-align: center;
}

.QG_Prev {
	display: block;
	font-size: 15px;
    text-align: center;
}

.SmartWelcome {
	display: block;
	font-size: 50px;
	line-height: 80px;
	margin: 0 auto;
	font-weight: 900;
	width: 300px;
	text-align: center;
	transition: all 0.1s ease-out;
}

.IndexPackageText {
}


.GreatNews {
	position: relative;
    width: 66%;
    z-index: 99;
    margin: 3% 16%;
    background: #fff;
    border-radius: 50px;
    padding: 3% 1%;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
}

.BigSaleIMGIcon {
	width: 200px;
    height: 250px;
    padding: 0px;
    background-image: url(../../img/Sales/Celebration.png);
    background-size: 100% 100%;
    text-align: center;
    margin: 0px auto;
}

.RowSub {
	text-align: center;
	font-weight: 600;
    font-size: 65px;
    line-height: 85px;
}

.RowSub2 {
	text-align: center;
    font-size: 30px;
    line-height: 40px;
}

.PreSalesNews {
	display: inline-block;
	width: 35%;
	vertical-align: top;
	text-align: center;
}

.AftSalesNews {
	display: inline-block;
	width: 20%;
	vertical-align: top;
	text-align: center;
}

.SalesNews {
	display: inline-block;
	width: 64%;
	color: #013243;
	vertical-align: top;
	text-align: center;
}

.PageLongSubject {
    text-align: left;
    padding-left: 40px;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 20px;
}

.overflowY {
	overflow-y:auto;
}

.CartSuggestion {
	vertical-align: top;
    /* background: #fbfbfb; */
    color: #2c365a;
    border: 1px solid #e3e6e8;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    border-radius: 10px;
    line-height: 24px;
    text-align: center;
    width: 31%;
    margin: 10px;
    padding: 20px 0px 10px 0px;
    transition: all 0.1s ease-out;
    display: inline-block;
}

.CartSuggestion:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
	transition: all 0.2s ease-out;

}

.AddItems {
    background: #2c365a;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 10px;
    width: 50%;
    margin: 10px 25%;
    display: block;
    text-align: center;
    padding: 8px 0px;
    transition: all 0.1s ease-out;
}

.AddItems:hover  {
	background: #2c365a80;
    color: #2c365a;
    transition: all 0.2s ease-out;
}

.PlusBotton {
	background: #2c365a;
    color: #fff;
    padding: 5px;
    font-size: 9px;
    line-height: 9px;
    margin: 0px 5px;
    border-radius: 50px;
    transition: all 0.1s ease-out;
}

.PlusBotton:hover {
    background: #fff;
    color: #2c365a;
    transition: all 0.2s ease-out;
}

.ItemOnCart {
	background: #ffffff;
    margin: 30px auto;
	width: 99%;
    border-radius: 10px;
    box-shadow:  0 0 5px 3px rgba(216,216,216,0.5);

}

.Row14 {
    width: 14%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row10 {
    width: 10%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.Row12 {
    width: 12%;
    margin: 0.5% 0.5%;
    vertical-align: top;
	display: inline-block;
}

.RowQuestion {
    margin: 0.5% 0.5%;
    vertical-align: top;
	transition: all 0.2s ease-out;
	 -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
	/*display: table-cell;*/
}

.Row86 {
    width: 85%;
    vertical-align: top;
	display: inline-block;
}

.ItemOnCart .PackageN {
    text-align: center;
    padding: 10px 0px;
    min-width: 127px;
    font-size: 14px;
    line-height: 24px;
    height: 60px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
    transition: all 0.1s ease-out;
}

.ItemOnCart .PackageN:Hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 1px;
    transition: all 0.2s ease-out;
}

.ItemOnCart .PackageNS {
    text-align: center;
    padding: 15px 0px;
    min-width: 127px;
    font-size: 14px;
    line-height: 24px;
    height: 132px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
    transition: all 0.1s ease-out;
}

.ItemOnCart .PackageNS:Hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 1px;
    transition: all 0.2s ease-out;
}

.ItemOnCartAttribute {
	text-align: left;
	padding-left: 15px;
    display: block;
	line-height: 30px;
}

.ItemOnCatAttributeTitle {

}

.AddForm input.CartInput {
    margin: 0px auto;
    padding: 5px;
    width: 85%;
    font-size: 22px;
    line-height: 25px;
}

.AddForm select.CartInput {
    margin: 0px auto;
    padding: 5px;
    width: 92%;
	margin: 0;
    font-size: 13px;
    line-height: 25px;
}

.CartItemAddText {
	width: 150px;
	display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.CartItemAddText1 {
	width: 180px;
    height: 100px;
    border-bottom: 1px solid #eaeaea;
    padding: 5px 5px;
	display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.CartItemAddText2 {
	width: 55px;
    height: 100px;
    border-bottom: 1px solid #eaeaea;
    padding: 5px 5px;
    vertical-align: middle;
	display: inline-block;
    text-align: left;
}

.CartItemAddText3 {
	width: 100px;
    height: 100px;
    border-bottom: 1px solid #eaeaea;
    padding: 5px 5px;
	display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.PrintingPage > * {
	font-family: Arial, Helvetica, sans-serif;
}
.PrintingPage {
	width: 992px;
	font-size: 12px;
	line-height: 21px;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

.PriningRow {
	width: 90%;
	padding: 5%;
}

.PrintingHeader {
	text-align: left;
}

.PrintingHeader h2, .PrintingBody h2{
    font-size: 24px;
    margin: 5px 0px;
}
.PrintingHeader p{
    margin: 5px 0px;
}

.RightTextAlign {
	text-align: right;
}

.LeftTextAlign {
	text-align: left;
}

.InvoiceTable {
	font-size: 12px;
    border-collapse: collapse;
    width: 100%;
    color: #000000;
    line-height: 20px;
}

.InvoiceTable tr td {
	border: 1px solid #ababab;
}

.InvoiceLable {
	border: 1px solid #ababab;
	font-size: 12px;
	line-height: 20px;
}

.PrintingSign {
    position: relative;
    left: -315px;
}

.CFont {
	font-family: monospace;
	background: #fbfbfb;
}

.SFont {
	font-size: 12px;
	line-height: 16px;
}

.Suggestion1:hover {

	background: #2c365a;
    color: #ffffff;
    transition: all 0.2s ease-out;
}

.Suggestion1 {

    padding: 5px 3%;
    width: 93%;
    margin: 1px auto;
    background: #ffffff;
    color: #2c365a;
    border-bottom: 1px solid #e3e6e8;
    border-radius: 10px;
    transition: all 0.1s ease-out;

}

.SuggestionPorts {

}

.AutoSavedChanges {
	display: none;
    z-index: 99999;
    position: fixed;
    bottom: 30px;
    right: 50px;
    height: 25px;
    line-height: 25px;
    padding: 5px;
    font-size: 12px;
    color: rgba(167, 232, 172, 0.54);
    border-bottom: 2px solid rgba(167, 232, 172, 0.54);
}

.Tabresource {
	color: #2c365a;
    display: inline-block;
    margin: 1px 1px;
    padding: 4px 10px;
    /* border-radius: 10px; */
    font-size: 13px;
    line-height: 20px;
    box-shadow:  0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
    background: #ffffff;
}

.Tabresource:hover {
	background: #f7f7f7;
    transition: all 0.1s ease-out;
}

.LineHieght18 {
	line-height: 18px;
}

.SmallNotification {
	background: #f2d984;
    padding: 1px 10px;
    margin: 0% 1%;
    font-size: 15px;
    width: 96%;
    text-align: left;
    color: #ffffff;
    border-radius: 10px;
}

.SmallOk {
	background: #23cba7;
    padding: 1px 10px;
    margin: 0% 1%;
    font-size: 15px;
    width: 96%;
    text-align: left;
    color: #ffffff;
    border-radius: 10px;
}

.DisBotton {
	display: inline-block;
	text-decoration: none;
	background: #2c365a70;
	color: #FFFFFF;
	padding: 4px 10px;
	margin: 10px;
	border-radius: 10px;
	transition: all 0.1s ease-out;
}

.WindowShadow {
	position: fixed;
	z-index: 99999999;
	width: 100%;
	height: 100%;
	text-align: cetner;
    transition: all 0.2s ease-out;
}

.WindowClose {
	background: rgba(0, 0, 0, 0.25);
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	text-align: cetner;

}

.Window {
	background: #ffffff;
    width: 48%;
    z-index: 99999999;
    margin: 6% 23%;
    padding: 3% 3%;
    text-align: left;
    border-radius: 30px;
    max-height: 400px;
    overflow-x: auto;
	box-shadow:  0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
}

.WindowShadowL {
	position: fixed;
	z-index: 99999999;
	width: 100%;
	height: 100%;
	text-align: cetner;
    transition: all 0.2s ease-out;
}

.WindowCloseL {
	background: rgba(0, 0, 0, 0.25);
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	text-align: cetner;

}

.WindowL {
	background: #ffffff;
    width: 70%;
    z-index: 99999999;
    margin: 6% 11%;
    padding: 3% 3%;
    text-align: left;
    border-radius: 30px;
    max-height: 400px;
    overflow-x: auto;
	box-shadow:  0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
}

.AcceptBotton {
	background: #23cba7;
	color: #fff;
}

.AcceptBotton i {
	font-size: 24px;
	padding: 0px 5px;
	vertical-align: middle;
}

.RejectBotton {
	background: #84769a;
	color: #fff;
}

.RejectBotton i {
	font-size: 24px;
	padding: 0px 5px;
	vertical-align: middle;
}

.NoneBotton {
	background: #2c365a;
	color: #fff;
}

.NoneBotton i {
	font-size: 24px;
	padding: 0px 5px;
	vertical-align: middle;
}

.OrderStatistics {
	display: block;
    position: fixed;
    width: 350px;
    top: 100px;
    right: -20px;
    padding: 20px;
    /* padding-right: 30px; */
    border-radius: 0px 10px 10px 0px;
    float: right;
    background: #ffffff;
    z-index: 999999999;
    height: 400px;
    overflow-x: auto;
    box-shadow: 0 0 5px 5px rgba(216,216,216,.5);
    transition: all 0.2s ease-out;
}

.PackageNumberCart {
	font-size: 40px;
    line-height: 40px;
    margin-right: 0px;
    font-weight: 100;
    vertical-align: top;
    font-family: monospace;
}

.CartPackageText {
    font-size: 14px;
    line-height: 30px;
    font-weight: 100;

}

.PackageImg {
	width: 30%;
    text-align: center;
    font-size: 60px;
    display: inline-block;
    vertical-align: middle;
}

.CartMenuNavi {
    display: inline-block;
    /* position: fixed; */
    padding: 0px 9px;
    width: 30px;
    height: 47px;
    color: #2c365a;
    font-size: 12px;
    border-radius: 50px;
    line-height: 50px;
    background: #f1f1fa;
    vertical-align: top;
    transition: all 0.1s ease-out;
}

.CartMenuNavi i {
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin: 0px 1px 0px 5px;
	line-height: 20px;
	width: 20px;
}

.CartMenuNavi:hover {
	background: #ffffff;
    transition: all 0.2s ease-out;
}

.CartMenuNaviOuter {
    display: inline-block;
    position: fixed;
    top: 120px;
    right: 0px;
    padding: 0px 9px;
    width: 100px;
    height: 47px;
    color: #2c365a;
    font-size: 12px;
    border-radius: 0px 50px 50px 0px;
    box-shadow: 0 0 5px 5px rgba(216,216,216,.5);
    line-height: 50px;
    background: #f1f1fa;
    vertical-align: top;
    transition: all 0.1s ease-out;
}

.CartMenuNaviOuter i {
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
	margin: 0px 1px 0px 5px;
	line-height: 20px;
	width: 20px;
}

.CartMenuNaviOuter:hover {
	background: #ffffff;
    transition: all 0.2s ease-out;
}

.Window span {
	font-family: monospace;
	background: #fbfbfb;
}

.ActiveNotificationsNumber {
    position: relative;
    top: -10px;
    right: 5px;
    background: #f2d984;
    border-radius: 50px;
    padding: 2px 5px;
    line-height: 11px;
    font-size: 11px;
    font-family: monospace;
}

.NewNotificationBar {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: rgba(242, 217, 132, 0.6);
    border-radius: 10px;
    padding: 20px;
	z-index: 999999999999999;

}

.TopMenuSearch {
    display: inline-block;
    width: 50%;
    position: relative;
    vertical-align: top;
    top: 0px;
    left: 0px;
    z-index: 9999999;
}

.FullSearchBar {
    width: 80%;
    margin: 0 12%;
    padding: 10px 25px;
    position: relative;
    border: 0;
    border-radius: 10px;
	color: #2c365a;
    transition: all 0.1s ease-out;
}

.FullSearchBar:hover {
	color: #2c365a;
	background: #e8ecf1;
	box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.2s ease-out;
}

.TopMenuSearchResult {
	display: none;
	opacity: 0;
	line-height: 24px;
	transform: scale(0);
    overflow: auto;
    max-height: 70%;
	position: absolute;
    background: #ffffff;
    z-index: 9999999;
    width: 71%;
    left: 185px;
    top: 55px;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    border-radius: 10px;
    padding: 20px 10px;
    transition: all 0.2s ease-out;
}

*.OneLine {
    text-align: left;
    height: 24px;
    overflow-y: auto;
    margin: 1px 0px;
    font-size: 13px;
	position: relative;
    line-height: 24px;
}

/*
*.OneLine:before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	height: 1px;
	width: 80px;
    border-bottom: 1px solid #f2f2f2;
}
*/

.WhiteBack {
	padding: 10px 0px;
	width: 100%;
	background: #FFFFFF;
	border-radius: 10px;
}

.TableClass4{
	overflow-x: hiden;
	overflow-y: auto;
	padding: 0;
	border-collapse: collapse;
    box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
    border-radius: 10px;
}

.TableClass4 tr {
	margin-top: 5px;
}

.TableClass4 th {
	min-width: 0px;
}

.TableClass4 td.rightborder,.TableClass4 th.rightborder {
	border-right: 1px solid #788ea5;
}

.TableClass4 td {
    /*box-shadow: inset rgba(52, 73, 94, 0.2) 5px 0px 5px -4px;
	*/
	border-right: 1px solid #dedede;
	min-width: 0px;
}

.TableClass4 td.GrayBlue {
	background: #f5f5f7;
}

.TableClass4 th.GrayBlue {
	background: #f5f5f7;
}

.TableClass4 th.Min50 {
	min-width: 0px;
}

.TableClass4 tr:nth-child(odd)   { background-color:#f5f5f7; }
.TableClass4 tr:nth-child(even)    { background-color:#fff; }

*.dxc-tooltip {
	z-index: 999999999;
}

.options {
  padding: 20px;
  background-color: rgba(191, 191, 191, 0.15);
  margin-top: 20px;
}

.option {
  margin-top: 10px;
}

.caption {
  font-size: 18px;
  font-weight: 500;
}

.option > span {
  margin-right: 10px;
}

.option > .dx-widget {
  display: inline-block;
  vertical-align: middle;
}
/*
td {
  position: relative;
}

td[title]:hover::after {

  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
  background: #00000085;
  color: #ffffff;
  padding: 5px 10px;


}*/


.tooltip {
    display:none;
    position:absolute;
    background-color:rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
	font-size:12px;
	width:auto;
	max-width:220px;
    color:#ffffff;
	border-radius: 10px;
    margin-top: 20px;
	margin-right: 0px;
	margin-left: 75px;
	z-index:9999999999999999;
	transition: all 0s ease-out;
}

.Suggestion40 {
	background: #ffffff;
    color: #2c365a;
    border: 1px solid #e3e6e8;
    border-radius: 10px;
    vertical-align: top;
    padding: 2%;
	font-size: 14px;
    line-height: 16px;
	text-align: left;
    margin: 2%;
    max-width: 40%;
    width: 40%;
    transition: all 0.1s ease-out;
	box-shadow: 0 0 0px 0px rgba(216,216,216,.5);
    display: inline-block;
}

.Suggestion40:hover {
	border-radius: 0px 0px 20px 0px;
	box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
	transition: all 0.2s ease-out;
}

.Choosed33 {
	background: #2c365a;
    color: #ffffff;
    border: 1px solid #e3e6e8;
    border-radius: 10px;
    vertical-align: top;
    padding: 10px;
	font-size: 14px;
    line-height: 16px;
	text-align: left;
    margin: 10px;
    max-width: 33%;
    transition: all 0.1s ease-out;
	box-shadow: 0 0 0px 0px rgba(216,216,216,.5);
    display: inline-block;
}

.Choosed33:hover {
	border-radius: 0px 0px 20px 0px;
	box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
	transition: all 0.2s ease-out;
}

.Dock a {
	display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    line-height: 60px;
    padding: 0px 15px;
    color: #fff;
	transition: all 0.1s ease-out;

}

.DockElements {
	text-align: left;
}

.DockE {
	margin: 0px 10px;
	padding: 10px;
    border-radius: 10px;
    background: #2c365a;

}

.Dock img {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    /*margin-top: 5px;*/
    vertical-align: middle;
    filter: invert(1);
    -webkit-filter: invert(1);
}

.Dock a:hover {
	transform: scale(1.3);
	transition: all 0.2s ease-out;
}

.Dock a:hover:after{
	background: rgb(237 237 237 / 90%);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    /* bottom: 100px; */
    /* margin: 0px 10px; */
    margin-top: -30px;
    left: 0px;
    right: 0;
    color: #00222d;
    content: attr(title);
    padding: 5px 0px;
    position: absolute;
    z-index: 999999999999;
    text-align: center;
    font-size: 10px;
    line-height: 14px;
    transition: all 0.1s ease-out;
}

.HoverToolTip:hover:after{
	background: rgb(51 51 51 / 89%);
    backdrop-filter: blur(6px);
    border-radius: 5px;
    margin-left: 20px;
    color: #fff;
    content: attr(title);
    padding: 5px 15px;
    position: absolute;
    z-index: 999999999999;
    /* width: 100px; */
    font-size: 12px;
    line-height: 14px;
	transition: all 0.1s ease-out;
}

.Launchpad {

	display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    text-align: center;
    vertical-align: middle;
    background: #e5e5e5b0;
    backdrop-filter: blur(6px);
    z-index: 9999;

}

.LaunchpadElements {
	width: 90%;
	height: 75%;
	overflow-x: auto;
	margin: 5%;
	padding-bottom: 20px:
}

.Launchpad a i {

    width: 75px;
    height: 75px;
    text-align: center;
    margin: auto;
}

.Launchpad a {
	display: inline-block;
    font-size: 60px;
    vertical-align: middle;
    text-align: center;
    line-height: 70px;
    width: 75px;
    height: 75px;
    margin: 40px;
    background: rgb(255 255 255 / 90%);
    border-radius: 10px;
    padding: 10px;
    transition: all 0.1s ease-out;
}

.LaunchpadEText {
	font-size: 12px;
	line-height: 14px;
	margin-top: 15px;
}

.Launchpad img {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    vertical-align: middle;
}

.Launchpad a:hover {
	transform: scale(1.3);
	transition: all 0.2s ease-out;
}

.LaunchpadBackground {
	background: url(../../img/Launchpad/background.jpeg);
    background-size: 100% 100%;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    opacity: 0.75;
    z-index: -1;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.PassMeter {
	border-bottom:0 solid red;
	color:#013243;
	border-radius:5px;
	box-shadow:rgba(0,0,0,.2) 0 0 4px 2px;
	background:#fff;
	height:20px;
	text-align:center;
}

.PassPower {
	background:red;
	width:0%;
	height:21px;
	border-radius:5px;
	text-align:center;
}

.PassWord {
	position:relative;
	bottom:27px;
}

.ScheduleTableMin {
	border-collapse: collapse;
	border: 0px solid #dbd8d8;
	width: 100%;
	vertical-align: middle;
}

.ScheduleTableMin tr {
	padding: 0px;
	margin: 0px;

}

.ScheduleTableMin td {
	border: 0px solid #dbd8d8;
	vertical-align: top;
	/*height: 200px;*/
	padding: 0px;
	margin: 0px;
	/*
	width: 10px;
	max-width: 10px;
	*/
	font-size: 11px;
	line-height: 14px;
	text-align: center;
	padding: 5px;
	position: relative;
	border-radius: 20px;
	background: #ffffff;
    transition: all 0.1s ease-out;
}

.ScheduleTableMin td:hover {

	background: #dfdfdf;
    transition: all 0.1s ease-out;
}

.ScheduleTable {
	border-collapse: collapse;
	border: 1px solid #dbd8d8;
	width: 100%;
	vertical-align: middle;
}

.ScheduleTable tr {
	padding: 0px;
	margin: 0px;

}

.ScheduleTable td {
	border: 1px solid #dbd8d8;
	vertical-align: top;
	/*height: 200px;*/
	padding: 0px;
	margin: 0px;
	width: 160px;
	max-width: 160px;
	position: relative;
}

.ScheduleTable .DayInMonth {
	padding-left: 10px;
	font-size: 13px;
	line-height: 30px;
}

.CohortInTable {
	padding: 1px 0px;
	margin: 3px 0px;
	font-size: 11px;
	width: 100%;
	background: #dbd8d8;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; #f1f1fa;
	transition: all 0.1s ease-out;
}

.CohortInTable:hover {
	/*transform: scale(1.2);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; #f1f1fa;
	border-radius: 4px;*/
	position: relative;
	z-index: 9;
	transition: all 0.1s ease-out;
}

.CohortInTableText {
	padding: 3px 0px 3px 3px;
	max-height: 15px;
	height: 15;
	font-weight: 600;
	overflow: hidden;
	overflow-y: auto;
	font-size: 11px;
	line-height: 15px;
	color: #fff;
}

*.ToShowInWindow {
	font-size: 11px;
}

*.ToShowInWindow .PackageNHeader{
	font-size: 12px;
	height: 50px;
}

*.ToShowInWindow .PackageNBody{
	font-size: 12px;
	height: 100px;
	overflow: auto;
}

*.ToShowInWindow .PackageBody{
	font-size: 12px;
	height: 100px;
	overflow: auto;
}

*.ToShowInWindow input, *.ToShowInWindow textarea{
	margin-top: 38px;
	font-size: 12px;
	line-height: 16px;

}

.ScheduleSession {
	border-radius: 10px;
	padding: 10px 0px;
	margin: 10px 0px;
	overflow: auto;
	box-shadow: 0 0 10px 1px rgb(210, 210, 210);
}

table label {
    display: block;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}

.FadeBotton {
    display: inline-block;
    text-decoration: none;
    background: #ffffff;
    /* box-shadow: 0 0 5px 1px rgb(216 216 216 / 50%); */
    color: #7f90a1;
    padding: 0px 10px;
    font-size: 14px;
    line-height: 24px;
    margin: 0px 1px;
    border-radius: 5px;
    transition: all 0.1s ease-out;
}

.FadeBotton:hover {
	color: #2c365a;
	background: #e5e8eb;
	transition: all 0.2s ease-out;
}

.QuestionAnswer {
	background: #e7e9ed;
    color: #33485e;
    border-radius: 5px;
    margin: 10px 0px;
    padding: 10px 0px;
    cursor: pointer;
}

.QuestionAnswer:hover {
	color: #fff;
	background: #2c365a;
	transform: scale(1.02);
	transition: all 0.2s ease-out;

}

.FormQuestionsCon{
	position: static;
	overflow-y: auto;

}

.FormQuestions {
	border-collapse: separate;
    border-spacing: 5px;
    border-radius: 10px;
    background: #e7e9ed;

	position: relative;


}

.RowQuestion .PackageNHeader {
    min-height: 75px;
}

.BodyImgBackground {
	background: #2c365a;
	z-index: -1;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.BodyImgBackgroundLogin {
	background: #2c365a;
	z-index: -1;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.FadeBox {
    width: 25px;
    height: 25px;
    margin: 0px;
	display: inline-block;
	border-radius: 10px;
	background: #f9f9f9;
	border: 1px solid #c1c1c1;
}

.TableClass1 .Botton {
	margin-right: 0px;
}

.inTableTextareaTD textarea {
	display: none;
	width: 0px;
	transition: all 0.1s ease-out;
}

.inTableTextareaTD:hover textarea {
	display: block;
	width: 100px;
	transition: all 0.1s ease-out;
}

.HoverToShow:hover .InsideHoverToShow {
	display: block;
	z-index: 11;
	opacity: 1;
	transition: all 0.3s ease-out;
}

.InsideHoverToShow {
	display: block;
	z-index: -1;
	opacity: 0;
	transition: all 0.1s ease-out;
}

.HoverDIV {
	padding: 20px;
	background: #00000090;
	border-radius: 10px;
	color: #ffffff;
	font-size: 15px;
	line-height: 20px;
	width: 300px;
	height: auto;
	position: absolute;

}

*.ReportStyley * {
    line-height: 36px;
    font-size: 22px;

}

*.ReportStyley .TableClass1 th,*.ReportStyley .TableClass1 td {
	height: 40px;
    line-height: 36px;
    font-size: 22px;

}

*.ReportStyley .Row100 {
	width: 98%;
}

*.ReportStyley .PackageNHeader {
    padding: 25px 25px 0px 25px;
    font-size: 23px;

}

*.ReportStyley .PackageNBody {
    padding: 0px 25px 25px 25px;

}

*.ReportStyley .PackageBody {
    padding: 0px 25px 25px 25px;

}

*.ReportStyley .PackageN {
    background: rgba(255, 255, 255, 0.6);
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px 1px;*/
    border: 1px solid #e6e6e6;


}











.IndexPackageNew {
    display: inline-block;
    border-radius: 10px;
	font-size: 13px;
	border-radius: 10px;
	line-height: 13px;
	text-align: left;
    color: #ffffff;
	padding: 30px 0px;
	transition: all 0.1s ease-out;
}

.IndexPackageNewImage {
	width: 40px;
    height: 40px;
    margin-left: 20px;
    background: #f2f2f2;
    text-align: center;
    font-size: 35px;
    padding: 10px;
    border-radius: 50px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.9;
}

.IndexPackageNewText {
    font-size: 13px;
    line-height: 13px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.PackageNumberNew {
    max-width: 145px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 24px;
    line-height: 24px;
    margin: 0px;
    padding: 0px;
    font-weight: 100;
    vertical-align: top;
    font-family: monospace;
    /*background: #fff;*/
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.1));
    border-radius: 50px;
    text-align: right;
    /* opacity: 0.9;
    box-shadow: 0px 0px 10px 1px #ffffff;*/
}

.PackageNumberNewL {
    max-width: 145px;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 14px;
    line-height: 16px;
    margin: 0px;
    padding: 0px;
    font-weight: 100;
    vertical-align: top;
    font-family: monospace;
    /*background: #fff;*/
    background-image: radial-gradient(rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.1));
    border-radius: 50px;
    text-align: right;
    /* opacity: 0.9;
    box-shadow: 0px 0px 10px 1px #ffffff;*/
}

.IndexPackageNewTextInside {
	margin-top: 5px;
}

.NewRedPackage {
    background: #ffffff;
    border: 0px solid #e26a6a;
	/*box-shadow: #e26a6a73 0px 0px 4px 2px;*/
    color: #e26a6a;
}

.NewRedPackage .PackageClick {
    background: #f1a9a0;
}

.NewBluePackage {
    background: #ffffff;
	/*box-shadow: #84769a73 0px 0px 4px 2px;*/
    border: 0px solid #7e7edc;
    color: #7e7edc;
}

.NewBluePackage .PackageClick {
    background: #dcc6e0;
}

.NewGreenPackage {
    background: #ffffff;
    border: 0px solid #f5c658;
	/*box-shadow: #29f1c373 0px 0px 4px 2px;*/
    color: #f5c658;
}

.NewGreenPackage .PackageClick {
    background: #7af5da;
}

.NewYellowPackage {
    background: #ffffff;
    border: 0px solid #4ecdc4;
	/*box-shadow: #4ecdc473 0px 0px 4px 2px;*/
    color: #4ecdc4;
}

.NewYellowPackage .PackageClick {
    background: #7fe0db;
}

.NewDarkPackage {
    color: #ffffff;
    border: 2px solid #2c365a;
    background: #2c365a;
}



.IndexPackageNewS {
    display: inline-block;
    border-radius: 10px;
    margin: 0;
	font-size: 9px;
	border-radius: 10px;
	line-height: 13px;
	text-align: left;
	padding: 12px 0px;
	transition: all 0.1s ease-out;
}

.IndexPackageNewSImage {
	width: 20px;
    height: 20px;
    margin-left: 15px;
    background: #f2f2f2;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    border-radius: 50px;
    display: inline-block;
    vertical-align: middle;
}

.IndexPackageNewSText {
    font-size: 11px;
    line-height: 11px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.PackageNumberNewS {
	font-size: 16px;
    line-height: 16px;
    /* margin-right: 10px; */
    font-weight: 100;
    vertical-align: top;
    font-family: monospace;
}

.FadeBotton {
    display: inline-block;
    text-decoration: none;
    background: #ffffff;
    /* box-shadow: 0 0 5px 1px rgb(216 216 216 / 50%); */
    color: #7f90a1;
    padding: 0px 10px;
    font-size: 14px;
    line-height: 24px;
    margin: 0px 1px;
    border-radius: 5px;
    transition: all 0.1s ease-out;
}

.FadeBotton:hover {
	color: #2c365a;
	background: #e5e8eb;
	transition: all 0.2s ease-out;
}

.IndexRow25 {
	width: 23.6%;
    margin: 0.0% 0.1%;
    vertical-align: top;
    display: inline-block;
}

*.FreeOfBack {
    background: rgb(255, 255, 255, 0);
}

*.DubleZindex {
    position: relative;
    z-index: 2;
}



.TopFiveList {
	width: 100%;
	margin: 0;

}

.Listing {
	width: 100%;
	margin: 0px 0px;
	margin-top: 15px;
	margin-bottom: -10px;
}

.ListingName {
	width: 45%;
	height: 45px;
	padding: 2px 10px;
	font-size: 16px;
	line-height: 18px;
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
    text-align: left;
    position: relative;
}


.ListingMargin {
    width: 13%;
    font-size: 11px;
	text-align: right;
	display: inline-block;
    vertical-align: middle;
}


.ListingSales {
	width: 32%;
    font-size: 15px;
    font-weight: 900;
	text-align: right;
	display: inline-block;
    vertical-align: middle;
}

*.MiddleVerticalAlign {
	vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.FinStaInput {
	width: 100px;
    padding: 5px;
    margin: auto 5px;
    font-size: 13px;
    line-height: 16px;
    border: 0px;
    border-bottom: 1px solid #5d6d7d;
}

.UpperPer {
	color: #23cba7;
}
.DownPer {
	color: #96281b;
}

.HBars {
	display: block;
	position: relative;
	width: 99%;
	margin: 1px 0px;
}

.HBarTotal {
	width: 98%;
	border: 0px solid #fff;

}

.HBarValue {
	width: 0%;
	background: #ff0000;
	border-radius: 5px;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 10px;
	color: #fff;
}

.TextToShowInBar {
	position: relative;
	display: inline-block;
	border-radius: 100px;
	/*background-image: radial-gradient(rgba(0, 0, 0, 0.9) 15%, rgba(255, 255, 255, 0.5));*/
	background-image: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0));
}

.CashFlowDashTopFiveDIV {
	position: relative;
	z-index: 1;
}

.CashFlowDashBoardDIV {
	width: 189%;
	margin: 0;
	padding: 3px 6px;
	position: relative;
	margin-left: -91%;
	border: 0px solid #e7e8f1;
	border-radius: 20px;
	z-index: 2;
	background: #e7e8f1;
}

.CashFlowDashTopFiveDIV:hover {
	z-index: 3;
}

.CashFlowDashBoardDIVinner {
	min-height: 250px;
}

.DashboardDIV {
	position: relative;
	z-index: 1;
}

.PieChartLargeDIV {
	position: relative;
	z-index: 0;
    overflow: hidden;

}

.PieChartLargeDIV:hover {
	z-index: 5;
    overflow: visible;
}


.FlipperHereL {
	transform: rotate(180deg);
    overflow: auto;
}

.FlipperHere {
	transform: rotate(180deg);
    overflow: auto;
}

.Choosed33 {
	background: #2c365a;
    color: #ffffff;
    border: 1px solid #e3e6e8;
    border-radius: 10px;
    vertical-align: top;
    padding: 10px;
	font-size: 14px;
    line-height: 16px;
	text-align: left;
    margin: 10px;
    max-width: 33%;
    transition: all 0.1s ease-out;
	box-shadow: 0 0 0px 0px rgba(216,216,216,.5);
    display: inline-block;
}

.Choosed33:hover {
	border-radius: 0px 0px 20px 0px;
	box-shadow: 0 0 5px 1px rgba(216,216,216,.5);
	transition: all 0.2s ease-out;
}

.WindowShadowL {
	position: fixed;
	z-index: 99999999;
	width: 100%;
	height: 100%;
	text-align: cetner;
    transition: all 0.2s ease-out;
}

.WindowCloseL {
	background: rgba(0, 0, 0, 0.25);
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	text-align: cetner;

}

.WindowL {
	background: #ffffff;
    width: 70%;
    z-index: 99999999;
    margin: 6% 11%;
    padding: 3% 3%;
    text-align: left;
    border-radius: 30px;
    max-height: 400px;
    overflow-x: auto;
	box-shadow:  0 0 5px 1px rgba(216,216,216,.5);
    transition: all 0.1s ease-out;
}

.MainSpeedo {
	position: relative;
	top: 0px;
	left: -57px;
	width: 134px;
	height: 150px;
	/*transform: rotate(-38deg);*/
	z-index: 4;
}

.MainSpeedo1 {
	position: relative;
	left: 85px;
	top: -240px;
	width: 134px;
	height: 150px;
	/*transform: rotate(-38deg);*/
	z-index: 0;
}

.MainChartBigDIV {
	height: 320px;
	margin: 0.5% 0.1%;
	width: 74%;
	margin-left: 0.5%;
}

.MainChartDIV {
	position: absolute;
    z-index: 0;
    top: 100px;
    width: 70%;
    height: 265px;
    overflow: hidden;
    /* background: #ffffffd9; */
}

.MainChartPositionDIV {
	position: absolute;
    top: -118px;
}

.Charting {
	width: 1000px
}

.StatisticsDashboard {
	margin: 0.5% 0.1%;
	width: 24%;
}

.StatisticsDashboardTopH {
	height: 144px;
}

.AccessableCashTopH {
	height: 107px;
	overflow: hidden;
}

.AccessableCashTopH1 {
	height: 115px;
}

.DashboardTop5Sector {
	margin: 0.5% 0.1%;
	margin-left: 0.5%;
	width: 60%;
	max-width: initial;
}

.DashboardTop5Sector1 {
	height: 680px;
	max-height: 680px;
	overflow: auto;
}

.CashFlowDIVInDashBoardTo {

	height: 500px;
	max-height: 500px;
}

.CashflowCharting {
	min-width: 785px;
	width: 785px;
}

.ChoosingTop5 {
	width: 500px;
}

.ChoosingTop5_1 {
	width: 320px;
}

.PerformanceDashboard {
	margin: 0.5% 0.1%;
	width: 38.5%;
}

.ZeroMargin {
	margin: 0;
}

.PerformanceDashboard1 {
	margin-top: 0%;
	height: 265px;
	min-height: 265px;
	overflow: hidden;
}

.Tpo5PieDashboard {
	margin-top: 0%;
	height: 400px;
	min-height: 400px;
	overflow: hidden;
}

.BudgetingTableCellInsideText {
	text-align: left;
    vertical-align: middle;
    line-height: 22px;
    width: 30%;
    margin: 0.5% 0.5%;
    display: inline-block;
}

.BudgetingTableCellInsideInputs {
	width: 67%;
    margin: 0.5% 0.5%;
    vertical-align: middle;
    display: inline-block;
}

.QuestionH {
	cursor: move;
	padding: 30px;
	display: inline-block;
	margin: 10px auto;
}

.QuestionH.over {
	border: 3px dotted #666;
	background: #00000010;
	border-radius: 10px;
}

.SectionDIV {
	cursor: move;
	display: inline-block;
}

.SectionDIV.over {
	border: 3px dotted #666;
	background: #00000010;
	border-radius: 10px;
}

.DragDIV {
	border-collapse: separate;
    border-spacing: 5px;
    background: #e9e9f3;
    border-radius: 10px;


	position: relative;
	overflow-y: scroll;


}



*.BarChartConsole * {
	line-height: initial;
}

.BarSNavi { 
	/*border-top: 1px solid #c6ccd3;*/
}

.BarSNaviS { 
	text-align: left;
	font-size: 11px;
	font-color: #c6ccd3;
	width: 24.7%;
	display: inline-block;
	/*border-left: 1px solid #c6ccd3;*/
}

*.BarChartConsole .BarSNavi * {
	font-size: 11px;
}

.BarChartConsole{ 
	position: relative;
	width: 99%;
	margin: 27px auto;
	background: #fff;
	display: block;

}

.BarChartOneCategory{ 
	position: relative;
	display: block;
	margin: 10px auto;
}

.BarChartOneLine{ 
	position: relative;
	display: block;
	margin: 3px auto;
}

.BarChartTitles{ 
	position: relative;
	display: inline-block;
	width: 23%;
	margin: 0.5% 1%;
	font-size: 11px;
	line-height: 15px;
	vertical-align: middle;


}

.BarChartBarsSeries{ 
	position: relative;
	display: inline-block;
	width: 72%;
	margin: 0.5% 1%;
	font-size: 11px;
	line-height: 13px;
	vertical-align: middle;

}

.BarChartBarLineFullLegend {
	width: 3%;
	margin: 0;
	position: relative;
	display: inline-block;
	font-size: 11px;
	line-height: 13px;
	vertical-align: middle;

}

.BarChartBarLineFull {

	font-size: 11px;
	line-height: 13px;
}

.insideBarVal {
	margin: 0px 5px;
    font-size: 10px;
    line-height: 13px;
    min-width: 50px;
    position: absolute;
    background: #ffffff69;
    color: #34495e;
    text-align: center;
    padding: 2px;
    border-radius: 5px;
    left: -60px;
    top: 2px;

}

.BarChartBarLineFullBar {
	width: 95%;
	margin: 0 1%;
	position: relative;
	display: inline-block;
	font-size: 11px;
	line-height: 13px;
	vertical-align: middle;
	
}

.BarChartBarLine{ 
	color: #fff;
	background: #19a3da;
	height: 20px;
	margin: 2px 0px;
	line-height: 25px;
	border-radius: 5px;
	position: relative;
	font-size: 16px;


}

.ColorSquare{
	position: relative;
	color: #fff;
	background: #fff;
	width: 15px;
	height: 15px; 
    display: inline-block;
    vertical-align: middle;
}

.ColorSquareText{
	position: relative;
	width: 15px;
	height: 15px; 
    display: inline-block;
	font-size: 13px;
	line-height: 16px;
	vertical-align: middle;
}

.BarChartLegends{ 
	text-align: center;

}





* .PointerTouch {
    position: relative;
    font-size: 28px;
    top: -18px;
    right: 4px;
    display: block;
    color:  #b3bfeb;
}

.PointerTouch {
  animation: shake 3s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg) scale(1); color: #ffffff; }
  10% { transform: translate(-1px, -2px) rotate(-10deg) scale(0.8); color: #efff3a; }
  20% { transform: translate(-3px, 0px) rotate(10deg) scale(1.2); color: #b3bfeb; }
  30% { transform: translate(3px, 2px) rotate(0deg) scale(1); color: #b3bfeb; }
  40% { transform: translate(1px, -1px) rotate(10deg) scale(1.2); color: #b3bfeb; }
  50% { transform: translate(-1px, 2px) rotate(-10deg) scale(0.8); color: #2c365a; }
  60% { transform: translate(-3px, 1px) rotate(0deg) scale(1); color: #2c365a; }
  70% { transform: translate(3px, 1px) rotate(-10deg) scale(0.8);color: #b3bfeb; }
  80% { transform: translate(-1px, -1px) rotate(10deg) scale(1.2);color: #b3bfeb; }
  90% { transform: translate(1px, 2px) rotate(0deg) scale(1); color: #b3bfeb; }
  100% { transform: translate(1px, -2px) rotate(-10deg) scale(0.8); color: #ffffff; }
}

.StartUpImage {
  animation: shake1 6s;
  animation-iteration-count: infinite;
}

@keyframes shake1 {
  0% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-10deg) scale(0.8); }
  20% { transform: rotate(10deg) scale(1.4); }
  30% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(10deg) scale(1.2); }
  50% { transform: rotate(-10deg) scale(0.6); }
  60% { transform: rotate(0deg) scale(1); }
  70% { transform: rotate(-10deg) scale(0.8); }
  80% { transform: rotate(10deg) scale(1.9); }
  90% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(-10deg) scale(0.8); }
}

.clickCounterStatus {
	position: relative;
    float: right;
    top: -25px;
    right: 8px;
}
.IndexSliderImageTitle {
	color: #fff;
    background: rgb(0, 0, 0, 0.5);
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    top: 190px;
    font-size: 32px;
    margin: 20px;
    border-radius: 10px;
    text-align: left;
	box-shadow: 0 0 25px 3px rgba(216,216,216,.2);
}

.IndexSliderImageSubTitle {
	color: #000;
    background: rgb(255, 255, 255, 0.6);
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    top: 160px;
    font-size: 16px;
    margin: 20px;
    border-radius: 10px;
    text-align: left;
	box-shadow: 0 0 25px 3px rgba(216,216,216,.2);
}

.IndexSlider {

    display: block;
    position: relative;
}

.IndexSlider * {
	transition: all 0.2s ease-out;
}

#IndexSliderImages1{
	margin-left: 4%;
}


.IndexSliderNavigatorLeft {
	position: absolute;
    background: rgb(255 255 255 / 64%);
    color: #000;
    top: 70px;
    right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 27px;
    font-size: 20px;
    z-index: 999;
    border-radius: 30px;
}

.IndexSliderNavigatorRight {
	position: absolute;
    background: rgb(255 255 255 / 64%);
    color: #000;
    top: 70px;
    left: 10px;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 27px;
    font-size: 20px;
    z-index: 999;
    border-radius: 30px;
}

.IndexSliderImageSubTitle:hover, .IndexSliderNavigatorDot:hover, .IndexSliderNavigatorRight:hover, .IndexSliderNavigatorLeft:hover  {
	transform: scale(1.2);
	background: #fff;
	transition: all 0.2s ease-out;
}

.IndexSliderImageTitle:hover {
	transform: scale(1.2);
	background: #000;
	transition: all 0.2s ease-out;
}

.IndexSliderNavigator   {
	display: block;
	text-align: center;
	margin: 10px;
    height: 30px;
}

.IndexSliderNavigatorDot {
	display: inline-block;
	position: relative;
	width: 30px;
    height: 30px;
    line-height: 27px;
    font-size: 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    margin: 2px 10px;
}

.Balls1 {
    border-radius: 500px;
    width: 580px;
    position: relative;
    height: 580px;
    border: 5px solid #779d8b90;
    display: inline-block;
    float: right;
    margin-top: 100px;
    margin-right: 100px;
}

.Balls2 {
	border-radius: 500px;
    width: 98%;
    position: relative;
    height: 98%;
    display: inline-block;
    float: right;
    margin-top: 1%;
    margin-right: 1%;

}

.Balls3 {
	border-radius: 500px;
    width: 84%;
    position: relative;
    height: 84%;
    background: #779d8b;
    display: inline-block;
    float: right;
    margin-top: 8%;
    margin-right: 8%;
}

.Balls3TextHead {
    margin-top: 31%;
    font-size: 33px;
    line-height: 60px;
    color: #fff;
    font-weight: 900;
    text-align: center;
}

.Balls3Text {
	font-size: 20px;
	line-height: 32px;
	color: #fff;
    /*text-align: left;
    margin-left: 13px;*/

    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.BallsBackStarsBig {
	position: absolute;
    width: 630px;
    height: 630px;
    z-index: 9999;
    background: URL(../../img/StarBigLogin.png);
    top: 80px;
    right: 80px;
    background-size: 100% 100%;
	transition: all 14s ease-out;

}

.BallsBackStarsSmall {
	position: absolute;
    width: 630px;
    height: 630px;
    z-index: 9999;
    background: URL(../../img/StarSmallPng.png);
    top: 80px;
    right: 80px;
    background-size: 100% 100%;
	transition: all 8s ease-out;
}

.RandomWhiteBall {
	z-index: -1;
	transition: all 1s ease-out;
}

.IndexTable tr td {
    font-size: 18px;
    padding: 10px 15px;
}

.SavedChanges {
	display: none;
	position: fixed;
    top: 57px;
    right: 40px;
    width: 350px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: #ffffff;
    background: rgb(35, 203, 167, 0.75);
    text-align: center;
    z-index: 9999;
    border-radius: 5px;
}

.NoChanges {
	display: none;
	position: fixed;
    top: 57px;
    right: 40px;
    width: 350px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: #ffffff;
    background: rgb(68, 68, 68, 0.75);
    text-align: center;
    z-index: 9999;
    border-radius: 5px;
}

.NotSavedChanges {
	display: none;
    position: fixed;
    top: 57px;
    right: 40px;
    /* width: 350px; */
    /* height: 32px; */
    line-height: 32px;
    font-size: 16px;
    color: #ffffff;
    background: rgb(214, 69, 65, 0.75);
    text-align: center;
    z-index: 9999;
    border-radius: 5px;
    padding: 10px 35px;
}

*.IndexPackageText {
	max-width:  400px;
	font-size: 15px;
}


*.IndexPackageOnGoing {
	margin-top: 11px; 
	height: 250px; 
	max-height: 250px;
}

input[type='file']::-webkit-file-upload-button {
  visibility: hidden;
}
input[type='file']::before {
  content: 'Select';
  display: inline-block;
  background: #2c365a;
  border-radius: 10px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
  color: #fff;
}
input[type='file']:active::before {
  background: #2c365a55;
}

.Row6 {
    width: 5%;
    margin: 0.2% 1%;
	display: inline-block;
}

.QuestionAnswerInput input[type='checkbox'], .QuestionAnswerInput input[type='radio'] {
	width: auto;
}

.FullQuestionsList {
	background: #e7e9ed;
	border-radius: 10px;
	position: sticky;
    width: 17%;
    top: 12%;
    height: 455px;
    bottom: 20%;
	overflow: auto;
	display: inline-block;
	transition: all 0.2s ease-out;

}

PRE {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
	font-family: Gothic, 'droid Arabic Kufi', 'Raleway', sans-serif;
	-webkit-font-feature-settings: "lnum";
	-moz-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}

.OnGoingCohortsProgressBar { 
	display: inline-block;

}

.OnGoingCohorts { 
	width: 56%;
}

.MaxiHeight155 { 
	height: 155px;
}

.StepsController {
    width: 65px;
    background: #fff;
    font-size: 12px;
    color: #2c365a;
    border: 1px solid #2c365a;
}

.ResultBlockNum {
	font-size: 38px;
    line-height: 45px;
}

.ResultBlock {
	display: inline-block;
    background: #2c3759;
    padding: 20px;
    border-radius: 20px;
    width: 150px;
    height: 120px;
    margin: 30px;
    color: #fff;
    font-size: 24px;
    line-height: 35px;
}

.UpperTopBotton {
	float: right;
    position: relative;
    margin: 10px 0px;
    z-index: 2;
}

.StrikeBotton {
	background: rgba(132, 118, 154, 0.6);
    position: relative;
    top: -56px;
    float: right;
}

.TestController {
	position: relative;
    width: 330px;
    top: -75px;
    right: 2%;
    text-align: right;
    float: right;
}

.QuestionsMenuArrows {
	float: right;
	position: absolute;
	right: 0;
	top: 7px;

}
.floatLeftInIndexForDesktop {
	float: left;
	margin-left: 0;
}

.HorizentalSliderHere {
	overflow: auto;    max-height: 165px;
}

#QuestionsMenuMM {
	height: 365px;

}

.OnGoingCohorts {
	width: 95%;
	max-height: 200px;
    overflow: auto;
}



.NavigatorHorizentalBotton:hover {
	background: #f1f1fa;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; #f1f1fa;
	transition: all 0.5s ease-out;
}

.NavigatorHorizentalBotton {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;	height: 40px;
	line-height: 40px;
	font-size: 14px;
	margin: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; #f1f1fa;
	transition: all 0.1s ease-out;

}

.NoPaddingPackage .PackageNHeader, .NoPaddingPackage .PackageNBody, .NoPaddingPackage .PackageBody { 
	padding: 2px 0px;
 }

.MorePaddings .PackageNHeader, .MorePaddings .PackageNBody, .MorePaddings .PackageBody { 
	padding: 2px 30px;
 }

 .ReviewStar {

 	margin: 10px;
 	font-size: 24px;
 	color: #000;
 	border-radius: 100px;

 }
 .ReviewStar:hover {

 	color: #fff;
 	background: #e7da77;
 	
 }





.NavigatorHorizentalBotton:hover {
	background: #f1f1fa;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; #f1f1fa;
	transition: all 0.5s ease-out;
}

.NavigatorHorizentalBotton {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;	height: 40px;
	line-height: 40px;
	font-size: 14px;
	margin: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px; #f1f1fa;
	transition: all 0.1s ease-out;

}


.SeenCheckList {
	float: right;
    position: relative;
    top: -40px;
}

.ContentNavi {
	border-radius: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
    box-shadow: 0 0 3px 1px rgb(210, 210, 210);
}

.ContentNavi:first-child {
	border-radius: 10px 10px 0px 0px;
}

.ContentNavi:last-child {
	border-radius: 0px 0px 10px 10px ;
}

.ContentNavi .SectionBody {
	background: #fff;
	color: #005b90;

}

.ContentNavi .SectionNHeader {
	padding: 5px 10px;
    font-size: 16px;
    line-height: 43px;

}

.ContentNaviS {
	padding: 10px;
}

.ContentIcon {
	width: 90%;
}

.ContentIconText {
	vertical-align: middle;
}

.EndTheAssessmentNow {
	float:right;
	position: relative; 
	top: -50px;
}

  .code-container {
    text-align: center;
  }

  .code-inputs input {
    width: 50px;
    height: 55px;
    font-size: 24px;
    text-align: center;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }

  .code-inputs input:focus {
    border-color: #63A18F;
    outline: none;
  }

.Copyright {

	direction: ltr;
	font-size: 12px;
	text-align: center;

	width: 40%;
    /*max-width: max-content;*/
    color: #ffffff;
    font-size: 11px;
    line-height: 28px;
    margin: 6% auto 0%;
    text-align: center;
    padding: 0% 6%;
}

.LoginForm {

	width: 28%;
    /*max-width: max-content;*/
    position: relative;
    color: #2c365a;
    border-bottom: 0px solid #2c365a;

    font-size: 16px;
    line-height: 24px;

    margin: 0 auto;
    margin-top: 15%;
	margin-bottom:  40px;
    padding: 0% 6%;
    padding-top: 0px;

    z-index: 9999999999;
    transition: all 0.1s ease-out;




    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        
	-webkit-backdrop-filter: blur(12px);

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);

	/*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); */

	filter: brightness(4);

	position: relative; 


}
.LoginForm form { 

	filter: brightness(0.25);
}

.LoginForm a {
	color: #2c365acc;
	text-decoration: none;
}

.LoginForm a:hover {
	color: #2c365a;
    transition: all 0.2s ease-out;
}

#BodyClass {
	overflow: auto;
	background-size:  100% 100%;

	background: url('../../img/back.jpeg'); 

}

.BodyPage {
	display: inline-block;
    width: 92.5%;
    margin: 0px 0.1% 35px;
    border-radius: 10px;
    vertical-align: top;
    padding: 0.1% 0;
    line-height: 40px;
    color: #2c365a;
    position: relative;
    /*top: -20px;*/
    /* float: right; */
    /* right: 0px; */
    /* bottom: 180px; */
    /* overflow: auto; 
     min-height: 800px;
     */
    z-index: 999;
        
   
    /* border-left: 1px solid #2c365a;
    box-shadow: rgba(0, 0, 0, 0.2) -1px 3px 3px;*/
}

#PageBodyJ {
	transition: all 0.2s ease-out;
}

.BodyImgBackground {
	background: #2c365a;
	background: url('../../img/back.jpeg'); 
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.BodyImgBackgroundLogin {
	background: #2c365a;
	background: url('../../img/back.jpeg'); 
	z-index: -1;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.BodyBackground {

	background: url('../../img/back.jpeg'); 
	background-size: 100% 100%;
    color: #2c365a;
    width: 100%;
    min-height: 100%;
    margin: 0px;
    display: inline-block;
}

body {
	margin: 0px;
	width: 100%;
	text-align: center;
	color: #2c365a;
}

.AddFormStyle {
	/*background: #e7e9ed;
    box-shadow: 0 0 3px 1px rgba(216,216,216,.5);
    border-radius: 10px;
    width: 96%;
    margin: 1%;
    padding: 1% 1%;*/
}

.RevertBrightness {
	filter: brightness(0.25);
}
.IndexPackage {
    display: inline-block;

	font-size: 13px;
	
	line-height: 13px;
	text-align: left;
    background: #ffffff;
	padding: 30px 0px;



    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);



	transition: all 0.1s ease-out;
}



.Dock {
	display: block;
    position: fixed;
    bottom: 15px;
    left: 40px;
    max-height: 90px;
    text-align: center;
    vertical-align: middle;
    right: 40px;
    border-radius: 20px;
    

    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);

    padding: 10px 10px 8px 10px; 

    z-index: 99999999999999999;
    width: 91%;
    margin: 0 auto;
    transition: all 0.2s ease-out;

}
.DockElements {
	filter: brightness(0.25);
}

.IndexSliderImage1, .IndexSliderImage {
	height: 150px;
	width: 100%;
    text-align: center;
    border-radius: 20px;
    background-size: 100% 100%;
	box-shadow: 0 0 25px 3px rgba(216,216,216,.5);
}

.IndexSliderImages {
	background: #fff;
    z-index: 99;
    width: 48%;
    height: 150px;
    border-radius: 20px;
    display: inline-block;
    margin: 10px 0%;
}

.SectionN {
	
	width: 100%;

    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);

	text-align: left;
	vertical-align: top;
	margin: 1% 0px;

	/*box-shadow:  0 0 5px 1px rgba(216,216,216,.5);*/
}

.SectionNHeader {
	color: #2c365a;
	border-radius: 10px;
	padding: 6px 20px 2px;
	text-align: left;
	font-weight: 900;
	filter: brightness(0.25);
}
.SectionHeader {
	color: #2c365a;
	border-radius: 10px;
	padding: 6px 20px 2px;
	text-align: left;
	font-weight: 900;
	filter: brightness(0.25);
}

.SectionNBody {
	filter: brightness(0.25);

}
.SectionBody {
	filter: brightness(0.25);

}
.PackageN {
    display: inline-block;

    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);

    color: #2c365a;
	text-align: left;
	font-size: 13px;
	padding: 0px 0px 10px 0px;
	vertical-align: top;
    /*box-shadow:  0 0 5px 1px rgba(216,216,216,.5);*/
	transition: all 0.1s ease-out;
}

.PackageN:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
	transition: all 0.2s ease-out;

}

.PackageNHeader {
	font-size: 18px;
	padding: 6px 10px 2px;
	filter: brightness(0.25);
}

.PackageNBody {
	padding: 2px 10px;
	font-size: 16px;
	line-height: 20px;
	text-align: justify;
    color: #2c365a;
    filter: brightness(0.25);

}
.Package {
    display: inline-block;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);

    color: #2c365a;
	text-align: left;
	font-size: 13px;
	padding: 20px 0px;
	transition: all 0.1s ease-out;
}
.PackageHeader {
	background: #2c365a;
	color: #FFFFFF;
	font-size: 13px;
	padding: 6px 20px 2px;
    filter: brightness(0.25);
}
.PackageBody {
	padding: 2px 10px;
	font-size: 16px;
	line-height: 20px;
	text-align: justify;
    color: #2c365a;
    filter: brightness(0.25);

}

.StartQGFrom0 {
	position: absolute;
    top: 0;
    left: -90px;
    text-align: right;
    border-radius: 30px;
    width: 50px;
    line-height: 45px;
    height: 45px;
    transition: all 0.2s ease-out;
}

.StartQGFrom0:hover {
	left: -75px;
    transition: all 0.1s ease-out;
}

.PackageImg img {
	width: 80px;
	height: 80px;
    filter: invert(49%) brightness(0.25) sepia(15%) saturate(1211%) hue-rotate(154deg) bleftness(123%) contrast(90%);
	transition: all 0.3s ease-out;
}

.PackageImg {
	width: 33%;
    margin-left: 20px;
    text-align: center;
    font-size: 60px;
    display: inline-block;
    filter: brightness(0.25);
    vertical-align: middle;
}

.PackageText {
    font-size: 13px;
    line-height: 13px;
    margin-left: 10px;
    filter: brightness(0.25);
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    height: 100%;
}

.NewPackageNHeaderText {
	color: #fff;
    text-align: left;
    /* width: 61%; */
    position: relative;
    display: block;
}

.PageSubject {
    text-align: center;
    font-size: 45px;
    line-height: 80px;
    font-weight: 900;
    color: #fff;
}

.QuickGuide {
	overflow: hidden;
    height: inherit;
    display: block;

    width: 95%;
    /* padding: 1%; */
    margin: 0.5% auto;
    border-radius: 10px;
    padding: 1.5%;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(12px);        

	border: 0px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 25px 3px rgb(216 216 216 / 50%);
    filter: brightness(4);
    vertical-align: top;
}

.QG_Info {
	display: inline-block;
    width: 90%;
    vertical-align: middle;
    filter: brightness(0.25);
}

.QG_Bottons {
	display: inline-block;
    width: 9%;
    filter: brightness(0.25);
    vertical-align: top;
}