@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic,800,800italic,900,900italic);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700,800,900);

.clearme {clear:both;width:100%;}
.space5 {width:100%;height:5px;}
.space10 {width:100%;height:10px;}
.space15 {width:100%;height:15px;clear:both;}
.space20 {width:100%;height:20px;clear:both;}
.space25 {width:100%;height:25px;margin:0px 0 0 0;}
.space30 {width:100%;height:30px;margin:0px 0 0 0;}
.space35 {width:100%;height:35px;margin:0px 0 0 0;}
.space40 {width:100%;height:40px;margin:0px 0 0 0;}
.space45 {width:100%;height:45px;margin:0px 0 0 0;}
.space50 {width:100%;height:50px;margin:0px 0 0 0;}
.space55 {width:100%;height:55px;margin:0px 0 0 0;}
.space60 {width:100%;height:60px;margin:0px 0 0 0;}
.space75 {width:100%;height:75px;margin:0px 0 0 0;}
.space90 {width:100%;height:90px;margin:0px 0 0 0;}
.space120 {width:100%;height:120px;margin:0px 0 0 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif;}
h1 {font-size: 32px; font-weight:300; margin:10px 0 10px 0; letter-spacing: -1px; color:#FFF;}
h2 {font-size: 22px !important; font-weight:300; color:#4772B8; margin:5px 0 5px 0;  letter-spacing: -1px; }
h3 {font-size: 18px !important; font-weight:300; color:#4772B8; margin:5px 0 10px; letter-spacing:-1px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 14px;}

h3.login {
    font-size: 18px !important;
    font-weight: 300;
    color: lightgoldenrodyellow;
    margin: 5px 0 10px;
    letter-spacing: -1px;
}
/*==============================================
BOOSTRAP OVERRIDES 
==============================================*/
body{background:#FFF !important; line-height:12px !important;}


#wrapper {width:100% !important; min-width:350px !important;}
#page-wrapper {background:#004260 !important; min-height:1200px !important;}
#page-wrapper label {color:#FFF; text-transform:uppercase;margin:10px 0 0 0 !important; font-weight:400;}

.page-header {margin:10px 0 10px 0 !important;}
.navbar-default {position:relative;}
.navbar-default {background:#FFF !important; border:none !important}
.logo {width:350px; height:100px; position:absolute; margin:10px 0 0 10px;}
.logo img {width:95%;height:auto;}
.hdrWrapper {width:100%; height:120px; position:fixed; top:0; z-index:999; box-shadow:0px 2px 1px #b5b5b5 !important;}
.sideNavWrapper {position:relative; width:250px; height:auto; margin:80px 0 0 0; position:absolute; z-index:998; font-family:'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif}
.sideNavWrapper .nav > li  {border:none !important}
.sideNavWrapper li a {color:#A7A9AB !important; font-size:12px !important; }
.sideNavWrapper .nav > li > a.active {background:#FFF !important; }
.sideNavWrapper .nav > li > a:focus {background:#004260 !important; color:#FFF !important;}
.sideNavWrapper .nav > li > a:hover {background:#B93E96 !important; color:#FFF !important;}

@media (max-width: 768px)
{
    .sideNavWrapper {width:100%; position:relative;margin:120px 0 0 0;}
    .sideNavWrapper li a {color:#FFF !important; font-size:13px !important; padding:10px 10px 10px 30px;}
    .mobilenavborder {width:90%; height:1px;line-height:1px;font-size:0px; margin:0 auto; background:#4068a9;}
    .noshowmobile {display:none !important;}
    .logo {width:250px; height:50px; position:absolute; margin:10px 0 0 10px;}
    .navbar-top-links li a {padding:5px !important; background:transparent !important; margin:35px 0 0 0; min-height:20px;}
    .navbar-top-links li a:hover {background:transparent !important;}
    .navbar-right {float:left; bottom:0; margin:0 0px 0 10px;min-width:370px;}
    .mobile-nav-wrapper {background:#4772B8 !important;}
    .sideNavWrapper .nav > li > a.active {background:transparent !important; color:#FFF !important; }
    .sideNavWrapper .nav > li > a:focus {background:#FFF !important; color:#4772B8 !important;}
    .sideNavWrapper .nav > li > a:hover {background:transparent !important; color:#FFF !important;}
    .hdrWrapper {height:120px;}
}

/*Form Styles*/
.form-control {height:45px !important;}
.btn {height:45px;}

.panel-body {padding:15px 0 !important;}

.bumpht55 {min-height: 55px !important;}
.bumpht75 {min-height: 75px !important;}
.bumpht116 {min-height: 116px !important;}
.bumpht150 {min-height:150px !important;}
.floatR {float:right;}
/*==============================================
FOOTER CLASSES 
==============================================*/

.footerWrapper {width:100%; height:auto; position:relative; box-shadow:0 -2px 4px #b5b5b5;}
.footerInnerWrap {width:100%; height:419px; background: url(../Images/mcd-3.png) bottom center no-repeat #F7F8F8; background-size:cover; border-bottom:3px solid #EEEFF0}
.subfooter {width:100%; height:90px; background:#EEEFF0; border-bottom:20px solid #004260; position:relative; margin:0;}
.subfooterContent {width:90%; min-width:350px; min-height:20px; margin:0 auto; color:#808080; font-size:11px; padding:30px 0 0 30px;}

                                              
@media (max-width: 1600px) and (min-width: 1400px)
{
    .footerInnerWrap {width:100%; height:350px; }
}

@media (max-width: 1399px) and (min-width: 1200px)
{
    .footerInnerWrap {width:100%; height:300px; }
}

@media (max-width: 1199px) and (min-width:850px)
{
    .footerInnerWrap {width:100%; height:250px; }
}

@media (max-width: 849px) 
{
    .footerInnerWrap {width:100%; height:200px; }
}

/*==============================================
END FOOTER CLASSES 
==============================================*/

/*==============================================
6 COLUMN RESPONSIVE TABLE WITH CUSTOM SCROLL
==============================================*/
.tablewrap {font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif; background:#4772B8; border-radius:6px; padding:6px 0 0 0 !important; width:99%; margin:10px;}
.tableheader {background:#4772B8 !important; padding:20px 8px !important; color:#FFF; height:60px; border-radius:6px 6px 0 0; font-size:14px; font-weight:600; }
.tablebody {background:#FFF; font-size:12px; font-weight:400; border-radius:0 0 6px 6px;}

.row {line-height:20px; padding:10px 0 10px 10px; border:none !important;}
div.tablebody > div:nth-of-type(odd) {background: #efefef !important}

.datacol1 {width:15%; float:left; padding-left:20px;}
.datacol2 {width:20%; float:left;}
.datacol3 {width:20%; float:left;}
.datacol4 {width:20%; float:left;}
.datacol5 {width:10%; float:left;}
.datacol6 {width: 15%;float: left;}
.datacol1Big {width: 70%; float: left;padding-left: 40px; padding-right: 5px;}


@media (min-width:1025px) and (max-width: 1150px)
{ 
    .datacol4 {width:25%;} 
    .datacol5 {width:20%;} 
    .datacol6 {display:none;} 
    .tablewrap {width:96%}
}

@media (min-width: 850px) and (max-width: 1024px) 
{ 
    .datacol1, .datacol2, .datacol3, .datacol4 {width:25%;}
    .datacol5 {display:none;} 
    .datacol6 {display:none;} 
    .tablewrap {width:96%}
}
@media (min-width: 450px) and (max-width: 849px) 
{  
    .datacol1, .datacol2, .datacol3 {width:33%;}
    .datacol4 {display:none;} 
    .datacol5 {display:none;} 
    .datacol6 {display:none;} 
    .tablewrap {width:96%}
}

@media (max-width: 470px) 
{ 
    .datacol1, .datacol2 {width:50%;}
    .datacol3 {display:none;} 
    .datacol4 {display:none;} 
    .datacol5 {display:none;} 
    .datacol6 {display:none;} 
    .tablewrap {max-width:97%}
}

.TableScroll {
    min-height: 200px;
    max-height: 350px !important;
    overflow-y: scroll !important;
    overflow-x: hidden;
    /* Commented for System/versions page so content is displayed
    overflow-y:scroll !important;
overflow-x: hidden;*/
    scrollbar-base-color: #4772B8;
    scrollbar-face-color: #4772B8;
    scrollbar-3dlight-color: orange;
    scrollbar-highlight-color: red;
    scrollbar-track-color: #FFF;
    scrollbar-arrow-color: #4772B8;
    scrollbar-shadow-color: none;
    border: none;
    /*scrollbar-dark-shadow-color: red;*/
}

.TableScroll2 {
    min-height: 200px;
    max-height: 350px !important;
    overflow-y: scroll !important;

    scrollbar-base-color: #4772B8;
    scrollbar-face-color: #4772B8;
    scrollbar-3dlight-color: orange;
    scrollbar-highlight-color: red;
    scrollbar-track-color: #FFF;
    scrollbar-arrow-color: #4772B8;
    scrollbar-shadow-color: none;
    border: none;
    /*scrollbar-dark-shadow-color: red;*/
}


.TableScroll::-webkit-scrollbar {width: 16px; height: 3px;}
.TableScroll::-webkit-scrollbar-button {background-color: none; }
.TableScroll::-webkit-scrollbar-track {background-color: #4772B8;}
.TableScroll::-webkit-scrollbar-track-piece {background-color: #FFF; border-radius:3px;}
.TableScroll::-webkit-scrollbar-thumb {height: 50px; background-color: #4772B8; border-radius: 3px;}
.TableScroll::-webkit-scrollbar-corner {background-color: #4772B8;}
.TableScroll::-webkit-resizer {background-color: #4772B8;}
.TableScroll::-webkit-scrollbar-arrow-color{background-color:#4772B8}

/*==============================================
END 6 COLUMN RESPONSIVE TABLE
==============================================*/

.bodycopywrap 
{
font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif; 
color:#FFF; 
margin:20px 0 20px 0; 
font-size:13px; 
font-weight:300;
line-height:24px;
}

/*==================================================
FORM STYLE
==================================================*/

.form-headerwrap {font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif; width:100%;height:55px;background:#4772B8; padding:5px; border-radius:4px 4px 0 0;position:relative;}
.form-headerlabel {font-size:22px; font-weight:400;color:#FFF;text-transform:uppercase; padding:20px 0 0 0;}
.form-outerwrap {font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif; width:100%;height:auto;background:#FFF; padding:30px; border-radius:0 0 2px 2px;}
.form-innerwrap {width:95%; height:auto; margin:0 auto; background:transparent; border:1px solid #4772B8;border-radius:4px;}
.form-listwrapper {padding:20px;border:1px solid #d3d3d3; border-radius:4px; background:#f2f3f6;}
.form-subcatwrap {width:100%; height:auto; margin:0 auto; background:transparent; border:1px solid #4772B8;border-radius:4px; padding:10px 20px 20px 20px;}
.icon-callinfo {width:45px; height:45px; margin:0 10px 0 0; background:url('../Images/icon--callerinfo.png') no-repeat top center; float:left;}
.icon-contactinfo  {width:45px; height:45px; margin:0 10px 0 0; background:url('../Images/icon--contactinfo.png') no-repeat top center; float:left;}
.icon-contactnotes  {width:45px; height:45px; margin:0 10px 0 0; background:url('../Images/icon--notes.png') no-repeat top center; float:left;}
.icon-callcategory  {width:45px; height:45px; margin:0 10px 0 0; background:url('../Images/icon--category.png') no-repeat top center; float:left;}
.form-outerwrap label {font-size:11px; color:#4772B8 !important}
.form-phonewrap {width:45%; float:left; margin-right:5px;}
.form-extwrap {width:15%;float:left;margin-right:5px;}
.form-phonetypewrap {width:35%; float:left; }
.form-splitcolwrap {width:46%; float:left; }
.form-thirdwrap {width: 30%; float: left; position: relative; z-index: 98;}
.form-thirdwrapNoZ {width: 30%; float: left; position: relative; }
.form-z100 {z-index:100;}
.form-rtmargin {margin-right:5%;}
.form-rtmargin3 {margin-right:3%;}
.formdivider {width:90%; margin:0 auto; height:1px; line-height:1px;font-size:1px; background:#d3d3d3; margin-top:20px; margin-bottom:20px;}
.btn-default {color:#4772B8;}

.btn-default.active, 
.btn-default.focus, 
.btn-default:active, 
.btn-default:focus, 
.btn-default:hover, 
.open > .dropdown-toggle.btn-default
{
background:#B93E96; color:#FFF;
}

.lblcaller {font-size:11px !important; font-weight:800 !important; width:80px !important;}
.txtcaller {font-size:12px !important; font-weight:400 !important; width:150px !important;}
.redtype {color:#B93E96 !important; font-weight:700!important;}
.graybg {background:#f2f3f6;}
.modalPopupLabels {color: #4788d1 !important; font-weight: 700 !important;}
/*==========================================
4 Column Responsive Grid (Tab Nav)
==========================================*/

.sectionGrid4 {	clear: both;	padding: 0px;	margin: 0px;}

.colGrid4 {	display: block;	float:left;	margin: .5% 0 .5% 1.6%;}
.colGrid4:first-child { margin-left: 0; }

.groupGrid4:before,
.groupGrid4:after { content:""; display:table; }
.groupGrid4:after { clear:both;}
.groupGrid4 { zoom:1; /* For IE 6/7 */ }

.span_4_of_4Grid4 {	width: 100%;}
.span_1_of_4Grid4 img {	width: 95%; height:auto;}
.span_3_of_4Grid4 {	width: 74.6%;}
.span_2_of_4Grid4 {	width: 49.2%;}
.span_1_of_4Grid4 {	width: 23.8%; background:}


@media (max-width: 1175px) and (min-width: 850px) 
{
    .colGrid4 {  margin: 0% 1% 1% 0px ; }
    .span_1_of_4Grid4, .span_2_of_4Grid4, .span_3_of_4Grid4, .span_4_of_4Grid4 { width: 48%; }
}

@media (max-width: 849px) and (min-width: 768px) 
{
    .colGrid4 {  margin: 0% 0% 1% 0%; }
    .span_1_of_4Grid4, .span_2_of_4Grid4, .span_3_of_4Grid4, .span_4_of_4Grid4 { width: 100%; }
}

@media (max-width: 767px) and (min-width: 575px) 
{
    .colGrid4 {  margin: 0% 1% 1% 0px ; }
    .span_1_of_4Grid4, .span_2_of_4Grid4, .span_3_of_4Grid4, .span_4_of_4Grid4 { width: 48%; }
}

@media (max-width: 574px)
{
    .colGrid4 {  margin: 0% 0% 1% 0%; }
    .span_1_of_4Grid4, .span_2_of_4Grid4, .span_3_of_4Grid4, .span_4_of_4Grid4 { width: 100%; }
    .form-thirdwrap {width:100%;}
}


.panel-primary > .panel-heading
{
color:#FFF;
background:#4772B8 !important;
border-color:#4772B8;
}

.panel-primary:hover > .panel-heading {background:#B93E96 !important;}

.panel-heading
{
font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif;
height:115px;
padding:5px 5px 0px 5px;
border-bottom:0px solid transparent;
border-radius:3px;
position:relative;
}

.nav-footer 
{
font-size:11px;
font-weight:600;
color:#4772B8;
padding:5px 15px !important;
background-color:#4772B8;
border-top:0px solid #ddd;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
}

.icon-navcallinfo {width:111px;height:70px;background: url('../Images/icon--dialoguebubble.png') no-repeat top center; position:absolute;}
.icon-navresponse {width:111px;height:70px;background: url('../Images/icon--response.png') no-repeat top center; position:absolute;}
.icon-navproductinfo {width:111px;height:70px;background: url('../Images/icon--send.png') no-repeat top center; position:absolute;}
.icon-navcallsummary {width:111px;height:70px;background: url('../Images/icon--approve.png') no-repeat top center; position:absolute;}
.icon- {width:111px;height:70px;background: url('../Images/icon--approve.png') no-repeat top center; position:absolute;}


.nav-target
{
font-family: 'Merriweather Sans', Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight:300;
width:100%;
height:auto;
font-size:22px;
font-weight:200;
position:absolute;
bottom:10px;
text-align:center;
line-height:22px;
}

.rowwrapper {margin:0 0 0 10px;}
/*==========================================
END 4 Column Responsive Grid (Tab Nav)
==========================================*/

/*============================================
5 COLUMN RESPONSIVE GRID 
============================================*/

.sectionGrid5 {	clear: both;	padding: 0px;	margin: 0px;}

.colGrid5 {	display: block;	float:left;	margin: 1% 0 1% 2%;}
.colGrid5:first-child { margin-left: 0; }

.groupGrid5:before,
.groupGrid5:after { content:""; display:table; }
.groupGrid5:after { clear:both;}
.groupGrid5 { zoom:1; /* For IE 6/7 */ }

.span_5_of_5Grid5 {	width: 100%;}
.span_4_of_5Grid5 {	width: 79.6%;}
.span_3_of_5Grid5 {	width: 59.2%;}
.span_2_of_5Grid5 {	width: 38.8%;}
.span_1_of_5Grid5 {	width: 18.4%; text-align:left; background:; position:relative;}
.span_1_of_5Grid5 img { width: 100%; height: auto; box-shadow:-10px 10px 0px #d3d3d3; border:1px solid #d3d3d3;}


@media only screen and (max-width: 480px) 
{
.colGrid5 {  margin: 1% 0 1% 0%; }
.span_1_of_5Grid5, .span_2_of_5Grid5, .span_3_of_5Grid5, .span_4_of_5Grid5, .span_5_of_5Grid5 { width: 100%; }
.span_1_of_5Grid5 img { width: 80%; height: auto;}
}


/*================================
CHECKBOX AND RADIO BUTTON STYLES
================================*/

/* outer container */
.container 
{
display: block;
position: relative;
padding:10px 0 0 35px;
margin-bottom: 12px;
margin-right:20px;
cursor: pointer;
font-size: 14px !important;
font-weight:300;
letter-spacing:-.5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float:left;
}

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

/* Checkbox */
.checkmark 
{
position: absolute;
top: 5px;
left: 0;
height: 28px;
width: 28px;
background-color: #eee;
border:2px solid #808080;
border-radius:3px;
}

/* hover effect */
.container:hover input ~ .checkmark 
{
background-color: #B93E96;
}

/* Background when checked */
.container input:checked ~ .checkmark 
{
background-color: #4772B8;
}

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

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

/* Style the checkmark/indicator */
.container .checkmark:after 
{
left: 10px;
top: 0px;
width: 10px;
height: 25px;
border: solid #FFF;
border-width: 0 5px 5px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.check-qualifier
{
padding:15px 0 0 35px;
font-size:12px;
line-height:12px;
font-style:italic;
}



/*=========slightly smaller checkboxes========*/


/* outer container */
.containerSM
{
display: block;
position: relative;
padding:7px 0 0 25px;
margin-bottom: 12px;
margin-right:20px;
cursor: pointer;
font-size: 12px !important;
font-weight:300;
letter-spacing:-.5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float:left;
}

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

/* Checkbox */
.checkmarkSM 
{
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border:2px solid #808080;
border-radius:3px;
}

/* hover effect */
.containerSM:hover input ~ .checkmarkSM 
{
background-color: #B93E96;
}

/* Background when checked */
.containerSM input:checked ~ .checkmarkSM 
{
background-color: #4772B8;
}

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

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

/* Style the checkmark/indicator */
.containerSM .checkmarkSM:after 
{
left: 5px;
top: -3px;
width: 9px;
height: 18px;
border: solid #FFF;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}


/*=======RADIO BUTTONS=======*/

/* outer container */
.radioContainter 
{
display: block !important;
position: relative !important;
padding: 2px 0 0 30px !important;
margin-bottom: 12px !important;
cursor: pointer !important;
font-size: 12px !important;
color:#4772B8;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
float:left !important;
width:190px;
}

/* Hide the default radio button */
.radioContainter input {
    position: absolute;
    opacity: 0;
}

/* Radio button */
.radioButton 
{
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border:2px solid #808080;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioContainter:hover input ~ .radioButton {
    background-color: #B93E96;
}

/* When the radio button is checked, add a blue background */
.radioContainter input:checked ~ .radioButton {
    background-color: #4772B8;
}

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

/* Show the indicator (dot/circle) when checked */
.radioContainter input:checked ~ .radioButton:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioContainter .radioButton:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.radioContainerWider {
    width: 310px !important;
    padding: 2px 5px 0 30px !important;
}

.outbreakWrapper {background:#EEEFF0;color:#808080 !important; padding:7px 0 7px 10px; height:60px; margin:5px 0 0 0; border-radius:3px;}
.lbloutbreak {float:left; padding:12px 0 10px 0; margin:0 10px 0 0; font-size:13px; font-weight:800 !important;}
.adverseeffectsWrapper {
    background: #F9FBC8;
    color: #808080 !important;
    padding: 7px 0 7px 10px;
    margin: 5px 0 0 0;
    border-radius: 3px;
    display: block;
    overflow: auto;
}

.diagnosisWrapper {
    background: #F9FBC8;
    color: #808080 !important;
    padding: 7px 0 7px 10px;
    margin: 5px 0 0 0;
    border-radius: 3px;
    display: block;
    overflow: auto;
}

@media (max-width: 768px) {
    .outbreakWrapper {height:120px;}
}

/*================================
END CHECKBOX STYLES
================================*/

/*================================
TASK DROP DOWN MENUS
================================*/

.dropdown-menu {padding:0 0 !important;}
.hdr-workqueue {background:#4772B8; text-align:center; color:#FFF;padding:15px 0 15px 0 !important;}
.hdr-incompletecallitems {background:#ea7c13; text-align:center; color:#FFF;padding:15px 0 15px 0 !important;}
.hdr-callsummariestosend {background:#B93E96; text-align:center; color:#FFF;padding:15px 0 15px 0 !important;}
.hdr-callsnotreturned {background:#edc712; text-align:center; color:#FFF;padding:15px 0 15px 0 !important;}
.hdr-callstotriage {background:red; text-align:center; color:#FFF;padding:15px 0 15px 0 !important;}


@media (max-width: 768px) 
{
    .workqueuePOS {margin: 0 0 0 -5px !important;}
    .incompletecallPOS  {margin: 0 0 0 -65px !important;}
    .callsummariesPOS {margin: 0 0 0 -130px !important;}
    .callnotreturnedPOS {margin: 0 0 0 -195px !important;}
    .callstoTriagePOS {margin: 0 0 0 -255px !important;}
}

.workItems
{
padding: 2px 6px 2px 6px !important;
font-size:11px;
font-weight: bold !important;
color: #FFF !important;
background-color: #e70006 !important;
float: left !important;
border-radius: 14px !important;
margin: -10px 0 0 5px !important;
box-shadow: 0px 1px 2px #FFF !important;
}

.incompleteCallItems
{
padding: 2px 6px 2px 6px !important;
font-size:11px;
font-weight: bold !important;
color: #FFF !important;
background-color: #e70006 !important;
float: left !important;
border-radius: 14px !important;
margin: -10px 0 0 5px !important;
box-shadow: 0px 1px 2px #FFF !important;
}

.callSummaryItems
{
padding: 2px 6px 2px 6px !important;
font-size:11px;
font-weight: bold !important;
color: #FFF !important;
background-color: #e70006 !important;
float: left !important;
border-radius: 14px !important;
margin: -10px 0 0 5px !important;
box-shadow: 0px 1px 2px #FFF !important;
}

.callsNotReturnedItems
{
padding: 2px 6px 2px 6px !important;
font-size:11px;
font-weight: bold !important;
color: #FFF !important;
background-color: #e70006 !important;
float: left !important;
border-radius: 14px !important;
margin: -10px 0 0 5px !important;
box-shadow: 0px 1px 2px #FFF !important;
}

.callsTriageItems
{
padding: 2px 6px 2px 6px !important;
font-size:11px;
font-weight: bold !important;
color: #FFF !important;
background-color: #e70006 !important;
float: left !important;
border-radius: 14px !important;
margin: -10px 0 0 5px !important;
box-shadow: 0px 1px 2px #FFF !important;
}



/*================================
END TASK DROP DOWN MENUS
================================*/


.icon-plus {width:20px; height:20px; position:absolute; top:20px; right:10px; background:url(../Images/icon--plus.png) center right; float:right;}
.pointer {cursor:pointer;}

#callerInfo, #contactAttempts, #consultationdetails, #linkedCallsInfo, #fileuploads, #healthdeptnotification {
    width:;
    height: auto;
    padding: 20px;
    display: none;
}

#callinfocaller
{
width: ;
height: auto;
padding:20px;
display:;
}

#callinfoSummary
{
width: ;
height: auto;
padding:20px;
display:;
}

.lbl-case-status
{
font-size:14px;
font-weight:600;
}

.status-hr
{
width:95%;
height:1px;
background:#FFF;
margin:0 auto;
margin-top:5px;
margin-bottom:5px;
}

.case-status
{
width:350px;
min-height:50px;
line-height:16px;
background:#4772B8;
border-radius:3px;
box-shadow:0px 1px 1px #777;
position:absolute;
left:50%;
bottom:5px;
padding:10px;
color:#FFF;
font-size:12px;
}

@media (max-width: 768px) 
{
    .case-status { display:none; }
}

.closeme
{
width:120px;
height:60px;
position:absolute;
font-size:14px;
font-weight:400;
top:0;
right:5px;
text-align:right;
padding:0;
cursor:pointer;
z-index:999;
color:#FFF;
float:right;
line-height:22px;
}

.indicates-required
{
font-size:12px;
font-weight:500;
color:#4772B8;
width:auto;
margin:10px 0;
}

.is-required
{
position:absolute;
font-size:12px;
font-weight:500;
color:#4772B8;
margin:7px 0 0 -7px;
}


/*==============================
CALL CATEGORY "RADIO BUTTONS"
==============================*/

.CallCatRadio {overflow: hidden;background-color: #FFF;width:98%;margin:0 auto;}

.CallCatRadio button 
{
background: url(../Images/icon--Radio.png) no-repeat left top;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 0px 10px 25px;;
transition: 0.3s;
font-size: 14px;
color:#4772B8;
text-align:left;
}

.CallCatRadio button:hover {background: url(../Images/icon--RadioHover.png) no-repeat left top;}
.CallCatRadio button.active {background: url(../Images/icon--RadioActive.png) no-repeat left top;}
.tabcontent {display: none;padding: 6px 12px;border: 0px solid #ccc;border-top: none;}


/* ser override bootstrap modal*/
.modal-dialog,
.modal-content {
    /* 80% of window height */
    /*height: 85%;*/
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    /*max-height: calc(100% - 50px);
    overflow-y: scroll; */
    max-height: 100%;
}


.icon-navbar-wrapper {
    width: 120px;
    height: 80px;
    background: transparent;
    border: none;
    margin: 0 auto;
    margin-top: 2%; /*25%;*/
    cursor: pointer;
    right: 0;
    top: 35px;
}

.icon-navbar {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 1px;
    background: #5b6999;
    margin: 5px 0;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

@media screen and (max-width:1120px) {
    body {
        background-color: orangered;
    }

    .hdrOuterWrap {
        height: 110px;
        min-width: 365px;
    }

    .hdrInnerWrap {
        width: 100%;
        height: 110px;
        float: left;
        position: relative;
    }

    .hdrNotifications {
        display:;
    }

    .mobileNav {
        width: 120px;
        height: 80px;
        position: absolute;
        background: none;
        z-index: 210;
        right: 0;
        top: 35px;
    }

    .mobileNavClose {
        width: 120px;
        height: 80px;
        position: absolute;
        background: none;
        z-index: 100;
        right: 0;
        top: 35px;
        display: none;
        color: #FFF;
        font-size: 42px;
        text-align: center;
    }

    .iconClose {
        width: 50px;
        height: 52px;
        background: url(../images/icon-close.png) no-repeat top center;
        margin: 0 auto;
        margin-top: -5px;
    }

    .mobileNavContainer {
        display: none;
        background: #5b6999;
        padding: 30px 0;
        margin: 135px 0 0 0;
        position: absolute;
        width: 100%;
        z-index: 99;
        box-shadow: 0px 1px 3px #777;
    }

    .mobileNavInnerContainer {
        font-family: gentona, Work Sans, sans-serif;
        width: 90%;
        margin: 0 auto;
        position: relative;
    }

        .mobileNavInnerContainer ul {
            margin: 0 0 0 -40px;
            list-style: none;
        }

        .mobileNavInnerContainer li {
            font-size: 20px;
            padding: 0;
            border-bottom: 1px solid #FFF;
        }

            .mobileNavInnerContainer li a {
                color: #FFF;
                padding: 12px 0 12px 0;
                display: block;
                font-weight: 300 !important;
                text-decoration: none;
            }

                .mobileNavInnerContainer li a:hover {
                    background: #4c5880
                }
}


/* 20240412 - Get rid of top margin when non-moble */
.mobileNavClose {
    width: 120px;
    height: 80px;
    position: absolute;
    background: none;
    z-index: 100;
    right: 0;
    top: 35px;
    display: none;
    color: #FFF;
    font-size: 42px;
    text-align: center;
}

/* 20240807 Added for course flyer attachments on courses*/
.article-to-attach {
    line-height: 18px;
    background: #4E85C6;
    border-radius: 22px;
    box-shadow: 1px 2px 2px #777;
    bottom: 4px;
    right: 5px;
    padding: 5px 5px 5px 5px;
    margin-top: 8px;
    margin-right: 20px;
    color: #FFF;
    font-size: 14px;
}

.sntcpadding {
    padding: 5px 12px 5px 5px;
}

.sntcfloatright {
    float: right;
    padding: 5px 5px 5px 5px;
}

}