/*
Theme Name: Ingleassurance Website
Description: Insurance portal
Author: Piotr R. Sidorowicz
Author URI: https://www.mavericsolutions.ca/
Tags: Ingleassurance, Mavericsolutions
*/


/* Corporate colour, font, settings */

:root {
    --site_background_color: #FFFFFF;
    --site_text_color: #2A3A8E;
    --site_font_family: "Rubik", sans-serif;

    --topbanner_font_family: "Georgia", serif;

    --content_background_color: #F7F7F7;
    
    --site_banner_background_color: #2A3A8E;
    --site_banner_text_color: #FFFFFF;

    --site_button_background_color: #D23316; /* alt red */
    --site_button_text_color: #FFDF99;       /* alt yellow */
    
    --menu_background_color: #2A3A8E;
    --menu_highlight_background_color: #485190;
    
    
    --table_width: 100%;
    --table_body_height: 300px;
    
    --theader_background_color_dark: #565E90; 
    --theader_text_color_dark: #FFFFFF; 
    --theader_background_color: #D6D6D6;
    --theader_text_color: #2A3A8E;
    --tbody_row_background_color: #F0EFEF;
    --tbody_alternate_row_background_color: #E6E7E8;
    --tbody_text_color: #2A3A8E;


}
/* IE11 compatibility */
html {
    --site_background_color: #FFFFFF;
    --site_text_color: #2A3A8E;
    --site_font_family: "Rubik", sans-serif;

    --topbanner_font_family: "Georgia", serif;

    --content_background_color: #F7F7F7;
    
    --site_banner_background_color: #2A3A8E;
    --site_banner_text_color: #FFFFFF;

    --site_button_background_color: #D23316; /* alt red */
    --site_button_text_color: #FFDF99;       /* alt yellow */
    
    --menu_background_color: #2A3A8E;
    --menu_highlight_background_color: #485190;
    
    
    --table_width: 100%;
    --table_body_height: 300px;
    
    --theader_background_color_dark: #565E90; 
    --theader_text_color_dark: #FFFFFF; 
    --theader_background_color: #D6D6D6;
    --theader_text_color: #2A3A8E;
    --tbody_row_background_color: #F0EFEF;
    --tbody_alternate_row_background_color: #E6E7E8;
    --tbody_text_color: #2A3A8E;


}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}


/****** General Styles *********/

body
{
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-family: var(--site_font_family);
    background-color: #F7F7F7;
    background-color: var(--content_background_color); 
    background-position: top; 
    background-repeat:repeat-x;
    background-attachment:fixed;
    transition: background-color .5s;

}


a:link {
    color: var(--site_banner_background_color);
    font-weight: bold;
}

a:visited  {
    color: var(--site_banner_background_color);
    font-weight: bold;
}

a:hover {
    color: var(--site_banner_background_color);
    font-weight: bold;
}


/* DEFAULT TABLE */
table {
	border-collapse: collapse;
	width: 100%;
	width: var(--table_width);
	color: #2A3A8E;
	color: var(--tbody_text_color);
}

th, td {
	padding: 4px;
	border: 0px solid white; 
}

th {
	text-align: left;
	color: #2A3A8E;
	color: var(--theader_text_color);
	background-color: #D6D6D6;
	background-color: var(--theader_background_color);
}
/* DEFAULT TABLE END */



.rTable    {
    display: table;
    width: 100%;
    width: var(--table_width);
    border: 1px solid gray;
}
.rTableRow       {
    display: table-row;
    background-color: #F0EFEF;
    background-color: var(--tbody_row_background_color);
}
.rTableHeading    {
    display: table-header-group;
}
.rTableBody    {
    display: table-row-group;
}
.rTableFoot    {
    display: table-footer-group;
}
.rTableCell, .rTableHead  {
    display: table-cell;
    padding: 3px 10px;
}
		
/****** Header Style *********/

.header
{
    top: 0px;
    width: 100%; /* Full width */
    height: 80px;
    position: fixed;
    overflow: hidden;
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
    padding: 0px 5px  0px 5px;
    z-index: 1;
    text-align:center;
}

/* All properties pertaining to title go here */

div.topbanner {
    padding: 5px 10px  5px 0px;
    display: inline-block;
    color: #2A3A8E;
    color: var(--site_banner_background_color);
    font-family: "Georgia", serif;
    font-family:var(--topbanner_font_family);
}


table.topbanner {
    width:98%;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom:10px;
}

td.topbanner {
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
    color:            #2A3A8E;
    color:            var(--site_text_color);
    font-family: inherit;
    font-size               : 12px;
    padding:1px;
    line-height:17px;
}

