/* Add here all your css styles (customizations) */

/* 6/28/2022 - dbottjer - Moved from styles.css to site.css */
.manage-users-heading {
    font-size: 25px;
    color: #003366;
    padding: 0;
    margin: 1em 0;
    display: block;
    border-bottom: 2px solid #003366;
}

.manage-users-section {
    /*background-color:#eeeeee;*/
    border-top: 1px solid #003366;
    /*border-bottom: 1px solid #003366;*/
    padding-top: 5px;
}

.manage-users-model-heading {
    font-size: 14px;
    color: #003366;
    padding: 0;
    margin: 1em 0;
    font-weight: bold;
}

section.sky-checkbox {display: table; width: 100%;}
section.sky-checkbox.conditional-question {display: none;}
section.sky-checkbox .form-check > input[type="checkbox"] {float: left; margin-right: 10px;}
section.sky-checkbox .form-check > label.form-check-label {font-weight: normal; color: unset !important;}
section.sky-checkbox > div[class*="form-check"] {width: calc(50% - 10px); float: left !important; padding: 5px;}
section.sky-checkbox > div[class*="form-check"]:nth-of-type(2n+1) {clear: left;}
section.sky-checkbox > div[class*="form-check"] > label {width: 80%;}
section.sky-checkbox > span {display: table !important; width: 100% !important;}

/*This is used to set inputs to readonly even when something like the minus/plus button removes the readonly attribute*/
.readonly {-webkit-user-select:none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;}

/*7/1/2015 - ibliskavka - Highlight invalid inputs. Sky Form note note-error does not work in this case.*/
.sky-form section .input input.input-validation-error {
    background: #FFF0F0 none repeat scroll 0% 0%;
}

/*7/9/2015 - ibliskavka - make validation text errors red*/
.sky-form span.field-validation-error, .sky-form span.field-validation-error * {
    color: red;
}

/*Begin Validation Summary Styles*/
.sky-form div.validation-summary-errors {
    background: #FFF0F0 none repeat scroll 0% 0%;
}

.sky-form div.validation-summary-errors ul {
    margin: 0px;
}

.sky-form div.validation-summary-errors ul li {
    padding-top: 8px;
    padding-bottom: 8px;
}
/*End Validation Summary Styles*/


/*7/7/2015 - ibliskavka - dropdown icon is too far left*/
.sky-form .select i {
    right: 1px;
}

/*7/7/2015 - ibliskavka - sky forms take too much space*/
.sky-form .select select,
select.form-control
{
    padding-left: 5px;
    padding-right: 5px;
}

.sky-form .input input, input.form-control{
    padding-left: 6px;
    padding-right: 6px;
}

address p {
    margin-bottom: 0px;
}

