@import "common.css";

:root {
    --error-color: #CC0000;
    --hover-bgcolor: #acbbed;
    --active-bgcolor: #191970;
    --gray-bgcolor: #dddddd;
    --menu-link-color: #222266;
    --link-color: #003366;
    --green-bgcolor: oklch(0.962 0.044 156.743);
    --green-border: oklch(0.627 0.194 149.214);
}
/* Begin General Styles */
BODY {
  font: normal .9em  Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
@media (max-width: 684px) {
  body {
    font-size: 1.53rem;
  }
}
@media (max-width: 382px) {
  body {
    font-size: 1.35rem;
  }
}
.body-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.body-content {
  padding-top: 1rem;
  flex: 1;
}

FORM {
    margin: 0;
}



/* End General Styles */

#whitewall {
    padding-top: 10px;
    background-color: #FFFFFF;
    background-image: url("../images/bg.png");
    background-repeat: repeat-x;
    background-position: top center;
    border-bottom: 5px solid #FFFFFF;
}

/* Begin Top Bar */
#dev-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10000;
    /*
    background-color: orange; 
    color: white;
    text-align:center;
    padding:20px;
    */
}

#logobox {
    float: left;
    width: 325px;
    margin-left: 15px;
}

/* top right pane 1 */
DIV.top_right1 {
    float: right;
    margin-right: 25px;
}
#group_division_bar {
}
SELECT.current_group {
    width: 270px;
}
#top_group_text {
    width: 270px;
    display: none;
}
A.change_group_selector {
    padding: 0px 5px 0px 5px;
    border: 1px solid #000;
    background: #EEEEEE;
    text-decoration: none;
    color: black;
}

SELECT.current_division_code {
    width: 150px;
}
#change_division_placeholder {
    width: 150px;
}
A.selected_issue {
    color: #036;
    text-decoration: none;
    display: inline-block;
    vertical-align: baseline;
}
/*/////////////////////////////////////////////*/
A.issue_tracker {
    display: inline-block;
    vertical-align: top;
    height: 32px;
    width: 32px;
}

/* top right pane 2 */
.top_right2 {
        margin-right: 15px;
        display: grid;
        /*grid-template-columns: max-content clamp(5em, 10%, 300px) max-content;*/
        grid-template-columns: max-content max-content max-content;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        justify-content: end;
        column-gap: 1em;
    }
    .top_right2 .group-selector {
        grid-area: 1 / 1 / 2 / 2;
        color: var(--menu-link-color);
        margin-left: auto;
    }
    .top_right2 .group-selector input[type=text],
    .top_right2 label.division_selector,
    .top_right2 label.group_selector,
    .top_right2 .division-selector input[type=text] {
        width: clamp(15ch, 40ch, 25vw);
        display: inline-block;
        overflow: hidden;
    }
    .top_right2 .division-selector {
      grid-area: 1 / 2 / 2 / 3;

    }
    #profile_link {
        grid-area: 1 / 3 / 2 / 4;
        position: relative;
        &:focus-within ul {
          display: flex;
        }
        ul {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          background: #fff;
          border: 1px solid #ccc;
          padding: 0;
          flex-direction: column;
          gap: 0;
          z-index: 100;
          list-style: none;
          li {
            text-wrap: nowrap;
            gap: 0.5rem;
            &:hover {
              background: #eee;
            }
            a {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.5rem 1rem;
            }
          }
        }
    }
    #logout_link {
        text-decoration: none;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: .25rem;
    }
    .top_right2 .iconbar {
        grid-area: 2 / 1 / 3 / 2;
        display: flex;
    }
    .top_right2 .iconbar-2 {
        justify-self: end;
        grid-area: 2 / 3 / 3 / 4;
        display: flex;
        align-items: center;
        gap: .25rem;
    }
    .top_right2 A {
        text-decoration: none;
        font: 13px Arial, Helvetica, sans-serif;
        padding: 0 5px;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        gap: .25rem;
    }
    .top_right2 A:HOVER {
        background: #EEEEFF;
        border: 1px solid #CCCCEE;
    }

    DIV.current_issue {
        grid-area: 2 / 2 / 3 / 3;
        border: 1px solid #CCC;
        padding: 0px 10px 0px 10px;
        background: #EEEEFF;
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        justify-items: space-between;
    }
    DIV.current_issue a.unselect {
        margin-left: auto;
      }
    DIV.current_issue a.unselect IMG,
    DIV.current_issue a.link IMG {
        height: 24px;
      }

    .customer_care_contact {
        grid-area: 2 / 2 / 3 / 3;
        border: 1px solid #CCC;
        justify-self: start;
        padding: 0px 10px 2px 25px;
        background: url("../images/phone_icon.png") #EEEEFF;
        background-repeat: no-repeat;
        font: 15px/27px Arial, Helvetica, sans-serif;
        font-weight: bold;
    }