th.topbanner {
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
    color:            #2A3A8E;
    color:            var(--site_text_color);
    font-family: inherit;
    font-size               : 12px;
    padding:1px;
    line-height:17px;
}



/* =========================================== */

/****** Navigation Style *********/
 
.navbar
{
    position: fixed; /* Set the navbar to fixed position */
    top: 80px; /* Position the navbar at the top of the page */
    width: 100%;
    height: 36px;
    padding: 6px 6px 0px 10px;
    background-color: #2A3A8E;
    background-color: var(--menu_background_color);
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    z-index: 2;
}

/* 
All properties pertaining to navbar go here
*/

.navbar div {
    height: 25px;
    padding: 2px 15px 4px 0px;
 }

.navbar a {
    float: left;
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    text-align: left;
    background-color: #2A3A8E;
    background: var(--menu_background_color);
    padding: 4px 10px 4px 10px;
    font-size:14px;
    font-weight: normal; 
    text-decoration: none;
}
.navbar a:hover{
    background-color: #485190;
    background-color: var(--menu_highlight_background_color);
}
.navbar ul {
    float: left;
    height:25em;
    list-style-type: none;
    margin: 0;
}


.navbar li {
    float: left;
}


.navbar-right {
    float: right;
    padding: 0px 0px 0px 0px;
}

.navbar-left {
    float: left;
    padding: 0px 0px 0px 0px;
}

/* 
Navtop handles the application title 
*/
.navtop {
    display: inline-block;
    margin: 0px 0px 0px 35px;
}
.navtop div{
    margin: 0px 20px 0px 0px;
    padding: 0px 20px 0px 0px;
    font-type: inherit;
    font-size: 20px;
    font-weight: bold;
}
.navtop img{
	vertical-align: middle; 
}

/* 
end Navtop 
*/



.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown div {
    height: 25px;
    padding: 2px 0px 4px 0px;
 }

.dropdown .dropbtn {
    font-size: 14px;    
    border: none;
    outline: none;
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    padding: 4px 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}



.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2A3A8E;
    background-color: var(--menu_background_color);
    color: #FFDF99;
    color: var(--site_button_text_color);
    font-weight: normal;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.dropdown-content a  {
    float: none;
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    padding: 8px 20px 8px 10px;
    display: block;
}

.dropdown-content a:hover {
    background-color: #485190;
    background-color: var(--menu_highlight_background_color);
    font-weight: bold;
}

.dropbtn {
    background-color: #2A3A8E;
    background-color: var(--menu_background_color);
    padding: 4px 14px;
}

.dropbtn:hover {
    background-color: #485190;
    background-color: var(--menu_highlight_background_color);
    padding: 4px 14px;
}
.dropdown:hover .dropdown-content  {
    background-color: #485190;
    background-color: var(--menu_highlight_background_color);
    font-weight: bold;
    display: block;
}



/*
===========================================
*/

#navleft
{
    position:relative;
    background: #2A3890;
    padding-top: +3%;
    padding-bottom: +7%;
    padding-left: 10px;
    color: #FFDF99;
    width: 150px;
    float: left;
    font-family: "Lato", sans-serif;
    font-size               : 14px;
    text-align: left;
    border-top: ridge medium black;
    border-left: ridge medium black;
    border-right: ridge medium black;
    border-bottom: ridge medium black;
    border-radius: 15px;
    -moz-border-radius: 15px;
}


/* 
All properties pertaining to navleft go here
*/

.sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 147px;
    left: 0px;
    background-color:  #2A3A8E;
    background-color:  var(--menu_background_color);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    border-top: 1px solid black;
}

.sidenav ul {
    float: left;
    height:25em;
    list-style-type: none;
    margin: 0;
}
.sidenav li {
    float: left;
    padding: 8px 2px 8px 0px;
}

.sidenav a {
    padding: 2px 2px 2px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #FFDF99;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 5px;}
    .sidenav a {font-size: 12px;}
}


/*
===========================================

Define a bottombar

==========================================
*/
.bottombar {
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
    overflow: auto;
    position: fixed;
    top: 117px;
    width: 100%; 
    z-index: 0;
    border-left: 1px solid  #2A3A8E;
    border-left: 1px solid  var(--site_banner_background_color);
    border-bottom: 1px solid  #2A3A8E;
    border-bottom: 1px solid  var(--site_banner_background_color);
    white-space: nowrap;
    z-index: 1;
}

.bottombar span {
    display: inline-block;
    padding: 14px 4px 14px 4px;
    font-size: 21px;
}

