:root {
  --fontf: "Open Sans", "Helvetica Neue, sans-serif";
  --fontLogin : "Raleway" , "Helvetica Neue";
  --fontXXL: 27px;
  --fontXL: 25px;
  --fontL: 22px;
  --fontBody: 20px;
  --fontMPlus: 19px;
  --fontM: 18px;
  --fontS: 17px;
  --fontXS: 15px;
  --baseColor: #6e1e8f;   /* purple */
  --secondColor: #316318;   /* green */
  --thirdColor: #6c0a58;    /* pink */
  --fourthColor: #1d1499;     /* blue */
  --fifthColor: #912107;     /* rust */
  --sixthColor: #643d86; /* mauve */
  --orange: #f47e30;
  --yellow: #fbb42b;
  --red: #c80f40;
  --steelblue: #0c4da2;
  --borderColor: #d3bbdd;
  --borderColorDark: #a895b0;
  --grey: #424242;
  --pink: #893a79;
  --light-green: #45722f;
  --title: #640665;
  --bckgrnd: #fbfafc;
  --tableHeaders: #912107;
}

/*
baseColor -
secondColor - Labels, Primary Buttons, Selected Link
thirdColor - Top menu, Links, H1

*/
/*TODO: Remove all id references. Switch to class*/

/* Top level styles */
html,body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

body {
  background-color: #fff;
  font-family: var(--fontf);
  font-size: var(--fontBody);
  color:#000;
}

body.login {
  color: #ffffff;
  background-color: var(--baseColor);
}

/* Anchor Styles */
a {
  padding-right: 1rem;
  padding-left: 5px;
  color: var(--fifthColor);
  text-decoration: none;
  font-weight: bold;
}

a.tabLink {
  color: var(--fifthColor);
  text-decoration: none;
  font-weight: bold;
  padding: 3px;
}

a.blue {
  padding-right: 1rem;
  padding-left: 5px;
  color: var(--steelblue);
  text-decoration: underline;
  font-weight: bold;
}

a.selected {
  color: var(--secondColor);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 3px solid var(--secondColor);
  /*background: url(../images/up-arrow-green-20.png) center bottom no-repeat;*/
}

a.top {
  color: inherit;
  text-decoration: none;
  font-size: 20px;
}

a.header {
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  text-align: center;
  font-weight: bold;
}

a.pointer {
  cursor: pointer;
}
a.primary {
  color: var(--fifthColor);
  text-decoration: none;
  font-size: var(--fontBody);
  text-align: center;
  margin: 7px;
  cursor: pointer;
}

a.basic {
  color: #474f8f;
  cursor: pointer;
  font-size: 15px;
}

a.lastvisited {
  color: var(--fifthColor);
  cursor: pointer;
  font-size: var(--fontBody);
}

a.favCondition {
  color: var(--fifthColor);
  cursor: pointer;
  font-size: var(--fontM);
}

a.dropdown-link {
  color: #fff;
  cursor: pointer;
  font-size: var(--fontXS);
}

a.teeny-link {
  color: var(--fourthColor);
  cursor: pointer;
  font-size: 13px;
}

a.alphabet {
  color: var(--fifthColor);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--fontBody);
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

a.alphabet:hover {
  border-radius: 50%;
  color:#fff;
  background-color: var(--baseColor);
}

a.alphabetSelected {
  font-weight: bold;
  font-size: var(--fontL);
  text-decoration: none;
  color: #fff;
  background-color: var(--baseColor);
  border-radius: 50%;
}

div.topics {
    text-align:center;
}

a.topic {
  color: var(--fifthColor);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--fontBody);
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 4px;
  border-radius: 25px;
}

a.topic:hover {
  color:#fff;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 4px;
  border-radius: 25px;
  text-decoration: none;
  background-color: var(--baseColor);
}

a.topicSelected {
  font-weight: bold;
  font-size: var(--fontL);
  text-decoration: none;
  color: #fff;
  background-color: var(--baseColor);
}

a.toggle-link {
  color: #474f8f;
  cursor: pointer;
  font-size: var(--fontM);
}
span.toggle {
  font-size: 14px;
}
span.help-block {
  font-size: 16px;
  color: #fff;
  width: 10em;
}

span.err-block {
  font-size: 18px;
  padding: 5px;
  color: #cc0000;
}

span.success-block {
  font-size: 18px;
  padding: 5px;
  color: var(--secondColor);
}


span.help-text {
  font-size: 17px;
  color: var(--secondColor);
}

span.forgot {
  color: var(--baseColor);
}

span.di-title {
  color: var(--secondColor);
  font-weight: bold;
}

span.da-title {
  color: var(--fifthColor);
  font-weight: bold;
  font-size: 18px;
}
span.tip {
  padding-left: 10px;
  font-size: var(--fontS);
}

/* Colours */
.blue {
  color: #0598f6;
}

.green {
  color: #468b89;
}

.pink {
  color: #b26ab4;
}

.purple {
  color: var(--baseColor);
}

.peach {
  /*color: #e77271;*/
  color: #ff5252;
}

.red {
  color: var(--red);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}

/* Div styles */
div#login {
  position: absolute;
  top: 5%;
  left: 33%;
  font-family: var(--fontLogin);
  font-size: 75px;
  text-align: center;
}

div#top {
  height: 80px;
  color: #FFFFFF;
  background-color: #4ec3ad;

}

div#header {
  height: 3em;
  color: #FFFFFF;
  background-color: var(--baseColor);
  text-align: center;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

div.content{
  margin-left: 15px;
  margin-top: 10px;
  font-size: 18px;
  margin-right: 20px;
}

div.color-block {
  display: inline-block;
  width: 10%;
  height: 100%;
  background-color: red;
  color: #fff;
  font-size: var(--fontL);
}
div.color-block-wrapper {
  display: inline-block;
  width: 10%;
  height: 100%;
  float: right;
}

div.color-block2 {
  display: inline-block;
  width: 100%;
  height: 46%;
  background-color: red;
  color: #fff;
  font-size: var(--fontL);
}
div.content-right {
  margin-top: 0px;
  display: inline-block;
  vertical-align: top;
  width: 80%;
}

div.split {
  -webkit-column-count: 7; /* Chrome, Safari, Opera */
  -moz-column-count: 7; /* Firefox */
  column-count: 7;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #E9EAEA;
  padding: 20px;
  margin: 8px;
  width: 95%;
}