DIV.loggedin {
    padding: 0 5px 0 5px;
    color: #222266;
    margin-top: 5px;
    font: 13px/27px Arial, Helvetica, sans-serif;
    text-align: right;
}

#top_right_menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
#top_right_menu LI {
}
#top_right_menu IMG {
    padding-right: 5px;
}
/* End Top Bar */

/* Begin Top menu bar */
@media (min-width: 640px) {
  DIV.header {
    display: flex;
    justify-content: space-between;
  }
}
DIV.loggedin-header {
  display: flex;
  margin-right: 2rem;
  flex-direction: column;
  justify-content: space-between;
}
#menubar {
    background: url("../images/menubg.png") #254a8a;
    background-repeat: repeat-x;
    height: 30px;
    padding: 0px;
    margin-top: 6px;
    overflow: auto;
}
#menubar .c {
    color: #FFFFFF;
    font: normal 11pt Arial, Helvetica, sans-serif;
}

UL.topmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
UL.topmenu li {
    text-align: center;
    height: 30px;
    margin: 0px 15px;
}
UL.topmenu IMG {
    margin-right: 5px;
}
UL.topmenu A:HOVER {
    background-color: #aaaaaa;
    background: var(--hover-bgcolor);
}
UL.topmenu A {
    margin-top: 8px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
}

.container {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 2rem 1rem 2rem;
}

.content {
  max-width: 40rem;
}

/* End Top Menu Bar */

/* Begin Ribbon */

#ribbon_container {
  display: none;
}
#ribbon {
    border: none;
}

#ribbon LI.attention {
    color: red;
    background-image: url("../images/attention_tab.png");
    background-repeat: no-repeat;
    background-position: 5px center;
    padding-left: 14px;
}

#ribbon UL.ui-tabs-nav {
  background: rgb(0,56,144);
  background: -moz-linear-gradient(180deg, rgba(0,56,144,1) 0%, rgba(12,68,152,1) 35%, rgba(60,110,186,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,56,144,1) 0%, rgba(12,68,152,1) 35%, rgba(60,110,186,1) 100%);
  background: linear-gradient(180deg, rgba(0,56,144,1) 0%, rgba(12,68,152,1) 35%, rgba(60,110,186,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#003890",endColorstr="#3c6eba",GradientType=1);
}
#ribbon .ui-state-default {
    background-color: #2c6dcf;
    background-image: none;
    border-color: #2c6dcf;
}
#ribbon .ui-state-default A {
    color: #EEEEEE;
}
#ribbon .ui-state-active A {
    color: #000000;
}
#ribbon .ui-tabs-selected {
    background-color: #eee;
    background-image: none;
}
#ribbon .ui-tabs-panel {
    background-color: #eee;
    border-bottom: 1px solid #AAA;
    padding: 0;
}
A.ribbon_icon_48 {
    display: block;
    height: 60px;
    width: 64px;
    font: 12px sans-serif;
    color: var(--link-color);
    text-decoration: none;
    text-align: center;
    float: left;
}

