/*=============================================== Select Font Family Option in Settings Step for Front Website ================================================= */ @font-face { font-family: 'AcuminPro'; src: url('vendor/fonts/websiteFont/AcuminPro-Regular.eot'); src: url('vendor/fonts/websiteFont/AcuminPro-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/AcuminPro-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/AcuminPro-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/AcuminPro-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/AcuminPro-Regular.svg#AcuminPro-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Arial'; src: url('vendor/fonts/websiteFont/ArialMT.eot'); src: url('vendor/fonts/websiteFont/ArialMT.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/ArialMT.woff2') format('woff2'), url('vendor/fonts/websiteFont/ArialMT.woff') format('woff'), url('vendor/fonts/websiteFont/ArialMT.ttf') format('truetype'), url('vendor/fonts/websiteFont/ArialMT.svg#ArialMT') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Audi'; src: url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.eot'); src: url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.woff2') format('woff2'), url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.woff') format('woff'), url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.ttf') format('truetype'), url('vendor/fonts/websiteFont/AudiType-ExtendedNormal.svg#AudiType-ExtendedNormal') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'AudiWide'; src: url(vendor/fonts/websiteFont/AudiType-WideNormal.woff2) format("woff2"),url(vendor/fonts/websiteFont/AudiType-WideNormal.woff) format("woff"), url(vendor/fonts/websiteFont/AudiType-WideNormal.ttf) format("truetype"); font-style: normal; font-weight: normal; font-display: swap; } @font-face { font-family: 'Avenir'; src: url('vendor/fonts/websiteFont/Avenir-Medium.eot'); src: url('vendor/fonts/websiteFont/Avenir-Medium.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Avenir-Medium.woff2') format('woff2'), url('vendor/fonts/websiteFont/Avenir-Medium.woff') format('woff'), url('vendor/fonts/websiteFont/Avenir-Medium.ttf') format('truetype'), url('vendor/fonts/websiteFont/Avenir-Medium.svg#Avenir-Medium') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'BallingerMono'; src: url('vendor/fonts/websiteFont/BallingerMono-Regular.eot'); src: url('vendor/fonts/websiteFont/BallingerMono-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/BallingerMono-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/BallingerMono-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/BallingerMono-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/BallingerMono-Regular.svg#BallingerMono-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Bmw'; src: url('vendor/fonts/websiteFont/BMWTypeNextLatin-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Regular.svg#BMWTypeNextLatin-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'BmwLight'; src: url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.eot'); src: url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.woff2') format('woff2'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.woff') format('woff'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.ttf') format('truetype'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Light.svg#BMWTypeNextLatin-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'BmwThin'; src: url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.eot'); src: url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.woff2') format('woff2'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.woff') format('woff'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.ttf') format('truetype'), url('vendor/fonts/websiteFont/BMWTypeNextLatin-Thin.svg#BMWTypeNextLatin-Thin') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'CitroenType'; src: url('vendor/fonts/websiteFont/CitroenType-Regular.eot?v=1.1'); src: url('vendor/fonts/websiteFont/CitroenType-Regular.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/CitroenType-Regular.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/CitroenType-Regular.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/CitroenType-Regular.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'ClearSans'; src: url('vendor/fonts/websiteFont/ClearSans-Regular-webfont.eot?v=1.1'); src: url('vendor/fonts/websiteFont/ClearSans-Regular-webfont.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/ClearSans-Regular-webfont.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/ClearSans-Regular-webfont.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/ClearSans-Regular-webfont.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Cupra'; src: url('vendor/fonts/websiteFont/Cupra-Regular.eot'); src: url('vendor/fonts/websiteFont/Cupra-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Cupra-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Cupra-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Cupra-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Cupra-Regular.svg#Cupra-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'DaciaSpirit'; src: url('vendor/fonts/websiteFont/DaciaSpirit-Regular.eot'); src: url('vendor/fonts/websiteFont/DaciaSpirit-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/DaciaSpirit-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/DaciaSpirit-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/DaciaSpirit-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/DaciaSpirit-Regular.svg#Read-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'DSAutomobiles'; src: url(vendor/fonts/websiteFont/DSAutomobiles-Regular.woff2) format("woff2"),url(vendor/fonts/websiteFont/DSAutomobiles-Regular.woff) format("woff"), url(vendor/fonts/websiteFont/DSAutomobiles-Regular.ttf) format("truetype"); font-style: normal; font-weight: normal; font-display: swap; } @font-face { font-family: 'FiraSans'; src: url('vendor/fonts/websiteFont/FiraSans-Regular.eot'); src: url('vendor/fonts/websiteFont/FiraSans-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/FiraSans-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/FiraSans-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/FiraSans-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/FiraSans-Regular.svg#FiraSans-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'FordAntenna'; src: url('vendor/fonts/websiteFont/FordAntenna-Regular.eot'); src: url('vendor/fonts/websiteFont/FordAntenna-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/FordAntenna-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/FordAntenna-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/FordAntenna-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/FordAntenna-Regular.svg#FordAntenna-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Georgia'; src: url('vendor/fonts/websiteFont/Georgia.eot'); src: url('vendor/fonts/websiteFont/Georgia.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Georgia.woff2') format('woff2'), url('vendor/fonts/websiteFont/Georgia.woff') format('woff'), url('vendor/fonts/websiteFont/Georgia.ttf') format('truetype'), url('vendor/fonts/websiteFont/Georgia.svg#Georgia') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('vendor/fonts/websiteFont/Helvetica.eot'); src: url('vendor/fonts/websiteFont/Helvetica.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Helvetica.woff2') format('woff2'), url('vendor/fonts/websiteFont/Helvetica.woff') format('woff'), url('vendor/fonts/websiteFont/Helvetica.ttf') format('truetype'), url('vendor/fonts/websiteFont/Helvetica.svg#Helvetica') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyundai'; src: url('vendor/fonts/websiteFont/hyundaisanshead-regular-webfont.woff2') format('woff2'),url('vendor/fonts/websiteFont/hyundaisanshead-regular-webfont.woff') format('woff'),url('vendor/fonts/websiteFont/hyundaisanshead-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Jeep'; src: url('vendor/fonts/websiteFont/ProximaNova-Regular.woff2') format('woff2'),url('vendor/fonts/websiteFont/ProximaNova-Regular.woff') format('woff'),url('vendor/fonts/websiteFont/ProximaNova-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Kia'; src: url('vendor/fonts/websiteFont/kia_light.eot'); src: url('vendor/fonts/websiteFont/kia_light.eot?#iefix') format('embedded-opentype'),url('vendor/fonts/websiteFont/kia_light.woff2') format('woff2'),url('vendor/fonts/websiteFont/kia_light.woff') format('woff'),url('vendor/fonts/websiteFont/kia_light.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('vendor/fonts/websiteFont/Lato-Regular.eot'); src: url('vendor/fonts/websiteFont/Lato-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Lato-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Lato-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Lato-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexus'; src: url('vendor/fonts/websiteFont/Nobel-Regular.eot?v=1.1'); src: url('vendor/fonts/websiteFont/Nobel-Regular.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/Nobel-Regular.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/Nobel-Regular.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/Nobel-Regular.svg?v=1.1#Nobel-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'LibreFranklin'; src: url('vendor/fonts/websiteFont/LibreFranklin-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/LibreFranklin-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/LibreFranklin-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Mazda'; src: url('vendor/fonts/websiteFont/MazdaType-Regular.eot'); src: url('vendor/fonts/websiteFont/MazdaType-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/MazdaType-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/MazdaType-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/MazdaType-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/MazdaType-Regular.svg#MazdaType-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'MG'; src: url('vendor/fonts/websiteFont/FavoritStd-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/FavoritStd-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/FavoritStd-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Mont'; src: url('vendor/fonts/websiteFont/Mont-Regular.eot'); src: url('vendor/fonts/websiteFont/Mont-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Mont-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Mont-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Mont-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Mont-Regular.svg#Mont-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('vendor/fonts/websiteFont/Montserrat-Regular.eot'); src: url('vendor/fonts/websiteFont/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Montserrat-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Montserrat-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Montserrat-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Nissan'; src: url('vendor/fonts/websiteFont/nissanbrandregular.eot?v=1.1'); src: url('vendor/fonts/websiteFont/nissanbrandregular.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/nissanbrandregular.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/nissanbrandregular.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/nissanbrandregular.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Nobel'; src: url('vendor/fonts/websiteFont/Nobel-Regular.eot?v=1.1'); src: url('vendor/fonts/websiteFont/Nobel-Regular.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/Nobel-Regular.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/Nobel-Regular.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/Nobel-Regular.svg?v=1.1#Nobel-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('vendor/fonts/websiteFont/Nunito-Regular.eot'); src: url('vendor/fonts/websiteFont/Nunito-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Nunito-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Nunito-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Nunito-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Nunito-Regular.svg#Nunito-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpelNext'; src: url('vendor/fonts/websiteFont/OpelNext.eot?v=1.1'); src: url('vendor/fonts/websiteFont/OpelNext.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/OpelNext.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/OpelNext.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/OpelNext.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url('vendor/fonts/websiteFont/OpenSans-Regular-webfont.eot?v=1.1'); src: url('vendor/fonts/websiteFont/OpenSans-Regular-webfont.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/OpenSans-Regular-webfont.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/OpenSans-Regular-webfont.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/OpenSans-Regular-webfont.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Orbitron'; src: url('vendor/fonts/websiteFont/Orbitron-Regular.eot'); src: url('vendor/fonts/websiteFont/Orbitron-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Orbitron-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Orbitron-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Orbitron-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Orbitron-Regular.svg#Orbitron-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('vendor/fonts/websiteFont/Oswald-Regular.eot'); src: url('vendor/fonts/websiteFont/Oswald-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Oswald-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Oswald-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Oswald-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Oswald-Regular.svg#Oswald-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Peugeot'; src: url('vendor/fonts/websiteFont/PeugeotNew-Regular.eot'); src: url('vendor/fonts/websiteFont/PeugeotNew-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/PeugeotNew-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/PeugeotNew-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/PeugeotNew-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/PeugeotNew-Regular.svg#PeugeotNew-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('vendor/fonts/websiteFont/Poppins-Regular.eot'); src: url('vendor/fonts/websiteFont/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Poppins-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Poppins-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Poppins-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Poppins-Regular.svg#Poppins-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'RenaultNouvelR'; src: url('vendor/fonts/websiteFont/NouvelR-Regular.eot'); src: url('vendor/fonts/websiteFont/NouvelR-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/NouvelR-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/NouvelR-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/NouvelR-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/NouvelR-Regular.svg#NouvelR-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'SKODANext'; src: url('vendor/fonts/websiteFont/SKODANext-Regular.eot'); src: url('vendor/fonts/websiteFont/SKODANext-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/SKODANext-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/SKODANext-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/SKODANext-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/SKODANext-Regular.svg#NouvelR-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('vendor/fonts/websiteFont/Roboto-Regular.eot'); src: url('vendor/fonts/websiteFont/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/Roboto-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/Roboto-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/Roboto-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/Roboto-Regular.svg#Roboto-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'RobotoSlab'; src: url('vendor/fonts/websiteFont/RobotoSlab-Regular.eot'); src: url('vendor/fonts/websiteFont/RobotoSlab-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/RobotoSlab-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/RobotoSlab-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/RobotoSlab-Regular.svg#RobotoSlab-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'SourceSansPro'; src: url('vendor/fonts/websiteFont/sourcesanspro-regular-webfont.eot?v=1.1'); src: url('vendor/fonts/websiteFont/sourcesanspro-regular-webfont.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/sourcesanspro-regular-webfont.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/sourcesanspro-regular-webfont.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/sourcesanspro-regular-webfont.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'TitilliumWeb'; src: url('vendor/fonts/websiteFont/TitilliumWeb-Regular.eot'); src: url('vendor/fonts/websiteFont/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/TitilliumWeb-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/TitilliumWeb-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/TitilliumWeb-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/TitilliumWeb-Regular.svg#TitilliumWeb-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Toyota'; src: url('vendor/fonts/websiteFont/toyotadisplay_rg-webfont.eot?v=1.1'); src: url('vendor/fonts/websiteFont/toyotadisplay_rg-webfont.eot?#iefix&v=1.1') format('embedded-opentype'), url('vendor/fonts/websiteFont/toyotadisplay_rg-webfont.woff?v=1.1') format('woff'), url('vendor/fonts/websiteFont/toyotadisplay_rg-webfont.ttf?v=1.1') format('truetype'), url('vendor/fonts/websiteFont/toyotadisplay_rg-webfont.svg?v=1.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'ToyotaType'; src: url('vendor/fonts/websiteFont/ToyotaType-Regular.eot'); src: url('vendor/fonts/websiteFont/ToyotaType-Regular.eot?#iefix') format('embedded-opentype'), url('vendor/fonts/websiteFont/ToyotaType-Regular.woff2') format('woff2'), url('vendor/fonts/websiteFont/ToyotaType-Regular.woff') format('woff'), url('vendor/fonts/websiteFont/ToyotaType-Regular.ttf') format('truetype'), url('vendor/fonts/websiteFont/ToyotaType-Regular.svg#ToyotaType-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'VauxhallNeue'; src: url('vendor/fonts/websiteFont/VauxhallNeueRegular.eot'); src: url('vendor/fonts/websiteFont/VauxhallNeueRegular.eot') format("embedded-opentype"), url('vendor/fonts/websiteFont/VauxhallNeueRegular.woff2') format("woff2"), url('vendor/fonts/websiteFont/VauxhallNeueRegular.woff') format("woff"), url('vendor/fonts/websiteFont/VauxhallNeueRegular.ttf') format("truetype"), url('vendor/fonts/websiteFont/VauxhallNeueRegular.svg#VauxhallNeueRegular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } html.portal-site-master { background: var(--theme-gradient-2); background-blend-mode: lighten; } html.portal-site-master body { background: #fff; } body { margin: 0; font-family: var(--body-font-family); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); color: var(--body-color); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Bootstraps ".container" class has been changed to a fluid full * width container */ .container { width: 100%; } /*===============================================B. Grid ================================================= */ .row { margin-left: -11px; margin-right: -11px; } .row.d-flex:after, .row.d-flex:before { display: none; } .row.table-layout { margin-left: 0; margin-right: 0; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-2-0, .col-sm-2-0, .col-md-2-0, .col-lg-2-0, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 11px; padding-right: 11px; } /*===============================================C. Typography================================================= */ .cBoxinline .cBox label { color: #333 !important; vertical-align: top; font-size: 12px; font-weight: 600; } .cBoxinline .variant input { margin: 2px 0px 0px 2px; } .cBoxinline .variant { width: 100%; } .cBoxinline .variant td { width: inherit !important; } ul, ol { padding-left: 30px; } li { margin-bottom: 7px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--secondary); } *[onclick] { cursor: pointer; } a { color: var(--body-color); cursor: pointer; } a:hover { color: var(--primary); text-decoration: none; } a:focus { outline: none; text-decoration: none; } a:not([href]):not([onclick]) { cursor: default; color: inherit; } .cursor-inherit { cursor: inherit !important; } .break-all { word-break: break-all; } .text-nowrap { white-space: nowrap !important; } b, strong { font-weight: 500; } p { line-height: 22px; font-weight: 400; } p.small, p small { font-size: 13px; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; color: inherit; text-rendering: optimizelegibility; margin-bottom: 10px; } h1 { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 18px; margin-left: -0.05em; font-weight: bold; } h1.small { font-size: 26px; } h2 { font-size: 32px; line-height: 1.17; } h2.small { font-size: 20px; } h3 { font-size: 24px; font-weight: 400; line-height: 1.1; } h3.small { font-size: 16px; } h4, h5, h6 { line-height: 18px; } h4 { font-size: 22px; font-weight: bold; line-height: 1.1; } h4:empty { display: none; } h5 { font-size: 13px; } h5.small, h5 small { font-size: 12px; } h6 { font-size: 11px; color: #999; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; color: #999999; } .fw400 { font-weight: 400; } .fw600 { font-weight: 600; } .fw700 { font-weight: 700; } .text-uppercase { text-transform: uppercase; } .pt0 { padding-top: 0px; } /* Specialty Header - Also a Divider */ .page-header { text-shadow: 0 1px #FFF; border-bottom: 1px solid #c9c9c9; margin-bottom: 30px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } /* Dividers */ hr { margin: 35px 0; border-top: 1px solid var(--border-color); } hr.alt { border-top: 1px dashed #cccccc; } hr.short { margin: 20px 0; } hr.tall { margin: 55px 0; } .divider { height: 1px; margin: 25px 0; background: #e2e2e2; } /* Carets */ .caret-xs { border-width: 2px; } .caret-sm { border-width: 3px; } .caret-lg { border-width: 5px; } /* Display Style */ .inline { display: inline !important; } .block { display: block !important; } .inline-block { display: inline-block !important; } /*===============================================D. Animations================================================= */ /* used in conjuction with "data-animate" * attr to create a delayed page animation * read docs for more info on proper use*/ .animated-delay { opacity: 0; } .sparkline-delay { height: 0; display: block; line-height: 40px; } /* ================================================ II. PRIMARY COMPONENTS A. Navbar B. Sidebar C. Topbar=================================================== A. Navbar=================================================== */ table th { font-weight: 500; } th[align="center"] { text-align: center; } .navbar-brand { height: 60px; line-height: 48px; padding: 0; color: #5d5d5d; font-size: 19px; font-weight: 400; letter-spacing: 0.5px; } /* Navbar Toggle Button for Sidebar */ .sidebar-collapsed #toggle_sidemenu_l { font-size: 24px; } .sidebar-none .toggle_icon { display: none; } /* Left Navbar Container */ .navbar { display: flex; align-items: center; justify-content: space-between; margin: 0; height: 93px; padding-top: 2px; border: none; z-index: 99; } .navbar:before, .navbar:after { display: none; } .navbar-left { display: flex; align-items: center; margin-left: 31px; } .navbar-branding a { width: 216px; display: inline-flex; align-items: center; } .navbar-branding { position: relative; display: inline-flex; padding: 0; margin-right: 31px; overflow: hidden; } .navbar .dropdown-el { border-color: #bbbbbb; z-index: 99; } .navbar .navbar-info { display: inline-flex; align-items: center; line-height: 1; margin-right: 39px; font-size: 13px; font-weight: 500; } .navbar-user { display: inline-flex; align-items: center; } .navbar-user .navbar-profile { display: inline-flex; align-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; font-size: 18px; margin: 0px 27px 0 17px; font-weight: 400; } .navbar-user .navbar-profile span { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; color: #fff; } .navbar-logout a { display: inline-flex; align-items: center; } .navbar-logout a .fa { margin-left: 13px; font-size: 26px; } .navbar-logout a:before { content: ""; width: 1px; background-color: #000; display: flex; height: 11px; margin-right: 10px; } /* Navbar Left Divider */ .navbar-divider { position: absolute; left: 0; top: 15px; height: 30px; width: 1px; border-left: 1px solid #ebebeb; } /* Left Side Menus */ #settings_menu, #language_menu { float: left; position: relative; padding: 19px 0; margin-left: 28px; color: #888; font-size: 15px; font-weight: 600; } #settings_menu a, #language_menu a { text-decoration: none; } #settings_menu .dropdown-menu, #language_menu .dropdown-menu { border: 1px solid #CCC; border-radius: 2px; padding: 2px 0; box-shadow: none; margin-left: -10px; } #settings_menu .dropdown-menu li, #language_menu .dropdown-menu li { margin-bottom: 3px; } /* Settings Menu */ #settings_menu { margin-left: 25px; } #settings_menu .glyphicons { font-size: 14px; } #settings_menu.open > .glyphicons { color: #f9892e; } #settings_menu .dropdown-menu { margin-left: -20px; } /* Language Menu */ #language_menu { top: -1px; } #language_menu a:hover { text-decoration: none; outline: none; } /* Language Menu Text */ #language_menu a > span { color: #a287d4; } /* Language Menu Icon */ #language_menu .fa { font-size: 14px; color: #999; } /* Right Navbar Container */ .navbar-right { display: inline-flex; align-items: center; margin-right: 39px; font-size: 13px; font-weight: 500; } /* Header Search Area */ .navbar-search { position: relative; float: left; overflow: hidden; width: 230px; height: 60px; padding: 15px; padding-right: 25px; } .navbar-search:after { content: ""; position: absolute; right: 0; top: 15px; height: 32px; border-right: 1px solid #ebebeb; } .navbar-search input { outline: none; color: #AAA; font-size: 18px; font-weight: 300; background: #FFF; border: 1px solid var(--border-color); border-radius: 15px; padding: 1px 13px; width: 100%; } /* Navbar Menus */ .navbar-menus { float: right; margin-right: 10px; } .navbar-menus > .btn-group { float: left; margin-right: 0; } .navbar-menus > .btn-group.open .glyphicons { color: #f9892e; } /* Reduces the size of the Right SideMenu Toggle button */ .navbar-menus > .btn-group:last-child { max-width: 55px; } .navbar-menus > .btn-group > button { position: relative; color: #666; padding: 21px 20px 18px; background: transparent; border: none; border-radius: 0; outline: none; } .navbar-menus > .btn-group.open .dropdown-toggle { box-shadow: none; } /* Header Menu Number Text */ .navbar-menus > .btn-group > button > b { position: absolute; top: 14px; left: 30px; display: block; width: 20px; height: 20px; line-height: 16px; color: #FFF; font-size: 13px; font-weight: 600; border: 1px solid #FFF; border-radius: 100%; background: #a87fc6; } /* Header Button Dropdowns */ .navbar-menus ul.dropdown-menu, .navbar-menus div.dropdown-menu { min-width: 316px; padding: 0; right: -5px; left: auto; margin: 6px 0; font-size: 13px; border-color: #CCC; } /* Header Menu Dropdown - Header */ .navbar-menus .dropdown-header { padding: 9px 20px; margin: 0; font-size: 13px; font-weight: 600; color: #666; background: #f9f9f9; position: relative; border-bottom: 1px solid var(--border-color); border-radius: 2px 2px 0 0; } /* Header Bar Dropdowns Arrows */ .navbar-menus .dropdown-menu:before, .navbar-menus .dropdown-menu:after { z-index: 15; content: ""; position: absolute; bottom: 100%; right: 23px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 12px solid #f2f2f2; } .navbar-menus .dropdown-menu:after { z-index: 14; border-bottom-color: #999; } /* Header Menu Dropdown - Sub Header */ .dropdown-submenu { padding: 11px 0 8px; border-bottom: 1px solid #eee; } .dropdownSearch { position: relative; top: 1px; left: 12px; border: none; } .dropdownSearch:focus { outline: none; } .dropdownSearch::-webkit-input-placeholder { font-weight: 600; font-size: 13px; color: #BBB; } .dropdownSearch::-moz-placeholder { font-weight: 600; font-size: 13px; color: #BBB; } /* firefox 19+ */ .dropdownSearch:-ms-input-placeholder { font-weight: 600; font-size: 13px; color: #BBB; } /* ie */ .dropdownSearch:-moz-placeholder { font-weight: 600; font-size: 13px; color: #BBB; } /* Header Menu Dropdown - Footer */ .navbar-menus .dropdown-footer { padding: 11px 20px; margin: 0; z-index: 999; font-size: 11px; color: #999; background: #FFF; text-align: center; position: relative; border-top: 1px solid var(--border-color); border-radius: 0 0 3px 3px; } .navbar-menus .dropdown-footer a { color: #2066b1; } .navbar-menus .dropdown-footer a:hover { background: transparent; } .navbar-menus .dropdown-footer i.fa { padding-left: 3px; } /* Dropdown Checklist Toggle - The Task menu is a clickable checklist */ .task-checked > div:not(.item-checkbox) { opacity: 0.4; } /* add a text line through effect on any clickable checklist by adding ".text-slash" */ .task-checked .text-slash { text-decoration: line-through; } /* Removes borders from Nav-Tabs that are placed in header dropdowns */ .navbar-menus .nav-tabs { margin-top: -1px; margin-left: -1px; } .navbar-menus .nav-tabs > li > a { padding: 10px 27px; border-color: #DDD; } /* Navbar Tickets Dropdown */ .ticket-body { width: 87%; } .ticket-handle { position: relative; width: 13%; border-right: 1px solid #ffe3e3; } .ticket-handle:after { content: ""; position: absolute; top: 0; right: 2px; height: 100%; border-right: 1px solid #ffe3e3; } /* Navbar Todo-List Dropdown */ .todo-body { width: 82%; } .todo-handle { position: relative; width: 8%; } .v-handle { width: 10px; height: 14px; background-image: url(../img/plugins/handle.png); } /* A. LEFT SIDEBAR A. Default Open State B. Sidebar User Area C. Sidebar Item State D. Sidebar Toggle - Media Query E. Sidebar Toggle - User input=================================================A. Default Open State================================================= */ .main-layout { display: flex; min-height: calc(100vh - 93px); padding-left: 15px; padding-right: 15px; position: relative; justify-content: flex-end; } main { width: calc(100% - var(--aside-width-collapsed) - 20px); border-radius: 25px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 16px; padding-bottom: 60px; position: relative; z-index: 99; transition: 0.5s ease; background: var(--theme-gradient-2); background-blend-mode: lighten; } main:after { content: ""; position: absolute; z-index: 2; inset: 0; top: initial; height: 80px; pointer-events: none; margin: auto; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff); } .copy-rights-inner { text-align: right; padding-right: 0; position: absolute; z-index: 3; right: 12px; bottom: 23px; width: 100%; font-size: 10px; color: #666666; } .copy-rights-inner a { color: inherit; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; min-height: 100vh; } /*---------------------------------------------------------------------------- SIDE NAVIGATION -----------------------------------------------------------------------------*/ aside { width: var(--aside-width); min-width: var(--aside-width); transition: var(--aside-transition); margin-right: 20px; position: absolute; left: 15px; top: 0; } aside a { color: var(--gray) !important; cursor: pointer !important; } aside .home-menus { position: relative; padding: 25px 7px; border-radius: 25px; background-color: #fff; box-shadow: rgba(149, 157, 165, 0.15) 0px 8px 20px; } aside .home-menus:before { content: ""; width: 13px; height: 100%; position: absolute; inset: 0; left: -15px; right: initial; } aside .menu { position: relative; color: var(--gray); font-size: 10px; font-weight: 500; padding-left: 13px; margin-left: 1px; display: flex; align-items: center; transition: 0.5s ease; } aside .menu i { font-size: 19px; cursor: pointer; position: absolute; top: -3px; right: 0; bottom: 0; margin: auto 5px; display: inline-flex; } aside .sidebar-brand { display: inline-flex; width: 150px; margin-bottom: 32px; margin-left: 5px; } aside .sidebar-menu { margin-top: 14px; } aside .sidebar-menu .angleCaret { position: absolute; right: 9px; font-size: 11px; transition: .2s all ease-in-out; } aside .sidebar-menu a { padding: 10px 13px; display: flex; align-items: center; width: 100%; border-radius: 7px; text-decoration: none; line-height: 1.2; position: relative; cursor: pointer; transition: 0.5s ease; } aside .sidebar-menu ul { width: 100%; } aside .sidebar-menu ul li { width: 100%; margin-bottom: 0; } aside .sidebar-menu .menu-open { color: var(--secondary); } aside .sidebar-menu .menu-open .angleCaret { transform: rotate(-180deg); } aside .sidebar-menu .active { } aside .sidebar-menu .active, aside .sidebar-menu a:hover { color: var(--secondary) !important; } aside .sidebar-menu .sidebar-icon { min-width: 20px; text-align: center; margin-right: 15px; transition: 0.5s ease; } aside .sidebar-menu .sidebar-title { font-size: 12px; font-weight: 500; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.6s ease; } aside .sidebar-menu .li-dashboard { margin-bottom: 9px } aside .sidebar-menu .li-dashboard a { height: 34px; } aside .sidebar-menu .li-dashboard .sidebar-icon { margin-right: 12px; } aside .sidebar-menu .sub-nav { display: none; background-color: rgba(0, 0, 0, 0.02); border-radius: 7px; margin: 8px 0; padding: 8px; width: 100%; transition: padding-left 0.5s ease, padding-right 0.5s ease; } aside .sidebar-menu .sub-nav a { } aside .sidebar-menu .menu-open + .sub-nav { display: block; } aside .sidebar-menu .sub-nav .sidebar-icon { font-size: 13px; } aside .sidebar-menu .sub-nav .sidebar-title { font-size: 12px; } aside .sidebar-menu .sub-nav .active { } aside .sidebar-logout { position: absolute; color: var(--gray); left: 39px; bottom: 40px; font-size: 12px; cursor: pointer; } aside .sidebar-logout:hover { color: #000; } aside .sidebar-logout i { margin-right: 14px; } /*---------------------------------------------------------------------------- ASIDE COLLAPSED -----------------------------------------------------------------------------*/ .sidebar-hidden:not(.bodylocked) aside { width: var(--aside-width-collapsed); min-width: var(--aside-width-collapsed); } .sidebar-hidden:not(.bodylocked) aside .home-menus { border-radius: 50px; } .sidebar-hidden:not(.bodylocked) aside .menu { justify-content: center; } .sidebar-hidden:not(.bodylocked) aside .menu i { right: 5px; } .sidebar-hidden:not(.bodylocked) aside .menu span { opacity: 0; pointer-events: none; } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .li-dashboard .sidebar-icon { /*margin: 0;*/ } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .sidebar-icon { margin: 0; } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .sidebar-title { opacity: 0; pointer-events: none; } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .angleCaret { opacity: 0; pointer-events: none; } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .sub-nav { background-color: transparent; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu a { } .sidebar-hidden:not(.bodylocked) aside .sidebar-menu .sub-nav .sidebar-icon { } .sidebar-hidden:not(.bodylocked) aside .sidebar-logout span { opacity: 0; pointer-events: none; } .sidebar-hidden:not(.bodylocked) main { } .bodylocked aside .menu i { color: var(--secondary); } .bodylocked main { width: calc(100% - var(--aside-width) - 20px); } /*===============================================B. Sidebar User Area================================================= */ .user-info { overflow: hidden; position: relative; display: block; height: 53px; width: 100%; padding: 3px 22px; border-top: 1px solid transparent; border-bottom: 1px solid #CCC; } /* User Area - Avatar */ .user-info .media-object { border-color: #c7b7e5; } .user-info .media-object img { max-width: 35px; } /* User Area Mobile Link - Replaces ".media-body" with single Icon for Mobile Devices */ .user-info .mobile-link { display: none; padding: 2px; } .user-info .mobile-link > span { padding-top: 8px; padding-left: 5px; color: #999; font-size: 18px; cursor: pointer; } .user-info .mobile-link span:hover, .user-info.usermenu-open .mobile-link span { color: #a287d4; } .user-info.usermenu-open .media-object { border-color: #a287d4; } /* User Area Menu - A slide down user menu */ .user-menu { display: none; position: relative; left: 0; top: 0; height: 165px; width: 100%; padding: 22px 22px 20px 16px; background: #f8f8f8; border-right: 1px solid #d6d6d6; } /* User Area Menu - bottom border(hidden on mobile) */ .user-menu:after { content: ""; position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background: #e5e5e5; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; } .user-menu a { color: #888; opacity: 0.8; } .user-menu a:hover { color: #666; opacity: 1; text-decoration: none; } .user-divider { height: 3px; width: 100%; background: #e7eef6; } /*===============================================C. Sidebar Item State================================================= */ /* Top Level Menu Item - BG color:hover */ .sidebar-menu > ul > li > a:hover { background-color: transparent; } /* Sub-Menu Level Item - BG color:hover */ .sidebar-menu ul.sub-nav > li > a:hover { background-color: #ededed; } /* Top Level Menu Item - Icon Color */ .sidebar-menu > ul > li.active > a > span:nth-child(1) { color: #a287d4; } /* Sub-Menu Level Item - Icon Color */ .sidebar-menu ul.sub-nav > li.active > a > span:nth-child(1) { color: #a287d4; } /* Active Menu item Caret */ .sidebar-menu ul > li.active > a > span.angleCaret { color: #9567b7; } /*====================================================E. Custom Menu - Email Menu====================================================== */ .email-menu { padding: 12px 22px 18px 18px; } .email-menu li { color: #999; font-weight: 600; padding-left: 27px; margin-bottom: 7px !important; } .email-menu li.menu-header { font-weight: 600; padding-left: 0; margin-bottom: 10px; } .email-menu li.menu-header .glyphicons { top: 2px; font-size: 14px; margin-right: 10px; } .email-menu .btn { text-indent: -8px; } .email-menu hr { margin: 18px 0 18px; } .email-menu ul li.active, .email-menu ul li:hover { color: #555; cursor: pointer; } /*=============================================== B. Right SideMenu================================================= */ #sidebar_right { position: fixed; z-index: 1031; width: 250px; height: 100%; top: 0; right: -250px; background: #363c47; } #sidebar_right .sidebar-right-header { width: 100%; height: 59px; background: #454d5d; border-bottom: 1px solid #555d6d; padding: 4px 10px 4px 20px; } #sidebar_right .sidebar_right_content a:hover { text-decoration: none; } body.sidebar-right-open #sidebar_right { right: 0; } /*=============================================== C. Topbar================================================= */ #topbar { /*z-index: 1023; position: relative;*/ width: 100%; /*height: 63px; max-height: 140px;*/ padding: 0 19px; } .topbar-right { float: right; } .breadcrumb { float: left; height: 63px; position: relative; padding: 24px 0 5px 0; margin-bottom: 0; border-radius: 0; font-size: 14px; background-color: transparent; border-bottom: 1px dashed #CCC; padding-right: 50px; } .breadcrumb > li { color: #888; font-size: 12px; } .breadcrumb > li.crumb-active > a { color: #555; font-size: 18px; } /* ================================================ III. PANELS A. Heading B. Panel Addon - Menu C. Panel Addon - Sidemenu D. Panel Addon - Tray E. Panel Tabs F. Panel Accordion G. Alternate Styles * Bootstrap Panels are a vital element in this* theme. Please read the documentation provided* with Fusion Admin to learn more===================================================A. Heading=================================================== */ .panel { position: relative; margin-bottom: 20px; border-radius: 15px; -webkit-box-shadow: none; box-shadow: none; border: none; } /* panel helper class */ .panel-overflow { overflow: hidden; } .panel-heading { position: relative; padding: 10px 20px; font-size: 13px; font-weight: 500; min-height: 60px; } .panel-heading:after, .panel-heading:before { content: ""; clear: both; display: block; } .panel-heading.d-flex { align-items: center; justify-content: space-between; } .panel-heading.d-flex:before, .panel-heading.d-flex:after { display: none; } .panel-heading + .panel-body { padding-top: 0; } .panel-title { font-size: 15px; display: inline-block; color: var(--body-color); padding-top: 14px; padding-bottom: 14px; } .panel-heading.bg-blue3 .panel-title { color: #FFF; } .panel-title > .fa, .panel-title > .glyphicon, .panel-title > .glyphicons, .panel-title > .imoon { min-width: 23px; margin-right: 8px; color: #a87fc6; font-size: 16px; top: 2px; } .panel-body { position: relative; padding: 20px; } /* Colored headers - via bg-* classes */ .panel-heading[class*='bg-'] { margin: -1px; } .panel-heading[class*='bg-'], .panel-heading[class*='bg-'] .glyphicon { color: #FFF; border: none; } .panel-heading[class*='bg-'] + .panel-body { border-top: none; } .panel-heading a { } .panel-heading a:hover { } .panel-footer { background-color: #fafafa; } .search-input { display: inline-flex; position: relative; } .search-input i { position: absolute; top: 0; bottom: 0; right: 15px; display: flex; align-items: center; cursor: pointer; } /*===============================================B. Panel Addon - Menu-----------------------------------------------Typically placed under the panel header and used to hold buttons or menus ================================================= */ .panel-menu { padding: 10px 13px; background-color: #fafafa; border-bottom: 1px solid var(--border-color); } .panel .panel-menu .btn.active { background-color: #FFF; box-shadow: none; } /*===============================================C. Panel Addon - Sidemenu-----------------------------------------------A side column great for housing anextra nav list. When used its siblingpanel body (content) is modified ================================================= */ /* Sidemenu and content are both floated. * to create equal heights we use the * "Table Layout" css helpers. These helpers * can be found in _helpers.scss */ .panel-sidemenu { padding: 15px; background-color: #f6f6f6; } .panel-sidemenu ul.nav li { margin-bottom: 4px; list-style: none; } .panel-sidemenu ul.nav li.nav-title { padding: 10px 0; color: #777; font-weight: 700; text-decoration: none; text-shadow: 0 1px #FFF; } .panel-sidemenu ul.nav li.nav-title:hover { color: #777777; } .panel-sidemenu ul.nav li a { padding: 5px 0; color: #888; } .panel-sidemenu ul.nav .divider { width: 80%; height: 1px; margin: 9px 0; overflow: hidden; background: #e2e2e2; } /*===============================================D. Panel Addon - Tray-----------------------------------------------A special slide out tray used to store additional information. Such as online users.================================================= */ .panel-tray { z-index: 11; position: absolute; top: 0; right: -210px; height: 100%; width: 210px; padding: 15px; border-left: 1px solid var(--border-color); background: #fafafa; -webkit-transition: right .1s ease-in-out; transition: right .1s ease-in-out; } .panel-tray.tray-open { right: 0px; } .panel-tray-toggle { z-index: 999; cursor: pointer; position: absolute; overflow: hidden; left: -28px; top: -1px; width: 28px; height: 29px; border: 1px solid var(--border-color); border-right: none; border-radius: 0 0 0 3px; background: #fafafa; } .panel-tray-toggle .fa, .panel-tray-toggle .glyphicon, .panel-tray-toggle .glyphicons, .panel-tray-toggle .imoon { font-size: 16px; color: #c7b7e5; text-align: center; padding: 6px; } /*===============================================E. PANEL TABS-----------------------------------------------Panel Tab Navigation must be placed inside".panel-heading" see Fusion Docs for example ================================================= */ .panel-tabs { position: absolute; bottom: 0; right: 0; } .panel-tabs > li { position: relative; float: left; margin-bottom: -1px; } .panel-tabs > li > a { line-height: 1.428571429; border-radius: 0; padding: 11px 18px 9px; border: 1px solid transparent; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); font-size: 12px; color: #777; } .panel-tabs > li > a:hover { background-color: transparent; } /* hover and active states */ .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #555555; cursor: default; background: #ffffff; padding: 11px 18px 10px; } .panel-tabs > li.active:after, .panel-tabs > li:hover:after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; background: #0c74e3; width: 100%; } /* PANEL TAB CORRECTION */ /* If you want a panel-like footer inside a tababble * area you need to wrap the content in a ".tab-body" * class. See timeline.html for an example(event panel) */ .tab-body { padding: 15px; } .tab-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /*===============================================G. Alternate Panel Styles================================================= */ /* Minimal - Style */ .panel.panel-alt { border-color: #DDD; box-shadow: none; background: #FFF; } .panel.panel-alt > .panel-heading { height: 40px; padding-right: 15px; background-color: #FFF; font-size: 14px; line-height: 40px; box-shadow: none; } .panel.panel-alt .panel-body { padding: 20px 30px; background-color: #fcfcfc; line-height: 22px; } /* ============================================== IV. THEME ELEMENTS A. Icons B. Labels C. Badges D. Alerts E. Thumbnails F. Media Objects G. Buttons H. Progress Bars I. Field Elements J. Checkboxes K. Switches L. Tables M. Pricing Tables N. Tabs O. Paginations P. Bootstrap Modals Q. Custom Modals R. Boostrap Popover=================================================A. Icons - See Documentation For More Info================================================= */ /* Some font libraries have large file sizes. * We optionally can attach .wf-loading to the * body tag and have the fonts only visible after * they are fully loaded or cached. Prevents rough* icon flash and is currently used only on index.html */ .wf-loading .glyphicons, .wf-loading .glyphicon, .wf-loading .imoon, .wf-loading .fa, .wf-loading .iconsweets { opacity: 0 !important; } /* Icon Transitions */ /* Glyphicon Pro and Halfling */ .glyphicons-2x, .glyphicon-2x { font-size: 2em; } .glyphicons-3x, .glyphicon-3x { font-size: 3em; } .glyphicons-4x, .glyphicon-4x { font-size: 4em; } .glyphicons-5x, .glyphicon-5x { font-size: 5em; } /* Icomoon Font Icons */ .imoon-2x { font-size: 2em; } .imoon-3x { font-size: 3em; } .imoon-4x { font-size: 4em; } .imoon-5x { font-size: 5em; } /* IconSweets2 Font Icons */ .iconsweets-2x { font-size: 2em; } .iconsweets-3x { font-size: 3em; } .iconsweets-4x { font-size: 4em; } .iconsweets-5x { font-size: 5em; } /* Buttons with Icons * Cross browser problems were creating problems when* an icon was given a larger font size than its sibling* text. To fix Line height, vertical align, and top* positioning have been redefined */ .btn .glyphicon, .btn .glyphicons { top: -1px; vertical-align: middle; line-height: 0; font-size: 1.1em; } /* A Helper Class to Align Icons Right in Control-forms */ span.field-icon-right, i.field-icon-right { position: absolute; right: 10px; top: 8px; } /* Icon Background and Borders * properly align icons that have been placed inside of titles* Useful for matching icon size to adjacent text * Icon Background Shapes */ .icon-circle { top: 0; padding: 9px; position: relative; overflow: visible; border-radius: 64px; } .icon-square { top: 0; padding: 9px; border-radius: 4px; } /* Icon Background Sizes */ .icon-circle.glyphicon-2x, .icon-circle.glyphicons-2x { padding: 12px; } .icon-circle.glyphicon-3x, .icon-circle.glyphicons-3x { padding: 20px; } .icon-circle.glyphicon-4x, .icon-circle.glyphicons-4x { padding: 35px; } .icon-square.glyphicon-2x, .icon-square.glyphicons-2x { padding: 12px; } .icon-square.glyphicon-3x, .icon-square.glyphicons-3x { padding: 20px; } .icon-square.glyphicon-4x, .icon-square.glyphicons-4x { padding: 35px; } /* WIDGET SPECIFIC ICON STYLING* ALL elements which use icons have been* moved from their respective positions* and placed here for easy icon styling */ /* Header Button Icons */ .navbar-menus > div > button > span, .navbar-menus > div > button > i { font-size: 15px; vertical-align: middle; } /* Special on-hover styles for user dropdown menu */ .user-menu ul.dropdown-items > li:hover .glyphicon { color: #d9534f; } .user-menu ul.dropdown-items > li:last-child:hover .glyphicon { color: #888; } .user-menu ul.dropdown-items > li:last-child > div:hover .glyphicon { color: #d9534f; } /* Panel Heading Icon */ .panel-heading .panel-title .glyphicon, .panel-heading .panel-title .glyphicons { padding-right: 8px; font-size: 16px; } .panel-heading .panel-title > .fa, .panel-heading .panel-title > .glyphicon, .panel-heading .panel-title > .glyphicons, .panel-heading .panel-title > .imoon { display: none !important; } /* Breadcrumb "Home" Icon */ .breadcrumb .glyphicon, .breadcrumb .glyphicons { color: #777; font-size: 11px; margin-left: 1px; top: 0; } /* Panel Sidemenu Icons */ .panel-sidemenu ul.nav li.active .fa { color: #2066b1; } .panel-sidemenu ul.nav li a:hover { background: none; } .panel-sidemenu ul.nav li .fa { width: 28px; color: #BBB; font-size: 18px; } /* Panel Tabs Icons */ .panel-tabs li .glyphicon, .panel-tabs li .glyphicons, .panel-tabs li .fa { font-size: 14px; } .panel-tabs .imoon, .panel-tabs .iconsweets { font-size: 14px; vertical-align: middle; } /* Mildly styles a font awesome based icon group * used in occasionaly in panel heading. Look at * message widget on index.html for example */ .mini-action-icons .fa { position: relative; top: 2px; padding-right: 10px; color: #777; font-size: 16px; cursor: pointer; } /* Pricing Table Icons */ .pricing-tables .pricing-icons li .fa-times { color: #e74a4a; } .pricing-tables .pricing-icons li .fa-ellipsis-h { color: #555555; } /* Tab Navigation Icons */ .nav-tabs li .fa { font-size: 14px; } .nav-tabs li .fa.fa-caret-down { font-size: 12px; } /* Timeline Widget Icons */ .timeline-widget span.glyphicons { z-index: 11; position: relative; top: 2px; width: auto; padding: 6px; font-size: 18px; border-radius: 50%; -webkit-box-shadow: 1px 1px 2px #AAA; box-shadow: 1px 1px 2px #AAA; text-shadow: 0 1px #ffffff; background-color: #f0f0f0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } /* Flag Icons */ .flag-xs, .flag-sm, .flag, .flag-lg { display: inline-block; vertical-align: middle; } .flag-xs { width: 16px; height: 16px; background: url(../img/flag_icons/flag-xs.png) no-repeat top left; } .flag-sm { width: 32px; height: 32px; background: url(../img/flag_icons/flag-sm.png) no-repeat top left; } .flag-sm.flag-fr { background-position: 0 0; } .flag-sm.flag-de { background-position: 0 -33px; } .flag-sm.flag-in { background-position: 0 -66px; } .flag-sm.flag-es { background-position: 0 -99px; } .flag-sm.flag-tr { background-position: 0 -132px; } .flag-sm.flag-us { background-position: 0 -165px; } .flag-xs.flag-fr { background-position: 0 0; } .flag-xs.flag-de { background-position: 0 -17px; } .flag-xs.flag-es { background-position: 0 -34px; } .flag-xs.flag-tr { background-position: 0 -51px; } .flag-xs.flag-us { background-position: 0 -68px; } /*===============================================B. Labels================================================= */ .label { padding: .3em .7em .4em; font-size: 84%; font-weight: 600; vertical-align: middle; } .label-primary { background: var(--primary); } .label-warning { color: var(--body-color) !important; } /* Label Sizes - ".label" required */ .label-sm { padding: .1em .65em .2em; font-size: 75%; } .label-lg { padding: .4em .9em .5em; font-size: 95%; } /* Label Shapes - ".label" required */ .label.label-rounded { padding: .2em 0.85em .3em; border-radius: 1em; } .label-sm.label-rounded { padding: .1em .65em .2em; } .label-lg.label-rounded { padding: .4em .9em .5em; } /* Custom Bootstrap Label */ label.error { color: #d9534f; font-size: 12px; font-weight: 600; } /*===============================================C. Badges================================================= */ .badge { padding: 5px 8px; font-size: 12px; font-weight: 600; border-radius: 50px; } /* Badge Sizes - ".badge" required */ .badge-sm { padding: 2px 6px; font-size: 11px; } .badge-lg { padding: 4px 8px; } /*===============================================D. Alerts================================================= */ /* Alert Sizes */ .alert { font-size: 14px; } .alert-sm { padding: 8px 35px 8px 15px; } .alert-lg { padding: 25px 35px 25px 15px; font-size: 16px; } /* Alert Dismiss Icon */ .alert-dismissable .close { color: #666666; } /*===============================================E. Media Objects ================================================= */ .media { border-bottom: 1px solid #ededed; } .media, .media .media { margin-top: 15px; } .media:last-child { border-bottom: none; } .media > .pull-left { margin-right: 12px; } .media-heading small { font-size: 11px; } /*===============================================F. Thumbnails ================================================= */ .thumbnail { margin-bottom: 0; } .thumbnail-xs { max-width: 35px; padding: 1px; border: 2px solid #AAA; box-shadow: 0 0 1px #000 inset; } .thumbnail-sm { max-width: 40px; padding: 1px; border: 2px solid #AAA; box-shadow: 0 0 1px #000 inset; } .thumbnail-border-lg { border-width: 3px; } .thumbnail.rounded { border-radius: 64px; } /*===============================================G. Buttons================================================= */ /* Button Settings */ .btn { display: inline-flex; align-items: center; justify-content: center; height: var(--fields-height); padding: 5px 20px; border-radius: 50px; outline: none; font-size: 14px; line-height: 1; font-weight: 500; } .btn:hover, .btn:focus, .btn.active, .btn:active { outline: none !important; box-shadow: none !important; outline: none !important; } .btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default.active .btn.btn-default:active { outline: none !important; box-shadow: none !important; outline: none !important; } .btnFull { } .btn-link { color: var(--secondary); line-height: normal; letter-spacing: normal; display: inline-flex; } .btn-link:hover { color: var(--secondary); } td .btn-link { white-space: nowrap; } /* Button Sizes */ .btn.btn-xs { } .btn.btn-sm { height: auto; width: auto; padding: 5px 11px; font-size: 12px; } .btn.btn-lg { height: 46px; width: auto; padding: 10px 20px; font-size: 15px; } /* Button Shapes */ .btn-square { border-radius: 0; } /* Button Colors * These are only colors that follow Bootstraps* color scheme. Fusion includes many more colors* are at end of this doc or in the SASS Partials */ .btn-default, .bg-default { text-shadow: none; } .btn-success.btn-gradient, .bg-success.bg-gradient { border-color: #3f9d00; background-color: #44ab00; } .btn-info.btn-gradient, .bg-info.bg-gradient { border-color: #269abc; background-color: #14abd8; } .btn-primary.btn-gradient, .bg-primary.bg-gradient { background-color: #0088cc; } .btn-warning.btn-gradient, .bg-warning.bg-gradient { background-color: #f28900; } .btn-danger.btn-gradient, .bg-danger.bg-gradient { background-color: #d3332e; } .btn-default.btn-gradient, .bg-default.bg-gradient { background-color: #f0f0f0; } /* Adds a custom "Alert"(purple) button to * the Bootstrap button lineup */ .btn-alert { background-color: #7857ca; } .btn-alert.btn-gradient { background-color: #5d3ab5; } .btn-alert .caret { border-top-color: white; } /* Button Hover effect */ /* Button Gradients * Gradients are created using a transparent gradient * overlay. This way you can transform any element * with a background color into a gradient without * having to use additional colors */ .btn-gradient, .bg-gradient { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); background-color: ""; background-repeat: repeat-x; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%); } /* Custom Themed Button group using all default bootstrap classes */ .btn-group.btn-group-themed .btn-default:hover, .btn-group.btn-group-themed .btn-default:focus, .btn-group.btn-group-themed .btn-default:active, .btn-group.btn-group-themed .btn-default.active, .btn-group.btn-group-themed .open .dropdown-toggle.btn-default { color: #6b3fa2; border-color: #cbc0f8; background-color: #e3def8; box-shadow: none; } .textLink { display: inline-block; color: #2d5338; font-size: 12px; text-decoration: underline; } /* Button Dropdown Menu Sizes */ .dropdown-menu.dropdown-sm { min-width: 120px; } .dropdown-menu.dropdown-sm li { margin-bottom: 0; } .dropdown-menu.dropdown-sm li a { font-size: 13px; padding: 2px 12px; } /*===============================================H. Progress Bars================================================= */ .progress { height: 18px; background-color: #ececec; box-shadow: none; } .progress-bar { line-height: 18px; } /* Progress Bar Sizes - ".progress" always required */ .progress.progress-sm { height: 12px; border-radius: 2px; } .progress.progress-sm .progress-bar { line-height: 12px; } .progress.progress-lg { height: 28px; } .progress.progress-lg .progress-bar { line-height: 28px; } /*===============================================I. Field Elements================================================= */ /* Default Select List */ select { cursor: pointer; } /* Bootstrap Help Block */ .help-block { margin-top: 7px; color: #888; } .radio-inline, .checkbox-inline { line-height: 20px; } /* Input Label */ label { font-size: 12px; font-weight: 400; } /* Input Design */ .form-group { position: relative; } .form-control { box-shadow: none; border-radius: 50px; /*border-radius: 6px;*/ border-color: var(--border-color); font-size: 13px; color: var(--body-color); padding: 6px 16px; font-weight: var(--body-font-weight); } .form-control.js-color { border-color: #eaeaea; } .form-control.js-color:focus { border-color: #eaeaea; } .validator { position: absolute; top: 6px; font-size: 11px; right: 0; font-weight: 500; line-height: 1.3; display: inline-block; text-align: right; } .failure { position: absolute; inset: 0; bottom: -30px; top: initial; white-space: nowrap; display: flex; justify-content: center; font-size: 11px; } /* Input Sizes */ .input-xs { padding: 4px 10px; height: 26px; font-size: 12px; line-height: 1.6; } /* Input Addon */ .input-group-addon { min-width: 40px; color: var(--secondary); background-color: transparent; border-radius: 0; border-color: #b5b5b5; padding: 4px 12px; } .input-group-addon:first-child { border-radius: 50px 0px 0px 50px; } .input-group-addon:first-child + .form-control { border-left: 0; padding-left: 0; } .input-group-addon:last-child { border-radius: 0px 50px 50px 0px; } .input-group .form-control.datepicker { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; } /* Input Focus */ .form-control:focus { border-color: var(--secondary); box-shadow: none; } .input-group .input-group-addon + .form-control:focus { border-color: #b5b5b5; } /* Disabled Input */ .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #fafafa; } /* Alternate Text Field Style - Gradient */ .text-field-alt { text-shadow: 0 1px #ffffff; background-color: #f0f0f0; min-height: 40px; border-radius: 1px; border: 1px solid var(--border-color)ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } /*===============================================J. Checkboxes - Custom Fusion exlcusive pure CSS Checkboxes================================================= */ .cBox { position: relative; } .cBox.cBox-inline { display: inline-block; line-height: normal; } .cBox.cBox-inline + .cBox.cBox-inline { margin-left: 10px; } .cBox input { margin: 0; opacity: 0; z-index: 999; cursor: pointer; } .cBox label { cursor: pointer; font-size: 13px; padding-left: 8px; margin: 0; } .cBox label:before { content: ""; cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; left: 0; border-radius: 6px; border: 1px solid var(--border-color); background-color: #ffffff; } .cBox.cBox-gradient label:before { background-repeat: repeat-x; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%); } .cBox label:after { opacity: 0; content: ''; position: absolute; width: 12px; height: 7px; background: transparent; top: 5px; left: 4px; border: 2px solid #ffffff; border-top: none; border-right: none; -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); -o-transform: rotate(-50deg); -ms-transform: rotate(-50deg); transform: rotate(-50deg); } .cBox input[type=checkbox]:checked + label:after { opacity: 1; } .cBox input[type=checkbox]:checked + label:before { background-color: var(--secondary); border-color: var(--secondary); } /* Checkboxes - Custom Colors */ .cBox.facebook-bg label:before { background-color: #82b4ff; } .cBox.twitter-bg label:before { background-color: #a8e9ea; } .cBox.pinterest-bg label:before { background-color: #ffac9c; } .cBox.instagram-bg label:before { background-color: #fbb882; } /*===============================================K. Switches - Created with pure CSS================================================= */ div.switch label { width: 58px; height: 26px; color: transparent; background: var(--gray); display: block; position: relative; text-indent: 100%; cursor: pointer; transition: left 0.15s ease-out; margin: 0px auto !important; } div.switch label:after { content: ""; display: block; background: #fff; position: absolute; top: 4px; left: 5px; width: 18px; height: 18px; -webkit-transition: left .15s ease-out; -moz-transition: left .15s ease-out; transition: left 0.15s ease-out; border-radius: 30px; } div.switch input { display: none; } div.switch input + label { margin-left: 0; margin-right: 0; } div.switch input:checked + label { background: #2ba6cb; } div.switch input:checked + label:after { left: 33px; } div.checkboxsec label { margin-left: 0px !important; } div.switch.text-left label { margin-left: 0px !important; margin-right: auto !important; } div.switch.text-center label { margin-left: auto !important; margin-right: auto !important; } .showCaseDrag div.switch label, .table > tbody > tr > td div.switch label { height: 21px !important; width: 45px !important; } .showCaseDrag div.switch label::after, .table > tbody > tr > td div.switch label::after { top: 3px !important; width: 15px; height: 15px; } .showCaseDrag div.switch input:checked + label::after, .table > tbody > tr > td div.switch input:checked + label::after { left: 25px !important; } /* Switch Sizes */ div.switch.switch-lg label { width: 65px; height: 32px; } div.switch.switch-lg label:after { width: 26px; height: 26px; } div.switch.switch-lg input:checked + label:after { left: 35px; } div.switch.switch-sm label { width: 45px; height: 22px; } div.switch.switch-sm label:after { width: 16px; height: 16px; } div.switch.switch-sm input:checked + label:after { left: 26px; } div.switch.switch-xs label { width: 39px; height: 19px; } div.switch.switch-xs label:after { width: 13px; height: 13px; } div.switch.switch-xs input:checked + label:after { left: 22px; } div.switch.radius label { border-radius: 4px; } div.switch.radius label:after { border-radius: 3px; } /* Switch Option - Rounded */ div.switch.round { border-radius: 1000px; } div.switch.round label { border-radius: 26px; } div.switch.round label:after { border-radius: 26px; } /* Switch Option - Inline */ .switch.switch-inline { display: inline-flex; align-items: center; height: var(--fields-height); } .tblCstm .switch.switch-inline { height: auto; } .switch.switch-inline + .switch.switch-inline { margin-left: 15px; } .right_tabs_content .switch.switch-cstm.switch-inline { } /*===============================================L. Tables================================================= */ /* Table first item changes */ .table tbody > tr:first-child > td { } .table tbody > tr > td:first-child { } .table tbody > tr > td.hiddenRow td:first-child { } /* Table-striped item changes */ .table tr td .label { font-weight: 500 !important; height: 20px; } .table tr td .label[class*='bg-'] { display: inline-block; margin-right: 5px; margin-bottom: 5px; line-height: normal; } .table-striped > tbody > tr:nth-child(even) > td { background-color: #f8f8f8; border-bottom: 1px dashed #c9c9c9; padding: 8px; } .table-striped > tbody > tr:nth-child(odd) > td { background-color: #FFF; border-bottom: 1px dashed #c9c9c9; padding: 8px; } .table-striped > tbody > tr:nth-child(2n+1):hover > td.hiddenRow, .table-striped > tbody > tr:nth-child(2n+1):hover > td.hiddenRow td { background-color: #FFF !important; } /* Rounded */ .table-curved > tbody > tr > td:first-child { border-radius: 4px 0 0 4px; } .table-curved > tbody > tr > td:last-child { border-radius: 0 4px 4px 0; } /*===============================================M. Pricing Tables================================================= */ /* Regular Pricing Plan */ .pricing-tables .pricing-plan { padding: 0 0 20px 0; margin: 30px -16px 20px -16px; border: 1px solid #CCC; background-color: #f6f6f6; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } /* Pricing Table Title */ .pricing-tables .pricing-title { padding: 25px 5px 20px; border-bottom: 1px solid var(--border-color); } .pricing-tables .pricing-title h3 { margin-bottom: 0; font-weight: 200; text-transform: none; font-size: 26px; color: #555; } /* Pricing Table Cost Figure */ .pricing-info { margin: 20px 0; } .pricing-info .currency-sign { color: #333; font-size: 26px; font-weight: 200; display: inline-block; vertical-align: top; margin-left: -20px; padding-left: 5px; padding-top: 6px; } .pricing-info h2 { display: inline-block; margin-bottom: 0; color: #444; font-size: 54px; font-weight: 600; } .pricing-info h6 { color: #888; font-weight: 200; margin: 4px 0 0; } /* Pricing Table Item Features */ .pricing-features ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-color); } .pricing-features li { padding: 10px 0; border-bottom: 1px solid var(--border-color); background-color: #FFF; color: #999; margin: 0; } .pricing-tables .pricing-features li b { font-weight: 600; } .pricing-tables .pricing-features li i.fa { font-size: 15px; color: #777; padding-right: 8px; } /* Pricing Table Icons */ .pricing-tables .pricing-icons ul { list-style: none; padding: 0; margin: 0; } .pricing-tables .pricing-icons li { padding: 10px 0; border-bottom: 1px solid var(--border-color); background-color: #FFF; font-size: 18px; margin: 0; } /* Pricing Table Sign Up Button*/ .pricing-tables a.btn { margin-top: 25px; padding: 8px 26px; } /* Hero Pricing Plan Modifications */ .hero-plan { z-index: 10; } .hero-plan .pricing-plan { background-color: #f6f6f6; padding: 0 0 20px 0; margin: 0 -17px 20px -17px; border-bottom: 1px solid #BBB; -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); } .hero-plan .pricing-plan .pricing-title { color: #FFF; margin: -1px -1px 0 -1px; } .hero-plan .pricing-plan .pricing-title h3 { color: #FFF; font-weight: 600; } .hero-plan .pricing-plan .pricing-subtitle { text-transform: uppercase; font-size: 12px; margin-top: 4px; font-weight: 600; } .hero-plan .pricing-plan a.btn { margin: 40px 0 20px; } /*===============================================N. Tabs================================================= */ /* TAB CONTAINER */ .tab-block { position: relative; } .tab-block .tab-content { overflow: auto; background-color: #FFF; } /* TAB CONTENT PANEL */ .tab-content { position: relative; z-index: 10; min-height: 125px; padding: 18px; border-radius: 5px; /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);*/ } /* TAB NAVIGATION */ .nav-tabs { position: relative; border: 0; padding-right: 10px; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { position: relative; z-index: 9; padding: 9px 20px; margin-right: 2px; color: #fff; font-size: 13px; border: none; border-radius: 5px 5px 0px 0px; background: #b2c8e0; } .nav-tabs > li:first-child > a { margin-left: 0; } /* TAB NAVIGATION STATES */ .nav-tabs > li > a:hover { color: #555; border-color: #CFCFCF; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { cursor: default; position: relative; z-index: 12; color: #0c74e3; background: #FFF; border: none; border-bottom: 1px solid #FFF; } /* open state for dropdown menus in nav * containers. Also a direct bootstrap override */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { color: #2066b1; border-color: #CFCFCF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a { margin-top: -1px; border-top: 2px solid #a287d4; } /* TAB NAVIGATION - ALT STYLE: BORDER - BOTTOM */ .tabs-border-bottom.nav-tabs > li > a, .tabs-border-bottom .nav-tabs > li > a { color: #BBB; font-weight: 600; background: #f9f9f9; } .tabs-border-bottom.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a { color: #555; font-weight: 600; margin-bottom: -1px; background: #f7f7f7; border-color: #DDD; border-bottom: 2px solid #a287d4; } /* TAB NAVIGATION - ALT STYLE: BACKGROUND */ .tabs-bg.nav { background: #f5f5f5; border: 1px solid #CCC; border-bottom: none; padding: 10px 10px 0; } /* TABS - Float Right */ .nav-tabs.tabs-right > li { float: right; } .nav-tabs.tabs-right > li:first-child > a { margin-right: 0; } /* TABS - NAVIGATION BELOW */ .tabs-below { position: relative; } .tabs-below > li { float: left; margin-top: -1px; } .tabs-below > li > a { position: relative; z-index: 9; margin-right: -1px; padding: 11px 16px; font-size: 12px; color: #777; font-weight: 700; border: 1px solid #CFCFCF; background: #fafafa; } /* TAB NAVIGATION STATES */ .tabs-below > li.active > a, .tabs-below > li.active > a:hover, .tabs-below > li.active > a:focus { cursor: default; position: relative; z-index: 12; color: #555555; background: #FFF; border-color: #CFCFCF; border-top: 1px solid #FFF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.tabs-below > li.active > a, .tabs-border .tabs-below > li.active > a { margin-bottom: -1px; border-bottom: 2px solid #c7b7e5; } /* TAB NAVIGATION - ALT STYLE: BACKGROUND */ .tabs-bg.tabs-below { background: #f5f5f5; border: 1px solid #CCC; border-top: none; padding: 0 10px 6px; } /* TABS - NAVIGATION LEFT */ .tabs-left { float: left; } .tabs-left > li { float: none; margin: 0 -1px -1px 0; } .tabs-left > li > a { padding: 12px 16px; color: #777; font-size: 12px; font-weight: 700; border: 1px solid transparent; border-color: #CFCFCF; background: #fafafa; } /* TAB NAVIGATION STATES */ .tabs-left > li.active > a, .tabs-left > li.active > a:hover, .tabs-left > li.active > a:focus { color: #555; border-color: #CCC #FFF #CCC #CCC; cursor: default; position: relative; z-index: 12; background: #FFF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.tabs-left > li.active > a, .tabs-border .tabs-left > li.active > a { margin-left: -1px; border-left: 2px solid #c7b7e5; } /* WELL TABS - GREY MICRO NAV TABS */ .well-tabs { position: relative; } .well-tabs li { float: left; margin: 4px 6px; } .well-tabs li:first-child { margin-left: 0; } .well-tabs li a { font-size: 11px; font-weight: 600; padding: 6px 8px; line-height: 15px; border-radius: 4px; color: #8457bb; border: 1px solid #beaff9; background-color: #dfd9f7; } .well-tabs li a:hover, .well-tabs li.active a { background-color: #fff; } /* Same style but inversed colors */ .well-tabs-inverse li a { font-size: 11px; font-weight: 600; color: #888; padding: 6px 8px; line-height: 15px; background: transparent; border-radius: 4px; border: 1px solid #ddd; } .well-tabs-inverse li a:hover, .well-tabs-inverse li.active a { color: #6b3fa2; border-color: #cbc0f8; background-color: #e3def8; } /*===============================================O. Paginations================================================= */ /* MINI PAGERS */ .pager { margin: 5px 0; cursor: pointer; } .pager li > a, .pager li > span { font-size: 14px; } .pager.pager-sm li > a, .pager.pager-sm li > span { font-size: 12px; } .pager.pager-lg li > a, .pager.pager-lg li > span { font-size: 16px; } /* PAGINATIONS */ .pagination { margin: 0; cursor: pointer; display: block; width: 100%; border-radius: inherit; } .tblCstm tr:nth-child(odd).pagination > td { background: transparent !important; } .tblCstm tr.pagination table td, .tblCstm tr.pagination:hover td { background: transparent !important; } tr.pagination { display: table-row; } td.pagination { display: table-row; } .pagination td { border: none !important; padding: 0 !important; background: transparent !important; } .pagination > td { padding: 5px !important; } .pagination a, .pagination span { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; min-width: 23px; padding: 6px; text-align: center; transition: all .05s ease-in-out; line-height: 1; border-radius: 4px; margin-right: 5px; white-space: nowrap; } .pagination table td a:hover, .pagination table td span { background-color: var(--secondary); opacity: 1; } .pagination li[class*="PagedList-"] a { font-size: 9px; } /* ROUNDED PAGINATION */ .pagination-rounded > li:first-child > a { border-radius: 50% 0 0 50%; } .pagination-rounded > li:last-child > a { border-radius: 0 50% 50% 0; } /* ALT STYLE */ .pagination-alt > li > a { margin: 0 4px; border-radius: 2px; font-weight: 600; color: #666; text-shadow: 0 1px #FFF; padding: 4px 11px; border-color: #ccc; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background-repeat: repeat-x; background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%); } .pagination-alt > li.active > a { background-color: #555; background-image: none; border-color: #444; } /* SIZES FOR ALT STYLE */ .pagination-alt.pagination-sm > li > a { margin: 0 3px; font-weight: 700; padding: 4px 9px; } .pagination-alt.pagination-lg > li > a { margin: 0 5px; padding: 4px 13px; } /* pagination-alt fixes */ .pagination-alt.pagination-sm > li:first-child > a, .pagination-alt.pagination-lg > li:first-child > a { margin-left: 0; } /*===============================================P. Bootstrap Modals================================================= */ /* Modal sizes - element always requires * default ".modal-dialog" class */ /*header search*/ .hdrSrch { max-width: 310px; display: block; float: left; width: 100%; position: relative; } .hdrSrch input { padding: 0px 0px; padding-left: 0px; color: #979797 !important; border-bottom: 2px solid #e6e6e6 !important; border: none; border-radius: 0px; font-weight: 600; font-size: 17px; min-height: 48px; width: 100%; padding-left: 30px; } .hdrSrch input::-webkit-input-placeholder { color: #aaa; } .hdrSrch input::-moz-placeholder { color: #aaa; } .hdrSrch input[type="text"] { color: #0c74e3 !important; } .hdrSrch input:focus { border-color: #0c74e3 !important; outline: none; } .hdrSrch .fa { font-size: 20px; position: absolute; top: 10px; color: #0c74e3; left: 2px; } .hdrNav, .hdrNav ul, .hdrNav li { display: inline-block; } .hdrNav { float: left; } .hdrNav ul { margin: 0px; } .hdrNav li { margin: 0; } .hdrNav a { display: block; margin-right: 57px; font-size: 14px; color: #bbbbbb; height: 22px; } .hdrNav a:hover { color: #0c74e3; text-decoration: none; } .hdrDD { display: inline-block; padding-left: 5px; font-size: 18px; color: #bbbbbb; position: absolute; right: -20px; top: -3px; cursor: pointer; } .hdrDD .fa { font-size: 15px; } .hdrDD:hover { color: #0c74e3; } .hdrDD_Menu.open { display: inline-block; } .hdrDD_Menu { display: none; box-shadow: 0 1px 5px 0 rgba(32,33,36,0.2); border-color: rgba(223,225,229,0); background: #fff; border-radius: 10px; max-height: 600px; padding: 10px 20px; position: absolute; top: 30px; right: -15px; width: 150px; margin: 0px; } .hdrDD_Menu li { list-style: none; text-align: left; } .hdrDD_Menu li:last-child { margin-bottom: 0; } .hdrDD_Menu li a { color: #8e8e8e; display: inline-block; width: 100%; } .hdrDD_Menu li a:hover { color: #0c74e3; } /*===============================================Q. Custom Modals================================================= */ html:not(.sidebarShown, .modalShown) .navbar { z-index: 101; } html:not(.sidebarShown, .modalShown) aside { z-index: 100; } /*html:not(.sidebarShown) .navbar, html:not(.modalShown) .navbar, body:not(.modal-open) .navbar { z-index: 101; } html:not(.sidebarShown) aside, html:not(.modalShown) aside, body:not(.modal-open) aside { z-index: 100; }*/ body.modal-open .navbar { z-index: initial !important; } body.modal-open aside { z-index: initial !important; } body > .modal-backdrop { display: none; } .modal-header { display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 0.938rem; font-weight: 600; } .modal-content { width: 100%; } .modal-header button.close { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); padding: 8px; opacity: 0.5; width: 16px; height: 16px; } .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 60px); justify-content: center; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 60px); justify-content: center; } .email-preview { width: 100%; min-height: 1000px; border: none; transition: min-height 0.3s ease-in-out; } /* Login Form Modal */ #formModal .modal-content { width: 400px; margin: 0 auto; position: relative; } #formModal .modal-body { padding: 15px 20px 0 20px; } #formModal #login-avatar { margin: 15px 20px 25px; padding-bottom: 25px; border-bottom: 1px dashed #DDD; } #formModal #login-avatar img { display: block; margin: 0 auto; padding: 5px; border: 2px solid #DDD; } #formModal .login-alert { font-size: 13px; padding: 9px 13px; } /*===============================================R. Content Heading Bar================================================= */ .content-header { border-radius: 4px; background: #f6f6f6; padding: 12px 15px; border: 1px solid #CCC; } /*===============================================R. Boostrap Popover================================================= */ .popover { z-index: 1100; } /*===============================================S. Boostrap List================================================= */ .list-unstyled, .list-unstyled li { margin: 0; } /*=================================================v. HELPERS A. General B. Font Size C. Table Layout D. Padding E. Margin F. Line Height G. Borders H. Max Width===================================================A. General/Misc Helpers=================================================== */ /* overflow Helpers */ .overflow-v { overflow: visible !important; } .overflow-h { overflow: hidden !important; } /* Center Grid Column Helper */ .center-column { float: none; margin-left: auto; margin-right: auto; display: block; } /* Vertical Align Helpers */ .va-t { vertical-align: top !important; } .va-m { vertical-align: middle !important; } .va-b { vertical-align: bottom !important; } .va-s { vertical-align: super !important; } /* Relative Position Helper */ .posr { position: relative !important; } /* Inline Block Helper */ .ib, .inline-object { display: inline-block !important; } /* pointer cursor */ .cursor { cursor: pointer !important; } /* Useful for emphasizing a disabled input */ .option-disabled { opacity: 0.6; } /* unstyled input */ .input-unstyled, .input-unstyled:hover, .input-unstyled:focus { border: none; background: none; box-shadow: none; outline: none; } /*===================================================B. Table Layout Helpers - specifically for widgets===================================================== */ .table-layout { display: table; table-layout: fixed; width: 100%; margin: 0; } /* table-layout helper content */ .table-layout > div { display: table-cell; float: none; } @media (max-width: 1300px) { .table-layout.table-clear-md, .table-layout.table-clear-md > div { display: block; float: none; } } @media (max-width: 992px) { .table-layout.table-clear-sm, .table-layout.table-clear-sm > div { display: block; float: none; } } @media (max-width: 767px) { .table-layout.table-clear-xs, .table-layout.table-clear-xs > div { display: block; float: none; } } .fw-lighter { font-weight: lighter !important; } .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: bolder !important; } /*===============================================C. Font Size Helpers================================================= */ .fs0 { font-size: 0px !important; } .fs3 { font-size: 3px !important; } .fs4 { font-size: 4px !important; } .fs5 { font-size: 5px !important; } .fs6 { font-size: 6px !important; } .fs7 { font-size: 7px !important; } .fs8 { font-size: 8px !important; } .fs9 { font-size: 9px !important; } .fs10 { font-size: 10px !important; } .fs11 { font-size: 11px !important; } .fs12 { font-size: 12px !important; } .fs13 { font-size: 13px !important; } .fs14 { font-size: 14px !important; } .fs15 { font-size: 15px !important; } .fs16 { font-size: 16px !important; } .fs17 { font-size: 17px !important; } .fs18 { font-size: 18px !important; } .fs20 { font-size: 20px !important; } .fs22 { font-size: 22px !important; } .fs24 { font-size: 24px !important; } .fs26 { font-size: 26px !important; } .fs28 { font-size: 28px !important; } .fs30 { font-size: 30px !important; } .fs35 { font-size: 35px !important; } .fs40 { font-size: 40px !important; } .fs45 { font-size: 45px !important; } .fs50 { font-size: 50px !important; } /*===============================================D. Padding Helpers================================================= */ .pn { padding: 0 !important; } .p1 { padding: 1px !important; } .p2 { padding: 2px !important; } .p3 { padding: 3px !important; } .p4 { padding: 4px !important; } .p5 { padding: 5px !important; } .p6 { padding: 6px !important; } .p7 { padding: 7px !important; } .p8 { padding: 8px !important; } .p10 { padding: 10px !important; } .p15 { padding: 15px !important; } .p20 { padding: 20px !important; } .p25 { padding: 25px !important; } .p30 { padding: 30px !important; } .p35 { padding: 35px !important; } .p40 { padding: 40px !important; } .p50 { padding: 50px !important; } .ptn { padding-top: 0 !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .prn { padding-right: 0 !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr50 { padding-right: 50px !important; } .pbn { padding-bottom: 0 !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } .pln { padding-left: 0 !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl50 { padding-left: 50px !important; } /*===============================================E. Margin Helpers================================================= */ .mn { margin: 0 !important; } .m1 { margin: 1px !important; } .m2 { margin: 2px !important; } .m3 { margin: 3px !important; } .m4 { margin: 4px !important; } .m5 { margin: 5px !important; } .m8 { margin: 8px !important; } .m10 { margin: 10px !important; } .m15 { margin: 15px !important; } .m20 { margin: 20px !important; } .m25 { margin: 25px !important; } .m30 { margin: 30px !important; } .m35 { margin: 35px !important; } .m40 { margin: 40px !important; } .m50 { margin: 50px !important; } .mtn { margin-top: 0 !important; } .mt3 { margin-top: 3px !important; } .mt5 { margin-top: 5px !important; } .mt6 { margin-top: 6px !important; } .mt7 { margin-top: 7px !important; } .mt8 { margin-top: 8px !important; } .mt9 { margin-top: 9px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt16 { margin-top: 16px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt-5 { margin-top: -5px !important; } .mt-5 { margin-top: -5px !important; } .mt-10 { margin-top: -10px !important; } .mt-15 { margin-top: -15px !important; } .mt-20 { margin-top: -20px !important; } .mt-25 { margin-top: -25px !important; } .mt-30 { margin-top: -30px !important; } .mt-35 { margin-top: -35px !important; } .mt-40 { margin-top: -40px !important; } .mt-50 { margin-top: -50px !important; } .mrn { margin-right: 0 !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr50 { margin-right: 50px !important; } .mbn { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb6 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mln { margin-left: 0 !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml50 { margin-left: 50px !important; } /*===============================================F. LineHeight Helpers================================================= */ .lh0 { line-height: 0 !important; } .lh5 { line-height: 5px !important; } .lh10 { line-height: 10px !important; } .lh15 { line-height: 15px !important; } .lh20 { line-height: 20px !important; } .lh25 { line-height: 25px !important; } .lh30 { line-height: 30px !important; } .lh35 { line-height: 35px !important; } .lh40 { line-height: 40px !important; } /*===============================================G. Border Helpers================================================= */ /* Default Border */ .border { border: 1px solid var(--border-color) !important; } .border-left { border-left: 1px solid var(--border-color); } .border-right { border-right: 1px solid var(--border-color); } .border-top { border-top: 1px solid var(--border-color); } .border-bottom { border-bottom: 1px solid var(--border-color); } /* Border Radius */ .br0 { border-radius: 0px !important; } .br1 { border-radius: 1px !important; } .br2 { border-radius: 2px !important; } .br3 { border-radius: 3px !important; } .br4 { border-radius: 4px !important; } .br5 { border-radius: 5px !important; } .br6 { border-radius: 6px !important; } .br8 { border-radius: 8px !important; } .br12 { border-radius: 12px !important; } .br24 { border-radius: 24px !important; } .br64 { border-radius: 64px !important; } /* circle */ /* Border Width */ .bw1 { border-width: 1px !important; } .bw2 { border-width: 2px !important; } .bw3 { border-width: 3px !important; } .bw4 { border-width: 4px !important; } .bw5 { border-width: 5px !important; } /* Border Style */ .bs-dashed { border-style: dotted !important; } /* Disable Border */ .border-left-none { border-left: none !important; } .border-right-none { border-right: none !important; } .border-top-none { border-top: none !important; } .border-bottom-none { border-bottom: none !important; } .border-none { border: none !important; } .shadow-none { box-shadow: none !important; } /*===============================================H. Max Width Helpers================================================= */ .mw10 { max-width: 10px !important; } .mw20 { max-width: 20px !important; } .mw30 { max-width: 30px !important; } .mw35 { max-width: 35px !important; } .mw40 { max-width: 40px !important; } .mw45 { max-width: 45px !important; } .mw50 { max-width: 50px !important; } .mw60 { max-width: 60px !important; } .mw80 { max-width: 80px !important; } .mw100 { max-width: 100px !important; } .mw140 { max-width: 140px !important; } .mw160 { max-width: 160px !important; } .mw180 { max-width: 180px !important; } .mw200 { max-width: 200px !important; } .mw240 { max-width: 240px !important; } .mw280 { max-width: 280px !important; } .mw320 { max-width: 320px !important; } /* ================================================ VI. WIDGETS A. Table Widget B. Search Bar Widget C. Tile Widget D. Calendar Widget===================================================A. Table Widget-------------------------------------------------This is a multi-purpose widget. Apply it toany table to access table styles. Commonlyinside a panel.=================================================== */ .table-checklist td { cursor: pointer; } .table-widget .tab-content { padding: 0; border: 0; overflow: hidden; } /* Table items (labels, badges, progress bars etc) */ .table-widget .progress { width: 80%; height: 13px; margin: 0; } .table-widget .label, .table-widget .badge { margin-right: 7px; } /* Tables with the .table-checklist class become clickable * if you want text to have a line-through effect on click * add the .text-slash class to the element */ .table-checklist tr.task-checked { color: #bbbbbb; } .table-checklist tr.task-checked .text-slash { text-decoration: line-through; } /* Table item checked state - class added via JS */ .table-checklist tr.task-checked .label, .table-checklist tr.task-checked .progress { opacity: 0.3; } /*===============================================D. Search Bar Widget================================================= */ .search-widget { position: relative; } #search-widget { height: 85px; margin-bottom: 50px; padding: 20px 25px; background: #f4f7fa; border: 1px solid #d8dee6; border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; } .search-bar-widget { float: left; width: 82%; min-height: 43px; padding: 9px 12px 9px 40px; } #search-widget .search-widget-icon { position: absolute; top: 14px; left: 15px; color: #999; font-size: 16px; } #search-widget button { float: left; width: 16%; margin-left: 2%; padding: 10px; font-weight: 600; } /*===============================================B. Widget Tile - Full Icon BG================================================= */ .icon-bg { position: absolute; opacity: 0.5; right: 0; top: 0; line-height: 100px; font-size: 100px; } /*===============================================D. Calendar Widget================================================= */ /*#calendar { position: relative; } #external-events { padding: 15px 10px; border: 1px dashed #CCC; background: #eee; min-height: 65px; margin-bottom: 20px; } .external-event { display: inline-block; width: 200px; max-width: 20%; font-weight: 600; margin-right: 10px; padding: 7px 10px; color: #FFF; cursor: pointer; border-radius: 2px; background-color: #a389d5; } .fc-header .fc-button { height: 26px; padding: 1px 10px; background-color: #f7f7f7; color: #666; font-size: 12px; font-weight: 600; text-align: center; border: 1px solid #CCC; border-radius: 1px; text-shadow: 0 1px #ffffff; background-repeat: repeat-x; margin: 0; background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%); } table.fc-header { background: #f5f5f5; border-radius: 4px; border: 1px solid #CCC; margin-bottom: 20px; } .fc-header td.fc-header-left, .fc-header td.fc-header-center, .fc-header td.fc-header-right { padding: 15px; vertical-align: center; } .fc-header-title h2 { margin: 0; font-size: 14px; font-weight: 700; color: #0c74e3; line-height: 24px; } .fc-header-left .fc-button, .fc-header-right .fc-button { margin-left: 0; } .fc-button.fc-state-down, .fc-button.fc-state-active { background-color: #EEE; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-event { font-weight: 600; margin: 4px; background-color: #c384dd; border-color: transparent; } .fc-state-highlight { background-color: #f8f8f8; } .fc-event-inner { padding: 7px; } .fc-content .fc-grid .fc-day-header { color: #999; font-weight: 600; border: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } .fc-content .fc-grid table tbody { background: #FFF; } .fc-grid .fc-day-number { font-size: 13px; font-weight: 400; color: #AAA; padding: 5px 11px; }*/ /* ================================================ X. PAGES - In Order A. Dashboard.html B. 404/500.html C. Coming-soon.html D. Screenlock.html E. Login.html F. Invoice-page.html G. Gallery.html H. Validation.html I. Sketchpad.html J. Timeline.html K. Profile.html * This file is reserved for changes done on * a per-page basis. To create independent * page layouts an additional class was added * to the pages body. For example login.html * has an extra body class of ".login-page" * Note: Pages not listed here were made using * 100% reusable styles placed in theme.css================================================= A. Dashboard.html - Default================================================= */ body.body-page .jvectormap-zoomin, body.body-page .jvectormap-zoomout { display: none; } body.body-page .chat-panel .panel-body { max-height: 288px; overflow-x: hidden; overflow-y: scroll; } /* A slidedown menu used to store * multiple Tile widgets */ #widget-dropdown { margin-bottom: 10px; display: block; } #widget-dropdown .panel { background: #f8f8f8; } .widget-fullscreen { position: fixed; width: 90%; height: 90%; top: 5%; left: 5%; z-index: 9999; } .widget-backdrop { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9998; background: #000; opacity: 0.65; } .dashboard-widget-tray { padding-top: 37px; } /*===============================================B. Messages Page================================================= */ /* Email Listings */ .email-table.table-striped > tbody > tr > td { border: none; } .email-table.table-striped > tbody > tr > td { vertical-align: middle; } .email-table.table-striped > tbody > tr > td:first-child { padding-left: 20px; } .email-table.table-hover > tbody > tr:hover > td { cursor: pointer; background-color: #ecf3f8 !important; } .email-table .table-icon { width: 55px; } .email-search, .email-count { color: #999; font-size: 14px; top: 2px; position: relative; } /* Email Compose */ .messages-page .note-editor .note-toolbar { background: #fafafa; border: 1px solid var(--border-color); } .messages-page .note-editor .note-editable { border: 1px solid var(--border-color); border-top: none; } /*===============================================B. Editors Page================================================= */ body.editors-page .panel .panel-heading { border-bottom-color: #CCC; } /*===============================================C. 404/500.html================================================= */ /* Error search bar */ body.error-page #search-widget { background: #f1f1f1; } /* Error text */ body.error-page .error-icon { font-size: 80px; position: relative; top: -10px; } body.error-page .error-text { font-size: 120px; text-align: center; text-shadow: 0 2px #FFF; color: #888; width: 100%; } /*===============================================D. Coming-soon.html================================================= */ body.coming-soon-page #page-logo { width: 291px; margin: 50px auto 50px; } body.coming-soon-page .cntSeparator { margin: 27px 18px; } body.coming-soon-page .panel { width: 600px; margin: 0 auto; position: relative; } body.coming-soon-page .panel-title { font-size: 17px; float: none; } body.coming-soon-page .panel-body { padding: 40px 26px; } /*===============================================E. Screenlock.html================================================= */ body.screenlock-page #page-logo { width: 285px; margin: 50px auto 80px; } body.screenlock-page .panel { width: 500px; margin: 0 auto; position: relative; } body.screenlock-page .login-info { margin: 20px 0; font-size: 13px; } body.screenlock-page .login-info .login-name b { font-size: 14px; } body.screenlock-page .login-info .login-email { padding-top: 8px; font-size: 12px; color: #AAA; } body.screenlock-page .login-avatar { padding: 12px 15px 13px 10px; margin-right: 20px; border-right: 1px dashed #DDD; float: left; } body.screenlock-page .login-avatar img { display: block; margin: 0 auto; padding: 5px; border: 2px solid #DDD; } body.screenlock-page .login-alert { padding-top: 15px; margin: 5px 0; border-top: 1px dashed #DDD; clear: both; } body.screenlock-page .login-alert .alert { font-size: 13px; padding: 7px 13px; margin-bottom: 0; } /*===============================================F. Login.html================================================= */ /*===============================================G. Invoice.html================================================= */ body.invoice-page #invoice-info { margin-bottom: 15px; } /* Invoice table */ body.invoice-page .table-condensed tbody tr td:last-child { text-align: right; padding-right: 15px; } /* Summary table */ body.invoice-page #invoice-summary { margin: 0; } /* Summary table header */ body.invoice-page #invoice-summary thead th:first-child { text-align: right; width: 200px; padding-right: 55px; } body.invoice-page #invoice-summary thead th:last-child { width: 50px; font-weight: 400; } /* Summary table rows */ body.invoice-page #invoice-summary tbody tr td { border-top: 0; } body.invoice-page #invoice-summary tbody tr td:first-child { text-align: right; width: 200px; padding-right: 55px; } /* Summary table last row */ body.invoice-page #invoice-summary tbody tr:last-child td { background: #f8f8f8; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); height: 35px; line-height: 35px; } /* Bottom of page invoice buttons */ body.invoice-page .invoice-buttons { position: absolute; left: 15px; bottom: 10px; } /*===============================================H. Gallery.html================================================= */ /* GALLERY.HTML */ body.gallery-page .panel-menu .tab-content { padding: 0; border: 0; min-height: 0; background: transparent; } /*===============================================I. Validation.html================================================= */ body.validation-page label.error { font-weight: 600; color: #d9534f; font-size: 12px; margin: 6px 0 0 2px; } /*===============================================J. Sketchpad.html================================================= */ body.sketchpad-page .wPaint-menu-holder { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45); } body.sketchpad-page .chat-panel .media-img img { max-width: 50px; margin-right: 6px; } body.sketchpad-page .chat-panel .media-content { padding: 6px 12px; } body.sketchpad-page .chat-panel .media-timestamp { margin-bottom: 5px; } /*===============================================K. Timeline.html================================================= */ body.timeline-page #content { padding: 8px 35px 50px 35px; } #timeline { position: relative; } /* Timeline Spine */ #timeline:after { position: absolute; top: 0; left: 50%; width: 4px; margin-left: -2px; height: 100%; content: ""; background: #ddd; } /* Timeline Date Button/Label */ .timeline-divider { position: relative; margin: 10px 0 45px; z-index: 3; } .timeline-divider .divider-label { width: 110px; margin: 0 auto; padding: 7px; text-align: center; border: 1px solid #CCC; background: #FFF; } /* Timeline Content Panels */ #timeline .panel { position: relative; z-index: 11; overflow: visible; margin-bottom: 30px; } /* Timeline Panel Arrows */ #timeline .panel:before, #timeline .panel:after { content: ""; z-index: 2; position: absolute; top: 10px; left: 100%; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #fafafa; } #timeline .panel:after { z-index: 1; border-left-color: #666; } #timeline .right-column .panel:before, #timeline .right-column .panel:after { top: 10px; right: 100%; left: auto; border-width: 8px 12px 8px 0; border-color: transparent #fafafa transparent transparent; } #timeline .right-column .panel:after { border-right-color: #666; } /* Timeline Panel Positioning */ #timeline > .row > .left-column .timeline-item { padding-right: 30px; } #timeline > .row > .right-column .timeline-item { padding-left: 30px; } #timeline > .row > .right-column { margin-top: 80px; } #timeline .ui-sortable-disabled .panel { cursor: auto; } /* Timeline Responsive Styles */ @media (max-width: 770px) { #timeline > .row > .left-column .panel { margin-right: 0; } #timeline > .row > .right-column .panel { margin-left: 0; } #timeline > .row .panel:before { display: none; } #timeline > .row .panel:after { display: none; } } #timeline .tab-content { min-height: 0; } /* form creation styles */ #timeline .map { width: 100%; height: 275px; } #timeline-image-form .fileupload-preview { text-align: center; } #timeline-image-form .fileupload-preview img { max-height: 200px; } /* JQuery sortable placeholder */ #timeline .ui-sortable { min-height: 150px; min-width: 300px; } .timeline-icon { z-index: 1; position: absolute; right: -18px; width: 38px; height: 38px; line-height: 38px; font-size: 20px; color: #FFF; text-align: center; border-radius: 50%; background: #e8e8e8; box-shadow: 0 0 0 5px #e8e8e8; } .right-column .timeline-icon { right: auto; left: -18px; } /* SINGLE TIMELINE */ #timeline.timeline-single { margin-left: 50px; } #timeline.timeline-single:after { left: 0; } #timeline.timeline-single > .row > .col-sm-6 { width: 100%; padding-left: 65px; } #timeline.timeline-single > .row > .right-column { margin-top: 0; } #timeline.timeline-single > .row > .right-column .timeline-item, #timeline.timeline-single > .row > .left-column .timeline-item { padding-left: 0; padding-right: 0; } #timeline.timeline-single .timeline-divider .divider-label { margin-left: -55px; } #timeline.timeline-single .timeline-icon { left: -8px; right: auto; } /* Timeline Panel Arrows */ #timeline.timeline-single .panel:before, #timeline.timeline-single .panel:after { right: 100%; left: auto; border-width: 8px 12px 8px 0; border-color: transparent #fafafa transparent transparent; } #timeline.timeline-single .panel:after { border-right-color: #666; } /*===============================================M. Map Pages - Full, Vector================================================= */ .maps-vector-page #content_wrapper { min-height: 0; } .expanding-header { z-index: 999; position: absolute; top: 20px; left: 30px; width: 550px; height: 43px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; transition: all 0.2s ease-in-out; } .expanding-header.collapsed { width: 48px; } .expanding-header .map-header-icon { cursor: pointer; width: 47px; padding: 10px 13px; color: #FFF; font-size: 22px; float: left; margin-right: 10px; } .expanding-header .flag-sm { cursor: pointer; } .maps-page .expanding-header, .map-full-page .expanding-header { top: 24px; left: 90px; } .maps-page .expanding-header input.form-control { min-width: 250px; } /*===============================================L. Profile.html================================================= */ .profile-page #topbar.profile-topbar { padding-left: 0; height: 220px; max-height: 220px; background: url(../img/profile_topbar_bg.jpg) no-repeat center left; overflow: hidden; } .profile-page .topbar-avatar { float: left; width: 165px; height: 165px; margin-left: 65px; margin-top: 25px; } .profile-page .topbar-text { float: left; margin-left: 65px; margin-top: 50px; } .profile-page .topbar-text h2 { color: #FFF; margin-top: 0; } .profile-page .topbar-text p { color: #ddd; margin-top: 15px; margin-left: 5px; } .profile-page .topbar-menu { position: absolute; top: 50px; right: 20px; width: 180px; max-width: 190px; background: #ebebeb; padding: 8px 10px; } .profile-page .topbar-menu .col-xs-8 .btn { background-color: #a4705c; } .profile-page #Grid { min-height: 490px; } .profile-page .profile-tabs { margin-top: -63px; z-index: 1024; } .profile-page .profile-tabs .nav-tabs > li > a { background: none; border-color: transparent; color: #CCC; padding: 11px 20px; border-top: 3px solid transparent; } .profile-tabs .nav-tabs > li.active > a, .profile-tabs .nav-tabs > li.active > a:hover, .profile-tabs .nav-tabs > li.active > a:focus { color: #917050; background: #FFF; border-color: #CFCFCF; border-bottom: 1px solid #FFF; border-top: 3px solid #917050; } /*===============================================M. Error Pages - 404, 500================================================= */ .minimal { background: #f9f9f9; } .error-page #return-arrow { top: 75px; padding-top: 0; } #error-container img { width: 280px; margin: 30px auto 5px; } .error-title { font-size: 120px; font-weight: 800; color: #a87fc6; text-align: center; padding-top: 110px; margin-bottom: 20px; line-height: 120px; } .error-subtitle { font-weight: 400; text-align: center; font-size: 40px; color: #b0b0b0; margin-bottom: 80px; } .mid-section { width: 100%; height: 200px; background: url("../img/patterns/error-bg.jpg") repeat left top #a87fc6; } .mid-content { width: 620px; margin: 0 auto; padding: 50px 20px 35px; } .black { color: #000; } .yellow { color: #d5bd10; } .green { color: #6dce54; } .orange { color: #f17037; } .yellowTheme { color: #e8b000; } .blue { color: #2f99d8; } @media (max-width: 765px) { .mid-content { width: 100%; } } .mid-content input { color: #AAA; height: 45px; border-radius: 1px; padding: 10px 20px; border: 0; } /*====================================================N. External Pages - Login, Screen-Lock, Comingsoon====================================================== */ .minimal .panel { background: #f8f8f8; border: 10px solid #9C9C9C; border: none; border-radius: 0; box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1), -1px -2px 1px rgba(0, 0, 0, 0.1); } .minimal .panel-heading, .minimal .panel-footer { background: #FFF; border-color: #eee; } .minimal .overlay-black { position: fixed; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; } .minimal .overlay-black { background: rgba(0, 0, 0, 0.5); } .screenlock-page .panel-bg { padding: 12px; width: 530px; margin: 0 auto; background: rgba(255, 255, 255, 0.4); box-shadow: 0px 0 1px rgba(255, 255, 255, 0.8) inset; } .coming-soon-page .panel-bg { padding: 12px; width: 630px; margin: 0 auto; box-shadow: 0px 0 1px rgba(255, 255, 255, 0.75) inset; background: rgba(255, 255, 255, 0.3); background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(54%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.72)), color-stop(100%, rgba(255, 255, 255, 0.33))); background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%); background: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%); background: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%); background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); } /* ================================================ XI. PLUGINS A. Markitup B. Summernote C. Ckeditor D. RangeSlider E. Clndr F. Jvector Maps G. Flot Charts H. Tags Manager I. Mixitup J. Colorpicker/Datepicker K. Dropzone L. Gmap M. Chosen N. Form Wizard O. DataTables P. TreeView Q. Nestable R. Image Zoom S. Jquery Plugins * This file contains small changes applied * specifically to 3rd party addons. Please * see vendor.scss for actual plugin styles================================================= A. Markitup Editor================================================= */ /* Container */ .markItUp { width: 100%; margin: 0; } /* Header */ .markItUpHeader { min-height: 43px; padding: 8px 10px 0px; background: #f6f6f6; border: none; border-bottom: 1px solid #CCC; } .markItUpButton { padding: 4px; background: #FFF; border: 1px solid #CCC; } .markItUpHeader ul .markItUpSeparator { height: 25px; } /* Textarea */ .markItUpEditor { font-size: 13px; padding: 10px; border: none; width: 100%; height: 250px; } /* Footer */ .markItUpFooter { height: 15px; } /*===============================================B. Summernote================================================= */ .note-editor .note-toolbar { background: #f6f6f6; border: none; border-bottom: 1px solid #CCC; padding: 0 10px 9px; } .note-editor .note-toolbar > .btn-group { margin-top: 8px; padding-right: 10px; margin-right: 10px; border-right: 1px solid #CCC; } .note-editor .btn-sm, .note-editor .btn-group-sm > .btn { padding: 3px 8px 4px; } .note-editor { border: none; } .note-editor .note-editable { overflow: auto; } .note-editor .note-statusbar { background: none; } .note-editor .note-statusbar .note-resizebar { border: none; } /*===============================================C. CKEditor================================================= */ .fusionSkin.cke_chrome { border: none; box-shadow: none; } .fusionSkin .cke_top { background: #f6f6f6; box-shadow: none; border: none; border-bottom: 1px solid #CCC; padding: 9px 8px 5px; } .fusionSkin .cke_toolgroup, .fusionSkin .cke_combo_button { background: #FFF; border-radius: 0; border-color: #BBB; margin-right: 15px; box-shadow: none; } .fusionSkin a.cke_button { padding: 4px 5px; } .fusionSkin .cke_bottom { background: none; border-color: #DDD; } .cke_toolbar_break { clear: none !important; display: block !important; } /*===============================================D. RangeSlider================================================= */ /* Slider Container */ .ui-rangeSlider .ui-rangeSlider-bar { margin: 5px 0; height: 20px; background-color: #6390a7; } /* Slider Inner bar */ .ui-rangeSlider .ui-rangeSlider-innerBar { height: 24px; margin: 3px 0; background-color: #FFF; border: 1px solid #CCC; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset; } /* Slider Label */ .ui-rangeSlider-label { border: 0; box-shadow: none; background: none; background-image: none; } .ui-rangeSlider-label-value { position: relative; top: -8px; min-width: 40px; min-height: 25px; text-align: center; line-height: 25px; font-size: 12px; font-weight: 600; border-radius: 4px; background: #fafafa; background-image: none; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .ui-rangeSlider-label:after { content: "\f0d7"; width: 100%; position: absolute; bottom: 0; margin: 0 -6px; color: #f8f8f8; font-family: FontAwesome; font-size: 18px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Slider Input Label */ input.ui-editRangeSlider-inputValue { border: 1px solid var(--border-color); width: 2.2em; } /* Slider Handles */ .ui-rangeSlider .ui-rangeSlider-handle { background: none; } .ui-rangeSlider .ui-rangeSlider-handle-inner { background: url(../img/plugins/slider-knob.png) no-repeat center top; width: 22px; height: 24px; } .ui-rangeSlider-leftHandle .ui-rangeSlider-handle-inner { margin-left: -10px; } .ui-rangeSlider-rightHandle .ui-rangeSlider-handle-inner { margin-left: -4px; } /* Slider Arrows */ .ui-rangeSlider-arrow { margin: 6px 0; } .ui-rangeSlider-arrow.ui-rangeSlider-leftArrow { left: -13px !important; } .ui-rangeSlider-arrow.ui-rangeSlider-rightArrow { right: -13px !important; } /*===============================================E. Clndr ================================================= */ .clndr .clndr-controls { display: none; width: 100%; position: relative; margin-bottom: 10px; } .clndr .clndr-controls .month { float: left; width: 33%; text-align: center; } .clndr .clndr-controls .clndr-control-button { float: left; width: 33%; } .clndr .clndr-controls .clndr-control-button.rightalign { text-align: right; width: 34%; } .clndr .clndr-controls .clndr-control-button .clndr-next-button { cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover { background: #ddd; } .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive { opacity: 0.5; } .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover { background: none; cursor: default; } .clndr .clndr-controls .clndr-control-button .clndr-previous-button { cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover { background: #ddd; } .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive { opacity: 0.5; } .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover { background: none; cursor: default; } .clndr .clndr-table { table-layout: fixed; width: 100%; } .clndr .clndr-table .header-days { height: 30px; font-size: 13px; font-weight: 600; } .clndr .clndr-table .header-days .header-day { vertical-align: middle; text-align: center; } .clndr .clndr-table tr { height: 45px; } .clndr .clndr-table tr td { vertical-align: middle; } .clndr .clndr-table tr .day { width: 100%; height: inherit; padding: 10px; } .clndr .clndr-table tr .day:hover { background: #eee; } .clndr .clndr-table tr .day.today .day-contents { width: 35px; text-align: center; margin: 0 auto; position: relative; color: #FFF; font-weight: 700; background: #c7b7e5; border-radius: 5px; } .clndr .clndr-table tr .day.today.event { background: #a7dbc1; } .clndr .clndr-table tr .day.event { background: #B4E09F; } .clndr .clndr-table tr .day.event:hover { background: #96d478; } .clndr .clndr-table tr .day.inactive { background: #ddd; } .clndr .clndr-table tr .day .day-contents { color: #888; box-sizing: border-box; padding: 8px; font-size: 12px; text-align: center; } .clndr .clndr-table tr .empty, .clndr .clndr-table tr .adjacent-month { color: #AAA; width: 100%; height: inherit; } .clndr .clndr-table tr .empty:hover, .clndr .clndr-table tr .adjacent-month:hover { background: #ddd; } /*===============================================F. Jvector Maps================================================= */ .jvectormap-label { z-index: 10; position: absolute; display: none; border: solid 1px #CDCDCD; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #292929; color: white; font-size: smaller; padding: 3px; } .jvectormap-zoomin, .jvectormap-zoomout { cursor: pointer; position: absolute; top: 20px; left: auto; right: 30px; padding: 0; width: 40px; height: 35px; line-height: 35px; color: #fff; text-align: center; font-weight: 400; font-size: 22px; border-radius: 2px; background: rgba(0, 0, 0, 0.5); } .jvectormap-zoomout { right: 80px; } /*===============================================G. Flot Charts================================================= */ /* Shared Flot and Sparkline tooltip */ .jqstooltip, #flotTip { color: #fff; width: auto !important; height: auto !important; padding: 2px 6px !important; background-color: rgba(0, 0, 0, 0.7) !important; border: 0 !important; border-radius: 3px; } .flot-x-axis .flot-tick-label.tickLabel { color: #AAA; } .flot-y-axis .flot-tick-label.tickLabel { color: #AAA; padding-top: 6px; padding-left: 14px; } td.legendColorBox { padding: 5px; } /*===============================================H. Tags Manager================================================= */ .tm-tag { margin-right: 8px; } .tag-container { margin-top: 15px; } .tm-tag.tm-tag-theme { color: #6b3fa2; border-color: #cbc0f8; background-color: #e3def8; } /*===============================================I. Mixitup================================================= */ #Grid { padding: 0; text-align: justify; -webkit-backface-visibility: hidden; min-height: 368px; } #Grid:after { content: ''; display: inline-block; width: 100%; } #Grid .mix, #Grid .gap { display: inline-block; width: 32%; } #Grid .mix { text-align: left; margin-bottom: 1%; display: none; } .row_new.promoblocks { padding: 0px 15px !important; } .mngMBlock .isotope-item .work-img { position: relative; overflow: hidden; width: 100% !important; display: block !important; } .mngMBlock .isotope-item .work-img img { position: absolute; width: 100%; top: 0px; height: auto; left: 0px; bottom: 0px; margin: auto; max-height: initial; } .mngMBlock .isotope-item label { line-height: 1em; margin-top: 5px; word-break: break-word; } @media all and (min-width: 720px) { #Grid .mix, #Grid .gap { width: 24%; } } #Grid .mix .mix-desc { display: none; } /* Grid sortable placeholder */ #Grid .placeholder { position: relative; display: inline-block; vertical-align: top; background: #DDD; } #Grid .placeholder::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF; box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF; } /* List version */ #Grid.list .mix { width: 100%; max-height: 85px; background: #fff; } #Grid.list .mix:nth-child(odd) { background: #f8f8f8; } #Grid.list .mix:before { padding-top: 40px; } /* List Version img */ #Grid.list .mix img { max-height: 100%; float: left; margin-right: 20px; } /* List Version text */ #Grid.list .mix .mix-desc { display: block; padding: 10px; } #Grid.list .mix .mix-desc p { display: block; font-size: 13px; } #Grid.list .placeholder { margin-bottom: 1%; } /*===============================================J. Colorpicker/Datepicker/DateRangePicker================================================= */ .colorpicker { z-index: 1051; padding: 6px 12px; min-width: 0; } .datepicker { /*padding: 6px 12px;*/ } .daterangepicker { background: #fafafa; } /*===============================================K. Dropzone================================================= */ .dropzone { min-height: 405px; } .dropzone .dz-default.dz-message { background-image: none; width: 100%; height: 100%; top: 23%; margin-left: 0px; margin-top: -23px; text-align: center; left: 0; } .dropzone .dz-default.dz-message span { display: inline-block; text-align: center; } .dropzone .dz-default.dz-message span.main-text { font-size: 28px; font-weight: 400; color: #666; } .dropzone .dz-default.dz-message span.main-text b { font-size: 40px; color: #444; } .dropzone .dz-default.dz-message span.sub-text { font-size: 20px; color: #888; } .dropzone .dz-default.dz-message i.fa { font-size: 100px; display: block; color: #a87fc6; margin-bottom: 15px; } .dropzone a.dz-remove, .dropzone-previews a.dz-remove { cursor: pointer; } /* Demonstration Purposes ONLY */ .dropzone .dz-preview .dz-error-message, .dropzone-previews .dz-preview .dz-error-message { display: none !important; } /*===============================================L. Gmap================================================= */ /* Inline Map Pagination Styles */ .map .pagination { text-shadow: 0 1px #ffffff; background-color: #f0f0f0; width: 96%; margin: 11px; -webkit-box-shadow: 0 2px 4px #999; box-shadow: 0 2px 4px #999; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } .map .pagination .display { display: inline-block; width: 84%; height: 40px; border-right: 1px solid #fff; border-left: 1px solid #fff; text-align: center; line-height: 40px; text-shadow: 0 1px #FFF; } .map .pagination .btn { width: 8%; height: 40px; cursor: pointer; border-radius: 0; vertical-align: top; border: 0; } .map .pagination .back-btn { float: left; border-right: 1px solid var(--border-color); background: url("../vendor/plugins/gmap/images/arrow_left_12x12.png") no-repeat 50% 50%; } .map .pagination .fwd-btn { float: right; border-left: 1px solid var(--border-color); background: url("../vendor/plugins/gmap/images/arrow_right_12x12.png") no-repeat 50% 50%; } .map .checker { margin-right: 8px; } /* Map Styling Helper Classes */ .map-shadow { -webkit-box-shadow: 0 2px 3px #999; box-shadow: 0 2px 3px #999; } .map-gradient { text-shadow: 0 1px #ffffff; background-color: #f0f0f0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } .map-rounded { border-radius: 4px; } /*===============================================M. Chosen================================================= */ /* Single Select List */ .chosen-container-single .chosen-single { border-color: #ddd; box-shadow: none; height: 32px; line-height: 32px; border-radius: 0; } .chosen-container-single .chosen-drop { padding: 5px; } /* Multi Select List */ .chosen-container-multi .chosen-choices { cursor: pointer; border-color: #ddd; background-clip: padding-box; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #ffffff 1%, #f0f0f0 100%); } .chosen-container-multi .chosen-choices li.search-field input[type="text"] { cursor: pointer; height: 32px; line-height: 32px; } .chosen-container-multi.chosen-container-active .chosen-choices { box-shadow: none; background-repeat: repeat-x; background-clip: padding-box; background-image: linear-gradient(to bottom, #eeeeee 1%, #ffffff 100%); } .chosen-container-multi.chosen-container-active .chosen-drop { padding: 8px 5px; -webkit-box-shadow: 0 0 8px #999; box-shadow: 0 0 8px #999; } /*===============================================N. Form Wizard================================================= */ /*===============================================O. DataTables================================================= */ /* Datatable Header */ table.dataTable thead th { border-bottom: 1px solid var(--border-color); font-weight: 600; } /* Datatable Sorted Rows */ table.dataTable tr.odd td.sorting_1 { background-color: white; } table.dataTable tr.even td.sorting_1 { background-color: #f8f8f8; } /* Datatable Filters Menu Container */ .dt-panelmenu { min-height: 52px; /*margin: -15px -15px 10px;*/ text-align: center; } /* DataTables Search Bar Filter */ div.dataTables_filter input { width: 270px; line-height: 1.428571429; padding: 3px 8px; color: #999; outline: none; background: #FFF; max-height: 30px; height: 29px; border: 1px solid #ddd; } div.dataTables_filter input[placeholder] { font-weight: 400; } /* DataTables Dropdown Filter */ .dataTables_length { display: none; } .dt-panelmenu .close { color: #FFF; opacity: 1; width: 20px; height: 20px; margin-top: 20px; } .dt-panelmenu .close:hover { opacity: .8; } .dt-panelmenu .modal-title .panel-title { padding-top: 0px; } .form_crop .dt-panelmenu { background: #0c74e3; min-height: 52px; } .form_crop .panel-title { padding-left: 0px; color: #fff; } .form_crop .close { color: #FFF !important; font-weight: normal; font-size: 21px; } @media (min-width: 768px) { .dataTables_length { display: block; } } .dataTables_length .chosen-container { margin: 0 5px; } div.dataTables_length label { color: #999; font-weight: 600; } .dataTables_length .chosen-container-single .chosen-single { height: 30px; line-height: 28px; color: #888; background: #FFF; } /* DataTables Dropdown Filter Arrow Icon */ .dataTables_length .chosen-container-single .chosen-single div { top: 3px; } /* Datatable Result Counter */ div.dataTables_info { padding-top: 10px; color: #999; } /* Datatable Footer */ .datatables-footer { margin-top: 10px; } /* Datatable Pagination */ .datatables-footer .pagination { margin: 0; } .datatables-footer .pagination { padding-top: 2px; } table.dataTable > thead > tr > th, table.dataTable > tbody > tr > th, table.dataTable > tfoot > tr > th, table.dataTable > thead > tr > td, table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > td { vertical-align: middle; } /* DATATABLES PLUGIN STYLES - TABLETOOLS */ /* TableTools Container */ div.DTTT_container { position: absolute; float: none; right: 0; top: -30px; } /* TableTools Buttons */ div.DTTT_container .DTTT_button { font-size: 1em; color: #AAA !important; padding: 2px 8px; margin-right: 10px; border-radius: 2px; border: 1px solid var(--border-color); box-shadow: none; } div.DTTT_container .DTTT_button:last-child { margin-right: 0px; } div.DTTT_container .DTTT_button:hover { color: #333; border-color: #AAA; box-shadow: none; } /* * PRINTING * Print display styles */ .DTTT_print_info { position: fixed; top: 10%; left: 50%; width: 400px; height: 150px; margin-left: -200px; margin-top: -75px; text-align: center; color: #333; padding: 10px 30px; background: #ffffff; /* Old browsers */ background: -webkit-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%); /* IE10+ */ background: -o-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%); /* Opera 11.10+ */ background: linear-gradient(top, #ffffff 0%, #f3f3f3 89%, #f9f9f9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ opacity: 0.95; border: 1px solid black; border: 1px solid rgba(0, 0, 0, 0.5); -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); } .DTTT_print_info h6 { font-weight: normal; font-size: 28px; line-height: 28px; margin: 1em; } .DTTT_print_info p { font-size: 14px; line-height: 20px; } /*===============================================P. TreeView================================================= */ ul.dynatree-container { border: none; background-color: transparent; } ul.dynatree-container ul { margin-left: 20px; } span.dynatree-folder { position: relative; margin: 5px; padding: 8px 5px 8px 8px; border-radius: 2px; } span.dynatree-folder + ul .dynatree-node { margin: 7px 5px; padding: 8px 5px 8px 12px; } span.dynatree-folder + ul li { position: relative; } span.dynatree-folder + ul li:before { content: ""; position: absolute; left: -20px; top: 49%; height: 1px; width: 22px; border-bottom: 1px solid #CCC; } span.dynatree-folder + ul li:after { content: ""; position: absolute; left: -20px; top: 0; height: 100%; width: 1px; border-left: 1px solid #CCC; } span.dynatree-folder + ul li:last-child:after { height: 53%; } ul.dynatree-container a { font-weight: 600; color: #666; text-shadow: 0 1px #FFF; outline: none; border: none; } ul.dynatree-container a:hover, ul.dynatree-container .dynatree-active a { outline: none; border: none; background: transparent; } span.dynatree-connector { display: none; } /* Alternate Tree Style - Minimal. Uses class "tree-alt" */ .tree-alt span.dynatree-folder { position: relative; margin: 5px; padding: 5px 3px 5px 5px; border: none; background: none; } .tree-alt ul.dynatree-container ul { margin-left: 30px; } .tree-alt span.dynatree-folder + ul .dynatree-node { margin: 5px 3px; padding: 6px 7px 6px 4px; } /* Modifies size of alt style when in Panel Side Menu */ .panel-sidemenu .tree-alt span.dynatree-folder { margin-left: 0; padding-left: 0; } .panel-sidemenu .tree-alt span.dynatree-folder + ul .dynatree-node { padding: 3px 3px 3px 6px; } .tree-alt-bg span.dynatree-folder a.dynatree-title { color: #FFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); } .tree-alt-bg.tree-purple span.dynatree-folder { background-color: #a287d4; } .tree-alt-bg.tree-teal span.dynatree-folder { background-color: #2dc5c7; } .tree-alt-bg.tree-orange span.dynatree-folder { background-color: #f9892e; } .tree-alt-bg.tree-green span.dynatree-folder { background-color: #6fa53e; } .tree-alt-bg.tree-red span.dynatree-folder { background-color: #ff745a; } .tree-alt-bg.tree-yellow span.dynatree-folder { background-color: #ffcf5a; } .tree-alt-bg.tree-blue span.dynatree-folder { background-color: #2066b1; } .tree-alt-bg.tree-grey span.dynatree-folder { background-color: #2066b1; } /* Demonstration Styles - Tab Tree Content */ .tree-content-example .tab-pane { display: none; } .tree-content-example .tab-pane img { float: left; width: 47%; max-width: 47%; margin: 1.5%; padding: 2px; border: 3px solid #CCC; } /* DRAG AND DROP SUPPORT */ /* Helper object */ div.dynatree-drag-helper a { border: 1px solid gray; background-color: white; padding-left: 5px; padding-right: 5px; opacity: 0.8; } span.dynatree-drag-helper-img { /* position: relative; left: -16px; */ } div.dynatree-drag-helper { /* border-color: green; background-color: red; */ } div.dynatree-drop-accept span.dynatree-drag-helper-img { background-position: -32px -112px; } div.dynatree-drag-helper.dynatree-drop-reject { border-color: red; } div.dynatree-drop-reject span.dynatree-drag-helper-img { background-position: -16px -112px; } /* Drop marker icon */ #dynatree-drop-marker { width: 24px; position: absolute; background-position: 0 -128px; margin: 0; } #dynatree-drop-marker.dynatree-drop-after, #dynatree-drop-marker.dynatree-drop-before { width: 64px; background-position: 0 -144px; } #dynatree-drop-marker.dynatree-drop-copy { background-position: -64px -128px; } #dynatree-drop-marker.dynatree-drop-move { background-position: -64px -128px; } /* Source node while dragging */ span.dynatree-drag-source { /* border: 1px dotted gray; */ background-color: #e0e0e0; } span.dynatree-drag-source a { color: gray; } /* Target node while dragging cursor is over it */ span.dynatree-drop-target { /*border: 1px solid gray;*/ } span.dynatree-drop-target.dynatree-drop-accept a { /*border: 1px solid green;*/ background-color: #3169C6 !important; color: white !important; /* @ IE6 */ text-decoration: none; } span.dynatree-drop-target.dynatree-drop-reject { /*border: 1px solid red;*/ } /*===============================================Q. Nestable================================================= */ .dd { position: relative; display: block; margin: 10px 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; } .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } .dd-list .dd-list { padding-left: 30px; } .dd-collapsed .dd-list { display: none; } .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; } /* Default Color */ .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #FFF; text-decoration: none; font-weight: bold; border: 1px solid var(--border-color); cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); background-color: ""; background-repeat: repeat-x; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%); } .dd-handle:hover { background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%); } .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; } .dd-item > button[data-action="collapse"]:before { content: '-'; } .dd-placeholder, .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; } .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } .dd-dragel > .dd-item .dd-handle { margin-top: 0; } .dd-dragel .dd-handle { background: #888; -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); } /* Nestable Extras */ .nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } #nestable-menu { padding: 0; margin: 20px 0; } #nestable-output, #nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; } /* Alternate Colors */ .nestable-white .dd-handle { color: #666; text-shadow: 0 1px #ffffff; background-color: #f0f0f0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } .nestable-white .dd-handle:hover { color: #666; } .nestable-grey .dd-handle { background-color: #323232; } .nestable-grey .dd-item > button:before { color: #fff; } .nestable-blue .dd-handle { background-color: #0066ad; } .nestable-blue .dd-item > button:before { color: #fff; } .nestable-green .dd-handle { background-color: var(--success); } .nestable-green .dd-item > button:before { color: #fff; } .dd-hover > .dd-handle { background: #2ea8e5 !important; } /* Nestable Draggable Handles */ .dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid var(--border-color); text-shadow: 0 1px #ffffff; background-color: #f0f0f0; -webkit-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%); } .dd3-content:hover { color: #2ea8e5; background: #fff; } .dd-dragel > .dd3-item > .dd3-content { margin: 0; } .dd3-item > button { margin-left: 30px; } .dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); background-color: #323232; background-repeat: repeat-x; border: 1px solid #aaa; border-top-right-radius: 0; border-bottom-right-radius: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%); } .dd3-handle:before { content: 'ð'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; } .dd3-handle:hover { background: #ddd; } /*===============================================R. ImageZoom================================================= */ .zoomLens { border-radius: 50%; } /*===============================================S. jQuery Sortable================================================= */ .sortable > div { cursor: move; } /*===============================================S. jQuery Spinner================================================= */ .ui-spinner-input { color: inherit; min-height: 36px; } .ui-spinner-button { z-index: 3; cursor: pointer; display: block; overflow: hidden; position: absolute; right: 0; width: 16px; height: 50%; padding: 0; margin: 0; font-size: .5em; text-align: center; } .input-group .ui-spinner .form-control:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .ui-spinner .ui-icon { position: absolute; margin-top: -2px; top: 50%; left: 0; text-indent: 0; } .ui-spinner-up .ui-icon { margin-top: -6px; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* needed to correct false icon sprite pos */ background-position: -65px -16px; } /* ==============================================* All color variables used in this stylesheet* are stored in modules/_colors.scss VII. COLOR SYSTEM A. Misc Skin/Colors B. Colors for Custom Elements C. Tabs D. Icons E. Menu and Button Dropdowns F. Text Input Forms G. Thumbnails H. Paginations I. Checkboxes J. Switches K. RangeSlider L. Progress Bar Colors M. Text Colors N. Border Colors O. Background Colors P. Background Colors - Advanced Set* The Fusion Color System has two variations* of every color. A Light shade and a dark* shade. To create a gradient we set the * elements background-color to the dark shade* and then apply a gradient overlay via * the "gradient" mixin. ================================================= A. Misc Skin/Colors================================================= */ /* Custom Theme(purple) Alert */ .alert-theme { color: #715da3; border-color: rgba(199, 183, 229, 0.4); background-color: rgba(199, 183, 229, 0.4); } .alert-theme .alert-link { color: #715da3; } /*===============================================A. Colors for Custom Elements================================================= */ .facebook-color { background-color: #6395cf; } .twitter-color { background-color: #4fbdc8; } /* custom right side menu button */ .text-cloud { color: #afb6c6; } /* User Online Green Border Color */ .border-onlinegreen { border-color: #94d867; } /*===============================================A. Tabs================================================= */ /*===============================================A. Icons================================================= */ /* Panel Header Icon */ .panel-title > .fa, .panel-title > .glyphicon, .panel-title > .glyphicons, .panel-title > .imoon { color: #0c74e3; } .panel-title.bluetx { color: #0c74e3; } /*===============================================A. Menu and Button Dropdowns================================================= */ /*===============================================A. Text Input Forms================================================= */ .has-warning .form-control, .has-warning .form-control:focus { border-color: #ffcf5a; } .has-success .form-control, .has-success .form-control:focus { border-color: #a0d65a; } .has-error .form-control, .has-error .form-control:focus { border-color: #ff745a; } /*===============================================A. Thumbnails================================================= */ a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #a287d4; } .thumbnail-xs { border-color: #a287d4; } .thumbnail-sm { border-color: #a287d4; } /*===============================================A. Paginations================================================= */ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #a287d4; border-color: #a287d4; } .pagination > li > a, .pagination > li > span { color: #a287d4; } .pagination-alt > li.active > a { background-color: #715da3; border-color: #715da3; } /*===============================================A. Checkboxes================================================= */ .cBox.cBox-teal3 label:before { background-color: #1e9093; } .cBox.cBox-teal label:before { background-color: #a8e9ea; } .cBox.cBox-teal2 label:before { background-color: #2dc5c7; } .cBox.cBox-teal3 label:before { background-color: #1e9093; } .cBox.cBox-blue label:before { background-color: #82b4ff; } .cBox.cBox-blue2 label:before { background-color: #2066b1; } .cBox.cBox-blue3 label:before { background-color: #2066b1; } .cBox.cBox-purple label:before { background-color: #c7b7e5; } .cBox.cBox-purple2 label:before { background-color: #a287d4; } .cBox.cBox-purple3 label:before { background-color: #715da3; } .cBox.cBox-pink label:before { background-color: #ffd1ed; } .cBox.cBox-pink2 label:before { background-color: #ffb2e1; } .cBox.cBox-pink3 label:before { background-color: #ff7fb4; } .cBox.cBox-red label:before { background-color: #ffac9c; } .cBox.cBox-red2 label:before { background-color: #ff745a; } .cBox.cBox-red3 label:before { background-color: #ff4f3e; } .cBox.cBox-orange label:before { background-color: #fbb882; } .cBox.cBox-orange2 label:before { background-color: #f9892e; } .cBox.cBox-orange3 label:before { background-color: #e55e20; } .cBox.cBox-yellow label:before { background-color: #ffe29c; } .cBox.cBox-yellow2 label:before { background-color: #ffcf5a; } .cBox.cBox-yellow3 label:before { background-color: #ff9d3e; } .cBox.cBox-green label:before { background-color: #c6e69c; } .cBox.cBox-green2 label:before { background-color: #a0d65a; } .cBox.cBox-green3 label:before { background-color: #6fa53e; } .cBox.cBox-grey label:before { background-color: #b0daec; } .cBox.cBox-grey2 label:before { background-color: #2066b1; } .cBox.cBox-grey3 label:before { background-color: #2066b1; } /*===============================================A. Switches================================================= */ div.switch.switch-teal input:checked + label { background-color: #a8e9ea; } div.switch.switch-teal2 input:checked + label { background-color: #2dc5c7; } div.switch.switch-teal3 input:checked + label { background-color: #1e9093; } div.switch.switch-blue input:checked + label { background-color: #82b4ff; } div.switch.switch-blue2 input:checked + label { background-color: #2066b1; } div.switch.switch-blue3 input:checked + label { background-color: #2066b1; } div.switch.switch-purple input:checked + label { background-color: #c7b7e5; } div.switch.switch-purple2 input:checked + label { background-color: #a287d4; } div.switch.switch-purple3 input:checked + label { background-color: #715da3; } div.switch.switch-pink input:checked + label { background-color: #ffd1ed; } div.switch.switch-pink2 input:checked + label { background-color: #ffb2e1; } div.switch.switch-pink3 input:checked + label { background-color: #ff7fb4; } div.switch.switch-red input:checked + label { background-color: #ffac9c; } div.switch.switch-red2 input:checked + label { background-color: #ff745a; } div.switch.switch-red3 input:checked + label { background-color: #ff4f3e; } div.switch.switch-orange input:checked + label { background-color: #fbb882; } div.switch.switch-orange2 input:checked + label { background-color: #f9892e; } div.switch.switch-orange3 input:checked + label { background-color: #e55e20; } div.switch.switch-yellow input:checked + label { background-color: #ffe29c; } div.switch.switch-yellow2 input:checked + label { background-color: #ffcf5a; } div.switch.switch-yellow3 input:checked + label { background-color: #ff9d3e; } div.switch.switch-green input:checked + label { background-color: #c6e69c; } div.switch.switch-green2 input:checked + label { background-color: #a0d65a; } div.switch.switch-green3 input:checked + label { background-color: #6fa53e; } div.switch.switch-grey input:checked + label { background-color: #b0daec; } div.switch.switch-grey2 input:checked + label { background-color: #2066b1; } div.switch.switch-grey3 input:checked + label { background-color: #2066b1; } div.switch.switch-cstm input:checked + label { background-color: var(--secondary); } /*===============================================A. RangeSlider================================================= */ /* take note of where color class is applied(parent container) * See sliders.html for example */ .ui-rangeSlider.slider-teal .ui-rangeSlider-bar { background-color: #a8e9ea; } .ui-rangeSlider.slider-teal2 .ui-rangeSlider-bar { background-color: #2dc5c7; } .ui-rangeSlider.slider-teal3 .ui-rangeSlider-bar { background-color: #1e9093; } .ui-rangeSlider.slider-blue .ui-rangeSlider-bar { background-color: #82b4ff; } .ui-rangeSlider.slider-blue2 .ui-rangeSlider-bar { background-color: #2066b1; } .ui-rangeSlider.slider-blue3 .ui-rangeSlider-bar { background-color: #2066b1; } .ui-rangeSlider.slider-purple .ui-rangeSlider-bar { background-color: #c7b7e5; } .ui-rangeSlider.slider-purple2 .ui-rangeSlider-bar { background-color: #a287d4; } .ui-rangeSlider.slider-purple3 .ui-rangeSlider-bar { background-color: #715da3; } .ui-rangeSlider.slider-pink .ui-rangeSlider-bar { background-color: #ffd1ed; } .ui-rangeSlider.slider-pink2 .ui-rangeSlider-bar { background-color: #ffb2e1; } .ui-rangeSlider.slider-pink3 .ui-rangeSlider-bar { background-color: #ff7fb4; } .ui-rangeSlider.slider-red .ui-rangeSlider-bar { background-color: #ffac9c; } .ui-rangeSlider.slider-red2 .ui-rangeSlider-bar { background-color: #ff745a; } .ui-rangeSlider.slider-red3 .ui-rangeSlider-bar { background-color: #ff4f3e; } .ui-rangeSlider.slider-orange .ui-rangeSlider-bar { background-color: #fbb882; } .ui-rangeSlider.slider-orange2 .ui-rangeSlider-bar { background-color: #f9892e; } .ui-rangeSlider.slider-orange3 .ui-rangeSlider-bar { background-color: #e55e20; } .ui-rangeSlider.slider-yellow .ui-rangeSlider-bar { background-color: #ffe29c; } .ui-rangeSlider.slider-yellow2 .ui-rangeSlider-bar { background-color: #ffcf5a; } .ui-rangeSlider.slider-yellow3 .ui-rangeSlider-bar { background-color: #ff9d3e; } .ui-rangeSlider.slider-green .ui-rangeSlider-bar { background-color: #c6e69c; } .ui-rangeSlider.slider-green2 .ui-rangeSlider-bar { background-color: #a0d65a; } .ui-rangeSlider.slider-green3 .ui-rangeSlider-bar { background-color: #6fa53e; } .ui-rangeSlider.slider-grey .ui-rangeSlider-bar { background-color: #b0daec; } .ui-rangeSlider.slider-grey2 .ui-rangeSlider-bar { background-color: #2066b1; } .ui-rangeSlider.slider-grey3 .ui-rangeSlider-bar { background-color: #2066b1; } /*===============================================B. Progress Bar Colors================================================= */ .progress-bar-teal { background-color: #a8e9ea !important; } .progress-bar-teal2 { background-color: #2dc5c7 !important; } .progress-bar-teal3 { background-color: #1e9093 !important; } .progress-bar-blue { background-color: #82b4ff !important; } .progress-bar-blue2 { background-color: #2066b1 !important; } .progress-bar-blue3 { background-color: #2066b1 !important; } .progress-bar-purple { background-color: #c7b7e5 !important; } .progress-bar-purple2 { background-color: #a287d4 !important; } .progress-bar-purple3 { background-color: #715da3 !important; } .progress-bar-pink { background-color: #ffd1ed !important; } .progress-bar-pink2 { background-color: #ffb2e1 !important; } .progress-bar-pink3 { background-color: #ff7fb4 !important; } .progress-bar-red { background-color: #ffac9c !important; } .progress-bar-red2 { background-color: #ff745a !important; } .progress-bar-red3 { background-color: #ff4f3e !important; } .progress-bar-orange { background-color: #fbb882 !important; } .progress-bar-orange2 { background-color: #f9892e !important; } .progress-bar-orange3 { background-color: #e55e20 !important; } .progress-bar-yellow { background-color: #ffe29c !important; } .progress-bar-yellow2 { background-color: #ffcf5a !important; } .progress-bar-yellow3 { background-color: #ff9d3e !important; } .progress-bar-green { background-color: #c6e69c !important; } .progress-bar-green2 { background-color: #a0d65a !important; } .progress-bar-green3 { background-color: #6fa53e !important; } .progress-bar-grey { background-color: #b0daec !important; } .progress-bar-grey2 { background-color: #2066b1 !important; } .progress-bar-grey3 { border-color: #2066b1 !important; } /* Neutral Colors */ .progress-bar-white { background-color: white !important; } .progress-bar-light { background-color: white !important; } .progress-bar-light2 { background-color: #f0f0f0 !important; } .progress-bar-light3 { background-color: #e8e8e8 !important; } .progress-bar-light4 { background-color: #dddddd !important; } .progress-bar-light5 { background-color: #cccccc !important; } .progress-bar-light6 { background-color: #bbbbbb !important; } .progress-bar-light7 { background-color: #aaaaaa !important; } .progress-bar-dark { background-color: #777777 !important; } .progress-bar-dark2 { background-color: #666666 !important; } .progress-bar-dark3 { background-color: #494949 !important; } .progress-bar-dark4 { background-color: #323232 !important; } .progress-bar-dark5 { background-color: #1e1c1f !important; } /*===============================================A. Text Colors================================================= */ .text-secondary { color: var(--secondary) !important; } .text-twc { color: var(--twc) !important; } .text-teal { color: #a8e9ea !important; } .text-teal2 { color: #2dc5c7 !important; } .text-teal3 { color: #1e9093 !important; } .text-blue { color: #82b4ff !important; } .text-blue2 { color: #2066b1 !important; } .text-blue3 { color: #2066b1 !important; } .text-purple { color: #c7b7e5 !important; } .text-purple2 { color: #a287d4 !important; } .text-purple3 { color: #715da3 !important; } .text-pink { color: #ffd1ed !important; } .text-pink2 { color: #ffb2e1 !important; } .text-pink3 { color: #ff7fb4 !important; } .text-red { color: #ffac9c !important; } .text-red2 { color: #ff745a !important; } .text-red3 { color: var(--danger) !important; } .text-orange { color: var(--warning) !important; } .text-orange2 { color: var(--warning) !important; } .text-orange3 { color: var(--warning) !important; } .text-yellow { color: #ffe29c !important; } .text-yellow2 { color: #ffcf5a !important; } .text-yellow3 { color: #ff9d3e !important; } .text-green { color: #c6e69c !important; } .text-green2 { color: #a0d65a !important; } .text-green3 { color: #6fa53e !important; } .text-grey { color: #b0daec !important; } .text-grey2 { color: #2066b1 !important; } .text-grey3 { color: #4b87ae !important; } /* Neutral Colors */ .text-white { color: white !important; } .text-light { color: white !important; } .text-light2 { color: #f0f0f0 !important; } .text-light3 { color: #e8e8e8 !important; } .text-light4 { color: #dddddd !important; } .text-light5 { color: #cccccc !important; } .text-light6 { color: #bbbbbb !important; } .text-light7 { color: #aaaaaa !important; } .text-dark { color: #777777 !important; } .text-dark2 { color: #666666 !important; } .text-dark3 { color: #494949 !important; } .text-dark4 { color: #323232 !important; } .text-dark5 { color: #1e1c1f !important; } /*===============================================B. Border Colors================================================= */ .border-teal { border-color: #a8e9ea !important; } .border-teal2 { border-color: #2dc5c7 !important; } .border-teal3 { border-color: #1e9093 !important; } .border-blue { border-color: #82b4ff !important; } .border-blue2 { border-color: #2066b1 !important; } .border-blue3 { border-color: #2066b1 !important; } .border-purple { border-color: #c7b7e5 !important; } .border-purple2 { border-color: #a287d4 !important; } .border-purple3 { border-color: #715da3 !important; } .border-pink { border-color: #ffd1ed !important; } .border-pink2 { border-color: #ffb2e1 !important; } .border-pink3 { border-color: #ff7fb4 !important; } .border-red { border-color: #ffac9c !important; } .border-red2 { border-color: #ff745a !important; } .border-red3 { border-color: #ff4f3e !important; } .border-orange { border-color: #fbb882 !important; } .border-orange2 { border-color: #f9892e !important; } .border-orange3 { border-color: #e55e20 !important; } .border-yellow { border-color: #ffe29c !important; } .border-yellow2 { border-color: #ffcf5a !important; } .border-yellow3 { border-color: #ff9d3e !important; } .border-green { border-color: #c6e69c !important; } .border-green2 { border-color: #a0d65a !important; } .border-green3 { border-color: #6fa53e !important; } .border-grey { border-color: #b0daec !important; } .border-grey2 { border-color: #2066b1 !important; } .border-grey3 { border-color: #4b87ae !important; } /* Neutral Colors */ .border-white { border-color: white !important; } .border-light { border-color: white !important; } .border-light2 { border-color: #f0f0f0 !important; } .border-light3 { border-color: #e8e8e8 !important; } .border-light4 { border-color: #dddddd !important; } .border-light5 { border-color: #cccccc !important; } .border-light6 { border-color: #bbbbbb !important; } .border-light7 { border-color: #aaaaaa !important; } .border-dark { border-color: #777777 !important; } .border-dark2 { border-color: #666666 !important; } .border-dark3 { border-color: #494949 !important; } .border-dark4 { border-color: #323232 !important; } .border-dark5 { border-color: #1e1c1f !important; } /*===============================================B. Background Colors================================================= */ .bg-secondary { background-color: var(--secondary) !important; } .bg-twc { background-color: var(--twc) !important; } .bg-teal { background-color: #a8e9ea !important; } .bg-teal2 { background-color: #2dc5c7 !important; } .bg-teal3 { background-color: #1e9093 !important; } .bg-blue { background-color: #82b4ff !important; } .bg-blue2 { background-color: #2066b1 !important; } .bg-blue3 { background-color: #2066b1 !important; } .bg-purple { background-color: #c7b7e5 !important; } .bg-purple2 { background-color: #a287d4 !important; } .bg-purple3 { background-color: #715da3 !important; } .bg-pink { background-color: #ffd1ed !important; } .bg-pink2 { background-color: #ffb2e1 !important; } .bg-pink3 { background-color: #ff7fb4 !important; } .bg-red { background-color: #ffac9c !important; } .bg-red2 { background-color: #ff745a !important; } .bg-red3 { background-color: #ff4f3e !important; } .bg-orange { background-color: #fbb882 !important; } .bg-orange2 { background-color: #f9892e !important; } .bg-orange3 { background-color: #e55e20 !important; } .bg-yellow { background-color: #ffe29c !important; } .bg-yellow2 { background-color: #ffcf5a !important; } .bg-yellow3 { background-color: #ff9d3e !important; } .bg-green { background-color: #c6e69c !important; } .bg-green2 { background-color: #a0d65a !important; } .bg-green3 { background-color: #6fa53e !important; } .bg-grey { background-color: #b0daec !important; } .bg-grey2 { background-color: #2066b1 !important; } .bg-grey3 { background-color: #4b87ae !important; } /* Neutral Colors */ .bg-white { background-color: transparent !important; } .bg-white { background-color: white !important; } .bg-light { background-color: white !important; } .bg-light2 { background-color: #f0f0f0 !important; } .bg-light3 { background-color: #e8e8e8 !important; } .bg-light4 { background-color: #dddddd !important; } .bg-light5 { background-color: #cccccc !important; } .bg-light6 { background-color: #bbbbbb !important; } .bg-light7 { background-color: #aaaaaa !important; } .bg-dark { background-color: #777777 !important; } .bg-dark2 { background-color: #666666 !important; } .bg-dark3 { background-color: #494949 !important; } .bg-dark4 { background-color: #323232 !important; } .bg-dark5 { background-color: #1e1c1f !important; } /* Used for gradient creation of Neutral Colors */ .bg-dark.bg-gradient { background-color: #777777 !important; } .bg-dark2.bg-gradient { background-color: #666666 !important; } .bg-dark3.bg-gradient { background-color: #494949 !important; } .bg-dark4.bg-gradient { background-color: #323232 !important; } .bg-dark5.bg-gradient { background-color: #1e1c1f !important; } /*===============================================B. Background Colors - Advanced Set================================================= */ .bg-blue-alt { background-color: #35b5d7; } .bg-blue2-alt { background-color: #3093c7; } .bg-blue3-alt { background-color: #4f96b4; } .bg-blue4-alt { background-color: #287bab; } .bg-blue5-alt { background-color: #1c5b86; } .bg-blue6-alt { background-color: #205066; } .bg-blue7-alt { background-color: #21334b; } .bg-green-alt { background-color: #6db54b; } .bg-green2-alt { background-color: #71aa61; } .bg-green3-alt { background-color: #417447; } .bg-green4-alt { background-color: #47741a; } .bg-green5-alt { background-color: #1c4905; } .bg-red-alt { background-color: #e4151d; } .bg-red2-alt { background-color: #d10011; } .bg-red3-alt { background-color: #bf0d14; } .bg-red4-alt { background-color: #930b1f; } .bg-purple-alt { background-color: #bb7ea6; } .bg-purple2-alt { background-color: #7a5067; } .bg-purple3-alt { background-color: #89264f; } .bg-purple4-alt { background-color: #462b4c; } .bg-orange-alt { background-color: #e94216; } .bg-orange2-alt { background-color: #f56333; } .bg-orange3-alt { background-color: #fb7e2a; } .bg-yellow-alt { background-color: #f0c92f; } .bg-yellow2-alt { background-color: #e1bc4a; } .bg-creme-alt { background-color: #feda83; } .bg-creme2-alt { background-color: #fae3b4; } .bg-creme3-alt { background-color: #d3c27b; } .bg-brown-alt { background-color: #b29579; } .bg-brown2-alt { background-color: #7b5d3a; } .bg-brown3-alt { background-color: #563330; } /* Secondary color useful for making darker toned gradients */ .bg-blue-alt.bg-gradient { background-color: #008aaf; } .bg-blue2-alt.bg-gradient { background-color: #0070ab; } .bg-blue3-alt.bg-gradient { background-color: #066b95; } .bg-blue4-alt.bg-gradient { background-color: #005789; } .bg-blue5-alt.bg-gradient { background-color: #00416d; } .bg-blue6-alt.bg-gradient { background-color: #043a53; } .bg-blue7-alt.bg-gradient { background-color: #09203f; } .bg-green-alt.bg-gradient { background-color: #368d0d; } .bg-green2-alt.bg-gradient { background-color: #33881b; } .bg-green3-alt.bg-gradient { background-color: #00520a; } .bg-green4-alt.bg-gradient { background-color: #274d00; } .bg-green5-alt.bg-gradient { background-color: #0d2f00; } .bg-red-alt.bg-gradient { background-color: #eb050e; } .bg-red2-alt.bg-gradient { background-color: #d10011; } .bg-red3-alt.bg-gradient { background-color: #a6050b; } .bg-red4-alt.bg-gradient { background-color: #930b1f; } .bg-purple-alt.bg-gradient { background-color: #9c457e; } .bg-purple2-alt.bg-gradient { background-color: #6a254b; } .bg-purple3-alt.bg-gradient { background-color: #71002f; } .bg-purple4-alt.bg-gradient { background-color: #36143e; } .bg-orange-alt.bg-gradient { background-color: #f93e0d; } .bg-orange2-alt.bg-gradient { background-color: #fe561f; } .bg-orange3-alt.bg-gradient { background-color: #ff7214; } .bg-yellow-alt.bg-gradient { background-color: #fac908; } .bg-yellow2-alt.bg-gradient { background-color: #e9bb2d; } .bg-creme-alt.bg-gradient { background-color: #ffd266; } .bg-creme2-alt.bg-gradient { background-color: #fedd9a; } .bg-creme3-alt.bg-gradient { background-color: #bca339; } .bg-brown-alt.bg-gradient { background-color: #99714b; } .bg-brown2-alt.bg-gradient { background-color: #6c4517; } .bg-brown3-alt.bg-gradient { background-color: #4f1a16; } /* COLOR MODIFICATIONS SPECIFICALLY FOR BUTTONS* Any variations to buttons were placed below so that* the above classes contain only color styles. This* allows the styles to be used on any element rather * than just "Text" or "Buttons" as their name suggest----------------------------------------------------------*/ .bg-creme-alt { border-color: #f5c348; } .bg-creme2-alt { border-color: #f7ca5c; } .bg-light6 { border-color: #e5e5e5; } .bg-light7 { border-color: #eeeeee; } .bg-light, .bg-light2, .bg-light3, .bg-light4, .bg-light5, .bg-light6, .bg-light7, .btn-default { } .bg-light:focus, .bg-light2:focus, .bg-light3:focus, .bg-light4:focus, .bg-light5:focus, .bg-light6:focus, .bg-light7:focus, .bg-default:focus, .btn-default:focus { } .bg-light:active:focus, .bg-light2:active:focus, .bg-light3:active:focus, .bg-light4:active:focus, .bg-light5:active:focus, .bg-light6:active:focus, .bg-light7:active:focus, .bg-default:active:focus, .btn-default:active:focus { } .bg-light.bg-gradient, .bg-light2.bg-gradient, .bg-light3.bg-gradient, .bg-light4.bg-gradient, .bg-light5.bg-gradient, .bg-light6.bg-gradient, .bg-light7.bg-gradient, .btn-default.btn-gradient, .bg-default.bg-gradient { } .bg-creme-alt:focus, .bg-creme2-alt:focus, .bg-yellow-alt:focus, .bg-yellow2-alt:focus { color: #ca8f00; } .bg-creme-alt, .bg-creme2-alt, .bg-yellow-alt, .bg-yellow2-alt { color: #ca8f00; font-weight: 600; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55); } .bg-yellow-alt:hover, .bg-yellow2-alt:hover, .bg-creme-alt:hover, .bg-creme2-alt:hover, .bg-creme3-alt:hover, .bg-light:hover, .bg-light2:hover, .bg-light3:hover, .bg-light4:hover, .bg-light5:hover, .bg-light6:hover, .bg-light7:hover, .bg-default:hover, .btn-default:hover { color: #555555; } .input-group.up-file .delfile { position: absolute; right: 1px; z-index: 5; top: 0; bottom: 0; margin: auto; display: inline-flex; align-items: center; width: 30px; justify-content: center; background: #fff; border-radius: 0px 20px 22px 0px; height: calc(100% - 2px); border-left: 1px solid var(--border-color); font-size: 15px; } .input-group.up-file .delfile:hover { color: #ff4f3e; } .btn-light { background-color: var(--light) !important; color: #000000 !important; border-color: var(--light) !important; } .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active { } .btn-primary { background-color: var(--btn-bg-color) !important; color: var(--btn-color) !important; border-color: var(--btn-bg-color) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { } .btn-secondary { background-color: var(--secondary) !important; color: #000000 !important; border-color: var(--secondary) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active { } .btn-sv { background-color: var(--success) !important; color: #fff !important; border-color: var(--success) !important; } .btn-bck { background-color: var(--light) !important; color: #000000 !important; border-color: var(--light) !important; } .btn-prv { background-color: var(--light) !important; color: #000000 !important; border-color: var(--light) !important; } .btn-prv .fa { display: none; } .btn-cncl { background-color: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; } .btn-upld { } .btn-fltr { background-color: var(--light) !important; color: #000000 !important; border-color: var(--light) !important; } .closeBtn { background-color: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; } /*.newCarEvent .btn-fltr { background: #2066b1; background: -moz-linear-gradient(top, #2066b1 0%, #2066b1 100%); background: -webkit-linear-gradient(top, #2066b1 0%,#2066b1 100%); background: linear-gradient(to bottom, #2066b1 0%,#2066b1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2066b1', endColorstr='#2066b1',GradientType=0 ); } .usedCarEvent .btn-fltr { background: #0c74e3; background: -moz-linear-gradient(top, #0c74e3 1%, #2066b1 100%); background: -webkit-linear-gradient(top, #0c74e3 1%,#2066b1 100%); background: linear-gradient(to bottom, #0c74e3 1%,#2066b1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c74e3', endColorstr='#2066b1',GradientType=0 ); } .liteCarEvent .btn-fltr { background: var(--event-lite); }*/ .lrgBtn { width: 100%; max-width: 200px; } .tblCstm { font-size: 13px; clear: both; margin-bottom: 0px !important; max-width: none !important; } .tblCstm:not(:last-child) { margin-bottom: 20px !important; } .tblCstm.table-bordered { border: none; } .tblCstm tr th, .tblCstm tr td { border: none !important; } .tblCstm tr th { font-weight: 500; background: transparent !important; } .tblCstm tr td { position: relative; border: none !important; border-top: 4px solid transparent !important; border-bottom: 4px solid transparent !important; } .tblCstm tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .tblCstm tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .tblCstm tr td .btn:not(.not) { height: auto; width: auto; padding: 5px 11px; font-size: 12px; } .tblCstm.tblHvInput td { padding: 5px !important; } .tblCstm.tblHvInput td .form-control { padding: 3px 12px; height: auto; } .hdrChck span { vertical-align: middle; } .hdrChck .cBox.cBox-inline { vertical-align: middle; height: 20px; } .accordian-body .tblCstm { margin-bottom: 0px !important; } .pgURL a { color: #0c74e3; text-decoration: underline; } .qScore { color: #0c74e3; } .hdrTbl { cursor: pointer; } .hdrTbl .glyphicons { top: 2px; } .bfrArrow { padding-left: 15px; position: relative; } .bfrArrow::before { content: "\f078"; font-size: 12px; font-family: FontAwesome; padding-right: 4px; position: absolute; top: -1px; left: -3px; } .leadCentreTable .hdrTbl:hover td { background-color: #e7f3ff !important; } .leadCentreTable .table tr:first-child th:first-child, .leadCentreTable .hdrTbl td:first-child, .leadCentreTable .hdrTbl + tr td .accordian-body .table tbody tr td:nth-child(2) { text-align: left; } .leadCentreTable .hdrTbl td, .leadCentreTable .hdrTbl + tr td .accordian-body .table tbody tr td, .leadCentreTable .table tr:first-child th { text-align: center; } .leadCentreTable .hdrTbl + tr td .accordian-body .table tbody tr td { border-top: none !important; border-bottom: none !important; } .leadCentreTable .hdrTbl + tr td .accordian-body .table tbody tr td:first-child, .leadCentreTable .hdrTbl + tr td .accordian-body .table tbody tr td:nth-child(2) { border-right: none !important; border-left: none !important; } .tblClrHovr tr:hover > td, .tblCstm tr:hover > td { background-color: var(--light) !important; } .tblCstm tr:nth-child(odd) > td { background-color: var(--light) !important; } .tblCstm tr.paging:hover td { background: transparent !important; } .tblCstm tr.clsNoRecord > td { background-color: transparent !important; } .grid-in .toggle-details .tbl-detail-wrap .tabEnq tr:hover td { background: #fff !important; } .grid-in .toggle-details .tbl-detail-wrap .appointsGroup tr td { background: #ececec !important; } .grid-in .toggle-details:hover .tbl-detail-wrap .appointsGroup tr td { background: #ececec !important; } .grid-in .tblCstm tr.hiddenTD:hover td { background: transparent !important; } body .table tbody .no-records { background: transparent !important; border: none !important; } body .table tbody .no-records td { background: inherit !important; border: inherit !important; } .empty-folder { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: inherit; font-size: 12px; font-weight: 500; margin: 16px 0; } .empty-folder img { opacity: 0.1; width: 55px; } .empty-folder span { opacity: 0.2; display: block; margin-top: 5px; } .hdrTbl td { /*border-left:0px!important;border-top:2px solid #0c74e3!important;border-right:0px!important;border-bottom:2px solid #0c74e3!important;*/ border: none !important; background-color: #f8f8f8; } /*.hdrTbl2 td {border-left:0px!important;border-top:2px solid #0c74e3!important;border-right:0px!important;border-bottom:2px solid #0c74e3!important; color:#0c74e3!important; font-weight:bold;} .hdrTbl2 td:first-child {border-left:2px solid #0c74e3!important; border-radius:5px;} .hdrTbl2 td:last-child {border-right:2px solid #0c74e3!important; border-radius:5px;}*/ /*===============================================X. LAYOUT SETTINGS================================================= */ /* If header is fixed modify primary containers padding */ /* Fixed Sidebar */ #sidebar_left.affix { position: fixed; height: 100%; } /* Scrollbar for Sidebars in Fixed Positions */ #sidebar_left.affix > .sidebar-menu { overflow-x: hidden; position: absolute; width: 100%; top: 85px; bottom: 52px; transition: top .2s ease-in-out; } #sidebar_left.affix > .email-menu + .sidebar-menu { overflow-x: hidden; position: absolute; width: 100%; top: 485px; bottom: 52px; transition: top .2s ease-in-out; } /* Corrects Pseudo sidebar bg when fixed */ #sidebar_left.affix:before { left: 0; } body.sidebar-hidden #sidebar_left.affix:before, body.sidebar-rtl #sidebar_left.affix:before { left: -230px; } /* Sidebar User Area - Hidden */ .user-info.hidden, .user-info.hidden + .user-divider { display: none; } body.usermenu-hidden .user-info, body.usermenu-hidden .user-info + .user-divider { display: none; } body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .sidebar-menu, body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .user-menu + .sidebar-menu { top: 0; } #sidebar_left.affix > .user-menu.usermenu-open + .sidebar-menu { top: 250px; } /* Topbar/Breadcrumbs Area - Hidden */ body.hidden-breadcrumbs #topbar { display: none; } /* for preview only - no real use in development enviroment */ body.sidebar-collapsed #sidebar:before { width: 40px; } /* ================================================ IX. GRID MODIFICATIONS - Custom Size (XL)=================================================== Fusion Admin has created another column size which helps create an even better responsive layout for larger resolutions. This new column has been labeled "xl" and is set for 1560px=================================================== */ .visible-xl { display: none !important; } .col-xl-1, .col-xl-2, .col-xl-2-0, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { position: relative; min-height: 1px; padding-left: 12px; padding-right: 12px; } @media (min-width: 1560px) { .container { width: 1324px; max-width: 100%; } } @media (min-width: 1560px) { .col-xl-1, .col-xl-2, .col-xl-2-0, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: left; } .col-xl-12 { width: 100%; } .col-xl-11 { width: 91.66666667%; } .col-xl-10 { width: 83.33333333%; } .col-xl-9 { width: 75%; } .col-xl-8 { width: 66.66666667%; } .col-xl-7 { width: 58.33333333%; } .col-xl-6 { width: 50%; } .col-xl-5 { width: 41.66666667%; } .col-xl-4 { width: 33.33333333%; } .col-xl-3 { width: 25%; } .col-xl-2-0 { width: 20%; } .col-xl-2 { width: 16.66666667%; } .col-xl-1 { width: 8.33333333%; } .col-xl-pull-12 { right: 100%; } .col-xl-pull-11 { right: 91.66666667%; } .col-xl-pull-10 { right: 83.33333333%; } .col-xl-pull-9 { right: 75%; } .col-xl-pull-8 { right: 66.66666667%; } .col-xl-pull-7 { right: 58.33333333%; } .col-xl-pull-6 { right: 50%; } .col-xl-pull-5 { right: 41.66666667%; } .col-xl-pull-4 { right: 33.33333333%; } .col-xl-pull-3 { right: 25%; } .col-xl-pull-2 { right: 16.66666667%; } .col-xl-pull-1 { right: 8.33333333%; } .col-xl-pull-0 { right: 0%; } .col-xl-push-12 { left: 100%; } .col-xl-push-11 { left: 91.66666667%; } .col-xl-push-10 { left: 83.33333333%; } .col-xl-push-9 { left: 75%; } .col-xl-push-8 { left: 66.66666667%; } .col-xl-push-7 { left: 58.33333333%; } .col-xl-push-6 { left: 50%; } .col-xl-push-5 { left: 41.66666667%; } .col-xl-push-4 { left: 33.33333333%; } .col-xl-push-3 { left: 25%; } .col-xl-push-2 { left: 16.66666667%; } .col-xl-push-1 { left: 8.33333333%; } .col-xl-push-0 { left: 0%; } .col-xl-offset-12 { margin-left: 100%; } .col-xl-offset-11 { margin-left: 91.66666667%; } .col-xl-offset-10 { margin-left: 83.33333333%; } .col-xl-offset-9 { margin-left: 75%; } .col-xl-offset-8 { margin-left: 66.66666667%; } .col-xl-offset-7 { margin-left: 58.33333333%; } .col-xl-offset-6 { margin-left: 50%; } .col-xl-offset-5 { margin-left: 41.66666667%; } .col-xl-offset-4 { margin-left: 33.33333333%; } .col-xl-offset-3 { margin-left: 25%; } .col-xl-offset-2 { margin-left: 16.66666667%; } .col-xl-offset-1 { margin-left: 8.33333333%; } .col-xl-offset-0 { margin-left: 0%; } } @media (min-width: 1560px) { .visible-xl { display: block !important; } table.visible-xl { display: table; } tr.visible-xl { display: table-row !important; } th.visible-xl, td.visible-xl { display: table-cell !important; } } @media (min-width: 1560px) { .hidden-xl { display: none !important; } } /*===============================================XII. ANIMATE.CSS================================================= */ /*!Animate.css - http://daneden.me/animateLicensed under the MIT licenseCopyright (c) 2013 Daniel EdenPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-shortest { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } .animated-short { -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .animated-long { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } .animated-longest { -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } .inlineCtrl label { display: inline-block; vertical-align: middle; } .inlineCtrl input { display: inline-block; max-width: 50%; vertical-align: middle; } a.alctBtn { display: inline-block; margin-left: 5px; height: 30px; width: 30px; background-color: #0c74e3; border-radius: 50%; line-height: 38px; text-align: center; color: #FFF; vertical-align: middle; opacity: 1; transition: .3s; } a.alctBtn:hover { opacity: .8; transition: .3s; } a.alctBtn .fa { line-height: 30px; font-size: 16px; } /*dashboard*/ .dashBlk > .row { margin-left: -6px; margin-right: -6px; } .nmbrBlck .widgetTl span { font-size: 41px; } .nmbrBlck .widgetTl strong { font-size: 15px; padding-top: 2px; } .capitalizeTEXT .widgetTl strong { text-transform: capitalize; } .nmbrBlck .widgetTl { margin-top: 15px; padding-bottom: 29px; border-bottom: 2px solid #e3e3e3; margin-bottom: 20px; } .dashBlk .brdClr > .panel { border: none; border-radius: 5px; min-height: 425px; } .nmbrBlck .btmtxt { font-size: 13px; line-height: 1.2em; letter-spacing: -0.5px; text-align: center; width: 100%; } .infoBlck .btmtxt { font-size: 13px; line-height: 1.2em; letter-spacing: -0.5px; text-align: center; width: 100%; position: absolute; left: 0; right: 0; bottom: 10px; } .defaultBlck.nmbrBlck .panel { min-height: 320px; height: auto; } .defaultBlck.nmbrBlck .widgetTl { margin-top: 0px; padding-top: 0; padding-bottom: 20px; } .defaultBlck .widgetCont { min-height: 180px; overflow: initial; height: auto; } .defaultBlck .vst_count { margin-bottom: 5px; } .defaultBlck .vst_count strong { font-size: 14px; } .clsparent.defaultBlck .panel-body { padding: 20px 20px; } .clsparent .vst_count { min-width: 30%; margin-right: 20px; display: inline-block; float: left; } .clsparent .vst_count:nth-child(3n) { margin-right: 0px !important; } .infoWid .panel { min-height: 206px !important; } .widgetTl span { display: block; text-align: center; font-size: 30px; font-weight: bold; color: #000; line-height: 1em; } .infoBlck .infoBlgLeft { padding-left: 20px; padding-right: 20px; } .infoBlck .infoBlgRight { padding-left: 25px; padding-right: 0px; } .infoBlck .infoBlgLeft, .infoBlck .infoBlgRight { padding-top: 25px; padding-bottom: 0px; } .infoBlgLbl { margin-top: 30px; border-bottom: 2px solid #e3e3e3; margin-bottom: 5px; padding-bottom: 2px; } .infoBlgLbl label { font-size: 15px; color: #0c74e3; margin: 0; display: inline-block; width: 100%; padding-left: 5px; padding-right: 5px; } .infoBlck .infoBlgRight .vst_count { padding-left: 5px; padding-right: 5px; } .widgetCont { padding-left: 6px; min-height: 225px; padding-right: 8px; } .usrBlck .panel { background-color: #0c74e3; color: #fff; } .usrBlck .widgetTl { border: none; line-height: 1em; font-weight: bold; margin-bottom: 0px; letter-spacing: -1px; font-size: 19px; padding-top: 12px; padding-bottom: 15px; } .usrBlck .widgetFtr { text-align: left; position: relative; border-top: 2px solid #fff; padding-top: 15px; padding-bottom: 0px; padding-left: 30px; font-size: 10px; } .usrBlck .widgetFtr p { font-size: 10px; line-height: 23px; margin-bottom: 0px; } .usrBlck .widgetFtr a { color: #FFF; text-decoration: none; font-weight: initial; } .usrBlck .widgetFtr .fa { color: #FFF; position: absolute; font-size: 23px; top: 17px; left: 2px; } .usrBlck .widgetCont { font-size: 13px; min-height: 185px; line-height: 1.2em; color: #e1e6f9; letter-spacing: -0.5px; padding: 0px; } .switch-cstm input + label { border-radius: 30px; } .infoBlck .panel { height: 395px !important; } .infoBlck .widgetFtr { margin-left: 20px; margin-right: 5px; padding: 25px 0px 15px; border-top: 2px solid #e3e3e3; text-align: right; } .infoBlck .widgetFtr a { font-weight: bold; margin-right: 95px; color: #d90e81; } .brdClr.infoBlck .panel-body { padding: 25px 25px; } .brdClr.infoWid .panel-body { min-height: initial; } .infoWid.weatherDiv .panel-body { padding: 20px 23px; } .coremi_news { text-align: center; padding: 5px 0px 0px; } .coremi_news img { max-width: 120px; } .coremi_news p { font-size: 11px; line-height: 1.3; margin-top: 35px; color: #aaa; margin-bottom: 25px; } .coremi_news a { font-weight: bold; color: #000; font-size: 12px; } .weatherDiv .weatherWidget { padding: 13px 15px; } .goToWrap { display: flex; align-items: center; justify-content: end; margin-top: 23px; margin-bottom: 23px; } .goToWrap.d-none + #content { margin-top: 16px; } .likeToWrap { position: relative; min-height: 40px; width: 250px; display: inline-flex; } .dropdown-el { position: absolute; top: 0; left: 0; z-index: 999; min-width: 250px; display: inline-block; min-height: 40px; max-height: 40px; overflow: hidden; cursor: pointer; border-radius: 99px; background-color: #fff; transition: 0.3s all ease-in-out; border: 1px solid #ffffff; } .dropdown-el label, .dropdown-el a { text-align: left; cursor: pointer; position: relative; margin-bottom: 0; padding: 0 17px; background: transparent; width: 100%; height: 38px; display: flex; align-items: center; font-size: 14px; } .dropdown-el::after { content: "\f078"; position: absolute; right: 16px; top: 7px; transition: .3s all ease-in-out; font-family: FontAwesome; font-weight: 900; font-size: 15px; } .dropdown-el.expanded { box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28); border-color: rgba(223,225,229,0); background: #fff; border-radius: 10px; max-height: 650px; font-size: 18px; padding: 10px; padding-top: 10px; } .dropdown-el.expanded label { cursor: initial !important; } .dropdown-el.expanded a:hover { transition: 0.01s; color: var(--primary); } .dropdown-el.expanded::after { transform: rotate(-180deg); top: 20px; right: 26px; } /*.headLinksArw > a::before { content: ""; position: absolute; right: -15px; top: 4px; border: 5px solid #4d9be6; border-color: #4d9be6 transparent transparent transparent; }*/ /*.headLinksArw:hover > a::before { border: 5px solid #0c74e3; border-color: #0c74e3 transparent transparent transparent; }*/ .rgtHdrnav .headLinks { margin-top: 10px; margin-bottom: 10px; /*position: relative;*/ } .navDropLinks { display: none; text-align: center; width: 650px; position: absolute; top: 30px; left: calc(-317px + 50% - 33px); z-index: 9; } .navDropLinks.open { display: block !important; } .navDropInnr { top: 40px; text-align: center; border-radius: 50px; padding: 10px 5px; background: #fff; -webkit-box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28); box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28); margin: auto; width: auto; display: inline-block; } .navDropInnr li { display: inline-block; margin: 0px 10px; position: relative; } .navDropInnr li a { color: #4d9be6; text-decoration: none; } .navDropInnr li:hover a { color: #0c74e3; text-decoration: none; } .navDropInnr li::after { content: ""; width: 1px; background: #ccc; height: 100%; position: absolute; right: -12px; } .navDropInnr li:last-child::after { display: none; } .arrowImg { text-align: right; } .arrowImg span { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; max-width: 25px; } /*--------------------------------------------------------------------------------------*/ .innrLinks ul li a:hover, .innrLinks ul li a:focus, .innrLinks ul li a.active, .innrLinks ul li a:active { text-decoration: none; color: #000; } .innrLinks ul li a:hover::after, .innrLinks ul li a:focus::after, .innrLinks ul li a.active::after, .innrLinks ul li a:active::after { background: transparent; height: 0px; content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; border-top: 3px dotted #000; } .innrLinks { text-align: center; position: absolute; top: 63px; width: calc(100% - 140px); z-index: 9; left: 70px; } .innrLinks ul { padding-left: 0px; margin: 0; } .innrLinks ul li { display: inline-block; margin-right: 20px; position: relative; margin-bottom: 0px; } .innrLinks ul li a { font-size: 13px; display: inline-block; font-weight: bold; color: #777; position: relative; line-height: 1.1; padding: 0px 2px; } .innrLinks ul li a > span.glyphicons, .innrLinks ul li a > i.fa, .innrLinks ul li ul li a > span.glyphicon { display: none; } .innrLinks ul li a + ul.nav.sub-nav { display: inline-block; } .innrLinks ul li a + ul.nav.sub-nav li:last-child { margin-right: 0; } .innrLinks ul li a span.caret { display: none; } .innrLinks ul li::after { content: ""; width: 1px; background: #ccc; height: 100%; position: absolute; right: -12px; } .innrLinks ul li:last-child { margin-right: 0px; } .innrLinks ul li:last-child::after { display: none; } /*--------------------------------------------------------------------------------------*/ /*Contacts Details*/ .contactInn { border: 1px solid #e6e6e6; } .contactInn .panel-heading { background-color: #0c74e3; border-bottom: 0px; min-height: initial; line-height: 29px; } .contactInn .panel-heading .panel-title { color: #FFF; font-size: 13px; } .contactInn .panel-body { padding: 10px !important; min-height: 220px; } .contactInn .cstmStat li { padding: 5px; margin-bottom: 0px; } .contactInn .cstmStat li label { margin-bottom: 0px; } .contactInn .cstmStat li:nth-child(even) { background-color: #e7f3ff; } .qltyScr { position: relative; } .qltyScr .score { background-color: #e7f3ff; display: block; position: absolute; right: 10px; height: 40px; width: 40px; line-height: 40px; color: #0c74e3; border-radius: 50%; text-align: center; top: -13px; font-size: 18px; font-weight: bold; } .tabInnMenu { padding-left: 0px; } .tabInnMenu + .tab-content { padding: 0; } .tabInnMenu li { margin-right: 56px; font-size: 13px; line-height: 1.1; text-align: center; display: inline-block; color: #4d9be6; position: relative; padding: 0px 2px; } .tabInnMenu li a { color: #4d9be6 !important; padding: 0; background-color: transparent !important; z-index: 99; } .tabInnMenu li a.active { color: #0c74e3; } .tabInnMenu li a:hover { text-decoration: none; } .tabInnMenu li a:hover:after, .tabInnMenu li a.active:after, .tabInnMenu li a:visited:after, .tabInnMenu li.active a:after, .tabInnMenu li.active a:hover:after { background: #0c74e3; height: 3px; content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; border-radius: 99px; } .viewsDtls { margin-bottom: 15px; margin-top: 20px; font-size: 14px; color: #000; } .blueClr { color: #0b72e9; } .greyClr { color: #a9a9a9; } .pinkClr { color: #f926ef; } .infoToolTip { } .seoAdvBtn { display: inline-block; height: auto; padding: 5px; font-weight: normal; line-height: normal; color: #0c74e3; cursor: pointer; } .seoAdvBtn .fa { font-size: 14px; float: left; } .panel-heading + .panel-body > .table-responsive.mt15 { /*margin-top: 0px!important;*/ } select.form-control { line-height: 1; display: flex; align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } select.form-control, .slt_multi .btn-group .form-control.dropdown-toggle { background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 12px; line-height: normal; padding-right: 30px; } .cstmPanel select, .cstmPanel input[type="text"] { } .fontFamilyCol select option { } select.form-control.show, select.form-control:focus, select.form-control:active, .slt_multi .btn-group.open .form-control.dropdown-toggle { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); } select option { font-family: 'Poppins', Arial !important } select option.AcuminPro { font-family: 'AcuminPro', Arial !important; -moz-font-family: 'AcuminPro', Arial !important; } select option.Arial { font-family: 'Arial', Arial !important; -moz-font-family: 'Arial', Arial !important; } select option.Audi { font-family: 'Audi', Arial !important; -moz-font-family: 'Audi', Arial !important; } select option.AudiWide { font-family: 'AudiWide', Arial !important; -moz-font-family: 'AudiWide', Arial !important; } select option.Avenir { font-family: 'Avenir', Arial !important; -moz-font-family: 'Avenir', Arial !important; } select option.BallingerMono { font-family: 'BallingerMono', Arial !important; -moz-font-family: 'BallingerMono', Arial !important; } select option.Bmw { font-family: 'Bmw', Arial !important; -moz-font-family: 'Bmw', Arial !important; } select option.BmwLight { font-family: 'BmwLight', Arial !important; -moz-font-family: 'BmwLight', Arial !important; } select option.BmwThin { font-family: 'BmwThin', Arial !important; -moz-font-family: 'BmwThin', Arial !important; } select option.CitroenType { font-family: 'CitroenType', Arial !important; -moz-font-family: 'CitroenType', Arial !important; } select option.ClearSans { font-family: 'ClearSans', Arial !important; -moz-font-family: 'ClearSans', Arial !important; } select option.Cupra { font-family: 'Cupra', Arial !important; -moz-font-family: 'Cupra', Arial !important; } select option.DaciaSpirit { font-family: 'DaciaSpirit', Arial !important; -moz-font-family: 'DaciaSpirit', Arial !important; } select option.DSAutomobiles { font-family: 'DSAutomobiles', Arial !important; -moz-font-family: 'DSAutomobiles', Arial !important; } select option.FiraSans { font-family: 'FiraSans', Arial !important; -moz-font-family: 'FiraSans', Arial !important; } select option.FordAntenna { font-family: 'FordAntenna', Arial !important; -moz-font-family: 'FordAntenna', Arial !important; } select option.Georgia { font-family: 'Georgia', Arial !important; -moz-font-family: 'Georgia', Arial !important; } select option.Helvetica { font-family: 'Helvetica', Arial !important; -moz-font-family: 'Helvetica', Arial !important; } select option.Hyundai { font-family: 'Hyundai', Arial !important; -moz-font-family: 'Hyundai', Arial !important; } select option.Jeep { font-family: 'Jeep', Arial !important; -moz-font-family: 'Jeep', Arial !important; } select option.Kia { font-family: 'Kia', Arial !important; -moz-font-family: 'Kia', Arial !important; } select option.Lato { font-family: 'Lato', Arial !important; -moz-font-family: 'Lato', Arial !important; } select option.Lexus { font-family: 'Lexus', Arial !important; -moz-font-family: 'Lexus', Arial !important; } select option.LibreFranklin { font-family: 'LibreFranklin', Arial !important; -moz-font-family: 'LibreFranklin', Arial !important; } select option.Mazda { font-family: 'Mazda', Arial !important; -moz-font-family: 'Mazda', Arial !important; } select option.MG { font-family: 'MG', Arial !important; -moz-font-family: 'MG', Arial !important; } select option.Mont { font-family: 'Mont', Arial !important; -moz-font-family: 'Mont', Arial !important; } select option.Montserrat { font-family: 'Montserrat', Arial !important; -moz-font-family: 'Montserrat', Arial !important; } select option.Nissan { font-family: 'Nissan', Arial !important; -moz-font-family: 'Nissan', Arial !important; } select option.Nobel { font-family: 'Nobel', Arial !important; -moz-font-family: 'Nobel', Arial !important; } select option.Nunito { font-family: 'Nunito', Arial !important; -moz-font-family: 'Nunito', Arial !important; } select option.OpelNext { font-family: 'OpelNext', Arial !important; -moz-font-family: 'OpelNext', Arial !important; } select option.OpenSans { font-family: 'OpenSans', Arial !important; -moz-font-family: 'OpenSans', Arial !important; } select option.Orbitron { font-family: 'Orbitron', Arial !important; -moz-font-family: 'Orbitron', Arial !important; } select option.Oswald { font-family: 'Oswald', Arial !important; -moz-font-family: 'Oswald', Arial !important; } select option.Peugeot { font-family: 'Peugeot', Arial !important; -moz-font-family: 'Peugeot', Arial !important; } select option.Poppins { font-family: 'Poppins', Arial !important; -moz-font-family: 'Poppins', Arial !important; } select option.RenaultNouvelR { font-family: 'RenaultNouvelR', Arial !important; -moz-font-family: 'RenaultNouvelR', Arial !important; } select option.Roboto { font-family: 'Roboto', Arial !important; -moz-font-family: 'Roboto', Arial !important; } select option.RobotoSlab { font-family: 'RobotoSlab', Arial !important; -moz-font-family: 'RobotoSlab', Arial !important; } select option.SourceSansPro { font-family: 'SourceSansPro', Arial !important; -moz-font-family: 'SourceSansPro', Arial !important; } select option.TitilliumWeb { font-family: 'TitilliumWeb', Arial !important; -moz-font-family: 'TitilliumWeb', Arial !important; } select option.Toyota { font-family: 'Toyota', Arial !important; -moz-font-family: 'Toyota', Arial !important; } select option.VauxhallNeue { font-family: 'VauxhallNeue', Arial !important; -moz-font-family: 'VauxhallNeue', Arial !important; } .input-group .input-group-addon select.form-control { border-top: none; height: 30px; border-bottom: none; border-left: none; padding-left: 5px !important; border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; } .table > tbody > tr > td .cBox { top: -10px; } .btn.btn-primary.btn-file { background-color: var(--btn-bg-color); border-color: var(--btn-bg-color); } .btn.upload_btn-file { padding: 6px 20px 5px; } .mobWebBtn { position: absolute; top: 8px; right: 50px; } .mobWebBtn span { cursor: pointer; display: inline-block; list-style: none; font-size: 19px; margin-left: 15px; float: left; background: #69b2f3; width: 30px; text-align: center; border-radius: 50%; height: 30px; } .mobWebBtn span.active, .mobWebBtn span:hover { background: #fff; } .mobWebBtn span.active .fa, .mobWebBtn span:hover .fa { color: #0c74e3; } .mobWebBtn .mobGGL .fa { font-size: 25px; } .mobWebBtn span .fa { line-height: 31px; color: #0c74e3; font-size: 17px; } .metaPrev { font-family: arial,sans-serif; } .metaPrev .gglTtl { padding-bottom: 0px; font-size: 16px; padding-top: 1px; line-height: 1.5; color: #006621; } .metaPrev .gglTtl img { display: none; } .metaPrev .gglHead { font-size: 20px; line-height: 1.3; } .metaPrev .gglHead, .metaPrev .gglHead a { color: #1a0dab !important; } .metaPrev .gglDec { line-height: 1.57; word-wrap: break-word; font-size: 14px; color: #545454; } .ftrDecBlk span { display: none; } .metaPrev.metaPrevMOB .gglHead { padding-top: 35px; margin-bottom: 5px !important; } .metaPrev.metaPrevMOB .gglTtl { position: absolute; top: 15px; left: 15px; } .metaPrev.metaPrevMOB .gglTtl img { display: inline-block; margin-right: 5px; } .metaPrev.metaPrevMOB .ftrDecBlk .gglDec { float: left; width: 70%; } .metaPrev.metaPrevMOB .ftrDecBlk span { display: inline-block; width: 150px; text-align: center; border-radius: 8px; float: right; overflow: hidden; } .metaPrev.metaPrevMOB .ftrDecBlk::after { clear: both; display: block; content: ""; } .metaPrev.metaPrevMOB .ftrDecBlk span img { width: 100%; } .seoSrchPre { position: relative; } .seoSrchPre .modal-body { border: 1px solid rgba(0,0,0,.07); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; width: calc(100% - 40px); } .seoSrchPre .mobWebBtn { right: 0; width: 30px; top: 0; } .seoSrchPre .mobWebBtn span.active, .seoSrchPre .mobWebBtn span:hover { background: #0c74e3; color: #fff; } .seoSrchPre .mobWebBtn span.active .fa, .seoSrchPre .mobWebBtn span:hover .fa { color: #fff; } .seoSrchPre .mobWebBtn span { margin-bottom: 10px; margin-left: 0; margin-right: 15px; background-color: #fff; border-radius: 5px; border: 1px solid #0c74e3; } .seoSrchPre .metaPrevMOB { width: 460px; } .seoSrchPre .metaPrev.metaPrevMOB .ftrDecBlk .gglDec { width: calc(100% - 165px); } .actnCellspn .fa-close { color: #DD3C00; } .actnCellspn .fa-save { color: var(--success); } .activeModel { display: inline-flex; float: right; margin: 7px 10px; margin-right: 15px; align-items: center; } .activeModel::after { clear: both; display: block; content: ""; } .activeModel span { float: left; margin-right: 10px; } /*===========================================================================================*/ .pageBlockElements .ele_container { max-width: calc(100% - 60px) !important; margin: auto !important; } .pageBlockElements .table_row .rowbg { padding: 15px 0px; position: relative !important; } .pageBlockElements .panel-body { padding: 0px 0px !important; } .pageBlockElements .dragul .rowbg .icons_box { right: -30px; } .pageBlockElements .dragul .rowbg .left_icons_box { left: -30px; } .grid-item.maxPadding { } .dashNews .fadein { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; } .dashNews .fadein .dashNewsLst { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; padding: 0px 24px; } .dashNews .dashNewslogo { margin-top: 35px; display: inline-block !important; } .dashNews .dashNewslogo img { max-width: 130px; } .dashNews p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .leadCtr .headLeft { display: inline-block; float: left; width: calc(100% - 225px); } .leadCtr .headLeft .panel-title p { color: #000; font-size: 12px; padding: 0px; margin-bottom: 15px; margin-top: -5px; line-height: 1em; } .leadCtr .headRight { display: inline-block; float: right; margin-top: 10px; } @media screen and (max-width:1300px) { .leadCtr .headRight { margin-top: 18px; } } .cstmPanel { } .cstmPanel .panel-heading { } .cstmPanel .panel-title { } .cstmPanel .panel-body { } .table-responsive { overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; overflow-x: auto; } span.label.lblTiles { background-color: var(--primary); display: inline-flex; margin-bottom: 5px; margin-right: 2px; align-items: center; line-height: 1; } .bgPanel { border: 1px solid var(--border-color); } .bgPanel .panel-title { } .frnchLst { max-height: 270px; overflow: auto; } .frnchLst, .frnchLst tbody { width: 100%; display: block; } .frnchLst tr { width: 25%; display: block; float: left; transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -webkit-transition: 0.3s all ease-in-out; } .frnchLst tbody:after, .frnchLst tr:after { content: ""; clear: both; display: block; } .frnchLst tr td { display: block; width: calc(100% - 0px); position: relative; min-width: auto !important; margin: 5px 0px; } .frnchLst tr td input:focus { outline: none; } .frnchLst tr td input[type="checkbox"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; display: block; position: absolute; left: 0px; right: 0px; top: 0px; height: 100%; width: 100%; z-index: 99; cursor: pointer; margin: 0px !important; } .frnchLst tr td input[type="checkbox"] ~ label { padding: 9px 5px 8px 35px; border-radius: 50px; width: 100%; font-size: 13px; margin: 0 !important; line-height: 1.25; } .frnchLst tr td input[type="checkbox"] ~ label:before { content: ""; display: block; width: 25px; height: 25px; border: 1px solid var(--border-color); position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; border-radius: 50%; vertical-align: middle; } .frnchLst tr td input[type="checkbox"]:checked ~ label { background: transparent; } .frnchLst tr td input[type="checkbox"]:checked ~ label:before { background: var(--secondary); border: none; } .frnchLst tr td input[type="checkbox"]:checked ~ label:after { content: ""; display: block; width: 14px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); position: absolute; left: 11px; top: 11px; } .addNewCmpny .frnchLst tbody tr { width: 33.33%; } .bodylocked .addNewCmpny .frnchLst tbody tr { width: 50%; } /*====================Event Steps====================================*/ .eventStepsDiv { padding-top: 15px; } .eventStepsDiv + #content { padding-top: 15px; padding-bottom: 5px; } .eventStepsDiv + #content > div { position: relative; z-index: 99; } ul.eventSteps { padding: 0px; margin: 0px; line-height: 0em; text-align: center; display: inline-block; vertical-align: middle; } ul.eventSteps li { display: inline-block; position: relative; margin-bottom: 0px; color: #FFF; min-width: 60px; text-align: center; margin: 0px 20px; } ul.eventSteps li:first-child { margin-left: 5px; } /*.bodylocked ul.eventSteps li { margin: 0px 15px; } .bodylocked ul.eventSteps li:after { right: -30px; }*/ ul.eventSteps li:after { content: ""; position: absolute; top: 20px; right: -35px; background-color: var(--gray); -webkit-box-shadow: 0 8px 16px 0 rgba(44, 51, 73, 0.1); box-shadow: 0 8px 16px 0 rgba(44, 51, 73, 0.1); width: 25px; height: 2px; opacity: 0.5; } ul.eventSteps li.visited:after { opacity: 1; } ul.eventSteps li:last-child:after { display: none; } ul.eventSteps li i { font-style: normal; font-size: 14px; border-radius: 50%; color: var(--gray); border: 1px solid var(--gray); width: 32px; height: 32px; margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; position: absolute; top: 5px; left: 0; right: 0; z-index: 9; } ul.eventSteps li i span { font-weight: 600; font-family: 'Lato', sans-serif; font-size: 15px; } ul.eventSteps li.visited i, ul.eventSteps li.active i { opacity: 1; } ul.eventSteps li.visited i:after { content: ""; display: block; width: 15px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); position: absolute; left: 8px; top: 9px; } ul.eventSteps li.active i:after { content: "\f040"; } ul.eventSteps li.visited i span, ul.eventSteps li.active i span { display: none; } ul.eventSteps li a { color: var(--gray); -webkit-transition: .35s; transition: .35s; display: inline-block; font-size: 12px; text-decoration: none; text-align: left; line-height: normal; padding: 40px 5px 5px; z-index: 99; position: relative; letter-spacing: 0.03em; } ul.eventSteps li .tooltip-inner { white-space: nowrap; } ul.eventSteps li.disable { opacity: 0.2 !important; } ul.eventSteps li.disable, ul.eventSteps li.disable a { cursor: not-allowed !important; } ul.eventSteps li.disable .tooltip { display: none !important; } ul.eventSteps li.disable i { cursor: not-allowed !important; background: #ccc !important; border-color: #ccc !important; } .newCarEvent ul.eventSteps li.visited:after { background: var(--event-new); } .newCarEvent ul.eventSteps li.visited i, .newCarEvent ul.eventSteps li.active i { color: #fff; border-color: var(--event-new); background: var(--event-new); } .newCarEvent ul.eventSteps li.visited a, .newCarEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-new); } .usedCarEvent ul.eventSteps li.visited:after { background: var(--event-used); } .usedCarEvent ul.eventSteps li.active i, .usedCarEvent ul.eventSteps li.visited i { color: #fff; border-color: var(--event-used); background: var(--event-used); } .usedCarEvent ul.eventSteps li.visited a, .usedCarEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-used); } .liteCarEvent ul.eventSteps li.visited:after { background: var(--event-lite); } .liteCarEvent ul.eventSteps li.active i, .liteCarEvent ul.eventSteps li.visited i { color: #fff; border-color: var(--event-lite); background: var(--event-lite); } .liteCarEvent ul.eventSteps li.visited a, .liteCarEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-lite); } .aftersalesEvent ul.eventSteps li.visited:after { background: var(--event-aftersales); } .aftersalesEvent ul.eventSteps li.active i, .aftersalesEvent ul.eventSteps li.visited i { color: #fff; border-color: var(--event-aftersales); background: var(--event-aftersales); } .aftersalesEvent ul.eventSteps li.visited a, .aftersalesEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-aftersales); } .motabilityEvent ul.eventSteps li.visited:after { background: var(--event-motability); } .motabilityEvent ul.eventSteps li.active i, .motabilityEvent ul.eventSteps li.visited i { color: #fff; border-color: var(--event-motability); background: var(--event-motability); } .motabilityEvent ul.eventSteps li.visited a, .motabilityEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-motability); } .incentiveEvent ul.eventSteps li.visited:after { background: var(--event-incentive); } .incentiveEvent ul.eventSteps li.active i, .incentiveEvent ul.eventSteps li.visited i { color: #fff; border-color: var(--event-incentive); background: var(--event-incentive); } .incentiveEvent ul.eventSteps li.visited a, .incentiveEvent ul.eventSteps li.active a { opacity: 1; color: var(--event-incentive); } .tbl_height_auto { border: 1px solid #E5E5E5; border-radius: 5px; background-color: #FAFAFA; } .tabl_lbl { background-color: #fafafa; padding: 10px 10px; border-radius: 5px 5px 0px 0px; border-bottom: 1px solid #E5E5E5; } .chkMenus table tbody tr td input + label { margin: auto; padding-top: 4px; } .tableBox > table > tbody > tr > td { border-bottom: 1px solid #E5E5E5; padding: 10px; } /*========================from old vip========================*/ .themeClr { color: var(--secondary); } .wide { width: 100% !important; } .custmBxRadio .cstmRdo input[type="radio"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; display: block; position: absolute; left: 0px; right: 0px; top: 0px; height: 35px; width: 100%; z-index: 99; cursor: pointer; margin: 0px !important; } .custmBxRadio .cstmRdo { display: inline-block; position: relative; margin-right: 10px; } .custmBxRadio .cstmRdo label { padding: 9px 5px 8px 30px; border-radius: 50px; min-width: 130px; font-size: 13px; margin: 0 !important; } .custmBxRadio .cstmRdo label:before { content: ""; display: block; width: 25px; height: 25px; border: 1px solid var(--border-color); position: absolute; left: 0px; top: 5px; border-radius: 50%; vertical-align: middle; } .custmBxRadio .cstmRdo input:focus { outline: 0px; } .custmBxRadio .cstmRdo input:checked ~ label:before { border: none; } .custmBxRadio .cstmRdo input:checked ~ label:after { content: ""; display: block; width: 14px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); position: absolute; left: 6px; top: 13px; } .custmBxRadio .cstmRdo input:checked ~ label { background: var(--secondary); color: #FFF; } .newCarEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-new); } .usedCarEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-used); } .liteCarEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-lite); } .aftersalesEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-aftersales); } .motabilityEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-motability); } .incentiveEvent .custmBxRadio .cstmRdo input:checked ~ label { background: transparent; color: var(--event-incentive); } .newCarEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-new); } .usedCarEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-used); } .liteCarEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-lite); } .aftersalesEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-aftersales); } .motabilityEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-motability); } .incentiveEvent .custmBxRadio .cstmRdo input:checked ~ label:before { background: var(--event-incentive); } /*switch btn css*/ .newCarEvent .switch input:checked + label { background: var(--event-new); } .usedCarEvent .switch input:checked + label { background: var(--event-used); } .liteCarEvent .switch input:checked + label { background: var(--event-lite); } .aftersalesEvent .switch input:checked + label { background: var(--event-aftersales); } .motabilityEvent .switch input:checked + label { background: var(--event-motability); } .incentiveEvent .switch input:checked + label { background: var(--event-incentive); } .chkBx_common input[type="checkbox"], .chkBxLst input[type="checkbox"] { -webkit-appearance: none; appearance: none; -moz-appearance: none; position: relative; height: 25px; width: 25px; border-radius: 50px !important; vertical-align: middle; cursor: pointer; margin-top: 0px; margin-right: 5px; border: 1px solid var(--border-color); background: #fff; } .chkBx_common input[type="checkbox"]:focus, .chkBxLst input[type="checkbox"]:focus { outline: 0px; } .chkBx_common input[type="checkbox"]:checked:before, .chkBxLst input:checked:before { content: ""; -webkit-transition: all .6s; transition: all .6s; display: block; width: 14px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); position: absolute; left: 6px; top: 7px; } .chkBx_common input[type="checkbox"]:checked, .chkBxLst input[type="checkbox"]:checked { background: var(--secondary); border: none; } .chkBx_common .spanRight { display: flex; align-items: center; } .chkBx_common .spanRight label { margin-bottom: 0; } .newCarEvent .chkBx_common input[type="checkbox"]:checked, .newCarEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-new); } .usedCarEvent .chkBx_common input[type="checkbox"]:checked, .usedCarEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-used); } .liteCarEvent .chkBx_common input[type="checkbox"]:checked, .liteCarEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-lite); } .aftersalesEvent .chkBx_common input[type="checkbox"]:checked, .aftersalesEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-aftersales); } .motabilityEvent .chkBx_common input[type="checkbox"]:checked, .motabilityEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-motability); } .incentiveEvent .chkBx_common input[type="checkbox"]:checked, .incentiveEvent .chkBxLst input[type="checkbox"]:checked { background: var(--event-incentive); } .newCarEvent .dropdown-menu input[type="checkbox"]:checked, .newCarEvent .select-img-control input[type="checkbox"]:checked, .newCarEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-new) } .usedCarEvent .dropdown-menu input[type="checkbox"]:checked, .usedCarEvent .select-img-control input[type="checkbox"]:checked, .usedCarEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-used); } .liteCarEvent .dropdown-menu input[type="checkbox"]:checked, .liteCarEvent .select-img-control input[type="checkbox"]:checked, .liteCarEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-lite); } .aftersalesEvent .dropdown-menu input[type="checkbox"]:checked, .aftersalesEvent .select-img-control input[type="checkbox"]:checked, .aftersalesEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-aftersales); } .motabilityEvent .dropdown-menu input[type="checkbox"]:checked, .motabilityEvent .select-img-control input[type="checkbox"]:checked, .motabilityEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-motability); } .incentiveEvent .dropdown-menu input[type="checkbox"]:checked, .incentiveEvent .select-img-control input[type="checkbox"]:checked, .incentiveEvent .cBox-inline input[type="checkbox"]:checked { background-color: var(--event-incentive); } /* only border with tick */ .chkBx_common.bdrtckChk input[type="checkbox"]:checked { background: none !important; border: 1px solid var(--border-color); } .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { left: 5px; top: 7px; width: 13px; height: 6px; } .newCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-new); } .newCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-new); } .usedCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-used); } .usedCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-used); } .liteCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-lite); } .liteCarEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-lite); } .aftersalesEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-aftersales); } .aftersalesEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-aftersales); } .motabilityEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-motability); } .motabilityEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-motability); } .incentiveEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--event-incentive); } .incentiveEvent .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--event-incentive); } .motabilityEvent .circle_nav { border-color: var(--event-motability); color: var(--event-motability); } /*-----------*/ .accordian-icon { display: inline-block; padding-left: 5px; padding-right: 9px; border-right: 1px solid #777; margin: 5px 10px 5px 5px; color: #20a5ce; line-height: 14px; } .dashboradtbl-wrap .accordion .panel-heading .accordion-toggle-icon { padding: 6px 8px 8px; font-size: 18px; background-color: #fff; border-radius: 3px; margin-top: 3px; margin-right: 3px; } .accordion .accordion-toggle-icon i:first-child { display: block; } .accordion .collapsed .accordion-toggle-icon i:first-child { display: none; } .accordion .accordion-toggle-icon i:last-child { display: none; } .accordion .collapsed .accordion-toggle-icon i:last-child { display: block; } .accordion-toggle .accordion-toggle-icon i { color: #fff; } .eventsDash .accordion-toggle .accordion-toggle-icon i { color: #235ad1; } a:hover, a:focus { text-decoration: none; } a.accordion-toggle { display: block; } .accordion-toggle label { margin-bottom: 0px; } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-inline-grid { display: inline-grid !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .justify-content-start { justify-content: flex-start !important } .justify-content-end { justify-content: flex-end !important } .justify-content-center { justify-content: center !important } .justify-content-between { justify-content: space-between !important } .justify-content-around { justify-content: space-around !important } .justify-content-evenly { justify-content: space-evenly !important } .align-items-start { align-items: flex-start !important } .align-items-end { align-items: flex-end !important } .align-items-center { align-items: center !important } .align-items-baseline { align-items: baseline !important } .align-items-stretch { align-items: stretch !important } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .fw-bold { font-weight: bold !important; } .fw-normal { font-weight: normal !important; } .fw-light { font-weight: 300 !important; } .fw-100 { font-weight: 100 !important; } .fw-200 { font-weight: 200 !important; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } .fw-900 { font-weight: 900 !important; } .min180 { min-height: 180px !important; } .min200 { min-height: 200px !important; } .min210 { min-height: 210px !important; } .min215 { min-height: 215px !important; } .min220 { min-height: 220px !important; } .min230 { min-height: 230px !important; } .min262 { min-height: 262px !important; } .min265 { min-height: 265px !important; } .min280 { min-height: 280px !important; } .min300 { min-height: 300px !important; } .min310 { min-height: 310px !important; } .min320 { min-height: 320px !important; } .min330 { min-height: 330px !important; } .min340 { min-height: 340px !important; } .min350 { min-height: 350px !important; } .min400 { min-height: 400px !important; } .min410 { min-height: 410px !important; } .min430 { min-height: 430px !important; } .min440 { min-height: 440px !important; } .min450 { min-height: 450px !important; } .widetextarea textarea { width: 100%; padding: 5px; } /* Input Addon */ .input-group-addon { min-width: 40px; background-color: var(--border-color); border-radius: 0; border-color: var(--border-color); } .input-group-addon:first-child { } .input-group-addon:last-child { } td.wd150_nw { width: 85px; } .tblInput { display: inline-flex; align-items: center; position: relative; justify-content: center; padding-left: 12px; } .tblInput i { font-style: normal; position: absolute; top: 0; left: 0; bottom: 0; display: inline-flex; align-items: center; margin: auto; } .tblInput input.btn { color: #666666; border-radius: 5px !important; padding: 5px !important; background-color: #fff; border-color: #ccc; width: 70px; float: right; margin-left: 20px; } .tblInput .form-control { min-width: 120px; } .tblLink { display: inline-block; line-height: 1; } fieldset { border: 1px solid var(--border-color); margin: 0px; padding: 15px; border-radius: 20px; } fieldset + fieldset { margin-top: 25px; } legend { font-weight: normal; color: inherit; font-size: 14px; margin: 0; display: inline-block; width: auto; border: none; padding: 0px 10px; } .badge_new { background-color: var(--event-new); } .badge_used { background-color: var(--event-used); } .badge_lite { background-color: var(--event-lite); } .badge_aftersales { background-color: var(--event-aftersales); } .badge_motability { background-color: var(--event-motability); } .badge_incentive { background-color: var(--event-incentive); } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; } .slt_multi .custom-type .label { font-size: 11px; min-height: 15px; line-height: 1; } .slt_multi .custom-type .checkmark { width: 15px; height: 15px; } .slt_multi .custom-type .checkmark:after { font-size: 9px; } .slt_multi .custom-type [type="radio"] + .checkmark:after, .slt_multi .custom-type [type="radio"] + [type="hidden"] + .checkmark:after { width: 9px; height: 9px; } .slt_multi select:not(.form-control) { display: none; } .slt_multi .btn-group { width: 100%; } .slt_multi .btn-group .form-control { display: flex; justify-content: space-between; align-items: center; text-align: left; box-shadow: none; color: var(--body-color) !important; } .slt_multi .btn-group .form-control:focus { border-color: var(--secondary); } .slt_multi .btn-group .form-control .caret { display: none; } .slt_multi .btn-group .dropdown-toggle::after { display: none; } .slt_multi .btn-group.open > .form-control { border-radius: 20px 20px 0px 0px; } .slt_multi .dropdown-menu { padding: 12px; flex-wrap: wrap; max-height: 243px; overflow-y: auto; overflow-x: hidden; width: 100%; min-width: 100%; margin-top: -1px; border-color: var(--border-color); box-shadow: none; border-top-left-radius: 0; border-top-right-radius: 0; } .slt_multi .dropdown-menu.show { display: flex; } .slt_multi .multiselect-container .input-group { margin-bottom: 8px; } .slt_multi .input-group-addon { background: transparent; } .slt_multi .multiselect-container li { width: 100%; margin-bottom: 8px; } .slt_multi .multiselect-container li:last-child { margin-bottom: 0; } .slt_multi .multiselect-container li a { display: flex; background: transparent !important; color: var(--body-color) !important; } .element-arrowlink { background-color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); box-shadow: 0px 0px 3px 0px #00000021; } .element-arrowlink i { color: inherit !important; } [class*="card-"] { position: relative; background: #ffffff; border-radius: 15px; padding: 35px 10px; } .panel [class*="card-"] { background: var(--theme-gradient); } [class*="card-"] label { display: flex; align-items: center; margin-bottom: 0; } [class*="card-"] .element-arrowlink { position: absolute; z-index: 1; top: 10px; right: 10px; } [class*="card-"] .element-count { display: inline-flex; position: relative; margin: 5px auto; } [class*="card-"] .element-count span { display: inline-flex; position: relative; line-height: 1; font-weight: 500; } .card-round { border-bottom: 8px solid transparent; text-align: center; position: relative; margin-bottom: 7px; } a.card-round { display: block; } .card-round label { font-size: 15px; justify-content: center; } .card-round .element-arrowlink { position: absolute; top: 10px; right: 10px; background-color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); box-shadow: 0px 0px 3px 0px #00000021; } .card-round .element-arrowlink i { color: inherit !important; } .card-round .element-count span { font-size: 55px; } .card-round a:not([href]).element-arrowlink { display: none; } .card-round .element-indicate { display: inline-flex; position: absolute; right: -27px; bottom: 6px; font-size: 25px; } .card-round .element-indicate svg { width: 100%; height: 100%; } .card-round .element-heading { font-weight: 600; font-size: 15px; padding-left: 30px; padding-right: 30px; } .card-round .element-lines { position: absolute; right: 10px; bottom: 20px; width: 35px; height: 105px; } .card-round .element-lines svg { fill: #f6fcfb; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .card-round .element-lines span { position: absolute; width: 100%; height: 100%; inset: 0; z-index: 1; background: #e9e9e9; } .card-round.green-card { border-bottom-color: #54f9b7; } .card-round.green-card i { color: #54f9b7; } .card-round.orange-card { border-bottom-color: #ffa356; } .card-round.orange-card i { color: #ffa356; } .card-round.blue-card { border-bottom-color: #59f2f7; } .card-round.blue-card i { color: #59f2f7; } .card-round.yellow-card { border-bottom-color: #ffa356; } .card-round.yellow-card i { color: #ffa356; } .card-small { background: var(--theme-gradient); border: none; margin-bottom: 20px; text-align: left; padding: 15px; } a.card-small { display: block; } .card-small label { justify-content: start; font-size: 12px; font-weight: 400; opacity: 0.3; } .card-small .element-arrowlink { top: 15px; right: 15px; } a:not([href]) .card-small .element-arrowlink { display: none; } .card-small .element-count span { font-size: 20px; } .card-small .element-heading { font-size: 13px; padding: 0; font-weight: 500; } .smllTopKnob [class*="col"] { width: 100%; } .rowCount [class*="col"] { width: 100%; } .rowCount .card-small .element-arrowlink { transform: initial; box-shadow: none; background: transparent; width: initial; height: inherit; color: #e5f1f1; font-size: 25px; } /*Comman Table Style*/ .grdEnq > div > table > tbody > tr > th { background-color: transparent !important; border: none; } .grdEnq > div > table > tbody > tr > th:first-child { border-radius: 5px 0px 0px 0px; } .grdEnq > div > table > tbody > tr > th:nth-last-child(2) { border-radius: 0px 5px 0px 0px; } .grdEnq > div > table > tbody > tr > td { position: relative; border: none; border-top: 2px solid transparent; border-bottom: 2px solid transparent; } .grdEnq > div > table > .tbodyHead + tbody > tr > td { } .grdEnq > div > table > tbody > tr > td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .grdEnq > div > table > tbody > tr > td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .grdEnq .hiddenRow .table-striped > tbody > tr > td { background: #fff !important; } .grdEnq > div > table > tbody > tr > td a i.fa-caret-right { color: #0c74e3; } .grdEnq > div > table > tbody > tr.light-row > td { background-color: #fdf7c1 !important; color: #000; } .grdEnq > div > table > tbody > tr.light-row + tr .hiddenRow .innerBorder { border-color: #fdf7c1 !important; } .grdEnq > div > table > tbody > tr.pale-row > td { background-color: #c6e5f3 !important; } .grdEnq > div > table > tbody > tr.pale-row + tr .hiddenRow .innerBorder { border-color: #c6e5f3 !important; } .grdEnq > div > table > tbody > tr.enq-row + tr .hiddenRow .innerBorder { border-color: #c8ca45 !important; } .grdEnq > div > table > tbody > tr.selected-row > td { background-color: #cbe8a8 !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.selected-row > td a { color: #000 !important; } .grdEnq > div > table > tbody > tr.purple-row > td { background-color: #f6d9f7 !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.purple-row > td a { color: #000 !important; } .grdEnq > div > table > tbody > tr.no-row > td { background-color: #fff !important; color: #000 !important; border-bottom: 1px solid #f2f2f2 !important; } .grdEnq > div > table > tbody > tr.no-row > td a { color: #231f20 !important; } .grdEnq > div > table > tbody > tr.test_drive-row > td { background-color: #a1dafb !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.test_drive-row > td a { color: #231f20 !important; } .grdEnq > div > table > tbody > tr.px_appt-row > td { background-color: #edf17b !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.px_appt-row > td a { color: #231f20 !important; } .grdEnq > div > table > tbody > tr.px_enq-row > td { background-color: #96ec79 !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.px_enq-row > td a { color: #231f20 !important; } .grdEnq > div > table > tbody > tr.login-row > td { background-color: #f2f2f2 !important; color: #000 !important; } .grdEnq > div > table > tbody > tr.login-row > td a { color: #231f20 !important; } .grdEnq > div > table > tbody > tr.paging > td { border: none; border-radius: 0px; background: transparent !important; padding: 0px; padding-top: 10px; } .grdEnq > div > table > tbody > tr.paging:hover > td { background: transparent !important; } .grdEnq > div > table > tbody > tr.paging:hover > td table tr td { background: transparent !important; } .grdEnq .pnlNotes .panel-heading { position: relative; padding: 1px 0px; min-height: 30px !important; line-height: 30px; color: #333; font-size: 13px; font-weight: 600; border-bottom: 1px dashed #ccc; border-radius: 5px 5px 0 0; background: #fff; } .grdEnq .notestag { max-height: 104px; overflow: auto; padding-right: 5px; } .grdEnq .notestag span:first-child { margin-top: 0 !important; } .grdEnq .notestag span { font-size: 12px; } .grdEnq .pnlNotes a.btn { } .grdEnq .book_ap_div .panel-body { min-height: 124px; } .grdEnq .book_ap { background-color: #6ccc82; border: 2px solid #6ccc82; color: #fff !important; } .grdEnq .pnlNotes .panel { /*margin-bottom: 0px;*/ } .grdEnq .fa.green { color: #28a745 !important; } .enqIcn i { color: #e7e7e7; } .pale-row .enqIcn i { color: white; } .table tbody > tr > td.hiddenRow .accordian-body .equDetail table.table { margin: 0 !important; } .tableBox { border-radius: 5px; background-color: #fff; max-width: 100%; height: 245px; overflow: auto; margin-bottom: 0px; } .tbl_height_auto table { width: 100%; border-radius: 5px; } .tableBox table tbody tr td { white-space: initial !important; } .tableBox table tbody tr td:hover { background-color: #fff; } .chkMenus table tbody tr td input { float: left; margin-right: 10px !important; } .chkMenus table tbody tr td .chkMenus_0, .chkMenus table tbody tr td .tvClient_0 { display: inline-block; line-height: 2; float: left; } .tableBox table.chkSteps tbody tr:last-child td { border-bottom: none; } .tableBox > div > table > tbody > tr > td:first-child { width: 40px; } .tableBox > div > table > tbody > tr > td:nth-child(2) { border-bottom: 1px solid #f3f3f3; padding: 10px 10px 10px 5px; } .tabl_lbl label { margin: 0px; } .tabl_lbl .chkinput input { float: left; margin-top: -3px !important; } .tableBox .chkSteps tr td label { margin: 0; line-height: normal; cursor: pointer; position: relative; margin-top: 2px; margin-left: 30px; vertical-align: middle; } .man_variant .tabl_lbl i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; width: 215px; display: inline-block; vertical-align: middle; padding-left: 5px; } .man_variant .tabl_lbl .chkBx_common { margin-top: -4px; } .tbl_height_auto .chkBx_common.bdrtckChk input[type="checkbox"]:checked { border-color: var(--secondary); } .tbl_height_auto .chkBx_common.bdrtckChk input[type="checkbox"]:checked:before { border-color: var(--secondary); } .stepround { display: inline-flex; justify-content: center; align-items: center; line-height: 1; padding: 5px; float: left; background-color: var(--secondary); border-radius: 50%; height: 25px; width: 25px; color: #fff; text-align: center; margin: -1px 5px 0px 5px; position: absolute; top: -4px; left: -35px; } .smllTopKnob { position: relative; z-index: 1; } .smllTopKnob .rpt_stats { width: 100px; margin-right: 20px; margin-bottom: 20px; } .smllTopKnob .rpt_stats:last-child { margin-right: 0px; } .knobNum { font-size: 0; line-height: normal; } .knobNum a { display: inline-block; } .knobNum div { display: inline-block !important; } .knobNum div canvas { background: #fff; border-radius: 50px; } .knobNum div input { font-size: 20px !important; } .knobNum div input:focus { outline: none; } .rpt_stats { display: inline-block; margin: 0px; width: 16.66%; float: left; } .rpt_stats .datacnt { font-size: 30px; margin-right: 5px !important; display: inline-block; float: left; border-radius: 50%; text-align: center; width: 100%; } .rpt_stats .datacnt span { display: block; font-size: 18px; font-weight: bold; line-height: 1em; margin-bottom: 5px; } .rpt_stats .datacnt div { display: inline-block !important; } .rpt_stats .datacnt div canvas { background: #fff; border-radius: 50px; } .rpt_stats .datacnt div input:focus { outline: none; } .rpt_stats .datacnt.ltrBookingBg div canvas { background-color: #93c753; } .rpt_stats .datacnt.ltrProspectBg div canvas { background-color: #ffcd6a; } .rpt_stats .rpt_st_title { text-align: left; /*display: inline-block;*/ margin-top: 5px; display: block; width: 100%; text-align: center; font-size: 12px; color: #acacac; } .rpt_stats .rpt_st_title .datacnt-sub { display: inline-block; text-align: left; margin-bottom: 2px; } .cstmPrgrs { background-color: #f6f6f6; height: 3px; border-radius: 50px; width: 100%; margin: 10px 0px; } .cstmPrgrsFill { height: 3px; background-color: #b74b7f !important; } .cstmPrgrsFill.green { border-radius: 50px; background-color: #45ebad !important; } .cstmPrgrsFill.blue { background-color: #68b5eb !important; } .cstmPrgrsFill.turquoise { background-color: #32edd0 !important; } .calMark li { display: inline-block; margin-left: 15px; color: #9597ac; font-weight: 600; font-size: 12px; } .calMark li span { display: inline-block; width: 15px; height: 15px; border-radius: 4px; margin-right: 5px; float: left; margin-top: 1px; } .calendarPage h4 { color: #272a5d; } .calendarPage table { border-spacing: 3px; } .calendarPage table.fc-header { border: none; background: transparent; box-shadow: none; } .calendarPage .fc-header-title h2 { color: #383969; } .calendarPage .fc-header td.fc-header-left { padding-left: 0px; } .calendarPage .fc-header td.fc-header-left .fc-button:first-child { margin-left: 0px; } .calendarPage .fc-header td.fc-header-left .fc-button.fc-button-next { } .calendarPage .fc-header td.fc-header-right { padding-right: 0px; } .calendarPage .fc-header td.fc-header-right .fc-button.fc-button-prev { } .calendarPage .fc-header td.fc-header-right .fc-button:last-child { margin-right: 0px; } .calendarPage .fc-header .fc-button { margin: 0px 5px; border: none; box-shadow: none; background: #01a1af; border-radius: 50%; width: 30px; height: 30px; text-align: center; padding: 0px; } .calendarPage .fc-header .fc-button span { display: inline-block; padding: 0; margin: 0; width: 100%; height: 100%; color: #fff; font-size: 30px; line-height: 27px; } .calendarPage .fc-header .fc-button.fc-button-today { color: #fff; font-weight: normal; min-width: 60px; border-radius: 5px; line-height: 27px; letter-spacing: 1px; } .calendarPage .fc-content .fc-grid .fc-day-header { font-size: 11px !important; } .calendarPage .fc td, .calendarPage .fc th { border-color: #bec2dd; border-radius: 5px !important; width: calc(100% / 7) !important; min-width: auto; } .calendarPage .fc-content .fc-grid .fc-day-header { border-bottom-width: 0px; } .calendarPage .fc-border-separate td { border-width: 1px !important; -webkit-box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.08); -moz-box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.08); box-shadow: 0px 5px 20px -10px rgba(0,0,0,0.08); } .calendarPage .dialog-background { } .calendarPage .modal-dialog { width: 400px; } .calendarPage .modal-dialog .modal-content { border-radius: 5px; padding: 15px !important; -webkit-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5) !important; -moz-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5) !important; box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5) !important; max-width: 90%; } .calendarPage .modal-dialog .panel-heading { background-color: #f5f5fd; padding: 10px 15px; border-radius: 5px; border: none; line-height: normal; } .calendarPage .modal-dialog .panel-heading .panel-title { color: #383969; text-transform: capitalize; } .calendarPage .modal-dialog .calClose { margin-top: -3px; float: right; height: 25px; width: 25px; cursor: pointer; z-index: 999; } .calendarPage .clndrAvbl { padding-top: 20px; padding-bottom: 0px; } .calendarPage .clndrAvbl .form-group label { color: #383969; text-align: center; } .calendarPage .clndrAvbl .form-group { margin: 0px; } .calendarPage .clndrAvbl .form-group input { border: none; background: transparent; text-align: center; font-weight: bold; color: #383969; font-size: 14px; } .calendarPage .fc-event { background-color: transparent !important; border-color: transparent !important; } .calendarPage .fc-grid .fc-day-number { font-size: 12px; float: left; color: #333; font-weight: bold; } .calendarPage .fc-grid .calConfirm .fc-day-number { color: #333; font-weight: bold; font-size: 18px; } .calendarPage .fc-event-inner { padding: 0px; padding-right: 15px; width: auto; display: inline-block; position: relative; } .calendarPage .fc-event-inner:after { content: "\f00d"; font-family: FontAwesome; position: absolute; top: 0px; right: 0px; font-size: 12px; } .calAvl { background: #e1fff1; cursor: pointer; } .calConfirm { background: #ffd5da; cursor: pointer; } .calendarPage .fc-event { color: #333; } .valuationBox { } .valuationBox .panel-body { padding: 30px 35px; } .valuationBox .form-control { padding: 10px 15px; height: 55px; font-size: 25px; font-weight: 900; color: #000; } .valuationBox a.btn .fa.fa-floppy-o { margin-right: 10px; } .valuationBox a.btn .fa-paper-plane-o { margin-left: 10px; } .grdEnq .pnlNotes a.btn { } .valuationBox a.btn.btn-sv { border-color: #afe09f; } .valuationBox a.btn.btn-sv.bgGry { background: #c9c9c9 !important; border-color: #e8e8e8; } .AllVisit { padding: 10px 15px; margin-top: 10px; border-radius: 10px; background: var(--theme-gradient); } .AllVisit .AllVisit { margin: 0; padding: 0; } .AllVisit li { list-style: none; margin-bottom: 10px !important; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; } .AllVisit li strong { display: block; } .inlineRW { padding: 0; margin-top: 5px; } .inlineRW li { } .inlineRW li strong { display: inline-block; margin-right: 5px; font-weight: normal; } .inlineRW li span { font-weight: 500; } .inlineRW li:last-child { } .cltNm { font-size: 15px; margin: auto; } .man_variant .modal-dialog.modal-dialog { width: 800px; } input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"].disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="checkbox"] { cursor: not-allowed !important; } .enquirySection { border-top: 3px solid var(--light); border-bottom: 3px solid var(--light); padding: 0px 20px; padding-top: 15px; margin: 0; } .enquirySection + .pnlNotes { border-top: none; padding-top: 0; } .enquiryLnks { display: flex; flex-wrap: wrap; } .enquiryLnks:after, .enquiryLnks:before { } .enquiryLnks a { text-align: center; font-size: 12px; margin: 0px; padding: 10px 0; padding-top: 0; font-weight: 500; margin-right: 20px; border-bottom: 2px solid var(--light); margin-bottom: 15px; color: var(--gray); } .enquiryLnks a:hover, .enquiryLnks a.active { color: var(--body-color); border-color: var(--secondary); } .enquiryLnksContent .tab-content:first-child { } .enquiryLnksContent .tab-content { min-height: auto; padding: 0; margin-bottom: 5px; } .enquiryLnksContent ul { margin: 0; background: var(--theme-gradient); padding: 15px; border-radius: 15px; } .enquiryLnksContent li { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; border-radius: 5px; line-height: 1.35; margin-bottom: 0; font-size: 12px; } .enquiryLnksContent li span { display: inline-block; vertical-align: middle; margin-right: 5px; font-weight: normal; } .enquiryLnksContent li:nth-child(odd) { background: #fff; } .pnlNotes .tab-content { padding: 0; } .pnlNotes .tab-content > [class*="col-"] { padding: 0px; } .pnlNotes .tab-content > [class*="col-"] .form-group > .panel { margin-top: 0px; } .table tbody > tr > td.hiddenRow .accordian-body .pnlNotes .tab-content > [class*="col-"] .equDetail table.table { margin-top: 0px !important; margin-bottom: 15px !important; } .infolable { font-weight: 500; color: #fff; font-size: 11px; background: var(--warning); color: #000; padding: 2px 5px; display: inline-block; border-radius: 5px; margin: 5px auto; } .col-xs-12 .innrGrayBox span { min-width: 50px; } .innrGrayBox { margin: 0; padding: 0px 20px; } .innrGrayBox.second { margin: 10px 0; border-top: 3px solid var(--light); border-bottom: 3px solid var(--light); padding: 10px 20px; } .innrGrayBox li { display: flex; margin: 10px auto; align-items: center; } .innrGrayBox li.neme { background: var(--light); padding: 8px 20px; border-radius: 5px; margin-top: 0; margin-bottom: 20px; font-weight: 500; width: calc(100% + 40px) !important; margin-left: -20px; font-size: 16px; } .innrGrayBox li.purl { align-items: start; } .innrGrayBox li:last-child { } .innrGrayBox li span { display: inline-block; vertical-align: middle; min-width: 80px; font-weight: 500; } .innrGrayBox li strong { display: inline-block; vertical-align: middle; margin-right: 5px; font-weight: normal; } .innrBdrBox { list-style: none; padding: 0 20px; margin: 10px auto; } .innrBdrBox.active { border-color: #3080c5; } .innrBdrBox li { margin: auto; } .innrBdrBox li:last-child { } .innrBdrBox li .spnVL { display: inline-block; vertical-align: middle; color: var(--secondary) !important; cursor: pointer; } .innrBdrBox li .spnVL:hover { text-decoration: underline; } .innrBdrBox li .strgVL { display: inline-block; vertical-align: middle; margin-right: 5px; font-weight: normal; } .offerViewed { margin: auto; padding: 0px 10px; background: #efefef; border-radius: 7px; margin-bottom: 10px; } .offerViewed li { list-style: none; display: inline-block; margin: 10px auto; vertical-align: middle; margin-right: 20px; width: calc(100% / 5 - 16px); } .offerViewed li:after { content: ""; clear: both; display: block; } .offerViewed li:last-child { margin-right: auto; } .offerViewed li p { margin: auto; line-height: normal; } .offerViewed li p.left { width: 50%; margin-top: 5px; } .offerViewed li p.right { width: 50%; margin-top: 5px; } .offerViewed li p span { display: inline-block; width: 100%; } .offerViewed li p strong { display: inline-block; } .sidebar .innrGrayBox li { position: relative; } .sidebar .innrGrayBox li:not(.wide) { display: inline-flex; width: auto; margin: 0; width: 49%; } .sidebar .innrGrayBox li:not(.wide):first-child { margin-top: 10px; width: 49%; } .sidebar .innrGrayBox li:not(.wide) + li:not(.wide) { width: 49%; } /*.sidebar .innrGrayBox li:not(.wide) + li:not(.wide):before { content: ""; width: 2px; height: 11px; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; background: var(--body-color); opacity: 0.5; }*/ .sidebar .innrGrayBox li:not(.wide):last-child { margin-bottom: 10px; } /*//////////___________________ Preview Color Selection Screen Layout Content Step ___________________//////////*/ .previewScreen { border-top: 1px solid #ddd; padding-top: 20px; margin-top: 20px; } .previewScreen .grid { margin-left: -10px; margin-right: -10px; } .previewScreen .grid.fixedSpaces { margin-left: -10px; margin-right: -10px; } .previewScreen .grid.fixedSpaces > [class*='col-'] { padding-left: 10px; padding-right: 10px; } .previewScreen .grid.noSpaces { margin-left: 0; margin-right: 0; } .previewScreen .grid.noSpaces > [class*='col-'] { padding-left: 0; padding-right: 0; } .ucOfferList1 .box-77 { border-radius: 0px; border: none; box-shadow: none; font-size: 16px; letter-spacing: 1px; line-height: 1.1; font-weight: 500; text-align: left; margin-top: 15px; color: #3e3e3e; } .ucOfferList1 .box-77 .thumbnail-77 { height: 205px; text-align: center !important; margin: auto; font-size: 0; line-height: 0; overflow: hidden; position: relative; } .ucOfferList1 img { max-width: 100%; max-height: 100%; } .ucOfferList1 .name-77 { text-transform: initial; letter-spacing: normal; opacity: 1; font-weight: normal; font-size: 13px; } .ucOfferList1 .table { display: table; width: 100%; height: 100%; } .ucOfferList1 .moreInfor { position: relative; } .ucOfferList1 .title-77 { font-size: 16px !important; letter-spacing: 0px !important; line-height: 1.1; font-weight: 500; text-align: left; margin-top: 15px; color: #3e3e3e; text-transform: uppercase; } .ucOfferList1 .mdl_ofr_list { min-height: 38px; } .ucOfferList1 .author-77 { background: #fff; border-top: 1px solid #EBEBEB; padding: 0; padding-top: 10px; margin-top: 10px; position: relative; text-align: left; } .ucOfferList1 .MdlOffrLst .cont_pgnew .modelOfr { font-size: 16px; } .ucOfferList1 .author-77 p { line-height: 1.22727273; margin-top: 5px !important; } .ucOfferList1 .cropBottom { margin-bottom: 0 !important; } .ucOfferList1 .author-77 p { font-size: 15px; margin-top: 5px !important; } .ucOfferList1 .buttonsies { margin-top: 24px; margin-bottom: 16px; } .ucOfferList1 .offers { background: #999; color: #FFFFFF !important; border-radius: 99px; padding: 12px 0px 12px 0px; width: 38%; display: block; text-align: center; display: inline-block; font-size: 14px; margin-right: 1%; } .ucOfferList1 .apps { background: #d20000; color: #FFFFFF !important; border-radius: 99px; padding: 12px 0px 12px 0px; width: 58%; display: block; text-align: center; display: inline-block; font-size: 14px; } .ucOfferList3 .flipper .box-77 { border-radius: 0px; margin-top: 0px; height: 100%; margin-bottom: 0px; } .ucOfferList3 .flipper .front .box-77 { background-color: #efefef; } .ucOfferList3 .flipper .box-77 .thumbnail-77 { height: 100% !important; } .ucOfferList3 .flipper .box-77 .thumbnail-77 img { border-radius: 0px; -webkit-filter: none !important; filter: none !important; max-width: 100%; max-height: 100%; } .ucOfferList3 .flipper .box-77:hover .thumbnail-77 img { opacity: 1; } .ucOfferList3 .topright, .ucOfferList3 .closer { cursor: pointer; display: block; position: absolute; top: 0px; bottom: 0; left: 0; right: 0px; z-index: 9999; width: 100%; height: 100%; text-align: right; } .ucOfferList3 .topright img { margin-top: 10px; margin-right: 10px; width: 30px; opacity: 0.5; } .ucOfferList3 .topright .closer img { opacity: 1; } .ucOfferList3 .topright span { font-size: 10px; line-height: normal; text-align: right; margin: 2px 15px auto auto; text-transform: uppercase; opacity: 0.7; display: block; } .ucOfferList3 .backinfo { position: absolute; top: 17px; left: 0px; right: 0; width: 90%; margin: auto; z-index: 999; } .ucOfferList3 .backheader { font-size: 20px; opacity: 1.0; color: #000; margin: 0px 0px 15px 0px !important; line-height: 1em; } .ucOfferList3 .backlist { font-size: 12px; opacity: 1; color: #000; line-height: 1.2em; letter-spacing: normal; text-transform: none; } .ucOfferList3 .backlist li { list-style: unset; margin-left: 15px; margin-bottom: 8px; line-height: 1em; } .ucOfferList3 .backlist ol { padding: 0; margin: auto; } .ucOfferList3 .backlist ul { padding: 0; margin: auto; } .ucOfferList3 .backlist ul li { list-style: disc; } .ucOfferList3 .backlist ol li { list-style: decimal; margin-left: 20px; } .ucOfferList3 .bookren { font-size: 12px; letter-spacing: 1px; color: #fff; padding: 8px !important; background-color: #d00; max-width: 100%; width: 100%; display: inline-block; line-height: normal; text-align: center; white-space: nowrap; } .ucOfferList3 .bookbutton { display: block; position: absolute; bottom: 5px; left: 17px; z-index: 9999; width: calc(100% - 34px); } .ucOfferList3 .bookbutton.mobilebtnshow { bottom: 60px; } .ucOfferList3 .tagtxt { position: absolute; right: 10px; top: 10px; background: #fff; color: #000; border-radius: 99px; padding: 4px 9px; font-size: 10px; display: inline-block; line-height: normal; text-transform: initial; display: none; } .ucOfferList3 .flip-container, .ucOfferList3 .front, .ucOfferList3 .back { width: 100%; margin: auto; -webkit-transition: 0s; -webkit-transition-delay: 0.2s; -moz-transition: 0s; -moz-transition-delay: 0.2s; -ms-transition: 0s; -ms-transition-delay: 0.2s; -o-transition: 0s; -o-transition-delay: 0.2s; transition: 0s; transition-delay: 0.2s; } .ucOfferList3 .flipper { height: 100%; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -ms-transition: 0.6s; -o-transition: 0.6s; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .ucOfferList3 .flip-container { perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; } .ucOfferList3 .flip-container .back { } .ucOfferList3 .front, .ucOfferList3 .back { background: #fff; position: absolute; top: 0; left: 0; } .ucOfferList3 .front { z-index: 2; } .ucOfferList3 .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .ucOfferList3 .flip-container.is-flipped .flipper { transform: rotateY(180deg); -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); } .ucOfferList3 .flip-container.is-flipped .front { opacity: 0; visibility: hidden; } .ucOfferList3 .flip-container.is-flipped .back { opacity: 1; } .ucOfferList3 .col-sm-4 .flip-container, .ucOfferList3 .col-sm-4 .front, .ucOfferList3 .col-sm-4 .back { height: 194px; } .ucOfferList3 .col-sm-4 .backinfo { height: 135px; overflow: hidden; } .ucOfferList3 .btnClr { font-weight: bold; } .ucOfferList3 .frontdetails { position: absolute; top: 10px; left: 17px; z-index: 9999; width: calc(100% - 34px); text-align: left; } .ucOfferList3 .frontdetailBtm { position: absolute; bottom: 10px; left: 17px; z-index: 9999; width: calc(100% - 34px); text-align: left; } .ucOfferList3 .frontdetailBtm p { margin: 0 !important; font-size: 20px; letter-spacing: -0.9px; } .ucOfferList3 .frontdetailBtm p:first-child { float: left !important; } .ucOfferList3 .frontdetailBtm p:last-child { float: right; letter-spacing: -0.9px; font-size: 15px; position: relative; bottom: -8px; } .ucOfferList3 .frontdetails p { font-size: 20px; margin: 0 !important; } .ucOfferList3 .frontdetails p:first-child { float: left !important; } .ucOfferList3 .frontdetails p:last-child { float: right; } .ucOfferList3 .detailspwhite, .ucOfferList3 .text_white, .ucOfferList3 .detailspblack.text_white { color: #fff; } .ucOfferList3 .detailspblack, .ucOfferList3 .text_black, .ucOfferList3 .detailspblack.text_black { color: #000; } .ucOfferList3 .whiteBoxF, .ucOfferList3 .whiteBoxB { background-color: #fff; height: 100%; } @media screen and (min-width:1200px) { .ucOfferList3 .flip-container:hover .flipper { transform: rotateY(180deg); -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); } .ucOfferList3 .flip-container:hover .front { opacity: 0; visibility: hidden; } .ucOfferList3 .flip-container:hover .back { opacity: 1; } .ucOfferList3 .topright img, .ucOfferList3 .topright span { display: none; } } .ucOfferList8 .button { display: inline-block; border-radius: 3px; padding: 13px 22px 16px; color: #fff; border: none; outline: none; text-decoration: none; background: #202020; font-size: 20px; font-weight: 600; text-align: center; vertical-align: top; cursor: pointer; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; white-space: nowrap; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); box-shadow: inset 0 -100px 0 transparent; -webkit-appearance: none; margin-bottom: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.25s; transition: 0.25s; } .ucOfferList8 .listingPg .button { display: inline-block; border-radius: 0px !important; padding: 14px 11px; color: #fff; letter-spacing: -0.5px; background: #0075b5; font-size: 15px; vertical-align: middle; cursor: pointer; margin-top: 10px; margin-bottom: 10px; line-height: 1; box-shadow: 0 1px 6px rgba(32,33,36,.28); margin-left: auto !important; margin-right: auto !important; text-overflow: ellipsis; } .ucOfferList8 .listingPg .button.inArrow { padding-right: 45px; text-align: left; } .ucOfferList8 .listingPg .button svg { width: 22px; height: 22px; position: absolute; top: 10px; right: 15px; margin: auto; } .ucOfferList8 .listingPg .button { background: #fff; color: #000; margin-top: 5px; margin-bottom: 5px; } .ucOfferList8 .listingPg .button svg { fill: #000 !important; } .ucOfferList8 .listingPg .button.hover, .ucOfferList8 .listingPg .button:hover { background: #0075b5; color: #fff; } .ucOfferList8 .listingPg .button.hover svg, .ucOfferList8 .listingPg .button:hover svg { fill: #fff !important; } .ucOfferList8 .paleBlue { background-color: #d1edf2 !important; } .ucOfferList8 .paleBlue:hover { background-color: #d1edf2 !important; color: #000 !important; } .ucOfferList8 .paleBlue svg { fill: #000 !important; } .ucOfferList8 .listingPg .paleBlue:hover svg { fill: #000 !important; } .ucOfferList8 .listingPg .thumImg { font-size: 0; margin-bottom: 15px; text-align: center; } .ucOfferList8 .listingPg .thumImg img { max-width: 80%; } .ucOfferList8 .grid-item-inner { padding: 20px; box-shadow: 0px 0px 70px 0px rgba(93, 93, 93, 0.07); margin-bottom: 40px; } .ucOfferList8 .grid-item-inner:hover { } .ucOfferList8 .grid-item-inner:hover .darker { color: #fff; } .ucOfferList8 .inner-p01 { font-size: 14px; line-height: 1.385; margin-bottom: 0px; opacity: 0.8; color: #fff; font-weight: 500; letter-spacing: -0.15px; text-align: left; padding-top: 21px; position: absolute; bottom: 90px; } .ucOfferList8 .inner-p01b { font-size: 20px; line-height: 1; letter-spacing: -0.5px; text-align: left; margin-bottom: 5px; display: inline-block; min-height: 45px; color: #000; opacity: 0.8; width: 100%; } .ucOfferList8 .inner-p01c { font-size: 18px; line-height: normal; letter-spacing: -0.5px; text-align: left; display: inline-block; margin: auto !important; margin-bottom: 10px !important; font-weight: 600 !important; color: #0075b5; width: 100%; min-height: 140px; } .ucOfferList8 .inner-p02 { font-size: 18px; line-height: 1.15; margin-bottom: 0px; opacity: 1.0; color: #ffffff; letter-spacing: -0.05px; text-align: left; padding-top: 1px; bottom: 136px; position: absolute; text-transform: uppercase; } .ucOfferList8 .inner-p01c ul { padding-left: 15px; } .ucOfferList8 .inner-p01c ul li { list-style: disc; margin-bottom: 5px; } .ucOfferList8 .inner-p01c ol { /* padding-left: 15px; */ } .ucOfferList8 .inner-p01c ol li { list-style: none; margin-bottom: 7px; } .ucOfferList8 .btnLinksBar { padding: 5px 0px; border-top: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; margin: 5px auto; } .ucOfferList8 .btnLinksBar .button { padding: 15px 14px 14px; background-color: #fff !important; color: #303030 !important; margin-left: 2px; margin-right: 2px; -webkit-box-shadow: inset 0px 0px 0px 3px rgb(0,117,181); box-shadow: inset 0px 0px 0px 3px rgb(0,117,181); font-weight: normal; } .ucOfferList8 .btnLinksBar .button .fa { margin-right: 5px; } .ucOfferList8 .btnLinksBar .button:hover { color: #ffffff !important; background-color: #0075b5 !important; } .ucOfferList8 .btnLinksBar .button:first-child { margin-left: 0px; } .ucOfferList8 .btnLinksBar .button:last-child { margin-right: 0px; } .ucOfferList8 .blrEnqBtn { display: inline-block; vertical-align: top; position: relative; width: 340px; min-height: 45px; max-width: 100%; } .ucOfferList8 .blrEnqBtn .dropdown-el svg { position: absolute; top: 10px; right: 15px; width: 20px; height: 20px; fill: #fff; transition: .3s all ease-in-out; z-index: 9; } .ucOfferList8 .blrEnqBtn .dropdown-el.expanded svg { fill: #000; transform: rotate(-90deg); } .ucOfferList8 .blrEnqBtn a { padding: 5px 0px; display: block; color: #0075b5; } .ucUsedCarList { } .ucUsedCarList .ofrList.grid { margin-left: -3px; margin-right: -3px; } .ucUsedCarList .ofrList [class*='col-'].usedcars_lst { padding-left: 6px; padding-right: 6px; } .ucUsedCarList .ofrList .usedcars_blk { display: block; min-height: 425px; transition: .3s; margin-bottom: 12px; position: relative; border-radius: 12px; overflow: hidden; } .ucUsedCarList .tagHeart { position: absolute; border-radius: 99px; left: 18px; top: 17px; font-weight: bold; display: inline-block; font-size: 27px; color: #475c84; line-height: 1; z-index: 99; } .ucUsedCarList .tagHeart a { display: inline-block; line-height: 1; color: #475c84; } .ucUsedCarList .tagHeart a .fa-heart { color: #c60001; } .ucUsedCarList .ofrList .usedcars_blk > a { display: block; } .ucUsedCarList .ofrList .usedcars_blk .thumbs_img { max-height: 195px !important; height: 195px !important; transition: .5s; background-color: #efefef; } .ucUsedCarList .tagIcon { position: absolute; border-radius: 99px; background: #4ac67d; padding: 5px 18px; color: #fff; font-size: 8px; right: 18px; top: 17px; font-weight: bold; } .ucUsedCarList .ofrList .usedcars_blk .equalElement { position: relative !important; padding: 18px; padding-top: 17px; background-color: #fff; text-transform: initial; letter-spacing: normal; opacity: 1; font-weight: normal; font-size: 13px; } .ucUsedCarList .ofrList .usedcars_blk .title-77 { font-size: 15px !important; line-height: 1.385; width: 100%; text-align: left !important; margin-bottom: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.15px !important; margin-top: 0px; color: #001c54; font-weight: bold; opacity: 0.8; text-transform: initial; } .ucUsedCarList .ofrList .usedcars_blk .author-77 { border-top: 0px solid; padding-top: 0px; margin-top: 0px; position: relative; text-align: left; } .ucUsedCarList .ofrList .usedcars_blk .thumb_content { min-height: 150px; } .ucUsedCarList .ofrList .usedcars_blk .alsPra.micro { font-size: 15px; letter-spacing: -0.15px; padding-top: 0px; color: #001c54; font-weight: 500; opacity: 0.8; line-height: 1.385 !important; min-height: 25px !important; text-transform: uppercase; margin-top: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ucUsedCarList .cropBottom { margin-bottom: 0 !important; } .ucUsedCarList .ofrList .usedcars_blk .thmbPrc { min-height: 75px; margin-top: 4px; } .ucUsedCarList .specsection { border-bottom: 2px solid #e8e8e8; margin-bottom: 17px; padding-bottom: 9px; } .ucUsedCarList .specsection .specline { width: 49%; display: inline-block; margin-bottom: 3px; } .ucUsedCarList .specsection .speclineimg01 { display: inline-block; vertical-align: middle; } .ucUsedCarList .specsection .specicon { width: 24px; } .ucUsedCarList .specsection .speclinetext { font-size: 11px; font-weight: 600; color: #334a77; opacity: 1.0; letter-spacing: -0.45px; display: inline-block; vertical-align: middle; } .ucUsedCarList .specsection .speclineimg01 { display: inline-block; vertical-align: middle; } .ucUsedCarList .ofrList .usedcars_blk .th_prcLft { text-align: left; } .ucUsedCarList .ofrList .usedcars_blk .cashLeft { font-size: 12px; color: #001c54; display: inline-block; width: 50%; opacity: 0.8; line-height: 1.385; } .ucUsedCarList .ofrList .usedcars_blk .cashLeft .priceLbl { display: block; font-size: 12px; opacity: 0.8; } .ucUsedCarList .ofrList .usedcars_blk .cashLeft span { font-size: 20px; font-weight: bold; } .ucUsedCarList .ofrList .usedcars_blk .cashRight { color: #8ab4dd; font-size: 12px; display: inline-block; vertical-align: bottom; width: 48%; text-align: right; padding-right: 11px; letter-spacing: 0.02em; opacity: 0.6; } .delete-input-group { width: 100%; } .delete-input-group .btn.btn-primary.btn-file { width: 100%; } .delete-input-group input + a { display: table-cell; text-align: center; vertical-align: middle; height: var(--fields-height); width: 45px; border-radius: 0px 50px 50px 0px; position: relative; left: -1px; z-index: 9; border: 1px solid var(--border-color); } .delete-input-group .input-group-btn + input { border-radius: 0px !important; } .imagePanel .min265 { max-height: 457px; overflow: auto; } .cstmCheck { margin: 5px auto; text-align: left; padding: 0px; } .cstmCheck li { display: inline-block; margin: 4px auto; margin-right: 20px; } .cstmCheck li > label { display: inline-block; position: relative; cursor: pointer; font-size: 13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; width: 100%; line-height: 1.6; margin: auto; padding: 0px; } .cstmCheck li > label span input { position: absolute; opacity: 0; cursor: pointer; height: 100%; width: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto !important; z-index: 9; } .cstmCheck li > label span label { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 20px; height: 20px; background-color: #fff; border: 1px solid #9e9e9e; border-radius: 5px; margin: 0px 5px 0px 0px; cursor: pointer; position: relative; vertical-align: middle; float: left; font-size: 0px; padding: 0px; } .cstmCheck li > label span label:after { content: ""; display: none; width: 12px; height: 5px; border-left: 2px solid #0075b5; border-bottom: 2px solid #0075b5; position: absolute; transform: rotate(-52deg); top: 5px; left: 3px; } .cstmCheck li > label span input:checked ~ label:after { display: block; } .apptType, .apptSubType { min-width: 15%; } .dvApptSubType { border-top: 1px dashed #ccc; padding-top: 10px; margin-top: 10px; } .cstmCheck.radio li > label span label { border-radius: 50%; } .cstmCheck.radio li > label span input:checked ~ label:after { border: none; width: 10px; height: 10px; border-radius: 50%; background-color: var(--secondary); top: 4px; left: 4px; } .mngEvStyle .custmBxRadio .cstmRdo { width: calc(33.33% - 10px); } .mngEvStyle .custmBxRadio .cstmRdo:nth-child(3n) { margin-right: auto; } .mngEvStyle .custmBxRadio .cstmRdo label { min-width: 100%; } /*- ToolTip -*/ .newtooltip { position: relative; text-decoration: none; cursor: pointer; z-index: 100; display: inline-block; line-height: normal; } .newtooltip span { top: 30px; position: absolute; left: -80px; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28); background: #fff; border-radius: 10px; padding: 15px; font-size: 13px; color: #777; margin: 0px; line-height: normal; font-weight: normal; width: 300px; text-align: center; visibility: hidden; } .newtooltip span:before, .newtooltip span:after { content: ''; position: absolute; top: -11px; left: 93px; margin-left: -12px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgb(0 0 0 / 5%); } .newtooltip span:after { top: -10px; margin-left: -10px; border-width: 8px; border-bottom: 10px solid #ffffff; } .newtooltip:hover span { opacity: 1; visibility: visible; } .lh-normal { line-height: normal; } .disabled { cursor: no-drop !important; opacity: 0.5; } .clipboard { position: relative; min-width: initial !important; animation-duration: 1s; animation-fill-mode: both; margin-left: 10px; } .clipboard .fa { color: var(--secondary); cursor: inherit; } .clipboard-content { display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; opacity: 0; position: absolute; background: #fff; left: calc(50% - 30px); bottom: 23px; padding: 8px 10px; font-size: 13px; z-index: 2; border-radius: 5px; white-space: nowrap; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28); } .clipboard-content:after { content: ""; position: absolute; bottom: -7px; left: calc(50% - 8px); width: 0; height: 0; border-top: 8px solid #ffffff; border-right: 8px solid transparent; border-left: 8px solid transparent; } .clipboard.focus { animation-duration: 0.4s; animation-name: bounceIn; } .clipboard.focus .clipboard-content { visibility: visible; opacity: 1; } .Vip_dy { background: #fff; padding: 15px 0; } .ui-widget-content a { color: var(--body-color); } .fc-theme-standard .fc-scrollgrid { border: none !important; } .fc-theme-standard td:last-child, .fc-theme-standard th:last-child { border-right: 0; } .fc-daygrid-event { display: block !important; white-space: initial !important; padding: 7px !important; margin-bottom: 5px; background-color: #0c74e3; color: #fff; border-color: transparent; border: 2px solid; } .fc-event-time, .fc-event-title { display: inline; } .fc-daygrid-event-dot { display: none; } .fc-event-time { font-weight: bold !important; } .fc-header-toolbar { margin-bottom: 0px !important; padding: 15px 0; } .fc .fc-toolbar-title { font-size: 14px !important; line-height: 24px; } .fc-direction-ltr .fc-button-group > .fc-button:not(:last-child), .fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) { height: 26px; padding: 1px 10px; background-color: #f7f7f7; color: var(--body-color); font-size: 12px; margin: 0; font-weight: normal; text-align: center; border: none; box-shadow: none !important; text-shadow: none; background: transparent !important; } .fc-direction-ltr .fc-toolbar > * > :not(:first-child) { margin-left: 0.75em; height: 26px; padding: 1px 10px; color: var(--body-color); font-size: 12px; font-weight: normal; text-align: center; border: none; box-shadow: none !important; text-shadow: none; background: transparent !important; } .fc .fc-button-primary:disabled, .fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) { color: var(--body-color) !important; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:disabled { color: var(--body-color) !important; border-color: #ccc !important; } .fc-h-event .fc-event-main-frame { display: inline-block !important; font-weight: 600; } .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { min-height: 6em !important; } .fc-event-time, .fc-event-title-container, .fc-event-title .fc-sticky { display: inline !important; } .fc .fc-button-primary:hover { color: #666 !important; border-color: #ccc !important; } .fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus { box-shadow: unset; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #666 !important; } .colorCntrl { display: table-cell; padding-right: 5px; } .colorCntrl input { width: 75px !important; text-align: center; } .colorCntrl label { width: 100%; } .fc-event-selected:after, .fc-event:focus:after { background: transparent; } .fc-event-selected, .fc-event:focus { box-shadow: none; } /*customized-header start*/ .customized-header fieldset { padding-top: 10px; display: flex; align-items: center; height: 152px; } .flex-row { display: flex; /* flex-flow: row wrap; align-items: center; justify-content: space-between;*/ } .flex-row .flex-col { margin-right: 10px; width: calc(33.33% - 6px); } .flex-row .flex-col:last-child { margin-right: 0; } .fieldset-height { width: 100%; } .alignment-controls { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 5px; width: 100%; } .alignment-controls:last-child { margin-bottom: 0; } .alignment-controls > label { padding-right: 5px; margin: 0; line-height: 1; white-space: nowrap; min-width: 100px; } .fieldset-CTA .alignment-controls > label { /*min-width: 85px;*/ } .alignment-controls ul { padding: 0; list-style: none; margin: 0; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; } .alignment-controls li { position: relative; display: inline-flex; cursor: pointer; margin: 3px 10px; margin-left: 0; } .fieldset-settings .alignment-controls li { min-width: 66px; } .alignment-controls li:last-child { margin-right: 0; } .alignment-controls li i { display: inline-flex; justify-content: center; align-items: center; margin-right: 5px; background: red; position: relative; z-index: 1; border: 1px solid #d6d6d6; background-color: #fff; color: #000; border-radius: 4px; width: 28px; height: 28px; margin: 0; } .alignment-controls li i:before { font-size: 17px; opacity: 1; position: absolute; line-height: normal; height: 16px; width: 16px; top: 0; bottom: 0; left: 0; right: 0; display: inherit; justify-content: inherit; align-items: inherit; cursor: inherit; color: #777777; margin: auto; } .alignment-controls li i.fa-stop:before { padding-top: 1px; } .alignment-controls li i.fa-times:before { padding-top: 0px; } .alignment-controls li i.fa-ban:before { font-size: 16px; padding-bottom: 0; padding-left: 0px; padding-right: 0; } .cl_none .cl_none i.fa-ban:before, .ml_none .ml_none i.fa-ban:before, .bt_none .bt_none i.fa-ban:before, .call_none .call_none i.fa-ban:before { padding-left: 1px; padding-right: 0px; } .alignment-controls li .checkmark { border-radius: 50%; background-color: #fff; border: 1px solid #bbbbbb; display: block; flex-shrink: 0; margin-right: 5px; position: relative; height: 20px; width: 20px; transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); cursor: pointer; } .alignment-controls li .checkmark:after { content: " "; display: flex; justify-content: center; align-items: center; opacity: 0; line-height: 1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); font-weight: 900; width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); color: #fff; } .alignment-controls li label { cursor: pointer; line-height: 1; display: inline-flex; align-items: center; padding: 0; margin: 0; margin-right: 0px; } .alignment-controls li .switch { position: relative; height: 20px; } .alignment-controls li .switch label { border-radius: 50px; height: inherit; width: 40px; } .alignment-controls li .switch label:after { top: 0; bottom: 0; margin: auto; width: 10px; height: 10px; } /*Background*/ .bg_white .bg_white .checkmark:after, .bg_black .bg_black .checkmark:after, .bg_trans .bg_trans .checkmark:after, /*Show In Mobile*/ .mobile_show .mobile_show .checkmark:after, .mobile_hide .mobile_hide .checkmark:after, /*Fixed Header*/ .headerfix_no .headerfix_no .checkmark:after, .headerfix_yes .headerfix_yes .checkmark:after, /*Button Style*/ .btnstyle_1 .btnstyle_1 .checkmark:after, .btnstyle_2 .btnstyle_2 .checkmark:after, .btnstyle_3 .btnstyle_3 .checkmark:after { opacity: 1 !important; } /*Show In Mobile*/ .mobile_show .mobile_show i, .mobile_hide .mobile_hide i, /*Fixed Header*/ .headerfix_yes .headerfix_yes i, .headerfix_no .headerfix_no i, /*Company Logo*/ .cl_left .cl_left i, .cl_center .cl_center i, .cl_right .cl_right i, .cl_none .cl_none i, /*Make Logo*/ .ml_left .ml_left i, .ml_center .ml_center i, .ml_right .ml_right i, .ml_none .ml_none i, /*Call*/ .call_center .call_center i, .call_right .call_right i, .call_none .call_none i, /*Buttons*/ .bt_center .bt_center i, .bt_right .bt_right i, .bt_none .bt_none i { color: var(--body-color); background: var(--secondary); border-color: var(--secondary); } /*Show In Mobile*/ .mobile_show .mobile_show i:before, .mobile_hide .mobile_hide i:before, /*Fixed Header*/ .headerfix_yes .headerfix_yes i:before, .headerfix_no .headerfix_no i:before, /*Company Logo*/ .cl_left .cl_left i:before, .cl_center .cl_center i:before, .cl_right .cl_right i:before, .cl_none .cl_none i:before, /*Make Logo*/ .ml_left .ml_left i:before, .ml_center .ml_center i:before, .ml_right .ml_right i:before, .ml_none .ml_none i:before, /*Call*/ .call_center .call_center i:before, .call_right .call_right i:before, .call_none .call_none i:before, /*Buttons*/ .bt_center .bt_center i:before, .bt_right .bt_right i:before, .bt_none .bt_none i:before { opacity: 1; color: inherit; } /*Show In Mobile and Fixed Header*/ .showinmobile-sec .mobile_show .switch label, .fixedheader-sec .headerfix_yes .switch label { background: #2066b1; background: -moz-linear-gradient(top, #2066b1 0%, #2066b1 100%); background: -webkit-linear-gradient(top, #2066b1 0%,#2066b1 100%); background: linear-gradient(to bottom, #2066b1 0%,#2066b1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2066b1', endColorstr='#2066b1',GradientType=0 ); } .showinmobile-sec .mobile_show .switch label:after, .fixedheader-sec .headerfix_yes .switch label:after { left: 25px; } .mobile_show .mobile_hide { } .mobile_hide .mobile_show { } .headerfix_yes .headerfix_no { } .headerfix_no .headerfix_yes { } /*customized-header end*/ /*customized-header-preview start*/ .custom-header { transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .custom-header .header-container { max-width: 1230px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; min-height: 80px; } .custom-header .header-container [class*="block-"] { display: inherit; align-items: inherit; justify-content: inherit; } .custom-header .back-link { display: none; } /*company-logo*/ .custom-header .company-logo { display: none; } .custom-header .logo { display: flex; margin: 16px 0; text-decoration: none; align-items: center; justify-content: flex-start; } .custom-header .logo-image { height: 60px; width: auto; } /*Show In Mobile*/ .custom-header .mobile_show .mobile_show { } /*menu-links*/ .custom-header .menu-links { display: none; } .custom-header .menu-links ul { align-items: center; display: flex; font-weight: 600; list-style: none; margin: 0; padding: 0; } .custom-header .menu-links ul li { margin: 0; } .custom-header .trigger { align-items: center; cursor: pointer; display: inline-flex; font: inherit; justify-content: center; line-height: 1.2; padding: 5px 15px; position: relative; text-decoration: none; text-transform: inherit; font-weight: initial; font-size: 14px; text-align: center; margin: 0 5px; background-color: #666666; color: #fff; min-height: 40px; border-radius: 50px; border: 2px solid #666666; } /*hotline-number*/ .custom-header .hotline-number { display: none; } .custom-header .hotline-number { text-align: right; } .custom-header .hotline-number label { font-size: 14px; color: #838383; margin: 0; } .custom-header .hotline-call { font-size: 26px; color: #000; margin: 0px; } /*make-logo*/ .custom-header .make-logos { display: none; align-items: center; justify-content: end; } .custom-header .makeRpt { margin-left: 10px; max-height: 50px; max-width: 100px; vertical-align: middle; display: inline-flex; justify-content: center; align-items: center; } .custom-header .makeRpt img { max-height: 50px; max-width: 100px; vertical-align: middle; } /*customized-header-contorls*/ /*Background*/ .customized-preview .bg_white .custom-header { background-color: #ffffff; box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15); border-bottom: 1px solid #ececec; } .customized-preview .bg_black .custom-header { background-color: var(--body-color); box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15); border-bottom: 1px solid #ececec; } .customized-preview .bg_black .custom-header * { color: #ffffff !important; } .customized-preview .bg_trans .custom-header { background-image: linear-gradient(45deg,#ebebeb 25%,rgba(239,239,239,0) 25%,rgba(239,239,239,0) 75%,#ebebeb 75%,#ebebeb),linear-gradient(45deg,#ebebeb 25%,rgba(239,239,239,0) 25%,rgba(239,239,239,0) 75%,#ebebeb 75%,#ebebeb); background-color: #fff; background-position: 0 0,10px 10px; background-size: 21px 21px; } /*company-logo*/ .customized-preview .cl_left .block-left .company-logo { display: block; } .customized-preview .cl_center .block-center .company-logo { display: block; } .customized-preview .cl_right .block-right .company-logo { display: block; } .customized-preview .cl_none .company-logo { display: none; } /*menu-links*/ .customized-preview .bt_center .block-center .menu-links { display: block; } .customized-preview .bt_right .block-right .menu-links { display: block; } .customized-preview .bt_none .menu-links { display: none; } .customized-preview .btnstyle_1 .trigger { background: none; border: none; color: inherit; min-height: auto; } .customized-preview .btnstyle_2 .trigger { background: transparent; color: inherit; } .customized-preview .btnstyle_3 .trigger { } /*hotline-number*/ .customized-preview .call_center .block-center .hotline-number { display: block; } .customized-preview .call_right .block-right .hotline-number { display: block; } .customized-preview .call_none .hotline-number { display: none; } /*make-logo*/ .customized-preview .ml_left .block-left .make-logos { display: inline-flex; } .customized-preview .ml_center .block-center .make-logos { display: inline-flex; } .customized-preview .ml_right .block-right .make-logos { display: inline-flex; } .customized-preview .ml_none .make-logos { display: none; } @media screen and (max-width:767px) { .customized-preview .mobile_hide .custom-header { display: none; } } /*customized-header-preview start*/ .min-height-auto { min-height: auto !important; } #gritter-notice-wrapper { pointer-events: all; } .gritter-top { background: transparent; display: none; } .gritter-item { background: transparent; padding: 20px; padding-right: 35px; } .gritter-item-wrapper { background: #fff; border-radius: 15px; border: none; -webkit-box-shadow: 0 14px 39px rgb(0 0 0 / 25%); box-shadow: 0 14px 39px rgb(0 0 0 / 25%); } .gritter-close { display: inline-flex !important; top: 7px; right: 8px; left: auto; background: url('../images/cd-icon-close-black.png'); background-position: center; background-size: contain; text-indent: initial; font-size: 0; } .gritter-without-image { display: flex; align-items: center; } .gritter-without-image .glyphicons { } .gritter-without-image .glyphicons:empty { width: inherit; } .gritter-without-image .gritter-title { padding: 0 !important; text-shadow: none; height: auto; width: auto; text-indent: inherit; font-size: 35px; margin-right: 15px; float: none !important; display: inline-flex; align-items: center; } .gritter-without-image p { font-size: 15px; padding: 0; width: auto; max-width: calc(100% - 45px); float: none !important; display: inline-flex; align-items: center; } .gritter-bottom { background: transparent; display: none; } .chkAction a i { font-size: 15px; } .chkAction a { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background-color: #fff; border: 1px solid var(--border-color); } .chkAction a:hover { opacity: 1; } .chkAction a.ctRemoved i { color: #ff0000; } .chkAction a.ctChecked i { color: #28a745; } .chkAction a.ctUnChecked i { color: #ccc; } .chkAction a.ctUnChecked i { opacity: 0; } .main-heading { display: flex; align-items: center; justify-content: space-between; } .role-manager .main-heading { justify-content: start; } .dash-page { margin-top: 33px; } .dash-page .container { width: 100%; max-width: 100%; } .salesExec-panel .panel-title { padding: 0; padding: 0; } .salesExec-panel .panel-heading { padding: 15px; padding-bottom: 0px; } .salesExec-panel .panel-heading b { font-weight: normal; font-size: 13px; } .salesExec-panel .panel-body { padding: 10px; } .salesExec-panel .tblCstm tr td { padding: 12px 10px; border: none !important; } .salesExec-panel .tblCstm tr td:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; } .salesExec-panel .tblCstm tr td:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; font-size: 16px; font-weight: 600; } .salesExec-panel .tblCstm tr:nth-child(even) > td { background-color: var(--light) !important; } .salesExec-panel .tblCstm tr:nth-child(odd) > td { background-color: #fff !important; } .salesExec-panel .points { border: none; color: #cecdcc; } .offcanvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 998; display: none; } .offcanvas-sidebar { position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #ddd; z-index: 999; transition: left 0.3s ease-in-out; padding: 15px; } .offcanvas-sidebar.active { left: 0; } .sidebarShown, .sidebarShown body { overflow: hidden; } .sidebarShown .modal-open .modal-backdrop.in { opacity: 0; pointer-events: none; } .sidebar.modal { display: block !important; overflow: initial; z-index: 99999; } .sidebar.modal .modal-content { box-shadow: initial; background: initial; border-radius: initial; padding: 0; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 100%; padding-right: 20px !important; height: 100%; } .sidebar.modal .modal-dialog { display: block; background: #fff; -webkit-box-shadow: -8px 0 9px -5px rgba(0, 0, 0, .18) !important; -moz-box-shadow: -8px 0 9px -5px rgba(0,0,0,.18) !important; box-shadow: -8px 0 9px -5px rgba(0, 0, 0, .18) !important; border-radius: 0; padding: 25px 15px 10px 25px; width: 100% !important; max-width: 100%; height: 100%; margin: 0; } .sidebar.modal .modal-dialog .modal-header { padding-left: 0; padding-right: 0; padding-top: 0; } .sidebar.modal .modal-body { padding: 0; } .sidebar { position: fixed; width: 590px; max-width: 95%; display: block; height: 100%; z-index: 1009; top: 0; right: -10%; left: auto; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: all 1s; transition: all 1s; } .sidebar > td { display: block; height: 100%; background: #fff !important; -webkit-box-shadow: -8px 0 9px -5px rgba(0, 0, 0, .18) !important; -moz-box-shadow: -8px 0 9px -5px rgba(0,0,0,.18) !important; box-shadow: -8px 0 9px -5px rgba(0, 0, 0, .18) !important; border-radius: 0px !important; padding: 50px 16px 10px 25px !important; } .sidebar.in, .sidebar.visible { opacity: 1; right: 0; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .sidebar-close { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.5; width: 17px; height: 17px; position: absolute; top: 15px; right: 15px; z-index: 9; cursor: pointer; } tr.rwOpen:after { content: ""; position: fixed; inset: 0; background: #000; width: 100%; height: 100%; z-index: 1000; cursor: default; opacity: 0.5; } .accordian-body.innerBorder { position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 100%; padding: 0 !important; padding-right: 20px !important; height: 100%; } .accordian-body.innerBorder .panel-body { padding: 0; } .sidebar.popAddBook + .modal-backdrop:not(.fade.in) { display: none; } /*---------------------------------------------------------------------------- ul li TABLE LIST -----------------------------------------------------------------------------*/ .ul-table-list { font-size: 13.008px; display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .ul-table-list li { display: inline-flex; padding: 8px; border-radius: 6px; margin-bottom: 0; margin-right: 12px; align-items: center; } .ul-table-list li:last-child { margin-right: 0; } .ul-table-list li label { width: 50%; padding-left: 8px; padding-right: 8px; margin: 0; } .ul-table-list li strong { font-weight: 600; } .ul-table-list li strong:empty:before { content: "-"; } .ul-table-list.list-1 li:nth-child(even) { background: var(--theme-gradient-2); } .ul-table-list.list-2 li:nth-child(4n+3), .ul-table-list.list-2 li:nth-child(4n+4) { background: var(--theme-gradient-2); } .list-1 li { width: 100%; margin: 0; } .list-2 li { width: calc(50% - 6px); } .list-2 li:nth-child(even) { margin-right: 0; } .list-3 li { width: calc(33.33333333% - 5.33333px); } .list-3 li:nth-child(3n+3) { margin-right: 0; } .list-4 li { width: calc(25% - 6.032px); } .list-4 li:nth-child(4n+4) { margin-right: 0; } .popTbl { margin-bottom: 5px; } .popTbl + .ul-table-list { border-top: 1px solid #e5e5e5; padding-top: 15px; } .ul-table-list li select { width: 50%; } .reports-viewcustomer .panel { min-height: calc(100% - 20px); } .reports-viewcustomer .ul-table-list li { justify-content: space-between; } .reports-viewcustomer .ul-table-list li label { width: 55%; } .reports-viewcustomer .ul-table-list li strong { width: 45%; }