/* Fixed Header & Footer		*/
/* ------------------------------------ */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body{
	width:900px;
	font-family: 'calibre light', 'Open Sans', Verdana, sans-serif, Helvetica, 'Trebuchet MS', Arial;
	font-size: 1.0em; 
	margin:0;
	padding:0 0 0 0 0;
	margin-left:0;
	min-width:900px; /* Prevent content from becoming unreachable in Gecko */
	word-wrap:break-word !important;

	background: #F5F5F5;
	color: rgba(0, 0, 0, 0.87);
	//font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.25em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#grad1 {
  height: 250px;
  background-color: lightblue; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom, red, yellow);
}

    .login-btn {
      display: inline-block;
      background: #8bb6fc;
      color: #ffffff;
      font-weight:bold;
      border-color: #ffffff;
      border-radius: 6px;
      text-decoration: none;
      padding: 6px 9px;
      display: block;
      transition: 0.2s;
    }

    .login-btn:hover {
      background: #444;
    }

    /* Login Dropdown panel */
    .login-dropdown {
      position: absolute;
      top: 100%;
      left: 325px;
      background: #fff;
      padding: 15px;
      width: 350px;
      border: 1px solid #ccc;
      display: none;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .login-dropdown form {
      display: flex;
      flex-direction: column;
    }

    .login-dropdown input {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .login-dropdown button {
      padding: 10px;
      background: #333;
      color: #fff;
      border: none;
    }

    /* Show dropdown on hover */
    .menu-item:hover .login-dropdown {
      display: block;
    }

# Menu CSS
.hamburger {
  position: absolute;
  top:0;
  right:0
}

.toggle, [id^=drop] {
	display: none;
}

nav { 
    margin:0;
    padding: 0;
	position: sticky;
    top:0;
    height: 50px;
    background-color: #ffffff; /* For browsers that do not support gradients */
    background-image: url('/Image/flags/icons8-india-48.png');
    background-repeat: no-repeat;
    #background-attachment: fixed;
    background-position: left; 
    # background-color: #3bcdf9; /* For browsers that do not support gradients */
    # background-image: linear-gradient(to bottom right, #3bcdf9, #d8fc91);
    border-bottom: 2px solid solid red;
	z-index:997;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

nav:after {
	content:"";
	display:table;
	clear:both;
}

nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	z-index:200;
	}
	
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	#background-color: #254441;
	#background-color: #3bcdf9;
	z-index:100;
	}

nav a {
	display:block;
	padding:6px 12px;	
	color:#ffffff;
	font-size:24px;
	text-decoration:none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover { 
	background-color: #000000; 
}

nav ul ul {
	display: none;
	position: absolute; 
	background-color: #d8fc91;
	#top: 60px; 
}
	
nav ul li:hover > ul {
	display:inherit;
}
	
nav ul ul li {
	width:150px;
	float:none;
	background-color: #d8fc91;
	display:list-item;
	position: relative;
}

nav ul ul ul li {
	position: relative;
	top:-60px;
	left:150px; 
}

li > a:after { content:  ' \25BC'; font-size:10px }
li > a:only-child:after { content: ''; }

@media all and (max-width : 900px) {
	#logo {
		display: block;
		padding: 0;
		#width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	.toggle + a,
	.menu {
		display: none;
	}

	.toggle {
		display: block;
		background-color: #ffffff;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	[id^=drop]:checked + ul {
		display: block;
	}

	nav ul li {
		display: block;
		#width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
    nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}
		
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	nav ul ul li {
		display: block;
		#width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}
}

input[type='checkbox'] + label {
  display: inline-block;
}
.AlignedControl Label
 {
     position: relative;
     top: -2px;
 }
/* Popover styling */
a {
  text-decoration: none;
}

.popover__title {
  font-size: 24px;
  line-height: 36px;
  text-decoration: none;
  color: rgb(228, 68, 68);
  text-align: center;
  padding: 15px 0;
}

.popover__wrapper {
  position: relative;
  #margin-top: 1.5rem;
  display: inline-block;
}
.popover__content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -100px;
  transform: translate(0, 10px);
  #background-color: #bfbfbf;
  #padding: 1.5rem;
  #box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: auto;
}
.popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #bfbfbf transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: center;
}
// a.modal-open {
//   display:block;
//   padding:20px;
//   color:#424242;
//   font-weight:bold;
//   margin:50px auto;
//   width:200px;
//   background:#e0e0e0;
//   border-radius:2px;
//   text-align:center;
//   text-decoration:none;
// }
// .modal {
//   background:rgba(0,0,0,0.7);
//   position:fixed;
//   width:100%;
//   height:100%;
//   top:0px;
//   left:0px;
//   bottom:0px;
//   transition:all .5s ease-in-out;
//   opacity:0;
//   z-index:-1;
// }
// .modal:target {
//   opacity:1;
//   transition:all .5s ease-in-out;
//   z-index:+1;
// }
// .modal-content {
//   position:fixed;
//   top:50%;
//   left:50%;
//   width:500px;
//   background:#fff;
//   border-radius:4px;
//   transform:translate(-50%, -200%);
//   transition:all .5s ease-in-out;
//   perspective: 1000;
//   outline:1px solid transparent;
//   opacity:0;
// }
// .modal:target .modal-content {
//   transform:translate(-50%, -50%);
//   transition:all .5s ease-in-out;
//   transition-delay:.5s;
//   z-index:9999;
//   opacity:1;
// }
// .modal-close {
//   float:right;
//   text-decoration:none;
//   padding:22px 22px;
//   color:#424242;
//   font-weight:800;
//   transition:all .5s ease-in-out;
//   z-index:+1;
//   background:rgba(0,0,0,0.1);
//   text-align:center;
//   border-radius:0 4px 0 0;
// }
// .modal-close:hover {
//   color:#fff;
//   background:rgba(0,0,0,0.5);
//   
// }
// .modal-content h3 {
//   padding:20px;
//   display:block;
//   text-align:center;
//   border-bottom:1px solid #e0e0e0;
//   text-transform:uppercase;
//   background:rgba(2,162,239,1);
//   color:#fff;
//   border-radius:4px 4px 0 0;
// }
// .modal-area {
//   padding:20px;
// }
// 
// .modal-area input[type="radio"] {
//   display:none;
// }
// .modal-area label {
//   float:left;
//   display:block;
//   padding:10px 20px;
//   font-weight:700;
//   cursor:pointer;
//   z-index:+2;
//   background:rgba(0,0,0,.3);
//   color:#fff;
//   transition:all .5s ease-in-out;
// }
// .modal-area input[type="radio"]:checked + label {
//   background:#fff;
//   color:#424242;
// }


@media all and (max-width : 320px) {
	nav ul li {
		display:block;
		width: 98%;
	}
}

/* For non-natively-focusable elements. For natively focusable elements use .visually hidden:not(:focus):not(:active) */
.visually-hidden {
      border-width: 0 !important;
      clip: rect(1px, 1px, 1px, 1px) !important;
      height: 1px !important;
      overflow: hidden !important;
      padding: 0 !important;
      position: absolute !important;
      white-space: nowrap !important;
      width: 1px !important;
	  display: none;
}

/* position:absolute for all browsers - the whole page scrolls */
div#headerwrap {
	position:fixed;
	width:900px;
	top:0;
	left:0;
	height:50px;
	#z-index:100;
}