FORM.ribbon {
    float: left;
    margin: 0;
    padding: 0;
}
A.ribbon_icon_48:HOVER {
    background: #fffce3;
}
DIV.ribbon_page {
    height: 81px;
}
DIV.ribbon_panel {
    float: left;
    padding: 0px;
}
DIV.ribbon_content {
    height: 60px;
    line-height: 22px;
    padding: 5px 5px 0 5px;
    border-right: 1px dashed #AAA;
}
DIV.ribbon_label {
    border: 1px solid #CCCCCC;
    border-bottom: none;
    height: 15px;
    background: #DDDDDD;
    font: 13px sans-serif;
    color: #777777;
    text-align: center;
}
A.ribbon_label {
    font: 13px sans-serif;
    color: #777777;
    text-decoration: none;
}
DIV.patient_global_search {
    text-align: right;
    padding-right: 55px;
    color: #666;
    font-size: .9em;
}
/* End Ribbon */
/* Begin Footer */
#footer {
    color: ##696969;
    font: 700 15px 'Open Sans', sans-serif;
    height: 10rem;
    padding-top: 10px;
    text-align: center;
    border-top: thin solid #e4e4e4;
    background-color: #f8f8f8;
    /*
    background-image: url("../images/bluebg.png");
    */
}

}
#footer DIV {
    margin-top: 10px;
}
#footer A {
    color: #CCCCCC;
}
#footer A:HOVER {
    color: #FFFFFF;
}
/* End Footer */

/* Begin Bread crumbs */
UL.breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 5px 10px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #AAAAAA;
    display: flex;
    align-items: center;
    gap: 10px;
}
UL.breadcrumbs li {
  display: flex;
}
LI.cbreadcrumb {
    font: bold .9em Arial, Helvetica, sans-serif;
}
A.breadcrumbs {
  margin: 5px 0;
    color: blue;
    text-decoration: none;
}
A.breadcrumbs:HOVER {
    text-decoration: underline;
}

/* End bread crumbs */

/* Begin Content Layout */

#content_container {
  display: flex;
}
#content {
    margin-right: 20px;
    padding: 10px;
}

.helpbox {
    border: 1px solid #DDDDDD;
    padding: 1em;
    background: #FFFFAE;
    color: #222222;
}
.helpbox-right {
    border: 1px solid #DDDDDD;
    padding: 1em;
    background: #FFFFAE;
    color: #222222;
    font-size: .8em;
    float: right;
    max-width: 40%;
    margin-bottom: 1em;
    clear: both;
}

/* For if you dont want the left menu. Derive from theme and use this. */
#menuless_content {
  margin: 0px 2em 2em 2em;
}

/* Begin Side Menu */
#sidemenu {
    width: 159px;
}

#sidemenu UL.out {
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    margin-top: 0px;
    padding-top: 0px;
}

#sidemenu UL {
    list-style: None;
    padding-bottom: 15px;
    padding: 0 0 15px 10px;
}
#sidemenu LI {
  margin-top: 2px;
  margin-bottom: 2px;
}
#sidemenu A {
    display: block;
    border: 1px solid #FFF;
    text-decoration: none;
    font: 14px/22px sans-serif;
    color: blue;
}
#sidemenu A.t {
    border-bottom: 1px solid #AAAAAA;
    font: bold 13px/22px sans-serif;
    color: #000;
}
#sidemenu DIV.t {
    font-weight: bold;
    border-bottom: 1px solid #AAAAAA;
    font: bold 13px/22px sans-serif;
}
#sidemenu A.router-link-active {
    border-bottom: 1px solid #AAAAAA;
    font: bold 13px/22px sans-serif;
    color: #000;
}
DIV.topnav {
  margin-bottom: 1em;
}

.topnav A.router-link-active BUTTON {
  color: #2952a3;
  border-color: #2952a3;
}
#sidemenu A:HOVER {
    background: #EEEEFF;
    border: 1px solid #CCCCEE;
}
/* End Side Menu */
DIV.side_menu_header {
    color: #000000;
    font: normal 1.2em sans-serif;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    border-top: 1px solid #456AA5;
}
DIV.side_menu_active {
    background-color: var(--active-bgcolor);
    background: url("/images/menubgi.png");
    color: #FFFFFF;
    border-left: 1px solid #456AA5;
}
DIV.side_menu_inactive {
    background-color: #f2f384;
    background-color: #eeeeee;
    border-left: 1px solid #456AA5;
}
DIV.side_menu_inactive:HOVER {
    background-color: #FFD700;
}
.side_menu {
    background: #FFFFFF;
    margin: 0px;
    border-left: 1px solid #456AA5;
}
DIV.side_menu_header:HOVER {
    cursor: pointer;
}
TD.side_menu_label {
    color: #000000;
    font: normal 10pt sans-serif;
}