div.split-three {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--borderColor);
  padding: 20px 10px;
  margin: 8px;
  width: 95%;
}


div.split-five {
  -webkit-column-count: 5; /* Chrome, Safari, Opera */
  -moz-column-count: 5; /* Firefox */
  column-count: 5;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #E9EAEA;
  padding: 20px 10px;
  margin: 8px;
  width: 95%;
}

div.split > p:first-child {
    margin-top: 0;
}

div.split-three > p:first-child {
    margin-top: 0;
}

div.split-five > p:first-child {
    margin-top: 0;
}

div.split1 > p:first-child {
    margin-top: 0;
}

div.split2 > p:first-child {
    margin-top: 0;
}

div.split1 {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  border-radius: 8px;
  border: 1px solid var(--borderColor);
  padding: 20px;
  margin: 8px;
  width: 99%;
}

div.split2 {
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
  border-radius: 8px;
  border: 1px solid var(--borderColor);
  font-size: 12px;
  padding: 20px;
  margin: 8px;
  width: 99%;
}



div#druggrouplist {
  display: inline-block;
  vertical-align: top;
  width: 95%;
}

div#majordrugslist{
  vertical-align: top;
  width: 95%;
}

div#contra {
  vertical-align: top;
  border-radius: 8px;
  border: 1px solid #E9EAEA;
  padding: 20px;
  margin: 8px;
  width: 96%;
  word-wrap: normal;
  white-space: pre-wrap;
}

div.cgColor {
  background-color: #fceaf3;
}

div.catColor {
  background-color: #e4f5f8;
}

div.scColor {
  background-color: #f0f4f6;
}

div.dgColor {
  background-color: #ffece5;
}

div.mdColor {
  background-color: #f1e7e2;
}
div.grey1 {
  background-color: #F1EDEB;
}

div.alphabets {
    text-align:center;
}

.grey {
  background-color: #F1EDEB;
}

p.filter {
  /*break-inside: avoid-column;
   -webkit-column-break-inside: avoid;*/
   /*overflow: hidden;*/
   margin-bottom: 10px;
   -webkit-column-break-inside: avoid;
   break-inside: avoid;
   page-break-inside: avoid;
}

a.filter {
  padding: 1px;
  /*overflow: hidden;*/
  cursor: pointer;
  text-decoration: none;
  font-size: 19px;
  color:var(--baseColor);
}

a.filter.active {
  background-color: var(--baseColor); /*#429dd6*/
  color: #ffffff;
  border: 1px solid white;
  border-radius: 5px;
}

input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

input[type="checkbox"].generic {
  width: 22px;
  height: 22px;
  vertical-align:middle;
}


tr.expand-row.active {
  background-color: #fceaf3; /*DCEDF7*/
  border-top: 2px solid var(--borderColor);
  border-right: 2px solid var(--borderColor);
  border-left: 2px solid var(--borderColor);
  border-bottom: 2px solid #fceaf3;
}

tr.scheduledetail.active {
  /*background-color: #F4F9FC;*/
  background-color: #f7f3f9; /*EDF6F5*/
  border: 2px solid var(--borderColor);
}



/* TODO :  The following three divs needs to be combined - repetitive now */
div.large-box {
  display: inline-block;
  width: 340px;
  vertical-align: top;
}

div.xtra-large-box {
  display: inline-block;
  width: 440px;
  vertical-align: top;
}

div.huge-box {
  display: inline-block;
  width: 500px;
  vertical-align: top;
}
div.xtra-huge-box {
  display: inline-block;
  width: 580px;
  vertical-align: top;
}

div.massive-box {
  display: inline-block;
  width: 850px;
  vertical-align: top;
}

div.massive-box-login {
  display: inline-block;
  text-align: left;
  width: 800px;
  vertical-align: top;
}
div.xtra-massive-box {
  display: inline-block;
  width: 65em;
  vertical-align: top;
}

div.full-box {
  display: inline-block;
  width: 60em;
  vertical-align: top;
}

div.full-length-box {
  display: inline-block;
  width: 80em;
  vertical-align: top;
}

div.small-box {
  display: inline-block;
  width: 230px;
  vertical-align: top;
}

div.xtra-small-box {
  display: inline-block;
  width: 180px;
  vertical-align: top;
}

div.mini-box {
  display: inline-block;
  width: 110px;
  vertical-align: top;
}

div.xxs-box {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

div.teeny-box {
  display: inline-block;
  width: 70px;
  text-align: top;
}

div.success{
  background-color: #DFF0D8;
  min-height: 20px;
  padding: 2px 20px 10px 10px;
  margin-left: 0px;
  margin-right: 20px;
  border-radius: 5px;
  font-size: var(--fontM);
  color: #3C763D;
  display: inline-block;
}

div.error{
  background-color: #E7D0D0;
  min-height: 25px;
  padding: 10px;
  width: 98%;
  border-radius: 5px;
  font-size: var(--fontM);
  color: #800000;
}
div.warning{
  background-color: #fce5d5;
  min-height: 25px;
  width: 96%;
  padding: 20px;
  margin: 8px;
  border-radius: 5px;
  font-size: var(--fontM);
  color: #613213;
}

/* Image styles */
img#login {
  width: 180px;
  height: 180px;
}

img.logo-medium {
  width: 150px;
  height: 150px;
}
img.logo-teeny {
  width: 2em;
  height: 2em;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
}

img.logo {
  padding: 5px;
  height: 2em;
  width: 2em;
  vertical-align: middle;
}

img#top {
  width: 75px;
  height: 75px;
}

img#header {
  width: 30px;
  height: 30px;
  margin-top: 3px;
}

img#settings {
  width: 20px;
  height: 20px;
}

img.arrow {
  vertical-align: -10%;
}

img.icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