div#header {
	//height:50px;
	width:100%;
	margin:0 0 0 0;
	//z-index:-1; 
	border-bottom:2px solid #000000;
}
/* set a left margin to compensate for IE/Win always making room for a scrollbar */
div#content {
	width:900px;
	margin:3px 0px 10px 0px;
	z-index:0;
//	margin-top:51px;
//	margin-left:0px;
//	margin-bottom:60px;
}

/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:25px;
}
body>div#footerwrap {
	position:fixed;
}

div#footer {
	height:75px;
	width:100%;
	margin:0 0 0 0;
	background:#ffffff;
	color:#eeeeee;
	border-top:2px solid #F0F000;
}

//div#sidebar h2 {
//	padding-left:5px;
//}
div#footer h2 {
	text-align:center;
	padding:0;
	margin:0;
}
div #footer p {
	margin:0;
	padding:0;
	text-align:center;
}
div#footer a {
	color:#fff;
}

.tabs{
    width: 100%;
    display: inline;
    #margin: 40px auto;
    position: relative;
    background: #ffffff;
}

.tabs .tab{
    float: left;
    display: block;
    #border-bottom: 4px solid #ccc;
    background: #ffffff;
}

.tabs .tab>input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #ffffff;
}

.tabs .tab>label {
    display: block;
    padding: 6px 21px;
    #width:150px;
    font-size: 12px;
    #text-transform: uppercase;
    cursor: pointer;
    position: relative;
    color: #FFFFFF;
    background: #4A83FD;
}

.tabs .content {
    z-index: 0;/* or display: none; */
    overflow: auto;
    #width: 100%;
    #height:450px;
    padding: 0px;
    float: left;
    position: absolute;
    top: 27px;
    left: 0;
    background: #ffffff;
    color: #DFDFDF;
    opacity:0;
    transition: opacity 400ms ease-out;
}