/* Style the links inside the navigation bar */
.bottombar a {
    background-color: #D23316;
    background-color: var(--site_button_background_color);
    color: #FFDF99;
    color: var(--site_button_text_color);

    float: left;
    display: inline-block; 
    max-width: 280px;
    border-style:outset;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;

    text-align: center;
    margin: 12px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;

    font-type: inherit;
    font-size: 16px;
    font-weight: bold;

}

/* Change the color of links on hover */
.bottombar a:hover {
}

/* Add a color to the active/current link */
.bottombar a.active {
}

/*
===========================================
*/

 
#static {
    position: fixed;
    transition: margin-left .5s;
    padding: 16px;
}

#scrolling {
    position: relative;
    top: 100px; /* Position the navbar at the top of the page */
    transition: margin-left .5s;
    padding: 16px;
    overflow:auto;
}



.content
{
    margin-top: 180px; /* Position the content at the top of the page */
    padding: 5px;
    font-size               : 14px;
    text-align: left;
}
div.content {
    min-height: 400px;
}

ul.content {
    list-style-type: none;
    margin: 5px;
    padding: 10px;
    overflow: auto;
}

li.content {
    display: list-item;
    margin: 8px;
    padding: 8px;
    float: left;
    clear: left;
    font-family: "Lato", sans-serif;
}

a.content:link {
    color: #2A3A8E;
    color: var(--site_banner_background_color);
    background-color: inherit;
    text-decoration: underline;
    font-weight: normal;
}

a.content:visited {
    color: #2A3A8E;
    color:  var(--site_banner_background_color);
    background-color: inherit;
    text-decoration: underline
    font-weight: normal;
}

a.content:hover {
    color: #2A3A8E;
    color:  var(--site_banner_background_color);
    background-color: inherit ;
    font-weight: bold;
    text-decoration: underline
}

li.contentbold {
    display: list-item;
    margin: 4px;
    padding: 4px;
    float: left;
    clear: left;
    font-weight: bold;
    font-family: "Rubik", sans-serif;
    background: #FFFFFF;
    background: var(--site_background_color);
}

a.contentbold:link {
    color: #D23316;
    color: var(--site_banner_background_color);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    text-decoration: none
}

a.contentbold:visited {
    color: #D23316;
    color: var(--site_banner_background_color);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    text-decoration: none
}

a.contentbold:hover {
    color: #D23316;
    color: var(--site_banner_background_color);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    text-decoration: underline
}


a.navleft:visited  {
    color: #FFDF99;
    color: var(--site_banner_text_color);
    font-family: "Rubik", sans-serif;
    text-decoration: none
}

a.navleft:hover  {
    color: #FFDF99;
    color: var(--site_banner_text_color);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    text-decoration: none
}

a.navleft:active  {
    color: #FFDF99;
    color: var(--site_banner_text_color);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    text-decoration: none
}


ul.plain { list-style-type: square }
ul.bullet {
     list-style-type: square;
     margin: 5;
     padding: 5;
     background-color: #FFFFFF;
     list-style-type: square;
     overflow: visible;
 }
 
 li.bullet { 
     color: #000000;
     background-color: #FFFFFF;
     margin: 5px; 
     display: block;
 }
 
 
 #fineprint
 {
     color: #666666;
     text-align: justify;
     text-size: 9pt;
 }
 
 .topbanner {
     position: relative;
     display: inline-block;
 }
 
 
 table.topnav { 
     width: 98%;
 }
 tr.topnav {
 }
 td.topnav:last-child {
     text-align:right;
 }
*/
.plain tr {
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
}

.plain td {
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
}

table.listing {
    border: gray solid thin;
}

.listing tr:nth-child(even) {
    background-color: #E6E7E8;
    background-color: var(--tbody_alternate_row_background_color);
}
.listing tr:nth-child(odd) {
    background-color: #F0EFEF;
    background-color: var(--tbody_row_background_color);
}

