/* = Global Styles ============== */ @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700|Raleway:400,100,500,700,800|Montserrat:400,500,600,700); * {margin: 0; outline: none; padding: 0; text-decoration: none;} u { text-decoration:underline; } /* overflow hidden is correcting for a material glitch that causes a shift*/ body, html {height: 100%; overflow: hidden !important;} body {background-color: var(--color-background) !important; color: rgba(255, 255, 255, 1); font: normal 400 15px/24px 'Roboto', sans-serif normal;} ::-webkit-scrollbar {background-color: rgba(255, 255, 255, .1); height: 10px; width: 10px; -webkit-border-radius: 2px;} ::-webkit-scrollbar-thumb {background-color: rgba(110, 110, 110, .25); -webkit-border-radius: 2px;} ::selection {background-color: rgba(10, 145, 245, 1); color: rgba(255, 255, 255, 1);} @-webkit-keyframes drivePulse {0% {background-color: rgba(0, 0, 0, .1);} 100% {background-color: rgba(255, 255, 255, .1);}} @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:.25;} 100%{opacity:1;}} table {border-collapse: separate; border-spacing: 0px;} h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif; padding: 0;} h2 {font-size: 4em;} h3 {font-size: 3em;} h4 {font-size: 2em; font-weight: 100;} h5 {font-size: 13px;} p {margin: 0 0 20px;} p:last-of-type {margin-bottom: 0;} .clearfix:before, .clearfix:after {content: ""; display: table;} .clearfix:after {clear: both;} blockquote {border-left: 2px solid rgba(10, 145, 245, 1); color: rgba(120, 120, 120, 1); font-size: 22px; letter-spacing: .5px; line-height: 150%; margin: 0; padding: 0 0 0 10px; position: relative; text-transform: uppercase;} blockquote:before, blockquote:after {box-sizing: border-box; content: " ";} blockquote:before {} blockquote:after {} blockquote cite {display: block; font-size: 10px; font-style: normal;} blockquote cite > a {color: rgba(10, 145, 245, 1);} ol, ul {list-style: inside;} a {color: inherit;} a, button {cursor: pointer;} button {border-radius: 2px;} :active, :focus, :hover {} *.unselectable {-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;} .notransition {-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } *.degrees {font-family: Tahoma} /* = forms, labels and imputs ============== */ form {} .formgroup {} .formgroup > h4 {display: block; font-size: 16px; margin: 0 0 10px; width: 100%;} label {display: inline-block; margin: 0 10px 10px 0; vertical-align: middle;} label > button {border: 0px;} label > .formlabel {display: inline-block; font-weight: 500; height: 20px; line-height: 20px; max-width: 100%;} label > .formcontrol { border: 0px; border-radius: 4px; color: var(--color-text); display: block; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 400; height: 40px; line-height: inherit; padding: 0 10px; transition: 0.2s background linear; -webkit-transition: 0.2s background linear; -moz-transition: 0.2s background linear; width: calc(100% - 20px);} label > .formcontrol:disabled {background-color: var(--color-highlight-100);} label > .formcontrol.formcontrolNoShow {display: none;} label > .formcontrol.formcontrolChild {margin: 0;} label > .formcontrol.formcontrolSub {background-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .75); height: 25px} label > .formcontrol.formcontrolDark {background-color: rgba(35, 35, 35, .15); color: rgba(255, 255, 255, 1);} label > .formcontrol.formcontrolDark:focus, label > .formcontrol.formcontrolDark:hover {background-color: rgba(35, 35, 35, .75);} label > .formcontrol.validationerror {border: 0px; border-color: rgba(245, 65, 55, 1) !important; color: rgba(35, 35, 35, 1);} label > .formcontrol.formcontrolLite {background-color: rgba(255, 255, 255, .75); color: rgba(35, 35, 35, .75);} label > .formcontrol.formcontrolLite:focus, label > .formcontrol.formcontrolLite:hover {background-color: rgba(35, 35, 35, .15);} label > .formcontrol:focus {background-color: rgba(255, 255, 255, .15); color: inherit;} label > input[type=date]::-webkit-inner-spin-button {display: none; -webkit-appearance: none;} label md-switch.md-checked .md-bar {background-color: rgba(0, 175, 135, .5) !important;} label md-switch.md-checked .md-thumb {background-color: rgba(0, 175, 135, 1) !important;} label md-switch[disabled].md-checked .md-bar {background-color: rgba(0, 0, 0, 0.12) !important;} label md-switch[disabled].md-checked .md-thumb {background-color: rgb(189, 189, 189) !important;} /* Textarea */ label > textarea.formcontrol {height: auto; padding: 10px; resize: none; border: 0px;} /* Select */ label.select {position: relative;} label.select::before {bottom: 0; content: "\f0dd"; display: block; font-family: FontAwesome; font-size: 15px; height: 40px; line-height: 35px; position: absolute; right: 0; text-align: center; width: 30px; z-index: 2;} label.select > select {background: none; bottom: 0; color: transparent; height: 40px; left: 0; position: absolute; -webkit-appearance: none; width: calc(100% - 0px); z-index: 3;} label.select > select > optgroup {background-color: rgba(255, 255, 255, 1); color: rgba(35, 35, 35, 1); font-weight: 700;} label.select > select > option, label > select > optgroup > option {background-color: rgba(255, 255, 255, 1); color: rgba(35, 35, 35, 1); font-weight: 400;} label.select > .viewport {background-color: rgba(255, 255, 255, 1); border-radius: 3px; overflow: hidden; padding: 0 30px 0 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 42px); z-index: 1;} label.select > select:focus + .viewport {border-color: rgba(0, 175, 135, 1)} /* Select */ label > select.formcontrol {border: 0; -webkit-appearance: menulist; width: calc(100% - 0px);} label > select.formcontrol > optgroup {background-color: rgba(255, 255, 255, 1); color: rgba(35, 35, 35, 1); font-weight: 500;} label > select.formcontrol > option, label > select.formcontrol > optgroup > option {background-color: rgba(255, 255, 255, 1); color: rgba(35, 35, 35, 1); font-weight: 400;} /* Checkbox & Radio */ label.checkbox, label.radio {display: block; height: 100%; margin: 0; position: relative; width: 100%;} label.checkbox > .formcontrol, label.radio > .formcontrol {box-sizing: border-box; height: auto !important; line-height: normal; margin: 5px; position: absolute; padding: 0;} label.checkbox > .formlabel, label.radio > .formlabel {margin: 0 0 0 30px; line-height: 40px;} label .checkbox {color: rgba(255, 255, 255, 1) !important; float: left; height: 0px; left: 0px; margin: 0px; overflow: hidden; position: relative; top: 0; width: 40px !important;} label .checkbox::after {background-color: rgba(130, 130, 130, 1); border-radius: 2px; font-family: FontAwesome; content: "\f00d"; cursor: pointer; height: 40px; left: 0px; line-height: 40px; position: absolute; transition: all .1s ease-in-out !important; text-align: center; top: 0; vertical-align: middle; width: 40px;} label .checkbox:checked::after {background-color: rgba(5, 175, 135, 1); content: "\f00c";} /* Button */ label > .btn {cursor: pointer; display: block; height: 40px; margin: 25px 0 0; padding: 10px; position: relative;vertical-align: middle;} label > .btn:focus, label > .btn:hover {} .btn-sidebar-reset {margin: 10px 0 0 !important; width: 100%;} /* = Section Specific = drive ============== */ #drive {height: calc(100% - 0px); overflow: hidden; position: relative;} #driveWrapper {height: calc(100% - 0px);} /* = Section Specific = driveLoader ============== */ #driveLoader {background-color: rgba(238, 240, 244, 1); color: rgba(255, 255, 255, 1); display: none; height: calc(100% - 0px); position: absolute; width: calc(100% - 0px); z-index: 10;} .theme-dark #driveLoader {background-color: #202124;} .miniloader#driveLoader {height: calc(100% - 80px);} #driveLoader > .container {display: flex; height: 100%;} #driveLoader > .container > .row { margin: auto;} #driveLoader > .container > .row > div {clear: both; display: block; height: 300px; width: 300px;} #driveLoader > .container > .row > .driveLogo {background-color: rgba(10, 145, 245, 0);} #driveLoader > .container > .row > .driveLogo > h2 {display: block; float: left; height: 300px; width: 300px;} .miniloader#driveLoader > .container > .row > .driveLogo > h2 {height: 210px; width: 210px;} #driveLoader > .container > .row > .driveLogo > h2 > img {display: block; height: 100%; transition:all 1s ease-in-out; -webkit-animation:blink normal 2s infinite ease-in-out; width: 100%;} /* = Section Specific = driveHeader ============== */ #driveHeader { background-color: rgba(255, 255, 255, 1); color: rgba(45, 50, 60, 1); float: left; height: 60px; margin: 0px; position: relative; width: 100%; z-index: 3; border-bottom: rgba(0, 0, 0, 0.1) 1px solid; box-sizing: border-box; } .theme-dark #driveHeader { background-color: #131416; border-bottom: rgba(255, 255, 255, 0.1) 1px solid; } #driveHeader.driveOpenSidebar {width: calc(100% - 380px);} #driveHeader > .container {height: 100%;} #driveHeader > .container > .row {height: 100%; position: relative;} #driveHeader > .container > .row > div {display: inline-block; float: left; position: relative;} /* Generic Dropdown */ .listbox { font-family: 'Montserrat', sans-serif; background-color: rgba(255, 255, 255, 1); border-radius: 16px; display: none; font-size: 14px; max-height: 550px; overflow-y: auto; overflow-x: hidden; padding: 0; position: absolute; top: 60px; transition: all .3s ease-in-out !important; z-index: 1000; box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.1); } .theme-dark .listbox { background-color: #2A2C32; box-shadow: 0 8px 16px rgba(0 0 0 / 25%), 0 16px 32px rgba(0 0 0 /15%); } #driveHeader .active .listbox {display: block;} .listbox.searchresults {} .listbox.recentcustomers {left: 0px; right: auto; width: 300px;} .listbox > h4 {border-bottom: 1px solid rgb(245, 245, 245); font-size: 14px; font-weight: 500; line-height: 14px; margin: 0; padding: 10px;} .listbox > h4 > span.external {margin-left: 8px;} .listbox > ul {list-style: none; margin: 0; padding: 0; width: 100%;} .listbox > ul:after {clear: both; content: ""; display: table;} .listbox > ul:only-of-type, .listbox > ul:last-of-type {margin: 0;} .listbox>ul>li { color: rgba(0, 0, 0, .75); clear: left; cursor: pointer; float: left; margin: 0; padding-left: 12px; padding-right: 12px; padding-top: 10px; padding-bottom: 10px; position: relative; white-space: nowrap; width: calc(100% - 24px); border-radius: 8px; user-select: none; } .listbox>ul>li:hover { background-color: rgba(40, 50, 60, 0.1); color: #232323; } .theme-dark .listbox>ul>li { color: var(--color-text-light); } .theme-dark .listbox>ul>li:not(.clockedin):hover { background-color: #36383F; color: #fff; } .listbox > ul > li:last-of-type {margin: 0;} .listbox > ul > li.enterprise {} .listbox > ul > li > div {display: inline-block; float: left; min-height: 32px; line-height: 32px;} .listbox > ul > li.disabled {cursor: not-allowed; opacity: .35;} .listbox > ul > li.clockedin {background-color: rgba(0, 175, 135, 1); color: rgba(255, 255, 255, 1);} .listbox > ul > li.clockedin > * {color: rgba(255, 255, 255, 1) !important;} .listbox > ul > li > .srContent {margin: 0 0 0 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 80px);} .listbox > ul > li.enterprise-item > .srContent {height: 45px;} .listbox > ul > li > .srContent > span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 20px);} .listbox > ul > li > .srContent > span > .scanmode {text-transform: capitalize;} .listbox > ul > li > .srContent > span.light {opacity: .6;} .listbox > ul > li > .srContent > .name {font-weight: 600;} .listbox > ul > li > .srContent > .value {} .listbox > ul > li > .srContent .enterprisename {display: inline-block; float: left; line-height: 16px; margin: 0; opacity: .6; padding: 0 17.5px; position: relative;} .listbox > ul > li > .srContent .enterprisename::before {display: block; font-size: 11px; height: 15px; line-height: 15px; position: absolute; text-align: center; top: 0; -webkit-font-smoothing: antialiased; width: 15px;} .listbox > ul > li > .srContent .enterprisename::before {content: "\f19c"; font-family: FontAwesome; left: 0;} .listbox > ul > li > .dealStatusMeter {position: absolute; right: 20px; top: 10px;} .highlightsearch { background-color: rgba(255, 255, 210, 1); border-radius: 2px; } .theme-dark .highlightsearch { background-color: #5C4500; color: #FFDF80; } .drive-user-profile {} /* = Section Specific = update banner ============== */ update-banner {} update-banner > div {background-color: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25); max-width: 360px; position:absolute; right: 20px; top: 80px; z-index:999;} update-banner > div > div {padding: 10px; width: calc(100% - 20px);} update-banner > div > div > h4 {font-size: 16px; font-weight: 700; height: 20px; line-height: 20px; margin: 0 0 10px;} update-banner > div > div > ul {list-style: none; overflow: hidden; position: relative; padding: 10px 0 0; margin: 10px 0 0;} update-banner > div > div > ul::after {background-color: rgba(220, 220, 220, 1); content: ""; display: block; height: 1px; left: 0; position: absolute; top: 0; width: calc(100% - 0px);} update-banner > div > div > ul > li {display: inline-block; float: right;} update-banner > div > div > ul > li > label {margin: 0; margin-left: 10px; width: calc(100% - 0px);} update-banner > div > div > ul > li > label > .md-button {margin: 5px 0;} /* driveMiniLogo */ .driveMiniLogo {} .driveMiniLogo img {display: block; margin: 5px auto; width: 75%;} /* driveMiniSearch */ .driveMiniSearch {float: right !important; margin: 0; padding: 10px 10px 10px 0; width: 300px;} .driveMiniSearch.active label::after {color: rgba(0, 175, 135, 1);} @media screen and (min-width: 500px) and (max-width: 767px) { .driveCustomerActionMenu.margin-right { margin-right: 0 !important; } .driveMiniSearch { width: 200px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .driveMiniSearch { width: 200px; } } @media screen and (min-width: 1024px) and (max-width: 1200px) { .driveMiniSearch { width: 245px; } } /* driveCustomerActionMenu */ .driveCustomerActionMenu { float: right !important; } .driveCustomerActionMenu.left { float: left !important; margin-left: 10px; } .driveCustomerActionMenu.margin-right { margin-right: 76px; } .driveCustomerActionMenu ul { list-style: none; } .driveCustomerActionMenu > ul { margin: 0; padding: 0; } .driveCustomerActionMenu > ul > * { -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; } .driveCustomerActionMenu > ul > li { cursor: pointer; display: inline-block; float: left; height: 60px; padding: 0px; position: relative; width: 50px; } .driveCustomerActionMenu > ul > li.active { } .driveCustomerActionMenu > ul > li .srNotification { background-color: rgba(0, 175, 135, 1); border: 2px solid rgba(255, 255, 255, 1); border-radius: 50%; color: rgba(255, 255, 255, 1); display: block; height: 8px; font-size: 11px; font-weight: 500; line-height: 20px; position: absolute; right: 6px; text-align: center; top: 6px; width: 8px; z-index: 100; } .driveCustomerActionMenu > ul > li button { height: 40px; line-height: 40px; margin: 10px 0 !important; padding: 0px !important; position: relative; width: 40px; } .driveCustomerActionMenu > ul > li.active::before { content: ""; background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; } .driveCustomerActionMenu > ul > li button > figure { border-radius: 50%; height: 100%; overflow: hidden; } .driveCustomerActionMenu > ul > li button > figure > div.miniSquareProfile { height: 40px; line-height: 40px; margin-right: 0px; width: 40px; background-color: #F4F3F6; color: #232323; font-family: 'Montserrat', sans-serif; font-weight: 600; } .driveCustomerActionMenu > ul > li button > figure > div.miniSquareProfile clock-in-indicator { position: relative; bottom: 12px; display: block; right: -8px; } .driveCustomerActionMenu > ul > li button > figure > div.miniSquareProfile clock-in-indicator::after { border: 1px solid white; background-color: #00A073; border-radius: 75px; -moz-border-radius:75px; -webkit-border-radius: 75px; width: 10px; height: 10px; position: fixed; content: ""; } .driveCustomerActionMenu .listbox > ul > li.clockedin { -moz-animation: clocked-in-pulse 900ms infinite; -webkit-animation: clocked-in-pulse 900ms infinite; animation: clocked-in-pulse 900ms infinite; } .driveCustomerActionMenu .listbox > ul > li.clockedin:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; background-color: rgba(0, 175, 135, 1); } @keyframes clocked-in-pulse { 0% { background-color: rgba(0, 175, 135, 1); } 50% { background-color: rgba(0, 160, 115, 1); } 100% { background-color: rgba(51, 179, 143, 1); } } .theme-dark .driveCustomerActionMenu > ul > li button > figure > div.miniSquareProfile { background-color: #2A2C32; color: #fff; } .driveCustomerActionMenu > ul > li button > figure > img { display: block; height: 100%; width: 100%; } .driveCustomerActionMenu > ul > li button .weather { background-position: left center; background-repeat: no-repeat; background-size: 34px !important; display: block; height: 100%; position: relative; width: 100%; } .driveCustomerActionMenu > ul > li button .weather[data-icon='driveCustomerWeather'] > .driveStoreBarCount { display: block; height: 20px; font-size: 10px; font-weight: 500; line-height: 20px !important; position: absolute; right: -2px; text-align: center; top: 0px; width: 20px; } .driveCustomerActionMenu > ul > li i { color: rgba(0, 0, 0, .6); font-size: 18px; height: 100%; line-height: 40px; text-align: center; width: 100%; } .theme-dark .driveCustomerActionMenu > ul > li i { color: var(--color-text-light); } .driveCustomerActionMenu > ul > li:hover button i { } .driveCustomerActionMenu > ul > li .driveStoreBarCount { background-color: rgba(0, 175, 135, 1); border-radius: 2px; color: rgba(255, 255, 255, 1); display: block; font-family: 'Roboto', sans-serif; height: 15px; font-size: 11px; font-weight: 500; line-height: 15px; padding: 0px 4px; position: absolute; right: 10px; text-align: center; top: 10px; } /* driveCustomerActionMenu listbox */ .listbox { right: 8px; width: 280px; } .driveCustomerActionMenu.left .listbox { left: -16px; right: initial; width: 280px; } .listbox.weather { width: 240px; } .listbox > div { margin: 0 0 10px; overflow: hidden; } .listbox > div > div { display: inline-block; float: left; line-height: 30px; } .listbox > .primaryBox { border-bottom: 1px solid rgb(235, 235, 235); margin: 0; overflow: hidden; padding: 15px 24px; } .theme-dark .listbox > .primaryBox { border-bottom-color: rgba(255, 255, 255, .1); } .listbox > .primaryBox > div { display: inline-block; float: left; line-height: 30px; } .listbox > div > .srThumb { background-color: rgba(0, 0, 0, .2); color: rgba(255, 255, 255, 1); height: 30px; text-align: center; width: 30px; } .listbox > div > .srThumb > figure { background-color: rgba(255, 255, 255, 1); border-radius: 4px; height: 100%; overflow: hidden; } .listbox > div > .srThumb > figure > img { display: block; height: 100%; width: 100%; } .listbox > div > .srContent { margin: 0 0 0 10px; width: calc(100% - 40px); } .listbox > div > .srContent > span { display: block; height: 15px; line-height: 15px; } .listbox > div > .srContent > .name { font-weight: 500; } .listbox > div > .srContent > .value { } .listbox > div > .srFullContent { margin: 0; width: calc(100% - 0px); } .listbox > div > .srFullContent > span { display: block; height: 15px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listbox > div > .srFullContent > .name { font-weight: 600; font-size: 16px; line-height: 20px; height: 20px; color: #232323; } .theme-dark .listbox > div > .srFullContent > .name { color: #fff; } .listbox > div > .srFullContent > .value { font-size: 12px; line-height: 16px; font-weight: 600; color: #727272; } .theme-dark .listbox > div > .srFullContent > .value { color: var(--color-text-light); } .listbox > div > .srFullContent > .support.value { margin-top: 10px; } .listbox > div > .srWeather { margin: 0; width: calc(100% - 0px); } .listbox > div > .srWeather > div { text-align: center; } .listbox > div > .srWeather > .weatherIcon { background-position: left center; background-repeat: no-repeat; background-size: 40px !important; display: block; height: 70px; margin: auto; position: relative; width: 70px; } .listbox > div > .srWeather > .weatherIcon .weatherTemp { display: block; height: 30px; font-size: 15px; font-weight: 500; line-height: 30px !important; position: absolute; right: 0px; text-align: center; top: 0px; width: 30px; } .listbox > div > .srWeather > .weatherIcon > figure { display: block; height: 100%; width: 100%; } .listbox > div > .srWeather > .weatherIcon > figure > img { display: block; height: 100%; width: 100%; } .listbox > div > .srWeather > .weatherCondition { font-size: 20px; line-height: 20px; } .listbox > div > .srWeather > .weatherCity { } .listbox > ul { border-top: 1px solid rgb(235, 235, 235); list-style: none; width: calc(100% - 16px); padding: 8px; } .theme-dark .listbox > ul { border-top-color: rgba(255, 255, 255, .1); } .listbox > ul:first-of-type { border-top: none; } .listbox > ul > li { } .listbox > ul > li.list-loading { height: 100px; position: relative; } .listbox > ul > li.list-loading:hover { background-color: transparent !important; } .listbox > ul > li.list-loading > ol { list-style: none; margin: 0; padding: 0; } .listbox > ul > li.list-loading > ol > li { display: block; height: 100px; position: relative; } .listbox > ul > li.list-loading > ol > li > .drv-spinner { background-color: transparent; } .listbox > ul > li.list-loading > ol > li > .drv-spinner > div > div > div { margin: 0 auto; } .listbox > ul > li .srNotification { left: 25px; top: 12.5px; } .driveCustomerActionMenu .listbox > ul > li > .srThumb { background-color: transparent !important; border-radius: 4px; height: 30px; text-align: center; width: 30px; } .listbox > ul > li > .srThumb { background-color: transparent !important; border-radius: 4px; height: 32px; text-align: center; width: 32px; } .driveCustomerActionMenu .listbox > ul > li > .srThumb > i { font-size: 18px; line-height: 32px; color: #232323; } .theme-dark .driveCustomerActionMenu .listbox > ul > li > .srThumb > i { color: #C8CAD0; } .theme-dark .driveCustomerActionMenu .listbox > ul > li:hover > .srThumb > i { color: #fff; } .listbox > ul > li > .srThumb > i { font-size: 15px; line-height: 32px; } .listbox > ul > li > .srThumb > figure { background-color: rgba(255, 255, 255, 1); border-radius: 50%; height: 100%; overflow: hidden; } .listbox > ul > li > .srThumb > figure > img { display: block; height: 100%; width: 100%; } .listbox > ul > li > .srContent { margin: 0 0 0 10px; width: calc(100% - 40px); } .listbox > ul > li.singleline > .srContent > span { display: block; height: 30px !important; line-height: 30px !important; } .listbox > ul > li.singleline > .srContent > .name { font-weight: 600; } .theme-dark .listbox > ul > li.singleline > .srContent > .name { color: var(--color-text-light); } .theme-dark .listbox > ul > li.singleline:hover > .srContent > .name { color: #fff; } .recentlist .listbox > ul > li > .srContent, .driveMiniSearch .listbox > ul > li > .srContent { margin: 0 0 0 10px; width: calc(100% - 90px); } .recentlist .listbox > ul > li.enterprise > .srContent { height: 42px; } .listbox > .scBox { margin: 0; overflow: hidden; padding: 0; } .listbox > .scBox > div { display: inline-block; float: left; line-height: 30px; } .listbox > .scBox > .srWeather { margin: 0; width: calc(100% - 0px); } .listbox > .scBox > .srWeather > ul { list-style: none; } .listbox > .scBox > .srWeather > ul > li { border-top: 1px solid rgb(245, 245, 245); font-size: 14px; overflow: hidden; padding: 5px 20px; } .listbox > .scBox > .srWeather > ul > li > div { display: inline-block; float: left; height: 40px; line-height: 40px; } .listbox > .scBox > .srWeather > ul > li > .weatherDay { width: calc(80px - 0px); } .listbox > .scBox > .srWeather > ul > li > .weatherIcon { width: calc(40px - 0px); } .listbox > .scBox > .srWeather > ul > li > .weatherIcon > figure { display: block; height: 100%; width: 100%; } .listbox > .scBox > .srWeather > ul > li > .weatherIcon > figure > img { display: block; height: 100%; width: 100%; } .listbox > .scBox > .srWeather > ul > li > .weatherRange { text-align: right; width: calc(80px - 0px); } .listbox > .scBox > .srWeather > ul > li > .weatherRange > .high { } .listbox > .scBox > .srWeather > ul > li > .weatherRange > .low { color: rgba(0, 175, 135, 1); } /* = Section Specific = driveStoreBody ============== */ #driveBody { background-color: transparent; float: left; height: calc(100% - 60px); margin: 0 0 0 60px; transition: none !important; width: calc(100% - 60px); position: relative; z-index: 1; } #driveBody.ngx-gallery-open{ z-index: initial; overflow: hidden !important; } #driveBody.driveOpenSidebar { width: calc(100% - 380px); } #driveBody > .container { height: 100%; } #driveBody > .container > .row { height: 100%; position: relative; } #driveBody > .container > .row > .column { display: block; float: left; height: 100%; } /* = Section Specific = driveGenericLoader ============== */ .driveGenericLoader { background-color: rgba(235, 235, 235, .85); color: rgba(255, 255, 255, 1); display: none; height: calc(100% - 0px); position: absolute; width: calc(100% - 0px); z-index: 10; } .driveGenericLoader.show { display: block; } .driveGenericLoader > h2 { display: block; float: left; height: 300px; width: 300px; } .driveGenericLoader > h2 > img { display: block; transition: all 1s ease-in-out; -webkit-animation: blink normal 2s infinite ease-in-out; } /* = Section Specific = driveStoreContent ============== */ #driveBody > .container > .row > .column.driveStoreContent { background-color: rgba(238, 240, 244, 1); height: 100%; padding: 0px; transition: all .3s ease-in-out !important; width: 100%; z-index: 1; } #driveBody > .container > .row > .column.driveStoreContent.driveStoreContentNoPad { height: calc(100% - 0px); padding: 0 0 0 20px; width: calc(100% - 20px); } #driveBody > .container > .row > .column.driveStoreContent > div { display: block; overflow: hidden; } #driveBody > .container > .row > .column.driveStoreContent > div:only-of-type { height: calc(100% - 0px); margin: 0; position: relative; } /* Generic Tab Holder */ #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > div { margin: 0; overflow-x: hidden; width: calc(100% - 0px); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader { background-color: rgba(54, 57, 64, 1); color: rgba(255, 255, 255, 1); height: 60px; position: relative; overflow: hidden; width: calc(100% - 0px); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > h4 { display: inline-block; font-size: 15px; font-weight: 400; line-height: 30px; margin: 0; width: auto; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > h4 > span { font-weight: 800; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol { display: inline-block; float: right; list-style: none; margin: 0; padding: 0; width: auto; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol > li { display: inline-block; float: left; line-height: auto; margin-right: 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol > li:last-of-type { margin: 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol > li > label { margin: 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol > li > label > * { height: 30px; margin: 0; padding: 5px 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ol > li > label > #buttonAddNewCustomer { background-color: rgba(0, 175, 135, 1); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul { list-style: none; margin: 0; padding: 0; text-align: center; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li { color: rgba(165, 175, 185, 1); cursor: pointer; display: inline-block; font-size: 14px; line-height: 40px; padding: 10px 15px; position: relative; text-align: center; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li::after { background-color: rgba(0, 175, 135, 1); bottom: 0; content: ""; display: block; height: 0px; left: 0; position: absolute; transition: all 0.1s linear 0s; width: 100%; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li:hover::after { background-color: rgba(0, 175, 135, .75); height: 5px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li.selected { color: rgba(255, 255, 255, 1) } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li.selected::after { height: 5px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabHeader > ul > li > span { font-weight: 500; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader { height: 40px; position: relative; overflow: hidden; width: calc(100% - 20px); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > h4 { display: inline-block; font-size: 15px; font-weight: 400; line-height: 30px; margin: 0; width: auto; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > h4 > span { font-weight: 800; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol { display: inline-block; float: right; list-style: none; margin: 0; padding: 0; width: auto; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol > li { display: inline-block; float: left; line-height: auto; margin-right: 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol > li:last-of-type { margin: 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol > li > label { margin: 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol > li > label > * { height: 30px; margin: 0; padding: 5px 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ol > li > label > #buttonAddNewCustomer { background-color: rgba(30, 165, 85, 1); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ul { background-color: rgba(35, 35, 35, .5); display: table; font-size: 12px; list-style: none; margin: 0; padding: 0; table-layout: fixed; width: calc(100% - 0px); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ul > li { border-right: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .75); cursor: pointer; display: inline-block; float: left; height: 20px; padding: 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ul > li:last-of-type { border-right: 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ul > li.selected { background-color: rgba(35, 35, 35, 1); color: rgba(255, 255, 255, 1); } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabSubHeader > ul > li > span { font-weight: 500; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent.driveTabContentWSub { height: calc(100% - 100px); margin: 10px 0 0; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent { height: calc(100% - 60px); margin: 0; overflow: overlay; padding-right: 0px; position: relative; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent::-webkit-scrollbar { position: absolute; right: 0; top: 0; border-radius: 0px; width: 10px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent::-webkit-scrollbar-thumb { border-radius: 0px; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContentBlock { display: none; padding: 0; position: relative; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent.driveTabTableHeader { display: none; height: 63px; position: absolute; top: 60px; z-index: 5; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent.driveTabTableHeader.driveHeaderShow { display: block; } #driveBody > .container > .row > .column.driveStoreContent > .driveDealerCanvas > .driveTabContent.driveTabTableBody { } /* = Section Specific = driveStoreContent - Only of type ============== */ #driveBody > .container > .row > .column:only-of-type { width: calc(100% - 0px); } /* = Section Specific = driveStoreContent - Only of type ============== */ ul.mini { list-style: none; overflow: visible; padding: 10px 0; width: calc(100% - 0px); } ul.mini > li { background-color: rgba(255, 255, 255, 1); border-radius: 50%; cursor: pointer; display: inline-block; float: left; margin: 0 10px 10px 0; position: relative; } ul.mini > li.addNew { background-color: rgba(0, 175, 135, 1); clear: both; cursor: default; line-height: 30px; } ul.mini > li.add { background-color: transparent; clear: none; cursor: pointer; height: 32px; width: 32px; } ul.mini > li.add::before { border: 3px dashed rgba(180, 180, 180, 1); border-radius: 3px !important; color: rgba(180, 180, 180, 1); content: "\f067"; display: block; font-family: FontAwesome; font-size: 12px; height: calc(100% - 6px); line-height: 26px; text-align: center; width: calc(100% - 6px); } ul.mini > li.saving { background-color: rgba(0, 0, 0, .2); } ul.mini > li.saving::before { border: 0px; border-radius: 0px; color: rgba(0, 0, 0, 1); content: "..."; display: block; font-family: 'Roboto'; font-size: 16px; height: 100%; line-height: 24px; text-align: center; width: 100%; } ul.mini > li > div { display: inline-block; float: left; } ul.mini > li > .srInner { margin: 20px 0; text-align: center; width: 100%; } ul.mini > li.addNew > .srInner { } ul.mini > li > .srInner > * { display: block; } ul.mini > li > .srInner > i { } ul.mini > li > .srInner > span { font-size: 12px; font-weight: 500; } ul.mini > li > .srThumb { height: 30px; width: 30px; } ul.mini > li > .srThumb { text-align: center; } ul.mini > li > .srThumb > figure { background-color: rgba(255, 255, 255, 1); border-radius: 4px; height: 100%; overflow: hidden; } ul.mini > li > .srThumb > figure > img { display: block; height: 100%; width: 100%; } .miniSquareProfile { background-color: rgba(204, 204, 204, 1); color: var(--color-inverted); border-radius: 50%; cursor: pointer; height: 32px; float: left; font-size: 12px; font-weight: 600; line-height: 32px; position: relative; text-align: center; text-transform: uppercase; width: 32px; overflow: hidden; } .miniSquareProfile.metered { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .miniSquareProfile > figure { float: left; height: 100%; overflow: hidden; position: absolute; right: 0px; top: 0px; width: 100%; } .miniSquareProfile > figure > img { display: block; height: 100%; width: 100%; border-radius: 4px; } /* STATUS METER */ .statusMeter { cursor: pointer; } .statusMeter > div { display: block; margin: auto; } .statusMeter > .icon { color: inherit; display: block; font-size: 20px; height: 25px; line-height: 25px; opacity: .75; text-align: center; width: 25px; } .statusMeter > .icon > i { line-height: inherit; } .statusMeter > .meter { height: 5px; margin: 0 auto; text-align: center; width: 30px; } .statusMeter > .meter > div { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(200, 200, 200, 1); border-radius: 2px; display: inline-block; float: left; height: 3px; margin: 0 .5px; width: 3px; } .statusMeter > .meter > div.lit { background-color: rgba(0, 175, 135, 1); border-color: rgba(0, 175, 135, 1); } .statusMeter > .meter.snoozing > div.lit { background-color: rgba(190, 190, 190, 1); border-color: rgba(190, 190, 190, 1); } .statusMeter > .statusLabel { font-size: 12px; height: 20px; line-height: 20px; text-align: center; } ul.mini > li .srContent { background-color: rgba(255, 255, 255, 1); border: 4px solid rgba(210, 210, 210, 1); display: none; font-size: 13px; font-weight: normal; left: 0; margin: 0; padding: 10px; position: absolute; text-align: left; text-transform: none; top: 30px; width: 200px; z-index: 10; } ul.mini > li.active .srContent { display: block; } ul.mini > li.active .srContent > div { height: 20px; line-height: 20px; text-overflow: ellipsis; -webkit-line-clamp: 1; white-space: pre; width: calc(100% - 0px); } ul.mini > li.active .srContent > .srContentCustomerRemove { font-weight: 500; } ul.mini > li.active .srContent > .srContentCustomerClose { border-radius: 4px; cursor: pointer; height: 20px; position: absolute; right: 10px; text-align: center; top: 10px; width: 20px; } ul.mini > li.active .srContent > .srContentCustomerClose:hover { background-color: rgba(0, 0, 0, .1); } .addNew > .srNewContent { background-color: rgba(255, 255, 255, 1); border: 2px solid rgba(210, 210, 210, 1); border-radius: 4px; display: none; font-size: 13px; margin: 0; margin-top: 5px; padding: 10px; position: absolute; width: 280px; z-index: 10; } .addNew.active .srNewContent { display: block; height: auto; overflow: hidden; } .addNew.active .srNewContent > div { color: rgba(35, 35, 35, 1) !important; } .addNew.active .srNewContent > .srContentCustomerClose { border-radius: 4px; cursor: pointer; color: rgba(35, 35, 35, 1) !important; height: 20px; line-height: 20px; position: absolute; right: 5px; text-align: center; top: 8px; width: 20px; } .addNew.active .srNewContent > .srContentCustomerClose:hover { background-color: rgba(0, 0, 0, .1); } .addNew.active .srNewContent > .srContentCustomerClose > i { color: rgba(35, 35, 35, 1) !important; } .addNew.active .srNewContent > .srNewContentAdd { text-align: left; } .addNew.active .srNewContent > .srNewContentAdd > h4 { border-bottom: 1px solid rgba(210, 210, 210, 1); font-size: 16px; height: 16px; line-height: 16px; margin: 0; margin-bottom: 10px; padding: 0 0 10px; } .addNew.active .srNewContent > .srNewContentAdd > h4 > i { color: rgba(35, 35, 35, 1); } .addNew.active .srNewContent > .srNewContentAdd > label { margin: 0px; position: relative; width: 100%; } .addNew.active .srNewContent > .srNewContentAdd > label md-progress-circular { position: absolute; right: -28px; top: -28px; } .addNew.active .srNewContent > .srNewContentAdd > label > .formcontrol { border: 1px solid var(--color-highlight-100); margin: 0; padding: 0 10px; width: calc(100% - 22px) } .addNew.active .srNewContent > .srNewContentAddList { color: rgba(35, 35, 35, 1); margin: 10px 0 0; } .addNew.active .srNewContent > .srNewContentAddList ul { list-style: none; overflow: hidden; } .addNew.active .srNewContent > .srNewContentAddList ul > li { display: block; margin: 0 0 10px; } .addNew.active .srNewContent > .srNewContentAddList ul > li > div { display: inline-block; float: left; margin-right: 5px; } .addNew.active .srNewContent > .srNewContentAddList ul > li > .srThumb { height: 30px; width: 30px; } .addNew.active .srNewContent > .srNewContentAddList ul > li > .srThumb { color: rgba(255, 255, 255, 1); text-align: center; } .addNew.active .srNewContent > .srNewContentAddList ul > li > .srThumb > figure { background-color: rgba(255, 255, 255, 1); border-radius: 4px; height: 100%; overflow: hidden; } .addNew.active .srNewContent > .srNewContentAddList ul > li > .srThumb > figure > img { display: block; height: 125%; } .addNew.active .srNewContent > .srNewContentAddList ul > li .srContent { height: 30px; line-height: 30px; margin: 0 0 0 5px; width: calc(100% - 40px); } .addNew.active .srNewContent > .srNewContentAddList ul > li > label { margin: 0; width: 100%; } .addNew.active .srNewContent > .srNewContentAddList ul > li > label > button { margin: 0; width: 100%; } .vehicleListItemWrapper:hover { background-color: rgba(0, 0, 0, .05); position: relative; } .vehicleListItem { line-height: 16px; margin-top: 5px; width: calc(100% - 40px); } .vehicleListItem > div { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 50px); } .vehicleListItem > div:last-child { font-size: 12px; font-weight: normal; } .vehicleListItemWrapper .dealVehicleActions { cursor: pointer; display: none; height: 20px; position: absolute; right: 5px; text-align: center; top: 10px; width: 20px; } .vehicleListItemWrapper .dealVehicleActions > i { color: rgba(0, 0, 0, .7) !important; } .vehicleListItemWrapper:hover .dealVehicleActions { display: block; } /* = Section Specific = driveDeals ============== */ #driveDeals { height: calc(100% - 0px); left: 0; position: absolute; top: 0; width: calc(100% - 0px); z-index: 15; } #driveDeals > .ngdialog { top: 0; } /* = Section Specific = driveStoreBar ============== */ #driveStoreBar { background-color: rgba(45, 50, 60, 1); height: calc(100% - 60px); margin-top: 60px; position: absolute; left: 0; top: 0; width: 60px; z-index: 11; } #driveStoreBar > .container { height: 100%; } #driveStoreBar > .container > .row { height: 100%; } #driveStoreBar > .container > .row > ul { list-style: none; margin: 0; padding: 0; } #driveStoreBar > .container > .row > ul > * { -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; } #driveStoreBar > .container > .row > ul > li { cursor: pointer; display: inline-block; float: left; height: 60px; padding: 0px; position: relative; width: 60px; } #driveStoreBar > .container > .row > ul > li.active { } #driveStoreBar > .container > .row > ul > li .srNotification { background-color: rgba(0, 175, 135, 1); border: 2px solid rgba(255, 255, 255, 1); border-radius: 50%; color: rgba(255, 255, 255, 1); display: block; height: 8px; font-size: 11px; font-weight: 500; line-height: 20px; position: absolute; right: 15px; text-align: center; top: 15px; width: 8px; z-index: 100; } #driveStoreBar > .container > .row > ul > li button { height: 40px; line-height: 40px; margin: 10px !important; padding: 0px !important; width: 40px; } #driveStoreBar > .container > .row > ul > li:focus button, #driveStoreBar > .container > .row > ul > li:hover button { background-color: rgba(255, 255, 255, .5) !important; } #driveStoreBar > .container > .row > ul > li button > figure { background-color: rgba(255, 255, 255, 1); border-radius: 4px; height: 100%; overflow: hidden; } #driveStoreBar > .container > .row > ul > li button > figure > div.miniSquareProfile { height: 40px; line-height: 40px; margin-right: 0px; width: 40px; } #driveStoreBar > .container > .row > ul > li button > figure > img { display: block; height: 100%; width: 100%; } #driveStoreBar > .container > .row > ul > li button i { color: rgba(255, 255, 255, .35); font-size: 18px; height: 100%; line-height: 40px; text-align: center; width: 100%; } #driveStoreBar > .container > .row > ul > li.prominent button i { color: rgba(255, 255, 255, 1); } #driveStoreBar > .container > .row > ul > li:focus button i, #driveStoreBar > .container > .row > ul > li:hover button i { color: rgba(45, 50, 60, 1); } #driveStoreBar > .container > .row > ul > li > .driveStoreBarCount { background-color: rgba(0, 175, 135, 1); border-radius: 2px; color: rgba(255, 255, 255, 1); display: block; font-family: 'Roboto', sans-serif; height: 15px; font-size: 11px; font-weight: 500; line-height: 15px; padding: 0px 4px; position: absolute; right: 10px; text-align: center; top: 10px; } #driveStoreBar > .container > .row > ul > li.driveStoreBoarActive > .driveStoreBarCount { background-color: rgba(35, 35, 35, 1); } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification { color: rgba(255, 255, 255, 1); display: none; padding: 0; position: absolute; left: -400px; overflow: hidden; text-align: left; top: 0; transition: all .3s ease-in-out; width: 400px; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification.driveStoreBarNotificationShow { display: block; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul { list-style: none; margin: 0; padding: 0; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li { background-color: rgba(35, 35, 35, .75); display: block; margin: 0 0 10px 0; padding: 20px; position: relative; width: calc(100% - 40px); } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li > h3 { font-size: 16px; margin: 0; width: 200px; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li > h4 { font-size: 12px; margin: 0; width: 200px; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li > span { font-size: 12px; width: calc(100% - 0px); } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li > .driveStoreBarNotificationClose { display: block; font-size: 12px; height: 20px; position: absolute; right: 10px; top: 10px; width: 20px; } #driveStoreBar > .container > .row > ul > li > .driveStoreBarNotification > ul > li > .driveStoreBarNotificationClose:before { content: "\f00d"; display: block; font-family: FontAwesome; height: 100%; text-align: center; width: 100%; } /* = Section Specific = drive buttons ============== */ /* generic */ .btn-cal { background-color: rgba(35, 35, 35, .15); color: rgba(35, 35, 35, 1); } .btn-cal:focus, .btn-cal:hover { background-color: rgba(35, 35, 35, .05); } .btn-default { background-color: rgba(55, 115, 155, 1); color: rgba(255, 255, 255, 1); } .btn-default:focus, .btn-default:hover { background-color: rgba(55, 115, 155, .5); } .btn-danger { background-color: rgba(195, 40, 40, 1); color: rgba(255, 255, 255, 1); } .btn-danger:focus, .btn-danger:hover { background-color: rgba(195, 40, 40, .5)); } .btn-previous { background-color: rgba(225, 108, 96, 1); color: rgba(255, 255, 255, 1); } .btn-previous:focus, .btn-previous:hover { background-color: rgba(225, 108, 96, .5); } .btn-next { background-color: rgba(30, 165, 85, 1); color: rgba(255, 255, 255, 1); } .btn-next:focus, .btn-next:hover { background-color: rgba(30, 165, 85, .5); } .btn-print { background-color: rgba(30, 165, 85, 1); color: rgba(255, 255, 255, 1); } .btn-print:focus, .btn-print:hover { background-color: rgba(30, 165, 85, .5); } .btn-save { background-color: rgba(0, 175, 135, 1); color: rgba(255, 255, 255, 1); } .btn-save:focus, .btn-save:hover { background-color: rgba(0, 175, 135, .5); } .btn-compose { background-color: rgba(55, 115, 155, 1); color: rgba(255, 255, 255, 1); } .btn-compose:focus, .btn-compose:hover { background-color: rgba(55, 115, 155, .5); } .btn-saving { background-color: rgba(0, 135, 105, 1); color: rgba(255, 255, 255, 1); cursor: not-allowed; } .btn-saving:focus, .btn-saving:hover { background-color: rgba(0, 135, 105, .5); } /* tooltip */ .tooltip { position: absolute; z-index: 10000; display: block; font-family: 'Roboto'; font-size: 12px; font-weight: normal; line-height: 1.4; filter: alpha(opacity=0); opacity: 0; } .tooltip.in { filter: alpha(opacity=90); opacity: .9; } .tooltip.top { padding: 5px 0; margin-top: -3px; } .tooltip.right { padding: 0 5px; margin-left: 3px; } .tooltip.bottom { padding: 5px 0; margin-top: 3px; } .tooltip.left { padding: 0 5px; margin-left: -3px; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; white-space: nowrap; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-left .tooltip-arrow { right: 5px; bottom: 0; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .fade.in { opacity: 1; } /* material */ md-checkbox.md-default-theme.md-checked .md-icon { background-color: rgba(0, 175, 135, 1); } select, button, textarea, input { font-size: 13px !important; } md-backdrop.md-click-catcher { z-index: 11000 !important; } .md-select-menu-container { position: absolute; z-index: 11001 !important; } .md-select-menu-container md-optgroup { } .md-select-menu-container md-optgroup label { height: 20px !important; margin: auto; padding: 15px 20px; } .md-select-menu-container md-optgroup md-option { height: auto !important; line-height: 20px !important; padding: 10px 20px; } .md-button { border-radius: 4px !important; font-size: 13px !important; font-weight: 500 !important; padding: 0 10px !important; } .md-button.md-raised { color: rgba(255, 255, 255, 1); box-shadow: 0px 2px 0px rgba(0, 0, 0, .15) !important; } .md-button.md-raised:active, .md-button.md-raised:focus { box-shadow: 0px 1px 0px rgba(190, 190, 190, 1) !important; } .md-button.md-raised:hover { box-shadow: 0px 3px 0px rgba(190, 190, 190, 1) !important; } .md-button.md-raised.saving { cursor: not-allowed; opacity: .75; } .md-button.md-raised.md-primary { background-color: rgba(0, 175, 135, 1) !important; box-shadow: 0px 2px 0px rgba(8, 126, 99, 1) !important; } .md-button.md-raised.md-primary:hover { box-shadow: 0px 3px 0px rgba(8, 126, 99, 1) !important; color: rgba(255, 255, 255, 1); background-color: rgb(54, 177, 140) !important; } .md-button.md-raised.md-primary:active { box-shadow: 0px 1px 0px rgba(8, 126, 99, 1) !important; color: rgba(255, 255, 255, 1); } .md-button.md-raised.md-primary.saving { cursor: not-allowed; opacity: .75; } .md-button.md-raised.md-gm { background-color: rgba(5,50,139, 1) !important; box-shadow: 0px 2px 0px rgba(5,50,139, 1) !important; } .md-button.md-raised.md-gm:hover { box-shadow: 0px 3px 0px rgba(5,50,139, 1) !important; color: rgba(255, 255, 255, 1); } .md-button.md-raised.md-gm:active { box-shadow: 0px 1px 0px rgba(5,50,139, 1) !important; color: rgba(255, 255, 255, 1); } .md-button.md-raised.md-primary[disabled] { background-color: rgba(0,0,0,0.12) !important; color: var(--color-text-lighter) !important; box-shadow: 0px 0px 0px !important; } .md-button.md-raised.md-warn { background-color: rgba(245, 65, 55, 1) !important; box-shadow: 0px 2px 0px rgba(205, 15, 15, 1) !important; } .md-button.md-raised.md-warn:hover { box-shadow: 0px 3px 0px rgba(205, 15, 15, 1) !important; color: rgba(255, 255, 255, 1); } .md-button.md-raised.md-warn:active { box-shadow: 0px 1px 0px rgba(205, 15, 15, 1) !important; color: rgba(255, 255, 255, 1); } .md-button.md-raised.md-warn.saving { cursor: not-allowed; opacity: .75; } .md-icon-button { box-shadow: none !important; height: 40px !important; line-height: 40px !important; width: 40px !important; } .md-icon-button:active, .md-icon-button:focus, .md-icon-button:hover { box-shadow: none !important; } md-select.filter { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; font-size: 14px; margin: 0px !important; padding: 4px 10px; width: 160px; } md-select.filter .md-select-label { border-bottom: 0px !important; padding-bottom: 0px !important; } md-select.filter .md-select-label .md-select-icon:after { top: 0px !important; } md-switch.md-checked.md-primary .md-thumb { background-color: rgba(8, 161, 126, 1) !important; } md-switch.md-checked.md-primary .md-bar { background-color: rgba(0, 175, 135, .5) !important; } md-tooltip { background-color: rgba(0, 0, 0, .8) !important; font-size: 13px !important; padding: 5px !important; z-index: 999999 !important; overflow: visible !important; } md-tooltip::after { bottom: -12px; content: ""; position: absolute; width: 0px; height: 0px; border: 6px solid transparent; border-top-color: rgba(0, 0, 0, .8); left: calc(50% - 6px); } md-tooltip[md-direction='bottom']::after { bottom: auto; top: -12px; border-bottom-color: rgba(0, 0, 0, .8); border-top-color: transparent; } md-tooltip[md-direction='right']::after { bottom: auto; top: 10px; border-bottom-color: rgba(0, 0, 0, .8); left: -12px; border-top-color: transparent; transform: rotate(-90deg); } md-tooltip[md-direction='top'] { margin-top: -10px; } md-tooltip .md-background { display: none !important; } /* inline and intercom overrides */ .inmplayer-trigger { background-color: transparent !important; border: none !important; border-radius: 4px; box-shadow: none !important; bottom: 10px !important; cursor: pointer; display: inline-block; float: left; height: 40px; left: 10px !important; padding: 10px; position: absolute; text-align: center; text-indent: -9999px; width: 20px; } .inmplayer-trigger::after { content: "\f02d"; color: rgba(255, 255, 255, 1); font-family: FontAwesome; font-size: 20px; height: 100%; left: 0px; line-height: 40px; position: absolute; text-align: center; text-indent: 0px; top: 0px; width: 100%; } .inmplayer-trigger:hover { background-color: rgba(255, 255, 255, .5) !important; } .inmplayer-trigger:focus::after, .inmplayer-trigger:hover::after { color: rgba(45, 50, 60, 1); } .inmplayer-position-bottom_left .inmplayer-panel, .inmplayer-position-left_bottom .inmplayer-panel { border-radius: 4px !important; } .inmplayer-panel-footer { display: none !important; } .inmplayer-panel-header { position: relative; text-indent: -999px; } .inmplayer-panel-header::after { content: "DriveCentric Help"; top: 0px; left: 0px; position: absolute; height: 100%; width: 100%; text-indent: 10px; } #intercom-container .intercom-sheet-header { height: 60px !important; } #intercom-container .intercom-sheet-header-title { line-height: 60px !important; font-family: 'Roboto'; } #intercom-container .intercom-sheet-header-title.intercom-sheet-header-with-presence { line-height: 35px !important; font-family: 'Roboto'; } #intercom-container iframe[name="intercom-notifications-frame"].chitchat-page { bottom: 150px; } #intercom-container .intercom-launcher-badge-frame.chitchat-page { bottom: 120px; } #intercom-container .intercom-launcher-frame.chitchat-page { bottom: 80px; } .intercom-lightweight-app-launcher.chitchat-page { bottom: 80px; } .dealVehicleIndicator { left: 10px; position: absolute; top: 10px; } .dealVehicleIndicator > div { font-size: 12.5px; } .dealVehicleIndicator > .indicator-custom { color: rgba(15, 145, 245, 1); } .dealVehicleIndicator > .indicator-delivered { color: rgba(0, 175, 135, 1); } .dealVehicleIndicator > .indicator-sold { color: rgba(245, 65, 55, 1); } .dealVehicleIndicator > .indicator-wishlist { color: rgba(255, 125, 205, 1); } md-checkbox.md-checked .md-ink-ripple { color: rgba(0, 175, 135, .85); } md-checkbox.md-checked .md-icon { background-color: rgba(0, 175, 135, 1); } /* FILTER TAGS */ .fltr-tgs > ul { display: inline-block; float: left; height: 100%; list-style: none; position: relative; vertical-align: top; z-index: 100; } .fltr-tgs > ul::after { clear: both; content: ""; display: table; } .fltr-tgs > ul > li { display: inline-block; float: left; margin: 0 5px 0 0; } .fltr-tgs > ul > li:last-of-type { margin: 0; } .fltr-tgs > ul > li > .fltr-blk { border-radius: 4px; color: rgba(255, 255, 255, 1); cursor: pointer; display: block; height: 30px; line-height: 30px; overflow: hidden; } .fltr-tgs > ul > li > .fltr-blk:hover { opacity: .75; } .fltr-tgs > ul > li > .fltr-blk > span { display: inline-block; float: left; line-height: 30px; } .fltr-tgs > ul > li > .fltr-blk > span.label { font-size: 14px; padding: 0 10px; } .fltr-tgs > ul > li > .fltr-blk > span.label > span { display: block; font-size: 12.5px; font-weight: 700; line-height: 30px; } .fltr-tgs > ul > li > .fltr-blk > span.action { background-color: rgba(0, 0, 0, .25); cursor: pointer; text-align: center; padding: 0 10px; } .fltr-tgs > ul > li > .fltr-blk > span.action:hover { background-color: rgba(0, 0, 0, .5); } .fltr-tgs > ul > li > .fltr-blk > span.action:active { background-color: rgba(0, 0, 0, .75); } ex: 100; } .fltr-tgs > ul::after {clear: both; content: ""; display: table;} .fltr-tgs > ul > li {display: inline-block; float: left; margin: 0 5px 0 0;} .fltr-tgs > ul > li:last-of-type {margin: 0;} .fltr-tgs > ul > li > .fltr-blk {border-radius: 4px; color: rgba(255, 255, 255, 1); cursor: pointer; display: block; height: 30px; line-height: 30px; overflow: hidden;} .fltr-tgs > ul > li > .fltr-blk:hover {opacity: .75;} .fltr-tgs > ul > li > .fltr-blk > span {display: inline-block; float: left; line-height: 30px;} .fltr-tgs > ul > li > .fltr-blk > span.label {font-size: 14px; padding: 0 10px;} .fltr-tgs > ul > li > .fltr-blk > span.label > span {display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 30px; vertical-align: top;} .fltr-tgs > ul > li > .fltr-blk > span.label > span.icon {font-size: 11.5px; margin-right: 5px;} .fltr-tgs > ul > li > .fltr-blk > span.action {background-color: rgba(0, 0, 0, .25); cursor: pointer; text-align: center; padding: 0 10px;} .fltr-tgs > ul > li > .fltr-blk > span.action:hover {background-color: rgba(0, 0, 0, .5);} .fltr-tgs > ul > li > .fltr-blk > span.action:active {background-color: rgba(0, 0, 0, .75);} /* LIST BOX */ .lst-box {background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(230, 230, 230, 1); border-radius: 6px; border-top-left-radius: 0; border-top-right-radius: 0; color: rgba(80, 80, 80, 1); font-size: 12.5px; padding: 0; position: absolute; z-index: 100;} .lst-box::before, .lst-box::after {content: ""; display: block; position: absolute; transition: all 0.1s linear 0s;} .lst-box::before {border-bottom: 11px solid rgba(215, 215, 215, 1); border-left: 11px solid transparent; border-right: 10px solid transparent; height: 0px; left: 7px; top: -9px; width: 0px; z-index: 2;} .lst-box::after {border-bottom: 8px solid rgba(255, 255, 255, 1); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom-width: 9px; height: 0px; left: 10px; top: -8px; width: 0px; z-index: 2;} .is-active > .lst-box {display: block; text-align: left;} .lst-box > .lst-cnt {background-color: rgba(255, 255, 255, 1); border-radius: 6px; border-top-left-radius: 0px; border-top-right-radius: 0px; max-height: 490px; overflow-x: hidden; overflow-y: overlay; position: relative; z-index: 10;} .lst-box > .lst-cnt .primarybox {margin: 0; overflow: hidden; padding: 10px 20px; position: relative;} .lst-box > .lst-cnt .primarybox::before {background-color: rgba(230, 230, 230, 1); bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%;} .lst-box > .lst-cnt .primarybox::after {clear: both; content: ""; display: table;} .lst-box > .lst-cnt .primarybox > div {display: inline-block; float: left;} .lst-box > .lst-cnt .primarybox > .srContent {margin: 0; width: calc(100% - 0px);} .lst-box > .lst-cnt .primarybox > .srContent > span {display: block; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .lst-box > .lst-cnt .primarybox > .srContent > span.name {font-weight: 700;} .lst-box > .lst-cnt .primarybox > .srContent > span.store {} .lst-box > .lst-cnt ul {list-style: none; margin: 0; overflow-x: hidden; overflow-y: overlay; padding: 0; position: relative; width: 100%;} .lst-box > .lst-cnt ul::before {background-color: rgba(230, 230, 230, 1); content: ""; display: block; height: 1px; left: 0; position: absolute; top: 0; width: 100%;} .lst-box > .lst-cnt ul::after {clear: both; content: ""; display: table;} .lst-box > .lst-cnt ul:first-of-type {border-top: none;} .lst-box > .lst-cnt ul > li {clear: both; cursor: pointer; display: block; height: auto !important; overflow: hidden; padding: 10px; position: relative; white-space: nowrap; width: calc(100% - 20px) !important;} .lst-box > .lst-cnt ul > li::after {clear: both; content: ""; display: table;} .lst-box > .lst-cnt ul > li:last-of-type {margin: 0;} .lst-box > .lst-cnt ul > li:focus, .lst-box > .lst-cnt ul > li:hover {background-color: rgba(0, 0, 0, .05);} .lst-box > .lst-cnt ul > li.is-selected {background-color: rgba(0, 175, 135, 1); color: rgba(255, 255, 255, 1);} .lst-box > .lst-cnt ul > li > div {display: inline-block; float: left;} .lst-box > .lst-cnt ul > li > .srNotification {left: 26px; top: 12px !important;} .lst-box > .lst-cnt ul > li > .srIcon, .lst-box > .lst-cnt ul > li > .srThumb {border-radius: 2px; font-size: 15.5px; height: 30px; line-height: 30px; text-align: center; width: 30px;} .lst-box > .lst-cnt ul > li > .srContent {margin: 0 5px; text-align: left; width: calc(100% - 50px);} .lst-box > .lst-cnt ul > li > .srContent > span {display: block; font-weight: 500; height: 30px; line-height: 30px;} .lst-box > .lst-cnt ul > li > .srResult {margin: 0 0 0 10px; text-align: left; width: calc(100% - 90px);} .lst-box > .lst-cnt ul > li > .srResult > span {display: block; font-weight: 500; height: 15px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .lst-box > .lst-cnt ul > li > .srResult > span.name {font-weight: 700;} .lst-box > .lst-cnt ul > li > .srStatus {border-radius: 2px; height: 30px; text-align: center; width: 30px;} .lst-box > .lst-cnt ol {} /* LIST SUMMARY BOX */ .lst-sum-box {background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(230, 230, 230, 1); border-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; color: rgba(80, 80, 80, 1); display: none; font-size: 12.5px; left: 0; padding: 0; position: absolute; top: 0px; width: 250px; z-index: 100;} .lst-sum-box::before, .lst-sum-box::after {content: ""; display: block; position: absolute; transition: all 0.1s linear 0s;} .lst-sum-box::before {border-top: 11px solid rgba(215, 215, 215, 1); border-left: 11px solid transparent; border-right: 10px solid transparent; height: 0px; left: 7px; bottom: -9px; width: 0px; z-index: 2;} .lst-sum-box::after {border-top: 8px solid rgba(255, 255, 255, 1); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom-width: 9px; height: 0px; left: 10px; bottom: -8px; width: 0px; z-index: 2;} *:hover > .lst-sum-box {display: block; text-align: left;} .lst-sum-box > .lst-cnt {background-color: rgba(255, 255, 255, 1); border-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; max-height: 490px; overflow-x: hidden; overflow-y: overlay; position: relative; z-index: 10;} .lst-sum-box > .lst-cnt > div {background-color: rgba(255, 255, 255, 1); border-radius: 4px; cursor: pointer; display: inline-block; float: left; height: 220px; overflow: hidden; position: relative; text-align: left; width: 250px;} .lst-sum-box > .lst-cnt > div::before {content: ""; display: block; left: 0; position: absolute; top: 0; z-index: 1;} .lst-sum-box > .lst-cnt > div > ul {display: block; list-style: none; margin: 0; width: 100%;} .lst-sum-box > .lst-cnt > div > ul > li {background-color: rgba(255, 255, 255, 1); border-radius: 4px; cursor: pointer; display: inline-block; float: left; height: 220px; margin: 0; overflow: hidden; position: relative; width: 250px;} .lst-sum-box > .lst-cnt > div > ul > li::before {content: ""; display: block; left: 0; position: absolute; top: 0; z-index: 1;} .lst-sum-box > .lst-cnt > div > ul > li > div {} /* TINYEDITOR */ .tinyeditor {padding: 0px !important; position: relative;} .tinyeditor > div {} .tinyeditor .tinyeditor-header {border: none !important; box-sizing: border-box; height: auto !important; padding: 10px 330px 10px 10px !important; position: relative; background-color: #f4f3f6; /* until dark mode implemented on wysiwyg */} .tinyeditor .tinyeditor-header::before {background-color: rgb(185, 185, 185); bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%;} .tinyeditor .tinyeditor-header::after {clear: both; content: ""; display: table;} .tinyeditor .tinyeditor-header .tinyeditor-buttons-group {display: inline-block; float: left; margin: 0 0 5px; vertical-align: top;} .tinyeditor .tinyeditor-header .tinyeditor-buttons-group > .tinyeditor-control {height: 25px; line-height: 25px; width: 25px;} .tinyeditor .tinyeditor-header .tinyeditor-buttons-group > .tinyeditor-control > i {height: 100%; line-height: inherit; margin: 0; text-align: center; width: 100%;} .tinyeditor .tinyeditor-header .tinyeditor-buttons-group > .tinyeditor-control > select {height: 25px !important; line-height: 25px !important; width: 100% !important; -webkit-appearance: none;} .tinyeditor .tinyeditor-header .tinyeditor-buttons-group > .tinyeditor-divider {height: 10px !important; margin: 10px 5px;} .tinyeditor > .tinyeditor-tokens {height: 30px; position: absolute; right: 10px; top: 45px; z-index: 10;} .tinyeditor > .tinyeditor-tokens > .tokens {position: relative;} .tinyeditor > .tinyeditor-tokens > .tokens::after {clear: both; content: ""; display: table;} .tinyeditor > .tinyeditor-tokens > .tokens > label {display: inline-block; float: left; margin: 0px 5px 0 0 !important; width: 100px;} .tinyeditor > .tinyeditor-tokens > .tokens > label:last-of-type {margin-right: 0 !important; width: 120px;} .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol {border: 1px solid rgba(205, 205, 205, 1); border-radius: 4px; height: 30px; margin: 0; width: calc(100% - 0px);} .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol:focus, .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol:hover {background-color: rgba(255, 255, 255, 1); border-color: rgba(0, 175, 135, 1);} .tinyeditor > .tinyeditor-tokens select { width: 120px; height: 25px; color: #232323 !important; background-color: white; /* until dark mode implemented on wysiwyg */} .mnl-msg-edt-msg .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol {border: 1px solid transparent; background-color: var(--color-highlight-100); color: var(--color-text);} .mnl-msg-edt-msg .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol:focus, .mnl-msg-edt-msg .tinyeditor > .tinyeditor-tokens > .tokens > label > .formcontrol:hover { background-color: var(--color-highlight-100); border-color: rgba(0, 175, 135, 1);} .dsEmailDetails wysiwyg-edit .tinyeditor {border: 1px solid rgba(200, 200, 200, 1);} .tinyeditor textarea {border: 0px !important;} .cke_chrome {border: 0px !important;} .cke_bottom {border-top: 0px !important; background: none !important; padding-left: 160px !important; padding-right: 12px !important; position: absolute !important; bottom: 0px;} .cke_contents {padding-left: 12px !important; padding-right: 12px !important;} a.cke_button {opacity: .7; border: none !important; cursor: pointer !important; } a.cke_button:hover {opacity: 1; border: none !important; background-color: #fff !important; padding: 4px 6px !important;} .cke_combo__font, .cke_combo__fontsize {background: #fff !important;} .cke_combo_button:hover {background-color: #fff !important; border: 1px solid #fff !important;} .check-verified i { position: relative; top: 2.4em; right: -110px; color: #00AA00; font-size: 16px; } figure { margin: 0; } .notif-icon { color: white; font-size: 20px; padding-top: 8px; } .opaque-icon { opacity: .5; margin-left: 2px; font-size: 12.5px; margin-right: 3px; } .statusicon-padding { padding-right: 8px; } .cdk-virtual-scroll-content-wrapper {width: 100% !important;} .emoji-mart { background-color: var(--color-customer-card-background-content) !important; border: 1px solid var(--color-highlight-200) !important; } .emoji-mart-search input { box-sizing: border-box !important; background-color: var(--color-background-input) !important; color: var(--color-text) !important; } .emoji-mart-search-icon{ fill: var(--color-text) !important; } .emoji-mart-category-label span { background-color: var(--color-customer-card-background-content) !important; color: var(--color-text) !important; } .emoji-mart .emoji-mart-emoji { color: var(--color-text) !important; } .theme-dark .emoji-mart .emoji-mart-emoji:hover { color: var(--color-inverted) !important; } .ag-fresh #south {display: none !important;} .driveDialogContent div[layout] { box-sizing: border-box; display: flex; } /* LIVE DASHBOARD TV MODE */ .tv-mode #driveBody { position: fixed; margin: 0; z-index: 100000; top: 0; left: 0; right: 0; width: 100vw; bottom: 0; height: 100vh; } .tv-mode div#intercom-container, .tv-mode div.intercom-lightweight-app { display: none; } .dc-global-tooltip{ padding: 12px 16px; box-shadow: 0px 8px 16px rgba(48, 49, 51, 0.1), 0px 0px 1px rgba(48, 49, 51, 0.05); border-radius: 8px; box-sizing: border-box; background: var(--color-background-light); color: var(--color-text-light); font-family: 'Montserrat', sans-serif; letter-spacing: 0.4px; line-height: 16px; font-size: 11.92px; font-weight: 600; } .driveCustomerActionMenu > ul > li .theme-toggle { width: 66px; height: 24px; position: absolute; top: 0px; right: 0px; border-radius: 32px; background-color: #F3F3F3; padding: 4px; } .theme-dark .driveCustomerActionMenu > ul > li .theme-toggle { background-color: #202124; } .driveCustomerActionMenu > ul > li .theme-toggle > i { height: 24px; width: 32px; text-align: center; font-size: 16px; line-height: 25px; float: left; color: #C8CAD0; border-radius: 32px; } .theme-dark .driveCustomerActionMenu > ul > li .theme-toggle > i { color: var(--color-text-light); } .driveCustomerActionMenu > ul > li .theme-toggle > i.selected { background-color: #fff; color: #232323; } .theme-dark .driveCustomerActionMenu > ul > li .theme-toggle > i.selected { background-color: #36383F; color: #fff; } drc-reportviewer { display: block; height: 100%; background-color: var(--color-background); } .mat-mdc-dialog-component-host:not(ng-component):not(drc-inventory-modal) { display: inherit !important; } /* TODO: FPFE-371 move this to UiKit */ :root { --mat-dialog-container-max-width: 100%; }