/* Minification failed. Returning unminified contents. (2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (23,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (54,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (71,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (75,25): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (83,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (94,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (104,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (109,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (207,31): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (210,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (211,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (250,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (264,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (265,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (275,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (349,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (352,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (353,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (370,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (413,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (414,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (430,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (434,35): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (469,25): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (509,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (510,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (514,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (515,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (532,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (533,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (538,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (539,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (545,29): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (546,30): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (551,29): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (552,30): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (556,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointAlternateRow' (609,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (623,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (628,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (638,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (645,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (646,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (669,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (683,22): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (693,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (697,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (715,19): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (743,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (744,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (766,22): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (803,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (804,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (820,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (828,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (829,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (848,22): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (850,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (879,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (902,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (907,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (912,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (998,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1003,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1110,36): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1115,36): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1122,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (1126,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (1274,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (1275,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (1360,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1431,31): run-time error CSS1039: Token not allowed after unary operator: '-MotorpointBlue' (1471,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (1514,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (1515,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (1527,18): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1538,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (1549,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (1568,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (1569,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (1774,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (1783,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointRow' (1787,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointAlternateRow' (1828,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledBackground' (1832,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (1836,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledText' (1840,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledBackground' (1942,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (1950,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointRow' (1954,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointAlternateRow' (1967,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (1968,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (1972,21): run-time error CSS1039: Token not allowed after unary operator: '-morotpointLightText' (1983,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (2103,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2107,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2119,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (2139,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (2162,22): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (2165,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2170,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2179,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2192,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2193,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2201,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2202,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2208,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (2209,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (2213,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2228,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointRow' (2232,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointAlternateRow' (2236,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDarkText' (2255,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2256,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2260,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (2272,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledText' (2273,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledBackground' (2274,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointDisabledText' (2576,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2577,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2732,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2737,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (2742,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2743,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2748,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (2763,36): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2772,33): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2791,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2800,31): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2805,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2806,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2811,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (2846,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2855,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (2856,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointPaleBlue' (2867,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (2868,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointErrorPale' (2896,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2913,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (2914,21): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2977,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2981,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (2987,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (2988,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (2992,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrangeHover' (2996,31): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3001,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3006,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (3007,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (3008,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3013,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBackground' (3026,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (3027,31): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (3031,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointButtonBorder' (3037,24): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3128,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointSuccess' (3134,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (3139,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3145,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointBlue' (3151,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (3157,32): run-time error CSS1039: Token not allowed after unary operator: '-motorpointSuccess' (3170,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (3174,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' (3199,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointOrange' (3201,17): run-time error CSS1039: Token not allowed after unary operator: '-motorpointLightText' (3208,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointSuccess' (3213,28): run-time error CSS1039: Token not allowed after unary operator: '-motorpointError' */ :root { --motorpointBlue: #00559e; --motorpointPaleBlue: #d1ecf1; --motorpointOrange: #f48120; --motorpointOrangeHover: #b36b00; --motorpointBackground: #f7f7f7; --motorpointDisabledBackground: #eeeeee; --motorpointDarkText: #000000; --motorpointDisabledText: #999999; --motorpointLightText: #ffffff; --motorpointError: #b22222; --motorpointErrorPale: #f8d7da; --motorpointSuccess: #1b8a00; --motorpointRow: #fcf0ea; --motorpointAlternateRow: #f9f9f9; --motorpointButtonBorder: #888888; } body, .panel-body { background-color: var(--motorpointBackground); font-size: 16px; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; color: var(--motorpointDarkText); } .container { min-width: 331px; overflow: hidden; } .mp-header-body-content { min-height: 100%; margin-bottom: -130px; } .mp-header-body-content:after { content: ""; display: block; } #mp-body-content { overflow: hidden; } form { margin: 0px; } .btn { border-radius: 0px !important; } hr { border-color: var(--motorpointBlue); } hr.mp-after-title { margin-top: 0px; } p { margin-bottom: 12px; line-height: 1; } div#mp-body-content ul { list-style-type: disc; } div#mp-body-content ul > li { color: var(--motorpointOrange); } div#mp-body-content ul > li > span { color: var(--motorpointDarkText); } div#mp-body-content ul > li.mp-select { line-height: 34px; } h1, h2, h3, h4 { color: var(--motorpointBlue); clear: both; } h1 { font-size: 26px; padding-bottom: 4px; margin-bottom: 20px !important; } h3 { border-top-color: var(--motorpointBlue); border-top-style: solid; border-top-width: 1px; padding-top: 4px; font-size: 16px; margin-top: 20px; margin-bottom: 20px; } a { color: var(--motorpointOrange); font-weight: bold; } a:hover { color: var(--motorpointOrangeHover); } .alert { border-width: 2px !important; border-radius: 0px; padding: 5px; padding-left: 40px; min-height: 40px; overflow: auto; } .alert-danger, .alert-info, .alert-success, .alert-warning { background-position-x: 3px; background-position-y: center; background-repeat: no-repeat; } .alert-danger { background-image: url("../Content/template-images/motorpointiconerror.png"); } .alert-info { background-image: url("../Content/template-images/motorpointiconinfo.png"); } .alert-success { background-image: url("../Content/template-images/motorpointiconsuccess.png") } .alert-warning { background-image: url("../Content/template-images/motorpointiconwarning.png"); } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { body { font-size: 20px; } .container { width: 100%; max-width: 100%; padding: 0px; } #mp-body-content { margin: 0px 15px; } .alert { padding-left: 50px; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { body, .panel-body { font-size: 14px; } .mp-header-body-content { min-height: 100%; margin-bottom: -100px; } h1 { font-size: 22px; margin-bottom: 10px !important; } h3 { margin-top: 14px; margin-bottom: 14px; } } header#mp-page-header { border-bottom-color: var(--motorpointOrange); border-bottom-width: 4px; border-bottom-style: solid; background-color: var(--motorpointBlue) !important; color: var(--motorpointLightText); padding: 10px; margin-bottom: 20px; overflow: hidden; } div#mp-app-title-area { float: left; margin-right: 5px; } div#mp-header-logo { float: left; } #mp-header-logo img { height: 60px; margin: 10px; } div#mp-app-name { float: left; font-size: 26px; margin-left: 10px; } div#mp-menu-container { overflow: hidden; min-width: 250px; } header#mp-page-header .row { margin: 10px 0px 0px 0px; font-size: 24px; font-weight: normal; } header#mp-page-header a { color: var(--motorpointLightText); font-weight: bold; background-color: transparent; border: 0; } .mp-menu-form { float: right; } .mp-menu-button { padding: 10px; margin-left: 10px; margin-bottom: 10px; background-color: var(--motorpointOrange); color: var(--motorpointLightText); font-weight: bold; text-align: center; border-style: solid; border-color: #888888; border-width: 2px; font-size: 12px; } .mp-menu-button:hover, .mp-menu-button:active { background-color: var(--motorpointOrangeHover); } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { .mp-menu-button { padding: 15px 5px; font-size: 16px; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media (max-width: 800px) { div#mp-app-name { float: none; font-size: 24px; margin-left: 0px; } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { header#mp-page-header { padding: 5px; margin-bottom: 10px; } header#mp-page-header img { height: 30px; } header#mp-page-header h1 { margin-top: 5px; font-size: 12px; } div#mp-app-title-area { float: left; margin-right: 5px; } div#mp-app-name { float: none; font-size: 14px; margin-left: 0px; } .mp-menu-button { padding: 5px; margin-bottom: 5px; margin-left: 5px; font-size: 12px; } } footer#mp-page-footer { border-top-color: var(--motorpointOrange); border-top-width: 4px; border-top-style: solid; background-color: var(--motorpointBlue) !important; color: var(--motorpointLightText); padding: 10px; margin-top: 20px; overflow: hidden; font-size: 12px; font-style: italic; } footer#mp-page-footer div { float: left; } footer#mp-page-footer, .mp-header-body-content:after { height: 110px; } .hidden-footer { color: var(--motorpointBlue); } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { footer#mp-page-footer { border-top-width: 5px; padding: 5px; } footer#mp-page-footer div { float: left; font-size: 10px; width: calc(100% - 185px); } footer#mp-page-footer, .mp-header-body-content:after { height: 90px; margin-top: 10px; } } #mp-modal-loading, #mp-message-dialog, #damage-section-modal { position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ); } #mp-modal-loading { background: rgba( 255, 255, 255, .8 ) url("../Content/template-images/motorpointloading.gif") 50% 50% no-repeat; } #mp-message-dialog div { background-color: var(--motorpointBlue) !important; color: var(--motorpointLightText); } #mp-dialog-contents { width: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; padding-bottom: 0px; } #mp-dialog-contents h3 { margin-top: 0px; margin-bottom: 20px; color: var(--motorpointLightText); padding-bottom: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--motorpointLightText); } #mp-dialog-contents p { margin: 10px } #mp-dialog-message { max-height: 400px; overflow: auto; } .mp-dialog-indent, .mp-dialog-double-indent { font-size: 12px !important; } .mp-dialog-indent { padding-left: 15px; } .mp-dialog-double-indent { padding-left: 30px; } #mp-dialog-buttons { width: 480px; text-align: right; padding: 0px; padding-top: 10px; padding-bottom: 10px; margin: 0px; margin-top: 10px; border-top-style: solid; border-top-width: 2px; border-bottom: var(--motorpointLightText); } .hide { display: none; } .show { display: block; } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { #mp-dialog-contents { width: 280px; } #mp-dialog-buttons { width: 260px; } #mp-dialog-message { max-height: 300px; } } .mp-table-wrapper { overflow-x: auto; } .mp-table { font-size: 12px; display: table; } .mp-table-blue tr.mp-table-header { background-color: var(--motorpointBlue) !important; color: var(--motorpointLightText); } .mp-table-orange tr.mp-table-header { background-color: var(--motorpointOrange) !important; color: var(--motorpointLightText); } .mp-table th, td, td input, td select { vertical-align: middle !important; } .mp-table th { height: 40px; max-height: 40px; vertical-align: middle; padding: 0px; } .mp-table-blue tr { background-color: var(--motorpointLightText); border-color: var(--motorpointBlue); border-style: solid; } .mp-table-orange tr { background-color: var(--motorpointLightText); border-color: var(--motorpointOrange); border-style: solid; } .mp-table-blue td { padding: 5px; border-left-color: var(--motorpointBlue); border-right-color: var(--motorpointBlue); } .mp-table-orange td { padding: 5px; border-left-color: var(--motorpointOrange); border-right-color: var(--motorpointOrange); } .mp-table .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--motorpointAlternateRow); } .mp-table-header { text-align: center; vertical-align: middle; font-size: 12px !important; } thead .mp-table-number-narrow { font-size: 11px !important; } .mp-table-number-narrow { width: 40px; max-width: 40px; text-align: center; } .mp-table-number { min-width: 70px; width: 70px; max-width: 70px; text-align: center; } .mp-table-registration { min-width: 90px; width: 90px; max-width: 90px; text-align: center; } .mp-table-money { min-width: 80px; width: 80px; max-width: 80px; text-align: center; } .mp-table-date { min-width: 80px; width: 80px; max-width: 80px; text-align: center; } .mp-table-checkbox { width: 70px; max-width: 70px; text-align: center; } .mp-label, .mp-label-checkbox { color: var(--motorpointBlue); } .mp-label { margin-right: 10px; vertical-align: middle; line-height: 34px; float: right; } .mp-button { margin: 0; border-style: solid !important; border-width: 2px !important; border-color: var(--motorpointButtonBorder) !important; } .mp-button:hover, .mp-button:active { border-width: 2px !important; border-color: var(--motorpointButtonBorder) !important; } .mp-input, .input-group-addon, .panel-body, input[type=submit], .alert, .btn { border-radius: 0; border-style: solid; } .mp-input, .input-group-addon, .panel-heading, .panel-body { border-width: 2px; border-color: var(--motorpointBlue) !important; padding: 2px; padding-left: 5px; padding-right: 5px; } .input-group-addon, .panel-heading { background-color: var(--motorpointBlue) !important; color: var(--motorpointLightText) !important; } .mp-currency-addon { width: 28px; padding-left: 8px; font-weight: bold; } .mp-input-currency { width: 140px; } .mp-input-date { width: 165px; } .mp-input-fullwidth { width: 100% !important; } .mp-chars-remaining { margin-left: 10px; color: var(--motorpointOrange); font-weight: bold; } /* LARGE CHECK BOX */ .mp-checkbox-large { visibility: hidden; position: absolute; } .mp-checkbox-label { cursor: pointer; background: var(--motorpointLightText); margin: 0; margin-right: 10px; display: inline-block; } .mp-checkbox-large + .mp-checkbox-label { vertical-align: top; font-weight: bolder; text-align: center; border: 2px solid var(--motorpointBlue); display: inline-block; font: 30px sans-serif; line-height: 32px; color: var(--motorpointBlue); height: 34px; padding: 0; width: 34px; } .mp-checkbox-large + .mp-checkbox-label:before { content: "\00a0"; } .mp-checkbox-large:checked + .mp-checkbox-label:before { content: "\2713"; } .mp-checkbox-large:checked + .mp-checkbox-label:after { font-weight: bold; } .mp-checkbox-large:focus + .mp-checkbox-label::before { outline: var(--motorpointBlue); } /* END OF LARGE CHECKBOX */ /* RADIO BUTTONS */ .mp-radio-label { display: block; position: relative; cursor: pointer; padding-left: 40px; margin: 0; margin-bottom: 5px; line-height: 34px; } .mp-radio-label .mp-radio-button { position: absolute; opacity: 0; } .mp-radio-switch { position: absolute; top: 0; left: 0; height: 34px; width: 34px; background-color: var(--motorpointLightText); border-color: var(--motorpointBlue); border-style: solid; border-width: 2px; border-radius: 50%; } .mp-radio-switch:after { content: ""; position: absolute; display: none; } .mp-radio-label .mp-radio-button:checked ~ .mp-radio-switch:after { display: block; } .mp-radio-label .mp-radio-switch:after { top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--motorpointBlue); } /* END OF RADIO BUTTONS */ .mp-toggle-offtext, .mp-toggle-twoway-ontext, .mp-toggle-ontext { line-height: 34px; vertical-align: middle; float: left; margin-bottom: 0px; } .mp-toggle-offtext { text-align: right; } /* TWO WAY TOGGLE */ .mp-toggle-twoway-container { position: relative; width: 68px; height: 34px; margin-right: 10px; margin-bottom: 0px; float: left; } .mp-toggle-twoway-container .mp-toggle-twoway { display: none; } .mp-toggle-twoway-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--motorpointLightText); border-color: var(--motorpointBlue); border-style: solid; border-width: 2px; -webkit-transition: .2s; -o-transition: .2s; -moz-transition: .2s; transition: .2s; } .mp-toggle-twoway-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 2px; bottom: 2px; background-color: var(--motorpointBlue); -webkit-transition: .2s; -o-transition: .2s; -moz-transition: .2s; transition: .2s; } .mp-toggle-twoway:checked + .mp-toggle-twoway-slider { background-color: var(--motorpointLightText); border-color: var(--motorpointBlue); border-style: solid; border-width: 2px; } .mp-toggle-twoway:checked + .mp-toggle-twoway-slider:before { -webkit-transform: translateX(34px); -ms-transform: translateX(34px); -o-transform: translateX(34px); -moz-transform: translateX(34px); transform: translateX(34px); } /* END OF TWO WAY TOGGLE */ /* THREE WAY TOGGLE */ .mp-toggle-threeway-container { background: var(--motorpointLightText); border-style: solid; border-color: var(--motorpointBlue); border-width: 2px; position: relative; overflow: hidden; padding: 0 !important; width: 96px; height: 34px; margin-right: 10px; float: left; } .mp-toggle-threeway-container > * { float: left; } .mp-toggle-threeway-container input[type=radio] { display: none; } .mp-toggle-threeway-label { width: 31px; height: 30px; } .mp-toggle-threeway-label-na { margin-left: 1px; margin-right: 1px; width: 28px; color: var(--motorpointOrange); font-weight: bold; vertical-align:middle; line-height: 30px; position: relative; z-index: 999; } .mp-toggle-threeway-slider { width: 26px; height: 26px; top: 2px; position: absolute; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; z-index: 1; } .mp-toggle-no:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 3px; } .mp-toggle-na:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 32px; } .mp-toggle-yes:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 63px; } /* END OF THREE WAY TOGGLE */ /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { .mp-label { line-height: 64px; } .mp-input { padding: 15px 5px; } /* LARGE CHECK BOX */ .mp-checkbox-large + .mp-checkbox-label { font: 30px sans-serif; line-height: 62px; height: 64px; padding: 0; width: 64px; } /* END OF LARGE CHECKBOX */ /* TWO WAY TOGGLE */ .mp-toggle-twoway-container { width: 128px; height: 64px; } .mp-toggle-twoway-slider:before { height: 56px; width: 56px; } .mp-toggle-twoway:checked + .mp-toggle-twoway-slider:before { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); -o-transform: translateX(64px); -moz-transform: translateX(64px); transform: translateX(64px); } /* END OF TWO WAY TOGGLE*/ /* THREE WAY TOGGLE */ .mp-toggle-threeway-container { width: 190px; height: 64px; } .mp-toggle-threeway-label { width: 72px; height: 60px; } .mp-toggle-threeway-label-na { width: 40px; text-align: center; line-height: 60px; vertical-align: middle; } .mp-toggle-threeway-slider { width: 56px; height: 56px; } .mp-toggle-no:checked ~ .mp-toggle-threeway-slider { left: 2px; } .mp-toggle-na:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 64px; } .mp-toggle-yes:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 128px; } /* END OF THREE WAY TOGGLE */ } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media(max-width: 800px) { .mp-input { width: 100px; } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { .form-group { margin-bottom: 0; } .mp-label { float: left; line-height: 34px; } .mp-input { padding: 10px 5px; } /* LARGE CHECK BOX */ .mp-checkbox-large + .mp-checkbox-label { font: 30px sans-serif; line-height: 32px; height: 34px; padding: 0; width: 34px; } /* END OF LARGE CHECKBOX */ /* TWO WAY TOGGLE */ .mp-toggle-twoway-container { width: 68px; height: 34px; } .mp-toggle-twoway-slider:before { height: 26px; width: 26px; } .mp-toggle-twoway:checked + .mp-toggle-twoway-slider:before { -webkit-transform: translateX(34px); -ms-transform: translateX(34px); -o-transform: translateX(34px); -moz-transform: translateX(34px); transform: translateX(34px); } /* END OF TWO WAY TOGGLE*/ /* THREE WAY TOGGLE */ .mp-toggle-threeway-container { width: 96px; height: 34px; } .mp-toggle-threeway-label { width: 31px; height: 30px; } .mp-toggle-threeway-label-na { width: 28px; text-align: center; line-height: 30px; vertical-align: middle; } .mp-toggle-threeway-slider { width: 26px; height: 26px; } .mp-toggle-no:checked ~ .mp-toggle-threeway-slider { left: 3px; } .mp-toggle-na:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 32px; } .mp-toggle-yes:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointBlue); left: 63px; } /* END OF THREE WAY TOGGLE*/ } .mp-validation-error { border-color: var(--motorpointError) !important; } .mp-currency-addon.mp-validation-error { background-color: var(--motorpointError) !important } div.mp-login-label-container { float: left; } div.mp-login-label-container label { width: 100px; text-align: right; } .mp-input-login { width: 300px; } .mp-login-button { width: 100px; margin-top: -4px; margin-left: 10px; padding: 2px 0px; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { div.mp-login-label-container label { width: 120px; line-height: 60px; vertical-align: middle; } .mp-input-login, .mp-login-button { padding: 15px 5px; } .mp-input-login { width: 400px; } .mp-login-button { font-size: 20px; width: 200px; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media (max-width: 800px) { div.mp-login-label-container { text-align: left; margin-bottom: -10px; width: 100%; } div.mp-login-label-container label { line-height: 40px; vertical-align: middle; text-align: left; width: 100%; padding-left: 10px; } .mp-input-login { padding: 10px 5px; width: 100%; } .mp-login-button { margin-top: 20px; width: 200px; float: right; padding: 15px 5px; height: auto; } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { div.mp-login-label-container { text-align: left; margin-bottom: -10px; } div.mp-login-label-container label { text-align: left; padding-left: 0; } .mp-input-login { width: 100%; } .mp-login-button { margin-top: 10px; margin-left: 0px; width: 100%; padding: 5px; } } .mp-main-menu-button { width: 100%; margin: 0px; font-size: 16px; margin-top: 10px; margin-bottom: 10px; } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { .mp-main-menu-button { margin-top: 5px; margin-bottom: 5px; } } #offlineIndicatorBottom, #offlineIndicatorTop { position: fixed; z-index: -100; width: 100%; padding: 5px; opacity: 0.8; background-color: var(--motorpointError); color: var(--motorpointLightText); text-align: center; font-weight: bold; } #offlineIndicatorBottom { bottom: 0px; left: 0px; } #offlineIndicatorTop { top: 0px; left: 0px; } .showOffline { animation: offlineIndicator 2s 1; -webkit-animation: offlineIndicator 2s 1; animation-fill-mode: forwards; animation-delay: 0s; -webkit-animation-delay: 0s; -webkit-animation-fill-mode: forwards; } @keyframes offlineIndicator { 0% { opacity: 0; z-index: 100; } 25% { opacity: 1; z-index: 100; } 75% { opacity: 1; z-index: 100; } 100% { opacity: 0; z-index: -100; } } @-webkit-keyframes offlineIndicator { 0% { opacity: 0; z-index: 100; } 25% { opacity: 1; z-index: 100; } 75% { opacity: 1; z-index: 100; } 100% { opacity: 0; z-index: 0; } } h3.px-no-top-border { border-top: 0; margin-top: 0; } .px-spacer { margin-top: 30px; } #quote-detail-content { padding: 10px; } .search-label { display: block; line-height: 34px; float: left; font-weight: bold; color: var(--motorpointBlue); width: 100px; } .search-container { margin-top: 20px; overflow: hidden; } .search-block { overflow: hidden; clear: both; margin-bottom: 20px; } .search-block .mp-label { width: 110px; } .search-block .mp-toggle-ontext { width: auto; } .search-toggle-container { float: left; } .px-label-container { float: left; width: 220px; } .px-label-container label { text-align: right; } .px-button-small { width: 140px; margin-top: 0; } .px-button { margin-left: 10px; } .px-button-halfwidth-left, .px-button-halfwidth-right { width: calc(50% - 5px); width: -moz-calc(50% - 5px); width: -webkit-calc(50% - 5px); float: right; } .px-button-halfwidth-left { margin-left: 0; margin-right: 5px; } .px-button-halfwidth-right { margin-right: 0; margin-left: 5px; } .px-button-fullwidth { width: 100%; margin-left: 0; } .px-border-bottom { padding-top: 10px; padding-bottom: 10px; border-bottom-style: solid; border-bottom-color: var(--MotorpointBlue); border-bottom-width: 1px; overflow: hidden; } .px-quote-header-block { float: left; display: block; margin-right: 10px; } .px-details { overflow: auto; } .px-details-block { float: left; vertical-align: middle; min-width: 250px; } .px-details-block label { min-width: 100px; text-align: right; margin: 0; margin-top: 1px; padding-right: 10px; line-height: normal; float: left; } .detail-span { font-weight: bold; } .pxAppraisalSummaryPanel { font-size: 12px; width: calc(100% - 20px); background-color: gainsboro; border: solid 2px var(--motorpointButtonBorder); padding: 10px 5px 0 5px; margin-top: 10px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; } .pxAppraisalSummaryDetailsBlock { float: left; } .pxAppraisalSummaryDetailsLabelBlock { float: left; width: 150px; } .pxAppraisalSummaryDetailsLabel, .pxAppraisalSummaryDetailsSpan { line-height: normal; } .pxAppraisalSummaryDetailsLabel { text-align: right; } .pxAppraisalSummaryDetailsSpan { font-weight: bold; width: 350px; display: block; } .pxAppraisalSummaryPanelButtonIndicator { height: 32px; width: 32px; background-color: teal; padding-left: 2px; position: absolute; right: 10px; top: 50%; transform: translate(0px, -50%); font-size: 30px; border-radius: 32px; border: solid 2px var(--motorpointButtonBorder); color: var(--motorpointLightText); line-height: 20px; vertical-align: middle; font-weight: bold; text-align: center; } .px-information-text { margin: 10px 44px; } .summary-table td img { border: var(--motorpointBlue) solid 4px; width: 200px; margin: 5px; float: left; } #px-details-back-form { margin-bottom: 20px; } .vehicle-header { color: var(--motorpointBlue); font-weight: bold; display: block; } .pxvehicle-search-wrapper { width: 100%; } .pxvehicle-search-panel { width: 100%; border: 2px solid var(--motorpointButtonBorder); background-color: gainsboro; padding: 10px; padding-right: 40px; position: relative; margin-bottom: 20px; } .panel-button-indicator { height: 32px; width: 32px; background-color: teal; padding-left: 2px; position: absolute; right: 10px; top: 50%; transform: translate(0px, -50%); font-size: 30px; border-radius: 32px; border: solid 2px var(--motorpointButtonBorder); color: var(--motorpointLightText); line-height: 25px; vertical-align: middle; font-weight: bold; text-align: center; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { .search-label { width: 120px; line-height: 64px; } .search-block .mp-label { width: 140px; } .px-label-container { width: 270px; } .px-button { padding: 15px 5px; font-size: 20px; } .px-information-text { margin: 10px 50px; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media (max-width: 800px) { .px-details-block { width: 100%; } .px-details-block label { width: 150px; } .px-quote-search { width: calc(100% - 297px); width: -moz-calc(100% - 297px); width: -webkit-calc(100% - 297px); } .px-button-halfwidth-left, .px-button-halfwidth-right { width: 100%; margin: 0px; min-width: 0px; } .px-button-halfwidth-right { margin-bottom: 10px } } @media (max-width: 695px) { .px-label-container { width: 150px; } .px-label-container .mp-label { float: left; } input.px-button, input.px-button-fullwidth, .px-button-halfwidth-left, .px-button-halfwidth-right { width: 100%; margin-left: 0; margin-right: 0; } .px-button-small { width: 200px !important; float: right !important; } .px-indent-content { width: 100%; } } @media (max-width: 560px) { .search-block { overflow: hidden; width: 100%; margin-left: 26px; } .px-label-container { width: 170px; } .px-quote-search { width: calc(100% - 170px); width: -moz-calc(100% - 170px); width: -webkit-calc(100% - 170px); } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { .px-button { padding: 5px; } div .px-spacer { margin-top: 20px; } div.px-indent-content { margin-left: 0; margin-right: 0; width: 100%; } div.px-label-container { text-align: left; margin-bottom: -10px; } div.px-label-container label { float: left; } input.px-quote-search { width: 100%; } input.px-button, input.px-button-fullwidth, .px-button-halfwidth-left, .px-button-halfwidth-right { width: 100%; margin-top: 10px; margin-left: 0; margin-right: 0; padding: 5px; } .px-quote-header-block { padding: 2px; } .px-details-block { width: 100%; padding: 2px; line-height: normal; } .px-details-block label { width: 100px; text-align: right; margin: 0; padding: 0; padding-right: 10px; line-height: normal; vertical-align: middle; } .detail-span { display: block; text-indent: 0px; margin-left: 100px; } .search-label { width: 75px; line-height: 34px; } .search-block .mp-label { width: 100px; } .search-container { margin-top: 5px; } .px-information-text { margin: 10px 42px; } } .px-appraisal-bar { width: 100%; color: var(--motorpointDarkText); margin-bottom: 5px; overflow: hidden; height: fit-content; display: table; position: relative; } .px-appraisal-bar:nth-child(odd) { background-color: var(--motorpointRow); } .px-appraisal-bar:nth-child(even) { background-color: var(--motorpointAlternateRow); } .px-item-toggle-border, .px-collections-confirm { display: table; } .px-appraisal-bar p, .middle-wrap { display: table-cell; vertical-align: middle; text-align: left; } .px-appraisal-bar input { line-height: 25px; } .px-appraisal-items-collections-confirm, .px-extras-collections-confirm { margin: 0px; float: right; padding: 3px; padding-right: 0; padding-left: 10px; width: 130px; } .px-item-toggle-border { margin-right: 10px; padding: 3px; padding-left: 10px; padding-right: 0px; width: 190px; height: 100%; float: left; } .px-item-toggle-border input[type='number'], .px-item-toggle-border input[type='text'], .px-item-toggle-border select { width: 167px; } .px-item-disabled:nth-child(odd), .px-item-disabled:nth-child(even) { background-color: var(--motorpointDisabledBackground); } .px-item-disabled input, .px-item-disabled select, .px-item-disabled .mp-toggle-threeway-container, .px-item-disabled .mp-toggle-twoway-slider, .px-item-disabled .mp-checkbox-label { border-color: var(--motorpointButtonBorder) !important; } .px-item-disabled, .px-item-disabled label, .px-item-disabled .mp-checkbox-large + .mp-checkbox-label { color: var(--motorpointDisabledText); } .px-item-disabled .mp-toggle-twoway-slider:before, .px-item-disabled .mp-toggle-no:checked ~ .mp-toggle-threeway-slider, .px-item-disabled .mp-toggle-na:checked ~ .mp-toggle-threeway-slider, .px-item-disabled .mp-toggle-yes:checked ~ .mp-toggle-threeway-slider { background-color: var(--motorpointDisabledBackground); } @media (max-width: 1050px) { .px-appraisal-bar { line-height: 70px; } .px-appraisal-bar input { line-height: normal; } .px-appraisal-bar input[type='number'], .px-appraisal-bar input[type='text'], .px-appraisal-bar select { width: 285px; } .px-item-toggle-border { width: 310px; float: left; } .px-appraisal-items-collections-confirm, .px-extras-collections-confirm { width: 100px; } .px-collections-confirm { width: 100px; margin: 0px; float: right; padding: 3px; padding-right: 0; padding-left: 10px; width: auto; } .px-collections-confirm .middle-wrap { margin-left: auto; margin-right: auto; } .px-collections-confirm .middle-wrap .mp-checkbox-label { margin: 5px 0px 5px 12px; } .px-collections-confirm .middle-wrap .mp-label { line-height: normal; } .px-confirm-checkbox { margin-left: 7px; margin-top: 10px; } .px-appraisal-bar p { margin-right: 5px; float: left; } .px-appraisal-items-collections-confirm, .px-extras-collections-confirm { width: 100px; } } @media(max-width:800px) { .px-appraisal-bar input[type='number'], .px-appraisal-bar input[type='text'], .px-appraisal-bar select { width: 235px; margin-left: 40px; } } @media (max-width: 530px) { div.px-appraisal-bar { min-height: 52px; line-height: normal; overflow: hidden; } .px-appraisal-items-collections-confirm, .px-extras-collections-confirm { width: 70px; } .px-confirm-checkbox { margin-left: 12px; margin-top: 5px; } .px-item-toggle-border { width: auto; } .px-item-toggle-border input[type='number'], .px-item-toggle-border input[type='text'], .px-item-toggle-border select { width: 167px; margin-left: 30px; } } div.px-extra { width: 100%; height: 40px; color: var(--motorpointDarkText); margin-bottom: 5px; line-height: 40px; vertical-align: middle; overflow: hidden; } div.px-extra:nth-child(odd) { background-color: var(--motorpointRow); } div.px-extra:nth-child(even) { background-color: var(--motorpointAlternateRow); } div.px-extra-last { margin-bottom: 0px; } div.px-extra-toggle { margin-top: 3px; margin-left: 10px; } .extra-validation-error { background-color: var(--motorpointError) !important; color: var(--motorpointLightText) !important; } .extra-validation-error .mp-label { color: var(--morotpointLightText); } div.px-extra-toggle-border { margin-right: 10px; width: 190px; height: 100%; float: left; } .px-extra-label { color: var(--motorpointDarkText); font-weight: bold; } #refresh-cap-options { margin-top: 4px; margin-right: 10px; } .px-extras-collections-confirm { float: right; } .px-extra-description { float: left; line-height: 40px; vertical-align: middle; position: absolute; left: 200px; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { div .px-extra { height: fit-content; line-height: 70px; } div.px-extra-toggle-border { width: 310px; float: left; } .px-extra-description { line-height: normal; margin-top: 20px; min-width: 400px; left: 320px; } .px-confirm-label { line-height: 20px; } } @media (max-width: 800px) { .px-extra-description { line-height: normal; margin-bottom: 10px; min-width: 400px; float: unset; position: unset; left: unset; margin-left: 50px; margin-top: 10px; max-width: calc(100% - 160px); min-width: calc(100% - 160px); } } @media(max-width: 695px) { .px-extra-description { float: left; } } @media (max-width: 530px) { div.px-extra { min-height: 52px; height: fit-content; line-height: normal; overflow: hidden; } #refresh-cap-options { width: 96%; margin-left: 5px; margin-right: 5px; } div.px-extra-toggle-border { width: auto; } .px-extra-description { margin-top: 5px; margin-bottom: 5px; margin-left: 40px; max-width: calc(100% - 120px); min-width: calc(100% - 120px); } } #damage-toggle-container { width: 284px; margin-top: 15px; margin-bottom: 20px; margin-left: auto; margin-right: auto; overflow: hidden; } #damage-list-entries h4 { font-size: 16px; margin: 10px; } .damage-list { margin: 5px 0px; } #damage-list-footer { width: 100%; overflow: hidden; background-color: var(--motorpointBlue); } #damage-list-footer .px-extra-label { color: var(--motorpointLightText); } .mp-toggle-ontext { margin-right: 0px; } .damage-toggle-label { width: 98px; } .damage-count { color: var(--motorpointError); font-weight: bold; } #damage-squashed-frog-container { height: 381px; margin: 0 auto; margin-top: 20px; position: relative; width: 293px; text-align: center; } #damage-squashed-frog-exterior-container { height: 100%; position: absolute; width: 100%; } #damage-squashed-frog-interior-container { background-color: var(--motorpointBackground); height: 100%; position: absolute; width: 100%; z-index: 0; display: none; text-align: center; } #damage-squashed-frog-interior-container.visible { display: block; } #damage-section-modal { display: none; } #damage-section-content { position: absolute; width: 450px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--motorpointBackground); border-style: solid; border-width: 4px; border-color: var(--motorpointBlue); } #damage-section-header, #damage-section-footer { width: 100%; color: var(--motorpointLightText); text-align: center; padding: 10px; font-weight: bold; } #damage-section-header { margin-top: -3px; margin-bottom: 5px; background-color: var(--motorpointBlue); } #damage-section-options { max-height: 700px; overflow: auto; } #damage-section-footer { margin-top: 5px; margin-bottom: -1px; border-top-style: solid; border-top-width: 4px; border-top-color: var(--motorpointBlue); background-color: var(--motorpointOrange); } .damage-list-option-button { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); padding: 5px; padding-left: 20px; background-color: var(--motorpointOrange); color: var(--motorpointLightText); text-align: left; margin: 5px 10px; } .damage-list-option-button:hover, .damage-list-option-button:active, #damage-section-footer:hover, #damage-section-footer:active, .px-nav-button:hover, .px-nav-button:active { background-color: var(--motorpointOrangeHover); border-color: var(--motorpointOrangeHover); } #damage-section-footer:hover, #damage-section-footer:active { border-top-color: var(--motorpointBlue); } .damage-type-checkbox { margin-left: -15px; margin-right: 10px; } .damage-type { line-height: 34px; vertical-align: middle; border: 0; } .damage-type:nth-child(odd) { background-color: var(--motorpointRow); } .damage-type:nth-child(even) { background-color: var(--motorpointAlternateRow); } .damage-type label { color: var(--motorpointDarkText); } .other-type-label { padding-left: 35px; } .other-damage { margin-top: 10px; margin-left: -24px; width: 410px; } .damage-type-desc { margin-right: 5px; } .damage-take-photo-button { float: right; background-color: var(--motorpointOrange); color: var(--motorpointLightText); } .damage-take-photo-button:hover, .damage-take-photo-button:active { background-color: var(--motorpointOrangeHover) } .damage-photo-count-icon { height: 40px; width: 40px; margin-right: 5px; padding-top: 2px; border-style: solid; border-width: 2px; text-align: center; float: right; border-color: var(--motorpointDisabledText); background-color: var(--motorpointDisabledBackground); color: var(--motorpointDisabledText); } .damage-type-label { margin: 0; } /*Shared Sprite style*/ .sfSprite { background-image: url(../Content/damage-images/SquashedFrog_Sprite.png); background-repeat: no-repeat; display: block; position: absolute; } .sfWheel-Sprite { background-position: -20px -18px; height: 59px; width: 59px; } .sfWheel-Sprite:hover, .sfWheel-Sprite:active { background-position: -86px -18px; } /* Sprite specifics*/ .sfNSF-Sprite { background-position: -7px -89px; height: 95px; left: 60px; top: 0; width: 81px; } .sfNSF-Sprite:hover, .sfNSF-Sprite:active { background-position: -91px -89px; } .sfOSF-Sprite { background-position: -430px -89px; height: 95px; left: 151px; top: 0; width: 79px; } .sfOSF-Sprite:hover, .sfOSF-Sprite:active { background-position: -346px -89px; } .sfNSMF-Sprite { background-position: -7px -189px; height: 66px; left: 60px; top: 105px; width: 81px; } .sfNSMF-Sprite:hover, .sfNSMF-Sprite:active { background-position: -91px -189px; } .sfOSMF-Sprite { background-position: -430px -189px; height: 66px; left: 151px; top: 105px; width: 81px; } .sfOSMF-Sprite:hover, .sfOSMF-Sprite:active { background-position: -346px -189px; } .sfNSMR-Sprite { background-position: -91px -260px; height: 72px; left: 60px; top: 181px; width: 81px; } .sfNSMR-Sprite:hover, .sfNSMR-Sprite:active { background-position: -7px -260px; } .sfOSMR-Sprite { background-position: -430px -260px; height: 72px; left: 151px; top: 181px; width: 81px; } .sfOSMR-Sprite:hover, .sfOSMR-Sprite:active { background-position: -346px -260px; } .sfNSR-Sprite { background-position: -5px -339px; height: 130px; left: 60px; top: 243px; width: 82px; } .sfNSR-Sprite:hover, .sfNSR-Sprite:active { background-position: -89px -339px; } .sfOSR-Sprite { background-position: -430px -339px; height: 138px; left: 152px; top: 243px; width: 82px; } .sfOSR-Sprite:hover, .sfOSR-Sprite:active { background-position: -345px -339px; } .sfNSFW-Sprite { left: 0; top: 60px; } .sfOSFW-Sprite { left: 234px; top: 60px; } .sfNSRW-Sprite { left: 0; top: 262px; } .sfOSRW-Sprite { left: 234px; top: 262px; } .sfDash-Sprite { background-position: -532px -121px; height: 96px; left: 72px; top: 51px; width: 147px; } .sfDash-Sprite:hover, .sfDash-Sprite:active { background-position: -532px -20px; } .sfPSFSeat-Sprite { background-position: -700px -100px; height: 72px; left: 58px; top: 117px; width: 74px; } .sfPSFSeat-Sprite:hover, .sfPSFSeat-Sprite:active { background-position: -700px -21px; } .sfDSFSeat-Sprite { background-position: -779px -100px; height: 72px; left: 155px; top: 117px; width: 79px; } .sfDSFSeat-Sprite:hover, .sfDSFSeat-Sprite:active { background-position: -779px -21px; } .sfPSRSeat-Sprite { background-position: -697px -333px; height: 66px; left: 55px; top: 199px; width: 77px; } .sfPSRSeat-Sprite:hover, .sfPSRSeat-Sprite:active { background-position: -697px -259px; } .sfDSRSeat-Sprite { background-position: -779px -333px; height: 66px; left: 155px; top: 199px; width: 83px; } .sfDSRSeat-Sprite:hover, .sfDSRSeat-Sprite:active { background-position: -779px -259px; } .sfParcel-Sprite { background-position: -526px -378px; height: 45px; left: 67px; top: 270px; width: 160px; } .sfParcel-Sprite:hover, .sfParcel-Sprite:active { background-position: -526px -327px; } #OSR.sqDamaged { background-position: -262px -339px; } #NSF.sqDamaged { background-position: -175px -90px; } #OSF.sqDamaged { background-position: -262px -89px; } #NSR.sqDamaged { background-position: -176px -339px; } #NSMF.sqDamaged { background-position: -175px -189px; } #OSMF.sqDamaged { background-position: -262px -189px; } #NSMR.sqDamaged { background-position: -174px -260px; } #OSMR.sqDamaged { background-position: -262px -259px; } .sfWheel-Sprite.sqDamaged { background-position: -153px -18px; } #DASH.sqDamaged { background-position: -532px -223px; } #PSF.sqDamaged { background-position: -700px -180px; } #DSF.sqDamaged { background-position: -779px -180px; } #PSR.sqDamaged { background-position: -697px -407px; } #DSR.sqDamaged { background-position: -779px -407px; } #BOOT.sqDamaged { background-position: -526px -428px; } .damageSprite { font-size: 10px; padding: 4px; border-radius: 5px; border: 1px solid; margin-left: 5px; float:right; } #damageContainer-screen { display: none; } .px-nav-button { background-color: var(--motorpointOrange); border-color: var(--motorpointOrange); } #damage-collection-confirm { margin-left: auto; margin-right: auto; padding-top: 4px; text-align: center; width: 177px; } #damage-collection-confirm .mp-checkbox-label { margin-right: 0 !important; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { #damage-section-options { max-height: 340px; } #damage-toggle-container { width: 450px; } .damage-toggle-label { width: 150px; } #damage-section-header, #damage-section-footer { padding: 15px 10px; } .damage-location { height: 64px; padding: 5px; } .damage-type { line-height: 62px; } .damage-list-option-button { display: flex; align-items: center; } .damage-list-option-button .damage-type-desc { margin-right: auto; } #damage-collection-confirm { width: 270px; } .damage-take-photo-button { height: 63px; } .damage-photo-count-icon { height: 63px; } .other-type-label { padding-left: 70px; } .other-damage { margin-top: 15px; margin-left: -24px; width: 395px; padding-top: 5px; line-height: normal; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media (max-width: 800px) { #damage-section-options { max-height: 650px; } .other-damage { width: 410px; } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { #damage-section-content { max-width: 320px; } #damage-section-options { max-height: 400px; } #damage-toggle-container { width: 280px; } #damage-collection-confirm { width: 180px; } .damage-type { line-height: 34px; } .damage-toggle-label { width: 95px; } .damage-take-photo-button { height: 40px; } .damage-photo-count-icon { height: 40px; clear: both; width: 106px; margin-top: 5px; margin-right: 0px; } .other-type-label { padding-left: 0px; margin-left: -15px; } .other-damage { width: 265px; } } .damage-photo-maincontainer { border-style: solid; border-width: 4px; border-color: var(--motorpointBlue); margin-bottom: 5px; } .photo-container-validation-error { border-color: var(--motorpointError); } .damage-photo-header { padding: 5px; background-color: var(--motorpointBlue); color: var(--motorpointLightText); overflow: hidden; } .photo-header-validation-error { background-color: var(--motorpointError) !important; } .damage-photo-title { width: calc(100% - 40px); width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); float: left; } .px-accordion-open { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid var(--motorpointLightText); float: right; } .px-accordion-closed { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid var(--motorpointLightText); float: right; } .damage-photo-container { float: left; min-width: 250px; margin: 10px; margin-bottom: 0px; } .damage-photo-block { margin-bottom: 10px; margin-right: 10px; min-width: 260px; overflow: visible; float: left; border-style: solid; border-width: 2px; border-color: var(--motorpointBlue); position: relative; } .damage-photo-buttons { padding: 5px; background-color: #d1ecf1; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--motorpointBlue); overflow: hidden; } .damage-photo-maincontainer input { background-color: var(--motorpointOrange); color: var(--motorpointLightText); font-size: 13px; font-weight: bold; border-style: solid; border-width: 2px; border-color: var(--motorpointButtonBorder); } .damage-photo-previewcontainer { height: 160px; padding: 5px; } .damage-photo-preview { max-height: 150px; margin-left: auto; margin-right: auto; position: relative; display: block !important; } .damage-photo-file { display: none; } .damage-photo-addbutton { display: block; width: calc(100% - 10px); width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); margin-left: auto; margin-right: auto; margin-bottom: 5px; } .damage-photo-upload-success, .damage-photo-upload-fail { height: 40px; width: 40px; border-style: solid; border-width: 4px; border-color: var(--motorpointBlue); position: absolute; bottom: -10px; right: -10px; vertical-align: middle; font-weight: bold; } .damage-photo-upload-success { color: var(--success); background-color: var(--motorpointPaleBlue); font-size: 38px; line-height: 30px; text-align: center; } .damage-photo-upload-success:before { content: '\2714'; } .damage-photo-upload-fail { color: var(--motorpointError); background-color: var(--motorpointErrorPale); font-size: 34px; line-height: 24px; text-align: right; } .damage-photo-upload-fail:before { content: '\2718'; } .damage-photo-upload-error { width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); position: absolute; top: 125px; left: 5px; max-height: 80px; transform: translateY(-50%); opacity: 0.95; font-size: 12px; } #damage-photos-container h4 { font-size: 16px; margin-bottom: 20px; } #damage-photos-container hr { border-color: var(--motorpointOrange); border-width: 5px; margin: 20px -20px; } #px-vehicle-unseen-container, #px-no-damage-container { text-align: left; margin-bottom: 10px; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { .damage-photo-header { padding: 15px 5px; background-color: var(--motorpointBlue); color: var(--motorpointLightText); } .damage-photo-maincontainer input { padding: 15px 5px; min-width: 120px; } .damage-photo-container { margin: 5px; margin-bottom: 0px; } .damage-photo-block { margin-bottom: 5px; margin-right: 5px; min-width: 250px; } .damage-photo-addbutton { padding: 15px 5px; font-size: 16px !important; } .px-accordion-open { border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 36px solid; } .px-accordion-closed { border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 36px solid; float: right; } } /* ************************ NARROW SCREEN OVERRIDES: ************************ */ @media (max-width: 530px) { .damage-photo-buttons { padding-top: 0px; padding-bottom: 0px; } .damage-photo-maincontainer { margin-bottom: 10px; } .damage-photo-maincontainer input { margin-top: 5px; margin-bottom: 5px; } } .px-tab, .px-tab-bottom { height: 40px; position: relative; float: left; width: 25%; background-color: var(--motorpointOrange); text-align: center; line-height: 34px; font-weight: bold; color: var(--motorpointLightText); vertical-align: middle; float: left; border-style: solid; border-width: 4px; border-color: var(--motorpointBackground); background-color: var(--motorpointOrange); } .px-tab:hover, .px-tab:active, .px-tab-bottom:hover, .px-tab-bottom:active { background-color: var(--motorpointOrangeHover); } .px-tab { border-bottom-color: var(--motorpointOrange); } .px-tab-bottom { border-top-color: var(--motorpointOrange); margin-bottom: 20px; } .active, .active-bottom { background-color: var(--motorpointBackground); color: var(--motorpointBlue); border-color: var(--motorpointOrange); } .active:hover, .active:active, .active-bottom:hover, .active-bottom:active { background-color: var(--motorpointBackground); } .active { border-bottom: 0; } .active-bottom { border-top: 0; } .tab-disabled { background-color: var(--motorpointButtonBorder); border-bottom-color: var(--motorpointButtonBorder); } .tab-disabled:hover, .tab-disabled:active { background-color: var(--motorpointButtonBorder); } #px-page-holder { border-style: solid; border-width: 4px; border-color: var(--motorpointOrange); border-top-style: none; border-bottom-style: none; padding: 20px 5px; position: relative; } .px-tab-group { width: 280px; overflow: hidden; float: left; } .px-tab-label-container { width: 80px; float: left; } /* ************************ FIRE LANDSCAPE SCREEN OVERRIDES: ************************ */ @media (max-width: 1050px) { .px-tab, .px-tab-bottom { height: auto; padding: 15px 5px; } .active { margin-top: 4px; } .px-tab-group { width: 360px; } .px-tab-label-container { width: 100px; } } /* ************************ FIRE PORTRAIT SCREEN OVERRIDES: ************************ */ @media (max-width: 800px) { .px-tab-group { width: auto; } .px-tab-label-container { width: auto; } } @media (max-width: 530px) { .px-tab-group { width: 100%; } .px-tab-group .mp-input { width: 100%; } } .hpi-summary { float: left; font-weight: bold; margin-right: 20px; } .hpi-summary span { font-weight: normal; } .hpi-accordion-container { margin-top: 20px; } .hpi-accordion-container .damage-photo-header { padding-left: 40px; background-image: url(../Content/damage-images/hpi-clear-100.png); background-repeat: no-repeat; background-position: 2px 4px; background-color: var(--motorpointSuccess); background-size: 26px 26px; } .hpi-accordion-container .hpi-header-stop { background-image: url(../Content/damage-images/hpi-stop-100.png); background-color: var(--motorpointError); } .hpi-accordion-container .hpi-header-warning { background-image: url(../Content/damage-images/hpi-stop-100.png); background-color: var(--motorpointOrange); } .hpi-accordion-container .hpi-plate-header { background-image: none; padding-left: 5px; background-color: var(--motorpointBlue); } .hpi-accordion-container .hpi-plate-header-stop { background-image: url(../Content/damage-images/hpi-stop-100.png); background-position: 2px 2px; background-color: var(--motorpointError); } .hpi-accordion-container .hpi-plate-header-clear { background-image: url(../Content/damage-images/hpi-clear-100.png); background-position: 2px 1px; background-color: var(--motorpointSuccess); } .hpi-accordion-container .damage-photo-accordion { padding: 0px 10px 10px 10px; font-size: 13px; } .hpi-accordion-container .px-details { margin-top: 10px; } .hpi-clear-text { color: var(--success); } .hpi-warning-text { color: var(--motorpointError); } #hpi-vehicle-platetransfers-content .hpi-accordion-container { margin: 10px 10px 0 10px; } #hpi-summary-container { margin: 20px 0; overflow: hidden; margin-left: auto; margin-right: auto; width: fit-content; } .hpi-summary-marker { float: left; margin: 5px; padding: 5px; height: 90px; width: 125px; background-repeat: no-repeat; background-size: 40px 40px; background-position: 50% 85%; top: 30px; background-color: var(--motorpointOrange); text-align: center; color: var(--motorpointLightText); font-weight: bold; font-size: 12px; } .hpi-summary-clear { background-image: url(../Content/damage-images/hpi-clear-100.png); background-color: var(--motorpointSuccess); } .hpi-summary-stop { background-image: url(../Content/damage-images/hpi-stop-100.png); background-color: var(--motorpointError); }