DIV.right_pane_menu {
    background-color: #FFFFFF;
    border: 1px solid #456AA5;
    border-left: none;
}
DIV.right_pane_menu_header {
    color: #FFFFFF;
    background: #454545;

    font: normal 1.2em sans-serif;
    padding: 10px 10px 5px 10px;
    text-decoration: none;
    border-left: 1px solid #456AA5;
    border-bottom: 1px solid #456AA5;

}
SPAN.expired,
DIV.expired {
    font: normal 1.1em sans-serif;
    background-color: red;
    color: white;
    padding: 2px 10px 2px 10px;
    border-left: 1px solid #456AA5;
}

DIV.right_pane_menu UL {
    list-style: none;
    padding-left: 0px;
}

DIV.right_pane_menu LI {
    padding: 3px 0px 3px 20px;
}
DIV.right_pane_menu LI:HOVER {
    background-color: #FFD700;
    cursor: pointer;
}
DIV.right_pane_menu A {
    text-decoration: none;
    color: #000000;
}

DIV.maintabs {
    margin-top: 40px;
}
/* End Content Layout */

/* Begin Home Menu */
DIV.hmenuitem {
    float: left;
    width: 200px;
    height: 80px;
    margin: 0px 30px 20px 30px;
}
DIV.hmenuicon {
    float: left;
    width:  32px;
}
DIV.hmenuinfo {
    float: left;
    width: 158px;
    margin-left: 10px;
}
A.tmenu {
    text-decoration: none;
    font-weight: bold;
    color: #222266;
}
A.tmenu:HOVER {
    color: #00F;
    text-decoration: underline;
}
DIV.hmenu DIV.desc {
    padding-top: 5px;
    font: normal .9em Helvetica, Arial, sans-serif;
}
/* End Home Menu */


/* Begin Content elements */

P {
}

H1 {
    margin-top: 0;
    font-size: 2em;
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    border-bottom: 1px solid #AAA;
    margin-bottom: .3em;
}
A.inline {
    font-size: 10pt;
}
H2 {
    margin-top: 1em;
    font: normal 1.6em Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #444444;
    color: #444444;
}
H3 {
    margin-top: 1em;
    font-size: 1.45em;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    color: #003366;
}


/* End Content elements */

/* End New Theme */



#header {
	width: 950px;
	height: 90px;
}


#headerIMG {
	width: 950px;
	height: 221px;
}

#bottomContainer {
	width: 651px;
	float: left;
}
#sidebar {
	width: 327px;
	height: 123px;
	float: left;
}
#sidebar01 {
	width: 327px;
	height: 42px;
}
#sidebar02 {
	width: 327px;
	height: 41px;
}
#sidebar03 {
	width: 327px;
	height: 40px;
}
#centerBox {
	width: 324px;
	height: 123px;
	float: right;
	background: url(../images/testimonialsBG.jpg) no-repeat;
}
#centerHeader {
	height: 27px;
	width: 324px;
	background:url(../images/testimonials_header.jpg) no-repeat;
}
#centerContent {
	height: 71px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #fff;
	margin:5px;
}
#centerBtm {
	height: 16px;
	margin: 0 0 0 5px;
	font: 12px Arial, Helvetica, sans-serif;
	color: #fff;
}
#contentTopBarHolder {
	width: 100%;
	height: 32px;
}
.contentHeaders {
	font: 18px Arial, Helvetica, sans-serif;
	color: #00b3d8;
	font-weight: bold;
	border-bottom: 1px solid #bbb;
}
#rightBox2 {
    background: url(../images/secondary_sidebarBG.jpg)
                fixed center bottom repeat-x #515151;
}
#notefooter {
    color:#666;
    font:normal 1.0em sans-serif;
    margin-bottom:10px;
    width: 400px;
    max-width: 100%;
    text-align: center;
}

