/* apply a natural box layout model to all elements, but allowing components to change */
#screenTemplate {
    box-sizing: border-box;
}

#screenTemplate *, #screenTemplate *:before, #screenTemplate *:after {
    box-sizing: inherit;
}
/* ---------- */

#printTemplate, #doNotPrint {
    display: none;
}

input, select, button, textarea {
    outline: none;
}

h1 {
    font-size: 28px;
    text-decoration: none;
    color: white;
}

h2 {
    font-size: 20px;
    text-decoration: none;
}

.reverseHeader {
    color: #0093D3;
    height: 30px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
}

.reverseHeader.first {
    padding-top: 0;
    height: 17px;
}

.reverseHeader.sub {
    font-size: inherit;
}

.reverseHeader p {
    font-size: 11px;
    font-weight: normal;
    color: black;
}

.headerBorderB {
    padding-bottom: 2px;
    border-bottom: 1px solid #0093D3;
}

.tdAfterReverseHeader {
    border-top: 1px solid #0093D3;
    padding-top: 4px;
}

p {
    text-decoration: none;
}

th {
    font-weight: normal;
    padding-left: 1px;
    vertical-align: bottom;
    text-align: left;
}

.CTquote {
    color: black;
    font-size: 11px;
}

.CTheader {
    background-color: #0093D3;
    padding: 0 20px;
}

.CTsideNav {
    font-size: 11px;
    color: white;
    padding: 0px 20px 0px 7px;
}

.CTsideNav input, .CTsideNav select {
    font-size: 100%;
}

.CTsideNav a {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.CTsideNav a:hover {
    color: #EC7A08;
    text-decoration: none;
}

.CTsearch-container {
}

.CTsearch-container p {
    padding-top: 5px;
}

.CTsearch-container .search-header {
    font-size: 13px;
    font-weight: bold;
}

.CTsearch-container .faux-submit-button {
    margin-top: 10px !important;
}

.CTtable0, .CTtable1, .CTtable2, .CTtable3 {
    border-spacing: 0px;
    width: 800px;
    margin: 0 20px;
}

.CTtable0 .Header, .CTtable2 .Header, .CTtable3 .Header {
    background-color: #0093D3;
    color: white;
    height: 30px;
    padding-left: 12px;
    font-size: 14px;
    font-weight: bold;
}

.CTtable0 .Header.RnwlTerms {
    background-color: darkred;
}

.CTtable0 .Header .Disabled, .CTtable2 .Header .Disabled, .CTtable3 .Header .Disabled {
    background-color: red;
    color: black;
}

.CTtable0 tr, .CTtable2 tr, #nonSchedDetails tr, #scope tr {
    border-bottom: 6px solid white;
}

.CTtable1 tr, .scrolling tr {
    border-bottom: 1px solid white;
}

.scrollBoxWrapper {
    position: relative;
}

.scrollBox {
    width: 799px;
    overflow: auto;
    overflow-x: hidden;
    margin-top: 48px;
}

.scrollBoxWrapper table thead {
    position: absolute;
    top: -47px;
    /*z-index: 2; removed because need date picker to be on top. CSS for date picker is on remote file. Otherwise a solution would be to move the date picker up to cover the date fields. This would move it out of the way.*/
}

.scrollBoxWrapper.history table thead {
    position: absolute;
    top: -27px;
    /*z-index: 2; removed because need date picker to be on top. CSS for date picker is on remote file. Otherwise a solution would be to move the date picker up to cover the date fields. This would move it out of the way.*/
}

.scrolling {
    margin: 0;
}

.scrolling .headRow {
    background-color: #0093D3;
    color: white;
    font-size: 12px;
}

.scrolling .sectionHeader {
    background-color: #59AFCE;
    cursor: pointer;
}

.scrolling .sectionHeader.hasTailored {
    background-color: #EC7A08;
}

.scrolling .sectionHeader td {
    width: 799px;
}

.scrolling .benefitRow,
table#CThistoryGrid.CTtable1.scrolling tbody tr {
    background-color: #E5E5E5;
}

.scrolling tr {
    height: 27px;
}

.scrolling td {
    border-right: 1px solid white;
    padding: 5px 10px;
}

.scrolling td h3 {
    color: white;
    font-size: 12px;
}

.scrolling td h3 .expndInstrx {
    float: right;
    font-style: italic;
    font-size: 10px;
}

.scrolling td h4 {
    font-weight: bold;
}

.history {
    max-height: 115px;
    margin-top: 28px;
}

.tableCellRight {
    border-right: 6px solid white;
    /*new*/
    /*width:50%;*/
}

td .RnwlTerms {
    color: darkred;
    background-color: RGB(139, 0, 0, 0.1);
    padding-left: 6px;
}