/*Allow a sky-form column to float to the right*/
.sky-form .col-right {
	float: right;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.sky-form .col-no-padding {
	padding-right: 0;
	padding-left: 0;
}

.sky-form .col-no-float {
	float: none;
}

.sky-form input[readonly]
{
    background-color: #e6e6e6;
}

.breadcrumbs {
    padding: 4px 0 2px;
}

.content
{
    padding-top: 20px;
    padding-bottom: 40px;
}

/*Special class for check boxes*/
.non-sky-form {
    padding-left: 20px !important;
}

.non-sky-form label {
    padding-left: 0 !important;
    font-size: 13px;
    font-weight:400;
    color: #404040;
}

.non-sky-form input {
    left: 0 !important;
    margin-left: 0 !important;
    margin-top: 7px !important;
}

.label-nowrap label {white-space: nowrap !important;}

/*jquery autocomplete styles*/
ul.ui-autocomplete {
    background: white;
    border: 1px solid grey;
    width: 300px;
    padding: 0;
}

.ui-autocomplete li {
    list-style: none;
    list-style-position: outside;
    margin:0;
    padding-left: 5px;
    width: 300px;
}

.ui-autocomplete li.ui-state-focus {
    background: #EEE;
    border-right: 1px solid grey;
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*Button Styles*/
.btn-u.btn-u-green {
    background: #179545;
}

.btn-u.btn-u-green:hover {
    background: #077530;
}



.btn-u.btn-u-green-inverse {
    background: transparent;
    color: #179545;
    border: 2px solid #179545;
    font-weight: bold;
    padding: 4px 12px;
}

.btn-u.btn-u-green-inverse:hover {
    color: #077530;
    border-color: #077530;
}

.btn-u.btn-u-yellow {
    background: #dac815;
}

.btn-u.btn-u-yellow:hover {
    background: #cab815;
}

.appendable-item:nth-child(even) {
    background: #fafafa;
}

.appendable-item,
.alternate-row {
    padding:16px 8px 0px 8px;
}

.alternate-row:nth-child(even) {
    background: #fafafa;
}

.label-checkbox input[type=checkbox] {
    position: relative;
    vertical-align: middle;
    margin: 0px 3px 0px 0px;
    bottom: 1px;
}

.sky-form .radio input:checked + i:after, .sky-form .checkbox input:checked + i:after {
    opacity: 1;
}

.table-bordered {
    margin-bottom: 26px;
}

.tr.group,
        tr.group:hover {
            background-color: #ddd;
        }
#datatable {
    width: 100% ;
}
.hidden-element {
  display: none;
}

/*Not sure why this was not included input skyform.css Allows a skyform section to span the entire space.*/
.sky-form .col-12 {
	width: 100%;
}

.fa-info-circle.color-mcg-blue {
    cursor: pointer;
}
.no-info-icon .fa-info-circle {display: none !important;}

/*Prevent UL from taking up space when there are no errors on the page. ib 5/16/2016*/
div.validation-summary-valid ul {
    margin-bottom: 0px;
}

/*http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3*/
.vertical-align {
    display: flex;
    align-items: center;
}


.workListEntry.highlight, .workListEntry.highlight td
{
    background-color: lightyellow ;
}

/* Mobile Fixes - Moved back to header-default.css so it works, but left here for upgrades - AAC */
.header .logo img {
	z-index: 1;
    height: 60px;
	position: relative;
}

@media (max-width: 480px) {
    .header .logo img {
	    z-index: 1;
        height: 40px;
	    position: relative;
    }

    .pdf-container {
        display: none;
    }
}

/*6/21/2017 - ibliskavka - jstree styling*/

.jstree-node {
    /*On hover, the blue box renders outside of teh tree. This clips it.*/
    overflow: hidden;
}

/*Hide the sub producer dropdown from view*/
label[for='SubProducerCode'], select#SubProducerCode {display: none !important;}


/*Enables wrapping source: https://stackoverflow.com/questions/15070859/wrapping-leaf-text-in-jstree*/
.jstree-anchor u {
    text-decoration: underline;
}
.jstree-anchor {
    /*enable wrapping*/
    white-space: normal !important;
    /*ensure lower nodes move down*/
    height: auto !important;
    /*offset icon width*/
    padding-right: 24px !important;

    /*Set left padding so wrapped text lines up with first line*/
    padding-left: 24px !important;
}

    /*Set negative margin on icon so it appears to left of (wrapped) text*/
    .jstree-anchor .jstree-icon {
        margin-left: -24px !important;
        margin-right: 0 !important;
    }

/*Narrow mode has different icon sizes (40) so we need overrides*/
@media(max-width: 768px) {
    .jstree-anchor {
        /*offset icon width*/
        padding-right: 40px !important;

        /*Set left padding so wrapped text lines up with first line*/
        padding-left: 40px !important;
    }

        /*Set negative margin on icon so it appears to left of (wrapped) text*/
        .jstree-anchor .jstree-icon {
            margin-left: -40px !important;
            margin-right: 0 !important;
        }
}

/*End jstree styling*/

#WizardContactsDisplay {z-index: 1000000; position: fixed; bottom: 10px; right: 10px; width: 400px;}

#WizardContactsDisplay .uw-contact-button {position: fixed; right: 10px; bottom: 10px; background-color: rgba(0,51,102,1); color: rgb(255,255,255); font-weight: bold; text-align: center; padding: 10px 20px; border-radius: 25px !important; cursor: pointer; margin-top: 0; -webkit-transition: bottom 2s; -moz-transition: bottom 2s; -o-transition: bottom 2s; transition: bottom 1s;}
#WizardContactsDisplay.open .uw-contact-button {position: fixed; right: 10px; bottom: -100px; background-color: rgba(0,51,102,1); color: rgb(255,255,255); font-weight: bold; text-align: center; padding: 10px 20px; border-radius: 25px !important; cursor: pointer; }
#WizardContactsDisplay.scrolled .uw-contact-button {bottom: 50px;}
#WizardContactsDisplay.scrolled.open .uw-contact-button {bottom: -100px;}

#WizardContactsDisplay #contacts {border-radius: 5px !important; width: 400px; box-shadow: 0 0 4px rgba(0,0,0,0.5); background-color: rgba(255,255,255,1); padding: 10px; position: absolute; bottom: 10px; right: -500px; -webkit-transition: right 2s; -moz-transition: right 2s; -o-transition: right 2s; transition: bottom 1s, right 1s;}
#WizardContactsDisplay #contacts h4.title {margin: 0 0 5px 10px;}
#WizardContactsDisplay #contacts i.fa-times-circle {position: absolute; top: 7px; right: 7px; font-size: 20pt; color: rgba(0,0,0,0.5); cursor: pointer;}
#WizardContactsDisplay #contacts img {width: 85% !important; display: table; margin: 5px auto; border-radius: 3px !important;}
#WizardContactsDisplay #contacts > div:first-of-type img {margin-top: 0 !important;}
#WizardContactsDisplay #contacts > div:last-of-type img {margin-bottom: 0 !important;}
#WizardContactsDisplay #contacts h5 {font-weight: bold; margin: 0;}
#WizardContactsDisplay #contacts p {font-size: 10pt; margin: 0;}
#WizardContactsDisplay i.fa-phone-square {color: rgb(0,200,0);}
#WizardContactsDisplay i.fa-envelope-square {color: rgb(0,135,200);}
#WizardContactsDisplay small > a {text-decoration: none;}
#WizardContactsDisplay.open #contacts {right: 10px;}
#WizardContactsDisplay.scrolled #contacts {bottom: 50px;}

@media (max-width: 576px) {
    #WizardContactsDisplay {width: 100% !important;}
    #WizardContactsDisplay #contacts {width: calc(100% - 40px);}
}
/* 9/18/2017 - ibliskavka - Footer Buttons - they look strange at narrow screens. */

#btnSubmitForBind, #btnSubmitForReview{
    float: right;
}

.sky-form footer {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 15px;
}

.sky-form footer .btn-u {
    margin-top: 15px;
    margin-left: 15px;
}

/* End Footer Buttons*/

/* 9/18/2017 - ibliskavka - This was adding a bit of extra space on date pickers*/
.sky-form label.input {
    margin-bottom: 0px;
}

.equipment-row {
    margin-bottom:21px !important;
}

.equipment-row .table-bordered {
    margin-bottom:5px;
}

.clear-logo {
    margin-top: 20px;
}

#formList_wrapper tbody tr.child li {
    float: left;
    padding: 5px 20px;
    width: 50%;
}
#formList1_wrapper tbody tr.child li {
    float: left;
    padding: 5px 20px;
    width: 50%;
}
table.billing-search-formlist tr.child span:first-of-type {
    width: 25%;
}
table.billing-search-formlist tr.child span:last-of-type {
    width: 75%;
}

table#producers > tbody > tr > td > div.row {border-bottom: 1px solid rgba(0,0,0,0.2);}

form[id$='DetailInfoForm'] label[for='UnderwriterNotes'][class*='label-required']:after, form[id$='QuoteInfoForm'] label[for='UnderwriterNotes'][class*='label-required']:after {content: " * (Please tell your underwriter what changes you want applied)"; font-weight: normal;} 
form[id$='QuoteLetterForm'] div#UWNotesRow, form[class*='request-renewal-form'] div#UWNotesRow {display: none;}
form[id$='DetailInfoForm'] label[for='HasOwnedAutos']:after { content: " *"; color: red;}
form[id$='DetailInfoForm'] label[for='HANOALimits']:after { content: " *"; color: red;}
form[id$='DetailInfoForm'] label[for='HANOANumEmployees']:after { content: " *"; color: red;}
section.required label[class*='label']:after {content: " *"; color: red;}

.top-margin-10 {
    margin-top: 10px;
}

table#related_renewals a.btn-u {color: rgba(255,255,255,1); margin-left: 5px; float: right;}