img.icon30{
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

img.icon40{
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

img.up-down{
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

img.add-taper{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

img.add-main{
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

/* H1 styles */
h1#login {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom:0px;
  font-family: var(--fontLogin);
  font-size: 70px;
  font-weight: inherit;
}

h1.logo-medium {
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom:0px;
  font-family: var(--fontLogin);
  font-size: 50px;
  font-weight: inherit;
}

h2#top {
  display: inline;
  vertical-align: 50%;
  font-family: var(--fontLogin);
  font-weight: inherit;
  font-size: 35px;
}

h2#header {
  display: inline;
  vertical-align: 20%;
  font-family: var(--fontLogin);
  font-weight: inherit;
  font-size: 25px;
  text-align: center;
}

h3.title {
  margin: 2px 1px 10px 1px;
  color: var(--thirdColor);
  font-size: 25px;
  font-weight: bold;
}

h3.title-inline {
  color: var(--thirdColor);
  font-size: 25px;
  font-weight: bold;
  display: inline;
}

h4 {
  margin: 20px 1px 5px 1px;
  color: #626262;
  font-size: 17px;
  font-weight: inherit;
}

h4.title-inline {
  display: inline;
  vertical-align: -5%;
}

div.empty-list{
  background-color: #f7f3f9;
  min-height: 25px;
  padding: 10px;
  width: 95%;
  border: 1px solid var(--borderColor);
  border-radius: 5px;
  color: #800000;
  display: inline-block;
}
div.faq-list{
  background-color: #f7f3f9;
  min-height: 25px;
  padding: 10px;
  width: 95%;
  border: 1px solid var(--borderColor);
  border-radius: 5px;
  color: var(--thirdColor);
  display: inline-block;
  font-size: var(--fontMPlus);
}
/* Navigation */
nav {
  display: inline;
  float: left;
  /*margin-top: 30px;*/
  margin-top: 10px;
  margin-right: 1px;
  font-family: var(--fontf);
  font-size: 20px;
  font-weight: inherit;
}

nav a {
  padding: 0px 20px;
  vertical-align: 50%;
  font-size: 20px;
  color: red;
}

nav a.active {
  border-bottom: 3px solid #fff;
}

nav a:hover {
  color: #F5F5F5;
  text-decoration: underline;
}

span#logo {
  text-align: center;
  float: right;
  display: inline-block;
  margin-left: 10px;
}

a.button {
  color: #ffffff;
  background-color: var(--fourthColor); /*7d5ba6*/
  border: 1px solid var(--fourthColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  padding: 6px 8px;
  margin-right: 10px;
}


a.clear {
  color: #fff;
  border: 2px solid var(--baseColor);
  background-color: var(--baseColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  padding: 3px 6px;
  vertical-align: baseline;
}

button.go {
  color: #fff;
  background-color: var(--fourthColor);
  border: 2px solid var(--fourthColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  padding: 6px 15px;
  cursor: pointer;
  outline: none;
  vertical-align: baseline;
}

button.search {
  color: #fff;
  background-color: var(--fourthColor);
  border: 2px solid var(--fourthColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  vertical-align: baseline;
}

a.purple {
  color: #ffffff;
  background-color: #bd5e9a;
  border: 1px solid #bd5e9a;
}

a.button2 {
  color: #ffffff;
  background-color: var(--fourthColor);
  border: 1px solid var(--fourthColor);
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  padding: 8px 8px;
  margin-right: 5px;
}

a.button3 {
  color: #ffffff;
  background-color: var(--secondColor);
  border: 1px solid var(--secondColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  padding: 8px 8px;
  margin-right: 10px;
}

/* Select lists */
select {
  width: 210px;
  height: 45px;
  margin-top: 11px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--borderColorDark);
  border-radius: 5px;
  font-size: var(--fontM);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #ffffff url("../images/down_arrow.png") no-repeat center right;
}

select.multiple{
  height: 8em;
  width: 10em;
}
  /*select[multiple]:focus option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
select[multiple]:blur option:checked {
  background: #429dd6;
}*/
select.duration {
  width: 80px;
  height: 36px;
  vertical-align: top;
  font-size: var(--fontS);
}

select.large {
  width: 400px;
  margin-right: 10px;
  font-size: 14px;
  font-size: var(--fontM);
}

select.hospital {
  width: 19.3rem;
  margin-right: 10px;
  font-size: 14px;
  font-size: var(--fontM);
}

select.ageweight {
  width: 290px;
  margin-right: 10px;
  font-size: 14px;
  font-size: var(--fontM);
}

select.small {
  width: 80px;
  margin-right: 10px;
  background: #ffffff;
  border: 1px solid #e1e1e2;
  font-size: 14px;
  outline: none;
}

select.medium {
  width: 140px;
  margin-right: 10px;
  background: #ffffff;
  border: 1px solid #e1e1e2;
  font-size: 14px;
  outline: none;
}

/* Input fields */
input[type=text] {
  width: 200px;
  height: 35px;
  margin-top: 11px;
  margin-right: 10px;
  padding: 4px;
  border: 1px solid var(--borderColorDark);
  border-radius: 5px;
  font-size: var(--fontBody);
  font-family: var(--fontf);
  outline: none;
}

input[type=password] {
  width: 200px;
  height: 35px;
  margin-top: 11px;
  margin-right: 10px;
  padding-left: 5px;
  border: 1px solid var(--borderColorDark);
  border-radius: 5px;
  font-size: var(--fontL);
  outline: none;
}

input[type=password].large {
  width: 300px;
}

input[type=password].xtra-large {
  width: 370px;
}


input[type=password].huge {
  width: 400px;
}

input[type=text].large {
  width: 300px;
}

input[type=text].xtra-large {
  width: 370px;
}

input[type=text].medicine {
  width: 300px;
  height:30px;
  font-size: var(--fontMPlus);
  color: #000;
}
input[type=text].default-brand {
  width: 30rem;
  height:30px;
  font-size: var(--fontMPlus);
  color: #000;
}

input[type=text].default-pack-size {
  width: 100px;
  height:30px;
  font-size: var(--fontMPlus);
  color: #000;
}

input[type=text].huge {
  width: 400px;
}

input[type=text].xtra-huge {
  width: 550px;
}

input[type=text].massive {
  width: 800px;
}

input[type=text].xtra-massive {
  width: 1000px;
}

input[type=text].full {
  width: 100%;
}

input[type=text].full-length-box {
  width: 100%;
  height: 23px;
}
input[type=text].medium {
  width: 150px;
}

input[type=text].small-medium {
  width: 100px;
}
input[type=text].small {
  width: 80px;
}

input[type=text].teeny {
  width: 80px;
  height: 35px;
}

input[type=text].micro {
  width: 2em;
  height: 35px;
  margin-right: 0px;
  vertical-align: top;
}

input[type=text].duration {
  width: 1.5em;
  height: 27px;
  margin-right: 0px;
  vertical-align: top;
  font-size: var(--fontMPlus);
}

input[type=text].dose {
  width: 3em;
  height: 27px;
  font-size: var(--fontMPlus);
}

input[type=text].age {
  width: 1.7em;
  margin-right: 2px;
}


input[type=date] {
  height: 38px;
  width: 160px;
  margin-top: 11px;
  margin-right: 5px;
  padding: 4px;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--borderColorDark);
  border-radius: 5px;
  outline: none;
}


input[type=date].noborder {
    outline: none;
    height: 38px;
    width: 160px;
    margin-top: 11px;
    margin-right: 5px;
    padding: 4px;
    font-family: inherit;
    font-size: var(--fontMPlus);
    outline: none;
    border: none;
}

input[type=datetime-local] {
  height: 35px;
  width: 170px;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #e1e1e2;
  border-radius: 5px;
  outline: none;
}
input.capital {
  text-transform: capitalize;
}

input:read-only {
  background-color: #f6f6f6;
}
input[type=text].bigLetter {
  font-size: var(--fontL);
}

input[type=radio] {
  height: 1.8em;
  width: 1.8em;
  vertical-align: text-bottom;

}
/* Buttons */
button {
    text-align: center;
    vertical-align: middle;
}

button.login {
  color: var(--baseColor);
  font-family: var(--fontLogin);
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding: 8px 30px;
  margin-right: 10px;
  margin-top: 20px;
  width: 150px;
}

button.purpleLogin {
  color: #fff;
  background-color: var(--baseColor);
  border: 1px solid var(--baseColor);
  font-family: var(--fontLogin);
  font-size: 25px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  padding: 8px 30px;
  margin-right: 10px;
  margin-top: 20px;
  width: 150px;
}

button.create {
  display: inline;
  height: 50px;
  width: 50px;
  color: white;
  font-size: 40px;
  margin-right: 50px;
  border-radius: 50%;
  padding: 0px;
  background-color: #7d5ba6;
  border: 1px solid #7d5ba6;
}

button.primary {
  color: #fff;
  background-color: var(--secondColor);
  border: 1px solid var(--secondColor);
  border-radius: 5px;
  font-size: var(--fontL);
  cursor: pointer;
  outline: none;
  padding: 7px 10px;
  margin-right: 20px;
}

button.secondary {
  color: #fff;
  background-color: var(--fourthColor);
  border: 1px solid var(--fourthColor);
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  outline: none;
  padding: 7px 30px;
  margin-right: 10px;
}

button.tertiary {
  color: #fff;
  background-color: #5e7bad;
  border: 1px solid #5e7bad;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  outline:none;
  padding:8px 15px;
  margin-right: 10px;
}

button.fourth {
  color: #fff;
  background-color: #b46991;
  border: 1px solid #b46991;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  outline: none;
  padding: 8px 15px;
  margin-right: 10px;
}

button.fifth {
  color: #fff;
  background-color: var(--secondColor); /*6991b4*/
  border: 1px solid var(--secondColor);
  border-radius: 5px;
  font-size: 17px;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
  margin-right: 5px;
}

button.micro {
  color: #fff;
  background-color: var(--secondColor);
  border: 1px solid var(--secondColor);
  border-radius: 5px;
  font-size: var(--fontS);
  cursor: pointer;
  outline: none;
  padding: 2px 2px;
  margin-right: 10px;
}

button.micro-blue {
  color: #fff;
  background-color: var(--fourthColor);
  border: 1px solid var(--fourthColor);
  border-radius: 5px;
  font-size: var(--fontS);
  cursor: pointer;
  outline: none;
  padding: 2px 2px;
  margin-right: 10px;
}

button.micro-brown {
  color: #fff;
  background-color: var(--fifthColor);
  border: 1px solid var(--fifthColor);
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  padding: 2px 2px;
}

button.tag {
  color: var(--steelblue);
  background-color: #fff;
  border: none;
  font-size: var(--fontBody);
  cursor: pointer;
  outline: none;
  margin: 7px 2px;
}

button.activetag{
  color: #ffffff;
  background-color: var(--baseColor);
  border: 1px solid var(--baseColor);
  border-radius: 5px;
  font-size: var(--fontBody);
  cursor: pointer;
  outline: none;
  margin: 7px 2px;
  padding:3px;
}

button.cancel {    /*TODO Delete this and use button.gray  */
  color: #fff;
  background-color: var(--thirdColor);
  border: 2px solid var(--thirdColor);
  border-radius: 5px;
  font-size: var(--fontL);
  cursor: pointer;
  padding: 7px 20px;
  outline: none;
}

button.trash {
  color: #fff;
  background-color: var(--red);
  border: 1px solid var(--red);
  border-radius: 5px;
  font-size: var(--fontL);
  cursor: pointer;
  outline: none;
  padding: 7px 10px;
  margin-right: 25px;
}

button.delete {
  color: #424242;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  float: right;
  cursor: pointer;
  outline: none;
  vertical-align: 90%;
}

img.trash {
  width:30px;
  height:30px;
  padding:1px;
}

textarea {
  border: 1px solid var(--borderColorDark);
  border-radius: 5px;
  height: 50px;
  width: 250px;
  margin-top: 11px;
  font-family: var(--fontf);
  font-size: var(--fontMPlus);
  resize: none;
  color: #000;
}

#textarea-editable {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #555;
  font-size: 14px;
  height: 34px;
  width: 450px;
}

textarea.small {
  height: 4em;
  width: 150px;
}

textarea.advice {
  height: 8em;
  width: 160px;
  margin-top: 1px;
  font-size: var(--fontMPlus);
}

textarea.advice-otherlang {
  height: 8em;
  width: 160px;
  margin-top: 1px;
  font-size: var(--fontMPlus);
}

textarea.chemical {
  width: 22em;
  height: 3em;
}

textarea.chemical-small {
  width: 15em;
  height: 4em;
}

textarea.condition {
  width: 42em;
  height: 4em;
}

textarea.instructions-otherlang {
  height: 20rem;
  width: 38em;
  font-size: var(--fontMPlus);
}

textarea.instructions {
  height: 20rem;
  width: 38em;
  font-size: var(--fontMPlus);
}

textarea.doseinstructions {
  height: 4em;
  width: 150px;
}

textarea.details {
  height: 10rem;
  width: 90%;
}

textarea.wysiwig {
  height: 10rem;
  width: 90%;
}

textarea.small-details {
  height: 5rem;
  width: 50%;
}

textarea.terms {
  height: 20rem;
  width: 90%;
  font-size: var(--fontS);
}


textarea.xtra-large {
  height: 24em;
  width: 60rem;
}

textarea.name {
  height: 3em;
  width: 90%;
}

textarea.abbreviations {
  height: 5em;
  width: 1000px;
}

textarea.notes {
  height: 5em;
  width: 1000px;
}

textarea.composition {
  height: 5em;
  width: 23em;
}
textarea.composition-search {
  height: 5em;
  width: 20rem;
}
textarea.patientnotes {
  height: 10em;
  width: 34em;
}

textarea.large {
  border: 1px solid #e1e1e2;
  border-radius: 5px;
  height: 80px;
  width: 800px;
  resize: none;
}

textarea.medium{
  height: 11em;
  width: 60rem;
}

textarea.massive {
  border: 1px solid #e1e1e2;
  border-radius: 5px;
  height: 80px;
  width: 1000px;
  resize: none;
}

span {
  font-size: var(--fontBody);
}
span.table {
  font-size: var(--fontS);
}
span.separator {
  font-weight: bold;
  font-size: var(--fontS);
  color: var(--secondColor);
}
span.separator-small {
  color: #000;
  font-size: 16px;
  vertical-align: top;
}

span.chemical {
  color: var(--baseColor);
  font-size: var(--fontBody);
}
span.chemical-table {
  color: var(--baseColor);
  font-size: var(--fontS);
}

span.selected-link {
   font-size: 15px;
   font-weight: bold;
   color: #626262;
   margin-right: 20px;
   vertical-align: middle;
}

span.otherlang {
   font-family: "Open Sans", "Helvetica Neue, sans-serif";
   font-size: var(--fontMPlus);
   white-space: pre-wrap;
   word-wrap: normal;
}

span.english {
    white-space: pre-wrap;
    word-wrap: normal;
    font-size: var(--fontS);
}

span.notes {
  word-wrap: normal;
  white-space: pre-wrap;
  color: #c00000;
  font-size: inherit;
}

span.red {
  word-wrap: normal;
  white-space: pre-wrap;
  color: #c00000;
  font-size: var(--fontBody);
}

span.mal {
  font-size: 17px;
  font-weight: normal;
  font-family: var(--fontf);
}
/*span.subinstructionsEnglish {
  font-size: 17px;
}*/

span.manufacturer {
   font-style: italic;
   color: var(--fifthColor);  /*#ff5252*/
}

span.manufacturer-table {
   font-style: italic;
   font-size: var(--fontS);
   color: var(--fifthColor);  /*#ff5252*/
}

span.filter{
   color: var(--secondColor);
   font-size: var(--fontL);
   margin-left: 10px;
}

span.filter-msg{
   color: var(--fourthColor);
   font-size: var(--fontM);
   margin-left: 10px;
   font-style: italic;
}


span.clickable {
   cursor: pointer;
   font-size: var(--fontS);
}

span.composition {
    white-space: pre-wrap;
    word-wrap: normal;
    font-size: var(--fontXS);
}

p.details {
    white-space: pre-wrap;
}

div.details {
    white-space: pre-wrap;
    word-wrap: normal;
    font-size: var(--fontM);
}

div.detailsTinyMCE p {
 margin-block-start: 0em;
 margin-block-end: 0em;
}

div.detailsTinyMCE {
  word-wrap: normal;
  font-size: var(--fontMPlus);
}

div.middle {
    align:center;
    word-wrap: normal;
    font-size: var(--fontBody);
    margin-left: 20px;
}

div.long-text {
    white-space: pre-wrap;
    word-wrap: normal;
    font-size: var(--fontBody);
}

/* Unordered lists */
#left-nav ul {
  list-style-type: none;
  margin-top: 5px;
  margin-left: 10px;
  padding-left: 10px;
}

#left-nav li {
  list-style-type: none;
  padding: 4px;
}

#left-nav a:hover{
   text-decoration: underline;
   color:#000000;
}

