/* Div styles */

div {
    /*  text-align:center; */
}

div#page {
    /*  background:#FFE4B5;  /* background color */
    /*  border:1px solid tan; */
    width:99%;
    margin:0 auto;  /* 0 for top and bottom margin, while auto for left and right margin */
    padding:5px;
    text-align:left;
}

div#header {
    /*  border:2px solid red;*/
    /*background: #eaeaea;*/
    width:100%;
    /*background:#FFFFFF;  /* background color */
    padding:0;
    text-align:left;
    height:156px;
    /*
      border-bottom-width:1px;
      border-bottom-style:inset;
      border-bottom-color:#415A9C;
    */
}

div#footer {
    /*  border:2px solid red; */
    margin:0 0 0 0;
    padding:0px;
    width:100%;
    clear:both; /* means the footer will fall align below the content-div, and not sidebar or main-content */
}

div#bluerow {
    /*  background-color:#b0c4de; */
    background-color:#eaeaea;
    width:100%;
    min-height:2px;
    *height:2px;
    _height:2px

    /*  	min-height:20px;  */ /* in case the content block doesn't have enough... content. */
    /*    *height:20px; */ /* hack for Internet Explorer6 & 7. */
    /*  	_height:20px */ /* hack for Internet Explorer6. IE doesn't handle min-height properly. */
}

div#narrow-bluerow {
    background-color:#b0c4de;
    width:100%;
    min-height:3px;  /* in case the content block doesn't have enough... content. */
    *height:3px;  /* hack for Internet Explorer6 & 7. */
    _height:3px;  /* hack for Internet Explorer6. IE doesn't handle min-height properly. */
}


div#main-sidebar {
    /*    border:1px solid orange; */
    /* for a picture that is 178 px width and 130 px height */
    float:left;
    margin:10px 1px 10px 2px; /* top, right, bottom, left */
    width:21%;
}

div#main-nonsidebar {
    float:right;
    /*    border:1px solid green; */
    margin:8px 2px 10px 1px; /* top, right, bottom, left */
    width:77%;
    text-align:left;
}


div#main-content {
    background:#FFFFFF;  /* background color */
    width:98%;
    margin:10px 0 10px 5px; /* top, right, bottom, left */
    padding:0;
    color:#08115C;
    text-align:left;
    min-height:100px;  /* in case the content block doesn't have enough... content. */
    /*    *height:100px;  /* hack for Internet Explorer6 & 7. */
    _height:100px;  /* hack for Internet Explorer6. IE doesn't handle min-height properly. */

}

div#content {
    /*    border:1px solid red; */
    width:98%;         /* assuming div#page is 800px wide - 12px for margin.  */
    margin:10px 0 10px 4px; /* top, right, bottom, left */
    min-height:550px;  /* in case the content block doesn't have enough... content. */
    *height:550px;  /* hack for Internet Explorer. IE doesn't handle min-height properly.  so you
  	_height:550px;  /* hack for Internet Explorer. IE doesn't handle min-height properly.  so you can add a hack value in with an underscore like "_<propertyname>" that IE will treat as property name, but all other browsers will ignore.  Fortunately IE will expand past the height of 500 px if needed. */
}

div#header-yellowpagesbox {
    /*background:#eaeaea;*/
    margin:0px 2px 0px 2px; /* top, right, bottom, left */
    float:left;
    /*width:100%;*/
}


div#header-leftbox {
    margin:0px 2px 0px 2px; /* top, right, bottom, left */
    float:left;
    width:60%;
}


div#header-rightbox {
    float:right;
    margin:0px 2px 0px 2px; /* top, right, bottom, left */
    width:35%;
}



p#header-right {
    text-align:right;
    margin:5px 0 0 20px /* top, right, bottom, left */
}


div#main-leftbox {
    border:1px solid #80CDCD;
    margin:2px 2px 2px 2px; /* top, right, bottom, left */
    float:left;
    height:133px;
    width:32%;
}


div#main-centerbox {
    border:1px solid #69CDCD;
    float:left;
    margin:2px 2px 2px 2px; /* top, right, bottom, left */
    height:133px;
    width:32%;
}

div#main-rightbox {
    border:1px solid #69CDCD;
    margin:2px 2px 2px 2px; /* top, right, bottom, left */
    float:left;
    height:133px;
    width:32%;
}




div#footer-centre {
    border:1px solid black;
    background-color: white;
    width:98%;
    float:left;
    margin:10px 0 0 2px; /* top, right, bottom, left */
}