#missionStatement {
	margin: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 15px;
	width: 631px;
	height: 114px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #333;
	background:url(../images/missionStatement_bg.jpg) no-repeat;
}
.missionHeader {
	font: 18px Arial, Helvetica, sans-serif;
	color: #333;
	font-weight: bold;
}
#missionStatement p {
	margin: 0;
	padding: 4px;
}
tr.eventsRow:hover {
	background: #797979;
	color: #333;
}
tr.eventsRow.highlighted {
	background: #797979;
	color: #333;
}
.blue {
	background-color: #cdedf8;
	font: 14px Arial, Helvetica, sans-serif;
	color: #333;
}
.white {
	background: none;
	font: 14px Arial, Helvetica, sans-serif;
	color: #333333;
}
A.side-menu-header {
    color: #FFFFFF;
    font: bold 1.2em Arial, Helvetica, sans-serif;
}
.required {
    color: #FF0000;
}
TABLE.pager {
    border-collapse:collapse;
    border: 1px solid #000;
    margin-top: 20px;
}
THEAD.pager {
    background: #444444;
    color:#FFFFFF;
}
DIV#newsbar {
    font:bold 1.0em Arial, sans-serif;
    padding: 10px 10px;
    text-align: center;
}
.news-aqua {
    background: #66CCCC;
}
.news-green {
  background: #66CD00;
}
.news-orange {
    background: #FF6600;
    color:#FFFFFF;
}
.news-purple {
    background: #4B0082;
    color:#FFFFFF;
}
.news-yellow {
  background: #FFB00F;
}
DIV#newsbar A {
  color: #FFFFFF;
}
DIV.error {
    background: var(--error-color);
    color: #FFFFFF;
    font:bold 1.0em Arial, sans-serif;
    padding: 5px 10px;
}
DIV.error:empty {
    display: none;
}
SPAN.error {
    background:#CC0000;
    color:#FFFFFF;
    font:bold 1.0em Arial, sans-serif;
    padding: 5px 10px;
}
.warning {
  background: #f8d7da;
  border: 1px dashed #83323a;
  padding: .5em 1em;
  margin: .5em;
  color: #83323a;
}
BUTTON.warning {
  border-style: solid;
  cursor: pointer;
}
BUTTON.warning:HOVER {
  background: #dd3c49;
  color: #FFF;

}

DIV.msg {
    background: #060;
    color: #FFF;
    font: bold 1.0em Arial, sans-serif;
    padding: 5px 10px;
}

SPAN.i-error {
    border: 1px solid #600;
    color:#b2445a;
    background-color: #f2dede;
    font: normal 1.0em Arial, sans-serif;
    padding: 5px 10px;
    margin: 0 auto;
    min-width: 300px;
}
SPAN.i-msg {
    border: 1px solid #060;
    border-bottom: none;
    background-color: #dff0d8;
    font: normal 1.0em Arial, sans-serif;
    color: #3c763d;
    padding: 5px 10px;
    min-width: 300px;
}

DIV.notifications {
}
DIV.cont {
    padding: 4px 3em 1em 3em;
}
.sspace {
    border-top: 1px solid #CCC;
    padding-top: 10px;
    text-align: center;
}
.row-0 {
    background: #DDD;
}
.row-1 {
    background: #EEE;
}
.print-show {
    text-align: center;
    background: #EFEFEF;
    color: #EFEFFE;
}
/* Form Elements */

label.text-to-input { cursor: pointer; }
label.text-to-input input[type=text]:not(:focus) { position: absolute; top: -100vh; }
label.text-to-input div {
    border: 1px solid transparent;
    padding: .125em .25em;
}
label.text-to-input div:hover {
    background: #EEEEFF;
    border: 1px solid #CCCCEE;
}
label.text-to-input input:focus ~ div { display: none; }
DIV.block1 {
    margin-bottom: 2em;
}
TABLE.info {
    border: 1px solid #aaaaaa;
    background-color: #FFFFFF;
}
TABLE.info TD.numeric {
    text-align: right;
}
TD.subheader {
    text-align: left;
    font-size: 1.1em;
    font-family: sans-serif;
    font-weight: bold;
    background: #dfdfdf;

}
TABLE.info TD {
    border: 1px solid #aaaaaa;
}
TD.caption {
    text-align: right;
    padding-right: 10px;
    font-family: sans-serif;
    background: #EFEFEF;
}
TD.caption2 {
    text-align: right;
    padding-right: 10px;
    font-family: sans-serif;
    border: 1px solid #dfdfdf;
}
TD.value2 {
    border: 1px solid #dfdfdf;
}
TD.field {
    text-align: right;
    padding-right: 10px;
    font-family: sans-serif;
}
TD.ffield {
    text-align: right;
    padding-right: 10px;
    background: #EDEDED;
    font-family: sans-serif;
}
TD.fvalue {
    padding-left: 15px;
}
.required {
    color: #F00;
}
TD.bcell {
    border: 1px solid #888;
    background:#FFF;
}
TABLE.bcell {
    margin-top: 10px;
    margin-bottom: 10px;
    background:#FFF;
    border-collapse:collapse;
    border: 1px solid #888;
}
THEAD.bcell {
    background:#888;
    color:#FFF;
}