#left-nav a {
  text-decoration: none;
  color: var(--baseColor);
  font-size: var(--fontM);
}

div#left-nav {
  height: auto;  /*  TODO : Something more sensible here*/
  width: 14%;
  background-color: #fceaf3;
  float: left;
  margin-right: 20px;
  padding-left: 15px;
  padding-top: 15px;
  display: inline;
}

ul.links {
    list-style-type: none;
}

/* start of id wise
#sortable ul{
  list-style-type: none;
  margin: 0; padding: 0; width: 25%;
}

#sortable {   }
ul#sortable li {
    margin: 0 3px 10px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1em;
    height: 25px;
    list-style-type: none;
}

ul#sortable  {
  counter-reset: rowNumber;
}

div.sortcatgroup {
  width:30%;
  display: inline-block;
  vertical-align: top;
}
div.sortdruggroup {
  width:20%;
  display: inline-block;
  vertical-align: top;
}

ul#sortable li:before {
    counter-increment:rowNumber;
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
ul#sortable li:hover{
  background-color: #f9f9f9;
  border-color:#9ecaed;
  box-shadow:0 0 10px #9ecaed;
}
.ui-sortable {
}
.ui-sortable li.ui-state-default {
  background-color: #ffffff;
  border-radius: 5px;
}
/* end of id wise */