.delete-users-button {background-color: rgb(153, 0, 0);}
button[class*='delete-users-button']:hover, button[class*='delete-users-button']:focus {background-color: rgb(200,0,0);}
button[class*='delete-users-button']:hover:before {content: "Delete"; position: absolute; font-size: 8pt; text-transform: uppercase; top: 25%; left: 25%; background-color: rgb(200,0,0); color: rgb(255,255,255); padding: 5px 10px; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
.float-right {float: right;}
.float-left {float: left;}
.float-none {float: none !important;}
#ManageUsersGrid {display: table; width: 100%;}

.claims-contacts {box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); padding: 0 10px;}


.video-thumbnail {width: 100%; box-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.video-timestamp {font-size: 12pt; margin: 0;}
.video-title {margin: 0;}


#ConstructionWorkPercentages {display: table; margin-bottom: 20px;}
input.work-percentage-question {text-align: center !important; max-width: calc(100% - 21px) !important;}

/*General Percentage*/
input.general-percentage-question {
    text-align: center !important;
    max-width: calc(100% - 21px) !important;
}
#TotalGeneralPercentage {
    max-width: calc(100% - 21px) !important;
    text-align: center !important;
    background: rgb(238,238,238) !important;
}

/*Subcontracted Percentage*/
input.subcontracted-percentage-question {
    text-align: center !important;
    max-width: calc(100% - 21px) !important;
}

#TotalSubcontractedPercentage {
    max-width: calc(100% - 21px) !important;
    text-align: center !important;
    background: rgb(238,238,238) !important;
}

label.work-percentage-question {width: 100%; font-size: 12pt; font-size: 9pt !important; text-align: center !important;}
#ConstructionWorkPercentages .text-center {padding-bottom: 5px;}
div[class*='risk-mod']:after {content: "NOTE: A rate modification will be applied."; color: #003366; }
#TotalConstructionPercentage {max-width: calc(100% - 21px) !important; text-align: center !important; background: rgb(238,238,238) !important;}
#TotalWorkRiskPercentage {
    max-width: calc(50% - 21px) !important;
    text-align: center !important;
    background: rgb(238,238,238) !important;
}

.separator-right {border-right: 1px solid rgba(0,0,0,0.3);}

div#cookiepolicy {position: fixed; bottom: 0; left: 0; right: 0; width: 100%; padding: 20px; background-color: rgba(200,200,200,1);}
div#cookiepolicy {font-family: 'Open Sans', sans-serif; font-weight: 900;}
div#cookiepolicy a {text-decoration: underline !important;}
div#cookiepolicy button#acceptcookies {border-radius: 100px !important;}

td.action-icons a {width: 50%; display: table; position: relative; padding: 25% 0;}
td.action-icons a:nth-of-type(odd) {float: left;}
td.action-icons a:nth-of-type(even) {float: right;}
td.action-icons a > i {font-size: 16pt; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: table; margin: auto;}
div#worklist_wrapper table#worklist > tbody > tr.child span.dtr-data > a > i {font-size: 15pt; margin: 0 5px;}

.userModifyContainer {margin: 0 30px; width: calc(100% - 60px) !important;}