/* Tabular Data Display */
TABLE.grid {
    border: 1px solid #888888;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: #FAFAFA;
}
TABLE.grid TH {
    background-color: #FFFFFF;
    border: 1px solid #888888;
}
.grid TR:HOVER {
    background-color: #EEEEFF;
    border: 1px solid #CCCCEE;
}
TABLE.customer_service_border {
    border: 2px solid #FFCCFF;

}
TABLE.customer_service TH {
    background-color: #FFCCFF;
}
TABLE.customer_service TD {
    background-color: #FFCCFF;
}
.grid TD {
    border: 1px solid #888888;
    padding: 2px 5px;
}
SPAN.sep {
    padding-left: 10px;
    padding-right: 10px;
    font: bold 12px sans-serif;
}
TABLE.grid TD.numeric {
    text-align: right;
}
.grid TD.left {
    text-align: left; 
}
.grid TD.right {
    text-align: right; 
}

/*/////////////////////////////////////////////////////////////////////////////
 * JQUERY AUTOCOMPLETE 
 */
.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}
.hidden {
    display: none;
}

H1.news {
  color: #003366; 
  font-family: Verdana;
  font-weight: bold;
  border-bottom: 3px dotted #AAA;
  margin-top: 2em;
}
/* Begin Feature Styles */
.customer_service {
    background-color: #FFCCFF;
}
TD.customer_service {
    background-color: #FFCCFF;
}
.accounting {
    background-color: #CCFFCC;
}
.customer_service TEXTAREA {
    background-color: #FFCCFF;
}
.grid TD.customer_service {
    background-color: #FFCCFF;
    color: #000;
}

A.p-menu-link {
}
A.p-menu-link IMG {
    vertical-align: middle;
}
.internal {
    background-color: #CFF0FF;
}
TR.internal TD {
    background-color: #CFF0FF;
}
TD.internal {
    background-color: #CFF0FF;
}
.internal TEXTAREA {
    background-color: #CFF0FF;
}
.grid TD.internal {
    background-color: #CFF0FF;
    color: #000;
}

.partner {
  background-color: #E5C1F5;
  color: #000;
}

.form-control {


}


/* End Feature Styles */

/* jquery ui overrides */

.ui-widget {
    font-size: 1.0em;
}
.ui-tabs-nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}
DIV.panel {
  padding: 10px;
  margin-bottom: 20px;
}
DIV.pagination {
   margin: 2em 0;

}
DIV.pagination A {
  display: inline-block;
  width: 25px;
  border: 1px solid #CCCCCC;
  text-align: center;
  text-decoration: none;
}
DIV.pagination SPAN {
  display: inline-block;
  width: 25px;
  border: 1px solid #CCCCCC;
  text-align: center;
}

/* vue transitions */

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}



/* pure css spinner */

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.modal-container-trans {
  width: 80%;
  margin: 0px auto;
  text-align: center;
  color: #FFF;
  font-family: sans-serif;
  font-size: 1.6em;

}

.modal-container {
  width: 80%;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
  overflow-y: scroll;
  height: 90%;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #FFF;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}





.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mb-4 { margin-bottom: .5rem; }
.mb-8 { margin-bottom: 1rem; }

/* 2024 refresh */
header.top {
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
  padding: 0 15px 1rem 15px;
}

header.top .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -15px;
}