.CTfield {
    background-color: #d3edf7;
    border: 1px solid #E5F4FA;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 11px;
    height: 26px;
    /* width: 100%;*/
    width: 100%;
    padding: 6px 4px;
    float: right;
}

.CTradioDiv {
    padding: 6px 0px;
}

.CTradioDiv input {
    vertical-align: middle;
    margin: -1px 4px 0 6px;
}

.approveRadio {
    vertical-align: middle;
    margin: -1px 0 0 4px;
}

.CTfieldEmpty, .CTradioDiv.CTfieldEmpty { /*have to combine CTradioDiv and CTfieldEmpty here otherwise CTradioDiv overrides CTfieldEmpty. However the same is not true of CTfield and CTfieldEmpty - go figure */
    border: 1px solid red;
}

select.CTfield {
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 5px) 10px, calc(100% - 10px) 10px, calc(100% - 20px);
    background-size: 5px 5px, 5px 5px, 1px 20px;
    background-repeat: no-repeat;
}

/*remove default arrow button in IE*/
select.CTfield::-ms-expand {
    display: none;
}

.CTdatePicker {
    background-color: #E5F4FA;
    border: 1px solid #E5F4FA;
    width: 72px;
    margin-top: 2px;
    padding: 6px 4px;
    font-weight: normal;
    font-size: 11px;
}

textarea {
    background-color: #E5F4FA;
    border: 1px solid #E5F4FA;
    padding: 6px 4px;
    font-weight: normal;
    width: 100%;
}

.inlineButton {
    cursor: pointer;
}

.reverseHeader.inlineButton:hover {
    color: #EC7A08;
}

.Header.inlineButton:hover {
    background-color: #EC7A08;
}

.CTbutton {
    width: 150px;
    height: 35px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.CTraquo {
    position: relative;
    top: 1px;
    font-size: 22px;
    line-height: 11px;
}

.OrangeButton, .WhiteButton:hover, .PurpleButton:hover {
    border: 1px solid #EC7A08;
    background-color: #EC7A08;
    color: white;
    text-decoration: none;
}

.OrangeButton:hover {
    background-color: white;
    color: #EC7A08;
}

.OrangeButton:disabled, .OrangeButton:disabled:hover, .BlueButton:disabled, .BlueButton:disabled:hover, .reviewPrem.disabld, .reviewPrem.disabld:hover, .chngDetails.disabld, .chngDetails.disabld:hover { /*reviewPrem is a div not a button so the pseudo element :disabled does not work and have to use a class */
    border: 1px solid #AAAAAA;
    background-color: #EEEEEE;
    color: #AAAAAA;
    text-decoration: none;
    cursor: not-allowed;
}
.UploadInput {
    overflow: hidden;
}

.BlueButton {
    border: 1px solid #0093D3;
    background-color: #0093D3;
    color: white;
}

.BlueButton:hover {
    background-color: white;
    color: #0093D3;
}

.tableRowButton {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    outline: none; /*to remove the blue glow from webkit browsers*/
}

.WhiteButton {
    border: 1px solid white;
    background-color: white;
    color: #0093D3;
}

.PurpleButton {
    border: 1px solid purple;
    background-color: purple;
    color: white;
}

.PurpleButton.WhiteHover:hover {
    border: 1px solid white;
    background-color: white;
    color: purple;
}

.textLeftOfButton {
    position: relative;
    right: 6px;
    top: 4px;
    width: 600px;
    text-align: right;
    float: right;
    outline: none; /*to remove the blue glow from webkit browsers*/
}

.inputAsText {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: black;
    resize: none;
    overflow: hidden;
}

.BCTorangeBanner {
    background-color: #EC7A08;
    color: white;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.BCTp {
    padding-bottom: 6px;
}

.BCTh1 {
    background-color: #0093D3;
    height: 30px;
    width: 205px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.BCTh2 {
    text-align: center;
    width: 205px;
}

.BCTpremBox {
    float: left;
    height: 220px;
    width: 204px;
    padding: 10px;
    text-align: center;
    position: relative;
}

.grey { /*used for BCTpremBox */
    border-left: 2px solid #E5E5E5;
    border-right: 2px solid #E5E5E5;
    border-bottom: 2px solid #E5E5E5;
}

.mostPop { /*used for BCTpremBox */
    border-left: 2px solid #0093D3;
    border-right: 2px solid #0093D3;
    border-bottom: 2px solid #0093D3;
    box-shadow: 2px 2px 2px 0 #888888;
}

.BCTlhTopCell {
    word-wrap: break-word;
}

.BCTprem {
    color: #EC7A08;
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 4px;
}

#commission {
    width: 68px;
}

#commission:disabled {
    background: none;
    border: 1px solid white;
    padding: 0;
}

.readonly { /*used for Insured and Business when broker is on a renewal*/
    background-color: white;
}

.premInfo {
    margin-top: -6px;
}

.BCTbutton {
    margin-top: 5px;
}

.BCTprintButton {
    height: 25px;
}

.BCTprintButton:nth-of-type(2) {
    margin-bottom: 20px;
}

.BCTprintButton {
    height: 25px;
}

.BCTpdsLink {
    text-align: center;
    position: relative;
    bottom: 60px;
}

#BCTbuttonsDisabledInstrx1, #BCTbuttonsDisabledInstrx2, #BCTbuttonsDisabledInstrx3 {
    position: relative;
    bottom: 60px;
    height: 6px;
    width: 100px;
    font-weight: bold;
    color: #EC7A08;
    text-align: center;
    margin: auto;
}