/* start of class wise */

ul.ui-sortable li {
    margin: 0 3px 10px 3px;
    padding: 0.2em;
    padding-left: 0.5em;
    font-size: var(--fontS);
    height: auto;
    list-style-type: none;
    cursor: pointer;
}

ul.ui-sortable {
  counter-reset: rowNumber;
  list-style-type: none;
  margin: 0; padding: 0; width: 100%;
}

div.sortcatgroup {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

div.preparedpresc {
  width: 25%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 2px solid #367BF0;
}

div.sortcategory {
  width: 18%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

div.sortsubcategory {
  width: 15%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

div.sortdruggroup {
  width: 14%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

div.sortschedule {
  width: 18%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

ul.ui-sortable  li:before {
    counter-increment: rowNumber;
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
ul.ui-sortable li:hover{
  background-color: #E5F3FC;
  border-color: #9ecaed;
  box-shadow:0 0 10px #9ecaed;
}

.ui-sortable {
}

.ui-sortable li.ui-state-default {
  background-color: #ffffff;
  border-radius: 5px;
}

.ui-sortable li.ui-state-default.active{
  background-color: #ACDCF7;
  border-color: #7297AC;
  border-radius: 5px;
}
/* end of class wise */

input:focus {
  outline: none;
  border-color: var(--borderColor);
  box-shadow: 0 0 10px var(--borderColor);
}

select:focus {
  outline: none;
  border-color: var(--borderColor); /*#9ecaed*/
  box-shadow: 0 0 4px var(--borderColor);
}

textarea:focus {
  outline: none;
  border-color: var(--borderColor);
  box-shadow: 0 0 4px var(--borderColor);
}

button:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 5px var(--borderColor);
}

/* Tables */
table {
  text-align: left;
  margin: 8px;
  border-collapse: collapse;
}

table th {
  padding: 10px 5px;
  font-weight: bold;
  font-size: var(--fontM);
  position: sticky;
  position: -webkit-sticky;
  text-align: center;
  top: 0;
  z-index: 10;
  color: #fff;
  background-color: var(--sixthColor);
  border: 2px solid var(--sixthColor);
}

table th.no-bg {
  background-color: transparent;
}
table th a {
  text-decoration: none;
  color: #fff;
  padding-right: 2px;
}

table td {
  border: 1px solid var(--borderColor);
  padding: 7px 4px 7px 4px;
  font-size: var(--fontS);

}

/*table tr:nth-child(even) {
  background: #f7f3f9;
}*/
table tr:hover {
   background-color: #f0e8f3;
}

.clickable-row:hover {
   cursor: pointer;
   /* whatever other hover styles you want */
}

.clickable:hover {
   cursor: pointer;
   /* whatever other hover styles you want */
}

td.dose {
  font-size: var(--fontS);
  font-family: "Century Gothic";
  text-align: right;
}

table.listing {
  width: 98%;
}

/*
table.sticky-table th {
  position: sticky;
  position: -webkit-sticky;
  text-align: center;
  top: 0;
  z-index: 10;
  background-color: var(--sixthColor);
  color: #fff;
  border-right: 2px solid var(--sixthColor);
}
table.sticky-table td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid var(--borderColor);
    padding: 7px 4px 7px 4px;
    font-size: var(--fontS);
}

table.sticky-table {
  width: 98%;
}
*/

table.dosage {
  width: 98%;
}

table.small {
  width: 30%;
}

table.small td{
  font-size: 1.5rem;
}

table.master {
  width: 85%;
}

table.schedule {
  width: 100%;
  counter-reset: rowNumber;
}

table.schedule tr.main-row td:first-child::before {
  counter-increment: rowNumber;
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

table.schedule td{
  vertical-align: top;
  border-top:1px solid transparent;
  border-right:1px solid transparent;
  border-bottom:1px solid var(--borderColor);
}
table.schedule tr{
  vertical-align: top;
}
table.schedule  tr:hover {
   background-color: #fff;
}
table.dosage td{
  vertical-align: top;
}
table.dosage tr{
  vertical-align: top;
}
table.add-prescription {
  width: 100%;
  counter-reset: rowNumber;
}
table.add-prescription tr.main-row td:first-child::before {
  counter-increment: rowNumber;
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

table.add-prescription td{
  vertical-align: top;
  border-top:1px solid transparent;
  border-right:1px solid transparent;
  border-bottom:1px solid var(--borderColor);
}

table.add-prescription tr{
  vertical-align: top;
}

table.add-prescription  tr:hover {
   background-color: #fff;
}

table.view-schedule {
  width: 100%;
  counter-reset: rowNumber;
}

table.view-schedule tr.main-row td:first-child::before {
  counter-increment: rowNumber;
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
  margin: 2px;
}

table.view-schedule th{
  padding-bottom: 7px;
  margin: 2px;
}

table.view-schedule td{
  vertical-align: top;
  padding: 5px;
  margin: 2px;
}

table.view-schedule tr{
  vertical-align: top;
}

table.view-schedule tr:hover {
   background-color: #ffffff;
}

table.view-schedule tr:nth-child(even) {
  background: #ffffff;
}

/* Visit Table */
table.view-visit {
  width: 100%;
  counter-reset: rowNumber;
}

table.view-visit tr.main-row td:first-child::before {
  counter-increment: rowNumber;
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
  margin: 2px;
}

table.view-visit th{
  padding-bottom: 7px;
  margin: 2px;
}

table.view-visit td{
  vertical-align: top;
  padding: 5px;
  margin: 2px;
}

table.view-visit tr{
  vertical-align: top;
}

table.view-visit tr:hover {
   background-color: #ffffff;
}

table.view-visit tr:nth-child(even) {
  background: #ffffff;
}

/**/
fieldset {
  border-radius: 8px;
  width: 40%;
  padding: 20px;
  border: 1px solid var(--borderColor);
  margin-left: 10px;
  margin-right: 10px;
}

fieldset.search {
    border: 2px dotted var(--borderColor);
    padding:20px;
}
fieldset.medicine {
  width: 90%;
}

fieldset.search {
  width: 90%;
  padding: 20px;
}

fieldset.master {
  width: 95%;
}

fieldset.popup {
  width: 90%;
}

fieldset.forgot {
  border-radius: 8px;
  width: 40%;
  height: 100%;
  background-color: #FFFFFF;
}

/*TODO To check if the above fieldset would be sufficient*/
fieldset.small {
  border-radius: 8px;
  width: 60%;
  padding: 20px;
  border: 2px solid #E9EAEA;
  margin-left: 10px;
}

fieldset.white {
  border-radius: 8px;
  width: 97%;
  padding: 10px;
  border: 2px solid #E9EAEA;
  margin-left: 0px;
  background-color: #FFFFFF;
}

fieldset.read{
  width: 95%;
}

fieldset.view-schedule {
  border-radius: 8px;
  width: 70%;
  padding: 10px;
  border: 2px solid #E9EAEA;
  margin-left: 0px;
  background-color: #FFFFFF;
}

label {
  color: var(--secondColor);
  overflow-wrap: normal;
  font-size: var(--fontM);
  font-weight: bold;
}

label.key {
  font-weight: bold;
  font-size: var(--fontM);
}

label.key-big {
  font-size: var(--fontBody);
}

label.red {
  font-size: 21px;
  color: #fff;
  background-color: var(--red);
  border-radius: 5px;
  padding: 5px;
  font-weight: normal;
}

label.value {
  color: var(--sixthColor);
  white-space: pre-wrap;
  word-wrap: normal;
  font-size: var(--fontBody);
}
label.longvalue {
  color: #000;
  white-space: pre-wrap;
  word-wrap: normal;
  font-weight: normal;
  font-size: var(--fontM);
}
label.title {
  color: var(--baseColor);
  white-space: pre-wrap;
  word-wrap: normal;
  font-weight: normal;
  font-size: var(--fontXXL);
}
label.chemical {
  color: var(--baseColor);
  font-size: var(--fontM);
  font-weight: bold;
  overflow-wrap: normal;
}

label.white {
  color: #FFF;
  font-size: 25px;
  overflow-wrap: normal;
}


label.user {
  color: white;
  font-size: var(--fontXS);
}

label.lbl-dropdown {
  color: var(--secondColor);
  font-size: var(--fontS);
  text-align: center;
}

div.logout {
  float: right;
  text-align: right;
  margin-right: 5px;
}

a.logout{
  color: #fff;
  cursor: pointer;
  font-size: var(--fontBody);
}

div.logo-center {
    align:center;
    text-align: center;
    display:inline-block;
}

hr{
  border: none;
  height: 1px;
  background-color: var(--borderColorDark);
}

hr.printline{
  display: block;
  height: 1px;
  background: transparent;
  width: 100%;
  border: none;
  border-top: solid 1px black;
}

hr.printlinethick{
  display: block;
  background: transparent;
  width: 100%;
  border: none;
  border-top: solid 1px black;
}

hr.printlinethicknospace{
  display: block;
  background: transparent;
  width: 100%;
  border: none;
  border-top: solid 1px black;
  padding:1pt;
  margin:1pt;
}

.float-right {
  float: right;
}

@media screen {
  div.PrescFooter {
    display:none;
   }
}
@media print {
  div.PrescFooter {
    position: fixed;
    bottom: 0;
    display:block;
  }
}

/* Pagination Styles */
div#warning {
  white-space: pre-wrap;
  word-wrap: normal;
}

div.pagination{
  font-size: 25px;
  list-style-type: none;
  margin-left: 10em;
  margin-top: 2em;
  margin-bottom: 5em;
  color: blue;
}

ul.pagination{
  font-size:20px;
  list-style-type:none;
  margin-left:0px;
  color:blue;
}

li.pagination{
  display: inline;
  list-style: none;
  float: left;
  padding: 6px 10px 6px 10px;
  border: 1px solid #ddd;
  margin-right: -1px;
  background: #FFFFFF;
  box-shadow: inset 1px 1px 5px #F4F4F4;
}

a.page-number {
  font-size: 20px;
  font-family: inherit;
  text-decoration: none;
  padding: 2px;
}

a.forgot {
    font-size: var(--fontM);
    color:#fff;
}

a.current-page-number {
  color: #003366;
  text-decoration: underline;
  font-size: 20px;
  padding: 2px;
}

a.tab {
  font-size: var(--fontL);
  padding: 2px;
  text-decoration: none;
  color: var(--thirdColor);

}

a.tab.active{
  font-size: var(--fontL);
  color: var(--secondColor);
  font-family: inherit;
  text-decoration: none;
  padding: 2px;
  box-shadow: 0 5px 0 rgba(49, 99, 24, 1);
}

/* jQuery autocomplete styling */
/*.ui-autocomplete {
   max-height: 50px;

 }*/

 .ui-autocomplete {
     max-height: 200px;
     width: 600px;
  /*  overflow-y: auto;   /* prevent horizontal scrollbar */
     overflow-x: hidden; /* add padding to account for vertical scrollbar */
     /*z-index:1000 !important;*/
 }

 .small-ajax-input{
     max-height: 200px;
     width: 100px;
     overflow-x: hidden; /* add padding to account for vertical scrollbar */
 }

 .medium-ajax-input{
     max-height: 200px;
     width: 300px;
  /*  overflow-y: auto;   /* prevent horizontal scrollbar */
     overflow-x: hidden; /* add padding to account for vertical scrollbar */
     /*z-index:1000 !important;*/
 }

  .large-ajax-input{
      max-height: 200px;
      width: 600px;
   /*  overflow-y: auto;   /* prevent horizontal scrollbar */
      overflow-x: hidden; /* add padding to account for vertical scrollbar */
      /*z-index:1000 !important;*/
  }

  .badge-transparent {
   padding: 1px 7px 1px 5px;
   font-weight: bold;
   color: var(--pink);
   border: 3px solid var(--pink);
   background-color: #f3ebf1;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 10px;
 }


 /* Badges */
 .badge {
  padding: 1px 7px 1px 5px;
  font-weight: bold;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 5px;
}

.badge:hover {
  color: #ffffff;
  text-decoration: none;
}

.badge-link:hover {
  text-decoration: pointer;
}

.badge-error {
  background-color: #b94a48;
}

.badge-pink {
  background-color: var(--pink);
}
.badge-light-green {
  background-color: var(--light-green);
}

.badge-blue {
  background-color: var(--fourthColor);
}

.badge-red {
  background-color: var(--red);
}

.badge-green {
  background-color: var(--secondColor);
}
.badge-brown {
  background-color: var(--fifthColor);
}
.badge

.badge-error:hover {
  background-color: #953b39;
}

.badge-warning {
  /*background-color: #f89406;*/
  /*background-color: #e7961d;*/
  background-color: var(--orange);
}

.badge-info {
  background-color: var(--sixthColor);
}


/*.badge-warning:hover {
  background-color: #c67605;
}*/

.badge-success {
  background-color: #468847;
}

.badge-success:hover {
  background-color: #356635;
}

/*.badge-info {
  background-color: #3a87ad;
}

.badge-info:hover {
  background-color: #2d6987;
}*/
.badge-inverse {
  background-color: #333333;
}

.badge-inverse:hover {
  background-color: #1a1a1a;
}

.badge-title {
  background-color: #5e7bad;
}

/************************ New Styles **************************************/
#top-nav ul {
  list-style-type: none;
  margin-top: 5px;
  padding-top: 3px;
  padding-left: 5px;
}

#top-nav li {
  list-style-type: none;
  padding-left: 5px;
  float: left;
}

#top-nav li a.active{
  border-bottom: 3px solid var(--thirdColor);
}

#top-nav li a:hover{
   text-decoration: underline;
   color: #000000;
}

#top-nav a {
  text-decoration: none;
  color: var(--thirdColor);
  padding-right: 5px;
  padding-left: 5px;
  font-size: 18px;

}

div#top-nav{
  height: 2.2em;
  width: 100%;
  border: 1px solid #f0e8f3;
  /*background-color: #f2f3f3;*/
  background-color: #f9f5fa;
  margin-top: 0px;
  padding-top: 0px;
  margin-right: 20px;
}