div#footer-centre-noborder {
    background-color: white;
    width:98%;
    float:left;
    margin:10px 0 0 2px; /* top, right, bottom, left */
}

div#footer-left {
    /*  border:1px solid purple; */
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;

    text-align:left;
    float:left;
    width:150px;
    margin:10px 0 0 2px; /* top, right, bottom, left */
}

.wide_300_box {
    width:300px;
}

p#footer-left {
    /*   border:1px solid green; */
    color:#4159AC;
    margin:0 0 0 20px; /* top, right, bottom, left */
}

div#yellowpages-footer {
    /*  border:2px solid red; */
    background-color:#eaeaea;
    margin:0 0 0 0;
    padding:0px;
    float:left;
    height:250px;
    width:100%;
    clear:both; /* means the footer will fall align below the content-div, and not sidebar or main-content */
}


div#yellowpages-footer-dark {
    /*  border:2px solid red; */
    background-color:#505e6a;
    margin:0 0 0 0;
    padding:0px;
    float:left;
    height:80px;
    width:100%;
    clear:both; /* means the footer will fall align below the content-div, and not sidebar or main-content */
}


div#yellowpages-footer-left {
    /* font-family:Arial, Helvetica, sans-serif; */
    /*  font-size:10; */
    font-size:12pt;
    text-align:left;
    float:left;
    width:150px;
    margin:10px 0 0 120px; /* top, right, bottom, left */
}

.wide_300_box {
    width:300px;
}

p#yellowpages-footer-left {
    /*   border:1px solid green; */
    color:#000;
    margin:0 0 0 0px; /* top, right, bottom, left */
}
p#yellowpages-footer-left-white {
    /*   border:1px solid green; */
    color:#fff;
    font-size:14pt;
    margin:20px 0 0 120px; /* top, right, bottom, left */
}


/* Header navigation styles */

ul#yellowpages-list-nav {
    list-style:none;
    margin:29px 0 0 0;  /* top, right, bottom, left */
    padding:0;
    float:left;
    /*width: 1500px;*/
    overflow:hidden;
}

ul#yellowpages-list-nav li {
    display:inline;
}


ul#yellowpages-list-nav li a {
  text-decoration:none;  /* remove underline for this underline list */
  padding:4px 1px 4px 1px;
  width:150px;
  height:auto;  /* mantis6596 modified height from 18px to auto to solve display issue */
  background:#eaeaea;  /* background color */
  color:#000;  /* text color */
  float:left;
  text-align:center;
  border-left:1px solid #fff;  /* create a one pixel white border line to the left of each item */
  border-right:1px solid #fff;  /* create a one pixel white border line to the left of each item */}

ul#yellowpages-list-nav li a:hover {  /* rollover options, change bg color and text color when mouse rollover */
  background:#f4f2f2;  /* background color */
  color:#000;
  border-bottom:1px solid #000;  /* create a one pixel black border line */
  border-left:1px solid #000;  /* create a one pixel black border line */
  border-right:1px solid #000;  /* create a one pixel black border line */
  border-top:1px solid #000;  /* create a one pixel black border line */
}

ul#list-nav {
    list-style:none;
    margin:9px 0 0 0;
    padding:0;
    float:left;
    width:960px
}

ul#list-nav li {
    display:inline
}

ul#list-nav li a {
    text-decoration:none;  /* remove underline for this underline list */
    padding:4px 1px 4px 1px;
    width:140px;
    height:18px;
    background:#415A9C;  /* background color */
    color:#eee;  /* text color */
    float:left;
    text-align:center;
    border-left:1px solid #fff;  /* create a one pixel white border line to the left of each item */
}

ul#list-nav li a:hover {  /* rollover options, change bg color and text color when mouse rollover */
    background:#69CDCD;  /* background color */
    color:#000
}


ul#footer-nav {
    margin:4px 0 10px 0;  /* top, right, bottom, left */
    margin-left: 0;
    padding-left: 40px;
}
ul#footer-nav li a {
    text-decoration:none;  /* remove underline for this underline list */
    font-size:10pt;
    color:#08115C
}

ul#yellowpages-footer-nav {
    margin:0px 0 10px 0;  /* top, right, bottom, left */
    margin-left: 0;
    padding-left: 20px;
}
ul#yellowpages-footer-nav li a {
    text-decoration:none;  /* remove underline for this underline list */
    font-size:11pt;
    color:#08115C
}