.BCTpdsLink a {
    text-decoration: none;
    color: black;
}

.BCTpdsLink a:hover {
    color: #EC7A08;
}

.BCTlimitsList {
    height: 350px;
    margin-top: 2px;
}

.BCTbenefitLabelBC { /*BCTbenefitLabelBC is used when two benefit columns are shown*/
    width: 389px;
}

.BCTbenefitLabel { /*BCTbenefitLabel is used when only one benefit column is shown*/
    width: 594px;
}

.BCTbenefitB {
    width: 205px;
}

.BCTbenefitC, .BCTbenefit { /*BCTbenefit is used when only one benefit column is shown*/
    width: 190px;
}

.BCTfield {
    font-family: Arial, sans-serif;
    font-size: 11px;
    height: 27px;
    text-align: center;
    resize: none;
    margin: 0;
    overflow: hidden;
}

.BCTfield:disabled, .CTdatePicker:disabled {
    background-color: #E5E5E5;
    border-color: #E5E5E5;
}

.BCTchanged, .BCTchanged:disabled { /*the double-up here is used after a quote is approved with a changed limit - all limits are disabled and BCTfield:disabled overrides BCTchanged. So BCTchanged needs it's own disabled style too*/
    border: 1px solid #EC7A08;
    color: #EC7A08;
}

/* ==== PROGRESS BAR ==== */
.progressBar {
    display: block;
    position: relative;
    border: 0;
    height: 20px;
    width: 97px;
    float: right;
    font-size: 12px
}

.whyte { /*bind (forward end) is the Bind button which never has a hover state because it is never a real button */
    background: white;
}

.ornge, .whyte:hover:not(.bind):not(.disabld) {
    background: #EC7A08;
}

/*BEFORE*/
.newQ.whyte:before, .chngDetails.whyte:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: white;
    border-width: 10px;
    margin-top: -10px;
}

.quote.whyte:before, .bind.whyte:before {
    width: 0px;
    height: 0px;
    content: " ";
    border-left: 10px solid #0093D3;
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}

.quote.ornge:before, .bind.ornge:before {
    width: 0px;
    height: 0px;
    content: " ";
    border-left: 10px solid #0093D3;
    border-top: 10px solid #EC7A08;
    border-bottom: 10px solid #EC7A08;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}

/*AFTER*/
.details.whyte:after, .reviewPrem.whyte:after, .quote.whyte:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-left-color: white;
    border-width: 10px;
    margin-top: -10px;
}

.details.ornge:after, .reviewPrem.ornge:after, .quote.ornge:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(236, 122, 8, 0);
    border-left-color: #EC7A08;
    border-width: 10px;
    margin-top: -10px;
}

/*HOVER*/
.newQ.whyte:hover:before, .chngDetails.whyte:hover:before {
    border-right-color: #EC7A08;
}

.details.whyte:hover:after, .reviewPrem.whyte:hover:after, .quote.whyte:hover:after {
    border-left-color: #EC7A08;
}

.quote.whyte:hover:before {
    border-top-color: #EC7A08;
    border-bottom-color: #EC7A08;
}

.whyte:hover:not(.bind):not(.disabld), .newQ.whyte:hover:before, .chngDetails.whyte:hover:before, .details.whyte:hover:after, .reviewPrem.whyte:hover:after, .quote.whyte:hover:after, .quote.whyte:hover:before {
    cursor: pointer;
}
/* ==== END PROGRESS BAR ==== */

.referralTable td {
    text-align: right;
    padding-left: 6px;
}

.referralTable td:first-of-type {
    text-align: left;
    padding-left: 0px;
}

.referralTable td.trips {
    padding-right: 6px;
    padding-left: 0px;
}

.referralUWInput, #commission.referralUWInput {
    width: 60px;
    text-align: right;
    margin-bottom: 2px;
    font: 11px Arial;
    border: 1px solid white;
}