.floating{
  position: fixed;
  padding: 8px 30px;

  background-color: var(--secondColor);
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
  border: 1px solid var(--secondColor);
  font-size: 18px;
  cursor: pointer;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

sup, sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.vline {
  border-left: 2px double grey;
  height: 100px;
  left: 50%;
  margin-left: -3px;
  top: 0;
  display: inline-block;
  padding-right: 30px;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
div.snackbar-success {
    visibility: hidden;
    min-width: 300px; /* Set a default minimum width */
    background-color: #4CAF50; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    top: 70px;
    right: 1px;
}

div.information{
  padding: 20px;
  margin: 8px;
  width: 95%;
  background-color: #fcfcfc; /* Black background color */
  border-radius: 8px;
  border: 1px solid #BABBBB;
  white-space: pre-wrap;
  word-wrap: normal;

}

div.abbsplit {
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #E9EAEA;
  padding: 20px;
  margin: 8px;
  width: 95%;
  white-space: pre-wrap;
  word-wrap: normal;
  font-size: var(--fontM);
}

td.ellipsis{
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selectize-input  {
  font-size: var(--fontBody);
  height: 4em;
  margin-top: 11px;
}

.selectize-input > input {
  font-size: var(--fontBody);
}

.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 6px 6px;
  background: var(--thirdColor); /*1BA0EC*/
  color: #fff;
  border: 0 solid var(--thirdColor);
  border-radius: 2px;
  font-size: var(--fontM);
}
.selectize-dropdown > div {
  font-size: var(--fontM);
}

.selectize-control.multi .selectize-input > div.active {
    background: var(--thirdColor);
    color: #fff;
    border: 0 solid #d0d0d0;
}
.selectize-control.plugin-remove_button [data-value] .remove {
  font-size: 25px;
}
/* Tool tip */

/* setup tooltips */
.tooltip {
  position: relative;
  display:inline;
  /*content:url("../images/tooltip-question-25.png");*/
}

.tooltip img {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 5px;
}

.tooltip:before,
.tooltip:after {
  display: inline;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.tooltip:after {
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,.75);
  border-left: 6px solid transparent;
  content: '';
  height: 0;
  top: 20px;
  left: 7px;
  width: 0;
}

.tooltip:before {
  background: var(--thirdColor);
  border-radius: 2px;
  color: #fff;
  width: 18em;
  content: attr(data-title);
  font-size: var(--fontS);
  padding: 6px 10px;
  top: 30px;
  white-space: wrap;
}

/* the animations */
/* fade */
.tooltip.fade:after,
.tooltip.fade:before {
  transform: translate3d(0,-10px,0);
  transition: all .15s ease-in-out;
}

.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.hide {
  display: none;
}

span.read-more-content {
  font-size: var(--fontM);
}

i.table-trash {
  color: var(--red);
}

i.profile {
  float:right;
  padding: 10px;
}

.dropbtn {
  background-color: var(--baseColor);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.7em;
}

.dropdown {
  position: relative;
  display: inline-block;
  text-align: right;
  float:right;
}

.dropdown-content{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 15em;
  right: 10px;
  left: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 11;
  text-align: left;
  border:1px solid var(--borderColor);
  border-radius: 5px;
}

.dropdown-content a {
  color: var(--baseColor);
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: var(--fontS);
}

.dropdown-content a:hover {background-color: #f0e8f3}

.dropdown:hover .dropdown-content {
  /*display: block;*/
}

.dropdown:hover .dropbtn {
  background-color: var(--secondColor);
  left:0px;
}
.show {display: block;}

i.chemflag {
  cursor: pointer;
  font-size: 1.5em;
  color: var(--red);
}

div.chemical-flag {
  display: inline;
}

div.drug-alert {
  display: inline;
}
div.generic{
  display: inline;
}
span.chem-warnings {
  font-size: 16px;
  color:var(--red);
  font-weight: bold;
  text-align: top;
  vertical-align:top;
}

.ui-dialog.di-dialog {
    font-family: var(--fontf);
    font-size: 2em;
}

.ui-dialog .ui-dialog-titlebar {
  border:1px;
  background-color: var(--fifthColor);
  color: #fff;
  font-family: var(--fontf);
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em .4em .5em 0;
  cursor: pointer;
  background-color: var(--secondColor);
  color: #fff;
  border-radius: 5px;
}

.ui-dialog .ui-dialog-buttonpane button.btnDelete {
  margin: .5em .4em .5em 0;
  cursor: pointer;
  background-color: var(--red);
  color: #fff;
  border-radius: 5px;
}

.ui-dialog .ui-dialog-buttonpane button.btnCancel {
  margin: .5em .4em .5em 0;
  cursor: pointer;
  background-color: var(--baseColor);
  color: #fff;
  border-radius: 5px;
}

.required:after {
  content:" *";
  color: var(--red);
  font-size: var(--fontBody);
  font-weight: bold;
}

label.logo-title {
  color: #fff;
  font-size: var(--fontXXL);
  font-family: var(--fontLogin);
  font-weight: 400;
  vertical-align: middle;
  margin-top: 2em;
}

div#top-bar {
  background-color: var(--baseColor);
  color: #fff;
  width: 100%;
  height: 3em;
  vertical-align: middle;
  text-align: center;
  margin:0px;
}

div.logo {
  display: inline;
  float: left;
  margin-top: 0.1em;
  margin-left: 0.5em;
}

div.accept {
  vertical-align:middle;
  font-weight: bold;
  color: var(--baseColor);
}

input[type="checkbox"].accept {
  width: 25px;
  height: 25px;
  vertical-align:bottom;
}


div.message{
  padding: 10px;
  margin: 8px;
  width: 90%;
  background-color: #fcfcfc; /* Black background color */
  border-radius: 8px;
  border: 1px solid #BABBBB;
  font-size: var(--fontBody);
}

legend {
  background-color: var(--sixthColor);
  color: #fff;
  padding: 3px 6px;
  border-radius: 5px;
}

div.video {
  position: relative;
  box-sizing: border-box;
  height: 0;
  margin:0;
  padding:0;
  padding-bottom: 56.25%; /* 16:9 */
}

div.video iframe {
  position: absolute;
  margin:0;
  padding:0;
  top: 0;
  left: 0;
  width: 80%;
  height:80%;
}

/* Start of Responsive Nav Changes */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* End of Responsive Nav Changes */


div.listing-info {
    color:var(--steelblue);
    font-size: var(--fontS);
    margin: .5em;
}