#YourMcgTeam .card .card-header {padding: 0; background-color: #003366;}
#YourMcgTeam .card > div:not(.card-header) {border-top: 2px solid rgb(200,0,0);}
#YourMcgTeam .card .card-header * {color: rgb(255,255,255); text-transform: uppercase; font-size: 10pt; font-weight: bold; text-decoration: none; text-align: left;}
#YourMcgTeam .card .card-header button {width: 100%;}
#YourMcgTeam .card .card-body img {max-width: 50px; width: calc(100% - 10px); display: table; margin: 0 auto;}
#YourMcgTeam .card .card-body h4 {font-size: 14pt; line-height: 14pt; margin-bottom: 0;}
#YourMcgTeam .card .card-body strong, #YourMcgTeam .card .card-body p {font-size: 10pt; margin-bottom: 5px;}
#YourMcgTeam .card .card-body .row {margin-bottom: 20px;}
#YourMcgTeam .card .card-body div[class*='row']:last-of-type {margin-bottom: 0;}
#YourMcgTeam .always-shown .collapse {display: flex !important; visibility: visible;}
#YourMcgTeam div.card-header h2 > button {background-image: url('right-angle.png'); background-repeat: no-repeat; background-size: 10px; background-position: left 0px center; margin-left: 5px;}
#YourMcgTeam div.card-header h2 > button[aria-expanded='true'] {background-image: url('down-angle.png');}
#YourMcgTeam div.panel-heading {background-color: #003366;}
#YourMcgTeam h4.panel-title a {text-decoration: none; display: table; width: 100%; font-size: 8pt; font-weight: bold; text-transform: uppercase; color: rgb(255,255,255); background-image: url('/images/contacts-right-angle.jpg'); background-size: 10px; background-position: left center; background-repeat: no-repeat; padding-left: 17px;}
#YourMcgTeam h4.panel-title a[aria-expanded='true'] {background-image: url('/images/contacts-down-angle.jpg');}
#YourMcgTeam div.panel div.panel-collapse {border-top: 2px solid rgb(200,0,0);}
#YourMcgTeam div.panel-body img {width: 100%; display: table; margin: 0 auto;}
#YourMcgTeam div.panel-body h5 {font-weight: bold; margin: 0;}
#YourMcgTeam div.panel-body p {font-size: 10pt; margin: 0;}
#YourMcgTeam i.fa {margin: auto;}
#YourMcgTeam i.fa-phone-square {color: rgb(0,200,0);}
#YourMcgTeam i.fa-envelope-square {color: rgb(0,135,200);}
#YourMcgTeam small > a {text-decoration: none;}
#YourMcgTeam .panel-group {margin-bottom: 0 !important;}
#YourMcgTeam .panel-group > .panel.panel-default {border: 0 !important;}
#YourMcgTeam .panel-group .panel+.panel {margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
#YourMcgTeam .panel-group .panel+.panel > .panel-heading {border-top-left-radius: 0; border-top-right-radius: 0;} 
#YourMcgTeam .panel-group > div:not(:nth-last-of-type(1)) {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
#YourMcgTeam div.panel div.panel-body > div.row {margin-bottom: 15px;}
#YourMcgTeam div.panel div.panel-body > div[class='row']:last-of-type {margin-bottom: 0 !important;}
#YourMcgTeam div#MOBILEWELDEROILFIELDELECTRICIANOILLEASEOPERATORROUSTABOUTS h4.panel-title > a {line-height: 1.25em;}
.contacts-wrapper {background-color: #003366; display: table; outline: 1px solid #003366; width: 100%;}
.contacts-wrapper #ReorgContacts_AgencyCode {margin: 5px; width: calc(100% - 10px);}
.contacts-wrapper .panel-body span.sub-title {text-transform: uppercase; display: table; font-size: 8pt; color: rgb(100, 80, 50, 0.6); font-style: italic; margin-bottom: 15px;}
#UWContacts div.alert-info {margin: 0px 5px 5px 5px;}
div#MOBILEWELDEROILFIELDELECTRICIANROUSTABOUTS > h4.panel-title > a {line-height: 1.25em;}

i.new-product::after {content: ""; display: table; background-image: url('/Images/new-product.png'); margin-left: 10px; width: 32px; height: 17px; float: right; background-size: contain; background-repeat: no-repeat;}

section.bond-form-upload {position: fixed; left: -1000px; bottom: -1000px;}
section.ss-renewal-date input.datepicker {max-width: none !important;}
section.ss-renewal-date label.input {width: calc((100% / 3) - 20px);}
.uploaded-files > div {max-width: calc((100% / 3) - 10px); margin-top: 5px; padding: 0 10px; position: relative; background-color: rgba(100,100,100,0.1);}
.uploaded-files > div i.fa-file-text-o {font-size: 20pt; position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; display: table;}
.uploaded-files > div > span {font-size: 8pt; margin-left: 40px; line-height: 12pt; padding: 5px 0; display: table; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap;white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -hp-pre-wrap; word-wrap: break-word; text-align: left;}
.uploaded-files > div .controls {display: table; width: auto; margin: 0 10px 10px 40px;}
.uploaded-files > div .controls span {font-size: 7pt; text-transform: uppercase; padding: 5px; margin-right: 5px;}
.uploaded-files > div .controls span:first-of-type {background-color: #179545; color: white;}
.uploaded-files > div .controls span:last-of-type {background-color: rgb(200, 0, 0); color: white;}
.uploaded-files > div .controls span > i {margin-right: 5px;}
.clear-left {clear: left;}
.add-label-asterisk > label[class*='label']:after {content: " *"; color: #e32; display: inline;}
#IndemnityAgreementForm .uploaded-files > div {max-width: 100% !important;}
#BondFormUploadSection {display: table; margin-bottom: 15px; width: 100%;}

#QuoteModal .wait-screen {margin-bottom: 0 !important;}
#QuoteModal .wait-screen i {font-size: 72px; color: #077530;}
#QuoteModal .wait-screen h2 {margin: 0;}
#QuoteModal .wait-screen p {font-size: 12pt; margin: 0;}
#QuoteModal table#ratingTable thead tr th, #QuoteModal table#ratingTable tbody tr td {padding: 4px 4px 4px 4px !important;}

#ACInsureds > tbody > tr {cursor: pointer;}
#ACInsureds > tbody > tr table * {cursor: auto;}
#ACInsureds .fa-chevron-circle-down {color: rgba(0,0,0,0.4); cursor: pointer;}
#ACInsureds h4 a {text-decoration: none; cursor: pointer;}
#ACInsureds h4 a i {cursor: pointer;}

.ix { margin-bottom: 15px;  }
.noWrap { white-space: nowrap; }
.hiddenM { display: none !important; }
.clearNone { display: block; padding: 3px 20px; clear: both !important; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; }
#MyFilters + ul li { display: flex; }
.filterLeft { text-align: left; padding: 5px 5px; width: 100%; white-space: nowrap; color: #333; }
.filterRight { float: right; text-align: right; padding: 5px 5px; width: 100%; color: #333; }
.breakLongWord { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; }


.subNewPanel { background-color: rgb(253,238,234); }
.subFrequency { color: white; background-color: #666; padding: 0px 5px; }
.subTitle { font-weight: bold; color: black; }
.subReport th, .subReport td { border: 1px solid black; padding: 0px 3px; text-align: center; font-weight: bold; color: black; }
.subShade { background-color: rgb(242,241,242); font-weight: bold; color: black; }
.subLean { background-color: rgb(255,255,255); font-weight: bold; font-style: italic; color: black; }
.subNew { color: red; font-weight: bold; }
.subDesc { font-weight: bold; font-style: italic; }
.subSummary { overflow-x: auto; }
.subCard { margin-top: 25px; }
.subRequired:after { content: " *"; color: red; }

#dbCommissions td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#abScheduledPayments td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#abPayments td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#abDocuments td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#abPolicies td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#formList1 td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#billingAccount td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#accountPolicies td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#accountTransactions td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#invoice td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#accountInstallmentSchedule td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#notices td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }
#producers td:empty:after { content: "-"; text-align: center; width: 100%; display: table; }

div#DBModal.modal div.modal-dialog {width: 400px !important;}
div#DBModal.modal form {border: 0 !important;}
div#DBModal.modal div.modal-content {border-radius: 5px !important;}
div#DBModal.modal .modal-header {background-color: rgba(0,51,102,0.2) !important; border-top: 5px solid rgb(200,0,0);}
div#DBModal.modal .modal-header img {max-width: 175px;}
div#DBModal.modal .modal-header button {font-size: 1.5rem !important; color: #54565b !important; opacity: 1 !important; text-shadow: none !important; font-weight: 400 !important; line-height: 27px;}
div#DBModal.modal .modal-header button span {font-size: 2.5rem !important; background-color: #54565b !important; width: 25px; display: block; float: right; margin-left: 5px; border-radius: 100px !important; color: white; height: 25px; line-height: 1.05;}
div#DBModal.modal .modal-footer button {border-radius: 3px !important; text-transform: uppercase;}
div#DBModal.modal .modal-footer button.btn-default {background-color: rgb(255,255,255); border-color: rgb(0,51,102) !important; color: rgb(0,51,102) !important;}
div#DBModal.modal .modal-footer button.btn-success {background-color: rgb(0,51,102); border: none !important;}

/*Policy Center*/
#pc_tabs {border-bottom: 1px solid rgb(0, 51, 102);}
#pc_tabs > ul {border-bottom: 0 !important;}
#pc_tabs > ul > li {margin-right: 15px;}
#pc_tabs > ul > li > p {font-size: 12pt; font-weight: bold; color: rgba(0,0,0,0.7); text-transform: uppercase; padding: 0; margin: 0;}
#pc_tabs > ul > li > ul {border-bottom: 1px solid rgb(0, 51, 102);}
#pc_tabs > ul > li > ul > li a {background: rgba(150,150,150,0.1);}
#pc_tabs > ul > li > ul > li.active a {background: rgb(0, 51, 102);}
#pc_tabs > ul > li > ul > li a:hover {background: rgb(0, 51, 102);}
#ACInsureds > tbody > tr {cursor: pointer;}
#ACInsureds > tbody > tr table * {cursor: auto;}
#ACInsureds .fa-chevron-circle-down {color: rgba(0,0,0,0.4); cursor: pointer;}
#ACInsureds h4 a {text-decoration: none; cursor: pointer;}
#ACInsureds h4 a i {cursor: pointer;}

#UserWorkList {width: 100% !important;}
#UserWorkList i.fa {color: rgb(0 51 102) !important; background-color: rgb(0 0 0 / 10%); padding: 5px; border-radius: 5px !important; margin: 0 5px 5px 0; width: 25px; height: 25px; text-align: center; vertical-align: middle; float: left; font-size: 11pt; cursor: pointer;}
.nobreak {white-space:nowrap;}
#PolicyActions .undecline {cursor: pointer;}
#PolicyActions .modal-body a {display: table;}
#UserWorkList_wrapper {padding: 10px; border: 2px solid rgba(0,51,102,1);}
#AccountCenterTabs {border-bottom: none !important;}
#AccountCenterTabs li.active a {background: rgba(0,51,102,1); color: rgba(255,255,255,1);}
#AccountCenterTabs li:not(.active) a {cursor: pointer; background-color: rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,51,102,1);}
#AccountCenterTabs li:not(.active) a:hover {color: rgba(0,51,102,1); background-color: lightgray;}
#UserWorkList .highlight, #UserWorkList .highlight td {background-color: lightyellow !important;}
#UserWorkList .uw-info, #UserWorkList .uw-info td {background-color: rgb(242 222 224) !important;}
#UserWorkList thead tr th:nth-of-type(8), #UserWorkList tfoot tr th:nth-of-type(8), #UserWorkList tbody tr td:nth-of-type(8) {display: none;}
#UserWorkList tbody tr td {vertical-align: middle !important;}
#UserWorkList tbody tr td:first-of-type p {white-space: nowrap !important;}
#UserWorkList tbody tr td p {margin: 0; padding: 0;}
#UserWorkList tbody tr td i {color: rgba(119,119,119,1);}
.bg-color-light-yellow {background-color: lightyellow;}
.bg-color-salmon {background-color: rgb(242 222 224);}
.cursor-pointer {cursor: pointer;}

div#Floaters section {width: calc(50% - 30px); padding: 10px; margin: 0 15px 10px 15px; float: left; background-color: #003366;}
div#Floaters section label.checkbox {margin-bottom: 0; color: rgb(255,255,255); font-weight: bold; font-size: 11pt; text-transform: uppercase;}
div[id='OKIsRestricted']:after {content: " We are unable to offer coverage for residential Builder's Risk Non-Reporting in OK at this time."; color: rgb(0,0,200); font-size: 9pt;}
.img-fluid {width: 100%;}

#IMAccordion .panel-heading .panel-title a {display: table; width: 100%; text-decoration: none;}
#IMAccordion .panel-heading .panel-title a i {font-size: 20pt;}

.inline-validation {margin-bottom: 20px;}
.inline-validation section {display: inline;}
.inline-validation span.field-validation-error {display: table;}
.d-block {display: block !important;}
.d-table {display: table !important;}
.mb-auto {margin-bottom: auto !important;}
.mt-auto {margin-top: auto !important;}
.ml-auto {margin-left: auto !important;}
.mr-auto {margin-left: auto !important;}
.m-auto {margin: auto !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: .25rem !important;}
.mb-2 {margin-bottom: .5rem !important;}
.mb-3 {margin-bottom: .75rem !important;}
.mb-4 {margin-bottom: 1rem !important;}
.mb-5 {margin-bottom: 1.25rem !important;}
.mb-6 {margin-bottom: 1.5rem !important;}
.mb-7 {margin-bottom: 1.75rem !important;}
.mb-8 {margin-bottom: 2rem !important;}
.me-0 {margin-right: 0 !important;}
.me-1 {margin-right: .25rem !important;}
.me-2 {margin-right: .5rem !important;}
.me-3 {margin-right: .75rem !important;}
.me-4 {margin-right: 1rem !important;}
.me-5 {margin-right: 1.25rem !important;}
.me-6 {margin-right: 1.5rem !important;}
.me-7 {margin-right: 1.75rem !important;}
.me-8 {margin-right: 2rem !important;}
.ms-0 {margin-left: 0 !important;}
.ms-1 {margin-left: .25rem !important;}
.ms-2 {margin-left: .5rem !important;}
.ms-3 {margin-left: .75rem !important;}
.ms-4 {margin-left: 1rem !important;}
.ms-5 {margin-left: 1.25rem !important;}
.ms-6 {margin-left: 1.5rem !important;}
.ms-7 {margin-left: 1.75rem !important;}
.ms-8 {margin-left: 2rem !important;}
.mt-1 {margin-top: .25rem !important;}
.mt-2 {margin-top: .5rem !important;}
.mt-3 {margin-top: .75rem !important;}
.mt-4 {margin-top: 1rem !important;}
.mt-5 {margin-top: 1.25rem !important;}
.mt-6 {margin-top: 1.5rem !important;}
.mt-7 {margin-top: 1.75rem !important;}
.mt-8 {margin-top: 2rem !important;}
.pl-0 {padding-left: 0 !important;}
.pl-1 {padding-left: .25rem !important;}
.pl-2 {padding-left: .5rem !important;}
.pl-3 {padding-left: .75rem !important;}
.pl-4 {padding-left: 1rem !important;}
.pl-5 {padding-left: 1.25rem !important;}
.pl-6 {padding-left: 1.5rem !important;}
.pl-7 {padding-left: 1.75rem !important;}
.pl-8 {padding-left: 2rem !important;}
.pl-9 {padding-left: 2.25rem !important;}
.pl-10 {padding-left: 2.5rem !important;}
.pl-11 {padding-left: 2.75rem !important;}
.pl-12 {padding-left: 3rem !important;}
.pr-0 {padding-right: 0 !important;}
.pr-1 {padding-right: .25rem !important;}
.pr-2 {padding-right: .5rem !important;}
.pr-3 {padding-right: .75rem !important;}
.pr-4 {padding-right: 1rem !important;}
.pr-5 {padding-right: 1.25rem !important;}
.pr-6 {padding-right: 1.5rem !important;}
.pr-7 {padding-right: 1.75rem !important;}
.pr-8 {padding-right: 2rem !important;}
.pr-9 {padding-right: 2.25rem !important;}
.pr-10 {padding-right: 2.5rem !important;}
.pr-11 {padding-right: 2.75rem !important;}
.pr-12 {padding-right: 3rem !important;}
.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: .25rem !important;}
.pb-2 {padding-bottom: .5rem !important;}
.pb-3 {padding-bottom: .75rem !important;}
.pb-4 {padding-bottom: 1rem !important;}
.pb-5 {padding-bottom: 1.25rem !important;}
.pb-6 {padding-bottom: 1.5rem !important;}
.pb-7 {padding-bottom: 1.75rem !important;}
.pb-8 {padding-bottom: 2rem !important;}
.pb-9 {padding-bottom: 2.25rem !important;}
.pb-10 {padding-bottom: 2.5rem !important;}
.pb-11 {padding-bottom: 2.75rem !important;}
.pb-12 {padding-bottom: 3rem !important;}
.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: .25rem !important;}
.pt-2 {padding-top: .5rem !important;}
.pt-3 {padding-top: .75rem !important;}
.pt-4 {padding-top: 1rem !important;}
.pt-5 {padding-top: 1.25rem !important;}
.pt-6 {padding-top: 1.5rem !important;}
.pt-7 {padding-top: 1.75rem !important;}
.pt-8 {padding-top: 2rem !important;}
.pt-9 {padding-top: 2.25rem !important;}
.pt-10 {padding-top: 2.5rem !important;}
.pt-11 {padding-top: 2.75rem !important;}
.pt-12 {padding-top: 3rem !important;}
.p-0 {padding: 0 !important;}
.p-1 {padding: .25rem !important;}
.p-2 {padding: .5rem !important;}
.p-3 {padding: .75rem !important;}
.p-4 {padding: 1rem !important;}
.p-5 {padding: 1.25rem !important;}
.p-6 {padding: 1.5rem !important;}
.p-7 {padding: 1.75rem !important;}
.p-8 {padding: 2rem !important;}
.p-9 {padding: 2.25rem !important;}
.p-10 {padding: 2.5rem !important;}
.p-11 {padding: 2.75rem !important;}
.p-12 {padding: 3rem !important;}
.m-0 {margin: 0 !important;}
.m-1 {margin: .25rem !important;}
.m-2 {margin: .5rem !important;}
.m-3 {margin: .75rem !important;}
.m-4 {margin: 1rem !important;}
.m-5 {margin: 1.25rem !important;}
.m-6 {margin: 1.5rem !important;}
.m-7 {margin: 1.75rem !important;}
.m-8 {margin: 2rem !important;}
.w-100 {width: 100% !important;}
.border-top-0 {border-top: 0 !important;}
.border-top {border-top: 1px solid #ddd;}
.border-left {border-left: 1px solid #ddd;}
.border-right {border-right: 1px solid #ddd;}
.border-bottom {border-bottom: 1px solid #ddd;}

.transparent {background: transparent !important;}

#HBGLSalesValidation span.field-validation-error {display: table; width: 100%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
#HBGLSalesValidation span.field-validation-error a {text-decoration: underline !important;}

.position-absolute {position: absolute; top: -10000px; left: -10000px;}
.position-absolute-left {position: absolute; left: -10000px;}
/* Common Coverages drop down cannot be 'removed' from Builder's Risk page, so we have to do something drastic like this. :(*/
#BNCoverages .cov-footer {display: none !important;}

.non-sky-form {padding-left: 20px !important;}
.non-sky-form label {padding-left: 0 !important; font-size: 13px; font-weight: 400; color: #404040;}
.non-sky-form input {left: 0 !important; margin-left: 0 !important; margin-top: 7px !important;}

.blue-validation {color: rgb(0,0,200); font-size: 9pt;}

#AdditionalCoverageOptions #portalCrossSold > div, #AdditionalCoverageOptions #nonPortalCrossSold > div {font-size: 9pt; font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.2); outline: 1px solid rgba(100,100,100,0.1);}
#AdditionalCoverageOptions #portalCrossSold ul, #AdditionalCoverageOptions #nonPortalCrossSold ul {margin-top: 10px; margin-bottom: 10px;}
#AdditionalCoverageOptions #portalCrossSold ul li, #AdditionalCoverageOptions #nonPortalCrossSold ul li {font-size: 14pt; line-height: 20pt;}
#AdditionalCoverageOptions #portalCrossSold ul li > span, #AdditionalCoverageOptions #nonPortalCrossSold ul li > span {line-height: 15pt;}
#AdditionalCoverageOptions .alert-secondary {background-color: rgba(0,0,0,0.1);}
#AdditionalCoverageOptions span.warning {color: red;}
#AdditionalCoverageOptions #CoveragesList {display: table; margin-bottom: 15px;}
#AdditionalCoverageOptions .description, #AdditionalCoverageOptions .description ul li {font-size: 8pt !important; color: rgba(160,160,160,1) !important;}
#AdditionalCoverageOptions #CoveragesList > div:nth-of-type(3n+1) {clear: left !important;}
#ConfirmationNextApps section {box-shadow: 0 0 1px rgba(0,0,0,0.8);}
.va-middle {vertical-align: middle !important;}
.va-top {vertical-align: top !important;}
#ConfirmationNextApps i.fa-file {color: #003366;}
#ConfirmationNextApps td > a {margin-right: 10px;}
#ConfirmationNextApps thead p {margin-bottom: 0 !important; font-size: 9.5pt !important;}
.mt-n1 {margin-top: -0.25rem !important;}
.mt-n2 {margin-top: -0.5rem !important;}
.mt-n3 {margin-top: -1rem !important;}
.mt-n4 {margin-top: -1.5rem !important;}

section[class*='losses-disclaimer']:after {content: "Due to losses occurring since the effective date, the application will be submitted on a non-binding basis for review by underwriting."; color: rgb(0,0,200); font-size: 9pt;}

#bondDocsAccessDenied p, #policyDocsAccessDenied p {margin-bottom: 0 !important; color: #a94442 !important;}

#FloaterSelection {margin-bottom: 20px;}
.floater {background-color: #003366; cursor: pointer; margin-top: 10px;}
.floater > .row {padding: 10px;}
.floater input[type='checkbox'] {margin: 7px 0 0 0 !important;}
.floater .title {margin: 0; font-size: 12pt; font-weight: bold; color: rgb(255,255,255); padding: 0; line-height: 20pt;}
.floater i {color: white; font-size: 18pt; margin-top: 2px;}
.floater i:before {content: "\f096";}
.floater.checked i:before {content: "\f046";}

/*Font Awesome add-ins*/
.fa-2 {font-size: 2em;}
.fa-3 {font-size: 4em;}
.fa-4 {font-size: 7em;}
.fa-5 {font-size: 12em;}
.fa-6 {font-size: 20em;}

div[id^='FileUpload_'] .file-list > div {outline: 1px solid rgba(0,0,0,0.2); padding: 5px 0 0 0; margin: 0 15px; background-color: rgba(200,200,200,0.2);}
div[id^='FileUpload_'] .file-list .file-icon > i {font-size: 2.25em !important;}
div[id^='FileUpload_'] .file-list .fa-trash {color: rgb(200,0,0); font-size: 1.5em !important; cursor: pointer; background-color: rgba(100,100,100,0.1); border-radius: 100px !important; width: 34px; height: 34px;}
div[id^='FileUpload_'] .file-list .fa-arrow-circle-down {color: rgb(7 117 48); font-size: 1.5em !important; cursor: pointer; background-color: rgba(100,100,100,0.1); border-radius: 100px !important; width: 34px; height: 34px;}
div[id^='FileUpload_RequestRenewal'] .file-list .fa, div[id^='FileUpload_BondRequest'] .file-list .fa, div[id^='FileUpload_IndemnityAgreement'] .file-list .fa, div[id^='FileUpload_JobHistory'] .file-list .fa, form[action='/IM/REN/DetailInfo'] div[id^='FileUpload_FormalRentalAgreement'] .file-list .fa {width: 30px !important; height: 30px !important; font-size: 1.15em !important;}
div[id^='FileUpload_RequestRenewal'] .file-list .file-icon, div[id^='FileUpload_BondRequest'] .file-list .file-icon, div[id^='FileUpload_IndemnityAgreement'] .file-list .file-icon, div[id^='FileUpload_JobHistory'] .file-list .file-icon, form[action='/IM/REN/DetailInfo'] div[id^='FileUpload_FormalRentalAgreement'] .file-list .file-icon {width: 40% !important;}
div[id^='FileUpload_RequestRenewal'] .file-list .file-icon > i, div[id^='FileUpload_BondRequest'] .file-list .file-icon > i, div[id^='FileUpload_IndemnityAgreement'] .file-list .file-icon > i, div[id^='FileUpload_JobHistory'] .file-list .file-icon > i, form[action='/IM/REN/DetailInfo'] div[id^='FileUpload_FormalRentalAgreement'] .file-list .file-icon > i {font-size: 2em !important;}
div[id^='FileUpload_IndemnityAgreement'] .file-list .file {width: calc(50% - 30px) !important;}

/*Request Renewal Page*/
.request-renewal-form .border-3 {outline: 3px solid rgba(0,0,0,0.1);}
.request-renewal-form #uwNotesScroll {overflow-y: auto; max-height: 300px; font-size: 14px;}
.request-renewal-form input#chkReadNotes {width: 30px; height: 18px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px;}
.red-text {color: red !important;}
.align-middle {vertical-align: middle !important;}
.supp-app {background-color: rgba(100,100,100,0.1) !important; width: 100%; display: table; padding: 10px; text-decoration: none !important;}


/*Drivers List Styles*/
.mcg-toaster {display: table; z-index: 100000; width: 300px; position: fixed; top: 0px; right: 0px; color: rgb(255,255,255); font-weight: bold; font-family: 'Open Sans', sans-serif;}
.mcg-green {background-color: rgba(23,149,69,0.8);}
.mcg-red {background-color: rgba(210,35,42,0.8);}

/*ENI Required Labels*/
label[for^="ExtendedNamedQuestionnaire_ExtendedNamedInsureds"][for$="_Name"]:after, label[for^="ExtendedNamedQuestionnaire_ExtendedNamedInsureds"][for$="_OwnershipPercentage"]:after, label[for^="ExtendedNamedQuestionnaire_ExtendedNamedInsureds"][for$="_Description"]:after {
    color: #e32;
    content: ' *';
    display: inline;
}
#NameEntityTable td.appendable-target > div:first-of-type div[data-isimported="False"] span.fa-minus-square {display: none;}
#aboutThisPage {
    position: fixed;
    top: 150px;
    right: 0;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    writing-mode: vertical-lr;
    z-index: 100000;
    padding: 15px 10px;
    background-color: rgba(0,51,102,1);
    color: rgba(255,255,255,1);
    cursor: pointer;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    height: 180px;
    letter-spacing: 0.1em;
    text-align: center;
}

#aboutThisPageContent {
    background-color: rgb(0,51,102) !important;
    width: 360px;
    height: 50%;
    position: fixed;
    top: 150px;
    right: -375px;
    -webkit-transition: right 1s;
    -moz-transition: right 1s;
    -o-transition: right 1s;
    transition: right 1s;
    box-shadow: 2px 0px 20px 15px rgba(0,0,0,0.2);
    z-index: 100000;
}

    #aboutThisPageContent > div {
        position: relative !important;
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100%;
        padding: 10px;
    }

    #aboutThisPageContent #blueBox {
        background-color: transparent;
        border: 0 !important;
        margin-bottom: 0 !important;
    }

    #aboutThisPageContent * {
        color: white !important;
    }

    #aboutThisPageContent > i {
        position: absolute;
        top: 3px;
        left: 3px;
        font-size: 18pt;
        cursor: pointer;
        z-index: 100001;
        color: rgb(200,0,0);
    }

    #aboutThisPageContent.show {
        right: 0px;
    }


#aboutThisPage {position: fixed; top: 150px; right: 0; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); writing-mode: vertical-lr; z-index: 100000; padding: 15px 10px; background-color: rgba(0,51,102,1); color: rgba(255,255,255,1); cursor: pointer; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; font-family: 'Open Sans', sans-serif; font-weight: bold; text-transform: uppercase; height: 180px; letter-spacing: 0.1em; text-align: center;}
#aboutThisPageContent {background-color: rgb(0,51,102) !important; width: 360px; height: 50%; position: fixed; top: 150px; right: -375px; -webkit-transition: right 1s; -moz-transition: right 1s; -o-transition: right 1s; transition: right 1s; box-shadow: 2px 0px 20px 15px rgba(0,0,0,0.2); z-index: 100000;}
#aboutThisPageContent > div {position: relative !important; overflow-x: hidden; overflow-y: scroll; height: 100%; padding: 10px;}
#aboutThisPageContent #blueBox {background-color: transparent; border: 0 !important; margin-bottom: 0 !important;}
#aboutThisPageContent * {color: white !important;}
#aboutThisPageContent > i {position: absolute; top: 3px; left: 3px; font-size: 18pt; cursor: pointer; z-index: 100001; color: rgb(200,0,0);}
#aboutThisPageContent.show {right: 0px;}

.ddl-risk-state select {max-width: 150px;}



@media only screen and (min-width: 992px)
{
    /* Andrew is Sneaky */
    .equidistant {display: flex; justify-content: space-between;}
}

@media only screen and (min-width: 768px)
{
    .d-lg-none {display: none !important;}
    .fancy-title {text-transform: uppercase; text-align: center; font-weight: 300; letter-spacing: 1px; display: grid; grid-template-columns: 1fr max-content 1fr; grid-template-rows: 27px 0; grid-gap: 0 20px; align-items: center;}
    .fancy-title::after, .fancy-title::before  {content: " "; height: 3px; display: block; border-top: 1px solid rgba(0,51,102,0.1); border-bottom: 1px solid rgba(0,51,102,0.4); background-color: rgba(200,200,200,0.1);}
}

@media (max-width: 991px) {
    /*Hide claims contacts on tablet or smaller*/
    .claims-contacts {display: none !important;}
    .video-right-rail {margin-top: 40px;}
    div[id^='FileUpload_IndemnityAgreement'] .file-list .file {width: calc(25% - 30px) !important;}
    .ddl-risk-state select {max-width: none;}
    .equidistant .btn-u {width: 100%;  text-align: center;}

    /*Billing Pages*/
    div[data-mpc]::before {content: "Master Producer: "; font-weight: bold;}
    div[data-producername]::before {content: "Producer Name: "; font-weight: bold;}
    div[data-location]::before {content: "Location: "; font-weight: bold;}
}

@media (max-width: 767px)
{
    /*Because the mobile modal was super skinny*/
    #mcgModal > div.modal-dialog { width: calc(100% - 60px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: table; }

    /*Commercial Forms Library mobileification*/
    table#CommercialFormsList > thead {display: none !important;}
    table#CommercialFormsList > tbody,table#CommercialFormsList > tbody > tr, table#CommercialFormsList > tbody,table#CommercialFormsList > tbody > tr td {display: block;}
    table#CommercialFormsList > tbody > tr {padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,1);}
    table#CommercialFormsList > tbody > tr > td {font-weight: normal; border: 0; padding-top: 0; padding-bottom: 0; color: black;}
    table#CommercialFormsList > tbody > tr > td:first-child:before {content: "Form: "; font-weight: bold;}
    table#CommercialFormsList > tbody > tr > td:nth-child(2):before {content: "Description: "; font-weight: bold;}
    table#CommercialFormsList > tbody > tr > td:nth-child(3):before {content: "Category: "; font-weight: bold;}
    table#CommercialFormsList > tbody > tr > td:nth-child(4) > a, table#CommercialFormsList > tbody > tr > td:nth-child(5) > a {background-color: rgb(0,51,102); color: white; padding: 6px 13px; margin: 10px 10px 10px 0; display: table;}
    table#CommercialFormsList > tbody > tr > td:nth-child(4) > a {float: left;}

    
    /*Responsive Claims detail page table*/
    table#claimsDetail, table#claimsDetail thead, table#claimsDetail tbody, table#claimsDetail tfoot, table#claimsDetail th, table#claimsDetail td, table#claimsDetail tr {display: block;}
    table#claimsDetail thead tr {position: absolute; top: -9999px; left: -9999px;}
    table#claimsDetail tr {border: 1px solid rgba(0,0,0,0.4);}
    table#claimsDetail td:nth-child(n+2) {border: none; border-bottom: 1px solid rgba(0,0,0,0.2); position: relative; padding-left: 50%;}
    table#claimsDetail td:before {position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
    table#claimsDetail td[id^='PaidLosses']:before {content: "Paid Losses"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='Recovery']:before {content: "Recovery"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='NetIncurred']:before {content: "Net Incurred"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='GrossIncurred']:before {content: "Gross Incurred"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='OSReserve']:before {content: "OS Reserve"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='Salvage']:before {content: "Salvage"; font-weight: bold; text-align: left;}
    table#claimsDetail td[id^='AllocatedEX']:before {content: "Allocated EX"; font-weight: bold; text-align: left;}
    table#claimsDetail th[id='PaidLosses']:before {content: "Paid Losses"; float: left;}
    table#claimsDetail th[id='Recovery']:before {content: "Recovery"; float: left;}
    table#claimsDetail th[id='NetIncurred']:before {content: "Net Incurred"; float: left;}
    table#claimsDetail th[id='GrossIncurred']:before {content: "Gross Incurred"; float: left;}
    table#claimsDetail th[id='OSReserve']:before {content: "OS Reserve"; float: left;}
    table#claimsDetail th[id='Salvage']:before {content: "Salvage"; float: left;}
    table#claimsDetail th[id='AllocatedEX']:before {content: "Allocated EX"; float: left;}
    a#backToClaims {margin-left: 8px;}
    .separator-right {border-right: 0 !important;}
    div#Floaters section {width: calc(100% - 30px); float: none;}

    div[id^='FileUpload_IndemnityAgreement'] .file-list .file {width: calc(33% - 30px) !important;}
    .d-sm-none {display: none !important;}

}

@media (max-width: 576px)
{
    div[id^='FileUpload_IndemnityAgreement'] .file-list .file {width: calc(50% - 30px) !important;}    
    section.sky-checkbox > div[class*="form-check"] { width: calc(100% - 10px) !important; }
    div#DBModal.modal div.modal-dialog {width: calc(100% - 20px) !important;}
}