.referralUWInput:disabled {
    background-color: #0093d3;
    border-color: #0093d3;
    color: white;
}

.referralUWInput:disabled::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

.referralUWInput:disabled:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

.referralUWInput:disabled::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

.referralUWnoEdit {
    text-align: right;
    color: white;
    width: 60px;
}

#referralMinPrem {
    color: orange;
}

#tdApproveB, #tdApproveC {
    margin: 0 0 3px 3px;
}

.referralScreenTextForPrint {
    color: white;
    padding: 6px 60px 6px 5px;
}

.referralInputTextForPrint {
    width: 169mm;
    overflow: auto;
    overflow-y: scroll;
}

#subjectives {
    height: 205px;
}

#endorsements {
    height: 505px;
}

ol, ul { /*used for subjectives on referral page*/
    margin: 0 0 0 0pt;
}

ol li {
    padding-left: 10pt;
    margin-bottom: 3pt;
}

.page3chargesAndTotalsRow {
    height: 14px;
}

#baseB, #baseC, #gstB, #gstC, #sdB, #sdC, #grossB, #grossC {
    padding-right: 2px;
}

.UWinfo {
    color: #D9D9D9;
}

.UWinfo.disabled {
    color: #0093d3;
}

.CTownrshpChngHistNote tr {
    border: none;
    height: auto;
}

.CTownrshpChngHistNote td {
    border: none;
    padding: 6px 0 0 0;
}

.CTownrshpChngHistNote tr:first-of-type td {
    padding-top: 0;
}

.CTownrshpChngHistNote td:first-child {
    padding-right: 10px;
    font-style: italic;
}

.customBenefits tr {
    height: 20px;
    vertical-align: top;
}

.customBenefits h3 {
    text-decoration: underline;
}

.customBenefits h3, .customBenefits h4, .sectionHeader {
    font-weight: bold;
}

.ovrrdButton {
    background-color: #F9D070;
    border: 1px solid orange;
    border-radius: 4px;
}

.ovrrdButton:hover {
    background-color: orange;
    border-color: orangered;
    color: rebeccapurple;
}

.resetOvrrd {
    position: absolute;
    right: 130px;
}

.draggable {
    cursor: move;
    float: right;
    left: -130px;
    position: relative;
    z-index: 2;
    box-shadow: -5px 5px 5px #666666;
    width: 300px;
    background-color: rgba(176, 224, 230, 0.9);
    padding: 10px 20px 15px;
    color: black;
    font-size: 11px;
    font-weight: normal;
    border-radius: 5px;
}

.draggable.wide {
    width: 500px;
}

.draggableContainment {
    width: 1130px;
}

.draggableContainment.wide {
    width: 1330px;
}

.draggableContainment > table:not(.refferalUWtext) {
    width: 800px;
}

.draggableHeading {
    color: #EC7A08;
    font-size: 14px;
    font-weight: bold;
}

.draggable p {
    padding-top: 6px;
}

.draggable p:first-child {
    padding-top: 0;
}

.draggable tr {
    border: 0;
}

.draggable th {
    padding-left: 0;
    font-weight: bold;
}

.draggable th, .draggable td {
    padding-right: 5px;
}

#nonSchedHeader .draggable tr, #evntsConfsHeader .draggable tr {
    border: 0;
    border-bottom: 1px solid lightblue;
}

#nonSchedHeader .draggable table, #evntsConfsHeader .draggable table {
    width: 100%;
}

.left {
    text-align: left;
}

.leftWithPadding {
    text-align: left;
    padding-left: 10px;
}

.right, .draggable .right th:not(.left) {
    text-align: right;
}

.scopeLabels {
    text-align: right;
    color: white;
    padding: 0 6px 6px 0;
    width: 100px;
}

/* hack to ensure OSdesinations DIV expands to the full height of its enclosing TD */
.tripsNumOSDetails, .tripsNumOSLDetails {
    height: 1px; /* required for Chrome */
}

#OSdestinations, #OSdestinationsL {
    width: 100%;
    height: 100%;
    display: inline-table; /* required for FireFox */
}

.OSdestGrid {
    width: 100%;
    height: 100%; /* required for Chrome */
    display: inline-grid;
    grid-auto-columns: auto auto;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column; /* order down rather than across */
    padding: 10px;
    /* IE version of grid */
    display: -ms-inline-grid;
    -ms-grid-columns: auto auto;
    -ms-grid-rows: auto auto auto;
}

/* required for IE version of grid - auto-placement of grid items is not supported in IE */
#OSdest1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

#OSdest2 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

#OSdest3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

#OSdest4 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

#OSdest5 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

#OSdest6 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}