.tabs>.tab>[id^="tab"]:checked + label {
    top: 0;
    background: #303030;
    color: #F5F5F5;
}

.tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
    z-index: 1;/* or display: block; */
    display: relative;
    left: -255px;
    width: 510px;
    opacity: 1;
    transition: opacity 400ms ease-out;
}

/*Tooltip text*/
.tooltip {
  position: relative;
  color: #00b4ab;
}

.tooltip .tooltip-text {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  visibility: hidden;
  max-width: 400px;
  max-height: 100px;
  background-color: #00b4ab;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  #bottom: 125%;
  left: 50%;
  margin-left: 15px;
  opacity: 0;
  transition: .3s;
  transform: translate3d(0px, 20px, 0px);
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #00b4ab transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

// #sidebar h2 { color: #996633; background-color: #eeeeef; }
h1 {
	font-size:1.4em;
	text-align:center;
	padding-top:5px;
}
h2 {
	font-size:1.2em;
	padding-top:1em;
	margin-top:0;
}
p {
	margin-bottom:0;
	font-size:0.8em;
	line-height:1.4em;
}
pre {
	font-size:0.9em;
	line-height:1.4em;
}
ul {
	font-size:0.8em;
	line-height:1.4em;
}

hr { border-style: solid; color: #de7008; margin-top: 10px; }

.code { font-family: courier, monospace; }
.link a:link { color: #de7008; font-weight: bold; text-decoration: none; border-bottom: 1px dotted;  }
.link a:visited { color: #de7008; font-weight: bold; text-decoration: none; border-bottom: 1px dotted; }
.link a:hover { color: #335500; font-weight: bold; text-decoration: none; }
.link a:active { color: green; font-weight: bold; text-decoration: none; border-bottom: 1px dotted;  }
.link a:visited, a:hover, a:active { background-color: #fffffe; }

{
	#top, #bottom, #left, #right { display: none; }
}

/* Rest of CSS */
H1 {margin:0;padding:5px 10px;background:#030;color:#FFF;font:normal 1.5em Verdana,Arial,Helvetica,sans-serif}

.header00 {margin:0; padding:5px 10px;background:#030; color:#FFF;font:normal 1.5em Verdana,Arial,Helvetica,sans-serif}
.header01 {text-transform:uppercase; padding:5px 10px; background:#010; color:#FFF; font:11px Verdana,Arial,Helvetica,sans-serif}
.header02 {text-transform:uppercase; padding:5px 10px; background:#020; color:#FFF; font:11px Verdana,Arial,Helvetica,sans-serif}
.header10 {font-weight:normal; font-variant:small-caps; color:#00995c; letter-spacing:0pt; word-spacing:0pt;font-size:1.2em;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;}
.header11 {font-weight:normal; font-variant:small-caps; color:#00995c; letter-spacing:0pt; word-spacing:0pt;font-size:1.4em;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;}
.header12 {font-weight:normal; font-variant:small-caps; color:#4286f4; letter-spacing:0pt; word-spacing:0pt;font-size:1.8em;text-align:left;font-family:LexiaBold, sans-serif;line-height:1;}
.header13 {margin:0; padding:4px 8px 4px 8px; color:#42f495;font:normal 1.5em Verdana,Arial,Helvetica,sans-serif}
.header15 {font-weight: normal; font-style: normal; line-height:normal; font-size:1.6em; font-family: Verdana, LexiaBold, sans-serif; letter-spacing:-1pt; font-size:2em;text-align:left;margin:0;padding:4px 8px 4px 8px;color:#FFF;line-height:1;}

.buttonbkg01{
	background: url('/image/Login2c32.png') no-repeat;
	cursor:pointer;
	border: none;
}

#mapContactUs {
	height: 400px;
	width: 100%;
}

.button{
	padding:8px 12px;
	background:#0A5175;
	display: block;
	width:120px;
	margin:10px 0 0px 0;
	border-radius:3px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-align:center;
	font-size:1.2em;
	box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
	-moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0, 0.10);
	}

.button:hover{
	background:#8BC3A3;
	color:white;
	}


.Lexia-Regular {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LexiaRegular', sans-serif;}
.Lexia-Bold {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LexiaBold', sans-serif; letter-spacing:-1px}


<STYLE type=text/css>
	P {FONT-SIZE: 11px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.symbolWebdings {
		FONT-SIZE: 11px; COLOR: #5a6b7c; FONT-FAMILY: webdings}
	.symbolWingdings {
		FONT-SIZE: 11px; COLOR: #5a6b7c; FONT-FAMILY: wingdings}
	.grey {
		FONT-SIZE: 11px; COLOR: #999999; FONT-FAMILY: verdana, arial, geneva, sans-serif, helvetica}
	.darkblueBig {
		FONT-SIZE: 36px; COLOR: #003399; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.darkblue {
		FONT-SIZE: 12px; COLOR: #003399; FONT-FAMILY: arial, geneva, verdana, helvetica, sans-serif}
	.lightblue {
		FONT-SIZE: 8px; COLOR: #0066cc; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.small {
		FONT-SIZE: 10px; COLOR: #fffff6; FONT-FAMILY: verdana, garamond, arial, geneva, helvetica, sans-serif}
	.smallblack {
		FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.verysmall {
		FONT-SIZE: 5px; COLOR: #0066cc; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.menuheader {
		FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.whitehead {
		FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ffffff; LINE-HEIGHT: 13px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.headline {
		FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.blueheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #003399; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.greenyellowheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: #45AA2F; FONT-FAMILY: geneva, sans-serif, arial, helvetica, verdana}
	.darkblueheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #003399; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.redheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: arial, geneva, helvetica, sans-serif}
	.darkredheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 17px; COLOR: red; FONT-FAMILY: arial, geneva, helvetica, sans-serif}
	.darkyellowheadline {
		FONT-WEIGHT: bold; FONT-SIZE: 1.3em; COLOR: #42f4b3; FONT-FAMILY: verdana, helvetica, arial, geneva, sans-serif}
	.codefont {
		FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: courier, "courier new", monospace}
	.highlight {
		FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.query {
		FONT-SIZE: 11px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	.tip {
		FONT-SIZE: 9px; COLOR: black; FONT-STYLE: italic; BACKGROUND-COLOR: #c0c0c0}
	.url {
		FONT-SIZE: 9px; COLOR: #999999; FONT-STYLE: italic}
	.size {
		FONT-SIZE: 9px; COLOR: #999999; FONT-STYLE: italic}
	.publisher {
		FONT-SIZE: 9px; COLOR: #999999; FONT-STYLE: italic}
	.titleheader01{font-weight:normal;font-variant:small-caps;color:#275BA1;letter-spacing:0pt;word-spacing:0pt;font-size:2em;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;}

	.lwrCase{ text-transform:lowercase}
	.blackTitle{font-family: Arial; font-size:15px;color:#101010; font-weight:bold;line-height:17px;}
	.blueTitle{font-family: 'HelveticaNeueBdCnOb';font-size:15px;color:#185b88;padding:20px 0px 10px 0px;text-transform:uppercase}

	DIV.results .highlight {
		BACKGROUND-COLOR: #ffff99}
	DIV.results .wordscores {
		FONT-SIZE: x-small; COLOR: #666666}
	H1 {
		FONT-WEIGHT: bold; FONT-SIZE: 17px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	H2 {
		FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	H3 {
		FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	H4 {
		FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: arial, verdana, geneva, helvetica, sans-serif}
	H5 {
		FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	H6 {
		FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	TD {
		FONT-SIZE: 11px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	UL {
		LIST-STYLE-POSITION: outside; FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif; LIST-STYLE-TYPE: disc}
	OL {
		FONT-SIZE: 11px; COLOR: #000000; LINE-HEIGHT: 11px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	DL {
		FONT-SIZE: 11px; COLOR: #000000; LINE-HEIGHT: 11px; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	A:link {
		FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #003399; TEXT-DECORATION: none; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	A:visited {
		FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #333333; TEXT-DECORATION: none; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	A:active {
		FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #cc3333; TEXT-DECORATION: none; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	A:hover {
		FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ff3333; TEXT-DECORATION: none; FONT-FAMILY: verdana, arial, geneva, helvetica, sans-serif}
	PRE {
		FONT-SIZE: 9pt; COLOR: #af000e; FONT-FAMILY: "courier new", monospace}
	SAMP {
		FONT-SIZE: 9pt; COLOR: #af000e; FONT-FAMILY: "courier new", monospace}
	CODE {
		FONT-SIZE: 9pt; COLOR: #af000e; FONT-FAMILY: "courier new", monospace}
</STYLE>

INPUT {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial
}
SELECT {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial
}

.Grid
{
	border: solid 1px Tan;
}

.Grid td
{
	border: solid 3px #FFFFFF;
	margin: 3px 3px 3px 3px;
	font-family: Arial;
	padding: 5px 5px 5px 5px;
	text-align: center;
}

.GridHeader
{
	font-family: verdana; font-size: 6px; color: red; text-decoration: none; padding: 0px 0px 0px 0px;
}

.GridHeader a
{
	font-size: 5px; font-family: verdana; color: red; text-decoration: none; padding: 0px 0px 0px 0px;
}

.GridItem
{
	font-family: Arial; font-size: 5px; 
}
.GridAltItem
{
	font-family: Arial; font-size: 5px; 
}
.GridPager
{
	font-size: 5px;
	font-family: Arial;
}
.px {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 2px 0px 0px; PADDING-TOP: 0px
}
.px5 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; PADDING-TOP: 5px
}

.title00 {
	MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 18px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 10px; COLOR: #ffffff; MARGIN-RIGHT: 10px; FONT-FAMILY: Tahoma,Verdana,Arial
}
.title01 {
	MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 16px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 10px; COLOR: #ffffff; MARGIN-RIGHT: 10px; FONT-FAMILY: Tahoma,Verdana,Arial
}
.title02 {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 5px; COLOR: #000000; MARGIN-RIGHT: 5px; FONT-FAMILY: Tahoma,Verdana,Arial
}
.title02 A {
	COLOR: #000000; TEXT-DECORATION: none
}
.title03 {
	MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 2px; MARGIN-LEFT: 10px; COLOR: #000066; MARGIN-RIGHT: 10px; FONT-FAMILY: Tahoma,Verdana,Arial
}
.right {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 5px 10px 0px; COLOR: #003c5e; FONT-FAMILY: Tahoma,Verdana,Arial
}
.right B {
	COLOR: #ef6d00
}
.right A {
	COLOR: #003c5e
}
.right A:hover {
	COLOR: #000000
}
.left {
	FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 10px; COLOR: #ffffff; FONT-FAMILY: Tahoma,Verdana,Arial
}
.left A {
	COLOR: #ffffff
}
.left A:hover {
	COLOR: #000000
}
LI {
	MARGIN-TOP: -1px; FONT-SIZE: 11px; MARGIN-BOTTOM: -1px; COLOR: #000000; MARGIN-RIGHT: 1px; FONT-FAMILY: Tahoma,Verdana,Arial
}
UL {
	MARGIN-TOP: 0px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px; COLOR: #000000; MARGIN-RIGHT: 0px; FONT-FAMILY: Tahoma,Verdana,Arial
}
OL {
	MARGIN-TOP: 0px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px; COLOR: #000000; MARGIN-RIGHT: 0px; FONT-FAMILY: Tahoma,Verdana,Arial
}
P {
	FONT-SIZE: 11px; PADDING-BOTTOM: 5px; MARGIN: 5px 10px 0px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial
}
P A {
	COLOR: #294a7b
}
P A:hover {
	COLOR: #000000
}

.fieldLabelText {
	FONT-SIZE: 8pt; COLOR: #0f0f0f; FONT-FAMILY: arial, times, helvetica, arial, sans-serif
}
.fieldLabelTextBold {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; FONT-FAMILY:  arial,sans-serif, helvetica, times
}
.fieldContent08 {
	FONT-SIZE: 8pt; COLOR: #000066; FONT-FAMILY: verdana, arial, helvetica, sans-serif
}
.fieldContent {
	FONT-SIZE: 11pt; COLOR: #000066; FONT-FAMILY: sans-serif, arial, helvetica, verdana
}
.fieldContentB {
	FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: sans-serif, arial, helvetica, verdana
}
.fieldContentBold {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #000066; FONT-FAMILY: arial, helvetica, sans-serif
}

.bodyTextB {
	FONT-SIZE: 11pt; FONT-FAMILY: sans-serif, helvetica, arial; color:#000000
}
.bodyTextBold {
	FONT-WEIGHT: bold; FONT-SIZE: 1.2em; FONT-FAMILY: sans-serif, helvetica, arial; color:#ffffff
}
.bodyTextW {
	FONT-SIZE: 11pt; FONT-FAMILY: sans-serif, helvetica, arial; color:#FFFFFF
}
.bodyTextV11 {
	FONT-SIZE: 1.3em; FONT-FAMILY:  verdana, sans-serif, helvetica, arial; color:#000000
}
.bodyTextVB11 {
	FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY:  verdana, sans-serif, helvetica, arial; color:#000000
}
.bodyTextS12 {
	FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY:  sans-serif, Forte, verdana, helvetica, arial; color:#000000
}
.bodyTextSB12 {
	FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY:  sans-serif, Forte, verdana, helvetica, arial; color:#000000
}
.bodyTextF12 {
	FONT-SIZE: 1.2em; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#000000
}
.bodyTextWiteF12 {
	FONT-SIZE: 1.2em; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#ffffff
}
.bodyTextFB12 {
	FONT-WEIGHT: bold; FONT-SIZE: 12pt.; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#000000
}
.bodyTextS14 {
	FONT-WEIGHT: bold; FONT-SIZE: 1.4em; FONT-FAMILY:  sans-serif, Forte, verdana, helvetica, arial; color:#000000
}
.bodyTextSB14 {
	FONT-WEIGHT: bold; FONT-SIZE: 1.4em; FONT-FAMILY:  sans-serif, Forte, verdana, helvetica, arial; color:#000000
}
.bodyTextF14 {
	FONT-SIZE: 1.4em; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#000000
}
.bodyTextWiteF14 {
	FONT-SIZE: 1.4em; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#ffffff
}
.bodyTextFB14 {
	FONT-WEIGHT: bold; FONT-SIZE: 1.4em; FONT-FAMILY:  Forte, sans-serif, verdana, helvetica, arial; color:#000000
}
.fieldLabelTextW {
	FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: arial, times, helvetica, arial, sans-serif
}
.fieldLabelTextBoldW {
	FONT-WEIGHT: bold; FONT-SIZE: 9pt; color:#FFFFFF; FONT-FAMILY:  arial,sans-serif, helvetica, times
}
.fieldContent08W {
	FONT-SIZE: 8pt; COLOR: #F0E68C; FONT-FAMILY: verdana, arial, helvetica, sans-serif
}
.fieldContentW {
	FONT-SIZE: 10pt; COLOR: #FFFFFF; FONT-FAMILY: verdana, arial, helvetica, sans-serif
}
.fieldContentBoldW {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #FFFFFF; FONT-FAMILY: arial, helvetica, sans-serif
}
.Bullet01W {
	font-family: webdings; find-size: 10px; color: yellow; text-decoration: none; 
}

.GridTitle01 {
	font-weight: bold; font-size: 10px; color: #ffffff; padding-top: 2pt; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
}

.tableHeader {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: arial, helvetica, sans-serif
}
.tableText {
	FONT-SIZE: 10pt; FONT-FAMILY: arial, helvetica, sans-serif
}

.bodyText {
	FONT-SIZE: 11pt; FONT-FAMILY: helvetica, sans-serif, arial
}

.homeHighlightText {
	FONT-SIZE: 10pt; COLOR: #cc9999; FONT-FAMILY: arial, helvetica, sans-serif
}
.homeHighlightText1 {
	FONT-SIZE: 9pt; COLOR: #006066; FONT-FAMILY: arial, helvetica, sans-serif
}
.automobile (
	FONT-SIZE: 18pt; FONT-WEIGHT: bold; FONT-FAMILY: webdings
}



.MenuContainer {
  position: fixed;
  top: 1%;
  left: 10%;
  transform: translate(-50%, -50%);
}

.btn {
  outline: 0;
  display: inline-flex;
  align-items: right;
  justify-content: space-between;
  background: #5380F7;
  min-width: 260px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 16px 20px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
}
.btn:focus .dropdown, .btn:active .dropdown {
  transform: translate(0, 20px);
  opacity: 1;
  visibility: visible;
}
.btn .material-icons {
  border-radius: 100%;
  -webkit-animation: ripple 0.6s linear infinite;
          animation: ripple 0.6s linear infinite;
}
.btn .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}
.btn .dropdown:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 0;
  height: 0;
  box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
  border-top: 6px solid #FFFFFF;
  border-right: 6px solid #FFFFFF;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  transform: rotate(-45deg);
  mix-blend-mode: multiple;
}
.btn .dropdown li {
  z-index: 1;
  position: relative;
  background: #FFFFFF;
  padding: 0 20px;
  color: #666;
}
.btn .dropdown li.active {
  color: #5380F7;
}
.btn .dropdown li:first-child {
  border-radius: 4px 4px 0 0;
}
.btn .dropdown li:last-child {
  border-radius: 0 0 4px 4px;
}
.btn .dropdown li:last-child a {
  border-bottom: 0;
}
.btn .dropdown a {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 0;
  color: inherit;
  font-size: 10px;
  text-decoration: none;
}

@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
  }
}


.MyDropdown {
  position: relative;
  display: inline-block;

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 0;
  color: inherit;
  font-size: 10px;
  text-decoration: none;
}

.MyDropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.MyDropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 10px;
}

.MyDropdown-content a:hover {background-color: #f1f1f1}

.MyDropdown:hover .MyDropdown-content {
  display: block;
}

.MyDropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.MyDropdown li {
  z-index: 1;
  position: relative;
  background: #FFFFFF;
  padding: 0 20px;
  color: #666;
}
.MyDropdown li.active {
  color: #5380F7;
}
.MyDropdown li:first-child {
  border-radius: 4px 4px 0 0;
}
.MyDropdown li:last-child {
  border-radius: 0 0 4px 4px;
}
.MyDropdown li:last-child a {
  border-bottom: 0;
}
.MyDropdown a {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 0;
  color: inherit;
  font-size: 10px;
  text-decoration: none;
}

# Table Rounded
.article table {
  border: 0;
  padding: 0;
  background: none;
  color: black;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
}
.article table th, .article table td {
  border: 1px solid black;
  padding: 0;
  background: none;
  color: black;
}

.article table.table0 {
  border-spacing: 2px;
}
.article table.table0 th, .article table.table0 td {
  text-align: left;
  padding: 5px;
}

.article table.table1 {
  background: #48abe0;
  color: white;
}
.article table.table1 th, .article table.table1 td {
  text-align: center;
  padding: 5px;
}

.article table.table2 {
  background: #48abe0;
  color: white;
  border-radius: 10px;
}
.article table.table2 th, .article table.table2 td {
  text-align: center;
  padding: 5px;
}

.article table.table3 {
  background: #48abe0;
  color: white;
  border-radius: 10px;
  border: 1px solid black;
}
.article table.table3 th, .article table.table3 td {
  text-align: center;
  padding: 5px;
  border: 0;
}


.article table.table4 {
  background: #48abe0;
  color: white;
  border-radius: 10px;
  border: var(--border);
  --border: 1px solid black;
}

.article table.table4 th, .article table.table4 td {
  text-align: center;
  padding: 5px;
  border: 0;
}

.article table.table4 th:not(:last-child), .article table.table4 td:not(:last-child) {
  border-right: var(--border);
}

.article table.table4>thead>tr:not(:last-child)>th,
.article table.table4>thead>tr:not(:last-child)>td,
.article table.table4>tbody>tr:not(:last-child)>th,
.article table.table4>tbody>tr:not(:last-child)>td,
.article table.table4>tfoot>tr:not(:last-child)>th,
.article table.table4>tfoot>tr:not(:last-child)>td,
.article table.table4>tr:not(:last-child)>td,
.article table.table4>tr:not(:last-child)>th,
.article table.table4>thead:not(:last-child),
.article table.table4>tbody:not(:last-child),
.article table.table4>tfoot:not(:last-child) {
  border-bottom: var(--border);
}

.article table.table4.highlight th {
  background: red;
}

.article table.table4.roundedbg {
  overflow: hidden;
}
.article table.table4.roundedbg tr:hover th,
.article table.table4.roundedbg tr:hover td {
  background: rgba(255, 255, 255, 0.5);
}

.article table.table5 th, .article table.table5 td {
  background: #48abe0;
  text-align: center;
  padding: 8px;
  border: 0;
}

.article table.table5 th:not(:last-child), .article table.table5 td:not(:last-child) {
  border-right: 1px solid black;
}

.article table.table5>thead>tr:not(:last-child)>th,
.article table.table5>thead>tr:not(:last-child)>td,
.article table.table5>tbody>tr:not(:last-child)>th,
.article table.table5>tbody>tr:not(:last-child)>td,
.article table.table5>tfoot>tr:not(:last-child)>th,
.article table.table5>tfoot>tr:not(:last-child)>td,
.article table.table5>tr:not(:last-child)>td,
.article table.table5>tr:not(:last-child)>th,
.article table.table5>thead:not(:last-child),
.article table.table5>tbody:not(:last-child),
.article table.table5>tfoot:not(:last-child) {
  border-bottom: 1px solid black;
}

.article table.table5 tr:first-child th {
  border-top: 1px solid black;
}

.article table.table5 tr :first-child {
  border-left: 1px solid black;
}

.article table.table5 tr :last-child {
  border-right: 1px solid black;
}

.article table.table5 tr:last-child td {
  border-bottom: 1px solid black;
}

.article table.table5 th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.article table.table5 th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.article table.table5 tr:nth-child(2) :first-child {
  border-top-left-radius: 10px;
}

.article table.table5 tr:nth-child(2) :last-child {
  border-top-right-radius: 10px;
}

.article table.table5 tr:last-child :first-child {
  border-bottom-left-radius: 10px;
}

.article table.table5 tr:last-child :last-child {
  border-bottom-right-radius: 10px;
}

.article table.table6 {
  border-collapse: separate;
  border-spacing: 1px;
}

.article table.table6 th, .article table.table6 td {
  padding: 8px;
  text-align: center;
  border: 0;
  background: #48abe0;
  box-shadow: 0 0 0 1px black;
}

.article table.table6 tr:hover th, .article table.table6 tr:hover td {
  background: #92cded;
}


.article table.table6 thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.article table.table6 thead tr:last-child th:first-child {
  border-bottom-left-radius: 10px;
}

.article table.table6 thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

.article table.table6 thead tr:last-child th:last-child {
  border-bottom-right-radius: 10px;
}

.article table.table6 tbody tr:first-child td:first-child {
  border-top-left-radius: 10px;
}

.article table.table6 tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.article table.table6 tbody tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

.article table.table6 tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}


# Moved from Main page
/* Full-width input fields */
.input[type=text], .input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 7px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 9px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 2px 0 2px 0;
    position: relative;
}

img.avatar {
    width: 20%;
    border-radius: 25%;
}

.imgbackground {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.container {
    padding: 8px;
}

span.psw {
    float: right;
    padding-top: 8px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    #left: 540px;
    top: 0;
    #width: 300px; /* Full width */
    height: 300px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #fab3a2; /* rgba(0,0,0,0.4); Black w/ opacity */
    #padding-top: 40px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fab3a2;
    #margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #123456;
    width: 100%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 5px;
    top: 0;
    color: #444000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

#//    .modal {
#//      display: none;
#//      position: fixed;
#//      z-index: 1;
#//      left: 0; top: 0;
#//      width: 100%; height: 100%;
#//      overflow: auto;
#//      background-color: rgba(0,0,0,0.5);
#//    }
#//    .modal-content {
#//      background-color: #fff;
#//      margin: 15% auto;
#//      padding: 20px;
#//      border: 1px solid #888;
#//      width: 300px;
#//      border-radius: 5px;
#//    }
#//    .close {
#//      color: #aaa;
#//      float: right;
#//      font-size: 28px;
#//      font-weight: bold;
#//      cursor: pointer;
#//    }
#//    .close:hover { color: black; }
#//    input[type="text"], input[type="password"] {
#//      width: 100%;
#//      padding: 8px;
#//      margin: 8px 0;
#//      box-sizing: border-box;
#//    }

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
.topright {
    position: absolute;
    top: 0px;
    //width:900px;
    //left: 750px;
    text-align: right;
    align: right;
    right: 0px;
    font-size: 1.2em;
    //z-index:70;
}

.AlignedControl Label
{
    position: relative;
    top: -32px;
}


# // Buttom 
<!-- HTML !-->
<button class="button-15" role="button">Button 15</button>

/* CSS */
.button-15 {
  background-image: linear-gradient(#42A1EC, #0070C9);
  border: 1px solid #0077CC;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  display: block;
  font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-15:disabled {
  cursor: default;
  opacity: .3;
}

.button-15:hover {
  background-image: linear-gradient(#51A9EE, #147BCD);
  border-color: #1482D0;
  text-decoration: none;
}

.button-15:active {
  background-image: linear-gradient(#3D94D9, #0067B9);
  border-color: #006DBC;
  outline: none;
}

.button-15:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}

<!-- HTML !-->
<button class="button-82-pushable" role="button">
  <span class="button-82-shadow"></span>
  <span class="button-82-edge"></span>
  <span class="button-82-front text">
    Button 82
  </span>
</button>

/* CSS */
.button-82-pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

.button-82-front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
  .button-82-front {
    font-size: 1.25rem;
    padding: 12px 42px;
  }
}

.button-82-pushable:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

#// <!-- HTML !-->
#// <button class="button-75" role="button"><span class="text">Button 75</span></button>

/* CSS */
.button-75 {
  align-items: center;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: "Codec cold",sans-serif;
  font-size: 16px;
  font-weight: 700;
  height: 54px;
  justify-content: center;
  letter-spacing: .4px;
  line-height: 1;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-75:active {
  outline: 0;
}

.button-75:hover {
  outline: 0;
}

.button-75 span {
  transition: all 200ms;
}

.button-75:hover span {
  transform: scale(.9);
  opacity: .75;
}

@media screen and (max-width: 991px) {
  .button-75 {
    font-size: 15px;
    height: 50px;
  }

  .button-75 span {
    line-height: 50px;
  }
}