tbody.msh {
    display:block;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

th.listing2 {
    background-color: #D8D8D8;
    color:black;
    font-family: "Lato", sans-serif;
    font-size               : 16px;
    padding:5px;
    line-height:17px;
}

tr.listing2 {
    background-color: yellow;
    border-bottom: gray solid thin;
    border-top: gray solid thin;
    border-left: none;
    border-right: none;
}

td.listing2 {
    background-color:yellow;
    color:black;
    font-family: "Lato", sans-serif;
    font-size               : 14px;
    padding:5px;
    line-height:17px;
}

table.page {
    width:95%;
    background-color: transparent;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}

table.statusmsg {
    width: var(--table_width);
    background-color:yellow;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}

tr.page {
}


td.page {
    background-color: transparent; 
    color: #2A3A8E;
    color: var(--site_text_color);
    font-family: "Lato", sans-serif;
    font-size               : 14px;
    padding:1px;
    line-height:17px;
    border-radius: 15px;
    -moz-border-radius: 15px;
}

.application  {
    background-color: #E6E7E8;
    background-color: var(--tbody_alternate_row_background_color);
    padding: 4px;
    margin: 0px 0px 0px 0px;
}

h2.application {
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    background-color: #2A3A8E;
    background-color: var(--site_banner_background_color);
}
h3.application {
    color: #FFFFFF;
    color: var(--site_banner_text_color);
    background-color: #2A3A8E;
    background-color: var(--site_banner_background_color);
    padding: 8px;
}
h4.application {
    color: #2A3A8E;
    color: var(--site_text_color);
    background-color: #FFFFFF;
    background-color: var(--site_background_color);
}
table.application {
    border: #2A3A8E solid 2px;
    border: var(--site_banner_background_color) solid 2px;
}

th.application {
    background-color: var(--site_background_color);
}

h3.application_inv {
    color: #2A3A8E;
    color: var(--site_banner_background_color);
    background-color: #FFFFFF;
    background-color: var(--site_banner_text_color);
    padding: 8px;
}


th.medicalquestionnaire {
    color: #FFFFFF;
    color: var(--theader_text_color_dark);
    background-color: #565E90;
    background-color: var(--theader_background_color_dark);
}
th.medicalquestionnairectr {
    color: #FFFFFF;
    color: var(--theader_text_color_dark);
    background-color: #565E90;
    background-color: var(--theader_background_color_dark);
}
td.medicalquestionnaire {

}

a.medicalquestionnaire {
    color: #FFFFFF;
    color: var(--theader_text_color_dark);
}

.medicalquestionnaire tr:nth-child(even) {
    background-color: #E6E7E8;
    background-color: var(--tbody_alternate_row_background_color);
}

.medicalquetionnaire tr:nth-child(odd) {
    background-color: #F0EFEF;
    background-color: var(--tbody_row_background_color);
}



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


span.dropt {
    position: relative;
    overflow: hidden;
}
span.dropt:hover {
    text-decoration: underline;  
}

span.dropt span {
    display: none;
    overflow: hidden;
}
span.dropt:hover span {
    display: block;
    position: absolute;
    background: #FFFFFF;
    background: var(--site_banner_text_color);
    z-index: 6;
    left: 30px;
    top: 20px;
    width: 600px;
    padding: 15px; 
    border-style:solid;
    border-color:black;
    border-width:1px;
    color: black;
} 


input {
    color: black;
    background: white;
    font-size:14px;
    font-weight: bold;
}

input[disabled], input[disabled]:hover {
		     background: gray;
		     color: black;
		     font-size:14px;
		     font-weight: bold;
		 }

.button {
    color: #FFDF99;
    color: var(--site_button_text_color);
    background: #D23316; 
    background:  var(--site_button_background_color); 
    border-style:outset;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    padding: 1px 10px 1px 10px;
    font-size:14px;
    font-weight: bold;
}

.buttonflat {
    color: #FFDF99;
    color: var(--site_button_text_color);
    background: #D23316; 
    background: var(--site_button_background_color); 

    border-style:outset;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size:14px;
    font-weight: bold;
}

a.buttonflat {
    color: #FFDF99;
    color: var(--site_button_text_color);
    background: #D23316; 
    background: var(--site_button_background_color); 
    border-style:outset;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size:14px;
    font-weight: bold;
}



menubuttonflat {
    color: #FFDF99;
    color: var(--site_banner_text_color);
    background: #D23316; 
    background: var(--site_banner_background_color);
    font-size:14px;
    font-weight: bold;
}

a.menubuttonflat {
    color: #FFDF99;
    color: var(--site_banner_text_color);
    background: #D23316; 
    background: var(--site_banner_background_color);
    font-size:14px;
    font-weight: bold;
}


.container {
	max-height: 20em;
	overflow-y: scroll;
	outline: 1px solid dimgrey;
	outline-offset: -1px;
}

tr.HL {
    background-color: yellow;
}
td.HL {
    background-color: yellow;
}

#MSHistory {
    display: block;  
}


.pricingoptions {
    padding: 4px 4px 4px 4px;
    margin: 20px;
}
th.pricingoptions {
    border: 1px solid gray;
}
td.pricingoptions {
/*    border-top: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black; */
}
td.pricingoptions2 {
    border-bottom: 1px solid black;
}

.exclusions {
    background-color:yellow;
    border: 1px solid black;
}

ol.inline li {
    float: left;
margin: 0 10px;
padding: 0 10px;

a[href^="tel"]{
color:inherit;
text-decoration:none;
}



/****** Footer Style *********/


.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: black;
    text-align: left;
    padding-top: 5px;
    border-top: 1px solid ;
}