ul.top {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
header.top a.top-menu {
  color: rgb(51, 51, 51);
  text-decoration: none;
  font: 600 1rem "Open Sans", sans-serif;
}
header.top a.top-menu:HOVER {
  color: #096bd8;
}

header.top a.top-menu-btn {
  font: 600 1rem "Open Sans", sans-serif;
  text-decoration: none;
  color: white;
  background-color: rgb(0, 40, 104);
  border-radius: 5px;
  padding: 7px 16px;
}
header.top a.top-menu-btn:HOVER {
  background-color: #425b76;
}

img.logo {
  margin: .8rem 0;
}

.menu-btn {
  font: 600 1rem "Open Sans", sans-serif;
  text-decoration: none;
  color: white;
  background-color: rgb(0, 40, 104);
  border-radius: 5px;
  padding: 7px 16px;
}
.menu-btn:HOVER {
  background-color: #425b76;
  cursor: pointer;
}

/* new site */

div.top-site-bar {
  flex-grow: 1;
}

div.top-site-menu {
}

ul.top-site-menu {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
  gap: .5rem;
}

@media (min-width: 640px) {
  .top-site-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    margin: -5px auto -5px auto;
  }

  div.top-site-menu {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    gap: 2rem;
    padding: 0rem;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
  }

  ul.top-site-menu {
    display: flex;
    flex-direction: row;
  }

  header.top a.top-menu {
    padding: 5px 16px;
  }
}

h1.ns {
  background: #ccd4e1;
  padding: 1rem 0;
  font: 600 1.7rem 'Open Sans', sans-serif;
}

.cms {
  margin: 0 auto;
  max-width: 72rem;
}

/* CMS Page Content */
.cms H1 {
    font: bold 1.75rem Arial, Helvetica, sans-serif;
    margin-bottom: .5rem;
}
.cms H2 {
    font: bold 1.5rem Arial, Helvetica, sans-serif;
    margin-bottom: .5rem;
}
.cms H3 {
    font: bold 1.25rem Arial, Helvetica, sans-serif;
    margin-bottom: .5rem;
}
.cms P {
    margin-bottom: 1rem;
    font: 100% Arial, Helvetica, sans-serif;
}
.cms OL {
    margin-left: 2rem;
    margin-bottom: .5rem;
}
.cms UL {
    margin-left: 2rem;
    margin-bottom: .5rem;
}
.cms LI {
    font: normal 100% Arial, Helvetica, sans-serif;
}


.login-username {
  max-width: 100%;
  padding: .25rem;
  border-radius: .25rem;
}

@media (min-width: 640px) {
  .login-username {
    width:200px;
  }

}

/* components */
.component-auth-drug-list form.nav {
    background: #eee;
    display: flex;
    gap: 4rem;
    padding: .5rem;
    margin-bottom: 1rem;
}

/* auth drug list component */
#component-auth-drug-list {
  max-width: min(1280px, 90%);
  min-width: max(720px, 100%);
}
/*
#component-auth-drug-list BUTTON {
  background-color: #f0f0f0;
  border: 1px solid #aaa;;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 4px; 
}
*/
#component-auth-drug-list BUTTON:HOVER {
  background-color: var(--hover-bgcolor);
}
#component-auth-drug-list table {
  width: 100%;
}
#component-auth-drug-list .nav {
  display: flex;
  margin: .5rem 0;
  padding: 0 0 .125rem 0;
}
#component-auth-drug-list .nav .spacer {
  border-bottom: 6px solid #888;
  margin-left: auto;
  flex-grow: 1;
}
#component-auth-drug-list select {
  background-color: #f0f0f0;
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
}

#component-auth-drug-list .nav label.radiogroup {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  /*
  background-color: #f0f0f0;
  */
  transition: background-color 0.3s;
  border-bottom: 6px solid transparent;
  border-color: #888;
}
#component-auth-drug-list .nav label.radiogroup:HOVER {
  background-color: var(--hover-bgcolor);
}
#component-auth-drug-list .nav label.radiogroup:has(input:checked) {
  border-color: var(--active-bgcolor);
  color: var(--active-bgcolor);
  background-color: #d0d0d0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

#component-auth-drug-list .nav input[type=radio] {
  display: none;
}

#component-auth-drug-form {
  display: grid;
  grid-template-columns: 10rem min-content 1fr;
  justify-items: start;
  align-items: baseline;
  justify-content: start;
  gap: .5rem;
}
#component-auth-drug-form .caption {
  grid-column: 1;
}
#component-auth-drug-form .form-error {
  grid-column: 3;
  color: var(--error-color);
  font-weight: bold;
}
#component-auth-drug-form .submit-button {
  grid-column: 2;
}

#component-auth-drug-search-box {
  width: 20rem;
}
#component-auth-drug-search {
  display: grid;
  justify-content: start;
  align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .5rem;
}

/* end auth drug list component */

.component-group-formulary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}