li#yellowpages-footer-nav-li {
    margin-top:8px;
}



/* hanvari */

body{
    margin: 0;
    padding: 0;
    background: url(images_css/quote_bg.svg);
    background-size: cover;
    background-position: center bottom !important;
    padding-bottom: 18vw;
    min-height: 80vh;
    box-sizing: border-box;
    font-family: Avenir,Helvetica,Arial,sans-serif;
}

/* disabling SVG background in IE. It does not work appropriately */
/* ref: https://stackoverflow.com/questions/11173106/apply-style-only-on-ie */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    body {
        background: none;
    }
}

div#header{
    display: block;
}

div#yellowpages_footer, div#footer, div#bluerow, div#narrow-bluerow{
    display: none;
}

div#page{
    padding: 25px;
}

.flex{
    display: flex;
}

.justify-center{
    justify-content: center;
}

.btn {
    border-radius: 5px;
    min-width: 20vw;
}

.question-single-confirm{
    position: relative;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    z-index: 0;
    overflow: hidden;
    transition: .3s;
    border: 1px solid #6bc7b8;
    margin: 1rem auto;
}

.tw-p-5{
    padding: 0.75rem !important;
}

.w-50{
    width: 50%;
}

.w-75{
    width: 75%;
}

.w-100{
    width: 100%;
}

.w-auto{
    width: auto !important;
}

.primary{
    background: #2b537b;
}

.question-single-confirm:before {
    /*background: #4dbcaa;*/
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    will-change: transform;
    transform: rotate(-30deg) translateY(100%) scale(2);
    transition: .3s;
}

.question-single-confirm:hover:before {
    background: #003060;
    transform: rotate(30deg) translateY(100%) scale(2);
}

.secondary {
    background: #6bc7b8;
}

.secondary:hover {
    background: #6bc7b8;
    border: 0;
}

.secondary:before{
    background: #59c0af;
}

.secondary:hover:before {
    background: #4dbcaa;
    transform: rotate(30deg) translateY(100%) scale(2);
}

.grey{
    background: #d9d9d9;
}

.grey:hover{
    border: 0;
}

.grey:before {
    background: #ccc;
    box-sizing: border-box;
    border: 0 solid #e2e8f0;
}

.grey:hover:before {
    background: #a9a9a9;
    transform: rotate(30deg) translateY(100%) scale(2);
}

.danger {
    background: #e74c3c;
}

.danger:hover {
    border: 0;
}

.danger:before{
    background: #e43725;
}

.danger:hover:before {
    background: #cb4335;
    transform: rotate(30deg) translateY(100%) scale(2);
}

/* page 2 */

table.form-table {
    counter-reset: rowNumber;
}

table.form-table tr:not(:last-child)::before {
    display: table-cell;
    counter-increment: rowNumber;
    content: counter(rowNumber) ".";
    /*padding-right: 0.3em;*/
    padding: 8px;
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    color: #2b537b;
}

table.form-table tr{
    height: 50px;
}

table.form-table tr td:first-child,
.section-title{
    font-size: 24px !important;
    font-weight: 700;
    color: #2b537b;
    width: 30%;
    text-align: left;
    vertical-align: baseline;
}

div#page input:not([type="radio"]), div#page select{
    padding: 3px 5px;
    font-size: 1.2rem !important;
    height: 2rem;
    margin: .3rem 0;
    border-radius: 0;
    box-shadow: none;
    display: initial;
    transition: .15s;
    border: 2px solid #d9d9d9;
    border-radius: 5px;
    flex: 0 1 100%;
    color: #383838;
}


div#page input[type="image"]{
    border: none;
}

div#page input[type=radio] + b{
    display: inline-block;
    padding: 0 5px;
}

div#main-content{
    background: none;
}

form[name='vehicle_use'] input[type="checkbox"]
{
    vertical-align:middle;
    transform: scale(1.5);
    margin: 0px 15px !important;
    float: left;
    height: 1.5rem !important;

}

/* for driving history in particular */
table{
    background: transparent !important;
    border: none;
}

table td{
    border: none;
}

/* for title 'Driving History' */
h3.section-title{
    margin-left: 15px;
    margin-bottom: 0;
}

span#phone-number-top-menu{
    height: 18px;
    font-size: 1.2rem;
    line-height: 35px;
    margin-left: 30px;
    color: #4dbcaa;
}